:root, html[data-theme="amhub"] {
  --bg0: #F6F5F0; --bg1: #FFFFFF; --bg2: #F3F1EA; --bg3: #EAE6DB;
  --border: #E6E1D6; --border-hi: #D6CFC0;
  --text: #23302B; --text-1: #23302B; --text-2: #2E3B36; --text-3: #3C4A44; --text-4: #55625C; --text-5: #6F7B76; --muted: #6F7B76; --dim: #8E9894;
  --row-line: #EFEDE6; --dot-line: #E6E1D6; --strike: #B9B3A6; --scroll-thumb: #D6CFC0;
  --red: #B11C21; --red-text: #B11C21; --red-hi: #B11C21;
  --amber: #F0860C; --amber-text: #9A5200;
  --blue: #4A90B8; --blue-text: #2F6F93; --blue-soft: #8FC1E3; --blue-tracker: #4A90B8; --on-blue-fg: #FFFFFF;
  --violet: #8E6BD0; --violet-text: #6E4AAE;
  --green: #7FA97A; --green-text: #4E7A4A; --green-pale: #DCEBD9;
  --red-18: rgba(177,28,33,.10); --red-40: rgba(177,28,33,.40);
  --amber-18: rgba(240,134,12,.16); --amber-40: rgba(240,134,12,.55);
  --blue-18: #E4F0F8; --blue-40: rgba(74,144,184,.45); --blue-35: rgba(143,193,227,.55);
  --violet-18: rgba(142,107,208,.12); --violet-40: rgba(142,107,208,.45);
  --primary-bg: #7FA97A; --primary-border: #7FA97A; --primary-fg: #FFFFFF; --primary-hover: #6F9A6A;
  --accept-text: #4E7A4A; --accept-bg: #7FA97A; --accept-border: rgba(127,169,122,.6); --on-accept-fg: #FFFFFF; --saved: #4E7A4A;
  --seg-on-bg: #23302B; --seg-on-fg: #FFFFFF; --seg-on-dim: #B9C4BF; --seg-on-kbd-bg: #3C4A44; --seg-on-kbd-fg: #FFFFFF; --seg-on-kbd-border: #55625C;
  --on-violet-fg: #FFFFFF;
  --sel-bar: #4A90B8; --scrim: rgba(35,48,43,.38); --shadow: 0 10px 28px rgba(35,48,43,.14), 0 1px 2px rgba(35,48,43,.08); --shadow-lg: 0 16px 44px rgba(35,48,43,.2);
  --topline: linear-gradient(90deg, #8FC1E3, #7FA97A); --topline-opacity: 1;
  --ov-red: #C02026; --ov-amber: #F0860C; --ov-blue: #8FC1E3; --ov-violet: #B48EE0;
  --tl-bg: #F6F5F0; --tl-gutter: #EEECE4; --tl-ruler: #EFEDE6; --tl-track: #FFFFFF; --tl-track-events: #FBFAF6; --tl-line: #E6E1D6;
  --tl-tick: #B9B3A6; --tl-tick-sub: #E6E1D6; --tl-tick-text: #6F7B76; --tl-label: #6F7B76;
  --tl-shot: #E6E1D6; --tl-shot-alt: #DCD6C8; --tl-shot-cur: #B7D2E6; --tl-shot-edge: #C9C2B2; --tl-shot-text: #6F7B76; --tl-shot-cur-text: #23302B;
  --tl-music: #B9C9C2; --tl-music-text: #23302B; --tl-speech: #DCEBD9; --tl-speech-text: #4E7A4A; --tl-silence: #ECEAE3;
  --tl-red: #B11C21; --tl-amber: #F0A64A; --tl-blue: #4A90B8; --tl-violet: #8E6BD0; --tl-adjusted: rgba(74,144,184,.16); --tl-bar-text: #1B2622; --tl-bar-text-on-dark: #FFFFFF;
  --tl-hover: rgba(35,48,43,.25); --tl-hover-box: rgba(255,255,255,.95); --tl-hover-text: #23302B; --tl-io: rgba(35,48,43,.10); --tl-io-mark: #23302B; --tl-sel: #23302B;
  --tl-scroll: #E6E1D6; --tl-scroll-thumb: #C9C2B2;
  --radius: 8px;
  --font-body: 'Alegreya Sans', 'Segoe UI', sans-serif;
  --font-display: 'Oldenburg', Georgia, serif;
  --mono: Consolas, 'Cascadia Mono', 'Courier New', monospace;
  --top-h: 48px; --foot-h: 30px;
  color-scheme: light;
}
html[data-theme="dark"] {
  --bg0: #000000; --bg1: #111111; --bg2: #1a1a1a; --bg3: #232323;
  --border: #2a2a2a; --border-hi: #444444;
  --text: #ffffff; --text-1: #eeeeee; --text-2: #dddddd; --text-3: #cccccc; --text-4: #bbbbbb; --text-5: #999999; --muted: #8a8a8a; --dim: #666666;
  --row-line: #161616; --dot-line: #222222; --strike: #444444; --scroll-thumb: #2e2e2e;
  --red: #C02026; --red-text: #C02026; --red-hi: #ff5a60;
  --amber: #F0860C; --amber-text: #F0860C;
  --blue: #70BDE2; --blue-text: #70BDE2; --blue-soft: #70BDE2; --blue-tracker: #9fd3ee; --on-blue-fg: #000000;
  --violet: #B48EE0; --violet-text: #B48EE0;
  --green: #70BDE2; --green-text: #70BDE2; --green-pale: rgba(112,189,226,.18);
  --red-18: rgba(192,32,38,.18); --red-40: rgba(192,32,38,.4);
  --amber-18: rgba(240,134,12,.18); --amber-40: rgba(240,134,12,.4);
  --blue-18: rgba(112,189,226,.18); --blue-40: rgba(112,189,226,.4); --blue-35: rgba(112,189,226,.35);
  --violet-18: rgba(180,142,224,.18); --violet-40: rgba(180,142,224,.4);
  --primary-bg: #C02026; --primary-border: #C02026; --primary-fg: #ffffff; --primary-hover: #d3262c;
  --accept-text: #70BDE2; --accept-bg: #70BDE2; --accept-border: rgba(112,189,226,.4); --on-accept-fg: #000000; --saved: #70BDE2;
  --seg-on-bg: #eeeeee; --seg-on-fg: #000000; --seg-on-dim: #555555; --seg-on-kbd-bg: #dddddd; --seg-on-kbd-fg: #000000; --seg-on-kbd-border: #bbbbbb;
  --on-violet-fg: #000000;
  --sel-bar: #ffffff; --scrim: rgba(0,0,0,.6); --shadow: 0 6px 24px rgba(0,0,0,.6); --shadow-lg: 0 12px 40px rgba(0,0,0,.7);
  --topline: linear-gradient(90deg, #C02026, #F0860C, #70BDE2); --topline-opacity: .5;
  --ov-red: #C02026; --ov-amber: #F0860C; --ov-blue: #70BDE2; --ov-violet: #B48EE0;
  --tl-bg: #000000; --tl-gutter: #111111; --tl-ruler: #111111; --tl-track: #070707; --tl-track-events: #0b0b0b; --tl-line: #1d1d1d;
  --tl-tick: #444444; --tl-tick-sub: #2a2a2a; --tl-tick-text: #999999; --tl-label: #777777;
  --tl-shot: #181818; --tl-shot-alt: #1f1f1f; --tl-shot-cur: #3d3d3d; --tl-shot-edge: #333333; --tl-shot-text: #888888; --tl-shot-cur-text: #ffffff;
  --tl-music: #4a4a4a; --tl-music-text: #cccccc; --tl-speech: #262626; --tl-speech-text: #666666; --tl-silence: #141414;
  --tl-red: #C02026; --tl-amber: #F0860C; --tl-blue: #70BDE2; --tl-violet: #B48EE0; --tl-adjusted: rgba(112,189,226,.12); --tl-bar-text: #000000; --tl-bar-text-on-dark: #ffffff;
  --tl-hover: rgba(255,255,255,.18); --tl-hover-box: rgba(20,20,20,.92); --tl-hover-text: #dddddd; --tl-io: rgba(255,255,255,.12); --tl-io-mark: #ffffff; --tl-sel: #ffffff;
  --tl-scroll: #151515; --tl-scroll-thumb: #3a3a3a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg0); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.3;
  overflow: hidden; min-width: 1200px;
}
button, select, input, textarea { font-family: inherit; font-size: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
select, .sel { background-color: var(--bg2); color: var(--text); }
body { font-variant-numeric: tabular-nums; }
::selection { background: var(--blue-35); color: var(--text); }
.hidden { display: none !important; }

svg.ico { width: 16px; height: 16px; vertical-align: -3px; flex: 0 0 auto; display: inline-block; }
.ico-wrap { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ico-wrap > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-lg svg.ico { width: 20px; height: 20px; vertical-align: -5px; }
.ico-cat { color: var(--text-4); }

#topbar {
  height: var(--top-h); display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--bg1); border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
}
#topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--topline); opacity: var(--topline-opacity);
}
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; flex: 0 0 auto; }
.mark { display: inline-flex; gap: 7px; margin-right: 4px; }
.mark .d { width: 9px; height: 9px; transform: rotate(45deg); display: inline-block; }
.d.red { background: #C02026; } .d.amber { background: #F0860C; } .d.blue { background: #70BDE2; }
.mark-amh {
  width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(145deg, #8FC1E3 0%, #4A90B8 100%); color: #fff;
  font-family: var(--font-display); font-size: 9.5px; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(35,48,43,.18); margin-right: 2px;
}
html[data-theme="amhub"] .mark-dots, html[data-theme="amhub"] .brand-full { display: none; }
html[data-theme="dark"] .mark-amh, html[data-theme="dark"] .brand-amh { display: none; }
.brand-name { font-family: var(--font-display); font-size: 19px; letter-spacing: .03em; }
.sep { color: var(--dim); }
.app-name { font-family: var(--font-display); font-size: 15px; letter-spacing: .03em; color: var(--muted); }
.edition { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border-hi); border-radius: 20px; padding: 1px 7px; }
html[data-theme="amhub"] .edition { display: none; }
.film { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.film-title { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.film-run { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.film-run b { color: var(--text); font-weight: 400; }

.film { gap: 10px; }
.film-run { display: none; }

.run-picker { font-family: var(--font-body); font-size: 12.5px; max-width: 250px; min-width: 156px; flex: 0 1 auto; align-self: center; text-overflow: ellipsis; cursor: pointer; padding: 3px 4px; }
@media (max-width: 1600px) { .film-title { display: none; } }

.chip.pose { color: var(--blue-text); background: var(--blue-18); border-color: var(--blue-40); font-family: var(--font-body); font-size: 11px; padding: 4px 7px; align-self: center; cursor: help; flex: 0 0 auto; min-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.pose::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: 6px; vertical-align: 1px; }
.v0-note {
  font-size: 11.5px; color: var(--amber-text); border: 1px solid var(--amber-40); background: var(--amber-18);
  border-radius: 20px; padding: 3px 9px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
#mode-toggle { flex: 0 0 auto; }
.save-state { font-size: 12px; color: var(--muted); font-family: var(--mono); white-space: nowrap; min-width: 104px; text-align: right; cursor: help; }
.save-state.saving { color: var(--amber-text); }
.save-state.unsaved { color: var(--amber-text); }
.save-state.saved { color: var(--saved); }
.save-state.error { color: var(--red-text); }
.reviewer { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.reviewer .lbl { margin-left: 0; }
.reviewer input { width: 96px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; font-size: 13px; color: var(--text-1); }
.reviewer input:focus { outline: none; border-color: var(--blue); }
.seg.theme button { font-size: 11.5px; padding: 3px 8px; }
.btn.round { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-family: var(--font-display); font-size: 15px; line-height: 1; flex: 0 0 auto; }
.btn.round.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-18); }
@media (max-width: 1680px) { .film-run, .reviewer .lbl { display: none; } }

@media (max-width: 1600px) { .seg.mode button kbd { display: none; } .seg.mode button { padding: 4px 9px; } }
@media (max-width: 1540px) { .v0-note { display: none; } }

.btn {
  background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius);
  padding: 5px 12px; cursor: pointer; line-height: 1.2;
}
.btn:hover { border-color: var(--border-hi); background: var(--bg3); }
.btn:active { transform: translateY(1px); }
.btn, .seg button { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) { .btn, .seg button { transition: none; } }
.btn-primary { border-color: var(--primary-border); background: var(--primary-bg); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.small { padding: 3px 9px; font-size: 12.5px; }
.btn:disabled { opacity: .4; cursor: default; }
.btn:disabled:hover { border-color: var(--border); background: var(--bg2); }
#btn-export { white-space: nowrap; }

#main {
  display: grid; grid-template-columns: 62fr 38fr; gap: 0;
  height: calc(100vh - var(--top-h) - var(--foot-h));
}
#left { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); background: var(--bg0); }
#right { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg1); }

#stage { position: relative; flex: 1 1 auto; min-height: 0; background: #000; overflow: hidden; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; cursor: default; }
#overlay.draw { cursor: crosshair; }
#overlay.draw.move { cursor: move; }
#overlay.draw.nwse { cursor: nwse-resize; }
#overlay.draw.nesw { cursor: nesw-resize; }
#stage-hud {
  position: absolute; left: 10px; top: 8px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; font-size: 12px; font-family: var(--mono);
  max-width: calc(100% - 20px);
}
#stage-hud span { background: rgba(0,0,0,.65); padding: 2px 8px; border-radius: 4px; color: #ddd; white-space: nowrap; }
#stage-hud span:empty { display: none; }
#stage-hud #hud-draw { color: var(--ov-blue); border: 1px solid var(--ov-blue); }

#transport {
  height: 40px; display: flex; align-items: center; gap: 18px; padding: 0 12px; border-top: 1px solid var(--border);
  background: var(--bg1); flex: 0 0 auto; overflow: hidden; white-space: nowrap;
}
#infobar {
  height: 26px; display: flex; align-items: center; gap: 18px; padding: 0 12px; border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); background: var(--bg1); flex: 0 0 auto; overflow: hidden; white-space: nowrap;
}
.tbtn.mini { min-width: 26px; padding: 1px 6px; font-size: 11px; }
.tgroup { display: flex; align-items: center; gap: 4px; }
.tgroup.tc { gap: 10px; }
.tgroup.ctx { margin-left: auto; gap: 6px; }
.tbtn {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--text-2); min-width: 34px;
}
.tbtn:hover { border-color: var(--border-hi); background: var(--bg3); color: var(--text); }
.tbtn.play { min-width: 44px; font-size: 14px; }
.tbtn.on { border-color: var(--blue-40); background: var(--blue-18); color: var(--blue-text); }
.lbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.tc-main { font-family: var(--mono); font-size: 18px; letter-spacing: .04em; }
.tc-sec { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.tc-total { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.mark-tc { font-family: var(--mono); font-size: 12px; color: var(--text-2); min-width: 84px; }
.ctx-val { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

#timeline-wrap { position: relative; flex: 0 0 232px; height: 232px; min-height: 0; overflow: hidden; background: var(--tl-bg); border-bottom: 1px solid var(--border); }
#timeline { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#timeline-hint {
  position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: var(--dim); pointer-events: none;
}

.panel { display: flex; flex-direction: column; min-height: 0; border-bottom: 1px solid var(--border); }
#event-list-panel { flex: 0 0 38%; }
#event-panel { flex: 1 1 auto; }
.panel-head {
  display: flex; align-items: center; gap: 12px; padding: 6px 12px; height: 36px; border-bottom: 1px solid var(--border);
  background: var(--bg1); flex: 0 0 auto;
}
.panel-title { font-family: var(--font-display); font-size: 15px; letter-spacing: .03em; }
.progress { color: var(--muted); font-size: 13px; font-family: var(--mono); }
.sel { background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; color: var(--text-1); }
.sel.small { font-size: 12px; margin-left: auto; }

.list-head, .row {
  display: grid; grid-template-columns: 34px 124px 40px 1fr 26px 38px 46px 72px; gap: 6px; align-items: center; padding: 0 10px;
}
.row .c-tc { white-space: nowrap; }
.list-head {
  height: 24px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid var(--border);
  flex: 0 0 auto; user-select: none;
}
.sortable { cursor: pointer; }
.sortable:hover { color: var(--text); }
.sortable.on { color: var(--text); }
.sortable.on::after { content: ' ▾'; font-size: 9px; }
.sortable.on.asc::after { content: ' ▴'; }
.list-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.row { height: 28px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--row-line); }
.row:hover { background: var(--bg2); }
.row.selected { background: var(--bg3); box-shadow: inset 3px 0 0 var(--sel-bar); }
.row .c-id { font-family: var(--mono); font-size: 12px; }
.row .c-tc, .row .c-dur, .row .c-conf { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.row .c-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .c-cat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .c-cat .t { font-weight: 700; }
.row .c-cat svg.ico { color: var(--text-4); }
.row .c-sev { font-family: var(--mono); font-size: 12px; text-align: center; }
.row .c-learn { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.row .c-learn.up { color: var(--blue-text); } .row .c-learn.down { color: var(--red-hi); }
.c-sev { text-align: center; }
.row.rejected .c-cat, .row.rejected .c-tc { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--strike); }

.chip {
  display: inline-block; font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 20px; border: 1px solid; white-space: nowrap;
  text-align: center;
}
.chip.unreviewed { color: var(--amber-text); background: var(--amber-18); border-color: var(--amber-40); }
.chip.accepted { color: var(--blue-text); background: var(--blue-18); border-color: var(--blue-40); }
.chip.adjusted { color: var(--blue-text); background: transparent; border-color: var(--blue); }
.chip.rejected { color: var(--red-text); background: var(--red-18); border-color: var(--red-40); }
.chip.evidence { color: var(--dim); background: transparent; border-color: var(--dim); border-style: dotted; }
.row.evidence .c-cat, .row.evidence .c-tc { color: var(--dim); }
.chip.reviewer { color: var(--blue-text); background: transparent; border-color: var(--blue-40); border-style: dashed; }

.ep-id { font-family: var(--mono); font-size: 14px; }
.ep-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.ep-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 10px 12px 14px; }
.ep-empty { color: var(--muted); padding: 20px 4px; }
.ep-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.ep-meta b { color: var(--text-2); font-weight: 400; font-family: var(--mono); font-size: 12px; }
.ep-people { grid-column: 1 / -1; }

.ep-prov { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ep-prov .plbl { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.ep-prov .sig { max-width: 236px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-src { font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid; font-family: var(--mono); }
.prov-src.pose { color: var(--blue-text); border-color: var(--blue-40); background: var(--blue-18); }
.prov-src.proxy { color: var(--amber-text); border-color: var(--amber-40); border-style: dashed; }
.prov-src.none { color: var(--dim); border-color: var(--border); }
.prov-note { font-size: 12px; color: var(--muted); font-style: italic; margin: 2px 0 6px 0; }
.people-block { font-size: 12px; color: var(--muted); margin: 4px 0 2px; }
.people-shot { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; padding: 3px 0; border-bottom: 1px dotted var(--dot-line); }
.people-shot .sid { font-family: var(--mono); color: var(--text-2); margin-right: 4px; }
.people-shot .sig { font-size: 10.5px; }
.people-shot .sig.dom { color: var(--blue-text); border-color: var(--blue-40); }
.people-shot .more { color: var(--dim); font-size: 11px; }
.frow { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.frow > label { flex: 0 0 82px; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.frow .grow { flex: 1 1 auto; min-width: 0; }
.field-sel { width: 100%; }
.field-txt {
  width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; color: var(--text-1);
}
.field-txt:focus, .sel:focus, .field-ta:focus { outline: none; border-color: var(--border-hi); }
.field-ta {
  width: 100%; min-height: 48px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px;
  color: var(--text-1); resize: vertical; font-size: 13px;
}
.tcbox { font-family: var(--mono); font-size: 13px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; min-width: 104px; text-align: center; }
.tcbox.changed { border-color: var(--blue); }
.tcsec { font-family: var(--mono); font-size: 11px; color: var(--dim); min-width: 62px; }
.seg { display: inline-flex; gap: 0; }
.seg button {
  background: var(--bg2); border: 1px solid var(--border); padding: 4px 10px; cursor: pointer; color: var(--text-3); font-size: 13px; margin-left: -1px; white-space: nowrap;
}
.seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.seg button:last-child { border-radius: 0 6px 6px 0; }
.seg button:hover { background: var(--bg3); color: var(--text); z-index: 1; position: relative; }
.seg button.on { background: var(--seg-on-bg); color: var(--seg-on-fg); border-color: var(--seg-on-bg); z-index: 1; position: relative; }
.seg.sev button.on { background: var(--seg-on-bg); }
.ro { color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }
.signals { display: flex; flex-wrap: wrap; gap: 4px; }
.sig { font-family: var(--mono); font-size: 11px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--text-4); }
.sig.fired { color: var(--text-1); border-color: var(--border-hi); }
.conf-bar { position: relative; height: 8px; background: var(--bg2); border-radius: 4px; flex: 1 1 auto; overflow: hidden; border: 1px solid var(--border); }
.conf-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--muted); }
.ctx-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 2px 0 8px 90px; }

.decide { display: flex; gap: 8px; align-items: center; margin: 4px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dbtn { border-radius: var(--radius); padding: 7px 16px; cursor: pointer; border: 1px solid var(--border); background: var(--bg2); font-weight: 700; }
.dbtn kbd { margin-left: 6px; }
.dbtn.accept { border-color: var(--accept-border); color: var(--accept-text); }
.dbtn.accept:hover, .dbtn.accept.on { background: var(--accept-bg); color: var(--on-accept-fg); border-color: var(--accept-bg); }
.dbtn.reject { border-color: var(--red-40); color: var(--red-hi); }
.dbtn.reject:hover, .dbtn.reject.on { background: var(--red); color: #fff; border-color: var(--red); }
.dbtn.neutral:hover { border-color: var(--border-hi); }
.reject-row { margin-left: 90px; }

.subhead {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--border);
  font-family: var(--font-display); font-size: 14px; letter-spacing: .03em;
}
.subhead .hint { font-family: var(--font-body); font-size: 12px; color: var(--dim); margin-left: auto; }
.region-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.region-ro { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.region-src { font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid; }
.region-src.machine { color: var(--amber-text); border-color: var(--amber-40); border-style: dashed; }
.region-src.reviewer { color: var(--blue-text); border-color: var(--blue); }
.region-src.none { color: var(--dim); border-color: var(--border); }
.btn.toggle.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-18); }

.audit { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.audit div { padding: 2px 0; border-bottom: 1px dotted var(--dot-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.audit .t { color: var(--dim); }
.audit .f { color: var(--text-2); }
.audit .by { color: var(--dim); font-style: italic; }

.disabled-panels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 10px; }
.dpanel {
  border: 1px dashed var(--border); border-radius: var(--radius); padding: 8px 10px; color: var(--dim); font-size: 12px; min-height: 58px;
}
.dpanel b { display: block; font-family: var(--font-display); font-size: 13px; color: var(--muted); letter-spacing: .03em; margin-bottom: 3px; font-weight: 400; }
.dpanel .nr { color: var(--dim); font-style: italic; }

#shortcuts {
  height: var(--foot-h); display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--bg1);
  border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden;
}
kbd {
  font-family: var(--mono); font-size: 10.5px; background: var(--bg3); border: 1px solid var(--border-hi); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 5px; color: var(--text-2); margin: 0 1px;
}

.toast {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--bg2); border: 1px solid var(--border-hi);
  border-radius: var(--radius); padding: 9px 16px; font-size: 13px; z-index: 50; max-width: 720px; box-shadow: var(--shadow);
}
.toast.ok { border-color: var(--blue-40); }
.toast.err { border-color: var(--red); }

.seg.mode button, .seg.profile button { font-size: 13px; padding: 4px 12px; }
.seg.mode button kbd, .seg.profile button kbd { margin-left: 5px; }
.seg button.on kbd { background: var(--seg-on-kbd-bg); color: var(--seg-on-kbd-fg); border-color: var(--seg-on-kbd-border); }
body.mode-review .watch-only, body.mode-review .tag-only { display: none !important; }
body.mode-watch .review-only, body.mode-watch .tag-only { display: none !important; }
body.mode-watch #overlay { pointer-events: none; }

body.mode-tag .review-only, body.mode-tag .watch-only { display: none !important; }
body.mode-watch .no-watch { display: none !important; }
body.mode-watch .no-watch-key { display: none !important; }
body.mode-tag #learn-panel { display: none !important; }
body.mode-tag #tag-panel, body.mode-tag #cheatsheet-panel { display: flex; }
body.mode-tag #btn-export { display: none !important; }

body.mode-tag #tag-panel { order: -2; flex: 0 0 auto; }
body.mode-tag #cheatsheet-panel { order: -1; }

body.mode-tag #event-panel { order: 1; flex: 0 1 auto; max-height: min(30%, 340px); }
body.mode-tag #objects-panel { order: 2; flex: 0 1 auto; max-height: min(30%, 300px); }
body.mode-tag #cheatsheet-panel { flex: 1 1 auto; min-height: 200px; }

#tag-panel { flex: 0 0 auto; }
#tag-panel .panel-body { max-height: 320px; }
#tag-panel.session .panel-head { background: var(--blue-18); }
.tag-setup { display: grid; grid-template-columns: max-content 1fr; gap: 8px 10px; align-items: center; }
.tag-setup > label { color: var(--text-4); font-size: 12.5px; }
.tag-setup .sel, .tag-setup .field-txt { width: 100%; }
.tag-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.tag-mode { flex: 1 1 200px; text-align: left; border: 1px solid var(--border); background: var(--bg2); border-radius: var(--radius);
  padding: 7px 10px; cursor: pointer; }
.tag-mode.on { border-color: var(--blue); background: var(--blue-18); }
.tag-mode b { display: block; font-size: 13.5px; }
.tag-mode span { display: block; color: var(--text-4); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.tag-why { grid-column: 1 / -1; color: var(--text-4); font-size: 12.5px; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 7px 10px; }
.tag-why b { color: var(--text); }
.tag-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-foot .ro { color: var(--muted); font-size: 12px; }
.tag-colored { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); cursor: not-allowed; }
.tag-colored input[disabled] { cursor: not-allowed; }
.tag-live { display: grid; gap: 8px; }
.tag-live-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tag-chip { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; border-radius: 20px; padding: 2px 9px; }
.tag-chip.blind { color: var(--red-text); background: var(--red-18); border: 1px solid var(--red-40); }
.tag-chip.cheat_sheet { color: var(--blue-text); background: var(--blue-18); border: 1px solid var(--blue-40); }
.tag-counts { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; }
.tag-counts b { font-family: var(--mono); }
.tag-hidden-note { font-size: 12px; color: var(--text-4); background: var(--bg2); border: 1px dashed var(--border-hi);
  border-radius: var(--radius); padding: 6px 10px; }
.tag-export { grid-column: 1 / -1; font-size: 12px; color: var(--text-4); background: var(--green-pale); border: 1px solid var(--green);
  border-radius: var(--radius); padding: 7px 10px; word-break: break-all; }
.tag-export b { color: var(--green-text); }
.tag-export code { font-family: var(--mono); font-size: 11px; display: block; margin-top: 4px; color: var(--text-4); }
.tag-err { color: var(--red-text); font-size: 12.5px; }
#tag-banner {
  position: absolute; left: 0; right: 0; top: 0; height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,0)); font-family: var(--mono); font-size: 12.5px;
  color: #eee; pointer-events: none; z-index: 3;
}
#tag-banner .tb-mode { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; padding: 2px 9px; border-radius: 20px; flex: 0 0 auto; }
#tag-banner.blind .tb-mode { color: var(--ov-red); border: 1px solid rgba(192,32,38,.55); background: rgba(192,32,38,.22); }
#tag-banner.cheat_sheet .tb-mode { color: var(--ov-blue); border: 1px solid rgba(112,189,226,.55); background: rgba(112,189,226,.22); }
#tag-banner .tb-clip { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tag-banner .tb-tagger { flex: 0 0 auto; color: #bbb; }
#tag-banner .tb-elapsed { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
body.mode-tag #stage-hud { top: 38px; }
#cheatsheet-panel { flex: 1 1 auto; min-height: 120px; }
#cheatsheet-panel .panel-body { max-height: none; }
.panel-body { padding: 8px 12px 10px; overflow-y: auto; min-height: 0; }
.panel.collapsible .panel-head, #learn-head { cursor: pointer; user-select: none; }
.panel.collapsed .panel-body { display: none; }
.panel-head .caret { margin-left: auto; color: var(--dim); font-size: 12px; transition: transform .15s; }
.panel.collapsed .panel-head .caret { transform: rotate(-90deg); }
#learn-panel { flex: 0 0 auto; max-height: 40%; }
#learn-panel .panel-body { max-height: 260px; }
#learn-panel #btn-learn { margin-left: 4px; }
#learn-panel.busy #btn-learn { opacity: .5; pointer-events: none; }

