:root{
  --fn:#00d68f; --vice:#ff2b1c;
  --up:#00e08a; --down:#ff4d5e;
  --disp:"Archivo","Helvetica Neue",Arial,sans-serif;
  --cond:"Archivo Narrow","Arial Narrow",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ui:"Roboto","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#050506;color:#f4f6f8;font-family:var(--disp);
  -webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:16px}
.wrap{width:min(96vw,1500px)}

/* ============ OPERATOR CONTROL BAR ============ */
.control{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:#111318;border:1px solid #22262e;border-radius:10px;padding:11px 14px;margin-bottom:12px}
.ctrl-brand{display:flex;align-items:center;gap:9px;font:800 15px var(--disp)}
.ctrl-brand .cb-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:6px;background:#0a0b0d;border:1px solid #22303a;color:var(--fn);
  font:800 14px Georgia,serif;line-height:1}
.ctrl-brand .cb-sub{font:600 11px var(--mono);color:#8b93a0;letter-spacing:.04em;margin-left:2px}
.ctrl-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-left:auto}
.plat-pick{display:flex;align-items:center;gap:8px;font:700 12px var(--disp);color:#9aa3af;letter-spacing:.02em}
.plat-pick select{font:700 13px var(--disp);color:#f4f6f8;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 30px 8px 12px;cursor:pointer;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239aa3af' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.plat-pick select:focus{outline:2px solid var(--fn);outline-offset:1px}
.stream-btn{font:800 13px var(--disp);letter-spacing:.02em;color:#fff;background:var(--vice);
  border:1px solid var(--vice);border-radius:7px;padding:9px 16px;cursor:pointer;transition:.15s;white-space:nowrap}
.stream-btn:hover{background:#ff4436}
.stream-btn.live{background:#1a1e26;border-color:#3a4150;color:#ff7a70}
.stream-btn.live:hover{background:#232833}
.typed-drive{display:flex;gap:6px;align-items:center}
.typed-drive input{width:230px;background:#0c0e13;border:1px solid #22262e;border-radius:7px;
  color:#f4f6f8;font:500 12.5px var(--disp);padding:8px 11px;outline:none}
.typed-drive input:focus{border-color:var(--fn)}
.typed-drive button{background:#1a1e26;border:1px solid #2a2f3a;border-radius:7px;color:#f4f6f8;
  font:700 14px var(--disp);padding:7px 12px;cursor:pointer}
.typed-drive button:hover{background:#232833}
.ctrl-status{font:500 11px var(--mono);color:#8b93a0;letter-spacing:.01em}
.ctrl-status.err{color:var(--down)}
.ctrl-status.live{color:var(--fn)}
.ctrl-status.paused{color:#f5b942}   /* kill-switch: operator paused the pipeline server-side */
.dbg-toggle{font:700 12px var(--mono);color:#9aa3af;background:#141821;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 11px;cursor:pointer}
.dbg-toggle:hover{background:#1c212b;color:#f4f6f8}
.dbg-toggle.on{background:#0e2a22;border-color:var(--fn);color:var(--fn)}

/* ============ INSTRUMENTATION PANEL ============ */
.dbg{position:fixed;right:14px;top:14px;z-index:50;width:340px;max-height:82vh;overflow:auto;
  background:rgba(10,12,16,.97);border:1px solid #2a3040;border-radius:10px;padding:12px 13px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);font-family:var(--mono);color:#cfd5dd}
.dbg[hidden]{display:none}
.dbg h4{font:800 11px var(--disp);letter-spacing:.1em;color:var(--fn);margin-bottom:9px;
  display:flex;align-items:center;justify-content:space-between}
.dbg h4 .x{cursor:pointer;color:#6b7280;font-size:14px}
.dbg .grid{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:11px;margin-bottom:9px}
.dbg .grid .k{color:#8b93a0}
.dbg .grid .v{color:#f4f6f8;text-align:right;font-weight:700}
.dbg .grid .v.good{color:var(--up)}.dbg .grid .v.warn{color:#f5a623}.dbg .grid .v.bad{color:var(--down)}
.dbg .sec{font:800 9px var(--disp);letter-spacing:.12em;color:#6b7280;margin:10px 0 6px;border-top:1px solid #22262e;padding-top:8px}
.dbg .last{font-size:10.5px;color:#9aa3af;line-height:1.4;margin-bottom:8px;word-break:break-word}
.dbg .last b{color:#cfd5dd}
.dbg .row{display:flex;gap:7px;margin-top:8px}
.dbg button{flex:1;font:700 11px var(--mono);color:#f4f6f8;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:6px;padding:7px;cursor:pointer}
.dbg button:hover{background:#232833}
.dbg .spark{display:flex;align-items:flex-end;gap:1px;height:26px;margin:4px 0 2px}
.dbg .spark i{flex:1;background:var(--fn);opacity:.8;border-radius:1px;min-height:1px}
.dbg .evlog{display:flex;flex-direction:column;gap:2px;max-height:168px;overflow:auto;margin-top:2px}
.dbg .ev{font:500 10.5px/1.4 var(--mono);color:#9aa3af;padding:3px 6px;border-radius:5px;background:#0f1218;
  border-left:2px solid #2a3040;word-break:break-word}
.dbg .ev .evt{color:#6b7280;margin-right:3px}
.dbg .ev .evd{color:#c9d1dc;font-weight:700}
.dbg .ev-err{color:#ff8a94;background:rgba(255,77,94,.09);border-left-color:var(--down)}
.dbg .ev-warn{color:#f5c26b;background:rgba(245,166,35,.08);border-left-color:#f5a623}
.dbg .ev-info{border-left-color:#2a3040}

/* ============ SHARED STREAM LAYOUT (skinned via vars) ============ */
.site{border-radius:12px;overflow:hidden;background:var(--s-bg);color:var(--s-text);
  border:1px solid var(--s-border);font-family:var(--ui);box-shadow:0 24px 70px rgba(0,0,0,.55)}
.site,.site *{--_a:var(--s-accent)}

.topbar{display:flex;align-items:center;gap:16px;height:50px;padding:0 14px;
  background:var(--s-topbar);border-bottom:1px solid var(--s-border)}
.tb-left{display:flex;align-items:center;gap:18px}
.tb-logo{display:flex;align-items:center}
.tb-nav{display:flex;gap:16px}
.tb-nav a{font:700 14px var(--ui);color:var(--s-text);text-decoration:none;opacity:.92}
.tb-nav a:hover{color:var(--s-accent)}
.tb-mid{flex:1;display:flex;justify-content:center;align-items:center;gap:11px}
.tb-searchbox{display:flex;align-items:stretch;width:min(440px,44vw)}
.tb-search{flex:1;width:auto;background:var(--s-search);border:1px solid var(--s-border);
  border-radius:8px;color:var(--s-text);font:500 13px var(--ui);padding:8px 14px}
.tb-search::placeholder{color:var(--s-dim)}
.tb-searchbtn{display:none;align-items:center;justify-content:center;width:62px;flex:none;
  border:1px solid var(--s-border);border-left:none;border-radius:0 8px 8px 0;background:var(--s-hover);color:var(--s-dim);cursor:pointer}
.tb-mic{display:none}
.tb-right{display:flex;align-items:center;gap:12px}
.tb-right .ic{width:20px;height:20px;color:var(--s-dim);display:flex;align-items:center;justify-content:center;font-size:16px}
.tb-right .av{width:30px;height:30px;border-radius:50%;background:var(--s-accent)}
.tb-right .pill{font:700 12px var(--ui);color:var(--s-accent-ink);background:var(--s-accent);
  border-radius:18px;padding:7px 13px;white-space:nowrap}
.tb-right .pill.ghost{background:transparent;border:1px solid var(--s-border);color:var(--s-text)}
.yt-burger{font-size:20px;color:#0f0f0f;margin-right:16px}
.pill.yt-create{background:#f2f2f2;color:#0f0f0f;display:inline-flex;align-items:center;gap:4px}
.yt-bell{position:relative}
.yt-bell::after{content:"";position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:#f00;border:1.5px solid var(--s-topbar)}

.layout{display:grid;grid-template-columns:230px 1fr 340px;min-height:560px}
@media(max-width:1200px){.layout{grid-template-columns:0 1fr 320px}.sidenav{display:none}}

/* left sidebar */
.sidenav{background:var(--s-side);border-right:1px solid var(--s-border);padding:12px 8px;overflow:hidden}
.side-head{font:800 11px var(--ui);letter-spacing:.04em;color:var(--s-dim);padding:6px 10px 10px;text-transform:uppercase}
.side-row{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:8px;cursor:default}
.side-row:hover{background:var(--s-hover)}
.side-av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--s-dim);position:relative}
.side-av.on::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;
  background:#eb0400;border:2px solid var(--s-side)}
.side-meta{flex:1;min-width:0}
.side-name{font:700 13px var(--ui);color:var(--s-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-game{font:400 12px var(--ui);color:var(--s-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-view{font:600 12px var(--ui);color:var(--s-text);display:flex;align-items:center;gap:5px}
.side-view::before{content:"";width:8px;height:8px;border-radius:50%;background:#eb0400}
.side-off{font:400 12px var(--ui);color:var(--s-dim)}
.side-guide-row{display:flex;align-items:center;gap:16px;padding:9px 12px;border-radius:9px;font:500 14px var(--ui);color:var(--s-text)}
.side-guide-row:hover{background:var(--s-hover)}
.side-guide-row .gi{font-size:19px;width:22px;text-align:center}
.side-sep{height:1px;background:var(--s-border);margin:10px 6px}

/* main column */
.main{background:var(--s-bg);min-width:0;display:flex;flex-direction:column}
.player{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%,#1a1d24,#0a0b0d 70%)}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);
  background:#000;opacity:0;transition:opacity .4s ease}
#cam.on{opacity:1}
.cam-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#15161a,#000);z-index:2}
.cam-off-inner{font:600 15px var(--ui);color:#8a8f98;display:flex;align-items:center;gap:10px}
.camdot{width:11px;height:11px;border-radius:50%;background:#4a4f5a}
.player.live .cam-off{display:none}

/* platform-native player badges */
.player-badges{position:absolute;left:12px;top:12px;z-index:6;display:flex;gap:8px;align-items:center;
  opacity:0;transition:opacity .4s ease}
.player.live .player-badges{opacity:1}
.p-live{font:800 12px var(--ui);letter-spacing:.03em;color:#fff;background:#eb0400;border-radius:4px;padding:4px 8px}
.p-view{font:700 12px var(--ui);color:#fff;background:rgba(0,0,0,.62);border-radius:4px;padding:4px 8px;
  display:flex;align-items:center;gap:6px}
.p-view::before{content:"";width:8px;height:8px;border-radius:50%;background:#eb0400}

/* persistent Footnote broadcast bug (top-left, below the LIVE badge, all skins) */
.net-bug{position:absolute;left:12px;top:46px;z-index:7;display:flex;align-items:center;gap:9px;
  background:rgba(7,8,11,.55);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.12);
  border-radius:7px;padding:6px 11px;box-shadow:0 4px 14px rgba(0,0,0,.35);
  opacity:0;transition:opacity .4s ease}
.player.live .net-bug{opacity:1}
/* on skins with no top-left LIVE badge, tuck the bug flush into the top-left corner */
.skin-youtube .net-bug,.skin-kick .net-bug{top:0;left:0;border-top-left-radius:0}
.nb-footnote{display:inline-flex;align-items:center;gap:3px;font:800 15px var(--disp);color:#fff;letter-spacing:-.01em}
.nb-footnote .nb-sup{font:800 10px Georgia,serif;color:var(--fn);vertical-align:super;line-height:1}

/* ======= THE PRODUCT: on-air fact-check lower-third (broadcast graphic, all skins) ======= */
.onair{position:absolute;left:24px;right:24px;bottom:64px;z-index:9;display:flex;align-items:stretch;
  min-height:74px;border-radius:9px;overflow:hidden;color:#fff;font-family:var(--disp);
  background:linear-gradient(180deg,rgba(11,13,17,.94),rgba(8,9,12,.97));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 44px rgba(0,0,0,.6);
  opacity:0;transform:translateY(18px);pointer-events:none}
.onair[hidden]{display:none}
.onair.show{opacity:1;transform:none;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
/* verdict color rail down the left edge, keyed by verdict class */
.onair .oa-verdict{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:none;width:118px;padding:10px 8px;gap:2px;font:900 15px var(--disp);letter-spacing:.02em;
  text-align:center;line-height:1.05;color:#fff;background:#333}
.onair.v-true .oa-verdict{background:linear-gradient(180deg,#0b8f5f,#0a7a52)}
.onair.v-false .oa-verdict{background:linear-gradient(180deg,#d33143,#b3212f)}
.onair.v-warn .oa-verdict{background:linear-gradient(180deg,#d79321,#b9791a);color:#0b0b0b}
.onair.v-gray .oa-verdict{background:linear-gradient(180deg,#4a5160,#3a404c)}
.onair.v-true{border-color:rgba(0,214,143,.5)}
.onair.v-false{border-color:rgba(255,77,94,.5)}
.onair.v-warn{border-color:rgba(245,166,35,.5)}
.oa-mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:11px 15px}
.oa-claimline{display:flex;align-items:baseline;gap:10px;min-width:0}
.oa-kicker{flex:none;font:800 9px var(--mono);letter-spacing:.14em;color:var(--fn);
  border:1px solid rgba(0,214,143,.4);border-radius:3px;padding:2px 5px 1px}
.oa-claim{font:700 15px/1.28 var(--disp);color:#eef1f4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oa-correction{font:600 14px/1.32 var(--disp);color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oa-right{flex:none;width:150px;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:6px;padding:11px 15px 11px 12px;border-left:1px solid rgba(255,255,255,.1);text-align:right}
.oa-brand{font:800 15px var(--disp);color:#fff;display:inline-flex;align-items:center;gap:2px}
.oa-brand .oa-sup{font:800 10px Georgia,serif;color:var(--fn);vertical-align:super}
.oa-src{font:600 11px/1.3 var(--mono);color:#9aa3af;word-break:break-word}
.oa-timer{position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--fn),#26f0aa)}

/* ======= OPERATOR PANEL — the fact-check queue (presenter-only "director's rundown") =======
   Pinned to the bottom of the viewport so pending checks are ALWAYS visible and AIR-able
   without scrolling past the stream. Cards flow horizontally; the rail scrolls if it overfills. */
.ops{position:fixed;left:16px;right:16px;bottom:14px;z-index:45;
  background:rgba(13,15,20,.97);backdrop-filter:blur(8px);border:1px solid #2a3040;border-radius:12px;
  overflow:hidden;box-shadow:0 -12px 44px rgba(0,0,0,.55);display:flex;flex-direction:column;max-height:46vh}
.ops-head{display:flex;align-items:center;gap:12px;padding:9px 15px;border-bottom:1px solid #1c2029;background:#111318;flex:none}
.ops-title{font:900 13px var(--disp);letter-spacing:.06em;color:#f4f6f8;display:flex;align-items:center;gap:4px}
.ops-title .ops-sup{font:800 10px Georgia,serif;color:var(--fn);vertical-align:super}
.ops-status{font:600 11px var(--mono);color:#8b93a0;letter-spacing:.02em}
.ops-status.busy{color:var(--fn)}
.ops-restored{display:inline-flex;align-items:center;gap:7px;font:700 10px var(--mono);color:var(--fn);
  background:rgba(0,214,143,.07);border:1px solid rgba(0,214,143,.28);border-radius:5px;padding:3px 8px;white-space:nowrap}
.ops-restored button{all:unset;cursor:pointer;color:#8b93a0;font:700 11px var(--mono);line-height:1}
.ops-restored button:hover{color:#fff}
.ops-readonly{display:inline-flex;align-items:center;gap:7px;font:700 10px var(--mono);color:#f5b942;
  background:rgba(245,185,66,.08);border:1px solid rgba(245,185,66,.32);border-radius:5px;padding:3px 8px;white-space:nowrap}
.ops-count{font:700 11px var(--mono);color:#6b7280}
.ops-auto{display:flex;align-items:center;gap:7px;font:700 12px var(--disp);color:#9aa3af;cursor:pointer;user-select:none}
.ops-auto input{accent-color:var(--fn);width:15px;height:15px;cursor:pointer}
.ops-head .ops-auto:first-of-type{margin-left:auto}
.ops-pull{font:800 11px var(--disp);letter-spacing:.03em;color:#ff9e97;background:#2a1315;border:1px solid #5a2b2b;
  border-radius:7px;padding:7px 13px;cursor:pointer;white-space:nowrap}
.ops-pull:hover{background:#3a1a1d;color:#fff;border-color:var(--down)}
.ops-log{font:700 11px var(--mono);color:#c9d1dc;background:#141821;border:1px solid #2a2f3a;
  border-radius:7px;padding:7px 12px;cursor:pointer;white-space:nowrap}
.ops-log:hover:not(:disabled){background:#1c212b;color:#fff;border-color:var(--fn)}
.ops-log:disabled{opacity:.5;cursor:default}
.ops-queue{display:flex;gap:10px;padding:12px 15px;overflow-x:auto;overflow-y:hidden;align-items:stretch}
.ops-queue>.fc-card{flex:0 0 300px;max-width:300px}
.ops-empty{flex:1;display:flex;align-items:center;justify-content:center;min-height:58px;
  font:500 13px var(--mono);color:#6b7280;text-align:center}
.ops-empty b{color:#9aa3af}
/* keep page content clear of the fixed dock */
.wrap{padding-bottom:104px}
.fineprint{margin-bottom:8px}

/* queue cards */
.fc-card{background:#111318;border:1px solid #22262e;border-radius:9px;padding:11px 12px;
  display:flex;flex-direction:column;gap:7px;animation:fcIn .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes fcIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fc-card.pending.v-true{border-left:3px solid var(--up)}
.fc-card.pending.v-false{border-left:3px solid var(--down)}
.fc-card.pending.v-warn{border-left:3px solid #f5a623}
.fc-card.pending.v-gray{border-left:3px solid #6b7280}
.fc-card.aired{opacity:.62}.fc-card.skipped,.fc-card.held{opacity:.5}
.fc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fc-badge{font:800 10px var(--disp);letter-spacing:.05em;border-radius:4px;padding:3px 7px;white-space:nowrap}
.fc-badge.v-true{color:#06c986;background:rgba(0,224,138,.14)}
.fc-badge.v-false{color:#ff6472;background:rgba(255,77,94,.14)}
.fc-badge.v-warn{color:#f5a623;background:rgba(245,166,35,.14)}
.fc-badge.v-gray{color:#9aa3af;background:rgba(120,130,145,.16)}
.fc-conf{font:700 11px var(--mono);color:#8b93a0}
.fc-claim{font:700 13.5px/1.32 var(--disp);color:#eef1f4}
.fc-correction{font:500 12.5px/1.4 var(--disp);color:#b7bec8}
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:1px}
.fc-src{font:600 11px var(--mono);color:#7f95c9;text-decoration:none;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
a.fc-src:hover{color:#9db4ee;text-decoration:underline}
.fc-acts{display:flex;gap:6px}
.fc-acts button{font:800 11px var(--disp);letter-spacing:.03em;border:none;border-radius:6px;
  padding:6px 12px;cursor:pointer;transition:.13s}
.fc-air{color:#04150e;background:var(--fn)}.fc-air:hover{background:#26f0aa}
.fc-hold{color:#d7c48a;background:#2a2410;border:1px solid #4a3d15}.fc-hold:hover{background:#352d13}
.fc-skip{color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a}.fc-skip:hover{background:#232833}
.fc-state-tag{font:800 10px var(--mono);letter-spacing:.06em;color:#8b93a0}
.fc-card.aired .fc-state-tag{color:var(--up)}
.fc-checking{display:flex;align-items:center;gap:8px;font:600 12px var(--mono);color:#9aa3af}
.fc-checking.err{color:#ff6472}
.fc-retry{font:700 11px var(--mono);color:var(--fn);background:none;border:1px solid #22303a;
  border-radius:5px;padding:3px 8px;cursor:pointer;margin-left:4px}
.fc-spin{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid #2a2f3a;border-top-color:var(--fn);
  animation:fcSpin .7s linear infinite}
@keyframes fcSpin{to{transform:rotate(360deg)}}

/* correction composer (P3-C) — aired cards can air an append-only on-record correction */
.fc-correct{font:700 10px var(--mono);color:#6fa8e8;background:none;border:1px solid #24364d;
  border-radius:5px;padding:3px 8px;cursor:pointer;transition:.13s}
.fc-correct:hover{color:#9cc6f5;background:#16202e;border-color:#33507a}
.fc-corrected-tag{font:800 10px var(--mono);letter-spacing:.05em;color:#6fa8e8;
  background:rgba(63,127,214,.13);border-radius:4px;padding:3px 7px;white-space:nowrap}
.fc-card.aired:has(.fc-compose){opacity:1}   /* composing: full contrast while the operator types */
.fc-compose{display:flex;flex-direction:column;gap:6px;margin-top:3px;padding:9px 10px;
  background:rgba(47,127,214,.07);border:1px solid #24364d;border-left:3px solid #3f7fd6;border-radius:7px}
.fc-cc-orig{font:500 11px/1.45 var(--mono);color:#8b93a0}
.fc-cc-orig .fc-badge{font-size:9px;padding:2px 5px;margin:0 2px}
.fc-compose input{font:600 12px var(--disp);color:#eef1f4;background:#0d1015;border:1px solid #2a2f3a;
  border-radius:6px;padding:7px 9px;outline:none;width:100%}
.fc-compose input:focus{border-color:#3f7fd6}
.fc-compose input::placeholder{color:#5d6570;font-weight:500}
.fc-cc-acts{display:flex;gap:6px;align-items:center}
.fc-cc-acts button{font:800 11px var(--disp);letter-spacing:.03em;border:none;border-radius:6px;
  padding:6px 12px;cursor:pointer;transition:.13s}
.fc-cc-air{color:#eaf2fc;background:#3f7fd6}.fc-cc-air:hover{background:#5b95e2}
.fc-cc-cancel{color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a}.fc-cc-cancel:hover{background:#232833}

/* live-signal strip (bottom of player) — proves the transcription is real */
.sig-strip{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:linear-gradient(0deg,rgba(6,7,10,.92),rgba(6,7,10,0));
  opacity:0;transition:opacity .4s ease}
.player.live .sig-strip{opacity:1}
.ss-meter{display:flex;align-items:flex-end;gap:2px;height:20px;width:52px;flex:none}
.ss-meter i{flex:1;background:linear-gradient(180deg,var(--fn),#0a7a53);border-radius:1px;height:8%;transition:height .08s linear}
.ss-mid{flex:1;min-width:0}
.ss-transcript{font:600 13px/1.3 var(--disp);color:#eef1f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 6px rgba(0,0,0,.9)}
.ss-transcript .dim{color:#8a8f98;font-weight:500}
.ss-transcript mark{background:rgba(0,214,143,.22);color:#8bf3cd;border-radius:3px;padding:0 3px}
.ss-topic{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.ss-eng{font:700 8px var(--mono);letter-spacing:.06em;color:var(--fn)}
.ss-lock{font:900 14px var(--disp);letter-spacing:-.01em;color:#fff;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-lock.none{color:#8a8f98;font-size:12px;font-weight:700}

/* under-player streamer meta */
.meta{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;background:var(--s-bg);border-bottom:1px solid var(--s-border)}
.meta-av{width:52px;height:52px;border-radius:50%;flex:none;background:var(--s-accent);
  box-shadow:0 0 0 2px var(--s-accent),0 0 0 4px var(--s-bg)}
.meta-info{flex:1;min-width:0}
.meta-name{font:800 19px var(--disp);color:var(--s-text);display:flex;align-items:center;gap:7px}
.meta-name .verif{font-size:12px;color:var(--s-accent)}
.meta-title{font:600 15px var(--ui);color:var(--s-text);margin:3px 0 7px}
.meta-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meta-cat{font:700 13px var(--ui);color:var(--s-accent);text-decoration:none}
.tag-row{display:flex;gap:6px}
.tag-row span{font:600 11px var(--ui);color:var(--s-dim);background:var(--s-hover);border-radius:20px;padding:3px 9px}
.meta-actions{display:flex;gap:9px;align-items:center;flex:none}
.btn-follow{font:800 13px var(--ui);color:var(--s-accent-ink);background:var(--s-accent);border:none;
  border-radius:8px;padding:9px 15px;cursor:pointer;display:flex;align-items:center;gap:6px}
.btn-gift{font:800 13px var(--ui);color:var(--s-text);background:var(--s-hover);border:1px solid var(--s-border);
  border-radius:8px;padding:9px 15px;cursor:pointer}
.btn-sub{font:800 13px var(--ui);color:var(--s-subink);background:var(--s-subbg);border:1px solid var(--s-suborder);
  border-radius:8px;padding:9px 15px;cursor:pointer}

/* YouTube watch-page meta (title on top → channel row → description) */
.yt-title{font:700 18px var(--ui);color:#0f0f0f;line-height:1.3;margin-bottom:12px}
.yt-row{display:flex;align-items:center;gap:12px}
.yt-channel{margin-right:6px}
.yt-name{font:700 15px var(--ui);color:#0f0f0f}
.yt-subs{font:400 12px var(--ui);color:#606060}
.yt-actions{margin-left:auto;display:flex;gap:8px}
.yt-pill{background:#f2f2f2;border-radius:18px;padding:8px 13px;font:600 14px var(--ui);color:#0f0f0f;white-space:nowrap;
  display:inline-flex;align-items:center;gap:7px}
.yt-pill .mi{width:22px;height:22px;flex:none}
.yt-div{width:1px;height:20px;background:rgba(0,0,0,.18);margin:0 2px}
.yt-like .ytl-n{font-weight:600}
/* real YouTube topbar icons (dark, crisp) */
.skin-youtube .tb-right .ic{color:#0f0f0f;width:auto;height:auto}
.skin-youtube .tb-right .ic .mi,.skin-youtube .yt-burger .mi{width:24px;height:24px}
.pill.yt-create .mi{width:22px;height:22px;margin-left:-2px}
.yt-desc{background:#f2f2f2;border-radius:12px;padding:12px 14px;margin-top:12px;font:500 13px var(--ui);color:#0f0f0f}
.yt-desc b{font-weight:700}

/* right chat */
.chat{background:var(--s-chat);border-left:1px solid var(--s-border);display:flex;flex-direction:column;min-height:0}
.chat-head{font:800 12px var(--ui);letter-spacing:.04em;color:var(--s-text);text-transform:uppercase;
  padding:13px 14px;border-bottom:1px solid var(--s-border);text-align:center}
.chat-body{flex:1;overflow:hidden;padding:8px 12px;display:flex;flex-direction:column;justify-content:flex-end;gap:3px}
.cmsg{font:400 13px/1.4 var(--ui);color:var(--s-text);word-wrap:break-word;padding:2px 0;
  animation:cmsgIn .25s ease both}
@keyframes cmsgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.cmsg .cu{font-weight:700;cursor:pointer}
.cmsg .cu::after{content:":";color:var(--s-dim);font-weight:400}
.cmsg.hot{background:var(--s-hot);border-radius:6px;padding:4px 7px;margin:1px -4px}
.cmsg .emote{display:inline-block;font-weight:700;color:var(--s-accent)}
.cmsg.superchat{background:linear-gradient(90deg,#1565c0,#1976d2);color:#fff;border-radius:7px;padding:7px 9px;margin:3px 0}
.cmsg.superchat .cu{color:#fff}.cmsg.superchat .cu::after{content:" · $" attr(data-amt);color:rgba(255,255,255,.85)}
.chat-input{padding:10px 12px;border-top:1px solid var(--s-border);display:flex;gap:8px;align-items:center}
.chat-input input{flex:1;background:var(--s-search);border:1px solid var(--s-border);border-radius:7px;
  color:var(--s-text);font:500 13px var(--ui);padding:9px 11px}
.chat-input input::placeholder{color:var(--s-dim)}
.chat-send{font:800 12px var(--ui);color:var(--s-accent-ink);background:var(--s-accent);border:none;
  border-radius:7px;padding:9px 13px;cursor:pointer}

/* platform logos (in topbar) */
.lg-twitch{display:flex;align-items:center;gap:6px}
.tw-mark{display:block}
.tw-word{font:800 20px var(--disp);color:#fff;letter-spacing:-.02em}
.lg-kick{font:900 22px var(--disp);letter-spacing:-.02em;color:#53fc18}
.lg-kick sup{font-size:9px;font-weight:700;vertical-align:top;margin-left:1px}
.lg-yt{display:flex;align-items:center;gap:5px}
.yt-mark{width:29px;height:20px;display:block}
.yt-word{font:700 19px "Roboto",var(--disp);color:#0f0f0f;letter-spacing:-.055em}

.fineprint{font:500 10.5px/1.5 var(--mono);color:#7a828f;margin-top:12px;padding:0 4px}

/* ============ SKIN: TWITCH ============ */
.skin-twitch{
  --s-bg:#0e0e10;--s-text:#efeff1;--s-dim:#adadb8;--s-border:#2a2a2d;--s-topbar:#18181b;
  --s-side:#1f1f23;--s-chat:#18181b;--s-search:#0e0e10;--s-hover:#26262c;--s-hot:#302344;
  --s-accent:#9147ff;--s-accent-ink:#fff;
  --s-subbg:#3a3a3d;--s-subink:#efeff1;--s-suborder:#3a3a3d;
}
.skin-twitch .btn-follow{background:rgba(145,71,255,.16);color:#c9a9ff}   /* purple-tint Follow */
.skin-twitch .btn-sub{background:#9147ff;color:#fff;border-color:#9147ff} /* solid purple Subscribe */

/* ============ SKIN: KICK ============ */
.skin-kick{
  --s-bg:#0c0c0e;--s-text:#ffffff;--s-dim:#7c7c85;--s-border:#1c1c22;--s-topbar:#0c0c0e;
  --s-side:#101014;--s-chat:#0f0f13;--s-search:#161620;--s-hover:#1a1a20;--s-hot:#173a12;
  --s-accent:#53fc18;--s-accent-ink:#0a0f06;
  --s-subbg:#1a1a20;--s-subink:#fff;--s-suborder:#2a2a32;
}
.skin-kick .verif{color:var(--s-accent)}

/* ============ SKIN: YOUTUBE (light) ============ */
.skin-youtube{
  --s-bg:#ffffff;--s-text:#0f0f0f;--s-dim:#606060;--s-border:#e5e5e5;--s-topbar:#ffffff;
  --s-side:#ffffff;--s-chat:#ffffff;--s-search:#f8f8f8;--s-hover:#f2f2f2;--s-hot:#f2f2f2;
  --s-accent:#ff0000;--s-accent-ink:#fff;
  --s-subbg:#0f0f0f;--s-subink:#fff;--s-suborder:#0f0f0f;
}
.skin-youtube{border-color:#d9d9d9}
.skin-youtube .sidenav{display:none}                              /* watch page: guide collapsed */
.skin-youtube .layout{grid-template-columns:1fr 384px}
.skin-youtube .meta{flex-direction:column;align-items:stretch}    /* title on top, then channel row */
.skin-youtube .btn-follow{background:#0f0f0f;color:#fff;border-radius:20px;padding:9px 16px}  /* black Subscribe */
.skin-youtube .tb-search{border-radius:20px 0 0 20px;border-right:none}
.skin-youtube .tb-searchbtn{display:flex;border-radius:0 20px 20px 0}
.skin-youtube .tb-mic{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:50%;background:var(--s-hover);color:var(--s-text);cursor:pointer;flex:none}
.skin-youtube .chat-input input{border-radius:20px}
.skin-youtube .p-live{background:#ff0000}
.skin-youtube .chat-send{background:#f2f2f2;color:#0f0f0f}
/* YouTube live chat: per-message avatar, no colon, left-aligned "Top chat" header */
.skin-youtube .chat-head{text-align:left}
.skin-youtube .cmsg{display:flex;align-items:flex-start;gap:9px}
.cmsg-av{width:24px;height:24px;border-radius:50%;flex:none;margin-top:1px}
.cmsg-txt{flex:1;min-width:0}
.skin-youtube .cu{font-weight:500;margin-right:4px}
.skin-youtube .cu::after{content:""}
/* VICE News channel avatar — bigger white VICE logo, black & white, ALL skins */
.meta-av.fn-av{background:#04150e;display:flex;align-items:center;justify-content:center}
.meta-av.fn-av::after{content:"Fb9";font:800 20px Georgia,serif;color:var(--fn)}
/* YouTube verified badge (gray circle-check) */
.yt-verif{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#606060;color:#fff;font-size:9px;line-height:1;margin-left:6px;vertical-align:middle;flex:none}
.yt-name{display:flex;align-items:center}

/* Player control bar (scrubber + controls) — YouTube + Kick */
.yt-controls{display:none;position:absolute;left:0;right:0;bottom:0;z-index:8;
  padding:0 12px 7px;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,0))}
.skin-youtube .player.live .yt-controls,.skin-kick .player.live .yt-controls{display:block}
.skin-kick .sig-strip{bottom:34px}          /* lift transcript above the control bar */
.skin-kick .player-badges{display:none}     /* Kick shows the watch count in the meta, not on the video */

/* Kick meta: channel row + About/Followers bar (faithful to real Kick) */
.skin-kick .meta{flex-direction:column;align-items:stretch;gap:0}
.kick-top{display:flex;align-items:flex-start;gap:14px}
.kick-watch{display:flex;align-items:center;gap:6px;font:700 13px var(--ui);color:var(--s-text);margin-left:8px;white-space:nowrap}
.kick-watch .kw-eye{font-size:13px;opacity:.85}
.kick-about{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:13px;border-top:1px solid var(--s-border);
  font:700 13px var(--ui);color:var(--s-text)}
.kick-about .kick-fol{color:var(--s-dim);font-weight:600}
.kick-about .kick-socials{color:var(--s-dim);font-weight:500;font-size:12px;margin-left:auto}
.ytc-bar{position:relative;height:3px;background:rgba(255,255,255,.32);margin-bottom:7px}
.ytc-bar>i{position:absolute;inset:0;background:#f00}                       /* live edge = full red */
.ytc-scrub{position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:#f00}
.ytc-row{display:flex;align-items:center;justify-content:space-between;height:24px}
.ytc-left,.ytc-right{display:flex;align-items:center;gap:17px}
.ytc-ic{color:#fff;font-size:15px;opacity:.96;line-height:1}
.ytc-play{font-size:12px;letter-spacing:-1px}
.ytc-live{display:flex;align-items:center;gap:5px;color:#fff;font:700 13px "Roboto",var(--disp)}
.ytc-dot{width:9px;height:9px;border-radius:50%;background:#f00}
.skin-youtube .player-badges{display:none}   /* YT badges LIVE in the control bar, not top-left */
.skin-youtube .sig-strip{bottom:34px}         /* lift transcript above the control bar */

/* ============ SKIN: CLEAN FEED (program output — video + on-screen graphics only) ============ */
.skin-clean{--s-bg:#000;border:none;border-radius:0;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.skin-clean .topbar,.skin-clean .sidenav,.skin-clean .chat,.skin-clean .meta{display:none}
.skin-clean .layout{grid-template-columns:1fr;min-height:0}
.skin-clean .main{background:#000}
/* full-width 16:9 would run the lower-third under the operator dock — cap the height and
   center the frame so the on-air graphic always clears the dock */
.skin-clean .player{aspect-ratio:16/9;height:min(60vh,540px);width:auto;max-width:100%;margin:0 auto}

/* ============ CONTROL VIEW (/control) — OBS producer console ============
   Same pipeline + operator dock as the demo, but the fake platform chrome is stripped so it
   reads as a control surface. The player stays as a self-monitor (webcam + live transcript).
   The on-air lower-third still previews here; in OBS the real graphic is the /overlay source. */
.view-control .topbar,.view-control .sidenav,.view-control .chat,.view-control .meta,
.view-control .player-badges,.view-control .yt-controls,.view-control .net-bug{display:none!important}
.view-control .layout{grid-template-columns:1fr}
.view-control .site{max-width:1100px;margin:0 auto}
.view-control .ctrl-brand .cb-sub::after{content:" · control";color:var(--fn)}
/* the copyable OBS Browser Source URL banner (control view only) */
.obs-bar{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:#0d0f14;border:1px solid #22303a;
  border-radius:10px;padding:9px 13px;margin-bottom:12px}
.obs-bar .obs-label{font:800 11px var(--disp);letter-spacing:.06em;color:var(--fn);white-space:nowrap;display:flex;align-items:center;gap:4px}
.obs-bar .obs-sup{font:800 9px Georgia,serif;vertical-align:super}
.obs-bar .obs-url{flex:1;min-width:220px;background:#0c0e13;border:1px solid #22262e;border-radius:7px;
  color:#eef1f4;font:600 12px var(--mono);padding:8px 11px;outline:none}
.obs-bar .obs-copy{font:800 12px var(--disp);color:#04150e;background:var(--fn);border:none;border-radius:7px;
  padding:8px 14px;cursor:pointer;white-space:nowrap}
.obs-bar .obs-copy:hover{background:#26f0aa}
.obs-bar .obs-scene{font:700 12px var(--disp);color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.obs-bar .obs-scene:hover{background:#232833;color:#fff}
.obs-bar .obs-call{font:700 12px var(--disp);color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.obs-bar .obs-call:hover{background:#232833;color:#fff}
.obs-bar .obs-call.on{color:#04150e;background:var(--fn);border-color:var(--fn)}
.obs-bar .obs-call:disabled{opacity:.4;cursor:default}
.obs-bar .obs-mute{font:700 12px var(--disp);color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.obs-bar .obs-mute:hover{background:#232833;color:#fff}
.obs-bar .obs-mute.muted{color:#fff;background:#b3212f;border-color:#d33143;animation:mutePulse 1.2s ease-in-out infinite}
@keyframes mutePulse{50%{opacity:.7}}
.obs-bar .obs-audio{display:flex;align-items:center;gap:7px;font:700 12px var(--disp);color:#9aa3af;white-space:nowrap}
.obs-bar .obs-audio select{max-width:190px;font:600 12px var(--disp);color:#f4f6f8;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:7px 10px;cursor:pointer}
.obs-bar .obs-hint{font:500 11px var(--mono);color:#7a828f;white-space:nowrap}
/* BYOK room keys (D10): collapsible pane under the obs bar; keys never re-displayed */
.obs-bar .obs-keys-toggle{font:700 12px var(--disp);color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.obs-bar .obs-keys-toggle:hover{background:#232833;color:#fff}
.obs-bar .obs-byok{font:800 11px var(--disp);letter-spacing:.04em;color:#06c986;background:rgba(0,224,138,.12);
  border-radius:6px;padding:5px 9px;white-space:nowrap}
.obs-keys{display:flex;align-items:center;gap:9px;flex-wrap:wrap;background:#0d0f14;border:1px solid #22303a;
  border-radius:10px;padding:9px 13px;margin-bottom:12px}
.obs-keys .rk-note{flex-basis:100%;font:500 11px var(--mono);color:#7a828f}
.obs-keys input{flex:1;min-width:200px;background:#0c0e13;border:1px solid #22262e;border-radius:7px;
  color:#eef1f4;font:600 12px var(--mono);padding:8px 11px;outline:none}
.obs-keys .rk-save{font:800 12px var(--disp);color:#04150e;background:var(--fn);border:none;border-radius:7px;
  padding:8px 14px;cursor:pointer;white-space:nowrap}
.obs-keys .rk-save:hover{background:#26f0aa}
.obs-keys .rk-clear{font:700 12px var(--disp);color:#c9d1dc;background:#1a1e26;border:1px solid #2a2f3a;
  border-radius:7px;padding:8px 12px;cursor:pointer;white-space:nowrap}
.obs-keys .rk-clear:hover{background:#232833;color:#fff}
.obs-keys .rk-status{font:600 11px var(--mono);color:#9aa3af;white-space:nowrap}
/* P3-J: OPERATOR row — the second-phone /op capability URL (solo street mode). Reuses the
   obs-bar element styles; the tinted border marks it as the sensitive (write-key) row. */
.obs-bar.op-row{border-color:#1e3a2e;margin-top:-4px}
.obs-bar.op-row .obs-url{color:#bfeeda}
/* manual-only reason tag on queue cards (harm class / polarity conflict) */
.fc-manual{font:800 9px var(--mono);letter-spacing:.05em;color:#f5a623;background:rgba(245,166,35,.12);
  border:1px solid rgba(245,166,35,.35);border-radius:4px;padding:2px 6px;white-space:nowrap}

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