:root {
  --bg: #080b12; --panel: #111725; --panel-2: #171f30; --line: #263149;
  --text: #f5f7fb; --muted: #8d98aa; --gold: #f6bd55; --blue: #55a7ff; --red: #ff6174;
  --green: #5ce1a1; --shadow: 0 24px 70px rgba(0,0,0,.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text); background: var(--bg); font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 18% -10%, rgba(46,112,190,.26), transparent 34rem),
  radial-gradient(circle at 85% 0%, rgba(210,84,99,.18), transparent 29rem), var(--bg); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; letter-spacing:-.04em; font-size:21px; }
.mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid #dba74a; color:var(--gold); transform:rotate(45deg); background:#1e1a12; box-shadow:0 0 28px rgba(246,189,85,.18); }
.mark span { transform:rotate(-45deg); }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; color:var(--gold); font-weight:800; font-size:11px; }
.status-pill { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:7px; }
.status-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:20px; }
.card { background:linear-gradient(145deg, rgba(19,26,41,.96), rgba(12,17,28,.96)); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.hero { padding:26px; overflow:hidden; position:relative; }
.hero::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(246,189,85,.08); border-radius:50%; right:-140px; top:-150px; }
.match-line { display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:center; margin:18px 0 24px; }
.team { font-size:clamp(22px,4vw,42px); font-weight:900; letter-spacing:-.045em; }
.team.red { text-align:right; }
.versus { width:43px; height:43px; display:grid; place-items:center; border-radius:50%; background:#0a0e17; border:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:800; }
.blue-text { color:var(--blue); } .red-text { color:var(--red); }
.round-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; border-top:1px solid var(--line); padding-top:22px; }
.round-title { margin:5px 0 0; font-size:clamp(25px,4vw,40px); letter-spacing:-.04em; }
.timer { font-size:34px; font-weight:900; font-variant-numeric:tabular-nums; color:var(--gold); }
.timer.closed { color:var(--red); font-size:20px; }
.progress { height:4px; background:#242d40; border-radius:99px; margin:17px 0 20px; overflow:hidden; }
.progress > div { height:100%; background:linear-gradient(90deg,var(--gold),#ff7f5d); transition:width .2s linear; }
.search { width:100%; padding:13px 16px; color:var(--text); background:#0b101b; border:1px solid var(--line); border-radius:11px; outline:none; }
.search:focus { border-color:#9e7a3b; box-shadow:0 0 0 3px rgba(246,189,85,.09); }
.champions { display:grid; grid-template-columns:repeat(auto-fill,minmax(105px,1fr)); gap:8px; max-height:375px; overflow:auto; padding:12px 4px 2px 0; scrollbar-color:#39445a transparent; }
.champion { min-height:58px; padding:9px; border-radius:10px; border:1px solid var(--line); background:#151d2c; color:var(--text); text-align:left; display:flex; align-items:center; gap:9px; transition:.15s ease; }
.champion:hover:not(:disabled) { border-color:#a77f3d; background:#1d2637; transform:translateY(-1px); }
.champion.selected { border-color:var(--gold); background:#2a2418; box-shadow:inset 0 0 0 1px rgba(246,189,85,.35); }
.champion:disabled { opacity:.45; cursor:not-allowed; }
.initials { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:linear-gradient(135deg,#2a3954,#22283a); color:#b9c9e1; font-size:10px; font-weight:900; }
.champion-name { font-size:12px; font-weight:750; line-height:1.1; }
.side-card { padding:20px; align-self:start; }
.card-title { margin:0; font-size:16px; letter-spacing:-.02em; }
.tabs { display:flex; gap:4px; padding:4px; background:#0a0f19; border-radius:9px; margin:15px 0; }
.tab { flex:1; border:0; border-radius:7px; padding:8px; background:transparent; color:var(--muted); font-size:12px; font-weight:750; }
.tab.active { background:#222b3d; color:var(--text); }
.leader-row { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:11px 2px; border-bottom:1px solid rgba(38,49,73,.65); }
.rank { color:var(--muted); font-size:12px; font-weight:800; }
.leader-row:first-child .rank { color:var(--gold); }
.leader-name { font-size:13px; font-weight:750; overflow:hidden; text-overflow:ellipsis; }
.leader-meta { color:var(--muted); font-size:10px; margin-top:2px; }
.score { font-weight:900; font-variant-numeric:tabular-nums; }
.empty { padding:38px 10px; text-align:center; color:var(--muted); font-size:13px; }
.draft-strip { display:flex; gap:5px; margin-top:18px; overflow:auto; padding-bottom:5px; }
.draft-step { width:28px; height:34px; flex:none; border-radius:6px; display:grid; place-items:center; border:1px solid var(--line); color:#566177; font-size:9px; font-weight:900; }
.draft-step.blue.done { background:rgba(85,167,255,.16); color:var(--blue); }
.draft-step.red.done { background:rgba(255,97,116,.14); color:var(--red); }
.draft-step.current { border-color:var(--gold); color:var(--gold); }
.notice { padding:24px; text-align:center; }
.notice h1 { margin:8px 0; font-size:34px; }
.notice p { color:var(--muted); max-width:530px; margin:0 auto; }
.toast { position:fixed; right:20px; bottom:20px; background:#202a3c; border:1px solid #39455d; padding:12px 16px; border-radius:10px; box-shadow:var(--shadow); font-size:13px; z-index:20; }
.modal { position:fixed; inset:0; background:rgba(4,6,10,.82); backdrop-filter:blur(12px); display:grid; place-items:center; z-index:30; }
.modal.hidden, .hidden { display:none !important; }
.modal-card { width:min(430px,calc(100% - 32px)); padding:28px; }
.modal-card h1 { font-size:34px; letter-spacing:-.05em; margin:10px 0 8px; }
.modal-card p { color:var(--muted); line-height:1.55; }
.field { display:grid; gap:7px; margin:16px 0; }
.field label { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:800; }
.field input,.field select { width:100%; padding:12px 13px; border-radius:9px; border:1px solid var(--line); background:#0a0f19; color:var(--text); outline:none; }
.button { border:0; border-radius:9px; padding:12px 15px; background:var(--gold); color:#17120a; font-weight:900; }
.button.secondary { background:#222b3c; color:var(--text); border:1px solid #344057; }
.button.danger { background:#3a1820; color:#ff8c99; border:1px solid #612a35; }
.button:disabled { opacity:.4; cursor:not-allowed; }
.control-grid { display:grid; grid-template-columns:360px minmax(0,1fr); gap:20px; }
.control-panel { padding:21px; }
.buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.action-list { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-top:15px; }
.action-item { display:flex; justify-content:space-between; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:11px; color:var(--muted); }
.action-item strong { color:var(--text); }
.help { color:var(--muted); font-size:12px; line-height:1.55; }
.automation-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr); gap:20px; }
.capture-card { padding:18px; }
.capture-stage { position:relative; margin-top:14px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#04070c; aspect-ratio:16/9; }
.capture-stage canvas { display:block; width:100%; height:100%; cursor:crosshair; }
.automation-side { display:grid; gap:14px; align-self:start; }
.candidate { padding:15px; border:1px solid #70562c; border-radius:11px; background:linear-gradient(135deg,#292317,#171a23); }
.candidate-name { margin:3px 0; font-size:27px; letter-spacing:-.04em; }
.confidence { color:var(--gold); font-weight:900; }
.suggestions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.suggestion { border:1px solid var(--line); background:#182131; color:var(--text); border-radius:7px; padding:7px 9px; font-size:11px; }
.automation-log { max-height:135px; overflow:auto; font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:#9da9bb; }
.automation-log div { border-bottom:1px solid rgba(38,49,73,.55); padding:5px 0; }
.detected-text { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.detected-text button { border:1px solid var(--line); border-radius:6px; background:#192234; color:#dbe4f3; padding:5px 7px; font-size:10px; }
@media(max-width:900px){.automation-grid{grid-template-columns:1fr}}
@media(max-width:860px){ .layout,.control-grid{grid-template-columns:1fr}.side-card{order:2}.shell{width:min(100% - 20px,700px)}.hero{padding:18px}.champions{max-height:330px}.topbar{align-items:flex-start}.status-pill{display:none} }

body.overlay-page { background:transparent; overflow:hidden; }
.overlay-shell { width:100vw; height:100vh; padding:28px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.overlay-panel { width:min(680px,65vw); padding:20px 22px; border-radius:14px; background:rgba(8,12,20,.92); border:1px solid rgba(105,124,157,.5); box-shadow:0 18px 55px rgba(0,0,0,.42); backdrop-filter:blur(10px); }
.overlay-row { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.overlay-title { margin:5px 0 0; font-size:29px; letter-spacing:-.04em; }
.overlay-votes { display:flex; gap:8px; margin-top:14px; }
.overlay-vote { flex:1; min-width:0; padding:9px 11px; border-radius:8px; background:#172033; border:1px solid #2c3952; }
.overlay-vote strong,.overlay-vote span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.overlay-vote span { color:var(--muted); font-size:10px; margin-top:3px; }
.overlay-board { width:280px; padding:17px; border-radius:14px; background:rgba(8,12,20,.92); border:1px solid rgba(105,124,157,.5); }
.reveal-banner { margin:0 0 16px; padding:11px 14px; border-radius:9px; border:1px solid rgba(92,225,161,.28); background:rgba(38,112,80,.16); color:#baf5d8; font-size:13px; font-weight:750; }