#blur-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blur-box {
  position: absolute; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: none;
  background: rgba(0,0,0,.02); border-radius: 2px;
}
.blur-box.fill { backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; }
.blur-box { -webkit-mask-composite: source-in; mask-composite: intersect; }
.blur-box.soften { backdrop-filter: blur(5px) brightness(.62) saturate(.8); -webkit-backdrop-filter: blur(5px) brightness(.62) saturate(.8); background: rgba(0,0,0,.18); border-radius: 0; }
#watch-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78) 40%); font-family: var(--mono); font-size: 12.5px; color: #eee; pointer-events: none;
}
#watch-strip .ws-profile { font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; padding: 2px 8px; border-radius: 20px; border: 1px solid #444; color: #ddd; flex: 0 0 auto; }
#watch-strip #ws-now { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
#watch-strip .ws-next { flex: 0 0 auto; white-space: nowrap; }
#watch-strip .ws-profile.strict { color: var(--ov-red); border-color: rgba(192,32,38,.4); background: rgba(192,32,38,.18); }
#watch-strip .ws-profile.moderate { color: var(--ov-amber); border-color: rgba(240,134,12,.4); background: rgba(240,134,12,.18); }
#watch-strip .ws-profile.original { color: var(--ov-blue); border-color: rgba(112,189,226,.4); background: rgba(112,189,226,.18); }
#watch-strip .ws-next { margin-left: auto; color: #8a8a8a; }
#watch-strip .act { font-weight: 700; }
#watch-strip svg.ico { color: #ddd; }
.act.skip { color: var(--red-text); } .act.blur, .act.blurmute { color: var(--blue-text); } .act.mute { color: var(--amber-text); }
.act.fill, .act.fillmute { color: var(--violet-text); }
#watch-strip .act.skip { color: var(--ov-red); } #watch-strip .act.blur, #watch-strip .act.blurmute { color: var(--ov-blue); }
#watch-strip .act.mute { color: var(--ov-amber); } #watch-strip .act.fill, #watch-strip .act.fillmute { color: var(--ov-violet); }

