/* RoundFlow — Phase 0 prototype styles
   Tokens and type follow the approved RoundFlow Control Room design. */

/* ============ TOKENS ============ */
:root{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#eceef2; --surface-3:#e2e5eb;
  --border:#d7dbe2; --border-strong:#b9c0cb;
  --text:#191d24; --text-muted:#5c6472; --text-faint:#7c8492;
  --accent:#b86f00; --accent-ink:#ffffff; --accent-soft:#fdeecb;
  --live:#0c8062; --live-soft:#dcf3ea; --live-ink:#ffffff;
  --warn:#b84c08; --warn-soft:#fbe6d6;
  --danger:#c22b4a; --danger-soft:#fbdfe5;
  --info:#2e5fc4; --info-soft:#dfe8fb;
  --sideA:#c47a00; --sideB:#2e5fc4; --side-ink:#ffffff;
  --stA:#c47a00; --stB:#2e5fc4; --stC:#0f8f6c; --stD:#c22b6f; --stE:#0e7c99; --stG:#6f7f0e; --stH:#b5502a; --stJ:#5b6475; --stF:#6a4fd0;
  --coin0:#2e9e5b; --coin1:#2e6fc4; --coin2:#a34fd6; --coin3:#d6394f;
  --shadow:0 1px 2px rgba(20,22,30,.06), 0 8px 24px -12px rgba(20,22,30,.18);
  --radius-s:8px; --radius-m:14px; --radius-l:20px;
  --font-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-ui:'Manrope','Noto Sans Thai','Leelawadee UI',Tahoma,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0f1115; --surface:#171a20; --surface-2:#1e222a; --surface-3:#272c36;
    --border:#2c313c; --border-strong:#3a4150;
    --text:#eef0f4; --text-muted:#a0a8b6; --text-faint:#7d8494;
    --accent:#ffb545; --accent-ink:#1a1200; --accent-soft:#3a2a0c;
    --live:#3fd9a4; --live-soft:#0f2e26; --live-ink:#04241a;
    --warn:#ff9a4d; --warn-soft:#3a2411;
    --danger:#ff6b85; --danger-soft:#3a1420;
    --info:#7ea6ff; --info-soft:#122343;
    --sideA:#ffb545; --sideB:#7ea6ff; --side-ink:#0b0d12;
    --stA:#ffb545; --stB:#7ea6ff; --stC:#3fd9a4; --stD:#ff7eb6; --stE:#5fd0ec; --stG:#c9dc5a; --stH:#ff9a6b; --stJ:#aab4c6; --stF:#b3a1ff;
    --coin0:#34b36a; --coin1:#4a86e0; --coin2:#b56ee6; --coin3:#ea5268;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1115; --surface:#171a20; --surface-2:#1e222a; --surface-3:#272c36;
  --border:#2c313c; --border-strong:#3a4150;
  --text:#eef0f4; --text-muted:#a0a8b6; --text-faint:#7d8494;
  --accent:#ffb545; --accent-ink:#1a1200; --accent-soft:#3a2a0c;
  --live:#3fd9a4; --live-soft:#0f2e26; --live-ink:#04241a;
  --warn:#ff9a4d; --warn-soft:#3a2411;
  --danger:#ff6b85; --danger-soft:#3a1420;
  --info:#7ea6ff; --info-soft:#122343;
  --sideA:#ffb545; --sideB:#7ea6ff; --side-ink:#0b0d12;
  --stA:#ffb545; --stB:#7ea6ff; --stC:#3fd9a4; --stD:#ff7eb6; --stE:#5fd0ec; --stG:#c9dc5a; --stH:#ff9a6b; --stJ:#aab4c6; --stF:#b3a1ff;
  --coin0:#34b36a; --coin1:#4a86e0; --coin2:#b56ee6; --coin3:#ea5268;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);
  color-scheme:dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:14px; line-height:1.45; }
h1,h2,h3,h4{ text-wrap:balance; margin:0; }
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tabular{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--font-mono); }
.muted{ color:var(--text-muted); }
.faint{ color:var(--text-faint); }
.hint{ font-size:12px; color:var(--text-faint); line-height:1.5; }
.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.stack{ display:flex; flex-direction:column; gap:12px; }
.spacer{ flex:1; }
[hidden]{ display:none !important; }

