/* Tokens */
:root{
  --canvas:#f5f5f7;--surface:#ffffff;--raised:#fbfbfd;--side:rgba(255,255,255,.72);
  --ink:#1d1d1f;--ink2:#6e6e73;--ink3:#86868b;--line:rgba(0,0,0,.09);--line2:rgba(0,0,0,.05);
  --accent:#0071e3;--accent2:#5e5ce6;--on-accent:#fff;--good:#1a9b5a;--warn:#b86e00;--bad:#d1342b;
  --in:#e8710a;--gl:#0071e3;--track:rgba(0,0,0,.07);--glass:rgba(255,255,255,.78);--scrim:rgba(0,0,0,.28);
  --shadow:0 1px 1px rgba(0,0,0,.03),0 12px 40px rgba(0,0,0,.07);
  --r-s:10px;--r-m:16px;--r-l:28px;--ease:cubic-bezier(.22,.8,.2,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --canvas:#08080b;--surface:#121217;--raised:#17171d;--side:rgba(14,14,18,.72);
  --ink:#f5f5f7;--ink2:#a1a1a6;--ink3:#76767c;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.06);
  --accent:#2997ff;--accent2:#7d7aff;--on-accent:#06121f;--good:#4cc38a;--warn:#e6a23c;--bad:#ff7b72;
  --in:#ff9f43;--gl:#2997ff;--track:rgba(255,255,255,.09);--glass:rgba(24,24,30,.78);--scrim:rgba(0,0,0,.55);
  --shadow:0 1px 1px rgba(0,0,0,.4),0 16px 50px rgba(0,0,0,.45);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,p,ul,ol,dl,dd{margin:0}ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.muted{color:var(--ink2)}.small{font-size:13px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.ic{width:18px;height:18px;flex:none}
kbd{font:500 11px var(--font);color:var(--ink2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:var(--raised)}

/* Shell */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 14px 16px;background:var(--side);border-right:1px solid var(--line);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px)}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 18px;font-weight:650;font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.brand:hover{text-decoration:none}
.mark{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 210deg,var(--accent),var(--accent2),#bf5af2,var(--accent));box-shadow:inset 0 0 0 5px var(--canvas);position:relative;flex:none}
.mark::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--ink)}
.mark.big{width:40px;height:40px;box-shadow:inset 0 0 0 8px var(--surface)}.mark.big::after{inset:12px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-s);color:var(--ink2);font-weight:500;transition:background .2s,color .2s}
.nav a:hover{background:var(--track);color:var(--ink);text-decoration:none}
.nav a[aria-current=page]{background:var(--track);color:var(--ink)}
.nav a[aria-current=page] .ic{color:var(--accent)}

.dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
.dot.live{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.signout{margin:auto 0 0}
.signout button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;background:none;border-radius:var(--r-s);color:var(--ink2);font-weight:500}
.signout button:hover{background:var(--track);color:var(--ink)}
.main{min-width:0}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px clamp(16px,3vw,40px);background:var(--side);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid var(--line2)}
.crumb{font-size:15px;font-weight:600;letter-spacing:-.01em}
.bar-actions{display:flex;align-items:center;gap:8px}
.cmd{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink2);min-width:230px;transition:border-color .2s,box-shadow .2s}
.cmd:hover{border-color:var(--ink3)}.cmd span{flex:1;text-align:left}
.iconbtn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2)}
.iconbtn:hover{color:var(--ink);text-decoration:none;border-color:var(--ink3)}
#content{padding:clamp(16px,3vw,40px);max-width:1240px}
#content>*+*{margin-top:clamp(18px,2.4vw,28px)}

/* Buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;transition:transform .2s var(--ease),filter .2s}
.btn:hover{filter:brightness(1.08);text-decoration:none}.btn:active{transform:scale(.97)}
.btn.quiet{background:var(--track);color:var(--ink)}.btn.sm{min-height:38px;padding:0 14px}.btn.full{width:100%}
.field{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);color:var(--ink2)}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input,.field select{flex:1;min-width:0;border:0;background:none;outline:0;height:38px;color:var(--ink)}
.field select{cursor:pointer}.field.select{padding:0 6px}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-s);background:var(--track);gap:2px}
.seg button{min-height:34px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--ink2);font-weight:500;transition:background .2s,color .2s}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.toolbar .search{flex:1 1 220px;max-width:360px}
.count{color:var(--ink2);font-size:13px;margin-top:10px!important}
.notice{padding:10px 14px;border-radius:var(--r-s);border:1px solid var(--warn);color:var(--ink);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.tag{padding:2px 9px;border-radius:999px;background:var(--track);color:var(--ink2);font-size:12px;font-weight:500}
.empty{padding:64px 16px;text-align:center}.empty h1{font-size:22px;letter-spacing:-.02em}.empty p{color:var(--ink2);margin-top:6px}

/* Hero: the one expressive moment */
.hero{position:relative;overflow:hidden;min-height:460px;border-radius:var(--r-l);border:1px solid var(--line);background:radial-gradient(900px 420px at 78% 40%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 70%),radial-gradient(700px 380px at 95% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--surface);isolation:isolate}
#constellation{position:absolute;inset:0 0 0 34%;z-index:0}
#constellation canvas{display:block;width:100%;height:100%}
.hero-copy{position:relative;z-index:1;max-width:520px;padding:clamp(28px,4.5vw,56px);pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-note{color:var(--ink2);font-size:14px;margin-bottom:14px}
.hero h1{font-size:clamp(32px,3.9vw,48px);line-height:1.06;letter-spacing:-.03em;hyphens:manual;font-weight:680;text-wrap:balance}
.hero-sub{margin-top:16px;color:var(--ink2);font-size:17px;line-height:1.45;max-width:44ch;text-wrap:pretty}
.hero-actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.hero-hint{position:absolute;right:20px;bottom:14px;z-index:1;font-size:12px;color:var(--ink3)}
.tip{position:absolute;z-index:3;padding:8px 12px;border-radius:12px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow);font-size:13px;pointer-events:none;transform:translate(-50%,-130%);white-space:nowrap}
.tip b{display:block}.tip span{color:var(--ink2)}
.hero.load .hero-copy>*{animation:rise .8s var(--ease) both}
.hero.load .hero-copy>*:nth-child(2){animation-delay:.08s}.hero.load .hero-copy>*:nth-child(3){animation-delay:.16s}.hero.load .hero-copy>*:nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Stats: one strip, divided, no cards */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden}
.stats>div{padding:22px 24px;display:flex;flex-direction:column;gap:2px}
.stats>div+div{border-left:1px solid var(--line2)}
.num{font-size:clamp(28px,3.4vw,40px);font-weight:650;letter-spacing:-.03em;line-height:1.1}
.lbl{color:var(--ink2);font-size:13px}

/* Panels */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,28px)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:clamp(18px,2vw,26px)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h2{font-size:17px;font-weight:650;letter-spacing:-.02em}.panel-head.sub{margin:26px 0 12px}
.legend{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2)}.legend i{margin-left:6px}
.legend i,.k-in,.k-gl{display:inline-block}.legend i{width:10px;height:10px;border-radius:3px}
.k-in{background:var(--in)}.k-gl{background:var(--gl)}

