:root{
  --bg:#edf4fd; --panel:#ffffff; --ink:#0a1a33; --dim:#566d8f; --line:#c9d9ef;
  --violet:#1f5fe0; --gold:#b97900; --pink:#d4155f; --cyan:#0a8aa8; --up:#0b8a4a; --down:#c4173b;
  --glow:rgba(31,95,224,.14);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#061326; --panel:#0c1f3d; --ink:#eaf2ff; --dim:#8ea6c9; --line:#1d3a63;
    --violet:#5b9dff; --gold:#ffc93c; --pink:#ff4d8d; --cyan:#3ee3ff; --up:#4dffa0; --down:#ff5c7a;
    --glow:rgba(91,157,255,.22);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#061326; --panel:#0c1f3d; --ink:#eaf2ff; --dim:#8ea6c9; --line:#1d3a63;
  --violet:#5b9dff; --gold:#ffc93c; --pink:#ff4d8d; --cyan:#3ee3ff; --up:#4dffa0; --down:#ff5c7a;
  --glow:rgba(91,157,255,.22);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Chakra Petch",ui-sans-serif,system-ui,sans-serif; font-size:15px; line-height:1.45;
  background-image:radial-gradient(circle at 15% -10%,var(--glow),transparent 45%),radial-gradient(circle at 100% 30%,var(--glow),transparent 40%);
}
a{color:var(--cyan)}

.wrap{max-width:1280px;margin:0 auto;padding:20px 16px 60px}

header{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:end;border-bottom:2px solid var(--violet);padding-bottom:14px}
h1{font-family:"Unbounded",system-ui,sans-serif;font-weight:900;font-size:clamp(28px,6vw,56px);line-height:.95;margin:0;letter-spacing:-.02em}
h1 small{display:block;font-size:.26em;font-weight:400;color:var(--dim);letter-spacing:0;margin-top:8px;font-family:"Chakra Petch",sans-serif}
.clock{text-align:right;font-weight:700}
.clock .t{font-family:"Unbounded",sans-serif;font-size:20px;color:var(--gold);font-variant-numeric:tabular-nums}
.clock .l{color:var(--dim);font-size:11px;font-weight:600}

.ticker{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);padding:8px 0;font-weight:600;font-size:13px;margin-top:10px}
.ticker-track{display:inline-block;color:var(--pink);animation:scroll 40s linear infinite;padding-left:100%}
@keyframes scroll{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none;padding-left:0}}

.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.sync{display:inline-flex;align-items:center;font-size:13px;font-weight:600;color:var(--dim);margin-right:auto}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);margin-right:6px;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}

button,.btn{
  font:inherit;font-weight:700;font-size:13px;background:transparent;color:var(--ink);
  border:1px solid var(--violet);padding:8px 12px;border-radius:2px;cursor:pointer;
}
button:hover,.btn:hover{background:var(--violet);color:var(--panel)}
button:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-small{padding:5px 9px;font-size:12px}
.btn-primary{border-color:var(--up);color:var(--up)}
.btn-primary:hover{background:var(--up);color:var(--panel)}
.btn-danger{border-color:var(--down);color:var(--down)}
.btn-danger:hover{background:var(--down);color:var(--panel)}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:10px}
@media (max-width:900px){.grid{grid-template-columns:1fr}}

.board{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow-x:auto}
table{border-collapse:collapse;width:100%;min-width:880px;font-variant-numeric:tabular-nums}
th{font-size:10.5px;color:var(--dim);font-weight:700;text-align:right;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;background:var(--panel)}
th:nth-child(-n+4){text-align:left}
th abbr{text-decoration:underline dotted;cursor:help}
td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
td:nth-child(-n+4){text-align:left}
.role{color:var(--dim);font-size:13px;font-style:italic}
tr.row{cursor:pointer}
tr.row:hover td{background:var(--glow)}
tr.row:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.rank{font-family:"Unbounded",sans-serif;font-weight:700;color:var(--dim);width:36px}
.name{font-weight:700;font-size:15px}
.tier{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:2px;border:1px solid currentColor;white-space:nowrap}
.t-Ω{color:var(--gold)} .t-Σ{color:var(--violet)} .t-Δ{color:var(--cyan)} .t-λ{color:var(--pink)} .t-∅{color:var(--dim)}
.pos{color:var(--up)} .neg{color:var(--down)}
.final{font-family:"Unbounded",sans-serif;font-weight:700;font-size:16px}
.arrow{font-size:11px;margin-left:4px}

tr.detail td{background:var(--bg);text-align:left;white-space:normal;padding:14px 16px}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 18px;font-size:13px}
.detail-grid div b{display:block;color:var(--dim);font-size:11px;font-weight:600}
.formula{margin-top:12px;font-size:12px;color:var(--dim);border-left:3px solid var(--violet);padding-left:10px;word-break:break-word}

.empty-state{color:var(--dim);font-size:0.9rem;padding:1.2rem}
.empty-state.small{padding:0.25rem 0}

aside{display:flex;flex-direction:column;gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:16px}
.card h2{font-family:"Unbounded",sans-serif;font-size:15px;margin:0 0 10px}

ol.codex{margin:0;padding-left:20px;font-size:12.5px;color:var(--dim)}
ol.codex li{margin-bottom:8px}
ol.codex strong{color:var(--ink)}

.activity-list{
  list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;
  max-height:280px;overflow-y:auto;
}
.activity-item{border:1px solid var(--line);border-radius:4px;padding:0.55rem 0.7rem;font-size:0.83rem;color:var(--ink)}
.activity-item .activity-time{display:block;color:var(--dim);font-size:0.72rem;margin-top:0.15rem}

.hint{color:var(--dim);font-size:0.85rem;margin-top:0}
.hint.small{font-size:0.75rem;margin:0.4rem 0 0}
.stack-form{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.5rem}
.stack-form input,.stack-form select{
  font:inherit;background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:2px;padding:0.5rem 0.65rem;
}
.error-text{color:var(--down);font-size:0.82rem}

.admin-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.5rem}
.admin-badge{font-size:0.78rem;font-weight:700;color:var(--up);background:var(--glow);padding:0.2rem 0.55rem;border-radius:999px}

.admin-section{border-top:1px solid var(--line);padding:0.65rem 0}
.admin-section summary{cursor:pointer;font-weight:700;font-size:0.92rem}

.preset-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:0.6rem}
.preset-btn{font-size:11.5px}

.setup-screen{max-width:600px;margin:3rem auto}
.setup-screen p{color:var(--dim)}
.setup-screen code{background:var(--bg);padding:0.1rem 0.35rem;border-radius:3px}

.floater{
  position:fixed;left:0;top:0;width:clamp(60px,10vw,100px);aspect-ratio:1;border-radius:50%;object-fit:cover;z-index:50;pointer-events:none;
  border:4px solid var(--gold);box-shadow:0 0 24px var(--glow);will-change:transform;transition:border-color .2s,filter .2s;
}
.floater.corner{animation:corner .8s}
@keyframes corner{0%,100%{transform-origin:center}50%{filter:brightness(1.6) saturate(2)}}