/* =====================================================================
   AntzMix Studio – style.css
   DECLARATION AREA: every colour has one name here and is used by name below (and the few texts CSS shows).
   Change a colour here and every place that uses it follows.
   ===================================================================== */
:root{
  --mix-fader: 80px;                        /* rev52: height of a fader / meter in the Audio Mixer */
  --txt-master-off: ' OFF';                 /* text after "Master" when it is Off (translated by the app) */
  /* brand and main colours (named by their job) */
  --bg: #1b1d22;
  --panel: #24272e;
  --panel2: #2d313a;
  --line: #3a404c;
  --text: #e9ebef;
  --dim: #9aa1ad;
  --prev: #245cbf;
  --live: #cc3333;
  /* button heights – use these, never a new number (rev46hf01): small = overlay 1-4 + T-bar buttons, medium = Cut / Fade …, large = reserved */
  --btn-s: 26px;
  --btn-m: 36px;
  --btn-l: 44px;
  --prog: #1f8a3b;
  --tile: #1d3d6b;
  --accent: #245cbf;
  --brand: #245cbf;
  --brand2: #1a3a6e;
  --gold: #f2b51d;
  --gold2: #ffd35c;
  --navy: #11161f;
  --warn: #f5a524;
  --bad: #e5484d;
  /* palette: every other colour used in the app, named by colour family and lightness (%) – near-identical shades merged */
  --c-black: #000;
  --c-black-a27: #0004;
  --c-black-a40: #0006;
  --c-black-a53: #0008;
  --c-black-a67: #000a;
  --c-blue-15: #1d2230;
  --c-blue-16: #16233a;
  --c-blue-18: #1a2740;
  --c-blue-25: #23395f;
  --c-blue-25-2: #2a3a57;
  --c-blue-36: #0b5cad;
  --c-blue-38: #1d4fa6;
  --c-blue-75: #7db3ff;
  --c-blue-78: #8fb6ff;
  --c-blue-81: #9fc0ff;
  --c-gold-5: #1b1500;
  --c-gold-5-a33: #1b150055;
  --c-gold-15: #3a2f12;
  --c-gold-25: #6b5517;
  --c-gold-53-a20: #f2b51d33;
  --c-gold-53-a40: #f2b51d66;
  --c-gold-75: #f3d98a;
  --c-gold-75-2: #cfc8b0;
  --c-gold-79: #e9d9a8;
  --c-green-12: #15291d;
  --c-green-13: #12301f;
  --c-green-21: #1e4d2c;
  --c-green-25: #245c36;
  --c-green-47: #2fbf5a;
  --c-green-47-2: #2fbf71;
  --c-green-51: #3ec46d;
  --c-green-69: #7ee2a0;
  --c-green-73: #8fe3b0;
  --c-green-75: #9be3b0;
  --c-grey-5: #0b0c0e;
  --c-grey-8: #121418;
  --c-grey-9: #1b1a14;
  --c-grey-12: #262016;
  --c-grey-14: #1f2228;
  --c-grey-20: #333;
  --c-grey-20-a87: #333d;
  --c-grey-33: #555;
  --c-grey-40: #666;
  --c-grey-47: #6b7385;
  --c-grey-82: #c9cfda;
  --c-grey-94: #e8edf6;
  --c-orange-24: #6b4a10;
  --c-red-12: #2a1517;
  --c-red-16: #3a1a1c;
  --c-red-16-2: #3a1717;
  --c-red-31: #7a2226;
  --c-red-74: #ff7b7f;
  --c-red-77: #f19a9d;
  --c-red-80: #ff9a9a;
  --c-red-85: #ffb4b7;
  --c-white: #fff;
}
/* ====== Do not edit after this line unless it is really needed ====== */
#btnAdd{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--c-gold-5);border:1px solid var(--gold);font-weight:800;letter-spacing:.6px;display:inline-flex;align-items:center;padding:0}
#btnAdd .t{padding:5px 10px} #btnAdd .a{padding:5px 8px;border-left:1px solid var(--c-gold-5-a33)}
#btnAdd:hover{filter:brightness(1.06)}
.tile.starter .r button[data-a=quick]{text-transform:uppercase;letter-spacing:.4px}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:12.5px/1.3 system-ui,Segoe UI,Roboto,sans-serif;overflow:hidden}
button,select,input,textarea{font:inherit;color:var(--text)}
button{background:var(--panel2);border:1px solid var(--line);border-radius:3px;padding:4px 9px;cursor:pointer;white-space:nowrap}
button:hover:not(:disabled){border-color:var(--c-grey-47)}
button:disabled{opacity:.35;cursor:default}
button.on{background:var(--prog);border-color:var(--c-green-47)}
button.onb{background:var(--accent);border-color:var(--accent)}
#btnStream.live{background:var(--bad);border-color:var(--c-red-74);font-weight:700}
#btnStream.wait{background:var(--c-orange-24);border-color:var(--warn)}
#btnRec.live{background:var(--bad);border-color:var(--c-red-74);font-weight:700}
select,input[type=text],input[type=number],input[type=password],textarea{background:var(--c-grey-8);border:1px solid var(--line);border-radius:3px;padding:3px 6px}
.app{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;height:100%}
/* top bar */
.top{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--c-grey-8);border-bottom:1px solid var(--line)}
.top h1{font-size:14px;margin:0 10px 0 2px}
.top .sp{flex:1}
/* monitors */
.monrow{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);gap:6px;padding:6px 6px 0;flex:0 0 auto;align-items:start}
#monPrev{justify-self:end} #monProg{justify-self:start}
.mon{display:flex;flex-direction:column;min-height:0;background:var(--c-black);border:1px solid var(--line)}
.mon .hd{padding:3px 8px;font-weight:600;display:flex;gap:8px;align-items:center;min-height:22px}
.mon.preview .hd{background:var(--prev)} .mon.program .hd{background:var(--live)}
.mon .hd .tag{font-weight:800;letter-spacing:1px;font-size:12px;opacity:.95;white-space:nowrap}
body.notags .mon .hd .tag{display:none}
.mon .hd .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon .scr{display:block;background:var(--c-black)}
.mon .scr{position:relative;overflow:hidden}
.mon canvas{display:block;width:100%;height:100%}
.mon .tc{font:600 17px/1.2 ui-monospace,Consolas,monospace;text-align:center;padding:3px;background:var(--c-grey-5);letter-spacing:.5px}
.mon .tr{display:flex;gap:6px;align-items:center;padding:4px 6px;background:var(--panel)}
.mon .tr input[type=range]{flex:1;accent-color:var(--prev)}
.mon.program .tr input[type=range]{accent-color:var(--live)}
.mon .tr.off{visibility:hidden}
.mid{display:flex;flex-direction:column;gap:6px;justify-content:flex-start;padding-top:24px}
.mid button{padding:9px 4px;font-weight:600}
.mid .ov{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.mid .ov button{padding:6px 0}
.mid label{color:var(--dim);font-size:11px;display:flex;gap:4px;align-items:center;justify-content:center}
/* docks */
.lower{display:grid;grid-template-columns:minmax(0,1fr) 5px var(--dockW,33.333%);flex:1 1 0;min-height:200px;border-top:1px solid var(--line)}
.lower.nodock{grid-template-columns:minmax(0,1fr) 0 0}
.lower.nodock .vsplit,.lower.nodock .dockcol{display:none}
.vsplit{cursor:col-resize;background:var(--navy);border-left:1px solid var(--line)}
.vsplit:hover,.hsplit:hover{background:var(--accent)}
.hsplit{height:5px;cursor:row-resize;background:var(--navy);margin-top:6px}
.dockcol{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--panel)}
.dock{display:flex;flex-direction:column;flex:1 1 0;min-height:0;min-width:0}
.dock + .dock{border-top:2px solid var(--line)}
.dock.hidden{display:none}
.dock .dh{display:flex;gap:5px;align-items:center;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--panel2);flex-wrap:wrap}
.dock .dh b{margin-right:4px}
.dock .db{flex:1;overflow:auto;min-height:0}
.pll{list-style:none;margin:0;padding:0}
.pll{user-select:none;min-height:100%}
.pll li{display:flex;gap:7px;align-items:center;padding:3px 6px;cursor:pointer;white-space:nowrap;border-bottom:1px solid var(--panel2);border-top:2px solid transparent}
.pll li:nth-child(odd){background:var(--c-grey-14)}
.pll li .ck{width:14px;height:14px;border-radius:3px;border:2px solid var(--prog);flex:0 0 auto;display:grid;place-items:center;font-size:10px;line-height:1;color:var(--c-white)}
.pll li .ck.on{background:var(--prog)}
.pll li .ck.on::after{content:'✓'}
.pll li.off .n,.pll li.off .no{opacity:.45;text-decoration:line-through}
.pll li.sel{background:var(--c-blue-25) !important}
.pll li.cur{background:var(--c-green-21) !important;font-weight:600}
.pll li.cur.playing{background:var(--prog) !important}
.pll li.cur.sel{box-shadow:inset 0 0 0 2px var(--accent)}
.pll li .n{overflow:hidden;text-overflow:ellipsis;flex:1}
.pll li.dropB{border-top-color:var(--warn)}
.pll li.dropA{border-bottom:2px solid var(--warn)}
.pll.dropEnd{box-shadow:inset 0 -2px 0 var(--warn)}
.mix{display:flex;gap:8px;padding:6px;height:100%;min-height:110px;align-items:stretch;overflow-x:auto}
.ch{display:flex;flex-direction:column;align-items:center;gap:4px;width:74px;flex:0 0 auto;background:var(--c-grey-14);border:1px solid var(--line);padding:4px}
.ch .cn{font-size:11px;width:100%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch .fv{display:flex;gap:6px;flex:1;min-height:0;align-items:stretch}
.ch input[type=range]{writing-mode:vertical-lr;direction:rtl;width:18px;height:100%;margin:0}
.vm{width:8px;background:var(--c-grey-5);position:relative;overflow:hidden;border-radius:2px}
.vm i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--c-green-47-2) 0 70%,var(--warn) 70% 88%,var(--bad) 88%)}
.ch button{padding:1px 6px;font-size:11px;width:100%}
.ch.master{background:var(--c-grey-12)}
.ch.master.moff{background:var(--c-red-16);outline:1px solid var(--bad)}
.ch.master.moff .cn b::after{content:var(--txt-master-off);color:var(--c-red-77)}
/* inputs */
.inputs{padding:6px;overflow:auto;background:var(--bg);min-height:0}
.ythost{position:fixed;left:0;top:0;width:1280px;height:720px;z-index:-1;isolation:isolate;pointer-events:none;background:var(--c-black)}
.ythost iframe{width:100%;height:100%;border:0;display:block}
.grid{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.tile{width:214px;background:var(--panel);border:1px solid var(--line);flex:0 0 auto}
.tile .th{display:flex;gap:6px;align-items:center;background:var(--tile);padding:2px 6px;font-weight:600;height:22px}
.tile.isprev .th{background:var(--prev)} .tile.isprog .th{background:var(--live)}
.tile .th .no{min-width:14px}
.tile .th input{flex:1;min-width:0;background:transparent;border:0;padding:0;font-weight:600}
.tile .th .ovb{font-size:10px;background:var(--c-black-a67);padding:0 4px;border-radius:2px}
.tile .pic{aspect-ratio:var(--ar,16/9);background:var(--c-black);cursor:pointer;position:relative}
.tile .pic canvas{width:100%;height:100%;display:block;object-fit:contain}
.tile .pic .vmt{position:absolute;right:2px;top:2px;bottom:2px;width:5px;background:var(--c-black-a53)}
.tile .pic .vmt i{position:absolute;left:0;right:0;bottom:0;height:0;background:var(--c-green-47-2)}
.tile .r{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.tile .r button{border:0;border-radius:0;padding:3px 0;background:var(--panel2);font-size:11.5px}
.tile .r1{grid-template-columns:1fr 1.5fr 1fr 1fr 26px}
.tile .r2{grid-template-columns:repeat(4,20px) 46px 24px 1fr 24px}
.tile .r button svg{width:22px;height:14px;vertical-align:-3px;display:inline-block}
.tile .r button.on{background:var(--prog)}
.tile .r button.onb{background:var(--accent)}
/* footer */
footer{display:flex;gap:6px;align-items:center;padding:5px 8px;background:var(--c-grey-8);border-top:1px solid var(--line);flex-wrap:wrap}
footer .sp{flex:1}
.stat{color:var(--dim);font-variant-numeric:tabular-nums;font-size:12px}
.stat b{color:var(--text)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c-grey-33);display:inline-block}
.dot.ok{background:var(--c-green-47-2)} .dot.err{background:var(--bad)} .dot.wait{background:var(--warn)}
.menu{position:absolute;background:var(--panel);border:1px solid var(--line);display:none;flex-direction:column;z-index:20;min-width:190px;box-shadow:0 6px 24px var(--c-black-a53)}
.menu.open{display:flex}
.menu button{border:0;border-radius:0;text-align:left;padding:7px 12px;background:transparent}
.menu button:hover{background:var(--panel2)}
.menu.grp.open{display:grid;grid-template-columns:repeat(3,minmax(200px,1fr));gap:4px 6px;padding:8px;max-width:min(760px,96vw);max-height:80vh;overflow:auto}
.menu.grp .mcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.menu.grp .mg{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;background:var(--navy);padding:4px 0}
.menu.grp h5{margin:4px 12px 2px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold)}
.menu.grp .mg>small{margin:-2px 12px 4px;color:var(--dim);font-size:10.5px}
.menu.grp button{padding:6px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.menu.grp button small{color:var(--dim);font-size:10.5px}
.menu.grp button:disabled{opacity:.5;cursor:default;background:none}
.tile.starter .r button:not([data-a=close]):not([data-a=quick]),.tile.starter .th input{opacity:.35;pointer-events:none}
.tile.starter .r button[data-a=quick]{color:var(--gold2);font-weight:700}
.tile.starter .r button[data-a=cut]{display:none}
.tile.starter .r1{grid-template-columns:1fr 2.5fr 1fr 26px}                      /* room for "Add Input" on the starter tiles (Anton) */
.tile.starter .ovb{color:var(--gold2);font-weight:700;letter-spacing:.3px}
.tile.starter .pic{cursor:default}
.menu .soon{font-style:normal;font-size:9.5px;background:var(--c-grey-12);color:var(--c-gold-75);border:1px solid var(--c-gold-25);border-radius:3px;padding:0 4px;margin-left:6px}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;min-width:400px;max-width:580px}
dialog::backdrop{background:var(--c-black-a53)}
dialog h3{margin:0 0 10px}
dialog .f{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
dialog .f label{color:var(--dim);font-size:12px}
dialog textarea{min-height:110px;resize:vertical}
dialog .acts{display:flex;justify-content:flex-end;gap:8px}
#dlgPhone{max-width:none}
#dlgSettings{width:min(1160px,96vw);max-width:none;height:min(640px,94vh);max-height:94vh;padding:0}
#dlgSettings form{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;height:100%}
#dlgSettings h3{grid-column:1/3;margin:0;padding:11px 18px;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--brand) 0 35%,var(--gold) 65%,transparent) 1;display:flex;align-items:center;gap:10px}
#dlgSettings h3 small{font-weight:400;color:var(--dim);font-size:12px}
#dlgSettings .acts{grid-column:1/3;padding:10px 16px;border-top:1px solid var(--line)}
.stabs{display:flex;flex-direction:column;gap:2px;padding:10px 8px;background:var(--navy);border-right:1px solid var(--line);overflow:auto}
.stabs .grp{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin:12px 8px 3px;display:flex;align-items:center;gap:6px}
.stabs .grp::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--c-gold-53-a40),transparent)}
.stabs button{border:0;border-radius:4px;background:transparent;padding:7px 10px;font-weight:600;letter-spacing:.4px;font-size:11.5px;text-align:left}
.stabs button:hover{background:var(--panel2)}
.stabs button.cur{background:linear-gradient(90deg,var(--brand),var(--c-blue-38));color:var(--c-white);box-shadow:inset 3px 0 0 var(--gold)}
.stabs button .live{float:right;width:7px;height:7px;border-radius:50%;margin-top:4px;background:transparent}
.stabs button .live.on{background:var(--c-green-51)}.stabs button .live.red{background:var(--bad)}
.spanes{overflow:auto;padding:16px 22px}
.spane{display:none}.spane.cur{display:block}
.spane h4{margin:0 0 12px;font-size:14px;color:var(--c-grey-94)}
.spane h4 .hint{font-weight:400}
.cols{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:26px;align-items:start}
@media (max-width:1050px){.cols{grid-template-columns:minmax(0,1fr)}}
.rcard{background:linear-gradient(160deg,var(--c-blue-16),var(--navy) 60%);border:1px solid var(--c-blue-25-2);border-radius:8px;padding:14px 16px;font-size:12px;color:var(--dim)}
.rcard .rh{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--c-grey-94);font-size:13px}
.rcard .rd{width:9px;height:9px;border-radius:50%;background:var(--c-grey-40);flex:0 0 auto}
.rcard .rd.ok{background:var(--c-green-51);box-shadow:0 0 6px var(--c-green-51)}.rcard .rd.warn{background:var(--gold)}.rcard .rd.bad{background:var(--bad)}
.rcard .rs{margin-left:auto;font-size:11.5px;color:var(--dim);text-align:right}
.rcard p{margin:4px 0 10px;line-height:1.45}
.rcard ol{margin:10px 0 0;padding-left:18px;line-height:1.6}
.rcard .rb{display:flex;gap:8px;flex-wrap:wrap}
a.gold,button.gold{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--c-gold-5);font-weight:700;border:0;border-radius:6px;padding:9px 14px;text-decoration:none;font-size:13px;box-shadow:0 2px 8px var(--c-gold-53-a20)}
a.gold:hover,button.gold:hover{filter:brightness(1.07)}
a.gold svg{width:16px;height:16px}
.relay{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.relay i{width:8px;height:8px;border-radius:50%;background:var(--c-green-51);box-shadow:0 0 5px var(--c-green-51)}
.relay.wait i{background:var(--gold);box-shadow:none;animation:blink 1s infinite}
.relay.upd i{background:var(--gold);box-shadow:none}
.relay.start,.relay.get{background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--c-gold-5);border-color:var(--gold)}
.relay svg{width:13px;height:13px}
.rsplit{display:inline-flex}.rsplit>button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
.rsplit>.rmore{border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid var(--c-black-a27);padding:0 7px;min-width:0}
button.gold.rmore{padding:9px 8px;box-shadow:none}
.rmenu{position:fixed;inset:auto;margin:0;z-index:60;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 24px var(--c-black-a67);padding:4px;min-width:230px;display:flex;flex-direction:column}
.rmenu button{text-align:left;border:0;background:none;padding:8px 12px;border-radius:4px;color:var(--text);font-size:13px}
.rmenu button:hover:not(:disabled){background:var(--panel2)}.rmenu button:disabled{opacity:.4}
.rmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
@keyframes blink{50%{opacity:.3}}
.rcard .rb{align-items:center}
.rcard .ralt,.rcard .ralt2{font-size:11.5px;color:var(--c-blue-81)}
.rcard .rwarn{margin-top:10px;border-left:3px solid var(--gold);background:var(--c-grey-9);padding:8px 10px;border-radius:0 6px 6px 0;color:var(--c-gold-75-2);font-size:11.5px;line-height:1.45}
.rcard .rwarn b{color:var(--gold2)}.rcard .rwarn summary{cursor:pointer;list-style:none}.rcard .rwarn summary::-webkit-details-marker{display:none}.rcard .rwarn ul{margin:4px 0;padding-left:16px}
.rcard .rmsg{margin-top:10px;color:var(--c-gold-79);line-height:1.45}
.rcard .rauto{display:flex;gap:6px;align-items:center;margin-top:12px;color:var(--c-grey-82)}
button.gold svg{width:15px;height:15px}
button.gold:disabled{opacity:.7}
[data-needs].locked{opacity:.4;pointer-events:none;user-select:none}
.lockmsg{display:flex;gap:8px;align-items:center;background:var(--c-grey-12);border:1px solid var(--c-gold-25);color:var(--c-gold-75);border-radius:6px;padding:8px 10px;margin:0 0 12px;font-size:12.5px}
.lockmsg::before{content:'🔒'}
.dests{display:flex;flex-direction:column;gap:5px}
.dx{display:grid;grid-template-columns:18px 122px minmax(0,1.3fr) minmax(0,1fr);gap:5px;align-items:center}
.nilist{border:1px solid var(--line);border-radius:6px;max-height:220px;overflow:auto;background:var(--navy)}
.nilist label{display:flex;gap:8px;align-items:center;padding:7px 10px;border-bottom:1px solid var(--panel2);cursor:pointer}
.nilist label:hover{background:var(--panel2)}
.nilist small{color:var(--dim);margin-left:auto;font-size:11px}
#dlgZoom,#dlgZoomMgr,#dlgLayers,#dlgGt,#dlgColour{max-width:none}
.cmodes{display:flex;gap:6px;margin-bottom:12px}.cmodes label{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:6px;padding:8px;cursor:pointer;background:var(--navy)}
.cmodes label:has(input:checked){border-color:var(--brand);background:var(--c-blue-18)}
.cgrid{display:grid;grid-template-columns:150px 1fr;gap:14px}.cprev{width:150px;height:96px;border-radius:6px;border:1px solid var(--line)}
.chk{background:repeating-conic-gradient(var(--c-grey-33) 0 25%,var(--c-grey-20) 0 50%) 0 0/16px 16px}
.csw{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin:10px 0}.csw button{height:24px;padding:0;border:1px solid var(--c-black-a40);border-radius:4px;min-width:0}.csw button.sel{outline:2px solid var(--gold2);outline-offset:1px}
.cnum{display:grid;grid-template-columns:44px repeat(4,1fr);gap:6px;align-items:center;margin:4px 0}.cnum input{width:100%;min-width:0}.cnum b{color:var(--dim);font-size:12px;font-weight:500}
.cbars{height:96px;width:150px;border-radius:6px;border:1px solid var(--line)}
.zgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.zgrid .f{margin:0}
.zset{border:1px solid var(--line);border-radius:6px;padding:10px 12px;margin-top:10px;background:var(--navy)}
.zset h4{margin:0 0 8px;font-size:12px;color:var(--gold);letter-spacing:.5px}
.zplist{border:1px solid var(--line);border-radius:6px;max-height:260px;overflow:auto;background:var(--navy)}
.zplist .zp{display:flex;gap:8px;align-items:center;padding:6px 10px;border-bottom:1px solid var(--panel2)}
.zplist .zp b{flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zplist .zp small{color:var(--dim);font-size:11px;white-space:nowrap}
.zplist .zp button{padding:3px 10px;font-size:12px}
.zstate{font-size:13px;margin:6px 0 10px;padding:7px 10px;border-radius:6px;background:var(--c-blue-15)}
.zstate.warn{background:var(--c-gold-15);color:var(--gold2)}.zstate.bad{background:var(--c-red-16-2);color:var(--c-red-80)}.zstate.ok{background:var(--c-green-13);color:var(--c-green-73)}
.note2{border-left:3px solid var(--gold);background:var(--c-grey-9);padding:8px 10px;border-radius:0 6px 6px 0;font-size:12px;color:var(--c-gold-75-2);margin-top:12px;line-height:1.5}
.note2 b{color:var(--gold2)}
.ck{display:flex;gap:10px;align-items:flex-start;margin:0 0 12px}
.ck input{margin-top:3px}
.ck>div>b{display:block}
.ck span{color:var(--dim);font-size:12px}
.row2{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px;align-items:center;margin-bottom:10px}
.row2>*{min-width:0}.row2 select{max-width:100%}
.row2 label{color:var(--dim)}
.hint{color:var(--dim);font-size:11.5px}

/* rev35: Standard / Advanced Add Input menu; groups fill a column down to the lower-third line, then a new column starts */
.menu.grp.open{display:flex;flex-direction:row;align-items:stretch;gap:0;padding:0;max-width:98vw;max-height:none;overflow:visible}
.menu.grp .side{display:flex;flex-direction:column;min-width:0;padding:8px}
.menu.grp .side.adv{background:var(--bg);border-left:1px solid var(--line)}
.menu.grp .shd{display:flex;align-items:baseline;gap:10px;padding:2px 4px 8px;border-bottom:1px solid var(--line);margin-bottom:8px;white-space:nowrap}
.menu.grp .shd b{font-size:12.5px;letter-spacing:1.4px;color:var(--c-white)}
.menu.grp .shd span{font-size:11px;color:var(--dim)}
.menu.grp .adv .shd b{color:var(--gold2)}
.menu.grp .cols{display:flex;gap:6px;align-items:flex-start}
.menu.grp .cols .mcol{width:236px;display:flex;flex-direction:column;gap:8px}
.menu.grp .pool{display:none}
.menu.grp .rstate{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--c-gold-75);background:var(--c-grey-12);border:1px solid var(--c-gold-25);border-radius:5px;padding:5px 8px;margin:0 0 8px;max-width:236px;box-sizing:border-box}
.menu.grp .rstate i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block}
.menu.grp .rstate.ok{color:var(--c-green-75);background:var(--c-green-12);border-color:var(--c-green-25)}
.menu.grp .rstate.ok i{background:var(--prog)}
.menu.grp .adv button .bolt{color:var(--gold2);margin-right:5px}
/* guide window for Advanced inputs / features */
dialog.need{max-width:min(640px,96vw);width:640px;padding:0;overflow:hidden}
.need .nh{display:flex;gap:12px;align-items:center;padding:16px 18px 12px;border-bottom:1px solid var(--line);background:var(--c-grey-14)}
.need .nh .ic{flex:none;width:38px;height:38px;border-radius:8px;background:var(--brand);display:grid;place-items:center;font-size:20px}
.need .nh h3{margin:0;font-size:16px}
.need .nh small{color:var(--dim)}
.need .nb{padding:14px 18px;font-size:13px;line-height:1.5;max-height:min(62vh,560px);overflow:auto}
.need .nb p{margin:0 0 10px}
.need ol{margin:4px 0 12px;padding-left:20px}
.need ol li{margin:3px 0}
.need .win{border:1px solid var(--c-gold-25);background:var(--c-grey-12);border-radius:6px;padding:10px 12px;margin:6px 0 4px;display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start}
.need .win h4{margin:0 0 4px;color:var(--gold2);font-size:13px}
.need .win p{margin:0 0 6px;font-size:12.5px}
.need .ss{background:var(--c-blue-36);color:var(--c-white);border-radius:3px;padding:8px 8px 6px;font:11px/1.3 "Segoe UI",sans-serif;position:relative;margin-bottom:18px}
.need .ss .t{font-size:13px;font-weight:600;margin-bottom:4px}
.need .ss .btns{display:flex;gap:4px;justify-content:flex-end;margin-top:8px}
.need .ss .btns span{border:1px solid var(--c-white);padding:1px 6px;font-size:10px}
.need .ss .btns span.ra{outline:2px solid var(--gold2);outline-offset:1px}
.need .ss .cap{position:absolute;left:0;right:0;bottom:-18px;text-align:center;color:var(--dim);font-size:10px}
.need .nf{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--c-grey-14);flex-wrap:wrap}
.need .nf .l{font-size:12px;color:var(--dim);flex:1 1 180px}
.need .nf .r{display:flex;gap:8px;flex-wrap:wrap}
.need a{color:var(--c-blue-78)}
.need .gold{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700;padding:8px 14px;border-radius:5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.need .spin{flex:none;width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:wmspin 1s linear infinite}
@keyframes wmspin{to{transform:rotate(360deg)}}
.need .prog{display:flex;gap:14px;align-items:center;padding:6px 0 12px}
.need .stp{list-style:none;padding:0;margin:0}
.need .stp li{margin:4px 0}
.need .why{border-left:3px solid var(--warn);background:var(--c-grey-12);padding:8px 10px;border-radius:0 5px 5px 0;margin:0 0 10px}
@media (max-width:640px){.need .win{grid-template-columns:1fr}}

/* rev37: templates */
#btnTpl{margin-left:8px}
#tplName{margin-left:10px;font-size:13px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;max-width:260px;overflow:hidden}
#tplName small{color:var(--dim)} #tplName i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--warn);display:inline-block}
.tmenu{position:fixed;z-index:40;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 24px var(--c-black-a53);min-width:320px;padding:6px 0;display:flex;flex-direction:column}
.tmenu[hidden]{display:none}
.tmenu button{border:0;border-radius:0;background:transparent;text-align:left;padding:7px 14px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.tmenu button:hover{background:var(--panel2)} .tmenu button:disabled{opacity:.45;background:none;cursor:default}
.tmenu kbd{color:var(--dim);font:12px system-ui;white-space:nowrap}
.tmenu small{color:var(--dim);display:block;font-size:11px}
.tmenu hr{border:0;border-top:1px solid var(--line);margin:5px 0}
.tmenu h6{margin:4px 14px 2px;font-size:10.5px;letter-spacing:1px;color:var(--gold)}
.tmenu label{display:flex;gap:8px;padding:7px 14px;font-size:13px;align-items:flex-start;cursor:pointer}
.need .flist{list-style:none;padding:0;margin:8px 0;border:1px solid var(--line);border-radius:5px;max-height:220px;overflow:auto}
.need .flist li{display:flex;justify-content:space-between;gap:10px;padding:5px 10px;border-top:1px solid var(--line);font-size:12.5px}
.need .flist li:first-child{border-top:0}
.need .flist .ok{color:var(--c-green-69);white-space:nowrap} .need .flist .no{color:var(--c-red-77);white-space:nowrap} .need .flist .wt{color:var(--dim);white-space:nowrap}
.need progress{width:100%}
.tile.missing .th{background:var(--c-red-31) !important}
.tile .miss{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--c-red-12);color:var(--c-red-77);font-size:12px;text-align:center;padding:6px;z-index:2}
.tile .miss b{color:var(--c-red-85)}
.tile .miss span{overflow-wrap:anywhere}
.tile .miss div{display:flex;gap:6px}
.tile .miss button{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700;padding:3px 10px;border-radius:4px}
.tile .miss button.alt{background:var(--panel2);color:var(--text)}
.tile .pic{position:relative}

/* rev38: per-input options */
dialog.iopt{width:min(580px,94vw)} .iopt h3{margin:0 0 4px} .iopt .sub{color:var(--dim);font-size:12px;margin:0 0 12px}
.iopt .row{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.iopt .row b{display:block;font-size:13.5px} .iopt .row span{color:var(--dim);font-size:12px}
.iopt .row select.own{border-color:var(--gold)}
.iopt .acts{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap} .iopt .acts small{color:var(--dim)} .iopt .acts span{display:flex;gap:8px}
.iopt .gold{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700}
.tile [data-a=cog].own{color:var(--gold2)}

/* toast message (was written inside the JS) */
#toast{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);background:var(--c-grey-20-a87);border:1px solid var(--c-grey-33);padding:8px 14px;border-radius:6px;z-index:30;max-width:80vw;display:none}

/* ---------- start-up window (rev42): loading splash, then "Open a template" ----------
   Size by proportion: 64 % of the window width (16:9), never taller than 84 % of the height; the status bar is
   ~17 px high on a 1080-line screen (14–22 px). Logo 1/4, text 3/4. */
.spl{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--c-black-a67);backdrop-filter:blur(3px)}
.spl .box{width:min(64vw,142vh);aspect-ratio:16/9;max-height:84vh;display:grid;grid-template-columns:1fr 3fr;grid-template-rows:minmax(0,1fr) auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 20px 60px var(--c-black-a67);font-size:clamp(12px,.78vw,16px)}
.spl .side{background:linear-gradient(180deg,var(--c-grey-14),var(--c-grey-8));border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1em;padding:1.5em;min-width:0}
.spl .side img{width:70%;max-width:260px}                     /* the logo as provided: no rounded corners (branding) */
.spl .side .nm{font-size:1.9em;font-weight:800;color:var(--c-white);text-align:center;line-height:1.1}
.spl .side .nm span{color:var(--gold)}
.spl .side .ver{color:var(--dim);font-size:.95em;text-align:center}
.spl .main{padding:1.8em 2.2em;overflow:auto;line-height:1.5;min-width:0}
.spl .main h2{margin:0 0 .2em;font-size:1.6em;color:var(--c-white)}
.spl .main .lead{color:var(--dim);margin:0 0 1em}
.spl .main h3{font-size:1.15em;margin:1em 0 .4em;color:var(--gold2)}
.spl .main p{margin:.5em 0}
.spl .main ul{margin:.3em 0 .8em;padding-left:1.3em}
.spl .main li{margin:.35em 0}
.spl .main a{color:var(--c-blue-75);cursor:pointer;text-decoration:none}
.spl .main a:hover{text-decoration:underline}
.spl .main kbd{border:1px solid var(--line);border-radius:3px;padding:0 4px;font-size:.9em}
.spl .bar{grid-column:1/3;position:relative;height:clamp(14px,1.75vh,22px);background:var(--c-grey-8);border-top:1px solid var(--line);
  font-size:clamp(10px,1.05vh,13px);color:var(--c-grey-82);display:flex;align-items:center;padding:0 .8em;gap:.8em;overflow:hidden}
.spl .bar .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--brand2),var(--brand));opacity:.85;transition:width .2s}
.spl .bar span{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spl .bar .r{margin-left:auto;color:var(--dim);flex:none}
.spl .bar.ok .fill{background:linear-gradient(90deg,var(--c-green-21),var(--prog))}
.spl .bar.ok .r{color:var(--c-grey-82)}
.spl .bar.bad .fill{background:linear-gradient(90deg,var(--c-red-31),var(--bad))}
.spl .bar button{position:relative;font-size:inherit;padding:0 .8em;line-height:1.3}
/* ready: open a template */
.spl .first{display:flex;align-items:center;gap:1.2em;border:1px solid var(--gold);background:var(--c-grey-12);border-radius:8px;padding:1em 1.2em;margin:.6em 0 1.2em}
.spl .first .ic{font-size:2.2em}
.spl .first b{display:block;font-size:1.2em;color:var(--c-white)}
.spl .first small{color:var(--c-gold-79)}
.spl .first .go{margin-left:auto;font-size:1.05em;padding:.55em 1.4em;background:linear-gradient(180deg,var(--gold2),var(--gold));color:var(--c-gold-5);border:1px solid var(--gold);font-weight:800;border-radius:5px}
.spl .first.off{border-color:var(--line);background:var(--c-grey-14);opacity:.75}
.spl .first.off small{color:var(--dim)}
.spl .first .go:disabled{background:var(--panel2);color:var(--dim);border-color:var(--line);cursor:not-allowed}
.spl .lst{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.spl .lst .hd{display:block;padding:.45em .9em;background:var(--c-grey-14);color:var(--dim);font-size:.85em;letter-spacing:.08em}
.spl .lst button{display:grid;grid-template-columns:1.6em 1fr auto auto;gap:.8em;align-items:center;width:100%;text-align:left;font-size:1em;
  padding:.55em .9em;border:0;border-top:1px solid var(--line);border-radius:0;background:none}
.spl .lst button:hover,.spl .lst button:focus-visible{background:var(--panel2)}
.spl .lst button:disabled{opacity:.5;cursor:not-allowed}
.spl .lst small{color:var(--dim)}
.spl .acts{display:flex;gap:.8em;margin-top:1.2em;align-items:center;flex-wrap:wrap}
.spl .acts button{font-size:1em;padding:.5em 1.1em;border-radius:5px}
.spl .acts .wn{margin-left:auto}
@media (max-width:700px), (max-aspect-ratio:1/1){
  .spl .box{width:94vw;aspect-ratio:auto;height:auto;max-height:92vh;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}
  .spl .side{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:.8em 1.2em}
  .spl .side img{width:3.5em}
  .spl .side .nm{font-size:1.3em}
  .spl .bar{grid-column:1}
}

/* ---------- Website URL input (rev43) ---------- */
#dlgWeb .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
#dlgWeb select{width:100%}
#dlgWeb .imp{font-size:11px;color:var(--dim);margin-top:2px}
#dlgWeb .wh{margin-top:4px;display:flex;align-items:center;gap:4px}
#dlgWeb .wh input{width:80px}
#dlgWeb #webPlayOpts{margin-right:auto}
.tile .r button.ia{background:var(--brand);border-color:var(--brand);color:#fff;font-size:15px;line-height:1}
.tile .r button.ia.on{background:var(--gold);border-color:var(--gold);color:#000}
#webIA{position:fixed;inset:6vh 8vw;background:var(--panel);border:1px solid var(--line);border-radius:8px;z-index:50;display:grid;grid-template-rows:auto auto 1fr;box-shadow:0 20px 60px #000a;overflow:hidden}
#webIA[hidden]{display:none}
#webIA .nb{display:flex;gap:6px;align-items:center;padding:8px 10px;background:var(--c-grey-14);border-bottom:1px solid var(--line)}
#webIA .nb input{flex:1}
#webIA .nb b{margin-right:6px}
#webIA .nb button:disabled{opacity:.4}
#webIA .kb{display:flex;align-items:center;gap:10px;padding:6px 12px;background:var(--c-gold-15);color:var(--c-gold-79);font-size:12.5px;border-bottom:1px solid var(--c-gold-25)}
#webIA .kb button{margin-left:auto}
#webIA .pg{background:#000;display:grid;place-items:center;overflow:hidden;min-height:0}
#webIA canvas{outline:none;cursor:default}
footer .kbnote{display:inline-flex;align-items:center;gap:8px;background:var(--c-gold-15);border:1px solid var(--gold);color:var(--gold2);border-radius:4px;padding:2px 4px 2px 8px;font-weight:600}
footer .kbnote[hidden]{display:none}
footer .kbnote b{font-weight:600}
footer .kbnote button{padding:1px 8px}
.need .warnline{color:var(--gold2);font-size:12.5px;border-left:3px solid var(--gold);padding-left:8px}

/* rev44hf01: a monitor that shows the input in ⌨ Interact – the mouse there goes to the page */
.mon.iaon canvas{outline:2px solid var(--gold);outline-offset:-2px;cursor:default}

/* ---------- Input Configuration (rev45) ---------- */
#dlgIC{width:min(1080px,96vw);max-width:none;height:min(660px,94vh);max-height:94vh;padding:0}
#dlgIC .icw{display:grid;grid-template-columns:170px minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;height:100%}
#dlgIC h3{grid-column:1/3;margin:0;padding:11px 18px;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--brand) 0 35%,var(--gold) 65%,transparent) 1;display:flex;align-items:center;gap:10px}
#dlgIC h3 small{font-weight:400;color:var(--dim);font-size:12px}
#dlgIC .onair{grid-column:1/3;background:var(--c-gold-15);color:var(--gold2);font-size:12.5px;padding:6px 18px;border-bottom:1px solid var(--c-gold-25)}
#dlgIC .onair[hidden]{display:none}
#dlgIC .stabs{grid-row:3}
#dlgIC .stabs button:disabled{opacity:.4;cursor:not-allowed}
#icPanes{grid-row:3;overflow:auto;min-height:0}
#dlgIC .icpane{display:none;padding:14px 18px}
#dlgIC .icpane.cur{display:block}
#dlgIC #icPic.cur{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
#icPic .pv{display:flex;flex-direction:column;gap:6px;position:sticky;top:0}
#icPic .pv canvas{width:100%;height:auto;border:1px solid var(--line);background:repeating-conic-gradient(#2a2f3a 0 25%,#1c2029 0 50%) 0 0/20px 20px}
#icPic .pv small,#icPic .hint{color:var(--dim);font-size:11.5px}
#icPic .grp{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin:10px 0 4px;display:flex;align-items:center;gap:6px}
#icPic .grp:first-child{margin-top:0}
#icPic .grp::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--c-gold-53-a40),transparent)}
#icPic .r{display:grid;grid-template-columns:84px minmax(0,1fr) 62px 16px;gap:8px;align-items:center;font-size:12.5px;padding:2px 0}
#icPic .r[hidden]{display:none}
#icPic .r input[type=number]{width:62px;box-sizing:border-box}
#icPic .r i{font-style:normal;color:var(--dim)}
#icPic input.own{border-color:var(--gold)}
#icPic .lk{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim);margin:2px 0 2px 92px}
#icPic .lk button{padding:1px 8px}
#icPic .btns{display:flex;gap:6px;margin:4px 0 2px 92px;flex-wrap:wrap}
#icPic .btns button{padding:3px 10px}
#icPic .btns button.on{background:var(--gold);color:var(--c-gold-5);border-color:var(--gold)}
#icPic .hint{margin:6px 0 0 92px}
#dlgIC .acts{grid-column:1/3;grid-row:4;padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}
#dlgIC .acts small{color:var(--dim)}
#dlgIC .acts span{display:flex;gap:8px}
#dlgIC .acts button[hidden]{display:none}
#dlgIC .gold{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700}
/* an input's own settings window shown inside a tab */
dialog.hosted{position:static;display:block;inset:auto;margin:0;padding:0;border:0;border-radius:0;background:none;min-width:0;max-width:none;width:auto;max-height:none;overflow:visible;color:inherit;box-shadow:none}
dialog.hosted>form{width:auto!important;max-width:100%}
dialog.hosted h3{display:none}
dialog.hosted .acts button[value=ok],dialog.hosted .acts button[value=cancel],dialog.hosted #webPlayOpts{display:none}
dialog.hosted .acts{justify-content:flex-start;margin-top:12px}
dialog.hosted .acts:not(:has(button:not([value=ok]):not([value=cancel]):not(#webPlayOpts))){display:none}

/* ---------- T-bar (rev46, rev46hf01) ---------- */
.monrow{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.monrow.midout{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}          /* middle column floating: Preview and Live side by side */
.mid{display:grid;grid-template-columns:130px 130px;column-gap:8px;align-items:start;padding-top:0}
.mid .mbtn{display:flex;flex-direction:column;gap:6px;justify-content:flex-start;padding-top:24px}
.mid .mbtn>button{height:var(--btn-m);padding:0 4px}
.mid .ov button{height:var(--btn-s);padding:0}
.mid.float{position:fixed;z-index:40;background:var(--panel);border:1px solid var(--gold);border-radius:8px;padding:6px 8px 8px;box-shadow:0 14px 40px #000c}
.mid.float .tbh{cursor:grab}
.tbar{display:flex;flex-direction:column;align-items:center;gap:6px;width:130px}
.tbar .tbh{display:grid;grid-template-columns:106px 24px;align-items:center;height:18px;width:100%;user-select:none}
.tbar .tbh>span{display:flex;align-items:center;justify-content:center;gap:8px}
.tbar .tbw{position:relative}
.tbar .tbw .mute{position:absolute;right:1px;bottom:3px;height:20px;width:22px;padding:0;font-size:11px;line-height:1}   /* under the meter, like On/Off under a mixer fader */
.tbar .tbw .mute.off{background:var(--live);border-color:var(--live)}
.tbar .tbh b{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--gold)}
.tbar .tbh .fl{font-size:11px;padding:0 4px;line-height:15px;min-width:0;height:auto}
.tbar svg{display:block;user-select:none;-webkit-user-select:none;background:var(--c-black);border:1px solid var(--line);border-radius:4px;cursor:ns-resize;touch-action:none}
.tbar.off svg{cursor:not-allowed;opacity:.75}
.tbar .ab{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:130px}
.tbar .ab button{height:var(--btn-s);font-size:11px;font-weight:700;padding:0 2px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar .ab button.empty{color:var(--dim);border-style:dashed;font-weight:400;font-size:14px}
.tbar .ab button.rec{color:var(--bad)}
.tbar .ab button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tbar .ab button.rec.on{background:var(--live);border-color:var(--live);color:#fff}
.tbar .tbren{height:var(--btn-s);width:100%;box-sizing:border-box;font-size:11px;padding:0 4px}
.ctxm{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 30px #000c;padding:4px;min-width:230px;max-height:80vh;overflow:auto;font-size:12.5px}
.ctxm .t{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;padding:6px 10px 4px}
.ctxm .i{padding:6px 10px;border-radius:4px;display:flex;justify-content:space-between;gap:12px;cursor:default;white-space:nowrap}
.ctxm .i:hover{background:var(--brand);color:#fff}
.ctxm .i small{color:var(--dim)} .ctxm .i:hover small{color:#dde}
.ctxm hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.ck.sel select{flex:0 0 150px}

/* ---------- FrameSets (rev47) ---------- */
#dlgFS{width:min(1280px,97vw);max-width:none;height:min(740px,95vh);max-height:95vh;padding:0}
#dlgFS .w{display:grid;grid-template-columns:230px minmax(0,1fr) 310px;grid-template-rows:auto minmax(0,1fr) auto;height:100%}
#dlgFS h3{grid-column:1/4;margin:0;padding:11px 18px;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--brand) 0 35%,var(--gold) 65%,transparent) 1;display:flex;gap:10px;align-items:center}
#dlgFS h3 small{font-weight:400;color:var(--dim);font-size:12px}
#dlgFS .lc{padding:12px;background:var(--navy);border-right:1px solid var(--line);overflow:auto;min-height:0}
#dlgFS .grp{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin:14px 0 8px;display:flex;align-items:center;gap:6px}
#dlgFS .lc .grp:first-child,#dlgFS .rc .grp:first-child{margin-top:2px}
#dlgFS .grp::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--c-gold-53-a40),transparent)}
#dlgFS .lays{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#dlgFS .lays canvas,#dlgFS .bgs canvas{width:100%;border:2px solid transparent;border-radius:4px;cursor:pointer;display:block;box-sizing:border-box}
#dlgFS .lays canvas.sel,#dlgFS .bgs canvas.sel{border-color:var(--gold)}
#dlgFS .bgs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
#dlgFS .bgs canvas[hidden]{display:none}
#dlgFS #fsUpload{width:100%}
#dlgFS .hint{color:var(--dim);font-size:11.5px;display:block;margin-top:4px}
#dlgFS .pv{padding:14px;display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0;min-height:0}
#dlgFS .pv canvas{width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
#dlgFS .pv small{color:var(--dim);font-size:11.5px}
#dlgFS .rc{padding:14px;border-left:1px solid var(--line);overflow:auto;min-height:0}
#dlgFS .slot{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:center;margin:0 0 8px}
#dlgFS .slot b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px}
#dlgFS .slot select{width:100%}
#dlgFS .fsst{margin:0 0 10px;font-size:12.5px}
#dlgFS .fsst label{display:flex;gap:6px;align-items:center;font-weight:600}
#dlgFS .fsst .v{display:grid;grid-template-columns:minmax(0,1fr) 52px 18px 34px;gap:6px;align-items:center;margin:4px 0 0 22px}
#dlgFS .fsst .v:has(.sub){grid-template-columns:54px minmax(0,1fr) 52px 18px}
#dlgFS .fsst .v .sub{color:var(--dim);font-size:11.5px}
#dlgFS .fsst .v input[type=number]{width:52px;box-sizing:border-box}
#dlgFS .fsst .v input[type=color]{width:30px;height:24px;padding:0;border:1px solid var(--line)}
#dlgFS .fsst .v i{color:var(--dim);font-style:normal}
#dlgFS .fsst.off .v{opacity:.4;pointer-events:none}
#dlgFS .f{display:flex;flex-direction:column;gap:4px;margin:14px 0 6px}
#dlgFS .f label{color:var(--dim);font-size:12px}
#dlgFS .acts{grid-column:1/4;padding:10px 16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
#dlgFS .acts small{color:var(--dim)} #dlgFS .acts span{display:flex;gap:8px}
#dlgFS .gold{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700}
/* inside Input Configuration (⚙ → FRAMESET) */
dialog.hosted#dlgFS{width:auto;height:100%;max-height:none}
dialog.hosted#dlgFS h3{display:none}
dialog.hosted#dlgFS .w{grid-template-columns:200px minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr);height:100%}
/* rev49: the ⚙ window grows to the FrameSet window's size when the FRAMESET tab is open; the tab fills it (no inner scroll bars, no empty space under it) */
#dlgIC:has(.icpane.cur[data-k=frameset]){width:min(1460px,98vw);height:min(830px,96vh);max-height:96vh}
#dlgIC #icPanes:has(.icpane.cur[data-k=frameset]){overflow:hidden}
#dlgIC .icpane.cur[data-k=frameset]{padding:0;height:100%}
dialog.hosted#dlgFS .pv{overflow:auto;gap:6px}
#dlgFS .fits{display:flex;gap:4px;flex-wrap:wrap}
#dlgFS .fits button{padding:3px 14px}
#dlgFS .fits button.on{background:var(--gold);color:var(--c-gold-5);border-color:var(--gold)}
#dlgFS .fsmerge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;padding:8px 12px;background:var(--navy);font-size:12.5px;font-weight:600}
#dlgFS .fsmerge small{color:var(--dim);font-weight:400;font-size:11.5px}

/* ---------- FrameSet slot settings (rev47hf01) ---------- */
#dlgFS .pv{justify-content:flex-start}
#dlgFS .pv canvas{cursor:pointer}
#dlgFS .slotcfg{border:1px solid var(--line);border-radius:6px;padding:10px 12px;background:var(--navy)}
#dlgFS .slotcfg .hd{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600}
#dlgFS .slotcfg .hd b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--c-gold-5);font-size:12px}
#dlgFS .slotcfg .hd span{color:var(--dim);font-weight:400;font-size:12px}
#dlgFS .slotcfg .hd button{margin-left:auto;padding:3px 10px}
#dlgFS .slotcfg .rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px}
#dlgFS .slotcfg .r{display:grid;grid-template-columns:84px minmax(0,1fr) 56px 16px;gap:6px;align-items:center;font-size:12.5px}
#dlgFS .slotcfg .r input[type=number]{width:56px;box-sizing:border-box}
#dlgFS .slotcfg .r i{color:var(--dim);font-style:normal}
#dlgFS .slotcfg .fits{display:flex;gap:4px}
#dlgFS .slotcfg .fits button{padding:3px 12px}
#dlgFS .slotcfg .fits button.on{background:var(--gold);color:var(--c-gold-5);border-color:var(--gold)}
#dlgFS .slotcfg .own{border-color:var(--gold)}
#dlgFS .slotcfg .empty{color:var(--dim);font-size:12px}
#dlgFS .slot b{cursor:pointer}
#dlgFS .slot b.cur{background:var(--gold);color:var(--c-gold-5)}

/* ---------- FrameSet slot settings, two columns (rev47hf02) ---------- */
#dlgFS .slotcfg .rows{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row}
#dlgFS .slotcfg .fitrow{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:12.5px}
#dlgFS .slotcfg .fitrow>span:first-child{width:76px}
#dlgFS .slotcfg .col{display:flex;flex-direction:column;gap:6px}
#dlgFS .slotcfg .r{grid-template-columns:76px minmax(0,1fr) 62px 18px}
#dlgFS .slotcfg .r input[type=number]{width:62px}

/* rev49: drag tiles to reorder; minimized tiles */
.tile[draggable=true] .th{cursor:grab}
.tile.dragging{opacity:.4}
.tile.dropL{box-shadow:-4px 0 0 var(--gold)} .tile.dropR{box-shadow:4px 0 0 var(--gold)}
.tile .vbar{display:none}
.tile.min{width:24px;height:var(--tile-h,186px);display:flex}
.tile.min>:not(.vbar){display:none}
.tile.min .vbar{display:block;flex:1;writing-mode:vertical-rl;background:var(--tile);color:var(--text,#e8ecf3);font-weight:600;font-size:12px;padding:6px 0;line-height:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.tile.min.isprev .vbar{background:var(--prev)} .tile.min.isprog .vbar{background:var(--live)}

/* rev50: Studio Call */
#dlgCall .ctabs{display:flex;gap:6px;margin:4px 0 12px} #dlgCall .ctabs button{padding:6px 16px} #dlgCall .ctabs button.cur{background:var(--brand);border-color:var(--brand);color:#fff}
#dlgCall .cmodes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
#dlgCall .cmode{text-align:left;border:2px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--navy);white-space:normal;line-height:1.45}
#dlgCall .cmode.on{border-color:var(--gold)} #dlgCall .cmode>b{display:block;font-size:15px;margin-bottom:4px} #dlgCall .cmode>span{color:var(--dim);font-size:12px;display:block} #dlgCall .cmode{display:block;width:100%;align-self:stretch}
#dlgCall,#dlgCallIn{max-width:96vw} #dlgCall>form,#dlgCallIn>form{max-width:100%;box-sizing:border-box}
.cgrid{display:grid;grid-template-columns:130px 1fr;gap:8px 12px;align-items:center;margin-top:8px} .cgrid>label{color:var(--dim)}
#dockCall .db{padding:8px 10px;display:flex;flex-direction:column;gap:8px}
#callList{display:flex;flex-direction:column;gap:6px}
#callList .g{display:grid;grid-template-columns:80px minmax(0,1fr) auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:4px 8px;background:var(--navy)}
#callList .g canvas{width:80px;height:45px;border-radius:3px;display:block}
#callList .g b{display:block;font-size:13px} #callList .g small{color:var(--dim);font-size:11.5px}
#callList .g .b{display:flex;gap:6px} #callList .g button{padding:5px 12px} #callList .g .add{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:700}
#callList .g.in{opacity:.8}
.cflag{font-size:10.5px;font-weight:800;padding:1px 6px;border-radius:3px;letter-spacing:.4px} .cflag.d{background:#1f5e3a;color:#9ff0c0} .cflag.r{background:#7a1f1f;color:#ffd0d0}
#callList .ok,#dlgCallIn .ok{color:#5fd38d} #callList .bad,#dlgCallIn .bad{color:#ff8a80}
#stCall .ok{color:#9ff0c0} #stCall .bad{color:#ffb4b4}
.cfoot{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .cfoot #callEnd{margin-left:auto}
.ctag{margin-left:auto;font-size:11px;font-weight:700;padding:2px 8px;border-radius:3px;background:var(--brand);color:#fff}
#dockCall{flex:2 1 0}

/* ===== rev51: side panel – full height on the right ===== */
.body2{display:grid;grid-template-columns:minmax(0,1fr) 5px var(--sideW,440px);min-height:0}
.lower{grid-template-columns:minmax(0,1fr)!important}
.sidesplit{cursor:col-resize;background:var(--line)} .sidesplit:hover,.sideh:hover{background:var(--accent)}
.side{display:grid;grid-template-rows:minmax(0,var(--sideTop,1fr)) 5px minmax(0,1fr);min-height:0;min-width:0;background:var(--panel)}
.sidetop,.sidebot{display:flex;flex-direction:column;min-height:0;min-width:0}
.sideh{cursor:row-resize;background:var(--line)}
.side .dock{flex:1 1 auto;min-height:0} .side .dock.hidden{display:none} .side .dock+.dock{border-top:0}
.sidetabs{display:flex;background:var(--c-grey-8);border-bottom:1px solid var(--line)}
.sidetabs button{border:0;border-radius:0;padding:9px 18px;font-weight:700;letter-spacing:.6px;font-size:12px;background:transparent;color:var(--dim);border-bottom:3px solid transparent;box-shadow:none}
.sidetabs button.cur{color:var(--text);border-bottom-color:var(--accent);background:var(--panel)}
body.themed .sidetabs button{background:transparent;border:0;border-bottom:3px solid transparent;box-shadow:none;color:var(--dim)} body.themed .sidetabs button.cur{color:var(--text);border-bottom-color:var(--accent);background:var(--panel)}
.sidetabs .cdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--prog);margin-left:7px;vertical-align:1px} .sidetabs .cdot[hidden]{display:none}
.callidle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;text-align:center}
.callidle[hidden]{display:none}
.callidle .big{background:var(--gold);color:var(--c-gold-5);border:0;font-weight:800;font-size:16px;padding:14px 30px;border-radius:8px}
.callidle p{color:var(--dim);font-size:12.5px;max-width:320px;margin:0;line-height:1.5} .callidle .ic{font-size:40px;opacity:.5}
#callList .g{grid-template-columns:64px minmax(0,1fr) auto} #callList .g canvas{width:64px;height:36px}
/* ===== rev51: themes ===== */
.thp{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:2px 0 4px}
.thc{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:4px;padding:6px;border:2px solid var(--line);border-radius:8px;white-space:normal}
.thc.on{border-color:var(--accent)} .thc b{font-size:12.5px} .thc small{color:var(--dim);font-size:11px;line-height:1.3}
.thc .sw{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3px;height:38px;padding:4px;border-radius:5px}
.thc .sw i{border-radius:3px;border:1px solid transparent}
.thhint{margin:0 0 12px}
body.themed .thc{background:var(--panel2);border:2px solid var(--line);color:var(--text);box-shadow:none} body.themed .thc.on{border-color:var(--accent)}
/* ===== rev51: T-bar without its title text; where each input runs ===== */
.tbar .tbh b{display:none} .tbar .tbh>span{justify-content:flex-end}
#addMenu .os{display:inline-block;font-size:10px;font-weight:600;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:0 4px;margin-left:6px;line-height:15px;white-space:nowrap;vertical-align:1px}
/* rev51: what every theme (not Active) changes besides the colour names – all from the theme's values */
body.themed{background:var(--bg);color:var(--text)}
body.themed .top,body.themed footer{background:var(--panel);border-color:var(--line)}
body.themed button{background:var(--t-btn);border:1px solid var(--t-btn-line);color:var(--t-btn-text);box-shadow:0 2px 0 var(--t-btn-line);border-radius:4px}
body.themed button:disabled{opacity:.45}
body.themed button.onb,body.themed .tile .r button.on,body.themed .tile .r button.onb,body.themed .tbar .ab button.on{background:var(--accent);border-color:var(--accent);color:var(--t-accent-text)}
body.themed #btnAdd,body.themed #btnAddMore,body.themed .gold,body.themed .callIdle .big,body.themed #callList .add,body.themed .relay{background:var(--gold);border-color:var(--gold);color:var(--t-gold-text)}
body.themed select,body.themed input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),body.themed textarea{background:var(--t-field);border:1px solid var(--t-btn-line);color:var(--t-field-text)}
body.themed .tile{background:var(--panel);border-color:var(--line)} body.themed .tile .r{background:var(--t-btn-line);gap:1px} body.themed .tile .r button{box-shadow:none;border-radius:0;border:0}
body.themed .tile .th,body.themed .tile .th input{background:var(--tile);color:var(--t-tile-text)}
body.themed .tile .th input{background:transparent!important;border:0!important;box-shadow:none}
body.themed .tile.isprev .th,body.themed .tile.isprev .th input{background:var(--prev);color:var(--t-prev-text)}
body.themed .tile.isprog .th,body.themed .tile.isprog .th input{background:var(--live);color:var(--t-live-text)}
body.themed .tile.min .vbar{background:var(--tile);color:var(--t-tile-text)} body.themed .tile.min.isprev .vbar{background:var(--prev);color:var(--t-prev-text)} body.themed .tile.min.isprog .vbar{background:var(--live);color:var(--t-live-text)}
body.themed .mon{border-color:var(--line)} body.themed .mon.preview .hd{color:var(--t-prev-text)} body.themed .mon.program .hd{color:var(--t-live-text)}
body.themed .mon .tc{background:var(--t-well2);color:var(--text)}
body.themed .top h1 span[style]{color:var(--t-brand-word)!important}
body.themed .tbar svg{background:var(--t-well);border-color:var(--line)}
body.themed .cflag.d{background:var(--t-ok);color:var(--panel)} body.themed .cflag.r{background:var(--live);color:var(--t-live-text)}
body.themed #callList .ok,body.themed #stCall .ok,body.themed #dlgCallIn .ok{color:var(--t-ok)} body.themed #callList .bad,body.themed #stCall .bad,body.themed #dlgCallIn .bad{color:var(--bad)}
body.themed .ctag{background:var(--accent);color:var(--t-accent-text)}
body.themed .ctxm .i:hover{color:var(--t-accent-text)}
body.th-graphite{--bg:#3d3f43;--panel:#4a4c50;--panel2:#55575b;--line:#64666b;--text:#f1f1ef;--dim:#b6b8bb;--prev:#2f5fd6;--live:#d8372f;--prog:#3fc46a;--tile:#2a2b2e;--accent:#2f5fd6;--brand:#2f5fd6;--brand2:#55575b;--gold:#e3a43a;--gold2:#e3a43a;--navy:#3d3f43;--warn:#e3a43a;--bad:#ff6b60;--c-grey-5:#141516;--c-grey-8:#4a4c50;--c-grey-9:#4a4c50;--c-grey-12:#4a4c50;--c-grey-14:#55575b;--c-grey-20:#64666b;--c-grey-33:#64666b;--c-grey-40:#8a8d91;--c-grey-47:#b6b8bb;--c-grey-82:#f1f1ef;--c-grey-94:#f1f1ef;--c-blue-15:#4a4c50;--c-blue-16:#55575b;--c-blue-18:#55575b;--c-blue-25:#55575b;--c-blue-25-2:#55575b;--c-blue-75:#2f5fd6;--c-blue-78:#2f5fd6;--c-blue-81:#2f5fd6;--c-green-12:#4a4c50;--c-green-13:#4a4c50;--c-green-21:#55575b;--c-green-25:#64666b;--c-green-47:#3fc46a;--c-green-47-2:#3fc46a;--c-green-51:#3fc46a;--c-green-69:#3fc46a;--c-green-73:#3fc46a;--c-green-75:#3fc46a;--c-red-12:#4a4c50;--c-red-16:#4a4c50;--c-red-16-2:#4a4c50;--c-red-31:#d8372f;--c-red-74:#ff6b60;--c-red-77:#ff6b60;--c-red-80:#ff6b60;--c-red-85:#ff6b60;--c-gold-5:#1d1405;--c-gold-15:#4a4c50;--c-gold-25:#e3a43a;--c-gold-75:#e3a43a;--c-gold-75-2:#b6b8bb;--c-gold-79:#b6b8bb;--c-orange-24:#4a4c50;--t-btn:#1f2022;--t-btn-text:#e9e9e7;--t-btn-line:#0f1011;--t-accent-text:#ffffff;--t-prev-text:#ffffff;--t-live-text:#ffffff;--t-gold-text:#1d1405;--t-tile-text:#f1f1ef;--t-field:#2a2b2e;--t-field-text:#f1f1ef;--t-well:#141516;--t-well2:#1e1f21;--t-ok:#3fc46a;--t-brand-word:#e3a43a}
body.th-night{--bg:#1b1c1f;--panel:#232428;--panel2:#2c2e32;--line:#3a3c41;--text:#ecebe7;--dim:#9fa1a5;--prev:#3a6bd8;--live:#d8372f;--prog:#3fc46a;--tile:#1d2433;--accent:#e9b93a;--brand:#e9b93a;--brand2:#2c2e32;--gold:#e9b93a;--gold2:#e9b93a;--navy:#1b1c1f;--warn:#e9b93a;--bad:#ff6b60;--c-grey-5:#101113;--c-grey-8:#232428;--c-grey-9:#232428;--c-grey-12:#232428;--c-grey-14:#2c2e32;--c-grey-20:#3a3c41;--c-grey-33:#3a3c41;--c-grey-40:#62656b;--c-grey-47:#9fa1a5;--c-grey-82:#ecebe7;--c-grey-94:#ecebe7;--c-blue-15:#232428;--c-blue-16:#2c2e32;--c-blue-18:#2c2e32;--c-blue-25:#2c2e32;--c-blue-25-2:#2c2e32;--c-blue-75:#e9b93a;--c-blue-78:#e9b93a;--c-blue-81:#e9b93a;--c-green-12:#232428;--c-green-13:#232428;--c-green-21:#2c2e32;--c-green-25:#3a3c41;--c-green-47:#3fc46a;--c-green-47-2:#3fc46a;--c-green-51:#3fc46a;--c-green-69:#3fc46a;--c-green-73:#3fc46a;--c-green-75:#3fc46a;--c-red-12:#232428;--c-red-16:#232428;--c-red-16-2:#232428;--c-red-31:#d8372f;--c-red-74:#ff6b60;--c-red-77:#ff6b60;--c-red-80:#ff6b60;--c-red-85:#ff6b60;--c-gold-5:#1d1505;--c-gold-15:#232428;--c-gold-25:#e9b93a;--c-gold-75:#e9b93a;--c-gold-75-2:#9fa1a5;--c-gold-79:#9fa1a5;--c-orange-24:#232428;--t-btn:#303236;--t-btn-text:#e6e6e3;--t-btn-line:#17181a;--t-accent-text:#1d1505;--t-prev-text:#ffffff;--t-live-text:#ffffff;--t-gold-text:#1d1505;--t-tile-text:#e8ecf4;--t-field:#151619;--t-field-text:#ecebe7;--t-well:#101113;--t-well2:#18191c;--t-ok:#3fc46a;--t-brand-word:#e9b93a}
body.th-keys{--bg:#45474b;--panel:#515357;--panel2:#5c5e62;--line:#6a6c71;--text:#f3f3f1;--dim:#c0c2c5;--prev:#2f5fd6;--live:#d8372f;--prog:#3fc46a;--tile:#2a2b2e;--accent:#2f5fd6;--brand:#2f5fd6;--brand2:#5c5e62;--gold:#efe3c7;--gold2:#efe3c7;--navy:#45474b;--warn:#efe3c7;--bad:#ff6b60;--c-grey-5:#141516;--c-grey-8:#515357;--c-grey-9:#515357;--c-grey-12:#515357;--c-grey-14:#5c5e62;--c-grey-20:#6a6c71;--c-grey-33:#6a6c71;--c-grey-40:#8a8d91;--c-grey-47:#c0c2c5;--c-grey-82:#f3f3f1;--c-grey-94:#f3f3f1;--c-blue-15:#515357;--c-blue-16:#5c5e62;--c-blue-18:#5c5e62;--c-blue-25:#5c5e62;--c-blue-25-2:#5c5e62;--c-blue-75:#2f5fd6;--c-blue-78:#2f5fd6;--c-blue-81:#2f5fd6;--c-green-12:#515357;--c-green-13:#515357;--c-green-21:#5c5e62;--c-green-25:#6a6c71;--c-green-47:#3fc46a;--c-green-47-2:#3fc46a;--c-green-51:#3fc46a;--c-green-69:#3fc46a;--c-green-73:#3fc46a;--c-green-75:#3fc46a;--c-red-12:#515357;--c-red-16:#515357;--c-red-16-2:#515357;--c-red-31:#d8372f;--c-red-74:#ff6b60;--c-red-77:#ff6b60;--c-red-80:#ff6b60;--c-red-85:#ff6b60;--c-gold-5:#2a2418;--c-gold-15:#515357;--c-gold-25:#efe3c7;--c-gold-75:#efe3c7;--c-gold-75-2:#c0c2c5;--c-gold-79:#c0c2c5;--c-orange-24:#515357;--t-btn:#e9e8e4;--t-btn-text:#1a1a1a;--t-btn-line:#b9b8b3;--t-accent-text:#ffffff;--t-prev-text:#ffffff;--t-live-text:#ffffff;--t-gold-text:#2a2418;--t-tile-text:#f3f3f1;--t-field:#e9e8e4;--t-field-text:#1a1a1a;--t-well:#141516;--t-well2:#1e1f21;--t-ok:#3fc46a;--t-brand-word:#f0b445}
body.th-linen{--bg:#e7e1d7;--panel:#efeae2;--panel2:#f7f3ed;--line:#cdc3b4;--text:#2b2722;--dim:#6e665c;--prev:#3f5aa8;--live:#b8432f;--prog:#2e7d4f;--tile:#d9d0c2;--accent:#3f5aa8;--brand:#3f5aa8;--brand2:#f7f3ed;--gold:#d4962a;--gold2:#d4962a;--navy:#e7e1d7;--warn:#d4962a;--bad:#b8432f;--c-grey-5:#d6cdbf;--c-grey-8:#efeae2;--c-grey-9:#efeae2;--c-grey-12:#efeae2;--c-grey-14:#f7f3ed;--c-grey-20:#cdc3b4;--c-grey-33:#cdc3b4;--c-grey-40:#9a8f80;--c-grey-47:#6e665c;--c-grey-82:#2b2722;--c-grey-94:#2b2722;--c-blue-15:#efeae2;--c-blue-16:#f7f3ed;--c-blue-18:#f7f3ed;--c-blue-25:#f7f3ed;--c-blue-25-2:#f7f3ed;--c-blue-75:#3f5aa8;--c-blue-78:#3f5aa8;--c-blue-81:#3f5aa8;--c-green-12:#efeae2;--c-green-13:#efeae2;--c-green-21:#f7f3ed;--c-green-25:#cdc3b4;--c-green-47:#2e7d4f;--c-green-47-2:#2e7d4f;--c-green-51:#2e7d4f;--c-green-69:#2e7d4f;--c-green-73:#2e7d4f;--c-green-75:#2e7d4f;--c-red-12:#efeae2;--c-red-16:#efeae2;--c-red-16-2:#efeae2;--c-red-31:#b8432f;--c-red-74:#b8432f;--c-red-77:#b8432f;--c-red-80:#b8432f;--c-red-85:#b8432f;--c-gold-5:#2b1d03;--c-gold-15:#efeae2;--c-gold-25:#d4962a;--c-gold-75:#d4962a;--c-gold-75-2:#6e665c;--c-gold-79:#6e665c;--c-orange-24:#efeae2;--t-btn:#f7f3ed;--t-btn-text:#2b2722;--t-btn-line:#cdc3b4;--t-accent-text:#ffffff;--t-prev-text:#ffffff;--t-live-text:#ffffff;--t-gold-text:#2b1d03;--t-tile-text:#2b2722;--t-field:#fbf9f5;--t-field-text:#2b2722;--t-well:#d6cdbf;--t-well2:#e2dacd;--t-ok:#2e7d4f;--t-brand-word:#b07818}
#callList .cdiag,#dlgCallIn .cdiag{color:var(--dim);font-size:11px}
#callList .craw,#dlgCallIn .craw{font:11px/1.45 ui-monospace,Menlo,Consolas,monospace;color:var(--text);opacity:.85;word-break:break-word}

/* rev52: buses, R, audio outputs, screen outputs */
.ch.aud{width:80px}
#mix{flex-direction:column;gap:6px;overflow:hidden}
#mix .mrow{display:flex;gap:8px;flex:1;min-height:0;overflow-x:auto;align-items:stretch;padding-left:22px;position:relative}
#mix .mrow>i{position:absolute;left:0;top:0;bottom:0;width:18px;writing-mode:vertical-rl;transform:rotate(180deg);font:700 10px/18px system-ui,sans-serif;letter-spacing:.12em;text-align:center;color:var(--dim);background:var(--t-well2,var(--c-grey-8));border-radius:2px;font-style:normal}
#mix .mrow>.hint{align-self:center;padding:0 8px}
#mix .ch .fv{min-height:60px}
.ch .bus{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;width:100%}
.ch .bus b,.ch b.rec{font:700 10px/16px system-ui,sans-serif;text-align:center;background:var(--t-btn,var(--c-grey-20));color:var(--dim);border:1px solid var(--t-btn-line,var(--line));border-radius:2px;cursor:pointer;user-select:none}
.ch .bus b.on{background:var(--accent);color:var(--t-accent-text,#fff)}
.ch b.rec{width:100%}
.ch b.rec.on{background:var(--live);color:var(--t-live-text,#fff)}
.ch.busch{background:var(--t-well2,var(--c-grey-8))}
.ch .dev{font-size:9.5px;color:var(--dim);width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch.recch .cn b{color:var(--dim)}
.ch.recch.recon .cn b{color:var(--live)}
#dockMix .dh{display:flex;align-items:center;gap:8px}
dialog.wide{max-width:96vw;width:min(820px,96vw)}
.otab{border-collapse:collapse;width:100%;margin-bottom:10px}
.otab td,.otab th{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;font-size:12.5px;vertical-align:middle}
.otab th{color:var(--dim);font-weight:600;font-size:11.5px}
.otab select{max-width:280px}
.otab .pill{display:inline-block;padding:1px 6px;border-radius:9px;font-size:11px;font-weight:700;background:var(--t-btn,var(--c-grey-20));color:var(--dim)}
.otab .pill.live{background:var(--live);color:var(--t-live-text,#fff)}
.otab .pill.prev{background:var(--prev);color:var(--t-prev-text,#fff)}
.otab label.cl{display:inline-flex;gap:4px;align-items:center;white-space:nowrap}
.rdot{display:inline-block;width:16px;text-align:center;font:700 10px/16px system-ui,sans-serif;border-radius:2px;background:var(--live);color:#fff}

/* rev52: T-bar float button bottom-left (opposite 🔊); docked = no title row, the middle column starts level with Preview / Program */
.tbar .tbw .fl{position:absolute;left:1px;bottom:3px;height:20px;width:22px;padding:0;font-size:11px;line-height:1;min-width:0}
.mid:not(.float) .tbar .tbh{display:none}
.mid:not(.float) .mbtn{padding-top:0}
.mid.float .tbh span::before{content:'⠿⠿⠿⠿';color:var(--dim);letter-spacing:2px}

/* rev52: Audio Mixer rows keep their own height (short faders) instead of filling the panel */
#mix{overflow-y:auto}
#mix .mrow{flex:0 0 auto;align-items:stretch}
#mix .ch .dev{margin-top:auto}   /* rev52hf02: same height in a row, labels at the bottom */
#mix .ch .fv{flex:0 0 var(--mix-fader);height:var(--mix-fader);min-height:0}

/* rev52hf03: AUDIO MIXER tab – the top fits the mixer (no gap above the PlayList) */
.side.mixfit{grid-template-rows:auto 5px minmax(0,1fr)}
.side.mixfit .sideh{cursor:default}
.side.mixfit #mix{height:auto}

/* rev52hf04: notice under ADVANCED INPUTS (no digital signature yet) */
.side.adv .signnote{max-width:236px;box-sizing:border-box;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--live);border-radius:6px;background:color-mix(in srgb,var(--live) 16%,transparent);color:var(--text);font-size:12.5px;line-height:1.45}
.side.adv .signnote b{display:block;color:var(--bad);margin-bottom:4px}

/* rev52hf05: camera buttons as wide as the group (like the other Add Input buttons) */
#addCams{display:flex;flex-direction:column}

/* rev53: input tabs, right-click menu */
.itabs{display:flex;align-items:flex-end;flex-wrap:wrap;gap:2px;padding:4px 6px 0;border-bottom:1px solid var(--line);margin-bottom:6px}
.itabs button{height:24px;padding:0 12px;font-size:12px;font-weight:700;letter-spacing:.4px;border-radius:5px 5px 0 0;border-bottom:0;background:var(--t-btn,var(--c-grey-20));color:var(--dim)}
.itabs button.cur{background:var(--accent);color:var(--t-accent-text,#fff)}
.itabs button.drop{outline:2px dashed var(--gold);outline-offset:-2px;color:var(--text)}
.itabs button .n{font-weight:400;opacity:.75;margin-left:5px}
.itabs .add{min-width:28px;padding:0 8px;font-size:15px;color:var(--gold)}
.tile.tabhide{display:none}
.cmenu{position:fixed;z-index:1000;background:var(--panel);border:1px solid var(--line);border-radius:5px;box-shadow:0 10px 30px #000a;display:flex;flex-direction:column;min-width:210px;padding:4px 0;font-size:13px;user-select:none}
.cmenu .it{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;cursor:default;color:var(--text);white-space:nowrap}
.cmenu .it .k{margin-left:auto;padding-left:14px;color:var(--dim);font-size:11px}
.cmenu .it.hl{background:var(--accent);color:var(--t-accent-text,#fff)}
.cmenu .it.hl .k{color:inherit}
.cmenu .it.off{color:var(--dim);opacity:.6}
.cmenu hr{border:0;border-top:1px solid var(--line);margin:4px 0}
.cmenu .hd{padding:4px 12px 2px;font-size:10.5px;font-weight:800;letter-spacing:1px;color:var(--gold);white-space:nowrap}
.cmenu .chk{width:14px;text-align:center;color:var(--gold)}
.cmenu .it.hl .chk{color:inherit}

/* rev54: Settings → SHORTCUTS */
.sk{width:100%;border-collapse:collapse;font-size:12.5px}
.sk td{padding:3px 6px;border-bottom:1px solid var(--line)}
.sk td.g{color:var(--gold);font-weight:800;font-size:10.5px;letter-spacing:1px;padding-top:10px;border:0}
.sk td.b{text-align:right;white-space:nowrap;width:1%}
.sk kbd{display:inline-block;min-width:22px;text-align:center;padding:1px 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--t-btn,var(--c-grey-20));color:var(--t-btn-text,var(--text));font:600 11.5px system-ui,sans-serif}
.sk .none{color:var(--dim)}
.sk button{height:22px;padding:0 8px;font-size:11px}
.sk tr.rec td{background:color-mix(in srgb,var(--accent) 25%,transparent)}
.sk .clash{color:var(--bad);font-size:11px}

/* rev54hf01: PlayList off – the top of the side panel takes the full height */
.side.ploff,.side.ploff.mixfit{grid-template-rows:minmax(0,1fr) 0 0}
.side.ploff .sidebot,.side.ploff .sideh{display:none}

/* rev55: audio delay – ⚙ on each input strip, ⏱ label, the delay popup */
#mix .ch.aud{position:relative}
#mix .ch.aud .cn{padding-right:14px;box-sizing:border-box}
#mix .ch.aud .cg{position:absolute;right:3px;top:2px;font-size:11px;line-height:14px;cursor:pointer;color:var(--dim,#999)}
#mix .ch.aud .cg:hover{color:#fff}
#mix .ch.aud .cg.dis{opacity:.35;cursor:not-allowed}
#mix .ch.aud .dly{font-size:10px;line-height:12px;height:12px;color:#ffb347;text-align:center;white-space:nowrap}
.dlypop{position:fixed;z-index:200;width:300px;background:#2b2f36;color:#ddd;border:1px solid #555;border-radius:6px;padding:10px 12px;box-shadow:0 6px 24px #000a;font-size:13px}
.dlypop h4{margin:0 0 8px;font-size:12px;color:#aaa;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlypop .r{display:flex;gap:8px;align-items:center;margin:6px 0}
.dlypop input[type=number]{width:76px}
.dlypop .sl input{width:100%;margin:4px 0 0}
.dlypop .sc{position:relative;height:15px;font-size:11px;color:#aaa}
.dlypop .sc span{position:absolute;left:0}
.dlypop .sc b{position:absolute;left:75%;transform:translateX(-50%);color:#fff}
.dlypop .q button{padding:2px 7px}
.dlypop .hint{color:#999;font-size:12px;margin-top:8px;line-height:1.35}

/* rev56: GT title editor – live preview + data */
#dlgGt form.gtf{width:min(1300px,97vw)}
#dlgGt .gtwrap{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:14px;align-items:start}
@media (max-width:1100px){#dlgGt .gtwrap{grid-template-columns:1fr}}
#dlgGt .gtpv canvas{width:100%;aspect-ratio:16/9;display:block;border:1px solid var(--line,#555);background:#000}
#dlgGt .pb{display:flex;gap:6px;align-items:center;margin:6px 0;font-size:12px;color:var(--dim,#aaa)}
#dlgGt .pb button{padding:2px 8px}
#dlgGt .sp{flex:1}
#dlgGt h4{margin:10px 0 4px;font-size:12px;color:var(--dim,#aaa);letter-spacing:1px}
#dlgGt .gtside h4:first-child{margin-top:0}
#dlgGt .dsrow{display:flex;gap:6px;align-items:center;margin:4px 0}
#dlgGt .dsrow select{flex:1;min-width:0}
#dlgGt .dsrow.dl span{font-size:12px;color:var(--dim,#aaa);white-space:nowrap}
#dlgGt .dsrow.dl input{width:130px}
#dlgGt #gtDsUrl{width:100%;box-sizing:border-box;margin:2px 0}
#dlgGt .hint{font-size:12px}
#dlgGt .hint .ok{color:#5fd16f}
#dlgGt .bad{color:#ff8a65}
#gtFields .gr{display:grid;grid-template-columns:84px 110px minmax(0,1fr) 34px 26px;gap:6px;align-items:center;margin:5px 0}
#gtFields label,#gtPics label{font-size:12px;color:var(--dim,#aaa);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gtFields select,#gtPics select{font-size:12px;min-width:0}
#gtFields input[type=text]{min-width:0}
#gtFields input.dsv{color:#8fbfff}
#gtFields input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--line,#555);background:none}
#dlgGt .rs{padding:2px 5px;font-size:12px}
#gtFields .res,#gtPics .res{grid-column:3/6;font-size:12px;color:#8fd18f;margin-top:-3px}
#gtPics .res{grid-column:2/6}
#gtPics .res.bad{color:#ff8a65}
#gtPics .pr{display:grid;grid-template-columns:84px minmax(0,1fr) 92px auto 26px;gap:6px;align-items:center;margin:5px 0}
#gtData{margin-top:8px;border:1px solid var(--line,#444);border-radius:4px;font-size:12px}
#gtData .dsh{display:flex;gap:6px;align-items:center;padding:4px 6px;background:rgba(255,255,255,.06)}
#gtData .dsh button{padding:0 6px}
#gtData .tw{max-height:150px;overflow:auto}
#gtData table{width:100%;border-collapse:collapse}
#gtData th,#gtData td{text-align:left;padding:2px 6px;border-top:1px solid rgba(255,255,255,.08);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
#gtData th{color:var(--dim,#888);font-weight:normal;position:sticky;top:0;background:var(--panel,#2b2f36)}
#gtData tr[data-r]{cursor:pointer}
#gtData tr.cur td{background:#1f3b66;color:#fff}

/* rev56: GT window sized by its own width (container), so it fits inside Input Configuration next to the left menu */
#dlgGt form.gtf{container-type:inline-size}
#dlgIC #dlgGt h3{display:none}
#dlgGt .hint{display:block;line-height:1.4}
#dlgGt .pb{flex-wrap:wrap;row-gap:4px}
#dlgGt .pb button{white-space:nowrap}
#dlgGt .gtpv{position:sticky;top:0;z-index:1;background:var(--panel,#2b2f36)}
@container (max-width:1099px){
  #dlgGt .gtwrap{grid-template-columns:minmax(0,1fr) 400px;gap:12px}
  #gtFields .gr{grid-template-columns:72px minmax(0,1fr) 34px 26px;grid-template-areas:"lb src col rs" ". txt txt txt" ". res res res";row-gap:3px;margin:6px 0 8px}
  #gtFields .gr>label{grid-area:lb}
  #gtFields .gr>select{grid-area:src}
  #gtFields .gr>input[type=text]{grid-area:txt}
  #gtFields .gr>input[type=color]{grid-area:col}
  #gtFields .gr>.rs{grid-area:rs}
  #gtFields .gr>.res{grid-area:res;margin-top:0}
  #gtPics .pr{grid-template-columns:72px minmax(0,1fr) 96px auto 26px}
  #gtPics .res{grid-column:2/6}
  #dlgGt .dsrow.dl{flex-wrap:wrap}
  #dlgGt .dsrow.dl select{flex:1 1 150px}
  #dlgGt .dsrow.dl input{flex:1 1 110px;width:auto}
}
@container (max-width:780px){
  #dlgGt .gtwrap{grid-template-columns:1fr}
}

/* rev57: screen capture – ⚙ SCREEN (also fits inside Input Configuration), stopped tile, gold menu item; relay Unblock picture */
#dlgScrIn form{container-type:inline-size}
#dlgIC #dlgScrIn h3{display:none}
#dlgScrIn .scrw{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
@container (max-width:760px){#dlgScrIn .scrw{grid-template-columns:1fr}}
#dlgScrIn .pv canvas{width:100%;display:block;border:1px solid var(--line);background:#000}
#dlgScrIn .grp{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin:12px 0 6px}
#dlgScrIn .grp:first-child{margin-top:0}
#dlgScrIn .scri{display:grid;grid-template-columns:70px minmax(0,1fr);gap:5px 8px;font-size:13px;align-items:center}
#dlgScrIn .scri>span:nth-child(odd){color:var(--dim)}
#dlgScrIn .scri span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dlgScrIn .ok{color:#5fd16f}
#dlgScrIn .bad{color:#ff8a65}
#dlgScrIn .wide{width:100%;margin:12px 0 6px}
#dlgScrIn .hint{display:block;font-size:12px;line-height:1.4;color:var(--dim)}
#dlgScrIn .ck{display:flex;gap:8px;align-items:center;margin:6px 0;font-size:13px}
#dlgScrIn .ck.dis{opacity:.45;cursor:not-allowed}
#dlgScrIn .ck small{font-size:11px}
.tile .pic{position:relative}
.tile .scrmsg:empty{display:none}
.tile .scrmsg{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.72);color:#fff;font-size:12px;text-align:center;padding:6px}
.tile .scrmsg b{color:#ff8a65}
.cmenu .it.gold .lb{color:var(--gold,#f7bc24);font-weight:700}
.ubx{margin:6px 0 4px;border:1px solid #9a9a9a;background:#f0f0f0;color:#000;font:12px "Segoe UI",Arial,sans-serif;max-width:430px;border-radius:3px;overflow:hidden}
.ubx .pt{background:#fff;padding:4px 8px;border-bottom:1px solid #ddd}
.ubx .pr{display:grid;grid-template-columns:62px 1fr auto;gap:8px;padding:8px;align-items:start}
.ubx label{display:flex;gap:4px;align-items:center;white-space:nowrap;outline:2px solid #f7bc24;outline-offset:2px;padding:0 2px}
.ubx .cb{display:inline-grid;place-items:center;width:13px;height:13px;border:1px solid #333;background:#fff;font-size:10px;color:#0067c0}
.ubx .pb{display:flex;justify-content:flex-end;gap:6px;padding:0 8px 8px}
.ubx .pb span{border:1px solid #adadad;background:#e1e1e1;padding:2px 14px}
.ubx .pb .ok{border-color:#0067c0}

/* rev57hf01: links in the code-signing notices */
.signnote a{color:#ffd0c8;text-decoration:underline;white-space:nowrap}
.signnote .ub{font-weight:700}
.rwarn a{color:inherit;text-decoration:underline}
.rwarn p{margin:6px 0 0}

/* rev57hf02: How to unblock – pop-up guide */
#dlgUb{width:min(620px,94vw);padding:0}
#dlgUb form{width:auto}
#dlgUb .nh{display:flex;gap:12px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
#dlgUb .nh .ic{font-size:26px}
#dlgUb h3{margin:0}
#dlgUb .nh small{color:var(--dim)}
#dlgUb ol{margin:0;padding:14px 18px 4px 40px;font-size:14px}
#dlgUb li{margin:0 0 14px}
#dlgUb .pic{margin-top:6px}
#dlgUb .fx{display:flex;gap:16px;align-items:flex-start}
#dlgUb .zip{display:flex;flex-direction:column;align-items:center;gap:2px;font:12px "Segoe UI",Arial,sans-serif;color:var(--text,#ddd);width:110px;text-align:center}
#dlgUb .w11{font:12px "Segoe UI",Arial,sans-serif;color:#000;background:#f9f9f9;border:1px solid #c8c8c8;border-radius:6px;box-shadow:0 4px 14px #0004;display:inline-block}
#dlgUb .w11 .mi{padding:5px 14px 5px 10px}
#dlgUb .w11 .mi.hl{background:#e5f0fb;outline:2px solid #f7bc24;border-radius:4px}
#dlgUb .ubx .pb .ok{outline:2px solid #f7bc24}
#dlgUb .nf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--dim)}

/* rev59: Snapshot button + menu */
.snapb{display:inline-flex;margin-left:2px}
.snapb button:first-child{border-radius:4px 0 0 4px}
.snapb button:last-child{border-radius:0 4px 4px 0;padding:0 7px;border-left:1px solid #0006}
.snapm{position:fixed;z-index:70;width:330px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;padding:10px 12px;box-shadow:0 8px 26px #000b;font-size:13px}
.snapm[hidden]{display:none}
.snapm h4{margin:0 0 6px;font-size:11px;color:var(--gold);letter-spacing:1.2px}
.snapm label{display:flex;gap:8px;align-items:center;margin:5px 0}
.snapm label.ind{margin-left:24px}
.snapm label.dis{opacity:.45}
.snapm input[type=number]{width:52px}
.snapm hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.snapm .row{display:flex;gap:6px}
.snapm .row input{flex:1;min-width:0}
.snapm .row button[hidden]{display:none}
.snapm .hint{color:var(--dim);font-size:12px;line-height:1.4;margin-top:6px}

/* rev59hf01: branding row */
.snapm .row.ind,.snapm .hint.ind{margin-left:24px}
.snapm .row.ind span{font-size:13px;align-self:center}
.snapm .row.dis{opacity:.45}
.snapm .hint.ind{margin-top:2px}

/* rev60: shortcut table + Add shortcut */
#keysBody .kt{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#keysBody .kt input{flex:1;min-width:0}
#keysBody .kt .gold{font-weight:700}
#keysBody .kg{color:var(--dim);font-size:10.5px;margin-left:8px;letter-spacing:.5px}
#keysBody .kf{color:var(--dim);font-size:12px;margin-top:8px}
#dlgKeyAdd{width:min(640px,94vw);padding:0}
#dlgKeyAdd form{display:flex;flex-direction:column;max-height:84vh}
#dlgKeyAdd h3{margin:0;padding:12px 16px;border-bottom:1px solid var(--line)}
#dlgKeyAdd #keyAddQ{margin:10px 16px;box-sizing:border-box;width:calc(100% - 32px)}
#dlgKeyAdd .l{overflow:auto;padding:0 16px 10px;font-size:13px;min-height:120px;flex:1}
#dlgKeyAdd .g{color:var(--gold);font-size:10.5px;font-weight:700;letter-spacing:1.2px;margin:10px 0 4px}
#dlgKeyAdd .it{display:flex;justify-content:space-between;gap:10px;padding:5px 8px;border-radius:4px;cursor:pointer}
#dlgKeyAdd .it:hover{background:var(--c-grey-20,#333)}
#dlgKeyAdd .it.sel{background:var(--accent,#2f5fd6);color:#fff}
#dlgKeyAdd .it .k{color:var(--dim)} #dlgKeyAdd .it.sel .k{color:#fff}
#dlgKeyAdd .none{color:var(--dim);padding:10px 0}
#dlgKeyAdd .f{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;flex-wrap:wrap}
#dlgKeyAdd .press{border:2px dashed var(--gold);border-radius:6px;padding:6px 12px;color:var(--gold);font-weight:700}
#dlgKeyAdd .press.bad{border-color:var(--bad);color:var(--bad)}
#dlgKeyAdd .press[hidden]{display:none}