:root{--r:12px;--f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-num:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;--f-disp:"Archivo",system-ui,sans-serif;--stretch:100%;
--bg:#131417;--panel:#1c1e22;--panel2:#23262b;--line:#2c2f35;--fg:#eceae4;--muted:#a3a39c;--accent:#f2a93b;--on-accent:#131417;--ok:#4cc38a;--warn:#f2a93b;--alert:#ff5a4e;--info:#6cb6ff;
--on-info:#06213b;--on-warn:#2b1d00;--on-alert:#fff;--stage:#0c0d0f;--t-ok:#eceae4;--flash:#fff;--overlay:rgba(12,13,15,.94);color-scheme:dark}
@font-face{font-family:"Archivo";src:url(/static/f-archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/f-plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(/static/f-plexmono-600.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/static/f-grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/static/f-spacemono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url(/static/f-spacemono-700.woff2) format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Doto";src:url(/static/f-doto.woff2) format("woff2");font-weight:100 900;font-display:swap}
/* Tema gelap: Konsol (default, di atas) & Signal. Tema terang: Mono & Kertas. */
:root[data-theme=signal]{--f-ui:"Space Mono",ui-monospace,monospace;--f-num:"Space Mono",ui-monospace,monospace;--stretch:72%;
--bg:#000;--panel:#0e0e0e;--panel2:#171717;--line:#2a2a2a;--fg:#fff;--muted:#a0a0a0;--accent:#ff5a1f;--on-accent:#0a0a0a;--ok:#7be0a6;--warn:#ffb020;--alert:#ff3b30;--info:#5aa9ff;
--on-info:#03162b;--on-warn:#241600;--on-alert:#fff;--stage:#000;--t-ok:#fff;--flash:#ff5a1f;--overlay:rgba(0,0,0,.94);--r:20px}
:root[data-theme=mono]{--f-ui:"Space Grotesk",system-ui,sans-serif;--f-num:"Space Grotesk",system-ui,sans-serif;--f-disp:"Space Grotesk",system-ui,sans-serif;
--bg:#e4e4e1;--panel:#efefec;--panel2:#f7f7f5;--line:#d2d2ce;--fg:#0e0e0e;--muted:#5f5f5a;--accent:#0e0e0e;--on-accent:#f5f5f2;--ok:#1f7a4a;--warn:#c2410c;--alert:#c8102e;--info:#1d4ed8;
--on-info:#fff;--on-warn:#fff;--on-alert:#fff;--stage:#efefec;--t-ok:#0e0e0e;--flash:#0e0e0e;--overlay:rgba(228,228,225,.95);--r:18px;color-scheme:light}
:root[data-theme=kertas]{--f-ui:"Space Grotesk",system-ui,sans-serif;--f-num:"Space Mono",ui-monospace,monospace;--stretch:72%;
--bg:#f3efe8;--panel:#fff;--panel2:#faf7f2;--line:#e2dcd2;--fg:#1a1714;--muted:#6a635a;--accent:#ff5a1f;--on-accent:#1a1714;--ok:#1f7a4a;--warn:#c2410c;--alert:#c8102e;--info:#1d4ed8;
--on-info:#fff;--on-warn:#fff;--on-alert:#fff;--stage:#fff;--t-ok:#1a1714;--flash:#ff5a1f;--overlay:rgba(243,239,232,.95);--r:18px;color-scheme:light}
:root[data-digits=dot]{--f-num:"Doto",ui-monospace,monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-ui)}
[hidden]{display:none!important}
h1{font-size:30px;margin:.2em 0;letter-spacing:-.02em}
h2{font-size:12px;margin:0 0 10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a{color:var(--fg);text-decoration-color:var(--accent);text-underline-offset:3px}
.muted{color:var(--muted);font-size:13px}
.err{color:var(--alert);min-height:1.4em;margin:.5em 0 0}
.wrap{max-width:1200px;margin:0 auto;padding:16px}
.narrow{max-width:640px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
label{display:block;font-size:13px;color:var(--muted);margin:10px 0 4px}
label.chk{display:flex;gap:8px;align-items:center;color:var(--fg)}
input,select{width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit}
input[type=checkbox]{width:auto}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.sm{padding:5px 9px;font-size:13px}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.danger{color:var(--alert)}
.btn.on{background:var(--alert);border-color:var(--alert);color:var(--on-alert)}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.row>*{flex:1}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.list li:first-child{border-top:0}
.list .grow{flex:1}
.link{padding:8px 0;border-top:1px solid var(--line)}
.link:first-child{border-top:0}
.link-h{display:flex;flex-direction:column;margin-bottom:4px}
.link-r{display:flex;gap:6px}
.link-r input{font-size:12px;min-width:0}

/* ===== timer (satu komponen untuk layar penuh, preview, mini) ===== */
.timer{container-type:size;position:relative;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-items:center;width:100%;height:100%;background:var(--stage);color:var(--fg);overflow:hidden;padding:3cqh 3cqw;text-align:center}
.t-top{display:flex;flex-direction:column;gap:.3em;max-width:90%}
.t-title{font-family:var(--f-disp);font-stretch:var(--stretch);font-size:min(7cqw,11cqh);font-weight:700;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-speaker{font-size:min(4cqw,6cqh);color:var(--muted)}
.t-time{font-size:min(26cqw,48cqh);font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;line-height:1;letter-spacing:-.03em;color:var(--t-ok);white-space:nowrap}
.timer[data-phase=warn] .t-time{color:var(--warn)}
.timer[data-phase=alert] .t-time{color:var(--alert)}
.timer[data-phase=over] .t-time{color:var(--alert)}
.timer[data-phase=over][data-status=running] .t-time{animation:blink 1s steps(2,end) infinite}
.timer[data-status=paused] .t-time,.timer[data-status=idle] .t-time{opacity:.6}
.t-bar{width:86%;height:2.2cqh;background:var(--line);border-radius:99px;overflow:hidden}
.t-bar i{display:block;height:100%;width:100%;background:var(--accent)}
.timer[data-phase=warn] .t-bar i{background:var(--warn)}
.timer[data-phase=alert] .t-bar i,.timer[data-phase=over] .t-bar i{background:var(--alert)}
.t-next{font-size:min(3.2cqw,5cqh);color:var(--muted);padding-top:2cqh;min-height:1.4em}
.t-clock{position:absolute;top:2cqh;right:2cqw;font-family:var(--f-num);font-size:min(3cqw,5cqh);color:var(--muted);font-variant-numeric:tabular-nums}
.t-msg{position:absolute;left:0;right:0;bottom:0;display:none;padding:2.5cqh 3cqw;font-size:min(7cqw,11cqh);font-weight:800;line-height:1.1;background:var(--info);color:var(--on-info)}
.t-msg.on{display:block}
.t-msg[data-tone=warn]{background:var(--warn);color:var(--on-warn)}
.t-msg[data-tone=alert]{background:var(--alert);color:var(--on-alert)}
.t-black{position:absolute;inset:0;background:#000;display:none}
.timer.blackout .t-black{display:block}
.timer.flash{animation:flash .5s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}
@keyframes flash{50%{background:var(--flash)}}
@media (prefers-reduced-motion:reduce){.timer.flash{animation:none;background:var(--flash)}.timer[data-phase=over][data-status=running] .t-time{animation:none}}

/* ===== layar speaker ===== */
.page-view{height:100%;overflow:hidden;cursor:default}
.page-view #timer{position:fixed;inset:0}
.page-view.idle{cursor:none}
.conn,.dot{width:10px;height:10px;border-radius:50%;background:var(--alert);display:inline-block}
.conn{position:fixed;left:10px;bottom:10px;opacity:.7}
.conn[data-s=up],.dot[data-s=up]{background:var(--ok)}
.page-view.idle .conn{opacity:0}
.overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:20px;z-index:10}

/* ===== controller ===== */
.bar{display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.brand{font-family:var(--f-disp);font-stretch:var(--stretch);font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.room{font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-r{display:flex;gap:10px;align-items:center}
.pill{font-family:var(--f-num);font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:2px 8px;color:var(--muted);font-variant-numeric:tabular-nums}
.ctl{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(320px,1.2fr) minmax(280px,1fr);gap:12px;padding:12px;align-items:start}
@media (max-width:1100px){.ctl{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.ctl{grid-template-columns:1fr}.bar{flex-wrap:wrap}}
.preview{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:12px}
.big .btn{padding:14px 10px;font-size:16px}
.ctl.locked .guard{opacity:.35;pointer-events:none}
.cues{list-style:none;margin:0 0 10px;padding:0}
.cue{display:grid;grid-template-columns:1fr 90px;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--panel2)}
.cue.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.cue .c-speaker{grid-column:1}
.cue .c-time{grid-column:2;text-align:center;font-variant-numeric:tabular-nums}
.cue .acts{grid-column:1/-1;display:flex;gap:6px}
.cue input{padding:6px 8px}
details>summary{cursor:pointer;list-style:none;margin-bottom:8px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸ ";color:var(--muted)}
details[open]>summary::before{content:"▾ "}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:13px;cursor:pointer;color:var(--fg)}
.set{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ===== kamera ===== */
.cams{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.cams[data-empty=true]::before{content:"Belum ada kamera terhubung";color:var(--muted);font-size:13px}
.tile{margin:0;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative}
.tile video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.tile.off video,.tile:not(.on) video{opacity:.25}
.tile figcaption{display:flex;gap:6px;align-items:center;padding:5px 8px;font-size:12px;background:var(--panel)}
.tile figcaption b{white-space:nowrap}
.tile .stat{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-mon .cams{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));padding:0 10px 10px}
.monbar{display:flex;gap:12px;align-items:center;padding:10px}
.monbar .timer{width:260px;height:146px;border-radius:12px;border:1px solid var(--line)}
.page-cam video{width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;object-fit:contain}

/* ===== green room ===== */
.banner{margin:0 10px 10px;padding:14px 16px;border-radius:12px;font-size:clamp(20px,4vw,40px);font-weight:800;line-height:1.15;background:var(--info);color:var(--on-info)}
.banner[data-tone=warn]{background:var(--warn);color:var(--on-warn)}
.banner[data-tone=alert]{background:var(--alert);color:var(--on-alert)}
.asks{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 10px 10px}
.asks .btn{padding:12px 16px}
textarea{width:100%;background:var(--panel2);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;resize:vertical}
textarea:focus{outline:2px solid var(--ok);outline-offset:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err.good{color:var(--ok)}
.inl{display:inline}
.qna-qr{display:block;width:200px;height:200px;image-rendering:pixelated;background:#fff;padding:8px;border-radius:8px;margin:8px 0}
.qna-qr[hidden]{display:none}
.qs li{align-items:flex-start;flex-wrap:wrap}
.qs .qtext{flex:1 1 100%;word-break:break-word}
.qs .qmeta{font-size:12px;color:var(--muted)}
.qs .sent{opacity:.55}
.qs .hid{opacity:.4}
.qs .acts{display:flex;gap:6px;flex-wrap:wrap}
.page-mon .qr{display:flex;gap:12px;align-items:center;padding:0 10px 10px}
.page-mon .qr img{width:140px;height:140px;background:#fff;padding:6px;border-radius:8px}

/* ===== link: nama perangkat + QR ===== */
.link-name{margin-top:6px;font-size:12px}
.link-qr{display:block;margin-top:8px;background:#fff;padding:6px;border-radius:8px;width:168px;height:168px;image-rendering:pixelated}
.link-qr[hidden]{display:none}

/* ===== logo ===== */
.logo{max-height:48px;max-width:180px;object-fit:contain}
.logo[hidden]{display:none}
.logo-view{position:fixed;top:2.5vh;left:2.5vw;max-height:8vh;max-width:22vw;z-index:2}
.logo-set{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.logo-set input[type=file]{flex:1;min-width:0}

/* ===== agenda ===== */
.page-ag,.page-mod{min-height:100vh}
.ag-bar{display:flex;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.ag-head{display:flex;flex-direction:column;flex:1;min-width:0}
.ag-head b{font-size:clamp(18px,2.4vw,28px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-timer{width:min(300px,40vw);height:min(130px,18vw);border-radius:12px;border:1px solid var(--line)}
.agenda{list-style:none;margin:0;padding:12px 18px;counter-reset:none}
.ag{display:grid;grid-template-columns:2.2em 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:10px;margin-bottom:6px;background:var(--panel);border:1px solid var(--line);font-size:clamp(16px,2vw,24px)}
.ag-n{color:var(--muted);font-variant-numeric:tabular-nums}
.ag-t{display:flex;flex-direction:column;min-width:0}
.ag-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-t .muted{font-size:.7em}
.ag-d{font-family:var(--f-num);font-variant-numeric:tabular-nums;color:var(--muted)}
.ag.now{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ag.now .ag-n,.ag.now .ag-d,.ag.now .muted{color:var(--on-accent);opacity:.85}
.ag.past{opacity:.45}
.page-ag .conn{opacity:.6}

/* ===== moderator ===== */
.mod{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:16px}
.mod-timer{aspect-ratio:16/9;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:14px}
.mod .agenda{padding:0}
.mod .ag{font-size:16px}
.mod-qs{list-style:none;margin:0 0 12px;padding:0}
.mod-qs li{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:10px}
.mod-qs .qtext{font-size:clamp(18px,2.2vw,26px);line-height:1.3;margin:0 0 8px;word-break:break-word}
.mod-qs .btn{margin-top:10px;width:100%}
.mod .asks{padding:0}
@media (max-width:800px){.mod{grid-template-columns:1fr}}

/* ===== operator ===== */
.op{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;padding:12px;align-items:start}
.op-main{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:10px;margin-bottom:10px}
.op-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px}
.op-k{min-height:64px;font-size:18px;border-radius:12px;touch-action:manipulation}
.op-big{font-size:24px;min-height:84px}
.op-msgs .op-k{font-size:15px;min-height:52px}
.op-agenda{padding:0;max-height:60vh;overflow:auto}
.op-agenda .ag{font-size:16px;cursor:pointer}
.op-locked{background:var(--alert);color:#fff;text-align:center;padding:10px;font-weight:700}
.is-locked .op-k,.is-locked .op-agenda{opacity:.35;pointer-events:none}
@media (max-width:900px){.op{grid-template-columns:1fr}}
.list li.link{display:block}
.mod-timer{aspect-ratio:auto;height:min(44vh,420px)}

/* kamera: kualitas tinggi + audio */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
#info{white-space:pre-line}
#hint:empty{display:none}
.tile .ab{flex:none}
.tile .ab.on{background:var(--ok,#1f9d55);color:#fff;border-color:transparent}
.tile .lvl{flex:none;width:44px;height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.tile .lvl i{display:block;height:100%;width:0;background:#1f9d55;transition:width .25s linear}
.tile .lvl.hot i{background:#e5484d}

/* ===== umum (komponen baru) ===== */
.grow{flex:1}
.mt{margin-top:16px}
.row.tight{margin-top:8px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sec-h h2{margin:0}
.row-btns{display:flex;gap:6px;flex-wrap:wrap}
.btn.sel,.btn[aria-checked=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.seg{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}
.fs{border:1px solid var(--line);border-radius:calc(var(--r) - 4px);padding:8px 12px 12px;margin:10px 0 0}
.fs legend{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.pill.warn{color:var(--on-warn);background:var(--warn);border-color:var(--warn)}
.chk input{width:20px;height:20px;accent-color:var(--accent)}
.av{width:32px;height:32px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.av.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.log{list-style:none;margin:0;padding:0;max-height:280px;overflow:auto;font-size:13px}
.log li{display:flex;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.log li:first-child{border-top:0}
.log time{font-family:var(--f-num);color:var(--muted);flex:none}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:600;z-index:20;max-width:90vw}
.perm-msg .full-only{display:none!important}
.perm-msg .guard:not(.msg-card){opacity:.35;pointer-events:none}

/* ===== tema picker ===== */
.themes{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:6px}
.th-grp{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.th{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.th.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.th-sw{width:18px;height:18px;border-radius:50%;border:5px solid;box-sizing:border-box;box-shadow:0 0 0 1px var(--muted)}

/* ===== controller: navigasi event ===== */
.crumb{display:flex;gap:8px;align-items:center;color:var(--muted);white-space:nowrap}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a[href]:hover{color:var(--fg)}
.room-jump{width:auto;max-width:200px;padding:6px 8px}
.scr-list li{flex-wrap:wrap}
.scr-ok{color:var(--ok)}
.scr-warn{color:var(--warn)}

/* ===== editor agenda + pustaka media ===== */
.ag-prev{aspect-ratio:16/9;border-radius:calc(var(--r) - 2px);overflow:hidden;border:1px solid var(--line);margin-bottom:6px;background:var(--stage)}
.seg3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (max-width:520px){.seg3{grid-template-columns:1fr}}
.opt{display:flex;flex-direction:column;gap:2px;text-align:left;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:inherit;cursor:pointer;min-height:56px}
.opt span{font-size:12px;color:var(--muted)}
.opt.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.opt.sel span{color:var(--fg)}
#ag-dim{padding:0;accent-color:var(--accent)}
.media-list li{align-items:flex-start}
.m-th{width:64px;height:40px;flex:none;border-radius:6px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted)}
.m-th img{width:100%;height:100%;object-fit:cover}
.m-name{display:block;word-break:break-all;font-size:13px}
.m-warn{font-size:12px;color:var(--alert);margin-top:2px}
.m-dots{display:flex;gap:4px;padding-top:6px}
.dl{display:inline-block;width:10px;height:10px;border-radius:50%;border:2px solid var(--fg);box-sizing:border-box;vertical-align:-1px;margin:0 3px 0 8px}
.m-dots .dl{margin:0}
.dl.on{background:var(--fg)}
.legend{font-size:12px;color:var(--muted)}
.m-add{margin-bottom:8px}

/* ===== layar agenda bertemplate (dipakai /a dan preview) ===== */
.page-ag{height:100vh;overflow:hidden;background:var(--stage)}
.ag-screen{position:fixed;inset:0}
.page-ag.idle{cursor:none}
.page-ag.testing .ags::after{content:"UJI COBA · belum diterbitkan";position:absolute;top:1cqw;left:50%;transform:translateX(-50%);background:var(--warn);color:var(--on-warn);font:700 1.2cqw var(--f-ui);padding:.4cqw 1cqw;border-radius:99px;z-index:3}
.ags{container-type:size;position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage);color:var(--fg);font-family:var(--f-ui)}
.ags-bg,.ags-dim{position:absolute;inset:0}
.ags-bgm{width:100%;height:100%;object-fit:cover;display:block}
.ags-dim{background:var(--stage)}
.ags-in{position:relative;z-index:1;height:100%;box-sizing:border-box;padding:4cqh 4.5cqw;display:flex;flex-direction:column;gap:2.4cqh}
.ags-top{display:flex;align-items:center;gap:2cqw;min-height:0}
.ags-logo{max-height:7cqh;max-width:22cqw;object-fit:contain}
.ags-room{flex:1;min-width:0;font-family:var(--f-disp);font-stretch:var(--stretch);font-weight:700;font-size:min(2.6cqw,5cqh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ags-clock{font-family:var(--f-num);font-weight:600;font-size:min(2.8cqw,5.4cqh);font-variant-numeric:tabular-nums}
.ags-k{font-family:"Space Mono",var(--f-num);font-size:min(1.4cqw,2.6cqh);letter-spacing:.14em;color:var(--muted)}
.ags-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9cqh;min-height:0;overflow:hidden}
.ags-list li{display:flex;align-items:center;gap:2.4cqw;padding:1.3cqh 1.6cqw;border-radius:1cqw;font-size:min(2.3cqw,4.4cqh);border-bottom:1px solid var(--line);min-width:0}
.ags-list li.past{opacity:.5}
.ags-list li.now{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:700}
.ags-list .n{font-family:var(--f-num);opacity:.7;flex:none}
.ags-list .t{flex:1;min-width:0;display:flex;flex-direction:column}
.ags-list .t b,.ags-list .t small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ags-list .t small{font-size:.65em;opacity:.75;font-weight:400}
.ags-list .d{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.ags-nowbox{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:2cqh;overflow:hidden}
.ags-now{font-family:var(--f-disp);font-stretch:var(--stretch);font-weight:800;font-size:min(5cqw,10cqh);line-height:1.05;overflow-wrap:anywhere}
.ags-now.sm{font-size:min(2.8cqw,5.4cqh)}
.ags-spk{font-size:min(2.4cqw,4.6cqh);color:var(--muted)}
.ags-big{font-family:var(--f-num);font-weight:600;font-size:min(10cqw,22cqh);line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--t-ok)}
.ags-big.sm{font-size:min(6cqw,12cqh)}
.ags-big[data-phase=warn]{color:var(--warn)}
.ags-big[data-phase=alert],.ags-big[data-phase=over]{color:var(--alert)}
.ags-next{align-self:flex-start;display:flex;flex-direction:column;gap:.6cqh;padding:1.6cqh 2cqw;border-radius:1.2cqw;background:var(--accent);color:var(--on-accent);font-size:min(2.2cqw,4.2cqh);max-width:100%}
.ags-next .ags-k{color:inherit;opacity:.75}
.ags-split{flex:1;min-height:0;display:flex;gap:3cqw}
.ags-media{flex:1.5 1 0;min-width:0;border-radius:1.4cqw;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--panel)}
.ags-mm{width:100%;height:100%;object-fit:cover;display:block}
.ags-ph{color:var(--muted);font-size:min(1.6cqw,3cqh);padding:2cqw;text-align:center}
.ags-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:1.4cqh;overflow:hidden}
.ags-qr{align-self:flex-end;display:flex;align-items:center;gap:1.2cqw;font-size:min(1.4cqw,2.6cqh);color:var(--muted)}
.ags-qr img{width:min(9cqw,16cqh);height:min(9cqw,16cqh);background:#fff;padding:.4cqw;border-radius:.8cqw;image-rendering:pixelated}
.ags.blackout::before{content:"";position:absolute;inset:0;background:#000;z-index:5}

/* ===== layar: fullscreen jarak jauh ===== */
.scr-ov{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--overlay)}
.scr-tap{font:700 clamp(20px,4vw,44px) var(--f-ui);padding:28px 40px;border-radius:999px;border:0;background:var(--accent);color:var(--on-accent);cursor:pointer;min-height:64px}
.scr-id{position:fixed;inset:auto 0 0 0;top:0;z-index:31;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);font:800 clamp(28px,7vw,120px)/1.1 var(--f-disp);text-align:center;padding:5vw}

/* ===== green room: komposisi timer/video ===== */
.page-mon{height:100vh;overflow:hidden;display:flex;flex-direction:column}
.mon-bar{display:flex;gap:12px;align-items:center;padding:8px 12px}
.mon-bar b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mon-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:0 12px 8px}
.mon-tools .seg{margin:0}
.mon-slide{display:flex;align-items:center;gap:8px;margin:0;color:var(--fg);font-size:13px;flex:1 1 260px;min-width:220px}
.mon-slide input{flex:1;padding:0;accent-color:var(--accent);height:28px}
.mon-slide output{font-family:var(--f-num);min-width:64px;text-align:right}
.mon-stage{--split:60;--pip:30;position:relative;flex:1;min-height:0;display:flex;gap:0;padding:0 12px}
.mon-stage[data-lay=stack]{flex-direction:column}
.mon-pane{min-width:0;min-height:0;display:flex;overflow:hidden;border-radius:var(--r);border:1px solid var(--line);background:var(--panel)}
.mon-tp{flex:0 0 calc(var(--split) * 1% - 7px)}
.mon-vp{flex:1 1 0;padding:8px}
.mon-timer{width:100%;height:100%}
.page-mon .mon-timer .t-msg{display:none!important}
.mon-div{flex:0 0 14px;cursor:col-resize;position:relative;touch-action:none}
.mon-div::before{content:"";position:absolute;inset:30% 5px;border-radius:3px;background:var(--line)}
.mon-div:hover::before,.mon-div:focus-visible::before{background:var(--accent)}
.mon-stage[data-lay=stack] .mon-div{cursor:row-resize}
.mon-stage[data-lay=stack] .mon-div::before{inset:5px 30%}
.mon-stage[data-swap="1"] .mon-tp{order:3}
.mon-stage[data-swap="1"] .mon-div{order:2}
.mon-stage[data-swap="1"] .mon-vp{order:1}
.mon-stage[data-lay=pip] .mon-div{display:none}
.mon-stage[data-lay=pip] .mon-tp,.mon-stage[data-lay=pip] .mon-vp{position:absolute;inset:0 12px}
.mon-stage[data-lay=pip] .mon-vp{inset:auto 24px 12px auto;width:calc(var(--pip) * 1%);height:calc(var(--pip) * 1%);z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mon-stage[data-lay=pip][data-swap="1"] .mon-vp{inset:0 12px;width:auto;height:auto;z-index:1}
.mon-stage[data-lay=pip][data-swap="1"] .mon-tp{inset:auto 24px 12px auto;width:calc(var(--pip) * 1%);height:calc(var(--pip) * 1%);z-index:2;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.mon-vp .cams{width:100%;height:100%;align-content:center;justify-content:center;padding:0}
.page-mon .mon-vp .cams[data-empty=true]{display:flex;align-items:center;justify-content:center}
.page-mon .tile video{max-height:none}
.mon-foot{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px}
.page-mon .banner{margin:0;font-size:clamp(20px,3vw,44px)}
.page-mon .asks{padding:0}
.page-mon .asks .btn{flex:1;min-height:52px;font-size:16px}
@media (max-width:700px){.page-mon{height:auto;overflow:auto}.mon-stage{min-height:70vh}}

/* ===== event hub ===== */
.hub-bar .brand{font-size:17px}
.ev-btn{display:flex;gap:8px;align-items:baseline;min-height:40px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:inherit;cursor:pointer;max-width:50vw;overflow:hidden}
.ev-btn b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub{display:flex;flex-wrap:wrap;gap:16px;padding:16px;align-items:flex-start}
.hub-nav{flex:1 1 220px;max-width:260px}
.hub-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:14px}
.hub-side{flex:1 1 300px;max-width:380px}
@media (max-width:900px){.hub-nav,.hub-side{max-width:none}}
.tree{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.tree li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px}
.tree a{color:var(--fg);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tree a:hover{text-decoration:underline}
.tr-ev{font-weight:700}
.tr-main{padding-left:22px!important;font-weight:600;background:var(--panel)}
.tr-bo{padding-left:40px!important}
.tr-dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--muted)}
.tr-dot.live{background:var(--alert)}.tr-dot.pause{background:var(--warn)}.tr-dot.idle{background:var(--ok)}
.tabs{display:inline-flex;align-self:flex-start;gap:2px;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.tab{min-height:40px;padding:0 18px;border-radius:999px;border:0;background:transparent;color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
.tab.sel{background:var(--accent);color:var(--on-accent)}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rcard.big{padding:22px 24px}
.rc-h{display:flex;align-items:center;gap:10px}
.rc-h input{width:20px;height:20px;flex:none;accent-color:var(--accent)}
.rc-name{margin:0;flex:1;min-width:0;color:var(--fg);font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-st{font:700 11px var(--f-num);letter-spacing:.08em;padding:4px 9px;border-radius:999px;background:var(--panel2);color:var(--muted);flex:none}
.chip-st.live{background:var(--alert);color:var(--on-alert)}
.chip-st.pause{background:var(--warn);color:var(--on-warn)}
.chip-st.idle{background:var(--panel2);color:var(--ok)}
.rc-time{font-family:var(--f-num);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(40px,5vw,56px);line-height:1;letter-spacing:-.03em;color:var(--t-ok);white-space:nowrap}
.rcard.big .rc-time{font-size:clamp(56px,9vw,120px)}
.rc-time[data-phase=warn]{color:var(--warn)}
.rc-time[data-phase=alert],.rc-time[data-phase=over]{color:var(--alert)}
.rc-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.rc-bar i{display:block;height:100%;background:var(--accent);width:0}
.rc-cue{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-meta{font-size:12px;color:var(--muted)}
.rc-acts{display:flex;gap:6px;flex-wrap:wrap}
.rc-acts .btn{text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.bo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.trig{border-style:dashed}
.trig input{min-width:0}
.trig .row>input{flex:3 1 220px}
.inv-out{margin-top:10px}
.chip-perm{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--panel2);color:var(--muted);flex:none}
.chip-perm.full{color:var(--ok)}
.tl{display:flex;flex-direction:column;gap:10px;overflow-x:auto}
.tl-row{display:flex;align-items:center;gap:12px;min-width:640px}
.tl-lab{flex:0 0 150px;display:flex;flex-direction:column;min-width:0}
.tl-lab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-track{flex:1;display:flex;gap:3px;height:52px;padding:6px;border-radius:10px;background:var(--panel2);min-width:0}
.tl-b{position:relative;flex-basis:0;min-width:6px;border-radius:7px;background:var(--line);font-size:12px;padding:6px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-b.past{opacity:.45}
.tl-b.now{background:var(--accent);color:var(--on-accent);font-weight:700}
.tl-b.now.live{background:var(--alert);color:var(--on-alert)}
.tl-now{position:absolute;top:0;bottom:0;width:3px;background:var(--fg);left:0}
.trig .row .btn{flex:1 1 92px;white-space:nowrap}
/* ===== /wscheck ===== */
.verdict{font:800 clamp(22px,4vw,30px)/1.2 var(--f-disp);padding:14px 16px;border-radius:calc(var(--r) - 4px);background:var(--panel2);margin-bottom:8px}
.verdict[data-s=ok]{background:var(--ok);color:#04170c}
.verdict[data-s=warn]{background:var(--warn);color:var(--on-warn)}
.verdict[data-s=bad]{background:var(--alert);color:var(--on-alert)}
.checks li{align-items:flex-start}
.ck{flex:none;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:700 13px var(--f-num);background:var(--panel2);color:var(--muted)}
.ck[data-s=ok]{background:var(--ok);color:#04170c}
.ck[data-s=warn]{background:var(--warn);color:var(--on-warn)}
.ck[data-s=bad]{background:var(--alert);color:var(--on-alert)}