:root{
  --bg:#ffffff;
  --ink:#0b0c10;
  --ink-dim:#475569;
  --card:#ffffff;
  --muted:#f8fafc;
  --pri:#2563eb;
  --ok:#16a34a;
  --err:#dc2626;
  --bd:#e5e7eb;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial;color:var(--ink);background:var(--bg)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{background:var(--card);border-bottom:1px solid var(--bd)}
.brand a{font-weight:600;color:var(--ink)}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;align-items:center}
.main-nav>ul>li{position:relative}
.main-nav a{display:block;padding:12px 8px;color:var(--ink)}
.main-nav .has-sub:hover .sub{display:block}
.main-nav .sub{display:none;position:absolute;background:var(--muted);border:1px solid var(--bd);padding:6px 0;min-width:240px;z-index:10}
.main-nav .sub li a{padding:8px 12px}
.main-nav .sep{border-top:1px solid var(--bd);margin:6px 0}
.auth-box{margin-left:auto}
.btn{display:inline-block;padding:8px 12px;border:1px solid var(--bd);border-radius:8px;background:transparent;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--pri);border-color:var(--pri);color:#fff}
.badge{display:inline-block;background:var(--muted);padding:4px 8px;border-radius:999px;border:1px solid var(--bd);color:var(--ink)}
.grid{display:grid;gap:12px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--bd);padding:12px;border-radius:12px}
.table{width:100%;border-collapse:collapse;border:1px solid var(--bd)}
.table th,.table td{border-top:1px solid var(--bd);padding:8px;text-align:left}
.form-row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0}
.field{min-width:200px;flex:1}
label{display:block;margin-bottom:4px;color:var(--ink-dim)}
.input{width:100%;padding:8px;border:1px solid var(--bd);border-radius:8px;background:#fff;color:var(--ink)}
.alert{padding:10px;border-radius:8px;border:1px solid var(--bd);background:#fff7ed;margin:10px 0}
.alert.ok{border-color:#c6f6d5;color:#065f46;background:#ecfdf5}
.alert.err{border-color:#fecaca;color:#7f1d1d;background:#fef2f2}
.site-footer{margin-top:24px;border-top:1px solid var(--bd);padding:12px 0;background:var(--card);color:var(--ink-dim)}
@media (max-width:800px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.main-nav .sub{position:static}}

/* Optional: respect system dark mode */
@media (prefers-color-scheme: dark){
  :root{--bg:#0b0c10;--ink:#f5f7fa;--ink-dim:#cfd8e3;--card:#111218;--muted:#1a1c24;--pri:#3b82f6;--ok:#10b981;--err:#ef4444;--bd:#2a2d39}
  .input{background:#0f1117;color:var(--ink)}
  .alert{background:#1a1c24}
}