/* Layout: broadcast control desk. Header bar with tally-style status; Streams = rack of paths + selected path. */
:root{
  --bg:#0e1214; --panel:#151a1d; --panel2:#1b2125; --line:#263036; --fg:#e4e9eb; --muted:#8996a0;
  --accent:#f0ad2e; --accent-ink:#1a1204;
  --live:#2fbf74; --rec:#e5484d; --idle:#56636b;
  --display:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#eef1f1; --panel:#ffffff; --panel2:#f5f7f7; --line:#d7dde0; --fg:#141a1d; --muted:#5b6870;
  --accent:#b06f00; --accent-ink:#ffffff; --live:#16894f; --rec:#c8282e; --idle:#97a3aa; color-scheme:light } }
:root[data-theme="light"]{
  --bg:#eef1f1; --panel:#ffffff; --panel2:#f5f7f7; --line:#d7dde0; --fg:#141a1d; --muted:#5b6870;
  --accent:#b06f00; --accent-ink:#ffffff; --live:#16894f; --rec:#c8282e; --idle:#97a3aa; color-scheme:light }

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.45 var(--body);display:flex;flex-direction:column;min-height:100vh}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.label{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
[hidden]{display:none!important}
h1,h2{text-wrap:balance}
h2{margin:0;font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.02em}
.note{font-size:13px;color:var(--muted);margin:0;max-width:72ch}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:10px}

/* header */
header{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-bottom:1px solid var(--line);background:var(--panel)}
.brand{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.02em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.brand .ver{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:0;color:var(--muted);align-self:flex-end;margin-bottom:3px}
.brand i{width:10px;height:10px;border-radius:2px;background:var(--accent);display:inline-block}
.conn{display:flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font-size:13px;white-space:nowrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--idle);flex:none}
.dot.ok{background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 25%,transparent)}
.dot.bad{background:var(--rec)}
nav.views{display:flex;gap:2px;flex-wrap:wrap}
nav.views a{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:6px}
nav.views a:hover{color:var(--fg);background:var(--panel2)}
nav.views a[aria-current="page"]{color:var(--fg);background:var(--panel2);box-shadow:inset 0 -2px 0 var(--accent)}
.totals{display:flex;gap:18px;margin-left:auto;flex-wrap:wrap}
.totals div{display:flex;flex-direction:column;line-height:1.15}
.totals b{font-family:var(--mono);font-weight:500;font-size:15px;font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:8px}
.who a{text-decoration:none;color:var(--fg)}
.role{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}

.btn{border:1px solid var(--line);background:var(--panel2);padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--muted)}
.btn:focus-visible,input:focus-visible,select:focus-visible,.prow:focus-visible,nav.views a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn.danger{color:var(--rec)}
.btn.danger.armed{background:var(--rec);color:#fff;border-color:var(--rec)}
.btn.sm{padding:3px 9px;font-size:12.5px}
.btn[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=password],input[type=url],input[type=email],select{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:7px 10px;width:100%;min-width:0}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);margin:0}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.check{display:flex;gap:8px;align-items:center;cursor:pointer}

.banner{margin:12px max(16px,env(safe-area-inset-left,0px)) 0;padding:10px 14px;border:1px solid color-mix(in srgb,var(--rec) 55%,var(--line));background:color-mix(in srgb,var(--rec) 10%,var(--panel));border-radius:8px}
.notice{padding:12px 14px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 9%,var(--panel));border-radius:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.notice code{font-family:var(--mono);font-size:15px;background:var(--bg);padding:3px 8px;border-radius:4px;border:1px solid var(--line)}

main{flex:1;min-height:0;display:flex;flex-direction:column}
.page{padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:20px;width:100%;max-width:1180px}