.rank a{display:grid;grid-template-columns:26px minmax(0,1.1fr) minmax(60px,1fr) 30px;align-items:center;gap:14px;padding:11px 6px;border-radius:var(--r-s);color:var(--ink);transition:background .2s}
.rank li+li a{border-top:1px solid var(--line2)}
.rank a:hover{background:var(--track);text-decoration:none}
.rk{color:var(--ink3);font-size:13px}.rn{font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbar,.track{height:6px;border-radius:99px;background:var(--track);overflow:hidden;display:block}
.rbar i,.track i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width 1.1s var(--ease)}
.in .rbar i,.in .track i,.rbar i.go,.track i.go{width:var(--w)}
.rs{font-weight:650;text-align:right}
.meters{display:grid;gap:16px}.mh{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px}.mh b{font-weight:600}
.hist{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;height:132px;align-items:end}
.hist div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.hist i{width:100%;max-width:44px;height:0;min-height:4px;border-radius:8px 8px 4px 4px;background:var(--track);transition:height 1s var(--ease);position:relative}
.hist i.go{height:var(--h);background:linear-gradient(180deg,var(--accent),var(--accent2))}
.hist b{font-size:13px}.hist span{font-size:11.5px;color:var(--ink3)}
.sectors{display:grid;gap:12px}
.sectors li{display:grid;grid-template-columns:minmax(80px,.8fr) minmax(0,2fr) 58px;gap:12px;align-items:center;font-size:14px}
.sn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbar{display:flex;height:10px;border-radius:99px;background:var(--track);overflow:hidden}
.sbar i{height:100%;width:0;transition:width 1.1s var(--ease)}.sbar i.go{width:var(--w)}
.sv{text-align:right;font-weight:600}
.panel>.small{margin-top:14px}
.feed li{display:grid;grid-template-columns:54px 1fr;gap:14px;padding:12px 0}
.feed li+li{border-top:1px solid var(--line2)}
.feed time{color:var(--ink3);font-size:13px;padding-top:1px}
.feed b{display:block;font-weight:600}.feed span{color:var(--ink2);font-size:14px}

/* Lists */
.rows{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);overflow:hidden}
.row+.row{border-top:1px solid var(--line2)}
.row[hidden]{display:none}
.row-btn{display:grid;grid-template-columns:48px minmax(0,1fr) auto 56px;align-items:center;gap:18px;width:100%;padding:14px 20px;border:0;background:none;text-align:left;transition:background .2s}
.row-btn:hover{background:var(--track)}
.row-main{min-width:0;display:flex;flex-direction:column;gap:1px}
.row-title{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.row-sub{color:var(--ink2);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-date{color:var(--ink3);font-size:13px;text-align:right}
.ring{position:relative;display:inline-grid;place-items:center;width:44px;height:44px}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.2}
.rb{stroke:var(--track)}.rf{stroke:var(--accent);stroke-linecap:round}
.ring b{font-size:14px;font-weight:650}
.ring.lg{width:64px;height:64px}.ring.lg b{font-size:20px}
.glyph{display:inline-flex;align-items:flex-end;gap:3px;height:22px}
.glyph i{width:5px;height:var(--h);border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent2))}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.tile[hidden]{display:none}
.tile-btn{display:flex;flex-direction:column;gap:8px;width:100%;height:100%;min-height:176px;padding:18px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);text-align:left;transition:transform .25s var(--ease),border-color .2s,box-shadow .25s}
.tile-btn:hover{transform:translateY(-2px);border-color:var(--ink3);box-shadow:var(--shadow)}
.tile-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.tile-top b{font-size:16px;letter-spacing:-.01em}
.tile-sub{color:var(--ink2);font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile-fig{margin-top:auto;font-size:28px;font-weight:650;letter-spacing:-.03em;display:flex;align-items:baseline;gap:8px}
.tile-fig small{font-size:13px;color:var(--ink2);font-weight:500;letter-spacing:0}
.tile-foot{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink2)}
.conf{display:inline-flex;align-items:center;gap:6px}.conf i{width:7px;height:7px;border-radius:50%;background:currentColor}
.c-high{color:var(--good)}.c-medium{color:var(--warn)}.c-low{color:var(--bad)}

