:root{
  --bg:#070b15; --panel:#0b1220; --card:#0f172a; --border:#1e293b;
  --text:#e5e7eb; --muted:#94a3b8; --gold:#ffd86b; --accent:#60a5fa;
  --danger:#ef4444; --ok:#22c55e; --shadow:0 16px 40px rgba(0,0,0,.35);
  --r:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 20% -10%, rgba(255,216,107,.12), transparent 55%),
             radial-gradient(1000px 600px at 90% 0%, rgba(96,165,250,.12), transparent 55%),
             var(--bg);
  color:var(--text);
}
a{color:inherit}
.container{max-width:1120px;margin:0 auto;padding:16px}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  padding:16px;
  margin:14px 0;
}
.h1{font-size:22px;letter-spacing:.2px;margin:0 0 6px}
.muted{color:var(--muted)}
.grid{display:grid;gap:12px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:720px){
  .container{padding:22px}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .h1{font-size:26px}
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;text-decoration:none;
  border:1px solid transparent;font-weight:800;letter-spacing:.2px;
  background:var(--gold);color:#0b1220;cursor:pointer;
}
.btn.secondary{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10);color:var(--text)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.14);color:var(--text)}
.btn.small{padding:8px 10px;border-radius:10px;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--muted);font-size:12px}
.flash{padding:10px 12px;border-radius:14px;margin:12px 0;border:1px solid rgba(255,255,255,.10)}
.flash.ok{background:rgba(34,197,94,.12);color:#bbf7d0;border-color:rgba(34,197,94,.25)}
.flash.err{background:rgba(239,68,68,.12);color:#fecaca;border-color:rgba(239,68,68,.25)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:top}
.table th{color:var(--muted);font-weight:800;text-align:left}
input,select,textarea{
  width:100%;padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);color:var(--text);outline:none
}
input:focus,select:focus,textarea:focus{border-color:rgba(255,216,107,.55);box-shadow:0 0 0 4px rgba(255,216,107,.12)}
.navbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(12px);
  background:rgba(7,11,21,.55);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(135deg, rgba(255,216,107,.95), rgba(96,165,250,.75));
  box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.brand-name{font-weight:900;letter-spacing:.2px}
.nav-actions{display:flex;align-items:center;gap:10px}
.hamburger{
  width:42px;height:42px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.hamburger span{display:block;width:18px;height:2px;background:rgba(229,231,235,.9);position:relative}
.hamburger span:before,.hamburger span:after{content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(229,231,235,.9)}
.hamburger span:before{top:-6px}.hamburger span:after{top:6px}
.drawer{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(0,0,0,.55);
}
.drawer.open{display:block}
.drawer-panel{
  position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);
  background:rgba(11,18,32,.98);
  border-left:1px solid rgba(255,255,255,.10);
  padding:16px;overflow:auto
}
.drawer a{display:block;padding:12px 12px;border-radius:14px;text-decoration:none;color:var(--text);border:1px solid transparent}
.drawer a:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
.footer{padding:24px 16px;text-align:center;color:var(--muted)}
.kpi{display:flex;flex-direction:column;gap:6px}
.kpi b{font-size:20px}

/* Mobile card stacks */
.m-stack{display:block}
.m-cards{display:grid;gap:12px}
.m-card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--card);
  border:1px solid rgba(255,255,255,.10); border-radius:var(--r); padding:14px; box-shadow:var(--shadow)}
.m-row{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin:6px 0}
.m-row .k{color:var(--muted);font-weight:700;font-size:12px;min-width:92px}
.m-row .v{color:var(--text);font-weight:700;text-align:right;word-break:break-word}
.m-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.hide-md{display:block}
.show-md{display:none}
@media(min-width:720px){
  .hide-md{display:none}
  .show-md{display:block}
}