#watch-panel { flex: 0 0 auto; }
#watch-panel .panel-head { height: auto; padding: 6px 12px; flex-wrap: wrap; row-gap: 6px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-3); margin-left: auto; cursor: pointer; white-space: nowrap; }
.chk input { accent-color: var(--blue); }
.watch-body { padding: 6px 12px 8px; }
.watch-now { display: flex; align-items: center; gap: 8px; margin: 3px 0; min-height: 20px; }
.watch-now .lbl { flex: 0 0 34px; margin-left: 0; }
.watch-now .ro { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.watch-now svg.ico { color: var(--text-4); }
.watch-legend { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.watch-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 8px; }
.watch-legend .sw:first-child { margin-left: 0; }
.sw.skip { background: var(--red); } .sw.blur { background: var(--blue); } .sw.mute { background: var(--amber); }
.sw.blurmute { background: linear-gradient(135deg, var(--blue) 50%, var(--amber) 50%); }
.sw.fill { background: var(--violet); }
.sw.fillmute { background: linear-gradient(135deg, var(--violet) 50%, var(--amber) 50%); }
.sw.none { background: transparent; border: 1px dashed var(--border-hi); }
.watch-legend .hint { margin-left: auto; color: var(--dim); font-size: 11px; }
#plan-panel { flex: 1 1 auto; }
.plan-head, .prow { grid-template-columns: 34px 30px 136px 40px 72px 1fr 52px; }
.prow .p-tc { white-space: nowrap; }
.prow { height: 26px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--row-line); display: grid; gap: 6px; align-items: center; padding: 0 10px; }
.prow:hover { background: var(--bg2); }
.prow.now { background: var(--bg3); box-shadow: inset 3px 0 0 var(--sel-bar); }
.prow .p-id, .prow .p-ev, .prow .p-tc, .prow .p-dur, .prow .p-src { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.prow .p-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-4); display: flex; align-items: center; gap: 6px; min-width: 0; }
.prow .p-lbl > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .p-lbl .t { color: var(--text-2); font-weight: 700; }
.prow .p-src { color: var(--dim); }
.prow .p-src.reviewer { color: var(--blue-text); }
.p-act .achip { display: inline-block; font-size: 11px; line-height: 1; padding: 3px 8px; border-radius: 20px; border: 1px solid; font-family: var(--mono); }
.achip.skip { color: var(--red-text); border-color: var(--red-40); background: var(--red-18); }
.achip.blur { color: var(--blue-text); border-color: var(--blue-40); background: var(--blue-18); }
.achip.mute { color: var(--amber-text); border-color: var(--amber-40); background: var(--amber-18); }
.achip.blurmute { color: var(--blue-text); border-color: var(--amber-40); background: linear-gradient(90deg, var(--blue-18), var(--amber-18)); }
.achip.fill { color: var(--violet-text); border-color: var(--violet-40); background: var(--violet-18); }
.achip.fillmute { color: var(--violet-text); border-color: var(--amber-40); background: linear-gradient(90deg, var(--violet-18), var(--amber-18)); }
.achip.none { color: var(--muted); border-color: var(--border-hi); background: transparent; }
.seg.fill button { font-size: 12.5px; padding: 3px 9px; }
.seg.fill button.on { background: var(--violet); color: var(--on-violet-fg); border-color: var(--violet); }
.frow.fillrow .ro { font-size: 12px; color: var(--dim); }
.plan-empty { color: var(--muted); padding: 16px 12px; font-size: 13px; }