/* Sheet and palette */
dialog{border:0;padding:0;background:none;color:var(--ink);max-width:none;max-height:none;overflow:visible}
dialog::backdrop{background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .25s}
#sheet{margin:0 0 0 auto;height:100%;width:min(560px,100%)}
.sheet-card{height:100%;display:flex;flex-direction:column;background:var(--glass);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);border-left:1px solid var(--line);box-shadow:var(--shadow);animation:slide .45s var(--ease)}
.sheet-card header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 24px 8px}
.sheet-card h2{font-size:22px;letter-spacing:-.025em;font-weight:680;text-wrap:balance}
.sheet-body{overflow:auto;padding:8px 24px 32px;overscroll-behavior:contain}
.sheet-meta{display:flex;align-items:center;gap:18px;margin:6px 0 20px}
.facts-inline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--ink2);font-size:14px}.facts-inline b{color:var(--ink)}
.facts{display:grid;gap:18px}
.facts dt{font-size:13px;color:var(--ink3);margin-bottom:3px}
.facts dd{line-height:1.5;text-wrap:pretty}
.facts a{margin-right:8px}
.sheet-body>.small{margin-top:22px}
@keyframes slide{from{transform:translateX(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#palette{margin:12vh auto 0;width:min(620px,calc(100% - 24px))}
.pal-card{border-radius:20px;border:1px solid var(--line);background:var(--glass);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);box-shadow:var(--shadow);overflow:hidden;animation:pop .28s var(--ease)}
@keyframes pop{from{transform:scale(.97) translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.pal-input{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);color:var(--ink2)}
.pal-input input{flex:1;height:56px;border:0;outline:0;background:none;font-size:17px;color:var(--ink)}
#pal-list{max-height:min(52vh,420px);overflow:auto;padding:8px}
#pal-list .grp{padding:10px 10px 4px;font-size:12.5px;color:var(--ink3);font-weight:600}
#pal-list a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;color:var(--ink)}
#pal-list a span{color:var(--ink2);font-size:13px}
#pal-list a[aria-selected=true]{background:var(--accent);color:var(--on-accent);text-decoration:none}
#pal-list a[aria-selected=true] span{color:inherit;opacity:.8}
#pal-list .none{padding:22px;text-align:center;color:var(--ink2)}
.pal-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.pal-foot kbd{margin-right:4px}

/* Login */
body.login{display:grid;place-items:center;min-height:100vh;padding:16px;background:radial-gradient(900px 500px at 50% 0%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 70%),var(--canvas)}
#particles{position:fixed;inset:0;z-index:0}
.login-card{position:relative;z-index:1;width:100%;max-width:380px;padding:34px 30px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--glass);backdrop-filter:saturate(180%) blur(30px);-webkit-backdrop-filter:saturate(180%) blur(30px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;text-align:center;align-items:stretch}
.login-card .mark{align-self:center}
.login-card h1{font-size:28px;letter-spacing:-.03em;font-weight:680}
.login-card .field{text-align:left}

/* Responsive: sidebar becomes a bottom tab bar */
@media (max-width:980px){.split{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}#constellation{inset:auto 0 0 0;height:300px}.hero{min-height:620px}.hero-hint{display:none}}
@media (max-width:760px){
  .shell{display:block}
  .side{position:fixed;inset:auto 0 0 0;top:auto;height:auto;flex-direction:row;align-items:center;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--line);z-index:30}
  .brand,.monitor{display:none}
  .nav{flex-direction:row;flex:1;justify-content:space-around}
  .nav a{flex-direction:column;gap:2px;font-size:11px;padding:6px 14px}
  .signout{margin:0}.signout span{display:none}.signout button{padding:10px}
  #content{padding-bottom:96px}
  .cmd{min-width:0}.cmd span,.cmd kbd{display:none}.cmd{width:38px;padding:0;justify-content:center}
  .row-btn{grid-template-columns:44px minmax(0,1fr) 56px;gap:12px;padding:12px 14px}.glyph{display:none}
  .sectors li{grid-template-columns:90px 1fr 52px}
  #sheet{width:100%;margin:auto 0 0;height:88%}.sheet-card{border-left:0;border-top:1px solid var(--line);border-radius:22px 22px 0 0;animation-name:up}
  @keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rbar i,.track i{width:var(--w)}.hist i{height:var(--h)}.sbar i{width:var(--w)}}