/* ============ APP SHELL ============ */
.app{ display:flex; min-height:100vh; }
.rail{
  width:224px; flex:none; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:20px;
  padding:calc(20px + env(safe-area-inset-top,0px)) 12px 20px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{ display:flex; align-items:center; gap:10px; padding:0 6px; }
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background:linear-gradient(155deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--sideB)));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--accent-ink);
}
.brand-name{ font-weight:800; font-size:15.5px; letter-spacing:-.2px; line-height:1.15; }
.brand-sub{ font-size:11px; color:var(--text-faint); letter-spacing:.02em; }
.nav{ display:flex; flex-direction:column; gap:3px; }
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 10px; border-radius:var(--radius-s); border:1px solid transparent; background:none;
  color:var(--text-muted); font-weight:600; font-size:13.5px; cursor:pointer;
}
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
.nav-item .count{ margin-left:auto; }
.nav-ic{ width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; }
.nav-ic svg{ width:18px; height:18px; }
.rail-foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.panel{ display:flex; flex-direction:column; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-m); padding:10px; }
.label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; }
.seg{ display:flex; gap:4px; flex-wrap:wrap; }
.seg button{
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  border-radius:7px; padding:5px 9px; cursor:pointer; font-size:11.5px; font-weight:700;
}
.seg button.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:calc(14px + env(safe-area-inset-top,0px)) 24px 12px;
  border-bottom:1px solid var(--border); background:var(--surface);
  position:sticky; top:0; z-index:5;
}
.topbar h1{ font-size:19px; letter-spacing:-.2px; }
.topbar .sub{ font-size:12.5px; color:var(--text-faint); margin-top:2px; }
.pills{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pill{ display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:5px 11px 5px 9px; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--text-muted); border:none; }
.pill.live{ background:var(--live-soft); color:var(--live); }
.pill.off{ background:var(--danger-soft); color:var(--danger); }
.pill.alert{ background:var(--warn-soft); color:var(--warn); cursor:pointer; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }
.mobile-role{ display:none; }

.view{ padding:22px 24px 90px; flex:1; min-width:0; }

.bottom-nav{ display:none; }
@media (max-width:880px){
  .rail{ display:none; }
  .topbar{ padding-inline:16px; }
  .view{ padding:16px 16px 96px; }
  .mobile-role{ display:flex; gap:6px; align-items:center; }
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:20;
    background:var(--surface); border-top:1px solid var(--border);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    overflow-x:auto; scrollbar-width:none;
  }
  .bn-item{
    display:flex; flex-direction:column; align-items:center; gap:3px; flex:1 0 64px;
    background:none; border:none; color:var(--text-faint); font-size:10px; font-weight:700;
    padding:4px 4px; cursor:pointer; white-space:nowrap;
  }
  .bn-item svg{ width:19px; height:19px; }
  .bn-item.active{ color:var(--accent); }
}

