:root{
  --bg: #0a0f1a;
  --bg-elev: #0e1526;
  --bg-elev-2:#101a30;
  --text: #e7f0ff;
  --muted:#9fb0cc;
  --brand:#1fe27a;
  --brand-600:#19c867;
  --danger:#ff5b6e;
  --warning:#ffb020;
  --ok:#37e0a1;
  --border:#1c2942;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --radius: 14px;
  --radius-sm: 10px;
  --spacing: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
:root.light{
  --bg: #f7f9fc;
  --bg-elev: #ffffff;
  --bg-elev-2:#f2f6ff;
  --text: #0b1324;
  --muted:#4b5a77;
  --brand:#078a4b;
  --brand-600:#067c44;
  --danger:#d43b4d;
  --warning:#b07300;
  --ok:#067c58;
  --border:#cfd9ee;
  --shadow: 0 6px 20px rgba(14,21,38,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: var(--font); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Typography */
h1,h2,h3{margin:0 0 .5rem 0; line-height:1.15}
h1{font-size:28px; font-weight:800}
h2{font-size:20px; font-weight:700; opacity:.95}
h3{font-size:16px; font-weight:700; opacity:.9}
p{margin:.5rem 0}

/* Layout */
.container{ max-width:1200px; margin:16px auto; padding:0 14px; }
.page{ display:grid; gap: var(--spacing); }
.grid{ display:grid; gap:var(--spacing); }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 960px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{ grid-template-columns: 1fr; } }

/* Cards */
.card{
  background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius);
  padding:var(--spacing); box-shadow: var(--shadow);
}
.card.faint{box-shadow:none}
.card .card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.card .card-actions{display:flex; gap:8px}

/* Buttons */
.btn{
  appearance:none; border:1px solid var(--border); background:var(--bg-elev-2); color:var(--text);
  padding:8px 12px; border-radius:12px; cursor:pointer; font-weight:600;
}
.btn:hover{filter:brightness(1.05)}
.btn.brand{ background:linear-gradient(180deg, var(--brand), var(--brand-600)); color:#00190d; border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn.danger{ background:linear-gradient(180deg,#ff6a7a,#ff3d58); border-color:#ff6a7a55; color:#fff }
.btn.warn{ background:linear-gradient(180deg,#ffd480,#ffb74a); border-color:#ffb74a; color:#3a2500 }
.btn.small{ padding:6px 10px; border-radius:10px; font-size:13px }

/* Inputs */
.input, input, select, textarea{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:var(--bg-elev-2); color:var(--text); outline:none;
}
.input:focus, input:focus, select:focus, textarea:focus{ box-shadow:0 0 0 3px rgba(31,226,122,.2); border-color: var(--brand); }
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.form-grid .full{ grid-column:1/-1; }
label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }

/* Tables */
.table-wrap{ overflow:auto; border-radius:var(--radius); border:1px solid var(--border); }
table{ width:100%; border-collapse:collapse; background:var(--bg-elev); }
th,td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; }
thead th{ position:sticky; top:0; background:var(--bg-elev-2); color:var(--muted); z-index:1; }
tbody tr:hover{ background:rgba(255,255,255,.03); }
td.right, th.right{ text-align:right; }
.table--zebra tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }

/* Badges */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); background:var(--bg-elev-2) }
.badge.ok{ background:#0e2a1a; color:#caffdf; border-color:#195a3a }
.badge.warn{ background:#2b220f; color:#ffe6b0; border-color:#8a6b1a }
.badge.danger{ background:#2a0e14; color:#ffccd4; border-color:#5a1923 }

/* Topbar nav */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:linear-gradient(180deg, #0b1324 0%, #0b1324cc 100%); border-bottom:1px solid var(--border);
  backdrop-filter: blur(8px);
}
.brand a{ font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none }
.brand .accent{ color:var(--brand) }
.nav{ display:flex; align-items:center; gap: 6px; margin-left:8px; }
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap: 6px; }
.nav li.group{ position:relative; }
.nav > ul > li > a{
  padding:8px 10px; border-radius:10px; display:flex; align-items:center; gap:8px;
  border:1px solid transparent; background:transparent; color:var(--text); text-decoration:none;
}
.nav > ul > li:hover > a{ background:var(--bg-elev-2); border-color:var(--border); }
.dropdown{
  position:absolute; top:100%; left:0; min-width:240px; background:var(--bg-elev);
  border:1px solid var(--border); border-radius:12px; padding:8px; display:none; box-shadow:var(--shadow);
}
.nav li.group:hover .dropdown{ display:block; }
.dropdown a{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 10px; border-radius:8px; color:var(--text); text-decoration:none;
}
.dropdown a:hover{ background:var(--bg-elev-2); }

.right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Mobile nav */
.burger{ display:none; }
@media (max-width: 960px){
  .burger{ display:inline-block; }
  .nav{ display:none; position:absolute; left:0; right:0; top:56px; padding:10px 12px; background:var(--bg-elev); border-bottom:1px solid var(--border); }
  .nav.open{ display:block; }
  .nav ul{ display:block; }
  .nav li.group{ display:block; }
  .nav > ul > li > a{ display:block; }
  .dropdown{ position:static; display:block; border:none; box-shadow:none; padding:4px 0 10px; }
}

/* Tabs */
.tabs{ display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:10px }
.tabs .tab{ padding:8px 10px; border-radius:10px 10px 0 0; background:transparent; cursor:pointer }
.tabs .tab.active{ background:var(--bg-elev-2); border:1px solid var(--border); border-bottom-color: transparent }

/* Toasts */
.toasts{ position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; z-index:2000 }
.toast{ background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow:var(--shadow) }

/* Utilities */
.m-0{margin:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}
.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.flex{display:flex}.gap-1{gap:6px}.gap-2{gap:12px}.items-center{align-items:center}.justify-between{justify-content:space-between}
.hidden{display:none}