/* Day tokens; night tokens follow the system, the host page (data-theme) or the toggle (data-mode, wins). */
:root{color-scheme:light;font-family:var(--font);color:var(--ink);background:var(--bg);font-synthesis:none;--bg:#f5f5f5;--ink:#171717;--muted:#626262;--line:#ddd;--red:#d3202c;--red-hover:#b81722;--surface:#fff;--surface-2:#fafafa;--soft:#f0f0f0;--soft-ink:#555;--hover:#e9e9e9;--divider:#eee;--divider-2:#e5e5e5;--btn-line:#c9c9c9;--field:#fff;--field-line:#bbb;--sub:#444;--code:#f7f7f7;--code-ink:#333;--strong:#171717;--strong-hover:#333;--on-strong:#fff;--bar:#171717;--header:#fff;--header-ink:#171717;--map-hover:#111;--logo-day:block;--logo-night:none;--warn:#fff4de;--warn-ink:#664411;--warn-line:#dbbd83;--side:#fff3cf;--shadow:#0003;--backdrop:#0007}
@media(prefers-color-scheme:dark){:root:not([data-mode=light]):not([data-theme=light]){color-scheme:dark;--bg:#101012;--ink:#ececec;--muted:#a3a3a8;--line:#2e2e33;--red:#e0313c;--red-hover:#f04751;--surface:#1a1a1d;--surface-2:#161619;--soft:#26262a;--soft-ink:#c4c4c8;--hover:#2a2a2f;--divider:#26262a;--divider-2:#2a2a2f;--btn-line:#3c3c42;--field:#121214;--field-line:#45454c;--sub:#c4c4c8;--code:#121214;--code-ink:#e2e2e2;--strong:#ececec;--strong-hover:#fff;--on-strong:#111;--bar:#000;--header:#0a0a0b;--header-ink:#fff;--map-hover:#ececec;--logo-day:none;--logo-night:block;--warn:#33280f;--warn-ink:#f2d8a0;--warn-line:#6e5626;--side:#3a3113;--shadow:#0009;--backdrop:#000b}}
:root[data-theme=dark]:not([data-mode=light]),:root[data-mode=dark]{color-scheme:dark;--bg:#101012;--ink:#ececec;--muted:#a3a3a8;--line:#2e2e33;--red:#e0313c;--red-hover:#f04751;--surface:#1a1a1d;--surface-2:#161619;--soft:#26262a;--soft-ink:#c4c4c8;--hover:#2a2a2f;--divider:#26262a;--divider-2:#2a2a2f;--btn-line:#3c3c42;--field:#121214;--field-line:#45454c;--sub:#c4c4c8;--code:#121214;--code-ink:#e2e2e2;--strong:#ececec;--strong-hover:#fff;--on-strong:#111;--bar:#000;--header:#0a0a0b;--header-ink:#fff;--map-hover:#ececec;--logo-day:none;--logo-night:block;--warn:#33280f;--warn-ink:#f2d8a0;--warn-line:#6e5626;--side:#3a3113;--shadow:#0009;--backdrop:#000b}
/* Shared layout tokens; the scene and copy formats are owned by core.js. */
:root {
  --on-accent:#fff; --success:#239b56; --success-bg:#e7f5ec; --success-ink:#176738;
  --focus:#246bde; --map-base:#3a4544; --map-ink:#fff; --map-shade:#0009;
  --map-ban:#ed1637; --map-pick:#33814a; --map-decider:#59616c;
  --panel-shadow:0 20px 70px #18202f0b,0 2px 8px #18202f05;
  --shell-line:#e1e3e7; --nav-bg:#fafafb; --slot-bg:#eff0f3; --slot-ink:#505867;
  --accent-soft:#fff0f2; --toggle-track:#dfe1e6; --toggle-knob:#fff;
  --toggle-shadow:0 1px 4px #0002; --header-rule:#eceef1; --map-rule:#ffffff26;
  /* The OS interface font: San Francisco on Apple, Segoe UI on Windows, Roboto
     on Android. Set on body too, so a host page's body font cannot replace it. */
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Same in both modes: several team logos are white on transparent. */
  --logo-plate:#141416; --logo-plate-line:#ffffff14;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-mode=light]):not([data-theme=light]) {
    --shell-line:#303238; --nav-bg:#1c1d21; --slot-bg:#2c2e35; --slot-ink:#d4d6df;
    --success-bg:#182c22; --success-ink:#76d99b; --accent-soft:#351b22;
    --panel-shadow:0 24px 90px #0005,0 2px 8px #0003; --toggle-track:#ed1637;
    --header-rule:#292b31;
  }
}
:root[data-theme=dark]:not([data-mode=light]),:root[data-mode=dark] {
  --shell-line:#303238; --nav-bg:#1c1d21; --slot-bg:#2c2e35; --slot-ink:#d4d6df;
  --success-bg:#182c22; --success-ink:#76d99b; --accent-soft:#351b22;
  --panel-shadow:0 24px 90px #0005,0 2px 8px #0003; --toggle-track:#ed1637;
  --header-rule:#292b31;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:14px; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a,select,input { outline-offset:4px; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; }
:where(button,a,input,select,textarea,summary):focus-visible { outline:3px solid var(--focus); }
/* Windows draws select lists with the page's colours: without these, night mode
   puts light option text on a white list. macOS draws its own list. */
select option { background-color:var(--surface); color:var(--ink); }
select optgroup { background-color:var(--surface); color:var(--muted); }
[hidden] { display:none!important; }
.visually-hidden,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:12px; left:12px; z-index:50; background:var(--surface); padding:12px 20px; border-radius:8px; }
.app-shell { width:calc(100% - 64px); max-width:1160px; margin:36px auto; background:var(--surface-2); border:1px solid var(--shell-line); border-radius:14px; box-shadow:var(--panel-shadow); overflow:clip; }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; background:var(--header); color:var(--header-ink); border-bottom:1px solid var(--header-rule); }
.brand { display:flex; align-items:center; gap:20px; min-width:0; text-decoration:none; }
.brand img { width:auto; height:43px; max-width:190px; object-fit:contain; }
.logo-day { display:var(--logo-day); }
.logo-night { display:var(--logo-night); }
.brand-sub { border-left:1px solid var(--line); padding-left:20px; font-size:14px; font-weight:500; color:var(--muted); white-space:nowrap; }
.header-actions { display:flex; align-items:center; gap:22px; }
.source-link { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.source-link:hover { color:var(--ink); }
.source-link i { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.source-link i.good { background:var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.source-link i.stale { background:var(--warn-ink); }
.external-mark { font-size:14px; }
.theme-toggle { position:relative; display:flex; align-items:center; gap:9px; border:0; border-left:1px solid var(--line); padding:6px 0 6px 18px; min-height:36px; background:transparent; color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
.theme-toggle::after { content:''; display:block; width:34px; height:20px; border-radius:20px; background:var(--toggle-track); }
.theme-toggle::before { content:''; position:absolute; right:17px; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:var(--toggle-knob); box-shadow:var(--toggle-shadow); transition:transform .18s; }
:root[data-mode=dark] .theme-toggle::before,:root[data-theme=dark]:not([data-mode=light]) .theme-toggle::before { transform:translateX(14px); }
@media(prefers-color-scheme:dark) { :root:not([data-mode=light]):not([data-theme=light]) .theme-toggle::before { transform:translateX(14px); } }
.panel-nav { display:flex; align-items:stretch; gap:28px; padding:0 24px; min-height:46px; border-bottom:1px solid var(--line); background:var(--nav-bg); }
.view-tabs { display:flex; gap:28px; }
.view-tab { display:flex; align-items:center; gap:7px; padding:13px 0 11px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-size:13px; white-space:nowrap; }
.view-tab:hover { color:var(--ink); }
.view-tab.active { border-color:var(--red); color:var(--ink); font-weight:700; }
.tab-badge { min-width:18px; padding:1px 6px; border-radius:9px; background:var(--red); color:var(--on-accent); font-size:10px; font-weight:700; line-height:16px; text-align:center; }
.section-nav { display:flex; flex-wrap:wrap; gap:18px; }
.section-nav a { color:var(--muted); font-size:11px; text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; }
.section-nav a:hover { color:var(--ink); border-color:var(--line); }
.nav-tools { margin-left:auto; display:flex; gap:18px; align-items:center; }
.nav-button { border:0; background:transparent; color:var(--muted); font-size:11px; padding:8px 0; min-height:36px; }
.nav-button:hover { color:var(--ink); }
main { padding:0 20px; }
.intro { min-height:46px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 2px; }
.sync-card { display:flex; align-items:center; justify-content:flex-end; gap:7px; color:var(--muted); font-size:10px; line-height:1.6; }
#syncTitle { font-weight:500; }
.sync-separator { color:var(--btn-line); }
h1,h2,p { margin-top:0; }
h2 { font-size:17px; line-height:1.4; letter-spacing:-.3px; margin-bottom:0; }
.eyebrow { font-size:8px; font-weight:700; letter-spacing:1.6px; color:var(--muted); display:block; margin-bottom:5px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:40px; padding:10px 17px; border:1px solid var(--btn-line); border-radius:6px; background:var(--soft); color:var(--ink); text-decoration:none; font-size:12px; font-weight:600; transition:background .15s,border-color .15s; }
.button:hover:not(:disabled) { background:var(--hover); }
.button.primary { background:var(--red); border-color:var(--red); color:var(--on-accent); }
.button.primary:hover:not(:disabled) { background:var(--red-hover); border-color:var(--red-hover); }
.button.dark { background:var(--strong); color:var(--on-strong); border-color:var(--strong); }
.button.dark:hover:not(:disabled) { background:var(--strong-hover); border-color:var(--strong-hover); }
.button.small { min-height:32px; padding:7px 11px; font-size:11px; }
.error-box { background:var(--warn); color:var(--warn-ink); border:1px solid var(--warn-line); border-radius:7px; padding:13px 16px; margin-bottom:12px; line-height:1.65; font-size:12px; overflow-wrap:anywhere; }
.match-tools { display:grid; grid-template-columns:132px 150px minmax(0,1fr) 38px; align-items:center; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:14px 18px; margin-bottom:12px; }
.match-tools label { min-width:0; }
.match-picker { grid-column:3; grid-row:1; }
.match-tools>label:has(#matchTime) { grid-column:1; grid-row:1; border-right:1px solid var(--line); padding-right:18px; }
.stage-picker { grid-column:2; grid-row:1; }
.mini-label { display:block; font-size:9px; font-weight:500; color:var(--muted); margin-bottom:5px; }
.match-tools input,.match-tools select { display:block; width:100%; max-width:100%; min-width:0; border:0; padding:3px 0; background:transparent; color:var(--ink); min-height:29px; }
#matchTime { font-size:23px; font-weight:800; letter-spacing:-.9px; font-variant-numeric:tabular-nums; }
#matchTime::-webkit-calendar-picker-indicator { display:none; }
#matchStage { font-size:12px; color:var(--muted); font-weight:600; }
#matchSelect { font-size:15px; font-weight:700; text-overflow:ellipsis; }
#swapBtn { grid-column:4; grid-row:1; padding:0; min-width:36px; height:36px; font-size:21px; background:var(--soft); border-color:var(--line); }
.team-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.team-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; min-width:0; }
.card-top { display:flex; align-items:center; gap:13px; padding:16px 16px 13px; border-bottom:1px solid var(--divider); }
.team-letter { display:grid; place-items:center; width:34px; height:38px; margin:4px 6px; flex-shrink:0; color:var(--ink); background:var(--soft); clip-path:polygon(50% 0,100% 27%,88% 78%,50% 100%,12% 78%,0 27%); font-size:18px; font-weight:900; }
.team-card:nth-child(2) .team-letter { color:var(--red); background:var(--accent-soft); }
.team-logo { display:grid; place-items:center; width:46px; height:46px; flex-shrink:0; border-radius:10px; background:var(--logo-plate); box-shadow:inset 0 0 0 1px var(--logo-plate-line); }
.team-logo img { display:block; width:34px; height:34px; object-fit:contain; }
.team-logo:empty { display:none; }
.team-heading { flex:1; min-width:0; }
.team-heading label { display:block; font-size:8px; letter-spacing:1.2px; color:var(--muted); margin-bottom:4px; }
.team-heading select { width:100%; max-width:100%; min-width:0; border:0; background:transparent; color:var(--ink); padding:0 12px 0 0; font-size:20px; font-weight:800; letter-spacing:-.5px; }
.slot-caption { font-size:9px; font-weight:600; color:var(--muted); white-space:nowrap; }
.camera-list { padding:0 14px; }
.player-row { display:flex; align-items:center; gap:11px; min-height:58px; padding:8px 0; border-bottom:1px solid var(--divider); }
.player-row:last-child { border-bottom:0; }
.slot-number { display:grid; place-items:center; width:30px; height:31px; flex-shrink:0; border:1px solid var(--divider-2); border-radius:5px; background:var(--slot-bg); color:var(--slot-ink); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.player-info { flex:1; min-width:0; }
.player-info select { width:100%; min-width:0; max-width:100%; border:0; background:transparent; color:var(--ink); font-size:13px; font-weight:700; padding:1px 14px 1px 0; }
.player-subline { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:var(--muted); }
.copy-icon { display:grid; place-items:center; flex-shrink:0; width:30px; height:32px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:20px; }
.copy-icon:hover { background:var(--soft); color:var(--ink); }
.card-actions { display:flex; align-items:center; gap:8px; padding:8px 12px 12px; }
.text-button { border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:11px; padding:7px 5px; text-decoration:none; min-height:32px; }
.text-button:hover:not(:disabled) { background:var(--hover); color:var(--ink); }
.team-copy { flex:1; display:flex; gap:8px; align-items:center; justify-content:center; background:var(--soft); color:var(--sub); font-size:11px; font-weight:500; }
.card-bottom { display:flex; align-items:center; gap:4px; }
.roster-action { width:28px; padding:5px; font-size:17px; text-align:center; }
.export-bar { margin:12px 0 16px; }
.check.export-option { margin-top:10px; font-size:12px; line-height:1.5; cursor:pointer; }
.check.export-option input { flex:none; width:16px; height:16px; }
.export-actions { display:flex; align-items:center; gap:10px; }
#sendObsBtn { min-width:220px; }
#sendObsBtn>span,#downloadBtn>span,#copyJsonBtn>span { font-size:17px; line-height:1; font-weight:400; }
.obs-setup { margin-left:auto; gap:8px; border-color:var(--line); background:transparent; color:var(--muted); }
.obs-setup i,.dock-status i,.cam-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--btn-line); }
.obs-setup i.good,.dock-status i.good,.cam-dot.live { background:var(--success); box-shadow:0 0 0 3px var(--success-bg); }
.obs-setup i.bad,.dock-status i.bad,.cam-dot.off { background:var(--red); }
.obs-setup i.wait,.cam-dot.wait { background:var(--warn-ink); }
.export-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 1px 0; min-width:0; }
.export-meta p { margin:0; color:var(--muted); font-size:9px; line-height:1.5; overflow-wrap:anywhere; min-width:0; }
#filenamePreview { font-family:ui-monospace,Consolas,monospace; text-align:right; }
.veto-panel,.copy-panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin-bottom:16px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 16px 14px; }
.heading-note { font-size:8px; font-weight:400; color:var(--muted); letter-spacing:1px; margin-left:12px; white-space:nowrap; }
.veto-controls { display:flex; align-items:center; gap:16px; }
.veto-controls label { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); }
.veto-controls select { border:1px solid var(--line); border-radius:5px; background:var(--surface-2); color:var(--ink); padding:6px; max-width:175px; min-width:65px; font-size:11px; min-height:31px; }
.veto-status { border-top:1px solid var(--divider); border-bottom:1px solid var(--divider); background:var(--surface-2); color:var(--sub); padding:10px 16px; font-size:11px; line-height:1.6; margin:0; }
.side-choice { display:flex; align-items:center; flex-wrap:wrap; gap:10px; background:var(--side); padding:12px 16px; }
.side-choice strong { flex:1; font-size:12px; line-height:1.6; }
.map-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; padding:14px 14px 12px; }
.map-card { display:flex; flex-direction:column; justify-content:flex-end; position:relative; min-width:0; height:130px; padding:0; border:1px solid var(--map-rule); border-radius:5px; overflow:hidden; background:var(--map-base); color:var(--map-ink); text-align:left; transition:transform .16s,box-shadow .16s; }
.map-card img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; object-position:50% 44%; transition:transform .2s; }
.map-card::after { position:absolute; content:''; inset:0; background:linear-gradient(0deg,var(--map-shade),transparent 85%); pointer-events:none; }
.map-name,.map-action { position:relative; z-index:1; }
.map-name { font-size:14px; font-weight:800; padding:0 9px 10px; letter-spacing:-.3px; text-shadow:0 1px 4px var(--map-shade); }
.map-action { display:block; width:100%; min-height:28px; padding:7px 5px; border-top:1px solid var(--map-rule); background:var(--map-decider); font-size:10px; text-align:center; font-weight:600; }
.map-card:hover:not(:disabled) { transform:translateY(-3px); box-shadow:0 6px 16px var(--shadow); border-color:var(--map-hover); }
.map-card:hover:not(:disabled) img { transform:scale(1.06); }
.map-card:disabled { opacity:1; }
.map-card.ban .map-action { background:var(--map-ban); }
.map-card.pick .map-action { background:var(--map-pick); }
.map-card.leftover .map-action { background:var(--map-decider); }
.veto-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 16px 12px; }
.veto-actions>div { display:flex; gap:7px; }
.check { display:flex; gap:6px; align-items:center; color:var(--muted); font-size:10px; }
.check input { accent-color:var(--red); width:13px; height:13px; }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 16px 10px; border-top:1px solid var(--divider); }
.preview-head>span { color:var(--muted); font-size:10px; line-height:1.6; }
textarea { display:block; width:calc(100% - 32px); margin:0 16px; min-height:215px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--code); color:var(--code-ink); font:11px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow:auto; }
#vetoOutput { min-height:176px; }
.copy-foot { padding:0 16px; margin:10px 0 13px; color:var(--muted); font-size:10px; line-height:1.7; }
.copy-tabs { display:flex; gap:24px; padding:0 16px; border-bottom:1px solid var(--line); }
.tab { border:0; border-bottom:3px solid transparent; padding:11px 0; background:transparent; color:var(--muted); font-size:12px; }
.tab span { border-radius:3px; background:var(--soft); padding:3px 5px; font-size:8px; margin-left:5px; }
.tab.selected { color:var(--ink); border-color:var(--red); font-weight:700; }
.empty-panel { grid-column:1/-1; background:var(--surface); border:1px dashed var(--field-line); border-radius:8px; padding:42px 20px; color:var(--muted); text-align:center; font-size:13px; line-height:1.8; }
footer { display:flex; align-items:center; gap:14px; padding:5px 1px 20px; color:var(--muted); font-size:10px; font-weight:600; }
footer span { font-size:9px; font-weight:400; }
footer a { margin-left:auto; text-decoration:none; }
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:30; background:var(--strong); color:var(--on-strong); padding:13px 20px; border:1px solid var(--line); border-radius:8px; box-shadow:var(--panel-shadow); font-size:12px; line-height:1.6; width:max-content; max-width:90vw; }
dialog { width:min(560px,calc(100% - 28px)); max-height:90dvh; padding:24px; overflow-y:auto; border:1px solid var(--field-line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--panel-shadow); }
dialog::backdrop { background:var(--backdrop); backdrop-filter:blur(3px); }
.dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.icon-button { display:grid; place-items:center; background:transparent; color:var(--muted); border:0; border-radius:5px; min-width:34px; min-height:34px; font-size:25px; }
.icon-button:hover { background:var(--soft); }
dialog p { font-size:12px; line-height:1.7; color:var(--muted); }
dialog label { display:block; margin:16px 0; font-size:12px; font-weight:600; }
dialog input { display:block; width:100%; min-width:0; margin-top:7px; padding:11px; border:1px solid var(--field-line); border-radius:5px; background:var(--field); color:var(--ink); font-size:12px; }
dialog p.muted { font-size:11px; overflow-wrap:anywhere; }
.dialog-actions { display:flex; justify-content:space-between; gap:12px; margin-top:20px; }
dialog textarea { margin:0; width:100%; }
/* Webcam status (VDO.Ninja) */
.cam-summary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.cam-summary .check { font-size:11px; cursor:pointer; }
.cam-total { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.cam-total.all { color:var(--success-ink); font-weight:700; }
.cam-total.missing { color:var(--red); font-weight:700; }
/* The dot sits on the slot number's corner: green live, red missing, amber checking. */
.slot-number { position:relative; }
.cam-dot { position:absolute; top:-4px; right:-4px; border:2px solid var(--surface); box-sizing:content-box; }
.team-cams { margin-left:auto; color:var(--muted); font-size:10px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Veto overlay */
.veto-overlay-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:8px 16px; border-bottom:1px solid var(--divider); }
.veto-overlay-bar .check { font-size:11px; cursor:pointer; }
.overlay-link { display:flex; align-items:center; gap:6px; }
.overlay-link select { border:1px solid var(--line); border-radius:5px; background:var(--surface-2); color:var(--ink); padding:5px; font-size:11px; min-height:30px; }
/* OBS dialog */
.obs-mode { border:0; padding:0; margin:16px 0 0; display:grid; gap:8px; }
.obs-mode .check { margin:0; font-size:12px; font-weight:500; color:var(--ink); cursor:pointer; }
.obs-mode .check input { width:15px; height:15px; margin:0; }
.copy-line { display:flex; gap:8px; align-items:center; margin-top:7px; }
.copy-line input { margin:0; font-family:ui-monospace,Consolas,monospace; font-size:11px; }
#obsCode { font-family:ui-monospace,Consolas,monospace; color:var(--ink); }
.obs-test { min-height:20px; margin:8px 0 0; }
.obs-test.good { color:var(--success-ink); } .obs-test.bad { color:var(--red); }
/* OBS dock (obs-bridge.html): narrow, dark, inside OBS */
body.dock { background:var(--bg); font-size:12px; }
.dock-main { padding:12px; display:grid; gap:12px; }
.dock-head { display:flex; align-items:center; gap:10px; color:var(--muted); }
.dock-head img { height:22px; width:auto; }
.dock-status { list-style:none; margin:0; padding:10px 12px; display:grid; gap:8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.dock-status li { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }
.dock-form { display:grid; gap:10px; }
.dock-form label { display:grid; gap:5px; color:var(--muted); font-size:11px; }
.dock-form input { width:100%; min-width:0; padding:8px; border:1px solid var(--field-line); border-radius:5px; background:var(--field); color:var(--ink); font-size:12px; }
.dock-hint { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.dock-log { margin:0; padding-left:18px; display:grid; gap:4px; color:var(--muted); font-size:10px; }
.dock-log .good { color:var(--success-ink); } .dock-log .bad { color:var(--red); }
/* Лобби (FACEIT) */
.lobby { padding-top:14px; }
.lobby-panel { background:var(--surface); border:1px solid var(--line); border-radius:8px; margin-bottom:12px; overflow:hidden; }
.lobby-alerts { display:flex; flex-wrap:wrap; gap:8px; }
.lobby-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,260px) auto; align-items:end; gap:14px; padding:0 16px 12px; }
.lobby-form label { min-width:0; }
.lobby-form input,.lobby-delay input,.next-pick select { display:block; width:100%; min-width:0; padding:9px 10px; border:1px solid var(--field-line); border-radius:5px; background:var(--field); color:var(--ink); font-size:12px; }
.lobby-status { margin:0; padding:10px 16px; border-top:1px solid var(--divider); background:var(--surface-2); color:var(--muted); font-size:11px; line-height:1.6; }
.lobby-panel .error-box { margin:0 16px 12px; }
.lobby-alert { position:sticky; top:8px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding:14px 16px; border-radius:8px; background:var(--red); color:var(--on-accent); box-shadow:var(--panel-shadow); font-size:13px; line-height:1.5; }
.lobby-matches { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; margin-bottom:12px; }
.lobby-match { display:grid; gap:12px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--btn-line); border-radius:8px; min-width:0; }
.lobby-match.live { border-left-color:var(--success); }
.lobby-match.done { opacity:.75; }
.lm-top { display:flex; align-items:center; gap:10px; min-width:0; }
.lm-status { padding:3px 8px; border-radius:4px; background:var(--soft); color:var(--sub); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.lobby-match.live .lm-status { background:var(--success-bg); color:var(--success-ink); }
.lm-meta { color:var(--muted); font-size:11px; }
.lm-top .text-button { margin-left:auto; white-space:nowrap; }
.lm-teams { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:12px; }
.lm-team { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; font-weight:700; }
.lm-team.right { text-align:right; }
.lm-team.won { color:var(--success-ink); }
.lm-score { font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.lm-maps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.lm-maps li { padding:3px 8px; border-radius:4px; background:var(--soft); color:var(--muted); font-size:10px; text-transform:capitalize; }
.lm-maps li.a,.lm-maps li.b { color:var(--ink); font-weight:700; }
.lm-maps li.a { box-shadow:inset 3px 0 0 var(--success); } .lm-maps li.b { box-shadow:inset -3px 0 0 var(--success); }
.lm-pause { display:flex; flex-wrap:wrap; align-items:center; gap:8px; border-top:1px solid var(--divider); padding-top:10px; }
.pause-on { flex:1; color:var(--red); font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.lobby-delay { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; white-space:nowrap; }
.lobby-delay input { width:64px; }
.message-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--divider); }
.message-box { min-width:0; padding-bottom:14px; }
.message-box+.message-box { border-left:1px solid var(--divider); }
.message-box textarea { min-height:150px; }
.next-pick { display:flex; align-items:center; gap:8px; flex:1; min-width:0; color:var(--muted); font-size:10px; }
.next-pick select { flex:1; }
.templates { padding:0 16px 14px; border-top:1px solid var(--divider); }
.templates summary { padding:12px 0; color:var(--muted); font-size:11px; cursor:pointer; }
.templates label { display:grid; gap:6px; margin-bottom:10px; color:var(--muted); font-size:11px; }
.templates textarea { width:100%; margin:0; min-height:90px; }
.templates .copy-foot { padding:0; margin-top:0; }
.lobby-log { list-style:none; margin:0; padding:0 16px 14px; display:grid; gap:6px; max-height:320px; overflow:auto; font-size:12px; line-height:1.5; }
.lobby-log li { color:var(--sub); overflow-wrap:anywhere; }
.lobby-log time { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:6px; }
.lobby-log .match,.lobby-log .map { color:var(--ink); font-weight:700; }
.lobby-log .pause { color:var(--red); }
.lobby-log .muted { color:var(--muted); }
/* VDO.Ninja runs in tiny off-screen frames: hidden frames get throttled. */
.vdo-frame { position:fixed; left:-10px; bottom:0; width:2px; height:2px; border:0; opacity:0; pointer-events:none; }
@media(max-width:900px) {
  .app-shell { width:calc(100% - 32px); margin:16px auto; }
  .brand { gap:14px; } .brand img { height:36px; } .brand-sub { padding-left:14px; font-size:12px; }
  .header-actions { gap:14px; } .site-header { padding:16px 20px; min-height:76px; }
  .match-tools { grid-template-columns:92px 115px minmax(0,1fr) 36px; gap:12px; padding:12px; }
  #matchSelect { font-size:13px; } .team-heading select { font-size:17px; } .slot-caption { display:none; }
  .veto-controls { gap:10px; } .heading-note { display:none; }
  .map-card { height:115px; } .map-name { font-size:12px; padding-left:6px; }
}
@media(max-width:680px) {
  .app-shell { width:100%; margin:0; border:0; border-radius:0; box-shadow:none; }
  .site-header { padding:16px; gap:12px; min-height:74px; }
  .brand { gap:0; } .brand img { height:33px; max-width:145px; } .brand-sub { display:none; }
  .header-actions { gap:12px; } .source-link { font-size:10px; gap:6px; } .external-mark { display:none; }
  .theme-toggle { padding-left:12px; font-size:11px; gap:6px; } .theme-toggle::after { width:30px; height:18px; }
  .theme-toggle::before { right:15px; width:12px; height:12px; margin-top:-6px; }
  :root[data-mode=dark] .theme-toggle::before,:root[data-theme=dark]:not([data-mode=light]) .theme-toggle::before { transform:translateX(12px); }
  .panel-nav { padding:0 16px; gap:20px; flex-wrap:wrap; }
  .view-tab { font-size:12px; padding-top:12px; padding-bottom:10px; }
  .nav-tools { flex-basis:100%; margin:0; justify-content:space-between; gap:12px; border-top:1px solid var(--divider); }
  .nav-button { font-size:10px; min-height:32px; }
  main { padding:0 12px; } .intro { gap:6px; align-items:flex-start; flex-direction:column; padding:12px 2px; }
  .section-nav { gap:14px; } .sync-card { justify-content:flex-start; flex-wrap:wrap; font-size:9px; gap:5px; }
  .match-tools { grid-template-columns:122px minmax(0,1fr) 34px; gap:12px; padding:12px; }
  .match-picker { grid-column:1/-1; grid-row:2; border-top:1px solid var(--divider); padding-top:10px; }
  .stage-picker { grid-column:2; grid-row:1; } #swapBtn { grid-column:3; grid-row:1; }
  .match-tools>label:has(#matchTime) { padding-right:10px; } #matchTime { font-size:23px; } #matchSelect { font-size:13px; min-height:34px; }
  .team-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .card-top { padding:14px; } .team-heading select { font-size:20px; } .slot-caption { display:block; }
  .camera-list { padding:0 12px; } .player-row { min-height:57px; } .player-subline { font-size:9px; }
  .export-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; }
  #sendObsBtn,.obs-setup { grid-column:1/-1; min-width:0; } .obs-setup { margin:0; justify-content:flex-start; }
  #downloadBtn,#copyJsonBtn { min-width:0; padding-left:8px; padding-right:8px; font-size:11px; }
  .export-meta { flex-direction:column; align-items:flex-start; gap:4px; } #filenamePreview { text-align:left; }
  .panel-heading { align-items:flex-start; flex-wrap:wrap; padding:14px 12px 12px; gap:12px; }
  .veto-controls { width:100%; gap:12px; } .veto-controls label { flex:1; min-width:0; flex-direction:column; align-items:flex-start; gap:5px; }
  .veto-controls select { width:100%; max-width:100%; min-width:0; }
  .veto-status { padding:10px 12px; font-size:11px; }
  .map-grid { grid-template-columns:repeat(4,minmax(0,1fr)); padding:12px 10px; gap:6px; }
  .map-card { height:110px; } .map-name { font-size:12px; padding:0 6px 9px; } .map-action { font-size:9px; min-height:26px; padding:7px 2px; }
  .veto-actions { padding:0 12px 12px; } .veto-actions .button { font-size:10px; }
  .preview-head { padding:12px; gap:10px; align-items:flex-start; } .preview-head>span { flex:1; min-width:0; font-size:10px; }
  .preview-head .button { font-size:10px; padding:7px 9px; }
  textarea { width:calc(100% - 24px); margin:0 12px; font-size:10px; padding:10px; min-height:220px; }
  #vetoOutput { min-height:185px; } .copy-foot { padding:0 12px; font-size:9px; }
  .copy-tabs { padding:0 12px; gap:22px; } .tab { font-size:11px; } .tab span { font-size:7px; }
  .side-choice { padding:12px; } .side-choice strong { flex-basis:100%; }
  footer { flex-wrap:wrap; gap:7px; padding-bottom:16px; } footer span { flex-basis:100%; order:3; }
  dialog { padding:18px; } .dialog-actions { flex-wrap:wrap; } .dialog-actions .button { flex:1; }
  .cam-summary { flex-wrap:wrap; padding:9px 12px; }
  .veto-overlay-bar { padding:8px 12px; }
  .lobby-form { grid-template-columns:minmax(0,1fr); padding:0 12px 12px; }
  .lobby-status { padding:10px 12px; } .lobby-panel .error-box { margin:0 12px 12px; }
  .lobby-matches { grid-template-columns:minmax(0,1fr); }
  .message-grid { grid-template-columns:minmax(0,1fr); }
  .message-box+.message-box { border-left:0; border-top:1px solid var(--divider); }
  .next-pick { flex-direction:column; align-items:stretch; }
  .templates { padding:0 12px 12px; } .lobby-log { padding:0 12px 12px; }
}
@media(max-width:680px) and (prefers-color-scheme:dark) { :root:not([data-mode=light]):not([data-theme=light]) .theme-toggle::before { transform:translateX(12px); } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}

/* Selected maps form the chronological veto; remaining cards follow them. */
.map-turn,.map-team { position:relative; z-index:1; }
.map-turn { position:absolute; top:6px; left:5px; padding:4px 5px; border-radius:3px; background:var(--map-shade); color:var(--map-ink); font-size:9px; line-height:1.2; font-weight:700; }
.map-team { padding:0 8px 7px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; line-height:1.3; color:var(--map-ink); text-shadow:0 1px 4px var(--map-shade); }
.map-card.ban img { filter:grayscale(1) brightness(.65); }
.map-card.pick .map-name,.map-card.ban .map-name { padding-bottom:3px; }
.map-card.pending { border-color:var(--map-pick); }