/* OBS Remote — styled after OBS Studio's dark theme so it needs no learning: docks with title bars,
   list rows with a blue selection, flat grey buttons, horizontal audio meters, a status bar. Sized in em. */

:root {
  --bg: #1c1c1c;
  --dock: #262626;
  --title: #333333;
  --field: #1a1a1a;
  --btn: #4a4a4a;
  --btn-hi: #5a5a5a;
  --line: #3a3a3a;
  --line2: #4f4f4f;
  --ink: #e4e4e4;
  --dim: #9b9b9b;
  --faint: #6a6a6a;
  --sel: #2c6cb4;
  --live: #e5483f;
  --rec: #f0a020;
  --ok: #43b05c;
  --pvw: #43b05c;
  --acc: #5aa2f0;
  --u: 1;
  --zero: .85;
  --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, "Noto Sans Thai", Tahoma, sans-serif;
  --font-num: "Cascadia Mono", "SF Mono", Consolas, ui-monospace, monospace;
  color-scheme: dark;
}
html[data-size="s"] { --u: .9; }
html[data-size="l"] { --u: 1.2; }

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 calc(14px * var(--u)) / 1.35 var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}
html[data-layout="wide"] body { font-size: calc(13px * var(--u)); }
body.lock { overflow: hidden; }