#render-panel { flex: 0 0 auto; }
.rrow { display: grid; grid-template-columns: 74px 92px 1fr; gap: 10px; align-items: center; margin: 6px 0; }
.rrow .rname { font-family: var(--font-display); font-size: 14px; letter-spacing: .03em; }
.rrow .rbar { position: relative; height: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.rrow .rbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--blue); transition: width .4s; }
.rrow.error .rbar i { background: var(--red); }
.rrow.done .rbar i { background: var(--blue); }
.rrow .rtxt { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -2px; }
.rrow .rtxt a { color: var(--blue-text); }
.rrow.error .rtxt { color: var(--red-hi); white-space: normal; }
.rnote { font-size: 12px; color: var(--dim); margin-top: 4px; }

.matrix { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 4px 6px; align-items: center; margin: 4px 0 2px; }
.matrix .mx-head { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; text-align: center; padding-bottom: 2px; }
.matrix .mx-head.moderate { color: var(--amber-text); } .matrix .mx-head.strict { color: var(--red-text); }
.matrix .mx-lbl { font-family: var(--mono); font-size: 12px; color: var(--text-3); text-align: right; padding-right: 6px; }
.mx-cell {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--text-5); font-size: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 26px; font-family: var(--mono);
}
.mx-cell:hover { border-color: var(--border-hi); color: var(--text); }
.mx-cell .dflt { font-family: var(--font-body); font-size: 10.5px; color: var(--dim); font-style: italic; }
.mx-cell.def { border-style: dashed; border-color: var(--border-hi); color: var(--text-4); background: var(--bg3); }
.mx-cell.on { background: var(--seg-on-bg); color: var(--seg-on-fg); border-color: var(--seg-on-bg); }
.mx-cell.on .dflt { color: var(--seg-on-dim); }
.mx-cell:disabled { opacity: .35; cursor: default; }
.matrix .mx-reset { justify-self: stretch; }
.mx-note { font-size: 12px; color: var(--muted); margin: 2px 0 0 90px; }
.mx-note.rejected { color: var(--red-hi); }

