:root{
  --bg:#0b0f14; --card:#121823; --text:#e8eefc; --muted:#9fb0d0;
  --primary:#3b82f6; --danger:#ef4444; --border:#223047;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
[data-theme="light"]{ --bg:#f6f7fb; --card:#ffffff; --text:#111827; --muted:#6b7280; --primary:#2563eb; --danger:#dc2626; --border:#e5e7eb; }
[data-theme="dark"]{  --bg:#0b0f14; --card:#121823; --text:#e8eefc; --muted:#9fb0d0; --primary:#3b82f6; --danger:#ef4444; --border:#223047; }
[data-theme="red"]{   --bg:#0c0a0a; --card:#151010; --text:#fff1f2; --muted:#fecdd3; --primary:#ef4444; --danger:#fb7185; --border:#3f1d1d; }
[data-theme="blue"]{  --bg:#06111f; --card:#0b1a2f; --text:#e0f2fe; --muted:#7dd3fc; --primary:#38bdf8; --danger:#fb7185; --border:#123a60; }

*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial;background:var(--bg);color:var(--text);}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:18px}
.grid{display:grid;gap:14px}
@media(min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.h1{font-size:22px;margin:0 0 10px}
.muted{color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{background:var(--primary);color:white;border:0;border-radius:14px;padding:10px 14px;cursor:pointer}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-danger{background:var(--danger)}
.input, select, textarea{
  width:100%;padding:10px 12px;border-radius:14px;border:1px solid var(--border);
  background:transparent;color:var(--text);outline:none;
}
label{font-size:13px;color:var(--muted)}
.topbar{position:sticky;top:0;background:rgba(0,0,0,.15);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:9}
.topbar-inner{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 18px}
.brand{font-weight:700}
.badge{background:var(--danger);color:white;border-radius:999px;padding:2px 8px;font-size:12px}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mobile-toggle{display:none}
@media(max-width:820px){
  .mobile-toggle{display:inline-flex}
  .nav{display:none}
  body.nav-open .nav{display:flex}
}
.table{width:100%;border-collapse:collapse}
.table td,.table th{border-bottom:1px solid var(--border);padding:10px;text-align:left;font-size:14px}
hr{border:0;border-top:1px solid var(--border);margin:14px 0}