button, input, select { font: inherit; color: inherit; }
button {
  background: var(--btn);
  border: 1px solid #00000066;
  border-radius: 3px;
  min-height: 2.7em;
  padding: 0 .9em;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
html[data-layout="wide"] button { min-height: 2.1em; }
@media (pointer: coarse) { html[data-layout="wide"] button { min-height: 2.7em; } }
button:hover { background: var(--btn-hi); }
button:active { background: #3c3c3c; }
button:disabled { opacity: .4; pointer-events: none; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }
.dim { color: var(--dim); }
.primary { background: var(--sel); border-color: #00000066; color: #fff; font-weight: 600; }
.primary:hover { background: #3a7cc8; }
.danger { color: #ff9a92; background: transparent; border-color: #5a2a26; }
.icon { width: 2.4em; min-height: 2.4em; padding: 0; display: grid; place-items: center; background: transparent; border-color: transparent; }
.icon:hover { background: #ffffff14; }
.icon .ic { width: 1.3em; height: 1.3em; }
select, input[type="number"], input[type="text"], .dbin, #pairInput {
  background: var(--field); border: 1px solid #00000099; border-radius: 3px; min-height: 2.1em; padding: 0 .55em; color: var(--ink);
}
select { min-width: 0; }

/* ---- Pair screen -------------------------------------------------------- */
#pair { min-height: 100dvh; display: grid; place-items: center; padding: 1.5em; }
#pairForm { width: min(24em, 100%); display: grid; gap: .8em; }
.mark { width: 4em; height: 4em; color: var(--ink); }
.mark .ic { width: 100%; height: 100%; stroke-width: 1.1; }
.mark .ic path { animation: ink 1.1s ease-out both; }
.mark .ic .w2 { stroke: var(--live); animation: ink 1.1s .5s ease-out both, wave 2.4s 1.7s ease-in-out infinite; }
.mark .ic .rec { color: var(--live); }
#pairForm h1 { font-size: 1.8em; font-weight: 600; line-height: 1; margin-top: .2em; }
.lede { color: var(--dim); }
#pairForm label { font-size: .8em; color: var(--dim); margin-top: .4em; }
#pairInput { padding: .7em; font: 600 1.2em var(--font-num); letter-spacing: .06em; text-transform: uppercase; width: 100%; }
#pairForm .primary { min-height: 3em; }
.err { color: #ff9a92; min-height: 1.4em; }
#demoLink { color: var(--dim); font-size: .9em; }

/* ---- Title bar ---------------------------------------------------------- */
#top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .6em;
  padding: calc(.2em + env(safe-area-inset-top)) calc(.5em + env(safe-area-inset-right)) .2em calc(.7em + env(safe-area-inset-left));
  background: var(--title); border-bottom: 1px solid #00000099;
}
.id { display: flex; align-items: center; gap: .5em; min-width: 0; flex: 1; }
.id b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.id .dim { font-size: .85em; }
.dot { width: .65em; height: .65em; border-radius: 50%; background: var(--faint); flex: none; }
.dot[data-s="ok"] { background: var(--ok); }
.dot[data-s="wait"] { background: var(--rec); animation: pulse 1s infinite; }
.dot[data-s="off"] { background: var(--live); }
.badges { display: flex; gap: .4em; }
.badge { font: 600 .8em var(--font-num); padding: .25em .55em; border-radius: 3px; display: inline-flex; gap: .5em; align-items: center; }
.badge.live { background: var(--live); color: #fff; }
.badge.live::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; }
.badge.rec { background: transparent; color: var(--rec); border: 1px solid var(--rec); }
.badge.rec[data-paused="1"] { opacity: .55; }
html[data-layout="wide"] .badges { display: none; }
#offline { background: #4a1f1b; color: #ffc2bb; text-align: center; padding: .45em; font-size: .9em; }
#app[data-off="1"] #panels { opacity: .45; pointer-events: none; filter: saturate(.4); }
html[data-perm="viewer"] #panels button:not(.expand):not(.icon), html[data-perm="viewer"] .fader, html[data-perm="viewer"] .tbar, html[data-perm="viewer"] #panels select, html[data-perm="viewer"] #panels input { pointer-events: none; opacity: .5; }

/* ---- Layout shell ------------------------------------------------------- */
main#panels {
  display: grid; gap: 3px;
  padding: 3px calc(3px + env(safe-area-inset-right)) calc(3px + env(safe-area-inset-bottom)) calc(3px + env(safe-area-inset-left));
  align-items: start;
  transition: opacity .2s;
}
html[data-layout="phone"] main#panels { padding-bottom: calc(5em + env(safe-area-inset-bottom)); }
html[data-layout="phone"] #status { display: none; }
html[data-layout="phone"] main[data-tab="scenes"] .panel:not([data-tab="scenes"]),
html[data-layout="phone"] main[data-tab="switch"] .panel:not([data-tab="switch"]),
html[data-layout="phone"] main[data-tab="audio"] .panel:not([data-tab="audio"]),
html[data-layout="phone"] main[data-tab="sources"] .panel:not([data-tab="sources"]),
html[data-layout="phone"] main[data-tab="live"] .panel:not([data-tab="live"]) { display: none; }

/* the monitors stay on the Switch tab so you can watch a transition happen */
html[data-layout="phone"] main[data-tab="switch"] #p-preview { display: flex; }
html[data-layout="wide"] #tabs { display: none; }

/* wide: monitors on top, OBS's dock row underneath */
html[data-layout="wide"] main#panels {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas: "pre pre pre pre pre pre" "sce sce src src mix mix" "swi swi liv liv sta sta" "log log log log log log";
  padding-bottom: 2.4em;
}
@media (min-width: 1100px) {
  html[data-layout="wide"] main#panels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, .8fr);
    grid-template-areas: "pre pre pre pre pre" "sce src mix swi liv" "sta sta log log log";
  }
  html[data-layout="wide"] .panel:not(#p-preview):not(.max) .pb { max-height: 19em; overflow: auto; }
}
#p-switcher { grid-area: swi; } #p-preview { grid-area: pre; } #p-scenes { grid-area: sce; } #p-mixer { grid-area: mix; }
#p-sources { grid-area: src; } #p-live { grid-area: liv; } #p-stats { grid-area: sta; } #p-log { grid-area: log; }
html[data-layout="phone"] main#panels > .panel { grid-area: auto; }

html[data-detail="simple"] .full-only { display: none !important; }

/* ---- Docks -------------------------------------------------------------- */
.panel { background: var(--dock); border: 1px solid #00000099; min-width: 0; display: flex; flex-direction: column; }
.ph { display: flex; align-items: center; justify-content: space-between; padding: 0 .15em 0 .7em; background: var(--title); border-bottom: 1px solid #00000099; min-height: 2.1em; }
.ph h2 { font-size: .95em; font-weight: 400; color: var(--ink); }
.ph .icon { width: 2em; min-height: 2em; }
.pb { padding: .6em; min-width: 0; }
.pb.nopad { padding: 0; }
.expand { color: var(--dim); }
.expand:hover { color: var(--ink); }

.panel.max {
  position: fixed; inset: 0; z-index: 50; border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  display: flex !important;
  animation: rise .15s ease-out;
}
.panel.max .pb { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.panel.max .ph { min-height: 2.8em; }

/* ---- Preview / program monitors ----------------------------------------- */
.mons { display: flex; align-items: center; justify-content: center; gap: .6em; }
.mon { flex: 1 1 0; min-width: 0; display: grid; gap: .25em; }
.mon figcaption { font-size: .85em; color: var(--dim); text-align: center; }
.screen { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border: 1px solid #00000099; max-height: 52vh; margin: 0 auto; width: 100%; }
html[data-layout="wide"] #monPgm:only-child, html[data-layout="wide"] .mons:not(.studio) .mon { max-width: min(46em, 100%); }
html[data-layout="wide"] .screen { max-height: 38vh; }
.panel.max .screen { max-height: calc(100dvh - 9em); }
.screen img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; }
.screen .off { position: absolute; inset: 0; display: grid; place-items: center; color: var(--faint); font-size: .85em; }
.screen.has .off { display: none; }
.pgm-tag { position: absolute; left: .4em; top: .4em; background: #000a; color: #fff; font-size: .75em; padding: .15em .5em; border-radius: 2px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen:not(.has) .pgm-tag { display: none; }
.mon.pgm .screen { outline: 2px solid transparent; }
#p-preview.is-studio .mon.pgm .screen { outline-color: var(--live); }
#p-preview.is-studio .mon.pvw .screen { outline-color: var(--pvw); }
.mon.pvw .screen { outline: 2px solid transparent; }

/* Studio Mode: the Transition column between the monitors, like OBS */
.xcol { display: grid; gap: .5em; flex: 0 0 auto; width: 6.6em; }
.xcol button { min-height: 2.6em; font-weight: 600; }
.xcol .take { background: #2d6a3a; }
.xcol .take:hover { background: #378247; }
.studio { display: grid; gap: .5em; margin-top: .6em; max-width: 46em; margin-inline: auto; }

/* ---- Lists (scenes, sources) -------------------------------------------- */
.list { display: grid; align-content: start; background: var(--field); min-height: 3em; }
.list .row-item, .scene, .src {
  display: flex; align-items: center; gap: .6em; min-height: 2.5em; padding: 0 .7em; width: 100%;
  background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid #ffffff0a; text-align: left; cursor: pointer;
}
html[data-layout="wide"] .scene, html[data-layout="wide"] .src { min-height: 1.9em; }
@media (pointer: coarse) { html[data-layout="wide"] .scene, html[data-layout="wide"] .src { min-height: 2.6em; } }
.scene:hover, .src:hover { background: #ffffff0f; }
.scene .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene small { font-size: .7em; color: #ffffffb0; }
.scene.sel { background: var(--sel); color: #fff; }
.scene.pgm::before { content: ""; width: .35em; align-self: stretch; margin-left: -.7em; background: var(--live); }
.scene.arming { animation: arm .5s ease-in-out infinite alternate; }
.src { cursor: default; }
.src .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src.off .nm { color: var(--faint); }
.src .tg { width: 2em; min-height: 2em; padding: 0; background: transparent; border: 0; display: grid; place-items: center; color: var(--ink); flex: none; }
.src .tg .ic { width: 1.2em; height: 1.2em; }
.src.off .eye .slash { stroke-dashoffset: 0; }
.src.off .eye { color: var(--faint); }
.src .lk[aria-pressed="false"] { color: var(--faint); opacity: .55; }
.empty { color: var(--faint); padding: 1em; text-align: center; }
.chips { display: flex; gap: .3em; overflow-x: auto; padding: .35em; background: var(--dock); }
.chips button { min-height: 2em; white-space: nowrap; font-size: .85em; }
.chips button[aria-selected="true"], .chips button[aria-checked="true"] { background: var(--sel); color: #fff; }
.chips button.pgm::after { content: " •"; color: var(--live); }
.chips.wrap { flex-wrap: wrap; overflow: visible; padding: 0; background: none; }

/* ---- Audio mixer: OBS's horizontal rows (name, dB, meter, slider, mute) -- */
.mixer { display: grid; }
.ch { display: grid; grid-template-columns: minmax(0, 1fr) 2.6em; gap: .1em .5em; align-items: center; padding: .45em .6em; border-bottom: 1px solid #ffffff0a; }
.ch .meta { grid-column: 1; display: flex; justify-content: space-between; align-items: baseline; gap: .6em; min-width: 0; }
.ch .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch .db { font: 400 .85em var(--font-num); color: var(--dim); white-space: nowrap; }
.ch .fader { grid-column: 1; }
.ch .mute { grid-column: 2; grid-row: 1 / 3; width: 100%; padding: 0; min-height: 2.4em; background: transparent; border: 0; }
.ch .mute:hover { background: #ffffff14; }
.ch.muted .nm, .ch.muted .db { opacity: .55; }
.ch.muted .mute { color: var(--live); }
.ch.dimmed { opacity: .55; }
.ch .ext { grid-column: 1 / 3; display: flex; align-items: center; gap: .4em; margin-top: .2em; }
.ch .ext button { min-width: 2.4em; padding: 0 .5em; min-height: 2em; }
.ch .dbin { width: 5.4em; text-align: center; font-family: var(--font-num); }
.ch .row2 { display: flex; gap: .3em; }
.ch .pin[aria-pressed="true"] { color: var(--rec); }

/* the slider + meter in one element: two thin meter bars over a slider track */
.fader {
  position: relative; height: 2.5em; min-width: 6em; border-radius: 2px; background: var(--field);
  touch-action: pan-y; cursor: pointer; --p: 0; --l: 0; --r: 0; --pk: 0; --thumb: .9em; overflow: hidden; user-select: none; -webkit-user-select: none;
}
.fader.drag { outline: 1px solid var(--acc); }
.fader .fill { display: none; }
.fader .tick { position: absolute; top: 0; bottom: 0; left: calc(var(--zero) * (100% - var(--thumb)) + var(--thumb) / 2); width: 1px; background: #ffffff26; }
.fader .vu i { position: absolute; left: 0; right: 0; height: .5em; background:
  linear-gradient(90deg, #5fe07a 0 66%, #f0c040 66% 88%, #ff5a4f 88%) 0 0 / 100% 100% no-repeat; clip-path: inset(0 calc((1 - var(--v)) * 100%) 0 0); }
.fader .vu .l { top: .3em; --v: var(--l); }
.fader .vu .r { top: .9em; --v: var(--r); }
.fader .vu::before { content: ""; position: absolute; left: 0; right: 0; top: .3em; height: 1.1em; background: repeating-linear-gradient(90deg, #00000000 0 calc(10% - 1px), #000000aa calc(10% - 1px) 10%); z-index: 1; pointer-events: none; }
.fader .vu b { position: absolute; top: .3em; height: 1.1em; width: 2px; background: #fff; opacity: .8; left: calc(var(--pk) * (100% - 2px)); }
.fader::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55em; height: 3px; border-radius: 2px; background: #00000099; }
.fader .thumb { position: absolute; bottom: .15em; height: 1.4em; width: var(--thumb); left: calc(var(--p) * (100% - var(--thumb))); border-radius: 2px; background: linear-gradient(#8a8a8a, #5e5e5e); border: 1px solid #00000099; z-index: 2; }
.fader.hot .thumb { background: var(--rec); }

/* Console strips: vertical faders. Used when the mixer is enlarged or on a wide screen with full controls. */
.mixer.strips { display: flex; gap: 3px; overflow-x: auto; padding: 3px; align-items: stretch; }
.mixer.strips .ch { display: flex; flex-direction: column; align-items: center; gap: .5em; flex: 1 0 5.4em; max-width: 9em; padding: .6em .4em; border: 1px solid #00000066; background: var(--dock); }
.mixer.strips .meta { order: 1; flex-direction: column; align-items: center; gap: .1em; width: 100%; text-align: center; }
.mixer.strips .nm { max-width: 100%; font-size: .9em; }
.mixer.strips .db { font-size: 1em; color: var(--ink); }
.mixer.strips .fader { order: 2; width: 3.6em; min-width: 0; height: clamp(11em, 42vh, 24em); touch-action: pan-x; }
.mixer.strips .mute { order: 3; width: 100%; grid-row: auto; min-height: 2.4em; background: var(--btn); border: 1px solid #00000066; }
.mixer.strips .ext { order: 4; flex-direction: column; width: 100%; margin: 0; }
.mixer.strips .ext > * { width: 100%; }
.mixer.strips .ext .row2 { display: flex; gap: .3em; width: 100%; }
.mixer.strips .ext .row2 button { flex: 1; }
.mixer.strips .fader::after { left: auto; right: auto; top: .3em; bottom: .3em; width: 3px; height: auto; left: 50%; margin-left: -1.5px; }
.mixer.strips .fader .tick { top: auto; bottom: calc(var(--zero) * (100% - var(--thumb)) + var(--thumb) / 2); left: 0; right: 0; width: auto; height: 1px; }
.mixer.strips .fader .vu i { left: auto; right: auto; top: .4em; bottom: .4em; width: .5em; height: auto; clip-path: inset(calc((1 - var(--v)) * 100%) 0 0 0); background: linear-gradient(0deg, #5fe07a 0 66%, #f0c040 66% 88%, #ff5a4f 88%); }
.mixer.strips .fader .vu .l { left: .35em; top: .4em; }
.mixer.strips .fader .vu .r { right: .35em; top: .4em; }
.mixer.strips .fader .vu::before { display: none; }
.mixer.strips .fader .vu b { top: auto; bottom: calc(.4em + var(--pk) * (100% - .8em)); left: .3em; right: .3em; width: auto; height: 2px; }
.mixer.strips .fader .thumb { left: .5em; right: .5em; width: auto; bottom: calc(var(--p) * (100% - var(--thumb))); height: var(--thumb); --thumb: 1.1em; }

/* ---- Scene transitions dock --------------------------------------------- */
.form { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5em .7em; align-items: center; }
.form label { color: var(--dim); }
.stepper { display: inline-flex; gap: .25em; align-items: center; }
.stepper button { min-width: 2.2em; padding: 0; min-height: 2.1em; }
.stepper input { width: 5em; text-align: center; -moz-appearance: textfield; font-family: var(--font-num); }
.stepper input::-webkit-inner-spin-button { display: none; }
.hint { font-size: .85em; color: var(--dim); margin: .5em 0 0; }
.hint:empty { display: none; }
.buses { margin-top: .7em; display: grid; gap: .4em; }
.buses h3 { font-size: .8em; font-weight: 400; color: var(--dim); }
.bus { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); gap: .5em; align-items: start; }
.bus > b { font: 600 .75em var(--font-ui); text-align: center; padding: .6em 0; border-radius: 3px; margin-top: .15em; }
.bus.pgm > b { background: #e5483f33; color: #ff9a92; }
.bus.pvw > b { background: #43b05c33; color: #8fe0a2; }
.bus-btns { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2em, 1fr)); gap: .3em; }
.bus-btns button { min-height: 2.2em; padding: 0 .4em; font-size: .85em; line-height: 1.1; word-break: break-word; }
.bus.pgm .bus-btns button.on { background: var(--live); color: #fff; }
.bus.pvw .bus-btns button.on { background: var(--pvw); color: #04210c; }
.bus-btns button.arming { animation: arm .5s ease-in-out infinite alternate; }

/* stage meter: shows where a transition is and what it is doing right now */
.stages { border: 1px solid #00000099; padding: .5em .6em .6em; background: var(--field); --tp: 0; }
.stg-top { display: flex; justify-content: space-between; align-items: baseline; gap: .6em; margin-bottom: .4em; min-height: 1.3em; }
.stg-names { font-size: .85em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stg-pct { font: 600 .9em var(--font-num); }
.stages.run .stg-pct { color: var(--rec); }
.stg-bar { position: relative; display: flex; gap: 2px; height: 2.2em; }
.stg { position: relative; flex: 1 1 0; background: #303030; display: grid; place-items: center; font-size: .7em; text-transform: uppercase; color: var(--dim); text-align: center; padding: 0 .4em; overflow: hidden; }
.stg.on { color: var(--ink); outline: 1px solid var(--rec); }
.stg.done { background: #2a3a2e; }
.stg-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #e5483f66, #43b05c66); }
.stg > span { position: relative; }
.stg-head { position: absolute; top: -.2em; bottom: -.2em; width: 3px; border-radius: 2px; background: #fff; left: calc(var(--tp) * 100%); transform: translateX(-50%); pointer-events: none; }
.stages:not(.run) .stg-head { opacity: 0; }

.tbar-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6em; align-items: center; }
.tbar-wrap .tb-l, .tbar-wrap .tb-r { font: 600 .7em var(--font-ui); }
.tb-l { color: #ff9a92; } .tb-r { color: #8fe0a2; }
.tbar { position: relative; height: 2.8em; border: 1px solid #00000099; background: var(--field); touch-action: pan-y; cursor: grab; --p: 0; --knob: 2.6em; user-select: none; -webkit-user-select: none; overflow: hidden; }
.tbar.drag { outline: 1px solid var(--acc); cursor: grabbing; }
.tbar::before { content: ""; position: absolute; left: .8em; right: .8em; top: 50%; height: 3px; margin-top: -1.5px; background: #00000099; border-radius: 2px; }
.tb-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * (100% - var(--knob)) + var(--knob) / 2); background: linear-gradient(90deg, #e5483f33, #43b05c33); }
.tb-knob { position: absolute; top: .2em; bottom: .2em; width: var(--knob); left: calc(var(--p) * (100% - var(--knob))); border-radius: 2px; background: linear-gradient(#8a8a8a, #5e5e5e); border: 1px solid #00000099; }
.tbar[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.tb-cancel { min-height: 2.2em; font-size: .85em; color: var(--dim); }
.panel.max .tbar { height: 5em; --knob: 4em; }

/* ---- Controls dock: OBS's stacked buttons -------------------------------- */
.out { display: grid; gap: .25em; margin-bottom: .4em; }
.out .row { display: flex; gap: .4em; }
.out .row > * { flex: 1; }
.obsbtn { display: flex; align-items: center; justify-content: center; gap: .5em; width: 100%; min-height: 2.5em; font-weight: 400; }
html[data-layout="wide"] .obsbtn { min-height: 2.2em; }
.obsbtn .ic { width: 1.2em; height: 1.2em; }
.out-f { font: 400 .78em var(--font-num); min-height: 1.1em; }
.out.on .obsbtn[data-k="btn"] { background: #5b2a27; }
#outRecord.on .obsbtn[data-k="btn"] { background: #5a4220; }
.out.on .obsbtn[data-k="btn"]:hover { filter: brightness(1.2); }
.studio-btn[aria-pressed="true"] { background: var(--sel); color: #fff; }
.hold { position: relative; overflow: hidden; -webkit-touch-callout: none; }
.hold::after { content: ""; position: absolute; inset: 0; background: #ffffff38; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.hold.arming::after { transform: scaleX(1); transition: transform var(--hold, 700ms) linear; }

/* ---- Stats dock ---------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); gap: 3px; }
.panel.max .stats { grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); }
.stat { padding: .45em .6em; background: var(--field); position: relative; overflow: hidden; }
.stat .k { font-size: .75em; color: var(--dim); }
.stat .v { font: 400 1.3em var(--font-num); line-height: 1.2; }
.stat .v small { font-size: .55em; color: var(--dim); margin-left: .25em; }
.stat.warn .v { color: var(--rec); }
.stat.bad .v { color: var(--live); }
.stat svg { position: absolute; right: 0; bottom: 0; width: 55%; height: 55%; opacity: .45; }
.stat svg polyline { fill: none; stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

/* ---- Activity log -------------------------------------------------------- */
.log { list-style: none; padding: 0; font: 400 .85em var(--font-num); max-height: 14em; overflow: auto; display: flex; flex-direction: column-reverse; }
.panel.max .log { max-height: none; }
.log li { padding: .2em 0; border-top: 1px solid #ffffff0a; display: flex; gap: .8em; }
.log li time { color: var(--faint); flex: none; }
.log li.err { color: #ff9a92; }

/* ---- Status bar (OBS's bottom strip) -------------------------------------- */
#status {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 1.4em;
  min-height: 2em; padding: .15em calc(.8em + env(safe-area-inset-right)) calc(.15em + env(safe-area-inset-bottom)) calc(.8em + env(safe-area-inset-left));
  background: var(--title); border-top: 1px solid #00000099; font-size: .92em; white-space: nowrap; overflow: hidden;
}
#status .grow { flex: 1; }
.st-item { display: inline-flex; align-items: center; gap: .45em; }
.st-item time { font-family: var(--font-num); }
.led { width: .7em; height: .7em; border-radius: 50%; background: var(--faint); }
.led.live { background: var(--live); animation: pulse 1.2s infinite; }
.led.rec { background: var(--rec); }

/* ---- Tabs (phone) -------------------------------------------------------- */
#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--title); border-top: 1px solid #00000099;
  padding: .2em .3em calc(.2em + env(safe-area-inset-bottom)); gap: 2px;
}
#tabs button { background: transparent; border: 0; flex-direction: column; display: flex; align-items: center; justify-content: center; gap: .1em; min-height: 4em; color: var(--dim); font-size: .78em; border-radius: 3px; }
#tabs .ic { width: 1.9em; height: 1.9em; }
#tabs button[aria-current="page"] { color: #fff; background: var(--sel); }
#tabs [data-tab="live"] .ic.anim { color: var(--live); }

/* ---- Dialog -------------------------------------------------------------- */
dialog { background: var(--dock); color: var(--ink); border: 1px solid #000; border-radius: 4px; padding: 1em; width: min(26em, calc(100vw - 1.5em)); max-height: calc(100dvh - 2em); overflow: auto; margin: auto; }
dialog::backdrop { background: #000a; }
dialog h3 { font-size: 1em; font-weight: 600; margin-bottom: .8em; }
fieldset { border: 0; padding: 0; margin-bottom: 1em; }
legend { font-size: .8em; color: var(--dim); margin-bottom: .4em; }
.seg { display: flex; border: 1px solid #000; border-radius: 3px; overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; background: var(--btn); border-left: 1px solid #00000066; }
.seg button:first-child { border-left: 0; }
.seg button[aria-pressed="true"] { background: var(--sel); color: #fff; }
.dlg-foot { display: flex; justify-content: space-between; gap: .6em; margin-top: .4em; }
.inline { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; }
.inline input { flex: 1; min-width: 0; }
.invite { margin-top: .6em; display: grid; gap: .4em; }
.invite .code { font: 600 1.5em var(--font-num); letter-spacing: .05em; word-break: break-all; }
.devs { list-style: none; padding: 0; margin: .6em 0 0; display: grid; }
.devs li { display: flex; align-items: center; gap: .5em; padding: .35em 0; border-top: 1px solid #ffffff0f; }
.devs .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devs .tag { font-size: .75em; color: var(--dim); border: 1px solid var(--line); border-radius: 3px; padding: 0 .4em; }
.devs button { min-height: 2em; padding: 0 .6em; font-size: .85em; }

/* ---- Toasts -------------------------------------------------------------- */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(5.4em + env(safe-area-inset-bottom)); z-index: 90; display: grid; justify-items: center; gap: .4em; pointer-events: none; padding: 0 1em; }
html[data-layout="wide"] #toasts { bottom: calc(3em + env(safe-area-inset-bottom)); }
.toast { background: #4a1f1b; border: 1px solid var(--live); color: #ffd2cc; padding: .55em .85em; border-radius: 3px; font-size: .92em; animation: rise .2s ease-out; box-shadow: 0 .4em 1.4em #000a; }
.toast.info { background: var(--btn); border-color: #000; color: var(--ink); }

@keyframes pulse { 50% { opacity: .35; } }
@keyframes arm { to { box-shadow: 0 0 0 2px var(--live) inset; } }
@keyframes rise { from { opacity: 0; transform: translateY(.6em); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- Line-art icons (see icons.js) ---------------------------------------- */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; filter: url(#ink-wobble); vertical-align: middle; }
.ic .blot { fill: currentColor; }
.ic .slash { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .28s ease-out; }
.ic .wv { transition: opacity .2s; }

@keyframes ink { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes wave { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
@keyframes spin { to { transform: rotate(-360deg); } }

.ic.anim .w1 { animation: wave 1.5s ease-in-out infinite; }
.ic.anim .w2 { animation: wave 1.5s .25s ease-in-out infinite; }
.ic.anim .rec { transform-box: fill-box; transform-origin: center; animation: beat 1.2s ease-in-out infinite; }
.ic.anim[data-name="replay"] { animation: spin 3.5s linear infinite; }
.ic.anim[data-name="stop"] { color: var(--rec); }
.out.on .ic.anim[data-name="live"] { color: #ff9a92; }

/* mute button: speaker whose slash is drawn on when muted, waves fade out */
.ch.muted .ic .slash { stroke-dashoffset: 0; }
.ch.muted .mute .wv { opacity: .15; }
.mute .ic { width: 1.5em; height: 1.5em; }
.mute .mt { display: none; }
.strips .mute { display: flex; align-items: center; justify-content: center; gap: .5em; }
.strips .mute .mt { display: inline; }
.nm .ic { display: none; }
.ch .pin .ic { width: 1.2em; height: 1.2em; }
.ch .pin[aria-pressed="true"] .ic { fill: currentColor; }
.stat .k .ic { width: 1.2em; height: 1.2em; margin: -.2em .4em 0 0; color: var(--faint); }
#btnForget { display: inline-flex; align-items: center; justify-content: center; gap: .5em; }
#btnForget .ic { width: 1.2em; height: 1.2em; }

/* ---- Diagnostics ----------------------------------------------------------- */
.diag { margin-bottom: 1em; border: 1px solid var(--line); border-radius: 3px; padding: .4em .6em; }
.diag summary { cursor: pointer; font-size: .85em; color: var(--dim); min-height: 2em; display: flex; align-items: center; }
.diag pre { font: 400 .78em / 1.5 var(--font-num); white-space: pre-wrap; word-break: break-all; background: var(--field); padding: .6em; margin: .5em 0; max-height: 14em; overflow: auto; }
.diag button { width: 100%; }

.toggles { display: grid; gap: .1em; max-height: 14em; overflow: auto; margin-bottom: .6em; }
.toggles label { display: flex; align-items: center; gap: .6em; padding: .35em .2em; cursor: pointer; }
.toggles input { width: 1.2em; height: 1.2em; }

/* Sources rows and mixer badges, as in OBS */
.src .sic { display: grid; place-items: center; width: 1.6em; flex: none; color: var(--dim); }
.src .sic .ic { width: 1.25em; height: 1.25em; }
.src.off .sic { opacity: .5; }
.bdg { font-size: .72em; font-weight: 700; padding: .1em .55em; border-radius: 3px; color: #fff; flex: none; }
.bdg.glob { background: var(--sel); }
.bdg.pvw { background: #2f8a45; }
.ch .meta .nm { flex: 1; min-width: 0; } .mixer.strips .meta .nm { flex: none; }

/* ---- fader polish (list mixer) ---- */
.mixer:not(.strips) .fader { height: 2.7em; border-radius: 8px; background: #14161b; box-shadow: inset 0 0 0 1px #ffffff12; --thumb: .7em; }
.mixer:not(.strips) .fader .vu i { height: .38em; border-radius: 99px; }
.mixer:not(.strips) .fader .vu .l { top: .42em; }
.mixer:not(.strips) .fader .vu .r { top: .92em; }
.mixer:not(.strips) .fader .vu::before { top: .42em; height: .88em; opacity: .7; }
.mixer:not(.strips) .fader .vu b { top: .38em; height: .96em; border-radius: 2px; }
.mixer:not(.strips) .fader::after { bottom: .5em; left: .35em; right: .35em; height: 2px; background: #ffffff1c; }
.mixer:not(.strips) .fader .fill { display: block; position: absolute; left: .35em; bottom: .5em; height: 2px; width: calc(var(--p) * (100% - var(--thumb) - .7em)); background: var(--acc); border-radius: 2px; z-index: 1; }
.mixer:not(.strips) .fader .thumb { bottom: .1em; height: 1.3em; border-radius: 99px; background: linear-gradient(#f4f4f4, #cfcfcf); border: 0; box-shadow: 0 1px 4px #000a, 0 0 0 1px #00000055; }
.mixer:not(.strips) .fader.hot .thumb { background: var(--rec); }
.mixer:not(.strips) .fader.drag { outline: 0; box-shadow: inset 0 0 0 1px var(--acc); }
.mixer.strips .fader { border-radius: 10px; }
.mixer.strips .fader .thumb { border-radius: 6px; background: linear-gradient(#f4f4f4, #cfcfcf); border: 0; box-shadow: 0 1px 4px #000a; }
.scene.sel { border-radius: 3px; }

/* preview on/off button: the eye with a slash when off */
.pvbtn[aria-pressed="false"] { color: var(--faint); }
.pvbtn[aria-pressed="false"] .ic .slash { stroke-dashoffset: 0; }
html[data-preview="off"] .screen img, html[data-preview="off"] .ez-screen img { opacity: .15; }
html[data-preview="off"] .screen.has .off, html[data-preview="off"] .ez-screen.has .off { display: grid; }

/* ---- several computers: one chip each, mirror toggle on the ones that are not on screen ---- */
.mach{display:flex;gap:6px;overflow-x:auto;padding:6px 8px;background:#202020;border-bottom:1px solid var(--line);scrollbar-width:none}
.mach::-webkit-scrollbar{display:none}
.mach-chip{display:flex;align-items:stretch;flex:none;border:1px solid var(--line2);border-radius:6px;background:#2a2a2a;overflow:hidden}
.mach-chip.on{border-color:var(--sel);background:#1f3550}
.mach-chip.mir{border-color:var(--rec)}
.mach-main{display:flex;align-items:center;gap:8px;background:none;border:0;border-radius:0;padding:5px 10px;min-height:38px;text-align:left}
.mach-txt{display:grid;line-height:1.2}
.mach-txt b{font-size:.92em;display:flex;gap:6px;align-items:center}
.mach-txt small{font-size:.76em;color:var(--dim);max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mach-live{font-style:normal;font-size:.7em;font-weight:700;background:var(--live);color:#fff;border-radius:3px;padding:0 4px}
.mach-mir{border:0;border-left:1px solid var(--line2);border-radius:0;background:#333;font-size:.78em;padding:0 10px;color:var(--dim)}
.mach-mir[aria-pressed="true"]{background:var(--rec);color:#1b1200;font-weight:700}
.mach-add{flex:none;width:38px;border:1px dashed var(--line2);background:none;border-radius:6px;font-size:1.3em;color:var(--dim)}
.linklike{background:none;border:0;color:var(--acc);text-decoration:underline;margin-top:8px}