.similar { border: 1px solid var(--red-40); background: rgba(192,32,38,.06); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0 4px; }
.similar .sim-title { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.similar .sim-title b { color: var(--red-hi); font-weight: 700; }
.simrow { display: grid; grid-template-columns: 22px 40px 1fr 48px 56px; gap: 6px; align-items: center; font-size: 12.5px; padding: 2px 0; }
.simrow .sid { font-family: var(--mono); font-size: 12px; }
.simrow .sim { font-family: var(--mono); font-size: 11.5px; color: var(--muted); text-align: right; }
.simrow .go { color: var(--blue-text); cursor: pointer; font-size: 11.5px; text-align: right; }
.simrow input { accent-color: var(--red); }
.similar .sim-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.similar .sim-foot .ro { color: var(--dim); font-size: 11.5px; }
.similar-none { font-size: 12px; color: var(--dim); margin: 4px 0 4px 90px; }

.learn-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; }
.learn-summary b { font-family: var(--mono); color: var(--text); font-weight: 400; }
.learn-effects { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.learn-effects .sig.up { color: var(--blue-text); border-color: var(--blue-40); }
.learn-effects .sig.down { color: var(--red-hi); border-color: var(--red-40); }
.lessons { font-family: var(--mono); font-size: 11.5px; color: var(--text-4); white-space: pre-wrap; max-height: 150px; overflow-y: auto; background: var(--bg0); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 0; }
.learn-err { color: var(--red-hi); font-size: 12.5px; white-space: pre-wrap; }

#overlay.draw.vertex { cursor: grab; }
#overlay.draw.poly { cursor: crosshair; }
.seg.tool button { font-size: 12.5px; padding: 3px 9px; }
.seg.tool button.on { background: var(--blue); color: var(--on-blue-fg); border-color: var(--blue); }
.kf-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; max-height: 64px; overflow-y: auto; }
.kf {
  font-family: var(--mono); font-size: 11px; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--blue); color: var(--blue-text);
  background: transparent; cursor: pointer; line-height: 1.3;
}
.kf.tracker { border-style: dashed; color: var(--blue-tracker); }
.kf.at { background: var(--blue); color: var(--on-blue-fg); }
.kf.at.tracker { background: var(--blue-35); color: var(--text); }
.kf .k { opacity: .7; margin-left: 3px; }
.kf-none { font-size: 12px; color: var(--dim); }
.btn.track { font-family: var(--mono); }
.btn.track.busy { opacity: .5; pointer-events: none; }
.region-src.tracker { color: var(--blue-tracker); border-color: var(--blue-40); border-style: dashed; }
.region-src.interp { color: var(--blue-text); border-color: var(--blue-40); border-style: dotted; }