/* ============ COMMON UI ============ */
.section-title{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.section-title h2{ font-size:16px; }
.section-title .count{ font-size:12px; color:var(--text-faint); font-weight:600; }
.section{ margin-bottom:28px; }
.grid{ display:grid; gap:14px; }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow); }
.card-pad{ padding:16px; }
.btn{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  border-radius:var(--radius-s); padding:8px 14px; font-weight:700; font-size:13px;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; line-height:1.2;
  transition:filter .1s, transform .05s; text-decoration:none; min-height:36px;
}
.btn:hover{ filter:brightness(.97); }
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.btn-live{ background:var(--live); color:var(--live-ink); border-color:transparent; }
.btn-danger{ background:var(--danger); color:#fff; border-color:transparent; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--text-muted); }
.btn-sm{ padding:5px 10px; font-size:12px; border-radius:7px; min-height:30px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:800; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.badge-wait,.badge-idle,.badge-pending,.badge-draft{ background:var(--surface-3); color:var(--text-muted); }
.badge-prep{ background:var(--info-soft); color:var(--info); }
.badge-called{ background:var(--warn-soft); color:var(--warn); }
.badge-live,.badge-running{ background:var(--live-soft); color:var(--live); }
.badge-skip,.badge-paused{ background:var(--danger-soft); color:var(--danger); }
.badge-done,.badge-na,.badge-void{ background:var(--surface-3); color:var(--text-faint); }
.badge-bye{ background:var(--surface-2); color:var(--text-faint); border:1px dashed var(--border-strong); }
.stage-chip{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:22px; height:22px; border-radius:6px; font-family:var(--font-display); font-weight:800; font-size:13px;
  background:var(--st); color:var(--surface);
}
.stage-chip.lg{ width:34px; height:34px; border-radius:9px; font-size:18px; }
.st-A{ --st:var(--stA); } .st-B{ --st:var(--stB); } .st-C{ --st:var(--stC); } .st-D{ --st:var(--stD); }
.st-E{ --st:var(--stE); } .st-G{ --st:var(--stG); } .st-H{ --st:var(--stH); } .st-J{ --st:var(--stJ); } .st-F{ --st:var(--stF); }

.banner{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-radius:10px; padding:9px 13px; font-size:12.5px; font-weight:700; margin-bottom:14px; }
.banner.info{ background:var(--info-soft); color:var(--info); }
.banner.warn{ background:var(--warn-soft); color:var(--warn); }
.banner.danger{ background:var(--danger-soft); color:var(--danger); }
.banner.ok{ background:var(--live-soft); color:var(--live); }
.banner .btn{ margin-left:auto; }

/* forms */
.field-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.field-row > label, .form-label{ font-size:12.5px; font-weight:700; color:var(--text-muted); }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.form-grid label{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:700; color:var(--text-muted); }
.input, .select, textarea.input{
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; min-height:36px; width:100%;
}
.input.num{ width:76px; text-align:center; font-family:var(--font-mono); }
.select.auto{ width:auto; }
textarea.input{ font-family:var(--font-mono); font-size:12px; font-weight:500; line-height:1.5; min-height:160px; resize:vertical; }
.checkbox{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; cursor:pointer; }
.checkbox input{ width:18px; height:18px; accent-color:var(--accent); }

/* tables */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface); }
table.table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.table th{ text-align:left; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:800; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2); }
.table td{ padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td{ border-bottom:none; }
.table td.num{ font-family:var(--font-mono); text-align:right; }

.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.stat{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.stat .v{ font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1; }
.stat .k{ font-size:11.5px; color:var(--text-faint); font-weight:700; margin-top:4px; }
.stat.error .v{ color:var(--danger); } .stat.warn .v{ color:var(--warn); } .stat.ok .v{ color:var(--live); }

.lvl{ display:inline-flex; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:99px; }
.lvl-error{ background:var(--danger-soft); color:var(--danger); }
.lvl-warning{ background:var(--warn-soft); color:var(--warn); }
.lvl-notice{ background:var(--info-soft); color:var(--info); }

/* ============ MODAL ============ */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:100; padding:20px;
}
.modal{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-l); max-width:480px; width:100%; box-shadow:var(--shadow); max-height:88vh; overflow:auto; }
.modal.wide{ max-width:680px; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px 10px; position:sticky; top:0; background:var(--surface); z-index:1; }
.modal-head h3{ font-size:16px; }
.modal-close{ width:34px; height:34px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted); cursor:pointer; font-size:15px; flex:none; }
.modal-body{ padding:4px 18px 18px; display:flex; flex-direction:column; gap:12px; }
.modal-foot{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; padding:0 18px 18px; }
.pick-list{ display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; }
.pick{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); cursor:pointer; }
.pick:hover{ border-color:var(--accent); }
.pick .grow{ flex:1; min-width:0; }

