:root{
  --bg:#0d1117;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --accent:#5b8aff;
  --accent-2:#10b6a6;
  --danger:#ef4444;
  --ok:#10b981;
  --warn:#f59e0b;
  --shadow:0 10px 30px rgba(0,0,0,0.25);
  color-scheme: dark light;
}
html.theme-light:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --text:#0b0d11;
  --muted:#5b616b;
  --accent:#335dff;
  --accent-2:#0fb5a9;
  --danger:#c62828;
  --ok:#1b9853;
  --warn:#b98100;
  --shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* Base */
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;
}
a{ color:var(--accent); text-decoration:none }
.container{ max-width:1000px; margin:30px auto; padding:0 16px }

/* Navbar */
.nav{
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(1.4) blur(8px);
  background:color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.nav .brand{ display:flex; gap:12px; align-items:center; padding:10px 16px }
.nav .brand .logo{ width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2)) }
.nav .brand h1{ font-size:18px; margin:0 }
.nav .actions{ margin-left:auto; display:flex; gap:8px; align-items:center; padding:10px 16px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px;
  background:var(--accent); color:#fff; border:none;
  cursor:pointer; box-shadow:var(--shadow)
}
.btn.secondary{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,.14); box-shadow:none }
.btn.ghost{ background:transparent; border:1px dashed rgba(255,255,255,.2); box-shadow:none }
.btn.danger{ background:var(--danger) }

/* Cards / Tables */
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.08);
  border-radius:16px; box-shadow:var(--shadow);
  padding:18px; margin:12px 0
}
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table th,.table td{ text-align:left; padding:10px 12px }
.table tr{ background:color-mix(in oklab, var(--card) 92%, transparent); border-radius:12px }
.table tr th{ font-weight:600; color:var(--muted) }

.meta{ color:var(--muted); font-size:12px }
.small{ font-size:12px; color:var(--muted) }
.sep{ border:none; border-top:1px solid rgba(255,255,255,.1); margin:24px 0 }

/* Grids */
.grid{ display:grid; gap:16px }
.cols-3{ grid-template-columns:1fr 1fr 1fr }
@media (max-width:900px){ .cols-3{ grid-template-columns:1fr } }

/* Tags & alerts */
.kv .tag,.tag{
  display:inline-block; font-size:12px; padding:4px 8px;
  border-radius:999px; background:rgba(99,102,241,.12);
  border:1px solid rgba(99,102,241,.3); margin:2px 4px 0 0
}
.warn{
  background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);
  color:#f59e0b; border-radius:12px; padding:12px
}
.error{
  background:rgba(239,68,68,.12);
  border:1px solid rgba(239,68,68,.3);
  color:#ef4444; border-radius:12px; padding:12px
}

/* Inputs */
textarea,input,select{
  width:100%;
  background:color-mix(in oklab, var(--card) 94%, transparent);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px; margin:6px 0
}
textarea{ min-height:180px }

/* Misc */
.toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:#232a3a; color:var(--text); cursor:pointer
}
html.theme-light .theme-toggle{ background:#eef1f7; border-color:#d9dfeb }