/* Dashboard shell (16 Oct 2026): dark sidebar + page frame shared by
   /dashboard (overview) and /dashboard/billing. Tokens match builder-v2. */
:root{--bg:#0b0d12;--bg2:#111318;--card:#15181f;--line:#262a33;--ink:#f3f4f6;--muted:#9aa1ad;--dim:#6b7280;--accent:#00bbff;--green:#34d399;--red:#f87171}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400}
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.dash{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.banner{grid-column:1/-1;background:#fff;color:#0c1220;text-align:center;padding:11px 16px;font-size:14px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.banner .b{background:#0c1220;color:#fff;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:500}
.banner[hidden]{display:none}

.side{border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;padding:0 6px}
.brand svg{width:22px;height:22px}
.ws{margin:22px 0 10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink)}
.ws .av{width:24px;height:24px;border-radius:6px;background:#1f2330;display:grid;place-items:center;font-size:11px;color:var(--muted);flex:none}
.ws .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws .sub{color:var(--dim);font-size:11.5px;display:block}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#c7cbd3;font-size:14.5px}
.nav a:hover{background:#171a21;color:#fff}
.nav a.on{background:#1b1f27;color:#fff}
.nav a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;opacity:.8;flex:none}
.nav hr{border:0;border-top:1px solid var(--line);margin:12px 0}
.me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:14px}
.me .av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#a78bfa);flex:none}
.me .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.me small{display:block;color:var(--dim);font-size:12px}
.me small.on{color:var(--green)}
.me .out{margin-left:auto;color:var(--dim);font-size:12.5px}
.me .out:hover{color:#fff}

.main{padding:36px 48px 80px;max-width:1260px;position:relative;width:100%}
.main h2{font-size:28px;font-weight:600;margin-bottom:28px}
.lbl{color:var(--muted);font-size:14px;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg2)}
.kpi{padding:16px 22px;border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .t{color:var(--muted);font-size:13px;margin-bottom:10px}
.kpi .v{font-size:22px;font-weight:600}
.kpi .d{color:var(--dim);font-size:12px;margin-top:6px}
.kpi .d.up{color:var(--green)}
.panel{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:22px 26px;margin-top:14px}
.panel .t{color:var(--muted);font-size:14px}
.panel .v{font-size:30px;font-weight:600;margin:6px 0 20px}
.panel .v small{font-size:13px;color:var(--muted);font-weight:400;margin-left:10px}
.chart{height:260px;border-bottom:1px solid var(--line);position:relative;background:repeating-linear-gradient(to bottom,transparent 0 51px,#1b1f27 51px 52px)}
.chart .ax{position:absolute;bottom:-24px;display:flex;justify-content:space-between;width:100%;color:var(--dim);font-size:12px}
.chart svg{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;right:0;top:-54px;display:flex;gap:20px;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:14px;border-top:2px solid #fff;vertical-align:middle;margin-right:6px}
.legend i.d{border-top-style:dashed;border-color:var(--dim)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px}
.list{font-size:13.5px}
.list>div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);color:#c7cbd3}
.list>div:last-child{border:0}
.list span{color:var(--dim);white-space:nowrap}
.list .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{color:var(--dim);font-size:13.5px;padding:24px 12px;text-align:center;border:1px dashed var(--line);border-radius:10px;margin-top:6px;line-height:1.5}
.empty a{color:#fff;text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:9px;background:#fff;color:#0c1220;font-weight:500;font-size:14px}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}
.btn[disabled]{opacity:.5;cursor:default}

@media (max-width:1023px){
  .dash{grid-template-columns:1fr}
  .side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px}
  .side .ws,.side .me{display:none}
  .nav{display:flex;flex-wrap:wrap;gap:4px;margin-top:12px}
  .nav hr{display:none}
  .main{padding:24px 16px 120px}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi:nth-child(3){border-right:0}
  .kpi:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .two{grid-template-columns:1fr}
  .legend{position:static;margin-bottom:10px}
}