/* Root themes */
:root{
  --bg: #0b0f12;
  --bg-soft: #12171c;
  --text: #e8f1f2;
  --muted:#9fb1ba;
  --accent:#00c853; /* green */
  --accent-2:#151515;
  --card:#0e1419;
  --danger:#d32f2f;
  --warn:#ff9800;
  --soon:#ffd54f;
  --ok:#66bb6a;
  --border: #1f2a33;
  --shadow: 0 8px 25px rgba(0,0,0,.35);
}
.light{
  --bg:#fafafa;
  --bg-soft:#ffffff;
  --text:#101316;
  --muted:#546e7a;
  --accent:#0d7a3a;
  --accent-2:#f3f6f8;
  --card:#ffffff;
  --border:#e0e6ea;
  --danger:#c62828;
  --warn:#ef6c00;
  --soon:#fbc02d;
  --ok:#2e7d32;
}

/* General */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'CruyffSans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;background:var(--bg) url('../assets/img/background.webp') center/cover fixed no-repeat;color:var(--text)}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:1200px;margin:0 auto;padding:20px}

nav{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 18px;background:linear-gradient(180deg, var(--bg-soft), transparent);position:sticky;top:0;backdrop-filter: blur(8px);z-index:10;border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:34px}
.actions{display:flex;align-items:center;gap:10px}
.btn{padding:10px 14px;border-radius:14px;background:var(--accent);color:#06140b;font-weight:700;border:none;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s ease, filter .2s}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn.secondary{background:var(--accent-2);color:var(--text);border:1px solid var(--border)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}

.card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.col-12{grid-column:span 12}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
@media (max-width:900px){
 .col-6,.col-4,.col-3{grid-column:span 12}
 nav .brand span{display:none}
}

/* Table */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table th,.table td{padding:10px 14px;text-align:left}
.table th{font-weight:800;color:var(--muted);font-size:.9rem}
.row{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.03));border:1px solid var(--border);border-radius:14px;overflow:hidden;transition: transform .08s ease, box-shadow .2s}
.row:hover{transform:scale(1.005);box-shadow:0 10px 30px rgba(0,0,0,.25)}

/* Status gradients */
.status-7{background:linear-gradient(90deg, rgba(255,235,59,.15), transparent)}
.status-3{background:linear-gradient(90deg, rgba(255,152,0,.18), transparent)}
.status-0{background:linear-gradient(90deg, rgba(244,67,54,.18), transparent)}

/* Platform colors */
.platform-console{background:linear-gradient(90deg, rgba(41,121,255,.18), transparent)}
.platform-pc{background:linear-gradient(90deg, rgba(76,175,80,.18), transparent)}
.platform-both{background:linear-gradient(90deg, rgba(76,175,80,.16), rgba(41,121,255,.16))}

/* Forms */
.input, select{padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);width:100%}
label{font-size:.85rem;color:var(--muted);display:block;margin-bottom:6px}
.form-row{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.form-row > div{grid-column:span 6}
.toast{position:fixed;right:12px;bottom:12px;background:var(--card);border:1px solid var(--border);padding:12px 16px;border-radius:12px;box-shadow:var(--shadow)}
.small{font-size:.88rem;color:var(--muted)}
.footer{padding:24px;text-align:center;color:var(--muted);border-top:1px solid var(--border);margin-top:40px}
.badge{padding:6px 10px;border-radius:12px;background:var(--accent-2);border:1px solid var(--border)}
/* Animations */
.hover-animate:hover{transform:translateY(-2px);transition:transform .15s ease}