/* KRUTECH brand (graphics/brand/BRAND.md): Coal background, Smoke panels, Linen text, Amber accents.
   Fonts are bundled with the program (/brand/fonts) - the players work offline. */
@font-face{font-family:"Big Shoulders Display";font-weight:100 900;src:url("/brand/fonts/BigShouldersDisplay-Variable.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;src:url("/brand/fonts/IBMPlexSans-Regular.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;src:url("/brand/fonts/IBMPlexSans-SemiBold.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;src:url("/brand/fonts/IBMPlexMono-Medium.woff2") format("woff2")}
:root{--bg:#0F0907;--panel:#1C110C;--panel2:#251810;--line:#2A1A12;--fg:#F3E6D3;--mute:#A08A74;--acc:#E8892E;--live:#e61e28;--grn:#4fc982;
  --on-acc:#0F0907;--filament:#FFB45E;--gold:#F6D89A;--ember:#B4460C;--client:var(--acc);
  --mono:"IBM Plex Mono","DejaVu Sans Mono",ui-monospace,monospace;--display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --gradient:linear-gradient(100deg,#B4460C,#E8892E 55%,#F6D89A);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.45 "IBM Plex Sans","DejaVu Sans",system-ui,sans-serif}
a{color:var(--acc)}
.mute{color:var(--mute)}
.small{font-size:12px}
.logo{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:var(--fg)}
.logo img.mark{height:38px;width:auto;flex:none}
.logo img.word{height:22px;width:auto;flex:none}
.logo .desc{font:500 11px var(--mono);letter-spacing:.32em;color:var(--mute);text-transform:uppercase}
.client{display:inline-flex;align-items:center;gap:8px;padding-left:14px;margin-left:4px;border-left:1px solid var(--line);
  font:800 18px var(--display);letter-spacing:.02em;text-transform:uppercase;color:var(--fg);white-space:nowrap}
.client img{height:32px;width:auto;max-width:160px;object-fit:contain}
.client:empty{display:none}
button{background:var(--acc);color:var(--on-acc);border:0;border-radius:8px;padding:8px 14px;font:600 14px inherit;cursor:pointer}
button.ghost{background:var(--panel2);color:var(--fg);border:1px solid var(--line)}
button.danger{background:var(--live);color:#fff}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,.key:focus-visible,.tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
h2{font:500 12px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin:0 0 12px}
h3{font-size:14px;margin:16px 0 6px}
input,select,textarea{background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:7px 9px;width:100%;font:inherit}
input[type=checkbox]{width:20px;height:20px;accent-color:var(--acc)}
input[type=color]{padding:0;height:34px;width:56px}
input[type=range]{accent-color:var(--acc);padding:0}

.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:10px 18px;flex-wrap:wrap}
.ip{font:700 18px var(--mono);color:var(--acc)}
.pill{font:12px var(--mono);color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.ok{color:var(--grn);border-color:color-mix(in srgb,var(--grn) 40%,transparent)}
.pill.live{color:#fff;background:var(--live);border-color:var(--live);font-weight:700}
.pill.paused{color:var(--on-acc);background:var(--acc);border-color:var(--acc);font-weight:700}
.pill.idle{color:var(--fg);background:var(--panel2)}
.wrap{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 60px)}
nav{border-right:1px solid var(--line);padding:10px;display:flex;flex-direction:column;gap:2px}
nav button{background:none;color:var(--mute);text-align:left;border-radius:6px;padding:10px 12px;font-weight:500;display:flex;gap:10px;align-items:center}
nav button .k{font:11px var(--mono);color:var(--mute);margin-left:auto}
nav button.on{background:var(--panel2);color:var(--fg);box-shadow:inset 3px 0 0 var(--acc)}
main{padding:18px;max-width:1500px;min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px}
.f{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center;margin:8px 0;font-size:13px;color:var(--mute)}
.btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:6px 11px;font:600 12px inherit}
.seg button.on{background:var(--acc);color:var(--on-acc);border-color:var(--acc)}
.row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.grow{flex:1;min-width:0}
kbd{font:12px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 6px;background:var(--panel2);color:var(--fg)}
table{border-collapse:collapse;width:100%}td,th{padding:6px 8px;border-bottom:1px solid var(--line);font-size:13px;text-align:left}th{color:var(--mute);font-weight:500}
.toast{position:fixed;bottom:18px;right:18px;background:var(--panel2);border:1px solid var(--line);padding:10px 14px;border-radius:8px;z-index:20;display:none;max-width:420px}
.thumb{aspect-ratio:var(--ar,16/9);background:#000 center/contain no-repeat;max-height:340px;border-radius:8px;position:relative;overflow:hidden}
.thumb .badge{position:absolute;left:6px;bottom:6px;font:600 11px var(--mono);background:rgba(0,0,0,.75);padding:2px 6px;border-radius:4px}
.thumb .fkey{position:absolute;left:6px;top:6px;font:700 12px var(--mono);background:#000;color:var(--acc);padding:2px 7px;border-radius:4px}
.thumb .tag{position:absolute;right:0;top:0;font:800 12px var(--mono);background:var(--live);color:#fff;padding:4px 9px;border-bottom-left-radius:8px;letter-spacing:.08em}
.thumb .tag.paused{background:var(--acc);color:var(--on-acc)}
.thumb.empty{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#14171b 0 12px,#191c21 12px 24px);color:var(--mute);font-size:13px;text-align:center;padding:8px}

/* control tab */
.onair{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:18px;align-items:center}
.onair .thumb{border:3px solid var(--live)}
.onair.paused .thumb{border-color:var(--acc)}
.onair.off .thumb{border-color:var(--line)}
.bigname{font-size:26px;font-weight:700;margin:2px 0 4px}
.bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;background:var(--live);width:0}
.bar.acc i{background:var(--acc)}
.transport{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.transport button{min-width:96px;padding:12px 14px;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tilew,200px),1fr));gap:12px}
.tile{background:var(--panel2);border:2px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;text-align:left;color:var(--fg);font:inherit;display:block;width:100%}
.tile:hover{border-color:#4a515c}
.tile.live{border-color:var(--live)}
.tile.paused{border-color:var(--acc)}
.tile .nm{font-weight:700;margin:8px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .sub{font-size:12px;color:var(--mute);margin:0 2px 2px}
.volrow{display:flex;gap:10px;align-items:center;margin-top:12px;max-width:520px}
.volrow output{font:13px var(--mono);min-width:44px}

/* drag and drop */
.drop-ok{outline:3px dashed var(--acc)!important;outline-offset:3px}
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;color:var(--mute);transition:.1s}
.dropzone b{color:var(--fg);font-size:17px;display:block;margin-bottom:4px}
.dropzone.drop-ok{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent);outline:none!important}
[draggable=true]{cursor:grab}
.shelf{display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 170px);overflow:auto;padding-right:4px}
.chip{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px;font-size:13px;user-select:none}
.chip .thumb{width:84px;flex:none;border-radius:6px}
.chip .t{min-width:0}.chip .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.act{padding:8px 10px}
.chip.act .ic{width:30px;height:30px;border-radius:6px;background:#0c0d0f;display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);color:var(--acc);flex:none}
.split{display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start}
.split>.side{position:sticky;top:76px}
.deck-split{grid-template-columns:300px 1fr}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.scard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.scard.live{border-color:var(--live)}
.scard .head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.scard .head input{font-weight:700}
.scard .f{grid-template-columns:120px 1fr;margin:6px 0}

/* content list */
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.item{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px}
.item input{margin:8px 0 4px;font-weight:600}
.item .meta{font-size:12px;color:var(--mute);display:flex;flex-wrap:wrap;gap:4px 10px}
.item .st{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.item .st.failed{color:#ff8080}.item .st.ready{color:var(--grn)}
#uploads{position:fixed;left:18px;bottom:18px;z-index:15;display:flex;flex-direction:column;gap:6px;width:320px}
#uploads .up{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px}
#uploads .up .bar{margin-top:5px}

/* stream deck */
.deckbox{display:inline-block;background:#050506;border-radius:22px;padding:22px;border:1px solid #23262c;box-shadow:inset 0 2px 0 #1b1d22,0 10px 30px rgba(0,0,0,.4)}
.deckgrid{display:grid;gap:12px}
.key{width:var(--ks,96px);height:var(--ks,96px);border-radius:12px;overflow:hidden;background:#0b0b0c;border:2px solid #1c1e22;padding:0;display:block;position:relative}
.key img{width:100%;height:100%;display:block;pointer-events:none}
.key.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.key .no{position:absolute;right:4px;bottom:2px;font:10px var(--mono);color:#555;pointer-events:none}
.bin{border:2px dashed #5a2a2d;color:#ff9b9b;border-radius:10px;padding:10px;text-align:center;font-size:13px;margin-top:10px}
.palette{display:grid;grid-template-columns:1fr;gap:6px}
.palette .chip .thumb{width:64px}

/* screen shape */
.shape-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:10px}
.shape-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel2);color:var(--fg);border:2px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center}
.shape-opt span:last-child{font-size:12px;color:var(--mute);font-weight:400}
.shape-opt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--panel2))}
.shape-ic{display:block;border:2px solid var(--acc);border-radius:3px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--acc) 25%,transparent) 0 4px,transparent 4px 8px);flex:none}
.shape-warn{color:#ffb347;font-size:12px;white-space:nowrap}
.setup-card{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 6%,var(--panel))}
.pair{font:800 30px var(--mono);letter-spacing:.12em;border:2px solid var(--acc);border-radius:10px;padding:4px 14px;margin-top:4px}

/* playlists on a screen */
.plist{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.pentry{display:grid;grid-template-columns:auto 72px minmax(0,1fr) auto auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 6px;font-size:13px}
.pentry .thumb{border-radius:4px}
.pentry .t{min-width:0}.pentry .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pentry .grip{color:var(--mute);cursor:grab;font-size:12px;letter-spacing:-2px}
.pentry .secs{display:flex;align-items:center;gap:3px;font-size:12px;color:var(--mute)}
.pentry .secs input{width:62px;padding:4px 6px}
.pentry .x{padding:2px 9px;font-size:16px;line-height:1}
.padd{border:1.5px dashed var(--line);border-radius:8px;padding:9px;text-align:center;color:var(--mute);font-size:12px}
.padd.drop-ok{outline:none!important;border-color:var(--acc);color:var(--fg)}

/* 7-day schedule */
.wk-scroll{max-height:68vh;overflow:auto;position:relative;--axis:58px}
.wk-head{display:grid;grid-template-columns:var(--axis) repeat(7,minmax(110px,1fr));position:sticky;top:0;z-index:4;background:var(--panel);border-bottom:1px solid var(--line);min-width:calc(var(--axis) + 770px)}
.wk-day{padding:9px 8px;font:700 13px inherit;border-left:1px solid var(--line)}
.wk-day span{color:var(--mute);font-weight:400}
.wk-day.today{color:var(--acc)}
.wk-body{display:grid;grid-template-columns:var(--axis) repeat(7,minmax(110px,1fr));min-width:calc(var(--axis) + 770px);position:relative}
.wk-axis{position:relative;border-right:1px solid var(--line)}
.wk-hour{position:absolute;left:0;right:6px;text-align:right;font:11px var(--mono);color:var(--mute);transform:translateY(-1px);font-variant-numeric:tabular-nums}
.wk-col{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px);cursor:copy}
.wk-col.today{background-color:color-mix(in srgb,var(--acc) 4%,transparent)}
.wk-col.drop-ok{outline:2px dashed var(--acc)!important;outline-offset:-2px}
.wk-now{position:absolute;left:0;right:0;height:2px;background:var(--live);z-index:3;pointer-events:none}
.wk-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--live)}
.wk-block{position:absolute;left:3px;right:3px;border-radius:7px;background:color-mix(in srgb,var(--c) 78%,#000);border:1px solid color-mix(in srgb,var(--c) 60%,#fff 10%);
  color:#fff;overflow:hidden;cursor:grab;z-index:2;touch-action:none;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.wk-block:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.wk-block.sel{box-shadow:0 0 0 2px var(--acc)}
.wk-block.dragging{opacity:.85;z-index:5;cursor:grabbing}
.wk-block.clash{background:#5a1418;border-color:var(--live)}
.wk-b-in{padding:4px 7px;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;pointer-events:none}
.wk-b-in b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.wk-b-in span{opacity:.85;font:11px var(--mono);font-variant-numeric:tabular-nums}
.wk-b-in .k{font-family:inherit;opacity:.7}
.wk-b-pic{display:block;height:28px;width:50px;border-radius:3px;background:#000 center/cover;margin-bottom:3px;flex:none}
.wk-block.tiny .wk-b-in{flex-direction:row;gap:6px;padding:1px 6px}
.wk-block.tiny .wk-b-in span{display:none}
.wk-grab{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.wk-grab::after{content:"";position:absolute;left:50%;bottom:3px;width:22px;height:2px;margin-left:-11px;border-radius:2px;background:rgba(255,255,255,.7)}
.wk-tip{position:fixed;z-index:50;display:none;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font:12px var(--mono);pointer-events:none;color:var(--fg)}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 18px}
.bk-grid input[type=time]{width:auto}

@media (max-width:600px){.logo{font-size:13px;letter-spacing:.08em;white-space:normal}.ip{font-size:15px}}
@media (max-width:900px){.wrap{grid-template-columns:1fr}nav{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}nav button{white-space:nowrap}nav button .k{display:none}
  .split,.onair{grid-template-columns:1fr}.split>.side{position:static}.shelf{max-height:260px}.f{grid-template-columns:1fr}.scard .f{grid-template-columns:1fr}
  .key{--ks:62px!important}.deckbox{padding:12px}.deckgrid{gap:8px}}

/* KRUTECH MEDIA SERVER */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.pcard{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.pcard.sel{border-color:var(--acc)}
.pcard.off .shot{filter:grayscale(1) brightness(.6)}
.pcard .btns{gap:5px}.pcard .btns button{padding:5px 8px;font-size:12px}.pcard select{padding:5px 6px;font-size:12px}
.shot{background-color:#000;background-size:contain;background-position:center;max-height:300px;width:100%}
.phead{display:flex;align-items:center;gap:8px;min-width:0}
.phead b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#5b616b;flex:none}
.dot.on{background:var(--grn);box-shadow:0 0 6px var(--grn)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip-s{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 10px;font-size:12px}
.chip-s .x,.gcard .x{padding:1px 7px;font-size:13px}
.chip .dot{margin-left:4px}
.gcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.gcard{display:flex;flex-direction:column;gap:10px;margin:0}
.gcard.drop-ok{outline:3px dashed var(--acc)!important}
.pair{font:800 22px var(--mono);letter-spacing:.14em;color:var(--fg);background:var(--bg);border:2px solid var(--acc);border-radius:8px;padding:2px 10px;display:inline-block}
.padd{border:1.5px dashed var(--line);border-radius:8px;padding:9px;text-align:center;color:var(--mute);font-size:12px}
.top form{margin:0}

@media (max-width:900px){.wrap{min-height:0;grid-template-rows:auto 1fr;align-content:start}nav{align-items:center}}

/* ---- 7-day week grid (same as the player's) */
.wk-scroll{max-height:68vh;overflow:auto;position:relative;--axis:58px}
.wk-head{display:grid;grid-template-columns:var(--axis) repeat(7,minmax(110px,1fr));position:sticky;top:0;z-index:4;background:var(--panel);border-bottom:1px solid var(--line);min-width:calc(var(--axis) + 770px)}
.wk-day{padding:9px 8px;font:700 13px inherit;border-left:1px solid var(--line)}
.wk-day span{color:var(--mute);font-weight:400}
.wk-day.today{color:var(--acc)}
.wk-body{display:grid;grid-template-columns:var(--axis) repeat(7,minmax(110px,1fr));min-width:calc(var(--axis) + 770px);position:relative}
.wk-axis{position:relative;border-right:1px solid var(--line)}
.wk-hour{position:absolute;left:0;right:6px;text-align:right;font:11px var(--mono);color:var(--mute);transform:translateY(-1px);font-variant-numeric:tabular-nums}
.wk-col{position:relative;border-left:1px solid var(--line);background-image:linear-gradient(to bottom,var(--line) 1px,transparent 1px);cursor:copy}
.wk-col.today{background-color:color-mix(in srgb,var(--acc) 4%,transparent)}
.wk-col.drop-ok{outline:2px dashed var(--acc)!important;outline-offset:-2px}
.wk-now{position:absolute;left:0;right:0;height:2px;background:var(--live);z-index:3;pointer-events:none}
.wk-now::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--live)}
.wk-block{position:absolute;left:3px;right:3px;border-radius:7px;background:color-mix(in srgb,var(--c) 78%,#000);border:1px solid color-mix(in srgb,var(--c) 60%,#fff 10%);
  color:#fff;overflow:hidden;cursor:grab;z-index:2;touch-action:none;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.wk-block:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.wk-block.sel{box-shadow:0 0 0 2px var(--acc)}
.wk-block.dragging{opacity:.85;z-index:5;cursor:grabbing}
.wk-block.clash{background:#5a1418;border-color:var(--live)}
.wk-b-in{padding:4px 7px;display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.25;pointer-events:none}
.wk-b-in b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.wk-b-in span{opacity:.85;font:11px var(--mono);font-variant-numeric:tabular-nums}
.wk-b-in .k{font-family:inherit;opacity:.7}
.wk-b-pic{display:block;height:28px;width:50px;border-radius:3px;background:#000 center/cover;margin-bottom:3px;flex:none}
.wk-block.tiny .wk-b-in{flex-direction:row;gap:6px;padding:1px 6px}
.wk-block.tiny .wk-b-in span{display:none}
.wk-grab{position:absolute;left:0;right:0;bottom:0;height:9px;cursor:ns-resize;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.wk-grab::after{content:"";position:absolute;left:50%;bottom:3px;width:22px;height:2px;margin-left:-11px;border-radius:2px;background:rgba(255,255,255,.7)}
.wk-tip{position:fixed;z-index:50;display:none;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font:12px var(--mono);pointer-events:none;color:var(--fg)}
.wk-block .sdot{position:absolute;top:5px;right:5px;z-index:3;pointer-events:auto;cursor:help;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.wk-block.tiny .sdot{top:50%;margin-top:-5px}
.wk-block .wk-b-in{padding-right:20px}
/* ---- sync dots: green on every player, amber on its way, red problem, grey no players */
.sdot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;background:#5b616b;flex:none}
.sdot.big{width:14px;height:14px}
.sdot.green{background:var(--grn);box-shadow:0 0 6px color-mix(in srgb,var(--grn) 70%,transparent)}
.sdot.amber{background:#f2a516;animation:sblink 1.4s ease-in-out infinite}
.sdot.red{background:var(--live)}
@keyframes sblink{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.sdot.amber{animation:none}}
.legend{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--mute)}
.srows{display:flex;flex-direction:column;gap:5px}
.warn{color:var(--acc)}
/* ---- content library */
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:26px 16px;text-align:center;display:flex;flex-direction:column;gap:6px;cursor:pointer}
.dropzone:hover,.dropzone.drop-ok{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 5%,transparent)}
.up{margin-top:10px}.up .bar{height:6px;background:var(--bg);border-radius:4px;overflow:hidden;margin-top:4px}
.up .bar i{display:block;height:100%;background:var(--acc);transition:width .2s}
.up.bad .bar i{background:var(--live)}.up.bad .mute{color:var(--live)}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.ccard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cthumb{position:relative;width:100%;max-height:200px;margin:0 auto;border-radius:6px;background:#000 center/contain no-repeat}
.cthumb.sm{width:64px;max-height:64px;flex:none;background-size:cover}
.cthumb .len{position:absolute;right:4px;bottom:4px;background:rgba(0,0,0,.75);font:11px var(--mono);padding:1px 5px;border-radius:4px}
.cthumb.sm .len{display:none}
.plist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.prow{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.prow .t{display:flex;flex-direction:column}.prow .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prow .x{padding:2px 8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.shelf.tall{min-height:120px;max-height:360px}
.shelf .chip .x{margin-left:auto;padding:3px 9px;font-size:12px;white-space:nowrap}
.shelf.drop-ok{outline:2px dashed var(--acc);outline-offset:3px;border-radius:8px}
@media (max-width:760px){.two{grid-template-columns:1fr}.cgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}}
.cthumb.sm{width:64px;height:40px;max-height:none;aspect-ratio:auto!important;margin:0;background-size:contain;background-color:#000}
@media (max-width:760px){.shelf.tall{min-height:56px}}

.logo .ver{font:700 11px var(--mono);letter-spacing:.06em;color:var(--mute);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:2px}

/* emergency */
.emer-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:#5a1418;border:1px solid var(--live);border-radius:12px;padding:12px 16px;margin-bottom:16px;color:#fff}
.emer-bar b{letter-spacing:.1em;animation:emblink 1s steps(2,start) infinite}
@keyframes emblink{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.emer-bar b{animation:none}}
.emer-on{display:inline-block;background:#5a1418;border:1px solid var(--live);border-radius:8px;padding:4px 10px;color:#fff;margin:6px 0}
.card.emer,.gcard.emer{border-color:var(--live);box-shadow:0 0 0 1px var(--live)}
.emcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:12px}
.emcol{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.emcol h3{margin:0 0 4px;font-size:13px}
@media (max-width:900px){.emcols{grid-template-columns:1fr}}

.em-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.em-states .em-state{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#7d1016;color:#fff;border:1px solid #b51c24;padding:10px 12px;min-height:56px}
.em-states .em-state span{font:600 11px var(--mono);opacity:.75;letter-spacing:.05em;text-transform:uppercase}
.em-states .em-state.live{background:#e61e28;border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.em-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin-bottom:10px}
.em-names label{display:flex;gap:6px;align-items:center}
select.em-pick{background:#7d1016;color:#fff;border-color:#b51c24;font-weight:600}

/* Stream Deck layouts */
.deckbox{display:inline-block;background:#0b0c0e;border:1px solid var(--line);border-radius:18px;padding:16px}
.deckgrid{display:grid;gap:10px}
.dkey{position:relative;width:88px;height:88px;padding:0;border-radius:10px;overflow:hidden;background:#000;border:2px solid #23272e}
.dkey img{width:100%;height:100%;display:block}
.dkey.sel{border-color:var(--acc)}
.dkey.locked{opacity:.85;border-style:dashed}
.dkey.drop-ok{outline:2px dashed var(--acc)}
.dkey .no{position:absolute;right:4px;bottom:2px;font:10px var(--mono);color:#666}
.dk-mini{display:grid;gap:3px;background:#0b0c0e;border-radius:8px;padding:6px;margin-bottom:8px}
.dk-mini img{width:100%;aspect-ratio:1;border-radius:4px;display:block}
.chip.act .ic{width:30px;height:30px;border-radius:6px;background:#0c0d0f;display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);color:var(--acc);flex:none}
.chip.act.emer .ic{background:#7d1016;color:#fff}
.chip.act{padding:8px 10px}

.prow .pair2{width:auto;max-width:170px;font-size:12px;padding:4px 6px}

.cthumb.live{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#16080a;border:1px solid #5a1a1e;color:#ff5a52;font:700 12px var(--mono);letter-spacing:.12em}
.cthumb.live small{color:var(--mute,#999);font-weight:400;letter-spacing:0}
.hours{display:flex;flex-direction:column;gap:6px;margin:4px 0 8px}
.hrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hrow input[type=time]{width:auto}
.draftbar{margin-top:8px;padding:8px 10px;border-radius:10px;border:1px solid var(--line)}
.draftbar.draft{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.draftbar input[type=datetime-local]{width:auto}
.prow.off{opacity:.55}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0}
.slot{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.slot kbd{font:700 12px var(--mono);color:var(--acc);border:1px solid var(--line);border-radius:5px;padding:4px 6px}
.brprev{position:relative;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;background:#0F0907 radial-gradient(ellipse at center,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%) center/cover;background-size:cover}
.brin{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;height:100%;justify-content:center}
.brin img{max-width:60%;max-height:45%;object-fit:contain}
.brin img.kt{max-width:40%;max-height:70%}
.brprev b{font:900 clamp(18px,4vw,40px) var(--display);text-transform:uppercase;color:var(--fg)}
.brprev .pw{position:absolute;right:3%;bottom:4%;display:flex;align-items:center;gap:6px;font:500 9px var(--mono);letter-spacing:.25em;color:var(--mute)}
.brprev .pw img{height:16px}.brprev .pw img+img{height:10px}
.brprev .bar{display:none}
.shape-box{display:inline-block;border:2px solid var(--acc);border-radius:2px;background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--acc) 25%,transparent) 0 4px,transparent 4px 8px);flex:none;vertical-align:middle}
.screen-pv{display:flex;align-items:center;gap:8px;margin-top:10px;min-height:20px}
.ndi-row{flex-wrap:wrap;gap:10px}
.ndi-ch{font:700 11px var(--mono);letter-spacing:.08em;color:var(--acc)}

/* v0.16 Banners page: the strip drawn like the players draw it (cards.banner) */
.bn-build{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.bn-screen{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 40%,#3a2617,#0F0907 70%);container-type:inline-size}
.bn-screen.small{width:220px;flex:none}
.bn-play{position:absolute;inset:0 0 11.1% 0;display:grid;place-items:center;color:var(--mute);font:500 3cqw var(--mono);letter-spacing:.2em;text-transform:uppercase}
.bn-strip{position:absolute;left:0;right:0;bottom:0;height:11.1%;display:flex;align-items:center;gap:2.2cqw;padding:0 2.5cqw;
  font:600 3.6cqw/1.1 "IBM Plex Sans",system-ui,sans-serif;overflow:hidden;white-space:nowrap}
.bn-strip img{height:70%;width:auto;max-width:30%;object-fit:contain}
.bn-strip .bn-text{overflow:hidden;text-overflow:ellipsis}
.bn-info{background:rgba(15,9,7,.93);color:#F3E6D3;box-shadow:inset 0 .55cqw 0 var(--acc)}
.bn-warning{background:rgba(232,137,46,.96);color:#0F0907}
.bn-alert{background:rgba(122,6,14,.97);color:#fff;box-shadow:inset 0 .55cqw 0 #fff}
.bn-sign{font-size:4.4cqw}
.bn-saved{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.bn-card{display:grid;gap:8px}.bn-card .bn-screen.small{width:100%}
@media (max-width:900px){.bn-build{grid-template-columns:1fr}}

/* v0.19: layers */
.lyr-row { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 6px; flex-wrap: wrap; }
.lyr-row + .lyr-row { border-top: 1px solid rgba(255,255,255,.06); }
.lyr-row .lp-dot { width: 10px; height: 10px; border-radius: 50%; background: #4a4038; flex: none; }
.lyr-row.showing { background: rgba(240,138,36,.10); }
.lyr-row.showing .lp-dot { background: #e63b2e; box-shadow: 0 0 6px #e63b2e; }
.lyr-row.covered .lp-dot { background: #8a6a3a; }
.lyr-row.off { opacity: .6; }

/* v0.19.2: tablets - no rubber-band bounce at the top or bottom of the page (it fought the live updates and the
   page jumped), and the clock / play time keep their width so their updates don't move anything */
html, body { overscroll-behavior-y: none; }
#clock, #onair-time { font-variant-numeric: tabular-nums; }
#clock { display: inline-block; min-width: 8.5ch; text-align: center; }

.prj-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prj { display: inline-flex; align-items: center; gap: 7px; background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 13px; font-family: inherit; }
.prj .n { font: 11px var(--mono); color: var(--mute); }
.prj.on { background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
.prj.on .n { color: inherit; opacity: .8; }
.prj.drop-ok { outline: 2px dashed var(--acc); outline-offset: 2px; }
.prj-date { font: 10px var(--mono); padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.08); }
.prj-date.soon { background: #8a3a1a; color: #ffd9c2; }
.prj-edit { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }

.prj-pick { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.prj-pick select { flex: 1; min-width: 0; width: auto; }
.prj-tag { display: inline-block; align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px var(--mono); color: var(--gold, #F6D89A); background: rgba(240,138,36,.12); border: 0; border-radius: 6px; padding: 2px 7px; margin: 3px 0; cursor: default; }
button.prj-tag { cursor: pointer; }

/* v0.19.5: Players page - toolbar, list view, maps */
.pv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.pv-tools select, .pv-tools input { width: auto; }
.plist2 { display: flex; flex-direction: column; gap: 4px; }
.prow2 { display: grid; grid-template-columns: 14px minmax(160px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(80px, .8fr) auto; gap: 10px; align-items: center;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.prow2.sel { border-color: var(--acc); }
.prow2.off { opacity: .6; }
.prow2 .pn { min-width: 0; display: flex; flex-direction: column; }
.prow2 .pn b, .prow2 .pn span, .prow2 .pc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow2 .pq button { padding: 4px 8px; font-size: 12px; }
.prow2.drop-ok, .pcard.drop-ok { outline: 2px dashed var(--acc); outline-offset: 2px; }
@media (max-width: 760px) { .prow2 { grid-template-columns: 14px 1fr auto; } .prow2 .pc { display: none; } }
.pdot2 { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--grn); flex: none; }
.pdot2.off { background: #5a4a3e; } .pdot2.emer { background: var(--live); box-shadow: 0 0 6px var(--live); } .pdot2.paused { background: #e0a030; } .pdot2.black { background: #222; border: 1px solid #888; }
.prow2.off .pdot2 { background: #5a4a3e; } .prow2.emer .pdot2 { background: var(--live); } .prow2.paused .pdot2 { background: #e0a030; } .prow2.black .pdot2 { background: #222; border: 1px solid #888; }
.map-tabs { margin-bottom: 10px; }
.map-tabs .n { font: 11px var(--mono); opacity: .7; }
.map-stage { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #0c0806; border: 1px solid var(--line); user-select: none; touch-action: none; }
.map-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.map-stage.arm { cursor: crosshair; outline: 2px dashed var(--acc); }
.pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; z-index: 2; }
.pin i { width: 18px; height: 18px; border-radius: 50%; background: var(--grn); border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pin.off i { background: #6a5a4e; } .pin.paused i { background: #e0a030; } .pin.black i { background: #111; }
.pin.emer i { background: var(--live); animation: pinpulse 1s infinite; }
@keyframes pinpulse { 50% { box-shadow: 0 0 0 8px rgba(230,30,40,.25); } }
.pin .pl { font: 600 11px var(--mono); color: #fff; background: rgba(0,0,0,.72); padding: 1px 6px; border-radius: 5px; white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pin.sel i { outline: 3px solid var(--acc); outline-offset: 2px; } .pin.sel .pl { background: var(--acc); color: var(--on-acc, #0F0907); }
.map-stage.edit .pin { cursor: grab; } .pin.moving { cursor: grabbing; z-index: 5; }
.pin-x { position: absolute; top: -9px; left: calc(50% + 5px); padding: 0 5px; font-size: 12px; line-height: 16px; border-radius: 50%; background: var(--live); color: #fff; }
.map-edit { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.map-todo { display: flex; flex-wrap: wrap; gap: 6px; }
.map-todo button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12px; }
.map-todo button.on { background: var(--acc); color: var(--on-acc, #0F0907); }
.map-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; } .map-key > span { display: inline-flex; align-items: center; gap: 5px; }
.map-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px dashed var(--line); border-radius: 10px; }

/* v0.19.6: the street map */
.geo-wrap { position: relative; }
.geo-stage { width: 100%; height: min(70vh, 640px); border-radius: 10px; border: 1px solid var(--line); background: #1a1410; }
.geo-stage.arm { cursor: crosshair; outline: 2px dashed var(--acc); }
.geo-pin .pin { position: absolute; }
.geo-pin .pin .pl { font-size: 11px; }
.pin.site i { border-radius: 4px; width: 20px; height: 20px; }
.geo-note { display: none; position: absolute; left: 56px; right: 10px; top: 10px; z-index: 500; background: rgba(15,9,7,.92); color: var(--fg); border: 1px solid var(--acc); border-radius: 8px; padding: 8px 12px; font-size: 13px; }
.geo-note.show { display: block; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; }

/* v0.19.6: the banner 7-day timer (bannerweek.js) */
.bw { display: flex; flex-direction: column; gap: 10px; }
.bw-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bw-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: grab; }
.bw-chip i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.bw-chip.on { outline: 2px solid var(--acc); background: rgba(240,138,36,.14); }
.bw-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.bw-grid { display: grid; grid-template-columns: 46px repeat(7, minmax(84px, 1fr)); min-width: 640px; position: relative; }
.bw-corner, .bw-dh { position: sticky; top: 0; background: var(--panel); border-bottom: 1px solid var(--line); padding: 6px 4px; font-size: 12px; text-align: center; font-weight: 600; z-index: 2; }
.bw-axis { grid-column: 1; grid-row: 2; position: relative; }
.bw-axis span { position: absolute; right: 6px; transform: translateY(-50%); font: 10px var(--mono); color: var(--mute); }
.bw-axis span:first-child { transform: none; }
.bw-col { grid-row: 2; position: relative; border-left: 1px solid var(--line); cursor: copy;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--h) * 2 - 1px), rgba(255,255,255,.06) calc(var(--h) * 2 - 1px), rgba(255,255,255,.06) calc(var(--h) * 2)); }
.bw-col.today { background-color: rgba(240,138,36,.05); }
.bw-col.drop-ok { background-color: rgba(240,138,36,.14); }
.bw-now { position: absolute; left: 0; right: 0; height: 2px; background: #e63b2e; z-index: 1; pointer-events: none; }
.bw-blk { position: absolute; left: 3px; right: 3px; border-radius: 6px; background: var(--c); color: #fff; padding: 2px 6px; font-size: 11px; line-height: 1.25; overflow: hidden; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 1; }
.bw-blk b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-blk span { opacity: .85; font-family: var(--mono); font-size: 10px; }
.bw-blk.sel { outline: 2px solid #fff; z-index: 3; }
.bw-blk.off { opacity: .45; background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.25) 6px 12px); }
.bw-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.bw-ed { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--acc); border-radius: 10px; }
.bw-ed input[type=time] { width: auto; }
.warn-box{background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:8px;padding:8px 12px}

/* v0.19.6: emergency sounds */
.em-snd { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.em-snd-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; }
.em-snd-row > b { width: 170px; }

/* v0.19.14: a Pi's read-out (pistats.js) */
.ps-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.ps-stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.ps-stat b{display:block;font:700 19px var(--mono);color:var(--fg)}
.ps-stat span{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ps-stat.bad b{color:var(--live)}.ps-stat.warn b{color:var(--acc)}
.ps-cores{display:flex;align-items:flex-end;gap:8px;margin-top:10px}
.ps-cores>span{align-self:center;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.ps-core{position:relative;width:42px;height:58px;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.ps-core i{position:absolute;left:0;right:0;bottom:0;background:color-mix(in srgb,var(--grn,#4fc982) 45%,transparent)}
.ps-core.warn i{background:color-mix(in srgb,var(--acc) 55%,transparent)}.ps-core.bad i{background:color-mix(in srgb,var(--live) 60%,transparent)}
.ps-core b,.ps-core small{position:relative;font:700 10px var(--mono);color:var(--fg)}.ps-core small{font-weight:500;color:var(--mute)}
.ps .warn-box,.ps .mute{margin-top:8px}

/* v0.19.17 diagnostics */
.selftest{width:100%;border-collapse:collapse;margin-top:8px}
.selftest td{padding:6px 8px;border-top:1px solid var(--line);vertical-align:top}
.selftest td.m{width:22px;font-weight:700;text-align:center}
.selftest tr.pass td.m{color:#3ccf7a}.selftest tr.warn td.m{color:var(--acc)}.selftest tr.fail td.m{color:#ff5a52}.selftest tr.skip{opacity:.6}
.selftest .fix{color:var(--acc);margin-top:3px}
.diag-log{max-height:360px;overflow:auto;background:#0b0705;border:1px solid var(--line);border-radius:8px;padding:10px;font:11px/1.45 var(--mono);white-space:pre-wrap;color:#d9cbb6}
.who{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.people{display:grid;gap:10px}
.pcard.dim{opacity:.6}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin:10px 0}
.room .cfgs{display:flex;flex-wrap:wrap;gap:6px}
.room button.cfg{background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:7px 11px;font-size:13px}
.room button.cfg.on{background:var(--acc);color:#111;border-color:var(--acc);font-weight:600;opacity:1}
.room .parts{display:flex;flex-direction:column;gap:4px}
.room .part{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.room .part b{flex:1}
.room details summary{cursor:pointer;color:var(--mute)}
.roomedit{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.roomedit h3{margin:10px 0 4px}
.entry{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--line)}