:root{--bg:#161512;--s1:#262421;--s2:#2f2c28;--line:#3a3733;--fg:#bababa;--hi:#fff;--mut:#8a867f;--aw:300px;--pw:280px;--evw:28px;--evgap:12px;--pbh:46px;--green:#629924;--lime:#d6f24a;--blue:#3692e7;--red:#cc3333}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{display:flex;background:var(--bg);color:var(--fg);font:14px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
body.page{display:block;height:auto;min-height:100%}
button,input,textarea{font:inherit;color:inherit}
input,textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 12px;outline:none;color:var(--fg)}
input:focus,textarea:focus{border-color:var(--green)}
.btn{background:var(--s1);border:1px solid var(--line);color:var(--hi);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:500;transition:background .15s,transform .05s}
.btn:hover{background:var(--s2)}.btn:active{transform:scale(.97)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.btn.danger{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn.sm{padding:5px 10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--mut)}
.pill.ok{color:var(--green);border-color:rgba(98,153,36,.5)}
.pill.warn{color:#e0a43a;border-color:rgba(224,164,58,.5)}

/* ---------- login popup ---------- */
body.locked>*:not(#lock){visibility:hidden}
#lock{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 30%,#2b2926,#161512 70%);display:flex;align-items:center;justify-content:center;padding:20px}
.lockbox{width:100%;max-width:340px;background:var(--s1);border:1px solid var(--line);border-radius:18px;padding:28px 24px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:12px}
.lockbox img{height:40px;margin:0 auto 4px}
.lockbox h2{margin:0;color:var(--hi);font-size:20px}
.lockbox p{margin:0;color:var(--mut);font-size:13px}
.lockbox input{text-align:center;font-size:20px;letter-spacing:.25em;padding:11px 12px}
.lockbox .btn{padding:11px}
.lockerr{min-height:18px;color:#ff6b6b;font-size:13px}
.lockbox.busy{opacity:.7;pointer-events:none}
.lockbox.shake{animation:shake .35s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* ---------- sidebar (index + admin) ---------- */
aside{width:var(--aw);flex:none;height:100%;display:flex;flex-direction:column;background:var(--s1);border-right:1px solid var(--line)}
.brand{padding:18px 18px 12px;display:flex;align-items:center;gap:10px}
.brand img{height:34px;min-width:0}
.live-pill{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:rgba(98,153,36,.14);padding:3px 9px;border-radius:99px;white-space:nowrap}
.tour{margin:0 14px 10px;padding:9px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line);min-width:0}
.tour small{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.tour b{display:block;color:var(--hi);font-size:15px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search{margin:0 14px 10px;position:relative}
.search input{width:100%;padding:9px 12px 9px 34px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);opacity:.5}
#list{flex:1;overflow:auto;padding:4px 10px 14px;display:flex;flex-direction:column;gap:6px}
#list::-webkit-scrollbar,.mvs::-webkit-scrollbar{width:8px;height:8px}
#list::-webkit-scrollbar-thumb,.mvs::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.bd{display:grid;grid-template-columns:34px 1fr auto;gap:1px 10px;align-items:center;padding:10px 12px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:background .15s}
.bd:hover{background:var(--s2)}
.bd.on{background:var(--s2);border-color:var(--line);box-shadow:inset 3px 0 0 var(--green)}
.bd .n{grid-row:span 3;font-size:15px;font-weight:700;color:var(--mut);text-align:center}
.bd.on .n{color:var(--hi)}
.pl{display:flex;align-items:center;gap:7px;min-width:0;grid-column:2}
.pl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hi)}
.pl small{color:var(--mut);margin-left:auto;font-variant-numeric:tabular-nums}
.dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25);display:inline-block}
.dot.w{background:#fff}.dot.b{background:#000}
.meta{grid-column:2;font-size:12px;color:var(--mut);display:flex;gap:8px;align-items:center}
.meta .lv{color:var(--green)}
.chip{font-size:11px;font-weight:600;padding:1px 7px;border-radius:99px;background:var(--bg);color:var(--fg);font-variant-numeric:tabular-nums}
.none{color:var(--mut);padding:14px;text-align:center}

/* round selector + sound button */
.roundbar{margin:0 14px 10px;display:flex;gap:8px;align-items:center}
.roundbar select{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--hi);font-weight:600;outline:none;cursor:pointer}
.roundbar select:focus{border-color:var(--green)}
.roundbar select option{background:var(--s1);color:var(--hi)}
.snd{margin-left:auto;background:var(--s1);border:1px solid var(--line);border-radius:8px;padding:2px 9px;cursor:pointer;font-size:14px;line-height:1.6}
.snd:hover{background:var(--s2)}
.sndhint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;background:var(--s1);border:1px solid var(--green);color:var(--hi);padding:8px 14px;border-radius:99px;font-size:13px;font-weight:600;box-shadow:0 8px 30px rgba(0,0,0,.5);pointer-events:none;white-space:nowrap;max-width:94vw}