#flags-panel { flex: 0 0 auto; max-height: 46%; }
#flags-panel .panel-body { max-height: 300px; padding-top: 6px; }
#flags-counts.has-new { color: var(--amber-text); }
.flag-row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--row-line); align-items: start; }
.flag-row:last-child { border-bottom: 0; }
.flag-row.accepted { opacity: .75; } .flag-row.rejected { opacity: .6; }
.flag-thumb { width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; cursor: pointer; color: var(--text-4); }
.flag-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flag-thumb.none { cursor: default; }
.flag-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.flag-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flag-t { font-family: var(--mono); font-size: 12.5px; color: var(--blue-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; white-space: nowrap; }
.flag-t:hover { color: var(--blue); }
.flag-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag-cat svg.ico { color: var(--text-4); flex: 0 0 auto; }
.flag-by { font-size: 12px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.flag-meta { font-size: 12px; color: var(--muted); font-family: var(--mono); }
.flag-note { font-size: 12.5px; color: var(--text-3); white-space: pre-wrap; }
.flag-act { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.flag-act input { flex: 1 1 120px; min-width: 0; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 7px; font-size: 12.5px; }
.flag-act input:focus { outline: none; border-color: var(--blue); }
.flag-act .btn.accept { color: var(--accept-text); border-color: var(--accept-border); }
.flag-act .btn.accept:hover { background: var(--accept-bg); color: var(--on-accept-fg); border-color: var(--accept-bg); }
.flag-act .btn.reject { color: var(--red-text); border-color: var(--red-40); }
.flag-act .btn.reject:hover { background: var(--red-18); }
.flag-decided { font-size: 12px; color: var(--muted); }
.flag-decided b { font-weight: 400; color: var(--text-3); }
.flag-decided .evlink { color: var(--blue-text); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }

#policy-panel { flex: 0 0 auto; max-height: 46%; }
#policy-head { cursor: pointer; user-select: none; }
#policy-panel .panel-body { max-height: 320px; }
.prules { display: grid; grid-template-columns: 1fr 1fr 96px 96px 26px; gap: 4px 8px; align-items: center; }
.prules .ph { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding-bottom: 2px; border-bottom: 1px solid var(--border); }
.prules .ph.moderate { color: var(--amber-text); } .prules .ph.strict { color: var(--red-text); }
.prules .pr-cat { font-size: 13px; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.prules .pr-cat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prules .pr-cat svg.ico { color: var(--text-4); }
.prules .pr-sub { font-family: var(--mono); font-size: 12px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; min-width: 0; }
.prules .pr-sub > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prules .pr-sub.any { color: var(--dim); font-style: italic; font-family: var(--font-body); }
.prules select.sel { width: 100%; font-family: var(--mono); font-size: 12px; padding: 2px 4px; }
.prules select.sel.a-blur, .prules select.sel.a-blurmute { color: var(--blue-text); }
.prules select.sel.a-fill, .prules select.sel.a-fillmute { color: var(--violet-text); }
.prules select.sel.a-skip { color: var(--red-hi); }
.prules select.sel.a-mute { color: var(--amber-text); }
.prules select.sel.a-none { color: var(--muted); }
.prules .pr-del { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 6px; cursor: pointer; width: 24px; height: 24px; padding: 0; font-size: 13px; }
.prules .pr-del:hover { border-color: var(--red); color: var(--red-hi); }
.prules .pr-add { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 96px 96px 26px; gap: 4px 8px; align-items: center; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--border); }
.prules .pr-add .btn { padding: 2px 0; font-size: 12px; width: 26px; height: 24px; }
.policy-note { font-size: 12px; color: var(--dim); margin-top: 8px; }
.policy-note b { color: var(--muted); font-weight: 400; }
.policy-empty { font-size: 12.5px; color: var(--muted); padding: 4px 0 8px; }
.mx-rule { font-family: var(--font-body); font-size: 10.5px; color: var(--amber-text); font-style: italic; }
.mx-cell.def.rule { border-color: var(--amber-40); }

#objects-panel { flex: 0 0 auto; max-height: 46%; }
#objects-head { cursor: pointer; user-select: none; }
#objects-panel .panel-body { max-height: 244px; padding-top: 6px; }
.obj-sel .frow > label.cls { flex: 0 0 auto; margin-left: 4px; }
.obj-sel .cls-sel { flex: 0 0 132px; min-width: 0; }
.obj-sel .olink-add { flex: 0 0 154px; min-width: 0; font-size: 11.5px; }
#overlay.obj { cursor: cell; }
#stage-hud #hud-object { color: var(--ov-blue); border: 1px solid var(--ov-blue); }
.obj-empty { color: var(--dim); font-size: 12.5px; padding: 8px 2px; }
.ep-empty.obj-empty { padding: 10px 2px; color: var(--muted); }
.obj-sel { border: 1px solid var(--blue-40); background: var(--blue-18); border-radius: var(--radius); padding: 7px 9px 4px; margin-bottom: 8px; }
.obj-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.obj-head .o-id { font-family: var(--mono); font-size: 14px; font-weight: 700; }
.obj-head .o-span { font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.obj-head .o-span .open, .orow .o-tc .open { color: var(--amber-text); font-style: italic; }
.obj-head .o-now { margin-left: auto; font-family: var(--mono); font-size: 11.5px; padding: 2px 7px; border-radius: 20px; border: 1px solid; }
.obj-head .o-now.vis { color: var(--blue-text); border-color: var(--blue-40); }
.obj-head .o-now.hid { color: var(--dim); border-color: var(--border-hi); border-style: dashed; }
.chip.obj-src { font-size: 10.5px; padding: 3px 7px; color: var(--blue-text); border-color: var(--blue-40); background: transparent; }
.chip.obj-src.detector { color: var(--amber-text); border-color: var(--amber-40); border-style: dashed; }
.chip.obj-src.tracker { border-style: dashed; }
.obj-sel .frow { margin: 5px 0; }
.obj-sel .frow > label { flex-basis: 54px; }
.obj-sel .field-ta { min-height: 34px; }
.obj-sel .btn.small.danger { border-color: var(--red); color: var(--red-hi); }
.obj-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.olink, .ochip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--blue-40); border-radius: 20px; padding: 1px 4px 1px 8px; color: var(--blue-text); }
.olink .go, .ochip .go { cursor: pointer; }
.olink .go:hover, .ochip .go:hover { text-decoration: underline; }
.olink .x, .ochip .x { background: transparent; border: 0; color: var(--dim); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; }
.olink .x:hover, .ochip .x:hover { color: var(--red-hi); }
.obj-chips { gap: 5px; }
.ochip .dot, .orow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: inline-block; flex: 0 0 auto; }
.ochip .dot.detector, .orow .dot.detector { background: var(--amber); }
.olist-head, .orow { display: grid; grid-template-columns: 44px 1fr 88px 132px 34px 92px; gap: 6px; align-items: center; padding: 0 2px; }
.olist-head { height: 20px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); border-bottom: 1px solid var(--border); }
.olist { max-height: 150px; overflow-y: auto; }
.orow { height: 24px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--row-line); }
.orow:hover { background: var(--bg2); }
.orow.selected { background: var(--bg3); box-shadow: inset 3px 0 0 var(--sel-bar); }
.orow.here .o-id { color: var(--blue-text); font-weight: 700; }
.orow .o-id, .orow .o-tc, .orow .o-kf, .orow .o-links { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); }
.orow .o-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.orow .o-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .o-title .t { font-weight: 700; }
.orow .o-class { font-family: var(--mono); font-size: 11.5px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orow .o-kf .hid { color: var(--amber-text); font-style: normal; margin-left: 3px; }
.orow.proposal { opacity: .95; }
.orow.proposal .o-id, .orow.proposal .o-class { color: var(--amber-text); }
.orow.proposal .btn.small { padding: 1px 7px; font-size: 11.5px; }
.kf.hidden-kf { border-style: dotted; color: var(--dim); }
.kf.detector { border-style: dashed; color: var(--amber-text); border-color: var(--amber-40); }
.obj-src-note { font-size: 11px; color: var(--dim); font-family: var(--mono); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dialog { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: flex; align-items: center; justify-content: center; }
.dialog-box { width: 520px; background: var(--bg1); border: 1px solid var(--border-hi); border-radius: var(--radius); padding: 14px 16px 12px; box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-display); font-size: 16px; letter-spacing: .03em; margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.dialog-title .hint { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.dialog-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.dialog-foot .hint { font-size: 11.5px; color: var(--dim); margin-right: auto; }
.dialog .frow > label { flex-basis: 96px; }
.field-txt.hidden { display: none; }

.explain { position: fixed; inset: 0; z-index: 70; background: var(--scrim); display: flex; justify-content: center; padding: 26px 20px; }
.explain-box {
  width: 1000px; max-width: 100%; max-height: 100%; overflow-y: auto; background: var(--bg1); border: 1px solid var(--border-hi); border-radius: var(--radius);
  padding: 0 26px 26px; box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.42; color: var(--text-1);
}
.explain-head { position: sticky; top: 0; z-index: 1; background: var(--bg1); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 16px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.explain-head h1 { font-family: var(--font-display); font-size: 21px; letter-spacing: .03em; font-weight: 400; margin: 0; white-space: nowrap; }
.explain-head .hint { color: var(--muted); font-size: 12.5px; white-space: nowrap; margin-right: auto; }
.explain-head nav { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; order: 3; }
.explain-head nav a { color: var(--blue-text); text-decoration: none; }
.explain-head nav a:hover { text-decoration: underline; }
.explain-head .btn.round { flex: 0 0 auto; }
.explain h2 { font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; font-weight: 400; margin: 22px 0 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.explain h2:first-of-type { border-top: 0; padding-top: 4px; margin-top: 6px; }
.explain p { margin: 4px 0 8px; color: var(--text-2); }
.explain p.lead { color: var(--muted); }
.explain .ex-grid { display: grid; grid-template-columns: 26px 168px 1fr 1fr; gap: 6px 12px; align-items: start; }
.explain .ex-grid.two { grid-template-columns: 26px 168px 1fr; }
.explain .ex-grid.sig { grid-template-columns: 150px 1fr 1fr 1fr; }
.explain .ex-grid > * { min-width: 0; }
.explain .ex-grid .h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); padding-bottom: 3px; border-bottom: 1px solid var(--border); }
.explain .ex-grid .name { font-weight: 700; }
.explain .ex-grid .name .sub { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.explain .ex-grid .name code, .explain code { font-family: var(--mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.explain .ex-grid .no { color: var(--muted); }
.explain .ex-grid .no::before { content: 'not: '; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.explain .ex-grid svg.ico { width: 20px; height: 20px; color: var(--text-3); }
.explain .subs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 6px; grid-column: 2 / -1; font-size: 12.5px; color: var(--text-3); }
.explain .subs span { display: inline-flex; align-items: center; gap: 5px; }
.explain .subs svg.ico { width: 15px; height: 15px; color: var(--text-4); }
.explain .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-top: 3px; }
.explain .order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.explain .order .step { border: 1px solid var(--border-hi); background: var(--bg2); border-radius: 20px; padding: 3px 10px; font-size: 12.5px; }
.explain .order .step b { font-family: var(--mono); font-weight: 400; color: var(--blue-text); margin-right: 4px; }
.explain .order .arrow { color: var(--dim); }
.explain table.tbl { border-collapse: collapse; font-size: 12.5px; margin: 4px 0 10px; }
.explain table.tbl th, .explain table.tbl td { border: 1px solid var(--border); padding: 3px 9px; text-align: left; }
.explain table.tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 400; background: var(--bg2); }
.explain .keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 18px; font-size: 12.5px; }
.explain .keys div { display: flex; gap: 8px; align-items: baseline; }
.explain .keys kbd { font-size: 11px; }
.explain .keys .k { flex: 0 0 122px; }
.explain .theme-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 8px; }
.explain .theme-row .sample { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--bg1); }
::-webkit-scrollbar-track { background: transparent; }

.family-ctl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
#btn-family.on { border-color: var(--blue); color: var(--blue-text); background: var(--blue-18); }
#btn-family-open { font-size: 13px; }
.fv-count {
  font-size: 11px; font-family: var(--mono); color: var(--dim); white-space: nowrap;
  border: 1px solid var(--border); border-radius: 20px; padding: 2px 8px; min-width: 52px; text-align: center;
}
.fv-count.idle { color: var(--amber-text); border-color: var(--amber-40); background: var(--amber-18); }
.fv-count.live { color: var(--blue-text); border-color: var(--blue-40); background: var(--blue-18); }
.fv-count.err { color: var(--red-text); border-color: var(--red); }
.fv-count.live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: 5px; vertical-align: 1px; }

