:root{
  --bg:#0b1220; --bg2:#0f172a; --card:#101827; --fg:#e5e7eb; --muted:#9aa4b2;
  --border:rgba(255,255,255,.12); --accent:#60a5fa; --radius:14px; --shadow:0 16px 36px rgba(0,0,0,.35)
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--fg);background:linear-gradient(180deg,var(--bg),var(--bg2));
  font:14px ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

/* Layout */
.layout{display:grid;grid-template-columns:220px 1fr;min-height:100dvh}
@media(max-width:900px){
  .layout{grid-template-columns:1fr}
  #sidebar{position:fixed;inset:0 auto 0 0;width:220px;transform:translateX(-100%);transition:transform .25s;z-index:20}
  #sidebar.open{transform:none}
  #scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:15}
  #scrim.show{display:block}
}

/* Sidebar */
#sidebar{background:#0e162a;border-right:1px solid var(--border);padding:16px 10px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;padding:6px 8px;color:var(--fg)}
nav ul{list-style:none;padding:8px;margin:8px 0 0}
nav li{margin:2px 0}
nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--fg);border:1px solid transparent}
nav a:hover{background:#111c31;border-color:var(--border)}
nav a[aria-current="page"]{outline:2px solid rgba(96,165,250,.6);background:#0f1b33}
.muted{color:var(--muted);font-size:12px}

/* Header */
header{
  padding:12px 16px;background:rgba(11,18,32,.9);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:10;backdrop-filter:blur(6px)
}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
h1{margin:0;font-size:18px;color:#f8fafc}
.wrap{max-width:1100px;margin:16px auto;padding:0 16px}

/* KPIs & Cards */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:12px}
.kpi .label{color:var(--muted);font-size:12px}
.kpi .value{font-size:22px;margin-top:4px;font-weight:600;color:#f9fafb}

.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.grid{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card h2{margin:0 0 10px;font-size:16px;color:#f9fafb}

/* Charts */
.chart-wrap{position:relative;height:320px;width:100%}
.chart-wrap.tall{height:360px}

/* Buttons */
.btn{cursor:pointer;border:1px solid var(--border);background:#111c31;color:var(--fg);padding:6px 10px;border-radius:10px;font-size:12px}
.btn:hover{border-color:var(--accent)}

/* Table */
table{width:100%;border-collapse:collapse;color:var(--fg)}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
thead th{position:sticky;top:0;background:#0e162a;z-index:1;color:#e5e7eb}
tbody tr:hover{background:rgba(96,165,250,.12)}
.scroll{overflow:auto;max-height:420px;border:1px solid var(--border);border-radius:12px}

/* Error box */
.error{display:none;margin:12px 0;padding:10px 12px;border:1px solid #ef4444;color:#fecaca;background:rgba(239,68,68,.08);border-radius:10px}

/* Smooth anchor scrolling & offset for sticky header */
html { scroll-behavior: smooth; }
section[id], div[id] { scroll-margin-top: 80px; }

/* In-page subnav style */
.subnav { list-style:none; padding:8px 8px 0; margin:8px 0 0; border-top:1px dashed rgba(255,255,255,.08); }
.subnav li { margin:2px 0; }
.subnav a { display:block; padding:6px 8px; border-radius:8px; font-size:12px; color:var(--fg); text-decoration:none; border:1px solid transparent; }
.subnav a:hover { background:#111c31; border-color:var(--border); }

/* Floating back-to-top button */
.backtop{
  position:fixed; right:16px; bottom:16px; z-index:30;
  padding:10px 12px; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.35);
  display:none;
}
.backtop.show{ display:inline-block; }