/* ============ TOAST ============ */
.toast-wrap{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:max-content; max-width:calc(100vw - 32px); }
@media (max-width:880px){ .toast-wrap{ bottom:80px; } }
.toast{ background:var(--text); color:var(--bg); padding:9px 16px; border-radius:99px; font-size:12.5px; font-weight:700; box-shadow:var(--shadow); opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; text-align:center; }
.toast.show{ opacity:1; transform:none; }
.toast.error{ background:var(--danger); color:#fff; }

/* ============ CONTROL CENTER ============ */
.stage-grid{ grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.stage-card{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.stage-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.stage-name{ display:flex; align-items:center; gap:10px; }
.stage-title{ font-weight:800; font-size:14.5px; }
.bar{ height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.bar-fill{ height:100%; background:var(--st, var(--accent)); border-radius:99px; }
.progress-row{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-faint); font-weight:600; margin-top:5px; }
.queue-list{ display:flex; flex-direction:column; gap:6px; }
.queue-row{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:8px; background:var(--surface-2); font-size:12.5px; min-width:0; }
.queue-row .mnum{ color:var(--text-faint); font-weight:700; font-family:var(--font-mono); font-size:11px; flex:none; }
.queue-row .vs{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stage-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.stage-actions .btn{ flex:1; justify-content:center; }
.two-col{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px; }
@media (max-width:1100px){ .two-col{ grid-template-columns:1fr; } }
.alert-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:10px; background:var(--warn-soft); color:var(--warn); font-weight:700; font-size:12.5px; }
.alert-row .btn:first-of-type{ margin-left:auto; }
.ann-row{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.ann-row:last-child{ border-bottom:none; }
.ann-row .t{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); flex:none; width:44px; padding-top:1px; }
.ann-row .x{ flex:1; }
.ann-row.done{ color:var(--text-faint); }

/* ============ BRACKET ============ */
.bracket-toolbar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.bracket-toolbar .seg button{ font-size:12px; padding:6px 10px; }
/* bracket screen: the page itself does not scroll; everything scrolls in .bscroll (one scrollbar) */
.app.fill{ height:100vh; height:100dvh; overflow:hidden; }
.app.fill .main{ height:100%; overflow:hidden; }
.app.fill .view{ display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.bheader{ flex:none; }
.bscroll{ flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  border:1px solid var(--border); border-radius:var(--radius-m); background:var(--surface-2); position:relative; }
.bsticky{ position:sticky; left:0; padding:0 12px; box-sizing:border-box; }
.bsticky .legend{ margin-top:0; padding-bottom:12px; }
@media (max-width:880px){
  .app.fill .view{ padding-top:10px; padding-bottom:84px; }
  .app.fill .topbar .sub, .app.fill .binfo .hint, .app.fill .bheader .banner.info{ display:none; }
  .app.fill .topbar{ padding-top:calc(8px + env(safe-area-inset-top,0px)); padding-bottom:8px; }
  .app.fill .bracket-toolbar{ gap:6px; margin-bottom:8px; }
  .app.fill .bracket-toolbar .seg button{ padding:5px 8px; }
  .app.fill .binfo{ margin-bottom:8px !important; }
}
.bcanvas{ position:relative; transform-origin:0 0; }
.bsection-label{ position:absolute; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.rlabel{ position:absolute; font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--text-faint); text-align:center; white-space:nowrap; }
.bmatch{
  position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:9px;
  box-shadow:var(--shadow); cursor:pointer; overflow:hidden; display:flex; flex-direction:column;
  font-size:12px; transition:border-color .12s, box-shadow .12s;
}
.bmatch:hover, .bmatch:focus-visible{ border-color:var(--accent); }
.bmatch.st-live{ border-color:var(--live); box-shadow:0 0 0 1px var(--live), var(--shadow); }
.bmatch.st-called{ border-color:var(--warn); }
.bmatch.st-skip{ border-color:var(--danger); border-style:dashed; }
.bmatch.st-void, .bmatch.st-na{ opacity:.4; box-shadow:none; }
.bmatch.st-bye{ box-shadow:none; }
.bmatch.hl{ box-shadow:0 0 0 2px var(--info), var(--shadow); }
.bmatch.swap-src{ box-shadow:0 0 0 2px var(--accent), var(--shadow); }
.bhead{ display:flex; align-items:center; gap:5px; padding:2px 7px; font-size:9.5px; font-weight:800; color:var(--text-faint); background:var(--surface-2); border-bottom:1px solid var(--border); height:17px; }
.bhead .code{ font-family:var(--font-mono); }
.bhead .fld{ margin-left:auto; color:var(--warn); }
.bmatch.st-live .bhead .fld{ color:var(--live); }
.sdot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--text-faint); }
.sdot.s-live{ background:var(--live); } .sdot.s-called{ background:var(--warn); } .sdot.s-prep{ background:var(--info); }
.sdot.s-skip{ background:var(--danger); } .sdot.s-done{ background:var(--border-strong); } .sdot.s-wait{ background:var(--text-faint); }
.bslot{ display:flex; align-items:center; gap:5px; padding:0 7px; height:22px; min-width:0; }
.bslot + .bslot{ border-top:1px solid var(--border); }
.bslot .nm{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.bslot .tm{ font-size:10px; font-weight:800; color:var(--text-faint); flex:none; }
.bslot .org{ font-size:9.5px; font-weight:800; flex:none; padding:0 4px; border-radius:4px; background:var(--st); color:var(--surface); }
.bslot .sc{ font-family:var(--font-mono); font-weight:700; font-size:11px; color:var(--text-muted); flex:none; min-width:12px; text-align:right; }
.bslot.win .nm, .bslot.win .sc{ color:var(--live); }
.bslot.lose .nm{ color:var(--text-faint); }
.bslot.ph .nm{ color:var(--text-faint); font-weight:600; font-style:italic; }
.bslot.bye .nm{ color:var(--text-faint); font-weight:600; letter-spacing:.06em; }
.bslot .drop{ font-size:9px; color:var(--info); font-weight:800; flex:none; }
.bslot.swappable{ cursor:grab; }
.bslot.swappable:hover{ background:var(--accent-soft); }
.bslot.swap-pick{ background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent); }
.blines{ position:absolute; inset:0; overflow:visible; pointer-events:none; }
.blines path{ fill:none; stroke:var(--border-strong); stroke-width:1.5; }
.blines path.done{ stroke:var(--live); stroke-width:2; }
.blines path.hl{ stroke:var(--info); stroke-width:2.5; stroke-dasharray:5 4; }
.legend{ display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--text-muted); font-weight:600; margin-top:10px; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.round-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.round-list .bmatch{ position:relative; width:auto !important; left:auto !important; top:auto !important; }
.qual-list{ display:flex; flex-direction:column; gap:6px; }
.qual-row{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; }
.rank{ font-family:var(--font-display); font-weight:800; font-size:16px; width:24px; text-align:center; color:var(--text-muted); }

/* ============ FIELD BOARD ============ */
.field-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1180px){ .field-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:820px){ .field-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } }
.field-card{ border-radius:var(--radius-m); border:1px solid var(--border); background:var(--surface); padding:12px; display:flex; flex-direction:column; gap:8px; min-height:156px; box-shadow:var(--shadow); min-width:0; }
.field-card.fs-live{ border-color:var(--live); background:linear-gradient(180deg,var(--live-soft),var(--surface) 60%); }
.field-card.fs-called{ border-color:var(--warn); }
.field-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.field-num{ font-family:var(--font-display); font-weight:800; font-size:26px; line-height:1; }
.field-stage{ font-size:10.5px; color:var(--text-faint); font-weight:700; display:flex; align-items:center; gap:5px; margin-top:3px; }
.field-players{ display:flex; flex-direction:column; gap:3px; flex:1; justify-content:center; min-width:0; }
.fp-row{ display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:13px; font-weight:700; min-width:0; }
.fp-row .n{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fp-row .n small{ color:var(--text-faint); font-weight:800; font-size:10.5px; }
.fp-row .s{ font-family:var(--font-display); font-weight:800; font-size:22px; line-height:1; color:var(--text); flex:none; }
.field-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; }
.field-foot{ display:flex; gap:6px; flex-wrap:wrap; }
.field-foot .btn{ flex:1 1 auto; justify-content:center; }
.field-note{ font-size:11px; color:var(--text-faint); }