@media (max-width: 1600px) { #btn-family kbd { display: none; } .v0-note { display: none; } }
@media (max-width: 1400px) { .fv-count { min-width: 0; padding: 2px 6px; font-size: 10.5px; } }

#didactic-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 6; }
.didactic-card {
  position: absolute; width: 310px; max-width: 46%; max-height: 62%; overflow: hidden;
  background: rgba(12, 14, 16, .92); border: 1px solid var(--ov-blue); border-radius: var(--radius);
  color: #e9edf0; font-family: var(--font-body); font-size: 12px; line-height: 1.42;
  padding: 7px 9px 8px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55); pointer-events: none;
}
.didactic-card .dc-x {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; line-height: 15px; text-align: center;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.4); color: #cfd6db; border-radius: 4px;
  font-size: 13px; cursor: pointer; pointer-events: auto; padding: 0;
}
.didactic-card .dc-x:hover { border-color: var(--ov-blue); color: #fff; }
.dc-head { display: flex; align-items: center; gap: 6px; margin: 0 20px 5px 0; }
.dc-head svg.ico { width: 16px; height: 16px; color: var(--ov-blue); flex: 0 0 auto; }
.dc-title { font-family: var(--font-display); font-weight: 400; font-size: 14px; color: #fff; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-id { font-family: var(--mono); font-size: 10.5px; color: #97a3ab; margin-left: auto; flex: 0 0 auto; }
.dc-row { display: flex; gap: 6px; margin-bottom: 3px; }
.dc-lbl { flex: 0 0 auto; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #8b979f;
  border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 1px 6px; height: 15px; line-height: 12px; margin-top: 1px; }
.dc-lbl.bad { color: #e2989b; border-color: rgba(192,32,38,.55); }
.dc-val { flex: 1 1 auto; min-width: 0; color: #d6dde2; }
.dc-row.conf .dc-word { font-family: var(--font-display); font-size: 13px; }
.dc-row.conf.sure .dc-word { color: #8fd49a; }
.dc-row.conf.fair .dc-word { color: var(--ov-blue); }
.dc-row.conf.guess .dc-word { color: var(--ov-amber); }
.dc-rule { display: block; font-style: normal; font-size: 9.5px; line-height: 1.35; color: #7e8a92; margin-top: 1px; }
.dc-def { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.12); color: #e4eaee; }
.dc-def.none { color: #a9b4bb; font-style: italic; }
.dc-not { display: flex; gap: 6px; margin-top: 4px; color: #bcc6cd; font-size: 11.5px; }

#gam-hud {
  position: absolute; left: 10px; top: 10px; display: flex; align-items: center; gap: 8px; z-index: 7;
  background: rgba(12, 14, 16, .84); border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
  padding: 4px 6px 4px 12px; font-family: var(--font-body); font-size: 11.5px; color: #dbe2e7;
  pointer-events: none; max-width: 88%; white-space: nowrap; overflow: hidden;
}
#gam-hud.hidden { display: none; }
#gam-hud.bump { animation: gh-bump .45s ease-out; }
@keyframes gh-bump { 0% { transform: scale(1); } 30% { transform: scale(1.06); border-color: var(--ov-blue); } 100% { transform: scale(1); } }
#gam-hud .gh-pts { font-size: 12px; color: #aeb9c0; }
#gam-hud .gh-pts b { font-family: var(--font-display); font-size: 16px; color: #fff; margin-right: 3px; }
#gam-hud .gh-streak { font-family: var(--mono); font-size: 11px; color: #9fabb3; border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px; padding: 1px 8px; }
#gam-hud .gh-streak.hot { color: var(--ov-amber); border-color: rgba(240,134,12,.55); background: rgba(240,134,12,.16); }
#gam-hud .gh-bits { color: #96a2aa; }
#gam-hud .gh-last { font-family: var(--mono); font-size: 10.5px; color: #8e9aa2; }
#gam-hud .gh-last.up { color: #8fd49a; }
#gam-hud .gh-last.zero { color: var(--ov-amber); }
#gam-hud .gh-btn {
  pointer-events: auto; cursor: pointer; font-family: var(--font-body); font-size: 10.5px; color: #cdd6db;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: 2px 9px;
}
#gam-hud .gh-btn:hover { border-color: var(--ov-blue); color: #fff; }
#gam-hud .gh-x { padding: 2px 7px; }

#gam-summary {

  position: absolute; left: 50%; top: calc(50% - 26px); transform: translate(-50%, -50%); width: 520px; max-width: 92%;
  max-height: calc(92% - 52px); overflow: auto; z-index: 9; background: rgba(12, 14, 16, .96);
  border: 1px solid var(--ov-blue); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.6);
  padding: 11px 15px 12px; color: #e6ecf0; font-family: var(--font-body); font-size: 13px;
}
#gam-summary.hidden { display: none; }
#gam-summary .gs-x { position: absolute; top: 7px; right: 8px; width: 22px; height: 22px; line-height: 19px; text-align: center;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #cfd6db; border-radius: 5px; font-size: 15px; cursor: pointer; padding: 0; }
#gam-summary .gs-head { display: flex; align-items: baseline; gap: 9px; margin: 0 26px 7px 0; }
#gam-summary .gs-head b { font-family: var(--font-display); font-weight: 400; font-size: 17px; color: #fff; }
#gam-summary .gs-label { font-size: 11.5px; color: var(--ov-blue); }
#gam-summary .gs-time { font-family: var(--mono); font-size: 11px; color: #8e9aa2; margin-left: auto; }
#gam-summary .gs-sentence { color: #dfe6eb; line-height: 1.45; margin-bottom: 8px; font-size: 12.5px; }
#gam-summary .gs-grid { display: grid; grid-template-columns: 44px 1fr; gap: 1px 10px; align-items: baseline; }
#gam-summary .gs-n { font-family: var(--font-display); font-size: 18px; color: #fff; text-align: right; }
#gam-summary .gs-n.zero { color: var(--ov-amber); }
#gam-summary .gs-l { color: #a9b4bb; font-size: 11.5px; }
#gam-summary .gs-rule { margin: 9px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono); font-size: 9.5px; line-height: 1.42; color: #8b979f; white-space: pre-wrap; }

#btn-here { margin-left: auto; white-space: nowrap; }
#btn-here + .sel.small { margin-left: 0; }
.row.near { box-shadow: inset 3px 0 0 var(--muted); background: var(--bg2); }

#main { position: relative; }
#split-v { position: absolute; top: 0; bottom: 0; width: 7px; cursor: col-resize; z-index: 30; }
#split-h { flex: 0 0 5px; cursor: row-resize; background: var(--border); }
#split-v:hover, #split-v.on, #split-h:hover, #split-h.on, .panel-grip:hover, .panel-grip.on { background: var(--sel-bar); opacity: .55; }
.panel { position: relative; }
.panel-grip { position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; cursor: row-resize; z-index: 5; }
.panel.collapsed .panel-grip, body.popout .panel-grip { display: none; }
.panel.sized { max-height: none !important; }
.panel.sized.collapsed { flex: 0 0 auto !important; }
.panel.sized > .panel-body, .panel.sized > .ep-body, .panel.sized > .list-body { max-height: none !important; flex: 1 1 auto; }
#right.custom { overflow-y: auto; }
body.layout-drag { user-select: none; }
body.layout-drag #stage, body.layout-drag #timeline-wrap { pointer-events: none; }
.panel-tools { display: inline-flex; gap: 2px; opacity: .3; transition: opacity .12s; }
.panel-head:hover .panel-tools { opacity: 1; }
.panel-tools button { background: none; border: 1px solid transparent; border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 10px; line-height: 1; padding: 3px 4px; }
.panel-tools button:hover { border-color: var(--border); background: var(--bg2); color: var(--text); }
.panel-ghost { display: flex; align-items: center; gap: 12px; padding: 6px 12px; height: 36px; flex: 0 0 auto; border-bottom: 1px dashed var(--border); background: var(--bg1); }
.panel-ghost .btn { margin-left: auto; }
body.popout { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg1); }
body.popout .panel { flex: 1 1 0 !important; max-height: none !important; min-height: 60px; order: 0 !important; }
body.popout .panel.collapsed { flex: 0 0 auto !important; }
body.popout .panel > .panel-body, body.popout .panel > .ep-body, body.popout .panel > .list-body { max-height: none !important; flex: 1 1 auto; }
body.popout .panel-tools { opacity: 1; }
body.popout .panel-tools [data-lt="up"], body.popout .panel-tools [data-lt="down"] { display: none; }
#btn-new-object.on { background: var(--sel-bar); color: #fff; border-color: var(--sel-bar); }
.panel-head > .progress { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
body.popout { overflow-x: auto; min-width: 0; }
body.popout .panel { min-width: 640px; }

#stage-hud #hud-pick { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ov-blue); padding: 3px 8px; }
#stage-hud #hud-pick.hidden { display: none; }
#hud-pick b { color: #fff; font-weight: 600; }
#hud-pick i { color: #9aa; font-style: normal; font-size: 11px; }
#hud-pick button { font: inherit; color: #ddd; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 1px 8px; cursor: pointer; }
#hud-pick button:hover { background: rgba(255,255,255,.2); }
#hud-pick button.on { background: var(--ov-blue); border-color: var(--ov-blue); color: #04202e; font-weight: 600; }
#overlay.move { cursor: move; }
#overlay.nwse { cursor: nwse-resize; }
#overlay.nesw { cursor: nesw-resize; }
#overlay.vertex { cursor: grab; }
#btn-new-object.nudge { outline: 2px solid var(--sel-bar); outline-offset: 1px; }

.settings-menu { position: relative; }
.settings-menu > summary { list-style: none; cursor: pointer; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-menu[open] > summary { background: var(--bg3); }
.settings-pop { position: fixed; right: 12px; top: 44px; z-index: 300; min-width: 250px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.settings-pop .set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-pop .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }

.eo-list { display: flex; flex-direction: column; margin: 2px 0 6px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.eo-row { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 2px 6px 2px 8px; font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--row-line); }
.eo-row:last-child { border-bottom: 0; }
.eo-row:hover { background: var(--bg2); }
.eo-row.selected { background: var(--bg3); box-shadow: inset 3px 0 0 var(--sel-bar); }
.eo-row.legacy { cursor: default; }
.eo-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.eo-row .dot.detector { background: var(--amber); }
.eo-row b { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
.eo-row .eo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.eo-row .eo-meta { flex: 1 1 auto; min-width: 0; color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-row.off b, .eo-row.off .eo-name { color: var(--dim); }
.eo-row .x { background: transparent; border: 0; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.eo-row .x:hover { color: var(--red-hi); }
.eo-row .btn.small { padding: 1px 8px; flex: 0 0 auto; }
.eo-none { padding: 8px 10px; color: var(--dim); font-size: 12.5px; }
.eo-tools { margin-bottom: 6px; }