/* streams */
.desk{flex:1;min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr)}
aside{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.aside-head{padding:12px 16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.addrow{display:flex;gap:6px}
.plist{overflow:auto;flex:1;padding:6px}
.prow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:9px 10px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.prow:hover{background:var(--panel2)}
.prow.sel{background:var(--panel2);border-color:var(--line);box-shadow:inset 3px 0 0 var(--accent)}
.prow .name{font-family:var(--mono);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .meta{grid-column:2/4;display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.prow .rate{font-family:var(--mono);font-size:12.5px;text-align:right;font-variant-numeric:tabular-nums}
.spark{width:64px;height:16px;flex:none}
.spark polyline{fill:none;stroke:var(--live);stroke-width:1.5}
.spark polygon{fill:color-mix(in srgb,var(--live) 18%,transparent)}
.tally{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;padding:1px 6px;border-radius:3px;border:1px solid var(--line);color:var(--muted)}
.tally.on.live{background:var(--live);border-color:var(--live);color:#fff}
.tally.on.rec{background:var(--rec);border-color:var(--rec);color:#fff}
.tally.on.rs{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

#detail{min-width:0;overflow:auto;display:flex;flex-direction:column}
.dhead{padding:16px 20px 0;display:flex;flex-direction:column;gap:10px}
.dtitle{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.dtitle h1{margin:0;font-family:var(--mono);font-weight:500;font-size:22px;word-break:break-all}
.tallies{display:flex;gap:6px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 14px;cursor:pointer;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.03em;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.dbody{padding:18px 20px 40px;display:flex;flex-direction:column;gap:22px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.stats div{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stats b{font-family:var(--mono);font-weight:500;font-size:16px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;padding:2px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel2)}
.urls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin-top:8px}
.urls code{font-family:var(--mono);font-size:12.5px;background:var(--panel2);border:1px solid var(--line);border-radius:5px;padding:4px 8px;overflow-x:auto;white-space:nowrap}
.switch{position:relative;width:42px;height:24px;flex:none;display:inline-block}
.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;inset:0;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:var(--line);transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--fg);transition:transform .15s}
.switch input:checked+span{background:var(--rec)}
.switch input:checked+span::after{transform:translateX(18px);background:#fff}
.switch input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled+span{opacity:.5}
.settingline{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.settingline:last-child{border-bottom:0}
.preview{aspect-ratio:16/9;max-width:100%;width:100%;max-height:70vh;border:1px solid var(--line);border-radius:8px;background:#000;overflow:hidden;display:grid;place-items:center;color:#9aa;text-align:center;padding:0}
.preview video{width:100%;height:100%;background:#000}
.destpick{display:flex;flex-direction:column;gap:6px}
.destpick label{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);cursor:pointer}
.destpick label:has(input:checked){border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.badge{font-size:12px;padding:2px 8px;border-radius:4px;border:1px solid var(--line);white-space:nowrap}
.badge.warn{border-color:var(--accent);color:var(--accent)}
.badge.ok{border-color:var(--live);color:var(--live)}
.nopath{flex:1;display:grid;place-items:center;color:var(--muted);padding:40px;text-align:center}

/* tables & forms */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:13px}
th{text-align:left;font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11.5px;color:var(--muted);padding:8px 12px;background:var(--panel2);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right}
th.num{text-align:right}
td.r{text-align:right}
td.wrap{white-space:normal;min-width:180px}
tr.day td{background:var(--panel2);font-family:var(--display);font-weight:600;letter-spacing:.04em}
tr.off td{opacity:.55}
.empty{padding:22px;text-align:center;color:var(--muted)}
.formcard{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.formcard .full{grid-column:1/-1}
td select{width:auto;padding:4px 8px}

.toasts{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:20}
.toast{background:var(--fg);color:var(--bg);padding:9px 14px;border-radius:7px;font-size:13.5px;max-width:min(380px,calc(100vw - 32px));box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.err{background:var(--rec);color:#fff}

/* sign-in */
.signin{flex:1;display:grid;place-items:center;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.signin form{width:min(380px,100%);display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px}
.signin .brand{font-size:24px}
.err{color:var(--rec);font-size:13.5px;margin:0}

@media (max-width:900px){
  .desk{grid-template-columns:minmax(0,1fr)}
  aside{border-right:0;border-bottom:1px solid var(--line);max-height:40vh}
  .totals{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

ul.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.checks li{display:flex;gap:10px;align-items:flex-start}
ul.checks .mark{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--muted)}
ul.checks li.ok .mark{background:var(--live,#2fa56a)}
ul.checks li.bad .mark{background:var(--rec)}
.dot.warn{background:#d9a21b}
#settingsForm .formcard{align-items:start}

.dash .dashbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:8px}.dash .dashbar h2{margin:0 auto 0 0}
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tile{border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:var(--panel,transparent)}
.tile:hover,.tile:focus-visible{border-color:var(--muted)}
.tile.offline{opacity:.65}
.tvid{aspect-ratio:16/9;background:#000;position:relative}
.tvid video{width:100%;height:100%;display:block;object-fit:contain}
.toff{position:absolute;inset:0;display:none;place-items:center;color:#8a949c;font-size:13px}
.tile.offline .toff{display:grid}
.tinfo{padding:8px 10px;display:grid;gap:4px}
.trow{display:flex;gap:8px;align-items:center}.tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px}
.folderdlg{border:1px solid var(--line);border-radius:10px;padding:16px;max-width:460px;width:92vw;background:var(--bg,#fff);color:inherit}
.folderlist{display:grid;gap:4px;max-height:50vh;overflow:auto;margin:8px 0}.folderlist .btn{text-align:left}
.flash{animation:flash 1.6s ease-out}@keyframes flash{from{outline:3px solid #d9a21b}to{outline:3px solid transparent}}

.ovprev{position:relative;width:min(100%,320px);aspect-ratio:16/9;background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:14px}
.ovprev video{width:100%;height:100%;display:block;object-fit:contain}
.ovprev.off video{visibility:hidden}
.ovmsg{position:absolute;inset:0;display:grid;place-items:center;color:#8a949c;font-size:13px;pointer-events:none}
.keepbox{border-color:#d9a21b}

.thealth{font-size:12px;line-height:1.35}.thealth strong{padding:0 6px;border-radius:3px;background:var(--live,#2fa56a);color:#fff;margin-right:4px}
.thealth.warn strong{background:#d9a21b}.thealth.bad strong{background:var(--rec)}.thealth span{color:var(--muted)}
.tinfo .spark{width:100%;height:22px}

.pvbar{display:flex;gap:8px;align-items:center;margin-top:8px}

/* v1.8 design update */
.chiprow{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;font-size:13px}
.chipbtn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600}
.chipbtn.warnchip{color:#c58a00}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{height:34px;padding:0 12px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--panel2);color:var(--fg);font-weight:600}
.tilegrid{grid-template-columns:repeat(auto-fill,minmax(var(--tile,300px),1fr))}
.dash:fullscreen{background:var(--bg);padding:20px;overflow:auto}
.warnbox b{color:#c58a00}
.plsearch{padding:0 12px 10px;display:flex;flex-direction:column;gap:8px}
.plsearch input{height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);width:100%}
.pnote{font-size:12px;color:#c58a00;margin-top:4px;line-height:1.35}
.ovtop{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;margin-bottom:14px}
.ovtop .ovprev{flex:1 1 380px;width:auto;max-width:560px;margin-bottom:0}
.ovside{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:12px}
.healthcard,.srtcard{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel);display:flex;flex-direction:column;gap:8px}
.healthcard .spark{width:100%;height:36px}
.srtgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
.srtgrid div{display:flex;flex-direction:column}.srtgrid b{font-family:var(--mono);font-weight:500}
.badtxt{color:var(--rec)}
.collapse{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.collhead{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border:0;background:transparent;cursor:pointer;color:inherit}
.collbody{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
.tabbar{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:4px}
.tabbar button{padding:10px 16px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font-size:14px}
.tabbar button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
.menubtn{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit;font-size:20px;cursor:pointer}
@media (max-width:760px){
  .menubtn{display:inline-block}
  header nav.views{display:none;width:100%;flex-direction:column}
  header.menuopen nav.views{display:flex}
  .totals{gap:12px}
  .who{margin-left:auto}
}
.collt{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:.02em}

.spark{pointer-events:auto;cursor:crosshair}
.sparktip{position:fixed;z-index:50;pointer-events:none;background:#16191c;color:#fff;border:1px solid #3a444c;border-radius:6px;padding:3px 8px;font:12px var(--mono);white-space:nowrap}

/* ===== v1.9 look: matches the approved designs (Inter, rounded cards, pill chips, filled nav) ===== */
:root{
  --bg:#0f1316; --panel:#171c21; --panel2:#1d242a; --line:#2a323a; --fg:#e8edf1; --muted:#9aa7b2;
  --accent:#f0a04b; --accent-ink:#1d1200; --live:#3ecf8e; --rec:#d6453d; --idle:#56636b;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#eef0f1; --panel:#ffffff; --panel2:#f3f5f6; --line:#dde1e4; --fg:#16191c; --muted:#5b6670;
  --accent:#b45309; --accent-ink:#ffffff; --live:#1a7f4b; --rec:#c0392b; --idle:#97a3aa } }
:root[data-theme="light"]{
  --bg:#eef0f1; --panel:#ffffff; --panel2:#f3f5f6; --line:#dde1e4; --fg:#16191c; --muted:#5b6670;
  --accent:#b45309; --accent-ink:#ffffff; --live:#1a7f4b; --rec:#c0392b; --idle:#97a3aa }
body{font:14px/1.5 var(--body)}
h2{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:0}
.label{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.08em}
header{padding:14px 28px;gap:12px 24px}
.brand{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:0}
.brand .ver{font-family:var(--mono);font-size:11px}
nav.views{gap:4px;flex-grow:1}
nav.views a{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:0;padding:8px 12px;border-radius:6px}
nav.views a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 16%,var(--panel2));color:var(--fg);font-weight:600;box-shadow:none}
.totals{margin-left:0;gap:8px;align-items:center}
.totals div{flex-direction:row-reverse;align-items:baseline;gap:6px;padding:6px 12px;border-radius:999px;background:var(--panel2);line-height:1.2}
.totals .label{font-family:var(--display);font-weight:400;font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted)}
.totals b{font-family:var(--display);font-weight:700;font-size:13px}
.totals .warnbox{background:color-mix(in srgb,#f2c14e 22%,var(--panel2))}
.totals .warnbox b,.totals .warnbox .label{color:#c58a00}
.btn{border-radius:8px;padding:7px 14px;background:var(--panel2)}
.btn.sm{border-radius:6px;padding:4px 10px}
input[type=text],input[type=password],input[type=url],input[type=email],input[type=number],input[type=search],select{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:9px 12px;color:inherit}
.formcard,.tablewrap,.collapse,.healthcard,.srtcard{border-radius:10px}
.formcard{padding:20px}
aside{background:var(--panel2)}
.aside-head{border-bottom:0;padding:16px 16px 4px}
.plist{padding:4px 12px 12px}
.prow{border-radius:8px;padding:10px 12px;margin-bottom:4px}
.prow.sel{background:color-mix(in srgb,var(--accent) 10%,var(--panel));border-color:var(--accent);box-shadow:none}
.prow .name{font-size:13px}
.tally{font-family:var(--display);font-size:11px;letter-spacing:.06em;border-radius:4px;padding:2px 8px}
.dhead{padding:24px 32px 0}
.dtitle h1{font-size:22px}
.tabs{gap:4px}
.tabs button{font-family:var(--display);font-weight:500;font-size:14px;letter-spacing:0;padding:10px 16px;border-bottom-width:3px}
.tabs button[aria-selected="true"]{font-weight:600}
.dbody{padding:20px 32px 48px;gap:20px}
.stats{gap:10px;background:none;border:0;border-radius:0;overflow:visible;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stats div{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stats b{font-family:var(--display);font-weight:600;font-size:15px}
.chip{border-radius:6px}
.urls code{border-radius:6px;padding:8px 10px}
.tile{border-radius:10px}
.tinfo{padding:10px 12px 12px;gap:6px}
.tname{font-size:14px}
.dash .dashbar h2{font-size:22px;font-weight:700}
.page{padding:28px;max-width:1280px}
.ovprev{border-radius:10px}
.collapse{background:var(--panel)}
.tabbar button{font-family:var(--display);font-weight:500}
.toast{border-radius:8px}
.tthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
.tthumb[hidden]{display:none}
.ovmode{position:absolute;right:8px;bottom:8px;z-index:3;background:color-mix(in srgb,#000 55%,transparent);backdrop-filter:blur(4px)}
.ovmode button{color:#fff;font-size:12px;padding:4px 8px}
.ovprev{position:relative}
/* audio meters beside each tile */
.tvwrap{display:flex;background:#000}
.tvwrap .tvid{flex:1;min-width:0}
.vu{flex:0 0 28px;display:flex;gap:3px;padding:4px 4px;background:#0a0d0f;border-left:1px solid var(--line)}
.vu[hidden]{display:none}
.vubar{position:relative;flex:1;border-radius:2px;overflow:hidden;background:#222}
.vubar b{position:absolute;inset:0;background:linear-gradient(to top,#2fbf71 0 70%,#e6c029 70% 90%,#e5493a 90%)}
.vubar s{position:absolute;inset:0;background:#15191c;transform-origin:top;transform:scaleY(1);will-change:transform;transition:transform 60ms linear}
.vubar u{position:absolute;inset:0;border-top:2px solid #fff;transform:translateY(100%);will-change:transform;transition:transform 150ms linear}
.vu.noaudio{opacity:.35}
/* connection details card (matches the designs) */
.sendcard .collhead{padding:14px 16px;border-bottom:1px solid var(--line)}
.sendcard .collt{font-weight:600;font-size:15px}
.sendcard:has(.collbody[hidden]) .collhead{border-bottom:0}
.sendcard .collbody{padding:14px 16px 16px;gap:12px}
.connrows{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:10px 12px;align-items:center}
.connrows code{font-family:var(--mono);font-size:13px;background:var(--panel2);border:0;border-radius:6px;padding:8px 10px;overflow-x:auto;white-space:nowrap}
.connrows .btn.sm{height:32px;padding:0 12px;border-radius:6px}
.connhint{margin:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{padding:6px 14px;border-radius:16px;border:0;background:var(--panel2);color:var(--fg);font-size:13px;cursor:pointer}
.pill[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 18%,var(--panel2));color:var(--fg);font-weight:600}
.pill.ghost[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--line)}
.pullbox{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.pullbox p{margin:0}
@media (max-width:640px){.connrows{grid-template-columns:minmax(0,1fr) auto}.connrows .label{grid-column:1/-1;margin-bottom:-6px}}

.ovprevwrap{display:flex;flex:1 1 380px;max-width:600px;background:#000;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-self:flex-start}
.ovtop .ovprevwrap .ovprev{flex:1;min-width:0;width:auto;max-width:none;border:0;border-radius:0;margin:0}
.ovprevwrap .vu{flex:0 0 28px}
.ovbody{display:flex;flex-direction:column;gap:20px}
.ovbody h2{margin:0}
.page.dash{max-width:none}
/* destination search / filters, and "used by another stream" notes */
.desttools{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-bottom:10px}
.desttools input[type=search]{flex:1 1 220px;min-width:0;width:auto}
.desttools select{flex:0 0 auto;width:auto}
.chip2{padding:6px 12px;border-radius:16px;border:1px solid var(--line);background:transparent;color:inherit;font-size:13px;cursor:pointer}
.chip2[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.alsouse{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.alsouse:empty{display:none}
.alsouse .busy{color:#c58a00;font-weight:600}
.alsouse a{color:inherit}
.destpick label[hidden],tr[hidden]{display:none}
#rsAddWrap .formcard{margin:0}
/* restream switches */
.destpick .drow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.destpick .drow:has(input[name=d]:checked){border-color:var(--live);box-shadow:inset 3px 0 0 var(--live)}
.destpick .drow[hidden]{display:none}
.switch.rs input:checked+span{background:var(--live)}
.scope{font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-left:6px;font-weight:400;white-space:nowrap}
/* "Offered on" path picker */
.pathpick{position:relative;display:inline-block;min-width:150px}
.pathpick summary{list-style:none;cursor:pointer;padding:6px 28px 6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);font-size:13px;white-space:nowrap;position:relative}
.pathpick summary::-webkit-details-marker{display:none}
.pathpick summary::after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.pathpick[open] summary{border-color:var(--accent)}
.pppop{position:fixed;z-index:50;min-width:260px;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);padding:10px;display:flex;flex-direction:column;gap:8px}
.pppop input[type=search]{width:100%}
.pplist{max-height:240px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.pplist label,.ppall{display:flex;gap:8px;align-items:center;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:13px}
.pplist label:hover,.ppall:hover{background:var(--panel2)}
.pplist label[hidden]{display:none}
.pplist input:disabled+span{opacity:.6}
.formcard .pathpick{display:block;max-width:360px}
/* loading spinner over previews */
.spin{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);z-index:4;opacity:0;pointer-events:none;transition:opacity .2s;animation:spin .8s linear infinite}
.loading .spin{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
/* overview preview + its tools underneath */
.ovpreview{flex:1 1 380px;max-width:600px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ovpreview .ovprevwrap{flex:none;max-width:none}
.ovtools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.ovtools .note{margin:0}
[data-act=vutoggle][aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
/* connections grouped by path */
.conntable tr.grpstart td{border-top:2px solid var(--line)}
.conntable tr.outrow td{background:color-mix(in srgb,var(--panel2) 60%,transparent)}
.conntable tr.outrow td:first-child{padding-left:22px}
.outarrow{color:var(--muted)}
.sorthead{background:none;border:0;padding:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
/* "Record all" switch */
.recall{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer}
.recall.on{color:var(--rec)}
.toast.sticky{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;max-width:460px}
/* Excel import / export */
.xplan{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.xplan ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px;max-height:320px;overflow:auto}
.xerr li{color:var(--rec)}
.xwarn{color:#c58a00;font-weight:600}
/* security check */
.seclist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.seclist li{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start}
.secicon{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--idle)}
.sec-ok .secicon{background:var(--live)} .sec-warn .secicon{background:#d29a17} .sec-bad .secicon{background:var(--rec)}
.sech{font-size:14px;margin:16px 0 6px}
.ports td{padding:6px 10px 6px 0}

/* =====================================================================================
   v1.15 "Signal" look. A broadcast gallery at night: deep slate surfaces, signal-cyan for
   anything you can act on, and real tally colours (green = live, red = recording, amber = check).
   The one loud thing is the multiview wall; everything around it stays quiet.
   ===================================================================================== */
:root{
  --bg:#0a1016; --panel:#101922; --panel2:#172330; --line:#223142; --line2:#2d4054; --fg:#e7eef6; --muted:#8ea0b3;
  --accent:#36d0f0; --accent-ink:#04141a; --live:#35d49a; --rec:#ff4f62; --warn:#f4b740; --idle:#5c6e80;
  --display:"Geist","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --body:var(--display);
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-lg:14px; --r-md:12px; --r-sm:8px;
  --glow:0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 24px -6px color-mix(in srgb,var(--accent) 55%,transparent);
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#edf1f5; --panel:#ffffff; --panel2:#f4f7fa; --line:#d6dee7; --line2:#c3cfdb; --fg:#0d1824; --muted:#566779;
  --accent:#0b7fb0; --accent-ink:#ffffff; --live:#0e8a5b; --rec:#d22a3c; --warn:#b57a00; --idle:#97a6b5; color-scheme:light } }
:root[data-theme="light"]{
  --bg:#edf1f5; --panel:#ffffff; --panel2:#f4f7fa; --line:#d6dee7; --line2:#c3cfdb; --fg:#0d1824; --muted:#566779;
  --accent:#0b7fb0; --accent-ink:#ffffff; --live:#0e8a5b; --rec:#d22a3c; --warn:#b57a00; --idle:#97a6b5; color-scheme:light }

body{font:14px/1.5 var(--body);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 500px at 85% -10%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),var(--bg);background-attachment:fixed}
::selection{background:color-mix(in srgb,var(--accent) 35%,transparent)}
a{color:var(--accent)}
.mono,code{font-family:var(--mono)}
/* labels: sentence case, quiet */
.label{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.015em}
h2{font-size:17px;font-weight:600}

/* page change: a short, calm fade */
#main.enter{animation:pagein .22s var(--ease)}
@keyframes pagein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* header: a thin glass bar */
header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);padding:12px 24px}
.brand{font-family:var(--display);font-size:16px;font-weight:650;letter-spacing:-.02em}
.brand i{width:12px;height:12px;border-radius:4px;background:conic-gradient(from 210deg,var(--accent),var(--live),var(--accent));box-shadow:0 0 12px -2px var(--accent)}
.conn{border-color:var(--line);background:var(--panel);font-size:12.5px}
nav.views{gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--panel);flex-grow:0}
nav.views a{font-family:var(--body);font-size:13.5px;font-weight:500;padding:6px 14px;border-radius:999px;color:var(--muted);transition:color .15s,background .2s var(--ease)}
nav.views a:hover{background:var(--panel2);color:var(--fg)}
nav.views a[aria-current="page"]{background:var(--fg);color:var(--bg);box-shadow:none;font-weight:600}
.totals{margin-left:auto}
.totals div{background:var(--panel);border:1px solid var(--line);padding:5px 11px}
.totals b{font-family:var(--mono);font-weight:600;font-size:13px;color:var(--fg)}
.totals .label{font-size:12.5px}
.role{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:11.5px;border-radius:999px;padding:1px 8px}

/* controls */
.btn{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 14px;font-weight:500;transition:border-color .15s,background .15s,transform .1s}
.btn:hover{border-color:var(--line2);background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px -8px var(--accent)}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn.sm{padding:4px 10px;border-radius:7px}
.btn:focus-visible,input:focus-visible,select:focus-visible,.prow:focus-visible,nav.views a:focus-visible,.tile:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input[type=email],input[type=text],input[type=password],input[type=url],input[type=number],input[type=search],select{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
input[type=text]:focus,input[type=password]:focus,input[type=url]:focus,input[type=number]:focus,input[type=search]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
input[type=checkbox]{accent-color:var(--accent)}
.seg{border-radius:999px;background:var(--panel);padding:3px;gap:2px;border-color:var(--line)}
.seg button{height:30px;border-radius:999px;padding:0 14px;transition:background .2s var(--ease),color .15s}
.seg button+button{border-left:0}
.seg button[aria-pressed="true"]{background:var(--panel2);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line2)}
.chipbtn,.chip2{border-radius:999px;transition:background .15s,border-color .15s,color .15s}
.chipbtn[aria-pressed="true"],.chip2[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.switch span{background:var(--line2)}
.switch span::after{box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .22s var(--ease)}
.switch.rs input:checked+span{background:var(--live);box-shadow:0 0 14px -3px var(--live)}
.switch input:checked+span{box-shadow:0 0 14px -3px var(--rec)}
.badge{border-radius:999px}
.badge.warn{border-color:var(--warn);color:var(--warn)}

/* surfaces: hierarchy by radius and elevation, not boxes everywhere */
.formcard,.tablewrap,.collapse,.healthcard,.srtcard{border-radius:var(--r-md);background:var(--panel);border-color:var(--line);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 4%,transparent)}
.stats div{border-radius:var(--r-md);background:var(--panel);border-color:var(--line)}
.stats b{font-family:var(--mono);font-weight:600;font-size:15px;letter-spacing:-.01em}
th{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
tbody tr{transition:background .12s}
tbody tr:hover{background:color-mix(in srgb,var(--panel2) 70%,transparent)}
.tabs button{font-family:var(--body);transition:color .15s,border-color .2s}
.tabs button[aria-selected="true"]{border-bottom-color:var(--accent)}
.tally{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.06em;border-radius:5px}
.tally.on.rs{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.toast{border-radius:var(--r-md);backdrop-filter:blur(12px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);animation:toastin .25s var(--ease)}
@keyframes toastin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* streams rack */
aside{background:color-mix(in srgb,var(--panel) 65%,transparent);border-right:1px solid var(--line)}
.prow{border-radius:var(--r-sm);border-color:transparent;transition:background .15s,border-color .15s}
.prow:hover{background:var(--panel2)}
.prow.sel{background:color-mix(in srgb,var(--accent) 9%,var(--panel));border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.prow .name{font-family:var(--mono);font-size:12.5px}
.dtitle h1{font-family:var(--mono);font-weight:600;letter-spacing:-.02em}

/* ---- the multiview wall: the one loud thing ---- */
.dash{background-image:linear-gradient(color-mix(in srgb,var(--line) 35%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--line) 35%,transparent) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
.dash .dashbar h2{font-size:24px;font-weight:650;letter-spacing:-.03em}
.tilegrid{gap:14px}
.tile{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--panel);box-shadow:0 1px 0 color-mix(in srgb,#fff 4%,transparent) inset,0 12px 30px -20px rgba(0,0,0,.7);transition:transform .25s var(--ease),border-color .2s,box-shadow .25s var(--ease)}
.tile:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 18px 40px -22px rgba(0,0,0,.8)}
/* tally strip across the top of each monitor */
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:5;background:var(--idle);opacity:.0;transition:opacity .3s,background .3s}
.tile.st-live::before{background:var(--live);opacity:1}
.tile.st-warn::before{background:var(--warn);opacity:1}
.tile.st-bad::before{background:var(--rec);opacity:1}
.tile.recording::before{background:linear-gradient(90deg,var(--rec) 0 36%,var(--live) 36%)}
.tile.st-warn{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 25%,transparent),0 14px 34px -20px color-mix(in srgb,var(--warn) 60%,transparent)}
.tile.st-bad{border-color:color-mix(in srgb,var(--rec) 60%,var(--line));animation:alarm 2.4s ease-in-out infinite}
@keyframes alarm{50%{box-shadow:0 0 0 1px color-mix(in srgb,var(--rec) 45%,transparent),0 0 30px -8px var(--rec)}}
.tile.offline{opacity:.55}
.tile.offline:hover{opacity:.8}
.tvid{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;overflow:hidden}
.tname{font-family:var(--mono);font-weight:600;font-size:13px;letter-spacing:-.01em}
.tmeta{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.tmeta span:first-child{color:var(--fg)}
.thealth strong{border-radius:5px;font-size:11px;padding:1px 7px}
.thealth.ok strong,.thealth strong{background:color-mix(in srgb,var(--live) 22%,transparent);color:var(--live)}
.thealth.warn strong{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}
.thealth.bad strong{background:color-mix(in srgb,var(--rec) 22%,transparent);color:var(--rec)}
.spark polyline{stroke:var(--live)}
.spark polygon{fill:color-mix(in srgb,var(--live) 14%,transparent)}
.st-warn .spark polyline{stroke:var(--warn)} .st-warn .spark polygon{fill:color-mix(in srgb,var(--warn) 14%,transparent)}
.st-bad .spark polyline{stroke:var(--rec)} .st-bad .spark polygon{fill:color-mix(in srgb,var(--rec) 14%,transparent)}
.dot.ok{box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent),0 0 10px var(--live)}
.spin{border-top-color:var(--accent)}
.vu{background:#060a0e}
.vubar b{background:linear-gradient(to top,#2bd48e 0 70%,#f4c430 70% 90%,#ff4f62 90%)}
.vubar s{background:#0d141b}

/* preview on a stream's Overview */
.ovprevwrap{border-radius:var(--r-lg);border-color:var(--line);box-shadow:0 18px 44px -26px rgba(0,0,0,.8)}
.sendcard .collt{font-family:var(--display)}
.connrows code{font-family:var(--mono)}
.pill{border-radius:999px;transition:background .15s}
.pill[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,var(--panel2));color:var(--fg)}
.destpick .drow{border-radius:var(--r-md);transition:border-color .2s,box-shadow .2s}
.recall.on{color:var(--rec)}
.pathpick summary{border-radius:var(--r-sm)}
.pppop{border-radius:var(--r-md);box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (max-width:760px){ header{padding:10px 16px} nav.views{border-radius:var(--r-md)} nav.views a{border-radius:var(--r-sm)} }
@media (max-width:760px){ .dashbar #dq{flex:1 1 100%;order:0} .dashbar .spacer{display:none} }

/* ===== path page, laid out like a channel desk: big stage on the left, a side panel with an icon rail on the right ===== */
@media (min-width:901px){ .desk{grid-template-columns:300px minmax(0,1fr)} }
.dhead{padding:18px 24px 0}
.pathview{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px) 72px;gap:16px;padding:16px 24px 28px;align-items:start}
.stagecol{display:flex;flex-direction:column;gap:12px;min-width:0}
.stage{position:relative;border-radius:var(--r-lg);background:#05080b;border:1px solid var(--line);overflow:hidden;min-height:260px;box-shadow:0 20px 50px -30px rgba(0,0,0,.8)}
.stage .ovprevwrap{border:0;border-radius:0;max-width:none;box-shadow:none}
.stage .ovprev{aspect-ratio:16/9}
.stageoff{aspect-ratio:16/9;display:grid;place-items:center;padding:24px;background:radial-gradient(600px 300px at 50% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),#070b0f;color:#e7eef6}
.connectcard{width:min(440px,100%);display:flex;flex-direction:column;gap:12px}
.connectcard h2{font-size:22px;text-align:center;color:#fff}
.connectcard>.note{text-align:center;color:#9fb0c1}
.connectcard .cfield span:first-child{color:#9fb0c1}
.connectcard .cbox{background:#111a23;border-color:#243344}
.connectcard .protos{background:#0d151d;border-color:#243344}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;font-size:13px;align-self:center;padding:4px}
.linkbtn:hover{text-decoration:underline}
/* protocol tabs and copy fields */
.protos{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.protos button{flex:1;height:32px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-weight:600;font-size:13px;cursor:pointer;transition:background .2s var(--ease),color .15s}
.protos button[aria-selected="true"]{background:color-mix(in srgb,var(--fg) 12%,transparent);color:inherit}
.connectcard .protos button[aria-selected="true"]{background:#1e2b38;color:#fff}
.cfield{display:flex;flex-direction:column;gap:5px;font-size:13px}
.cfield>span:first-child{color:var(--muted)}
.cbox{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel2);overflow:hidden}
.cbox code{flex:1;min-width:0;padding:9px 12px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{flex:none;width:40px;height:38px;display:grid;place-items:center;border:0;border-left:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}
.connectcard .iconbtn{border-left-color:#243344}
.iconbtn:hover{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.iconbtn svg,.rail svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stagebar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.stagebar .note{margin:0}
.stageinfo{display:flex;flex-direction:column;gap:10px}
.healthline{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(120px,240px);gap:10px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.healthline .why{font-size:13px;color:var(--muted)}
.healthline .spark{width:100%;height:28px}
.metrics{display:flex;flex-wrap:wrap;gap:6px 26px;padding:2px 2px}
.metrics div{display:flex;flex-direction:column;gap:1px;min-width:0}
.metrics span{font-size:12px;color:var(--muted)}
.metrics b{font-family:var(--mono);font-weight:600;font-size:13.5px}
.metrics.srt{padding:10px 14px;border:1px dashed var(--line);border-radius:var(--r-md)}
/* side panel */
.sidepanel{position:sticky;top:76px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);display:flex;flex-direction:column;max-height:calc(100vh - 100px);min-width:0}
.panelhead{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.panelhead h2{font-size:15px}
.panelbody{padding:12px 14px 16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.panelbody .note{font-size:12.5px}
.rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:4px;padding:6px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.rail button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font-size:11px;transition:background .15s,color .15s}
.rail button:hover{background:var(--panel2);color:var(--fg)}
.rail button[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--panel2));color:var(--accent)}
.pgroup{display:flex;flex-direction:column;gap:9px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pgroup:last-child{border-bottom:0;padding-bottom:0}
.pgroup h3{margin:0;font-size:13.5px;font-weight:600}
.kv{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.kv span{color:var(--muted)} .kv b{font-weight:500;text-align:right}
.plist2{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.plist2 li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 6px;border-bottom:1px solid var(--line)}
.plist2 li:last-child{border-bottom:0}
.small{font-size:12px}
.pempty{text-align:center;padding:20px 8px;display:flex;flex-direction:column;gap:6px}
.pempty p{margin:0}
/* destinations in the panel: name and status on the left, switch on the right */
.rsstatus{display:flex;align-items:center;gap:8px}
.addbtn{width:100%;justify-content:center;border-style:dashed}
.sidepanel .destpick{gap:0}
.sidepanel .destpick .drow{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"info sw" "state sw";gap:2px 12px;padding:11px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.sidepanel .destpick .drow:last-child{border-bottom:0}
.sidepanel .destpick .drow:has(input[name=d]:checked){box-shadow:inset 3px 0 0 var(--live);padding-left:12px}
.sidepanel .drow>.switch{grid-area:sw}
.sidepanel .drow>span:nth-child(2){grid-area:info;min-width:0}
.sidepanel .drow>span:nth-child(2) strong{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.sidepanel .drow>span:nth-child(2) .mono{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidepanel .drow>[data-dest-state]{grid-area:state;font-size:12px}
.sidepanel .scope{margin-left:4px}
.sidepanel .desttools{gap:6px}
.sidepanel .desttools input[type=search]{flex:1 1 100%}
.sidepanel .formcard{padding:12px;grid-template-columns:1fr}
.sidepanel .formcard .field,.sidepanel .formcard .full{grid-column:1/-1}
.sidepanel table{font-size:12.5px}
/* narrower screens: panel and rail go under the stage */
@media (max-width:1180px){
  .pathview{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;flex-direction:row;overflow-x:auto;order:2}
  .rail button{flex:1 0 auto;min-width:72px}
  .sidepanel{position:static;max-height:none;order:3}
}
@media (max-width:760px){ .pathview{padding:12px} .dhead{padding:14px 12px 0} .healthline{grid-template-columns:auto minmax(0,1fr)} .healthline .spark{grid-column:1/-1} }
.stage .ovprev{width:100%;max-width:none;margin:0;border:0;border-radius:0}
.stage .ovprev video,.stage .ovprev img{width:100%;height:100%;object-fit:contain}
.stage{min-height:0}
.sidepanel .desttools select{flex:1 1 40%;width:auto;min-width:0}
.thealth:not(.ok):not(.warn):not(.bad) strong{background:color-mix(in srgb,var(--idle) 25%,transparent);color:var(--muted)}
/* offline stage: a broadcast "no signal" slate, and the send addresses as a patch list */
.stageoff{aspect-ratio:auto;min-height:340px;display:block;padding:22px 26px 24px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px),linear-gradient(160deg,#0b1219,#060a0e);color:#e7eef6}
.slate{display:flex;flex-direction:column;gap:14px;max-width:760px}
.slatehead{display:flex;align-items:center;gap:14px}
.tally.nosig{background:transparent;border:1px solid #ff4f62;color:#ff4f62;font-size:11px;letter-spacing:.12em}
.slatename{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;word-break:break-all}
.flatline{width:100%;height:34px}
.flatline path{fill:none;stroke:#36d0f0;stroke-width:1.5;opacity:.7;vector-effect:non-scaling-stroke}
.slatelead{margin:0;color:#9fb0c1;font-size:13.5px}
.patches{display:flex;flex-direction:column;border:1px solid #223142;border-radius:12px;overflow:hidden}
.patch{display:grid;grid-template-columns:76px minmax(0,1fr);border-top:1px solid #223142}
.patch:first-child{border-top:0}
.jack{display:flex;align-items:flex-start;justify-content:center;padding:14px 0;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.06em;color:#36d0f0;background:#0d151d;border-right:1px solid #223142}
.patchbody{display:flex;flex-direction:column;gap:8px;padding:10px 12px;min-width:0}
.pfield{display:grid;grid-template-columns:86px minmax(0,1fr);gap:10px;align-items:center;font-size:12.5px}
.pfield>span:first-child{color:#8ea0b3}
.slate .cbox{background:#111a23;border-color:#243344}
.slate .iconbtn{border-left-color:#243344}
.slate .note{color:#8ea0b3}
.slate .linkbtn{align-self:flex-start;padding-left:0}
/* the same patch list in the light side panel */
.sidepanel .patches{border-color:var(--line)}
.sidepanel .patch{grid-template-columns:58px minmax(0,1fr);border-top-color:var(--line)}
.sidepanel .jack{background:var(--panel2);border-right-color:var(--line);color:var(--accent)}
.sidepanel .pfield{grid-template-columns:1fr}
.sidepanel .pfield>span:first-child{color:var(--muted)}
@media (max-width:760px){ .pfield{grid-template-columns:1fr} .patch{grid-template-columns:56px minmax(0,1fr)} .stageoff{padding:16px} }
/* destinations panel: clear "add" action in the panel header, and the list in its own box */
.panelhead #pactions:empty{display:none}
.addbox{border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 5%,var(--panel));animation:pagein .2s var(--ease)}
.addbox .formcard{border:0;background:transparent;box-shadow:none;margin:0}
.dlist{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel2);overflow:hidden}
.dlisthead{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 60%,var(--panel2))}
.dlisthead strong{font-size:13px}
.dlisthead .desttools{margin:0}
.sidepanel .dlist .destpick{padding:0 12px;background:var(--panel)}
.sidepanel .dlist #rsNone{padding:10px 12px}
.aacrow{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel);font-size:13px}
.aacrow .note{font-size:12px}
/* audio meter: scale marks at -6 dB and -18 dB so levels line up and read at a glance */
.vubar{position:relative}
.vubar::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(to top,transparent calc(70% - 1px),rgba(255,255,255,.35) calc(70% - 1px) 70%,transparent 70%,transparent calc(90% - 1px),rgba(255,255,255,.35) calc(90% - 1px) 90%,transparent 90%)}
.stage .vu{flex:0 0 34px;gap:4px;padding:6px 5px}
[data-act=vutoggle][aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,var(--panel));border-color:var(--accent);color:var(--accent)}
.pptop{display:flex;align-items:center;gap:8px}
.pptop .ppall{flex:1}
/* banners across the top of the page */
.topbanner{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;padding:9px 16px;font-size:13.5px;background:color-mix(in srgb,var(--accent) 16%,var(--panel));border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))}
.topbanner.bad{background:color-mix(in srgb,var(--warn) 18%,var(--panel));border-bottom-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.spin.small{position:static;margin:0;width:16px;height:16px;border-width:2px;opacity:1}
.firstrun{grid-column:1/-1;border-radius:var(--r-lg);border:1px solid var(--line);padding:24px 28px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 2px,transparent 2px 4px),linear-gradient(160deg,#0b1219,#060a0e);color:#e7eef6;max-width:900px}
.firstrun .slatename{font-size:20px}
.tally.on.rs.failing{background:var(--warn);border-color:var(--warn);color:#1d1400;animation:blinkwarn 1.6s ease-in-out infinite}
@keyframes blinkwarn{50%{opacity:.55}}
/* quick record button on a multiview tile (shows on hover) */
.tquick{position:absolute;top:10px;right:10px;z-index:6;padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(8,12,16,.72);backdrop-filter:blur(6px);color:#fff;font:600 12px var(--body);cursor:pointer;opacity:0;transform:translateY(-2px);transition:opacity .15s,transform .15s}
.tquick.on{border-color:var(--rec);color:#ffb3bb}
.tile:hover .tquick,.tile:focus-within .tquick,.tquick:focus-visible{opacity:1;transform:none}
.tile .tquick:hover{background:var(--rec);border-color:var(--rec);color:#fff}
@media (hover:none){ .tquick{opacity:1;transform:none} }
.httpshelp{margin:6px 0;padding:10px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--warn) 14%,var(--panel));border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));font-size:13.5px;line-height:1.5}

/* Connect tab: one tab per connection type, a Send card and a clearly marked Pull card */
.panelbody .protos{margin-bottom:12px}
.linkcard{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.linkcard.pull{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel2))}
.lchead{display:flex;align-items:center;gap:10px}
.lctag{font:700 11px/1 var(--mono);letter-spacing:.08em;padding:5px 8px;border-radius:6px;background:color-mix(in srgb,var(--fg) 12%,transparent);color:var(--fg)}
.linkcard.pull .lctag{background:var(--accent);color:var(--accent-ink)}
.lctitle{font-weight:600;font-size:13.5px}
.lcchip{margin-left:auto;font-size:11.5px;color:var(--live);border:1px solid color-mix(in srgb,var(--live) 45%,transparent);padding:2px 8px;border-radius:999px}
.lrow{display:flex;flex-direction:column;gap:5px}
.llabel{font-size:12px;color:var(--muted)}
.lrow .cbox{display:flex;gap:8px;align-items:center}
.lrow .cbox code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line);font-size:12.5px}
.linkcard.pull .cbox .btn{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.pgroup.keepbox{padding-bottom:10px}

/* workspaces: the pool */
.tclaim{position:absolute;top:10px;right:10px;z-index:6;padding:5px 12px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);font:700 12px var(--body);cursor:pointer}
.tclaim:hover{filter:brightness(1.1)}
.tally.on.pool{background:transparent;border-color:var(--accent);color:var(--accent)}

/* header: one tidy row. The three loose buttons became a user menu. */
header{flex-wrap:nowrap;gap:12px 16px;padding:10px 20px}
.conn{padding:4px 10px;font-size:12.5px}
nav.views a{padding:6px 11px}
.totals{gap:6px;flex-wrap:nowrap;margin-left:auto}
.totals div{padding:4px 10px;gap:5px}
.who{position:relative;margin-left:0}
.userbtn{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--fg);border-radius:999px;padding:3px 10px 3px 4px;font:500 13.5px var(--body);cursor:pointer}
.userbtn:hover{background:var(--panel2)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.caret{color:var(--muted);font-size:11px}
.usermenu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md,10px);box-shadow:0 12px 32px -8px rgba(0,0,0,.35);padding:6px;z-index:60;display:flex;flex-direction:column}
.usermenu[hidden]{display:none}
.usermenu .umhead{display:flex;align-items:center;gap:8px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.usermenu a,.usermenu button{display:block;text-align:left;border:0;background:transparent;color:var(--fg);font:500 14px var(--body);padding:9px 10px;border-radius:6px;text-decoration:none;cursor:pointer}
.usermenu a:hover,.usermenu button:hover{background:var(--panel2)}
@media (max-width:1180px){ header{flex-wrap:wrap} .totals{order:5;width:100%;margin-left:0} }
@media (max-width:760px){ .who{margin-left:auto} .totals div{padding:3px 9px} }
nav.views a,.totals div,.userbtn,.conn{white-space:nowrap}
nav.views{flex-wrap:nowrap;flex-shrink:0}
.totals b{white-space:nowrap}
@media (max-width:1180px){ nav.views{flex-wrap:wrap} }
@media (max-width:760px){ nav.views{flex-wrap:nowrap} header nav.views{flex-direction:column} }

.pagehead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pagehead h2{margin:0}
input[type=email]{width:100%;min-width:0;padding:9px 12px}
.formcard input[type=text],.formcard input[type=password],.formcard input[type=email],.formcard input[type=number],.formcard select{min-height:41px}
#settingsForm .formcard .field input{min-height:41px}

/* phones and small tablets: the path list and the chosen path take turns, instead of sharing a small screen */
.backbtn{display:none}
@media (max-width:900px){
  aside{max-height:none;border-bottom:0}
  .desk:not(.showdetail) #detail{display:none}
  .desk.showdetail aside{display:none}
  .backbtn{display:inline-flex;align-items:center}
}
header{padding:10px 16px;gap:10px 12px}
nav.views a{padding:6px 9px}
.totals{gap:5px}
.totals div{padding:4px 9px}
.userbtn{padding:3px 9px 3px 4px}
@media (max-width:1180px){ .totals{flex-wrap:wrap} }
.tilegrid.nopics .tvwrap{display:none}
.tilegrid.nopics .tclaim,.tilegrid.nopics .tquick{opacity:1;transform:none}

/* the empty Dashboard and an offline path use the same light cards as the Links tab */
.stageoff{aspect-ratio:auto;min-height:0;display:block;padding:18px 20px 20px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-lg,12px)}
.firstcard{grid-column:1/-1;max-width:720px;border:1px solid var(--line);border-radius:var(--r-lg,12px);background:var(--panel);padding:20px 22px}
.offname{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:-.02em;word-break:break-all}
.offlead{margin:10px 0 12px;color:var(--muted);font-size:13.5px}
.stageoff .protos,.firstcard .protos{max-width:340px}
.stageoff .linkcard,.firstcard .linkcard{background:var(--panel2)}
.stageoff .tally.nosig,.firstcard .tally.nosig{color:var(--rec,#e5384a);border-color:var(--rec,#e5384a)}
.stageoff .offcard{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.stageoff .offcard>*{min-width:0;max-width:100%;box-sizing:border-box}

/* ---- Multiview setup ---- */
.mvintro{margin:0 0 14px}
.mvcard{padding:14px 16px;margin-bottom:12px}
.mvhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mvhead h3{margin:0 0 2px;font-size:16px}
.mvcard.open{border-color:var(--accent)}
.mvedit{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:16px}
.mvgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mvcol{display:flex;flex-direction:column;gap:16px;min-width:0}
.mvedit .field{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mvedit .field input[type=text]:not([readonly]),.mvedit .field select{max-width:340px}
.mvedit .check{display:flex;gap:8px;align-items:center;font-size:14px}
.mvlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%;max-width:420px}
.mvlist li{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.copyrow{display:flex;gap:6px;width:100%;max-width:520px}
.copyrow input{flex:1;font-family:var(--mono);font-size:12px}
.mvprev{display:grid;gap:4px;max-width:560px}
.mvbox{position:relative;aspect-ratio:16/9;background:var(--bg);border:1px solid var(--line);border-radius:4px;display:flex;align-items:flex-end;padding:3px 5px;font-size:10.5px;overflow:hidden}
.mvbox .mvn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.mvbox .mvdot{position:absolute;top:4px;left:5px;width:6px;height:6px;border-radius:50%;background:var(--live)}
.mvbox b{position:absolute;top:2px;right:4px;font-size:8px;background:var(--rec);color:#fff;padding:0 3px;border-radius:2px}
.mvbox u{position:absolute;right:3px;top:12px;bottom:12px;width:4px;background:linear-gradient(to top,var(--live),var(--accent));opacity:.7;border-radius:1px}
.mvempty{padding:26px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.mvempty h3{margin:0}
.mvnewform{padding:14px 16px;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;max-width:460px}
.mvgpu{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 16px;margin-top:20px;flex-wrap:wrap}
@media (max-width:820px){.mvgrid{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:var(--r-lg,12px);background:var(--panel)}
/* Stream keys look like a password field but are plain text inputs, so the browser doesn't offer to save a "password". */
input.secret{-webkit-text-security:disc;text-security:disc}
/* Pool / your streams headings and the Claim buttons */
.grouphead{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 2px 2px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line)}
.grouphead strong{font-family:var(--display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px;color:var(--fg)}
.grouphead.pool strong{color:var(--accent)}
#plist .grouphead{padding:10px 10px 4px;margin-top:4px}
.rowclaim{margin-left:auto}
.tclaim{padding:7px 16px;font-size:13px;box-shadow:0 2px 10px #0006}
.tilegrid.nopics .tclaim{position:static;display:block;margin:10px 10px 0;width:calc(100% - 20px)}

/* Version number: always in the header, and in the user menu */
.brand .ver{display:inline;white-space:nowrap}
.umver{padding:6px 12px 8px;font:11.5px var(--mono);color:var(--muted);border-top:1px solid var(--line)}
/* Path list and side panel: as tall as the screen, then scroll inside */
@media (min-width:901px){
  .desk{align-items:start}
  .desk>aside{position:sticky;top:var(--hh,64px);height:calc(100vh - var(--hh,64px));max-height:none;overflow:hidden}
  .desk>aside .plist{min-height:0;overflow-y:auto;flex:1 1 auto}
  .sidepanel{top:calc(var(--hh,64px) + 12px);max-height:calc(100vh - var(--hh,64px) - 24px)}
  .sidepanel .panelbody{min-height:0;flex:1 1 auto;overflow-y:auto}
}
/* Inside the side panel, content keeps its natural height and the panel scrolls (it was being squashed and clipped) */
.sidepanel .panelbody>*{flex-shrink:0}
.sidepanel .dlist{overflow:visible}