/* ============ SCOREBOARD ============ */
.sb-shell{ display:flex; flex-direction:column; gap:14px; }
.sb-toolbar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.sb-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--text-muted); font-weight:700; }
.sb-board{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); background:var(--border); }
.sb-board.orient-v{ grid-template-columns:1fr; }
@media (orientation:portrait) and (max-width:700px){ .sb-board.orient-auto{ grid-template-columns:1fr; } }
.sb-side{ position:relative; background:var(--surface); padding:20px 14px 22px; display:flex; flex-direction:column; align-items:center; gap:10px; overflow:hidden; user-select:none; -webkit-user-select:none; }
.sb-side.side0{ --side-color:var(--sideA); }
.sb-side.side1{ --side-color:var(--sideB); }
.sb-side::before{ content:''; position:absolute; inset:0; background:var(--side-color); opacity:0; transition:opacity .12s; pointer-events:none; }
.sb-side.flash::before{ opacity:.18; }
.sb-side.winner{ box-shadow:inset 0 0 0 3px var(--side-color); }
.sb-trophy{ position:absolute; right:50%; transform:translateX(50%); top:18%; width:62%; max-width:230px; aspect-ratio:1; opacity:.06; color:var(--side-color); pointer-events:none; }
.sb-team{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--side-color); text-transform:uppercase; min-height:14px; z-index:1; }
.sb-name{ font-size:18px; font-weight:800; text-align:center; z-index:1; }
.sb-origin{ font-size:11px; font-weight:800; color:var(--text-faint); z-index:1; }
.sb-score{ font-family:var(--font-display); font-weight:800; font-size:clamp(72px,17vw,132px); line-height:.9; z-index:1; }
.sb-plusone{ position:absolute; top:34%; font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--side-color); opacity:0; pointer-events:none; z-index:2; }
.sb-plusone.show{ animation:floatUp .7s ease-out; }
@keyframes floatUp{ 0%{opacity:0; transform:translateY(10px) scale(.8);} 25%{opacity:1;} 100%{opacity:0; transform:translateY(-50px) scale(1.15);} }
.sb-coins{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; z-index:1; max-width:100%; }
.coin{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border:2px dashed var(--border-strong); color:var(--text-faint); transition:transform .15s, background .15s; }
.coin svg{ width:18px; height:18px; }
.coin.filled{ border:2px solid transparent; color:#fff; transform:scale(1.04); box-shadow:0 4px 14px -6px rgba(0,0,0,.45); }
.coin.filled{ background:var(--coin); }
.sb-side.tinted{ background:linear-gradient(180deg, color-mix(in srgb, var(--tint) 24%, var(--surface)), color-mix(in srgb, var(--tint) 8%, var(--surface)) 75%); transition:background .25s; }
.coin.pop{ animation:pointPop .35s ease-out; }
@keyframes pointPop{ 0%{ transform:scale(1.4); } 100%{ transform:scale(1.04); } }
.sb-plusbtn{
  z-index:1; border:none; background:var(--side-color); color:var(--side-ink); font-weight:800; font-size:17px;
  border-radius:16px; padding:14px 26px; cursor:pointer; min-height:64px; min-width:160px; touch-action:manipulation;
  box-shadow:0 8px 20px -10px var(--side-color);
}
.sb-plusbtn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }
.sb-utility{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.sb-utility .sep{ width:1px; height:28px; background:var(--border); margin:0 8px; }
.sb-panels{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px; }
@media (max-width:760px){ .sb-panels{ grid-template-columns:1fr; } }
.hist-list{ display:flex; flex-direction:column; max-height:300px; overflow:auto; }
.hist-row{ display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--border); font-size:12.5px; }
.hist-row:last-child{ border-bottom:none; }
.hist-row.voided .hist-text{ text-decoration:line-through; color:var(--text-faint); }
.hist-time{ font-family:var(--font-mono); color:var(--text-faint); font-size:11px; flex:none; width:60px; }
.hist-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--text-faint); }
.hist-text{ flex:1; min-width:0; }
.hist-total{ font-family:var(--font-mono); font-weight:700; font-size:11.5px; color:var(--text-muted); flex:none; }
.hist-actor{ color:var(--text-faint); font-size:11px; flex:none; }
#view:fullscreen{ background:var(--bg); padding:16px; overflow:auto; }
#view:fullscreen .sb-score{ font-size:clamp(96px,22vw,260px); }
#view:fullscreen .timer-num{ font-size:clamp(90px,20vw,280px); }
#view:fullscreen .sb-panels .card:first-child{ display:none; }

