.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.shell{display:flex;min-height:100vh}
.side{position:sticky;top:0;flex:none;display:flex;flex-direction:column;width:260px;height:100vh;padding:18px 14px;background:#0E0E0E;border-right:1px solid var(--line);overflow-y:auto}
.side-brand{display:flex;align-items:center;gap:12px;padding:4px 10px 16px;font:700 22px Cinzel,serif;letter-spacing:.05em;color:var(--gold)}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#F1D77A,#B8962E);color:#0B0B0B;font:700 20px Cinzel,serif}
.side-nav{flex:1}
.nav-head{margin:18px 10px 8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#767676}
.nav-head:first-child{margin-top:4px}
.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:7px 10px;margin-bottom:2px;border:0;border-radius:10px;background:none;color:#CFCFCF;font:500 15px Inter,system-ui,sans-serif;text-align:left;cursor:pointer}
.nav-item:hover{background:var(--panel2);color:#fff}
.nav-item.on{background:rgba(212,175,55,.12);color:var(--gold2);box-shadow:inset 3px 0 0 var(--gold)}
.nav-item:focus-visible,.burger:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.nav-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px}
.nav-icon svg{width:19px;height:19px}
.nav-icon.big{width:50px;height:50px;border-radius:14px}
.nav-icon.big svg{width:26px;height:26px}
.tone-gold{background:rgba(212,175,55,.16);color:#E6C65C}
.tone-blue{background:rgba(76,154,255,.16);color:#6CB0FF}
.tone-green{background:rgba(63,185,80,.16);color:#56D364}
.tone-purple{background:rgba(167,139,250,.16);color:#B9A2FF}
.tone-cyan{background:rgba(34,211,238,.16);color:#3DDCF2}
.tone-orange{background:rgba(251,146,60,.16);color:#FFA35C}
.tone-pink{background:rgba(244,114,182,.16);color:#F88BC4}
.tone-teal{background:rgba(45,212,191,.16);color:#48E0CC}
.tone-indigo{background:rgba(129,140,248,.16);color:#9AA3FF}
.tone-red{background:rgba(248,113,113,.16);color:#FF8A8A}
.side-foot{padding-top:12px;border-top:1px solid var(--line)}
.side-foot form{margin:0}
.who-card{display:flex;align-items:center;gap:12px;padding:6px 10px 12px;min-width:0}
.who-card div{min-width:0}
.who-card strong{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-card span{color:var(--mute);font-size:12px}
.avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#F1D77A,#B8962E);color:#0B0B0B !important;font:700 14px Inter,system-ui,sans-serif !important}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:14px;padding:13px 28px;border-bottom:1px solid var(--line);color:var(--mute);font-size:14px}
.burger,.scrim{display:none}
.main .narrow{margin-top:6vh}

/* dashboards */
.hero{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 28px;margin-bottom:20px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(ellipse at 0% 0%,rgba(212,175,55,.16),transparent 55%),var(--panel)}
.hero h1{margin:0 0 6px;font-size:28px}
.hero p{margin:0}
.eyebrow{margin-bottom:10px !important;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.ring{--p:0;display:grid;place-items:center;flex:none;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--gold) calc(var(--p) * 1%),var(--panel2) 0)}
.ring div{display:grid;place-items:center;align-content:center;width:88px;height:88px;border-radius:50%;background:var(--panel)}
.ring b{font:600 22px "JetBrains Mono",monospace;color:var(--gold)}
.ring span{font-size:11px;color:var(--mute)}
.section-title{margin:26px 0 12px;font:600 13px Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:20px}
.tile{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text)}
a.tile:hover{border-color:var(--gold);color:var(--text)}
.tile b{display:block;font:600 26px/1.1 "JetBrains Mono",monospace}
.tile small{display:block;margin-top:4px;color:var(--mute);font-size:13px}
.tile strong{display:block;font-size:15px;font-weight:600}
.bar-row{display:grid;grid-template-columns:130px 1fr 40px;gap:12px;align-items:center;padding:8px 0}
.bar{height:10px;border-radius:99px;background:var(--panel2);overflow:hidden}
.bar span{display:block;height:100%;border-radius:99px}
.bar .b-gold{background:#D4AF37}
.bar .b-blue{background:#4C9AFF}
.bar .b-purple{background:#A78BFA}
.bar .b-green{background:#3FB950}

@media(max-width:900px){
  .side{position:fixed;z-index:30;left:0;top:0;transform:translateX(-100%);transition:transform .2s ease}
  .nav-toggle:checked ~ .shell .side{transform:none}
  .nav-toggle:checked ~ .shell .scrim{display:block;position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6)}
  .burger{display:block;cursor:pointer}
  .topbar{padding:10px 16px}
}
@media(prefers-reduced-motion:reduce){.side{transition:none}}

/* ---- every page: full width, a color per menu, banner headers ---- */
.main > main{width:100%}
.main main{--accent:#E6C65C;--accent-bg:rgba(212,175,55,.15)}
.main main[data-tone=blue]{--accent:#6CB0FF;--accent-bg:rgba(76,154,255,.15)}
.main main[data-tone=green]{--accent:#56D364;--accent-bg:rgba(63,185,80,.15)}
.main main[data-tone=purple]{--accent:#B9A2FF;--accent-bg:rgba(167,139,250,.15)}
.main main[data-tone=cyan]{--accent:#3DDCF2;--accent-bg:rgba(34,211,238,.15)}
.main main[data-tone=orange]{--accent:#FFA35C;--accent-bg:rgba(251,146,60,.15)}
.main main[data-tone=pink]{--accent:#F88BC4;--accent-bg:rgba(244,114,182,.15)}
.main main[data-tone=teal]{--accent:#48E0CC;--accent-bg:rgba(45,212,191,.15)}
.main main[data-tone=indigo]{--accent:#9AA3FF;--accent-bg:rgba(129,140,248,.15)}
.main main[data-tone=red]{--accent:#FF8A8A;--accent-bg:rgba(248,113,113,.15)}

.main .wrap > .row:has(> h1),.main .wrap > h1{padding:20px 24px;margin:0 0 20px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;background:radial-gradient(ellipse at 0% 0%,var(--accent-bg),transparent 60%),var(--panel)}
.main .wrap > .row:has(> h1) h1,.main .wrap > h1{color:var(--accent)}
.main .card{border-radius:14px}
.main .card > h2,.main .card > .row > h2{color:var(--accent)}
.main .grid .stat{border-radius:14px;border-left:4px solid var(--accent)}
.main .grid .stat b{color:var(--accent)}
.main .grid .stat:nth-child(4n+2){border-left-color:#56D364}
.main .grid .stat:nth-child(4n+2) b{color:#56D364}
.main .grid .stat:nth-child(4n+3){border-left-color:#FFA35C}
.main .grid .stat:nth-child(4n+3) b{color:#FFA35C}
.main .grid .stat:nth-child(4n+4){border-left-color:#B9A2FF}
.main .grid .stat:nth-child(4n+4) b{color:#B9A2FF}
.main .meter span,.main .progress span{background:var(--accent)}
.topbar .nav-icon{width:30px;height:30px}
.topbar strong{color:var(--text);font-weight:600}
.topbar .crumb{color:#5A5A5A}

/* fill-width: content uses all the space beside the menu */
.main .wrap{max-width:none;padding:28px 36px}
@media(max-width:900px){.main .wrap{padding:16px}}
.brand-logo{max-height:40px;max-width:190px;background:#fff;padding:4px 8px;border-radius:8px}