:root{
  --bg:#FAFAFA;--surface:#FFFFFF;--ink:#1D1E20;--muted:#5F6368;--faint:#8A8F98;--line:#E6E6EC;
  --acc:#673DE6;--acc-2:#8C6CF0;--acc-ink:#FFFFFF;--dark:#2F1C6A;--darker:#1F1147;--tint:#EFEAFF;--tint-2:#F6F3FF;--gray:#F0F0F2;--lav:#B9A4FF;--lavtxt:#E4DCFF;
  --ok:#00A37A;--ok-tint:#E3F7F0;--warn:#C26A00;--warn-tint:#FFF3E0;--danger:#D93954;--danger-tint:#FDECEF;
  --r:14px;--r-sm:10px;--shadow:0 1px 2px rgba(29,30,32,.06),0 4px 16px rgba(29,30,32,.06);--shadow-lg:0 12px 40px rgba(47,28,106,.18);
  --font:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.01em}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.tiny{font-size:12px}
.row{display:flex;align-items:center;gap:8px}.wrap{flex-wrap:wrap}.grow{flex:1;min-width:0}.col{display:flex;flex-direction:column;gap:8px}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s,box-shadow .15s;white-space:nowrap;line-height:1.2}
.btn:hover{border-color:#cfcfd8;background:#fbfbfd}.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff}.btn.primary:hover{background:#5a31d6}
.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}.btn.dark:hover{background:#3a2482}
.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--gray)}
.btn.danger{color:var(--danger)}.btn.danger:hover{background:var(--danger-tint);border-color:#f4c2cb}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.sm{padding:5px 10px;font-size:13px}.btn.xs{padding:3px 8px;font-size:12px}
.btn.lg{padding:14px 22px;font-size:17px}
.btn.icon{width:34px;height:34px;padding:0}
.btn.on{background:var(--tint);border-color:var(--lav);color:var(--acc)}
.seg{display:inline-flex;background:var(--gray);border-radius:999px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 12px;font-weight:600;font-size:13px;cursor:pointer;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* inputs */
.input,textarea.input,select.input{width:100%;border:1.5px solid var(--line);background:var(--surface);border-radius:var(--r-sm);padding:11px 13px;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--acc);box-shadow:0 0 0 4px rgba(103,61,230,.12)}
textarea.input{resize:vertical;min-height:84px;line-height:1.45}
.input.bad{border-color:var(--danger);box-shadow:0 0 0 4px rgba(217,57,84,.1)}
label.lbl{display:block;font-weight:600;font-size:13px;margin:0 0 6px;color:var(--ink)}
.field{margin-bottom:14px}

/* chips & pills */
.pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:3px 9px;font-size:12px;font-weight:700;letter-spacing:.02em;background:var(--gray);color:var(--muted);white-space:nowrap}
.pill.live{background:var(--danger);color:#fff}.pill.open{background:var(--ok-tint);color:var(--ok)}.pill.closed{background:var(--gray);color:var(--muted)}.pill.acc{background:var(--tint);color:var(--acc)}
.dot{width:8px;height:8px;border-radius:50%;background:#c9c9d2;display:inline-block;flex:none}.dot.on{background:var(--ok)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600;background:var(--gray);color:var(--ink)}
.chip.no{background:var(--danger-tint);color:var(--danger);text-decoration:line-through;text-decoration-thickness:1.5px}
.chip.hit{background:var(--danger);color:#fff;text-decoration:none}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}

/* toasts */
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600;font-size:14px;box-shadow:var(--shadow-lg);animation:tin .2s ease-out}
.toast.err{background:var(--danger)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- shared stage renderers ---------- */
.stage-title{font-size:clamp(22px,3.2vw,40px);font-weight:700}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:start}
.sp-compare{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;align-items:stretch}
.sp-item{background:var(--surface);border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0;animation:pop .35s cubic-bezier(.2,.9,.3,1.2) both}
.sp-item .src{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.sp-item .txt{font-size:clamp(17px,1.8vw,26px);font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.sp-item .who{font-size:14px;color:var(--muted);font-weight:600}
.sp-item .fl{font-size:14px;color:var(--muted)}.sp-item .fl b{color:var(--ink);font-weight:600}
.sp-item img{width:100%;border-radius:10px;display:block;max-height:340px;object-fit:cover}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
.cloud{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center;padding:20px}
.cloud span{font-weight:700;color:var(--dark);line-height:1}
.bars{display:flex;flex-direction:column;gap:12px}
.bar{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;overflow:hidden}
.bar .fill{position:absolute;inset:0 auto 0 0;background:var(--tint);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.bar .in{position:relative;display:flex;gap:12px;align-items:center}
.bar .n{font-weight:800;font-size:22px;color:var(--acc);min-width:40px;text-align:right}
.bar.top .fill{background:#dcd0ff}
.wheel-wrap{position:relative;width:min(78vmin,560px);aspect-ratio:1;margin:0 auto}
.wheel-wrap svg{width:100%;height:100%;display:block;filter:drop-shadow(0 18px 40px rgba(47,28,106,.25))}
.wheel-rot{transform-origin:50% 50%;transition:transform 5.2s cubic-bezier(.12,.6,.08,1)}
.wheel-pointer{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:34px solid var(--ink);filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));z-index:2}
.ladder{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.ladder button{border:1.5px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 0;font-weight:800;font-size:15px;cursor:pointer}
.ladder button.hi{color:var(--acc)}
.ladder button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.ladder-label{font-size:13px;font-weight:600;min-height:18px;color:var(--muted)}