/* ============ TIMER ============ */
.timer-shell{ display:flex; flex-direction:column; align-items:center; gap:16px; }
.timer-face{ width:100%; max-width:560px; border-radius:var(--radius-l); border:2px solid var(--border); background:var(--surface); box-shadow:var(--shadow); padding:24px 18px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.timer-face.lv-1{ border-color:var(--info); }
.timer-face.lv-2{ border-color:var(--warn); }
.timer-face.lv-3{ border-color:var(--danger); }
.timer-face.lv-4{ border-color:var(--danger); background:linear-gradient(180deg,var(--danger-soft),var(--surface) 70%); }
.timer-num{ font-family:var(--font-display); font-weight:800; font-size:clamp(64px,17vw,120px); line-height:.95; letter-spacing:-1px; }
.timer-face.lv-3 .timer-num, .timer-face.lv-4 .timer-num{ color:var(--danger); }
.timer-label{ font-size:12px; color:var(--text-faint); font-weight:800; letter-spacing:.06em; text-transform:uppercase; display:flex; gap:6px; align-items:center; }
.timer-controls{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.timer-controls .btn{ min-height:44px; padding-inline:18px; }
.timer-card{ width:100%; max-width:560px; }
.preset-chip{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text); border-radius:99px; padding:7px 14px; font-weight:700; font-size:12.5px; cursor:pointer; }
.preset-chip.active{ background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.timer-mini{ display:flex; align-items:center; gap:10px; }
.timer-mini .timer-num{ font-size:44px; }
.ev-list{ display:flex; flex-direction:column; font-size:12px; max-height:220px; overflow:auto; }
.ev-list div{ display:flex; gap:8px; padding:5px 0; border-bottom:1px solid var(--border); }
.ev-list div:last-child{ border-bottom:none; }

/* ============ FOLLOW ============ */
.search{ position:relative; }
.search .input{ padding-left:34px; min-height:44px; font-size:14px; }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-faint); }
.person{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.person:last-child{ border-bottom:none; }
.person .who{ flex:1; min-width:140px; }
.person .who b{ font-size:14px; }
.follow-btn.on{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.follow-card{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.follow-entry{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; padding:8px 10px; border-radius:10px; background:var(--surface-2); }
.follow-entry.hot{ background:var(--warn-soft); }
.follow-entry.now{ background:var(--live-soft); }
.feed-row{ display:flex; gap:8px; font-size:12.5px; padding:7px 0; border-bottom:1px solid var(--border); }
.feed-row:last-child{ border-bottom:none; }
.combo-thumb{ width:44px; height:44px; border-radius:8px; object-fit:cover; border:1px solid var(--border); flex:none; }
.combo-lg{ width:100%; max-width:220px; aspect-ratio:1; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ============ MATCH ACTIONS / MATCH LIST ============ */
.field-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.field-chips .btn{ min-height:44px; min-width:92px; justify-content:center; font-size:14px; }
.admin-tools{ border:1px dashed var(--danger); border-radius:10px; padding:8px 10px; }
.admin-tools summary{ cursor:pointer; font-weight:800; font-size:12.5px; color:var(--danger); }
.m-filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.m-round{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); padding:14px 2px 6px; }
.m-row{ display:grid; grid-template-columns:68px minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--border); background:var(--surface); }
.m-row:hover{ background:var(--surface-2); }
.m-row .code{ font-family:var(--font-mono); font-weight:700; font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:3px; }
.m-players{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; font-size:13px; cursor:pointer; }
.m-players .nm{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-players .nm.win{ color:var(--live); } .m-players .nm.lose{ color:var(--text-faint); } .m-players .nm.ph{ color:var(--text-faint); font-style:italic; font-weight:600; }
.m-players .sc{ font-family:var(--font-mono); font-weight:800; text-align:right; }
.m-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.m-list{ border:1px solid var(--border); border-radius:var(--radius-m); overflow:hidden; }
@media (max-width:640px){
  .m-row{ grid-template-columns:52px minmax(0,1fr); }
  .m-actions{ grid-column:1 / -1; justify-content:flex-start; }
}
.t-hero{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:18px 20px; margin-bottom:18px; }
.t-hero h2{ font-size:22px; letter-spacing:-.3px; }
.t-hero .meta{ display:flex; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--text-muted); font-weight:700; }
.t-hero .progress{ flex:1; min-width:200px; }
.next-up{ display:flex; flex-direction:column; gap:4px; width:100%; padding:8px; border-radius:10px; background:var(--accent-soft); text-align:left; border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); cursor:pointer; }
.next-up .label{ color:var(--accent); }
.next-up .vsn{ font-size:12.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.watchers{ font-size:10.5px; color:var(--text-faint); font-weight:700; }

/* Referee login sheet: one card per person, printed on its own */
.cred-sheet{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.cred-card{ display:flex; gap:12px; align-items:flex-start; border:1px dashed var(--border); border-radius:12px; padding:10px; break-inside:avoid; }
.cred-qr{ flex:none; }
.cred-url{ font-size:10px; word-break:break-all; color:var(--text-faint); }
@media print{
  body.print-sheet > *:not(.modal-backdrop){ display:none !important; }
  body.print-sheet{ background:#fff; }
  body.print-sheet .modal-backdrop{ position:static; background:none; padding:0; display:block; }
  body.print-sheet .modal{ max-width:none; max-height:none; overflow:visible; border:0; box-shadow:none; background:#fff; color:#000; }
  body.print-sheet .modal-foot, body.print-sheet .modal-close{ display:none; }
  body.print-sheet .cred-sheet{ grid-template-columns:repeat(2,1fr); }
  body.print-sheet .cred-card{ border-color:#999; }
  body.print-sheet .cred-url{ color:#333; }
}