:root{
  --primary:#2563EB;
  --accent:#14B8A6;
  --bg:#F8FAFC;
  --text:#0F172A;
}
body{ background:var(--bg); color:var(--text); }
.app-shell{ min-height:100vh; display:flex; }
.sidebar{
  width:260px; background:#0B1220; color:#E2E8F0;
  position:sticky; top:0; height:100vh; padding:18px 14px;
}
.sidebar .brand{ color:#fff; }
.sidebar .navlink{
  color:#CBD5E1; text-decoration:none; display:flex; align-items:center; gap:10px;
  padding:10px 10px; border-radius:12px; margin:4px 0;
}
.sidebar .navlink:hover{ background:rgba(148,163,184,.12); color:#fff; }
.sidebar .navlink.active{ background:rgba(37,99,235,.25); color:#fff; }
.topbar{
  background:#fff; border-bottom:1px solid #E2E8F0; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.content{ flex:1; }
.content-inner{ padding:18px; }
.kpi{ border:0; border-radius:18px; box-shadow:0 10px 24px rgba(15,23,42,.06); }
.chip{ padding:4px 10px; border-radius:999px; font-size:.78rem; font-weight:700; display:inline-flex; gap:6px; align-items:center; }
.chip.green{ background:rgba(34,197,94,.14); color:#166534; }
.chip.gray{ background:rgba(148,163,184,.18); color:#334155; }