/* admin setup box */
.setup{margin:0 14px 10px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 12px;max-height:55vh;overflow:auto}
.setup summary{cursor:pointer;color:var(--hi);font-weight:600;padding:4px 0}
.setup label{display:block;font-size:12px;color:var(--mut);margin:10px 0 4px}
.setup input[type=text],.setup input:not([type]){width:100%}
.setup textarea{width:100%;height:90px;resize:vertical;font:12px/1.5 ui-monospace,monospace}
.setup .rr{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px;color:var(--mut);font-size:13px}
.setup input[type=number]{width:70px}
.netrow{padding:0 18px 10px}

/* ---------- main viewer ---------- */
main{flex:1;min-width:0;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;padding:24px;
 --bs:clamp(280px,min(100vh - 205px,100vw - var(--aw) - var(--pw) - 48px - 40px - 40px - 20px),1100px)}
.empty{margin:auto;text-align:center;color:var(--mut);max-width:340px}
.empty img{height:44px;margin-bottom:12px}
.head{width:100%;max-width:calc(var(--bs) + var(--evw) + var(--evgap) + var(--pw) + 20px);display:flex;align-items:center;gap:12px;margin-bottom:14px;min-width:0}
.head h2{margin:0;font-size:20px;font-weight:700;color:var(--hi);letter-spacing:-.01em;white-space:nowrap}
.head .tn{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tag{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--s1);border:1px solid var(--line);white-space:nowrap}
.tag.live{color:var(--green);border-color:rgba(98,153,36,.5)}
.stage{display:flex;gap:20px;align-items:flex-start;justify-content:center}
.ev{width:var(--evw);height:var(--bs);border-radius:8px;background:#403d39;position:relative;overflow:hidden;flex:none}
.ev .f{position:absolute;left:0;right:0;bottom:0;background:#f4f4f4;transition:height .5s cubic-bezier(.2,.8,.2,1)}
.ev.fl .f{bottom:auto;top:0}
.ev b{position:absolute;left:0;right:0;text-align:center;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.brd{width:var(--bs);height:var(--bs);display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);flex:none;user-select:none}
.sq{position:relative;min-width:0;min-height:0}
.sq.l{background:#f0d9b5}.sq.d{background:#b58863}
.sq.hl::before{content:"";position:absolute;inset:0;background:rgba(155,199,0,.41)}
.sq img{position:absolute;inset:0;width:100%;height:100%}
.sq .gl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(var(--bs)/10);color:#000}
.co{position:absolute;font-size:calc(var(--bs)/52);font-weight:700;line-height:1;pointer-events:none}
.co.r{left:4%;top:4%}.co.f{right:5%;bottom:4%}
.l .co{color:#b58863}.d .co{color:#f0d9b5}
.panel{width:var(--pw);display:flex;flex-direction:column;gap:12px;flex:none;height:calc(var(--bs) + 2*var(--pbh))}
.pr{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.pr .av{width:38px;height:38px;border-radius:10px;background:var(--s2);display:flex;align-items:center;justify-content:center;flex:none}
.pr .info{flex:1;min-width:0}
.pr .nm{color:var(--hi);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr .sub{font-size:12px;color:var(--mut)}
.pr .sub em{font-style:normal;color:var(--green);font-weight:600;margin-left:6px}
.clk{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;background:var(--bg);color:var(--mut);padding:4px 12px;border-radius:10px;min-width:104px;text-align:center}
.clk.run{background:var(--green);color:#fff}
.clk.low{background:var(--red);color:#fff}
.mvs{flex:1;min-height:0;overflow:auto;background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:6px}
.row{display:grid;grid-template-columns:38px 1fr 1fr;align-items:center}
.row:nth-child(odd){background:rgba(255,255,255,.025)}
.row .no{color:var(--mut);text-align:center;font-size:12px}
.mv{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:8px;cursor:pointer;color:var(--hi);font-weight:500;min-height:30px}
.mv:hover{background:var(--s2)}
.mv.cur{background:var(--green);color:#fff}
.mv i{font-style:normal;font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.mv.cur i{color:rgba(255,255,255,.85)}
.ph{color:var(--mut);padding:18px;text-align:center}
.ctl{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:none}
.ctl button{background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:11px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .05s}
.ctl button:hover{background:var(--s2)}.ctl button:active{transform:scale(.96)}
.ctl button.live{background:var(--green);border-color:var(--green);color:#fff;font-weight:600}
.ctl svg{width:18px;height:18px;fill:currentColor}
.eng{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);padding:0 4px}
.eng b{color:var(--hi);font-size:15px;font-variant-numeric:tabular-nums}
.adm{width:100%;max-width:calc(var(--bs) + var(--evw) + var(--evgap) + var(--pw) + 20px);margin-top:16px;display:flex;flex-direction:column;gap:10px}
.adm .bar{display:flex;gap:8px;flex-wrap:wrap}
.adm summary{cursor:pointer;color:var(--mut);padding:4px 0}
.adm textarea{width:100%;height:120px;font:12px/1.5 ui-monospace,monospace;resize:vertical;margin-top:6px}

/* ---------- screenshare page ---------- */
.topbar{padding:14px 20px;border-bottom:1px solid var(--line);background:var(--s1);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.topbar .logo{height:32px}
.topbar .ttl{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.topbar .ttl b{color:var(--hi);font-size:16px}
.topbar .ttl small{color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.hint{padding:12px 20px;color:var(--mut);font-size:13px;max-width:980px}
.ssgrid{padding:0 20px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(400px,100%),1fr));gap:16px}
.ss-card{background:var(--s1);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ss-top{display:flex;gap:10px;align-items:center}
.ss-top b{color:var(--hi)}
.ss-top .st{color:var(--mut);font-size:12px;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ss-top .st.ok{color:var(--green)}
.ss-row{display:flex;gap:10px}
.ss-row video{width:50%;min-width:0;background:#000;border-radius:10px;aspect-ratio:9/16;max-height:220px;object-fit:contain}
.ss-row canvas{width:176px;height:176px;border-radius:8px;align-self:flex-start;max-width:48%}
.ss-ctl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ss-ctl label{color:var(--mut);font-size:13px}
.ss-ctl input[type=number]{width:64px;padding:4px 8px}
.sendbar{display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.sendst{font-size:13px;color:var(--mut)}
.sendst.on{color:var(--green);font-weight:600}
.ss-card textarea{width:100%;font:12px/1.5 ui-monospace,monospace;resize:vertical}

/* ---------- engine lines, best-move arrow, analysis ---------- */
.brd{position:relative}
.brd .arr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}
.sq img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.sq.sel::before{content:"";position:absolute;inset:0;background:rgba(20,85,30,.5)}
.sq.tg::after{content:"";position:absolute;left:50%;top:50%;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(20,85,30,.5);pointer-events:none;z-index:2}
.sq.tg.cap::after{width:94%;height:94%;background:transparent;border:calc(var(--bs)/45) solid rgba(20,85,30,.5)}
.lines{display:flex;flex-direction:column;gap:5px;flex:none}
.ln{display:flex;gap:8px;align-items:flex-start;background:var(--s1);border:1px solid var(--line);border-radius:10px;padding:6px 8px;min-height:32px}
.ln.wait{color:var(--mut);font-size:12px;align-items:center}
.ln .sc{flex:none;min-width:50px;text-align:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;padding:2px 6px;border-radius:6px;margin-top:1px}
.ln .sc.w{background:#f4f4f4;color:#222}
.ln .sc.k{background:#403d39;color:#eee}
.ln .pv{flex:1;min-width:0;font-size:12.5px;line-height:1.55;color:var(--fg);max-height:3.1em;overflow:hidden}
.ln .pv i{font-style:normal;cursor:pointer;margin-right:5px;white-space:nowrap;border-radius:4px}
.ln .pv i:first-child{color:var(--hi);font-weight:600}
.ln .pv i:hover{color:var(--lime);text-decoration:underline}
.livebar,.anabar{display:flex;align-items:center;gap:8px;border-radius:12px;padding:7px 10px;font-size:13px;flex:none;min-width:0}
.livebar{background:rgba(98,153,36,.14);border:1px solid rgba(98,153,36,.5)}
.livebar .ld{font-weight:700;color:var(--mut);white-space:nowrap}
.livebar .ld.on{color:var(--green)}
.livebar .lt{flex:1;min-width:0;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.livebar .nw{background:var(--lime);color:#222;border-radius:99px;padding:1px 8px;font-size:11px;white-space:nowrap;animation:pop .35s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.anabar{background:var(--bg);border:1px solid var(--blue)}
.anabar .atag{color:var(--blue);font-weight:700;white-space:nowrap}
.anabar .avar{flex:1;min-width:0;max-height:3.1em;overflow:hidden;line-height:1.55;color:var(--hi)}
.avar i{font-style:normal;cursor:pointer;padding:0 4px;border-radius:5px;margin-right:2px;white-space:nowrap}
.avar i:hover{background:var(--s2)}
.avar i.cur{background:var(--blue);color:#fff}
.promo{position:fixed;inset:0;z-index:99998;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.promobox{background:var(--s1);border:1px solid var(--line);border-radius:16px;padding:14px 16px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.promobox p{margin:0 0 10px;color:var(--hi);font-weight:600}
.promobox div{display:flex;gap:8px}
.promobox button{width:68px;height:68px;border-radius:12px;border:1px solid var(--line);background:#f0d9b5;cursor:pointer;padding:4px;font-size:44px;line-height:1}
.promobox button:hover{background:#b58863}
.promobox img{width:100%;height:100%;display:block}

/* ---------- board column: player bars with clocks, engine switch, lichess-style lines ---------- */
.bcol{display:flex;flex-direction:column;flex:none}
.brow{display:flex;gap:var(--evgap)}
.stage.eoff .ev{visibility:hidden}
.pbar{margin-left:calc(var(--evw) + var(--evgap));width:var(--bs);height:var(--pbh);display:flex;align-items:center;gap:10px;background:var(--s1);overflow:hidden;flex:none}
.pbar.top{border-radius:10px 10px 0 0}
.pbar.bot{border-radius:0 0 10px 10px}
.pbar .av{width:32px;height:32px;margin-left:10px;border-radius:6px;overflow:hidden;flex:none}
.pbar .av svg{display:block;width:100%;height:100%}
.pbar .info{flex:1;min-width:0}
.pbar .nm{color:#fff;font-weight:700;font-size:17px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar .tt{color:#e0a43a;font-weight:700}
.pbar .sub{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:6px;line-height:1.3}
.pbar .sub .dot{width:9px;height:9px}
.pbar .sub em{font-style:normal;color:var(--green);font-weight:700}
.pbar .rs{background:#4a4743;color:#fff;border-radius:99px;padding:2px 10px;font-weight:700;font-size:14px;flex:none}
.pbar .clk{align-self:stretch;display:flex;align-items:center;justify-content:center;border-radius:0;min-width:116px;padding:0 14px;font-size:26px;font-weight:500;background:transparent;color:#cfcfcf}
.pbar .clk.run{background:#2e4a6d;color:#fff}
.pbar .clk.low{background:var(--red);color:#fff}
.engrow{display:flex;align-items:center;gap:10px;background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:8px 12px;flex:none;min-width:0}
.engrow #engname{color:var(--hi);font-weight:600;white-space:nowrap}
.engrow #evtxt{color:var(--hi);font-size:15px;font-variant-numeric:tabular-nums}
.engrow #evd{flex:1;min-width:0;color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgl{width:42px;height:24px;border-radius:99px;border:1px solid var(--line);background:#403d39;position:relative;cursor:pointer;padding:0;flex:none;transition:background .15s}
.tgl i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#bbb;transition:transform .15s}
.tgl.on{background:var(--green);border-color:var(--green)}
.tgl.on i{transform:translateX(18px);background:#fff}
.lines{background:var(--s1);border:1px solid var(--line);border-radius:12px;padding:6px 10px;gap:2px}
.lines:empty{display:none}
.ln{background:transparent;border:0;border-radius:0;padding:3px 0;min-height:32px;align-items:center}
.ln.wait{padding:6px 0}
.ln .sc{min-width:58px;font-size:14px;padding:4px 8px;border-radius:5px;margin-top:0}
.ln .pv{max-height:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:#d8d8d8;line-height:1.5}
.ln .pv s{text-decoration:none;color:var(--mut)}
.ln .pv i:first-of-type{font-weight:600}
.ln.open{align-items:flex-start}
.ln.open .pv{white-space:normal}
.chev{background:none;border:0;color:var(--mut);cursor:pointer;font-size:11px;padding:6px;flex:none;border-radius:6px}
.chev:hover{background:var(--s2);color:var(--hi)}

/* compact right-hand column so the board gets the room */
.panel{gap:8px}
.engrow{padding:6px 10px;gap:8px}
.engrow #engname{font-size:13px}
.engrow #evtxt{font-size:14px}
.engrow #evd{font-size:11px}
.tgl{width:36px;height:20px}
.tgl i{width:14px;height:14px}
.tgl.on i{transform:translateX(16px)}
.snd{padding:0 7px;font-size:12px}
.lines{padding:3px 8px;border-radius:10px}
.ln{min-height:26px;padding:2px 0;gap:6px}
.ln .sc{min-width:46px;font-size:12px;padding:3px 5px}
.ln .pv{font-size:12px}
.chev{padding:4px;font-size:10px}
.mvs{font-size:13px;border-radius:10px}
.row{grid-template-columns:30px 1fr 1fr}
.mv{padding:3px 8px;min-height:26px}
.ctl{gap:6px}
.ctl button{padding:8px 0;border-radius:10px;font-size:13px}
.ctl svg{width:16px;height:16px}
.anabar{padding:5px 8px;font-size:12px;border-radius:10px}

/* ---------- all boards grid ---------- */
.allb{margin:0 14px 10px;width:calc(100% - 28px)}
.gridwrap{width:100%;max-width:1700px;display:flex;flex-direction:column;gap:14px}
.ghead{display:flex;align-items:center;gap:10px}
.ghead h2{margin:0;color:var(--hi);font-size:20px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.gt{background:var(--s1);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.gt:hover{border-color:var(--green)}
.gt.on{box-shadow:inset 0 0 0 1px var(--green)}
.gp{display:flex;align-items:center;gap:7px;padding:5px 10px;min-height:34px}
.gp .gn{flex:1;min-width:0;color:var(--hi);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp small{color:var(--mut);font-size:11px}
.gp .rs{background:#4a4743;color:#fff;border-radius:99px;padding:1px 8px;font-weight:700;font-size:12px}
.gc{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;color:#cfcfcf;padding:2px 8px;border-radius:6px;min-width:64px;text-align:center}
.gc.run{background:#2e4a6d;color:#fff}
.gc.low{background:var(--red);color:#fff}
.gt .brd{--bs:270px;width:100%;height:auto;aspect-ratio:1;border-radius:0;box-shadow:none;pointer-events:none}
.gt .co{display:none}
.gt .sq .gl{font-size:28px}
.gf{display:flex;gap:10px;align-items:center;padding:6px 10px;font-size:12px;color:var(--mut)}
.gf b{color:var(--hi)}
.gf .lv{color:var(--green)}
.gf .chip{margin-left:auto}
.netwarn{margin:0 14px 10px;font-size:12px;line-height:1.4;color:#e0a43a;background:rgba(224,164,58,.1);border:1px solid rgba(224,164,58,.4);border-radius:10px;padding:7px 10px}

/* ---------- tablets & phones ---------- */
@media(max-width:1100px){
 html,body{height:auto}
 body{flex-direction:column;min-height:100%}
 aside{width:100%;height:auto;border-right:0;border-bottom:1px solid var(--line)}
 #list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:2px 12px 12px;scroll-snap-type:x proximity}
 .bd{flex:0 0 240px;scroll-snap-align:start}
 .setup{max-height:none}
 main{height:auto;overflow:visible;padding:14px 12px 28px;--bs:min(100vw - 24px - 14px - 10px,680px)}
 .head{max-width:calc(var(--bs) + 24px)}
 .stage{flex-wrap:wrap;gap:10px}
 :root{--evw:14px;--evgap:10px}
 .ev{border-radius:6px}
 .ev b{display:none}
 .panel{width:calc(var(--bs) + 24px);height:auto}
 :root{--aw:100%}
 .mvs{flex:none;max-height:240px;min-height:120px}
 .adm{max-width:calc(var(--bs) + 24px)}
}
@media(max-width:560px){
 :root{--pbh:44px}
 .pbar .clk{font-size:22px;min-width:92px;padding:0 10px}
 .pbar .nm{font-size:16px}
 .brand{padding:12px 14px 8px}
 .brand img{height:28px}
 .bd{flex-basis:215px;padding:8px 10px}
 .head h2{font-size:17px}
 .pr{padding:8px 10px;gap:8px}
 .pr .av{width:32px;height:32px}
 .clk{font-size:20px;min-width:88px;padding:3px 8px}
 .ctl button{padding:13px 0}
 .row{grid-template-columns:30px 1fr 1fr}
 .topbar{padding:10px 14px}
 .topbar .tools{margin-left:0;width:100%}
 .topbar .tools .btn{flex:1 1 auto}
 .hint{padding:10px 14px}
 .ssgrid{padding:0 14px 20px}
 .ss-row{flex-direction:column}
 .ss-row video{width:100%;aspect-ratio:16/9;max-height:200px}
 .ss-row canvas{max-width:none;align-self:center}
}
.ewarn{font-size:11px;font-weight:600;color:#e0a43a;white-space:nowrap;cursor:help}