:root {
  --bg: #15171b;
  --panel: #1e2127;
  --panel2: #262a31;
  --line: #343943;
  --text: #d7dbe2;
  --dim: #8a93a3;
  --accent: #4fb3ff;
  --on: #3ddc84;
  --warn: #ffb020;
  --mute: #ff4d5e;
  --eq: #b48cff;
  --comp: #ffb020;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
button, select, input { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 4px; }
button { cursor: pointer; padding: 3px 7px; }
button:hover { border-color: var(--dim); }
button.on { background: var(--on); color: #08130c; border-color: var(--on); }
button.mute.on { background: var(--mute); border-color: var(--mute); color: #fff; }
button.eqb.on { background: var(--eq); border-color: var(--eq); color: #120a20; }
button.solo.on { background: #ffe14d; border-color: #ffe14d; color: #221d00; }
#soloclear { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.monitor { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; }
.monitor #monmeter { width: 110px; height: 12px; background: #0c0d10; border-radius: 2px; }
.monitor #monvol { width: 90px; }
button.cmp.on { background: var(--comp); border-color: var(--comp); color: #1d1300; }
input[type=text], input:not([type]) { padding: 3px 5px; }

header { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 16px; background: #0f1114; border-bottom: 1px solid var(--line); }
.brand { font-size: 16px; letter-spacing: .5px; }
.brand b { color: var(--accent); }
.hstat { color: var(--dim); display: flex; gap: 6px; align-items: center; }
.spacer { flex: 1; }
.scenes { display: flex; gap: 6px; flex-wrap: wrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mute); display: inline-block; flex: none; }
.dot.ok { background: var(--on); }

main { padding: 12px 16px 40px; }
h2 { font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
h2 small { color: var(--dim); font-weight: 400; }

/* ---------- console strips */
#console { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; align-items: stretch; }
.group { display: flex; gap: 6px; padding: 6px; border-radius: 8px; background: #101215; }
.group > .glabel { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--dim); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; text-align: center; }
.strip { width: 96px; flex: none; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 5px; }
.strip.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.strip.master { width: 120px; }
.strip .name { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; cursor: pointer; }
.strip .name span { overflow: hidden; text-overflow: ellipsis; }
.strip .row { display: flex; gap: 3px; }
.strip .row > button { flex: 1; padding: 2px 0; font-size: 10px; }
.strip canvas.mini { width: 100%; height: 34px; background: #121418; border-radius: 3px; cursor: pointer; display: block; }
.strip .faderwrap { display: flex; gap: 4px; height: 210px; justify-content: center; }
.strip .gr { height: 5px; background: #121418; border-radius: 2px; overflow: hidden; direction: rtl; }
.strip .gr > div { height: 100%; background: var(--comp); width: 0; }
.strip .val { text-align: center; }
.strip .small { color: var(--dim); font-size: 10px; display: flex; justify-content: space-between; }
.strip input[type=range].h { width: 100%; }

input[type=range] { accent-color: var(--accent); margin: 0; }
input[type=range].fader { writing-mode: vertical-lr; direction: rtl; width: 26px; height: 100%; }
canvas.meter { width: 18px; height: 100%; background: #0c0d10; border-radius: 2px; }

.val input { width: 52px; text-align: center; background: transparent; border-color: transparent; padding: 1px; }
.val input:hover, .val input:focus { border-color: var(--line); background: var(--panel2); }

/* ---------- editor */
#editor { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
#editor .title { font-size: 14px; font-weight: 600; margin-bottom: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#editor .title .io { color: var(--dim); font-weight: 400; font-size: 11px; font-family: ui-monospace, monospace; }
.cols { display: flex; flex-wrap: wrap; gap: 14px; }
.box { background: var(--panel2); border-radius: 6px; padding: 10px; min-width: 220px; flex: 1 1 240px; }
.box.wide { flex: 3 1 520px; }
.box h3 { margin: 0 0 8px; font-size: 12px; display: flex; gap: 8px; align-items: center; }
.box h3 .sp { flex: 1; }
.ctl { display: grid; grid-template-columns: 78px 1fr 64px; gap: 6px; align-items: center; margin: 4px 0; }
.ctl label { color: var(--dim); }
.ctl input[type=range] { width: 100%; }
.ctl .val input { width: 100%; }
canvas.eqbig { width: 100%; height: 220px; background: #121418; border-radius: 4px; display: block; touch-action: none; cursor: crosshair; }
canvas.curve { width: 100%; max-width: 220px; aspect-ratio: 1; background: #121418; border-radius: 4px; display: block; margin-top: 6px; }
.bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 10px; }
.band { border-left: 3px solid var(--c); padding-left: 8px; }
.band .ctl { grid-template-columns: 40px 1fr 56px; }
.band .hd { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.sendrow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; margin-top: 8px; }
.sendrow .ctl { grid-column: 1 / -1; margin: 0; }

/* ---------- matrix */
.tablewrap { overflow-x: auto; }
table#matrix { border-collapse: collapse; min-width: 100%; }
#matrix th, #matrix td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: middle; white-space: nowrap; }
#matrix th { color: var(--dim); font-weight: 500; }
#matrix tr.sel td { background: #1d2a36; }
#matrix .cell { display: flex; gap: 4px; align-items: center; }
#matrix .cell input[type=range] { width: 90px; }
#matrix .val input { width: 46px; }
#matrix canvas.hmeter { width: 120px; height: 14px; background: #0c0d10; border-radius: 2px; display: block; }
#matrix .status { color: var(--dim); max-width: 260px; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 5px; align-items: center; }

/* ===================== v3: indeling, langere faders, sends, automixer, LUFS, scènes ===================== */
.num { font-variant-numeric: tabular-nums; }
.fixed { display: inline-block; min-width: 3.6em; }
#load.fixed { min-width: 3.2em; }

/* kop: één rij (links status, midden monitor, rechts LUFS en knoppen). Alles heeft een vaste breedte, ook
   teksten die veranderen (monitor aan/uit, solo, verbinding): dan verspringt er niets. Te smal: de rechterkant
   gaat als geheel naar een tweede regel. */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 6px 12px; }
.hleft, .hright { display: flex; align-items: center; gap: 12px; flex: none; }
.hright { margin-left: auto; }
header .monitor { flex: none; flex-wrap: nowrap; margin: 0 auto; }
#monsrc { max-width: 150px; }
#latency.hstat { display: inline-block; min-width: 5.6em; white-space: nowrap; }
#monlat.fixed { min-width: 4.4em; text-align: right; white-space: nowrap; }
#monbtn { min-width: 8.8em; white-space: nowrap; }
#load.fixed { min-width: 3.8em; }
#sync { min-width: 3.9em; white-space: nowrap; }
#sync.ok { color: var(--on); }
#sync.bad { color: var(--warn); }
#menubtn { white-space: nowrap; }
#menubtn.page { border-color: var(--accent); color: var(--accent); }

/* LUFS-meter */
.lufs { position: relative; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; }
.lufsvals { display: flex; align-items: baseline; gap: 5px; }
.lufsvals .lab { color: var(--dim); font-size: 10px; }
.lufsvals .v { min-width: 3.1em; text-align: right; font-size: 13px; }
.lufsvals .v.big { font-size: 17px; font-weight: 600; min-width: 3.4em; }
.lufsvals .v.ok { color: var(--on); }
.lufsvals .v.warn { color: var(--warn); }
.lufsvals .v.bad { color: var(--mute); }
#lufshist { width: 100px; height: 26px; background: #0c0d10; border-radius: 3px; }
#lufsgear { padding: 2px 6px; }
.popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.popover .ctl { grid-template-columns: 70px 1fr; }
.popover .row2 { display: flex; gap: 6px; margin-top: 8px; }

/* strips: langere faders, grotere fader-knoppen */
.strip { width: 104px; }
.strip .faderwrap { height: 320px; gap: 6px; }
canvas.meter { width: 20px; }
input[type=range].fader { -webkit-appearance: none; appearance: none; width: 40px; background: transparent; cursor: grab; }
input[type=range].fader::-webkit-slider-runnable-track { background: linear-gradient(to right, transparent 17px, #08090b 17px, #08090b 23px, transparent 23px); border: 0; }
input[type=range].fader::-moz-range-track { background: linear-gradient(to right, transparent 17px, #08090b 17px, #08090b 23px, transparent 23px); border: 0; }
input[type=range].fader::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 40px; height: 22px; border-radius: 4px; border: 1px solid #0b0c0e;
  background: linear-gradient(#9aa3b2, #5d6573 45%, #e8ecf2 46%, #e8ecf2 54%, #5d6573 55%, #3b414c);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
input[type=range].fader::-moz-range-thumb {
  width: 40px; height: 22px; border-radius: 4px; border: 1px solid #0b0c0e;
  background: linear-gradient(#9aa3b2, #5d6573 45%, #e8ecf2 46%, #e8ecf2 54%, #5d6573 55%, #3b414c);
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
}
input[type=range].fader:active { cursor: grabbing; }
.strip .val input { font-size: 13px; }

/* automixer */
.amrow { display: flex; align-items: center; gap: 4px; }
.amrow button.am { flex: 1; padding: 2px 0; font-size: 10px; }
button.am.on { background: #3fd6c8; border-color: #3fd6c8; color: #04201d; }
button.am.on.b { background: #ff6fd0; border-color: #ff6fd0; color: #2a0420; }
canvas.knob { width: 22px; height: 22px; flex: none; cursor: ns-resize; touch-action: none; }
.ambar { height: 5px; background: #121418; border-radius: 2px; overflow: hidden; }
.ambar > div { height: 100%; width: 0; background: #3fd6c8; }
.ambar.b > div { background: #ff6fd0; }
.ambar.off { opacity: .15; }

/* sends op de strip */
.sends { display: flex; flex-direction: column; gap: 3px; }
.send { display: grid; grid-template-columns: 38px 1fr; gap: 3px; align-items: center; }
.send button.sname { padding: 1px 2px; font-size: 9px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.send button.sname.on { background: var(--accent); border-color: var(--accent); color: #04121f; }
.send button.sname.pre { font-style: italic; text-decoration: underline; }
.send input[type=range] { width: 100%; }
button.addsend { font-size: 10px; padding: 1px 0; color: var(--dim); border-style: dashed; }

/* editor */
#editor .title .sp { flex: 1; }
#editor .close { padding: 2px 9px; }
.srcfields { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.srcfields .ctl { grid-template-columns: 78px 1fr; }
.srcfields input[type=text] { width: 100%; }
.hint { color: var(--dim); font-size: 11px; word-break: break-all; }
.statusline { display: flex; gap: 6px; align-items: center; color: var(--dim); font-size: 11px; }
button.apply { background: var(--accent); border-color: var(--accent); color: #04121f; }
button.danger { color: var(--mute); border-color: var(--mute); background: transparent; }
button.link { background: transparent; border: 0; padding: 0; font-weight: 600; font-size: 13px; }

[hidden] { display: none !important; }

/* ---------- streams, patch en embed-uitgangen */
table.grid { border-collapse: collapse; min-width: 100%; }
.grid th, .grid td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: middle; white-space: nowrap; }
.grid th { color: var(--dim); font-weight: 500; }
.grid .cell { display: flex; gap: 4px; align-items: center; }
.grid input.num { width: 56px; }
.grid input.url { width: 250px; }
.grid .statusline { max-width: 380px; }
.grid .statusline span:last-child { overflow: hidden; text-overflow: ellipsis; }
.chmeters { display: flex; gap: 2px; align-items: flex-end; min-height: 34px; }
.chm { width: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.chm .bar { width: 6px; height: 24px; background: #0c0d10; position: relative; border-radius: 1px; overflow: hidden; }
.chm .bar div { position: absolute; bottom: 0; left: 0; right: 0; background: var(--on); }
.chm .bar div.hot { background: var(--warn); }
.chm span { font-size: 8px; color: var(--dim); }
.subh { font-size: 12px; font-weight: 600; margin: 14px 0 6px; color: var(--dim); }
.quickpatch { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; color: var(--dim); }
.patch { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; }
.patch .pi { display: flex; gap: 6px; align-items: center; min-width: 0; }
.patch .pi label { width: 96px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.patch select { flex: 1; min-width: 0; }

/* ===================== v4: bewerkingsbalk met vensters, blokken op de strip, patchmatrix, groot LUFS-venster ===================== */

/* blokken op de strip: kleur per soort, heel licht getint; gevuld = bewerking staat aan, streepje = venster open */
.blkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
button.blk { padding: 2px 0; font-size: 9.5px; letter-spacing: .2px; white-space: nowrap; overflow: hidden;
  background: hsl(var(--hue) 9% 19%); border-color: hsl(var(--hue) 12% 29%); color: hsl(var(--hue) 18% 74%); }
button.blk:hover { border-color: hsl(var(--hue) 30% 50%); }
button.blk.act { background: hsl(var(--hue) 38% 42%); border-color: hsl(var(--hue) 45% 52%); color: #0c0e11; font-weight: 600; }
button.blk.open { box-shadow: inset 0 -2px 0 hsl(var(--hue) 60% 65%); }
td .blkgrid { width: 120px; }

/* gain-reduction-balkjes per blok in dezelfde tint */
.strip .gr { height: 5px; background: #121418; border-radius: 2px; overflow: hidden; direction: rtl; }
.gr > div { height: 100%; width: 0; }
.gr.d1 > div { background: hsl(38 75% 55%); }
.gr.d2 > div, .gr.cmp > div { background: hsl(18 80% 56%); }
.gr.lim > div { background: hsl(350 70% 60%); }
.gr.am { direction: ltr; }
.gr.am > div { background: #3fd6c8; }
.gr.am.b > div { background: #ff6fd0; }
.gr.off { opacity: .18; }
.ctl .gr { height: 10px; background: #121418; border-radius: 2px; overflow: hidden; direction: rtl; }
.ctl .gr.am { direction: ltr; }

.strip.hl { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.strip.cue { background: hsl(280 10% 16%); }
.cuebadge { margin-left: auto; font-size: 8px; padding: 0 3px; border-radius: 3px; background: hsl(280 35% 45%); color: #120a18; flex: none; }
.pkrow { display: flex; justify-content: flex-end; height: 13px; margin-bottom: -3px; }
.pk { font-size: 10px; color: var(--dim); cursor: pointer; padding-right: 2px; }
.pk.hot { color: var(--warn); }
.pk.clip { color: #fff; background: var(--mute); border-radius: 2px; padding: 0 3px; }
button.addstrip { width: 28px; flex: none; color: var(--dim); border-style: dashed; font-size: 16px; }
button.addbtn { color: var(--accent); border-color: #2d4a63; background: #17222c; }

/* bewerkingsbalk */
#racksec { margin-top: 10px; background: #111316; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.rackhead { display: flex; align-items: center; gap: 10px; }
.rackhead .sp, .row2 .sp, .lbvals .sp, .lbset .sp { flex: 1; }
#rack { display: flex; gap: 8px; overflow-x: auto; align-items: flex-start; padding: 8px 2px 6px; }
#rackempty { padding: 10px 4px; }
.win { flex: none; width: var(--w, 320px); max-height: 560px; display: flex; flex-direction: column; border-radius: 8px;
  background: hsl(var(--hue) 8% 15%); border: 1px solid hsl(var(--hue) 12% 26%); }
.wtitle { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px 8px 0 0;
  background: hsl(var(--hue) 14% 20%); border-bottom: 1px solid hsl(var(--hue) 12% 26%); white-space: nowrap; }
.wtitle .wblk { font-weight: 700; color: hsl(var(--hue) 40% 72%); }
.wtitle .wch { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.wtitle .sp { flex: 1; }
.wtitle button { padding: 1px 7px; }
button.wbyp.on { background: hsl(var(--hue) 38% 42%); border-color: hsl(var(--hue) 45% 52%); color: #0c0e11; }
.wbody { padding: 8px 10px 10px; overflow-y: auto; }
.wbody h4 { margin: 10px 0 4px; font-size: 11px; color: hsl(var(--hue) 25% 70%); font-weight: 600; }
.wbody .ctl { grid-template-columns: 78px 1fr 64px; }
.wbody .ctl > .cell { grid-column: 2 / -1; min-width: 0; }
.wbody .ctl > .cell select, .wbody .ctl > .cell input[type=text] { width: 100%; min-width: 0; }
.wbody canvas.hmeter { width: 100%; height: 10px; background: #0c0d10; border-radius: 2px; }
.wbody .eqbig { height: 200px; }
.win.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px hsl(var(--hue) 60% 62%); } 100% { box-shadow: 0 0 0 0 transparent; } }
.row2 { display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button.on { background: var(--accent); border-color: var(--accent); color: #04121f; }
.win .seg button.on { background: hsl(var(--hue) 38% 48%); border-color: hsl(var(--hue) 45% 55%); color: #0c0e11; }

/* dynamiek-venster */
.dynview { display: grid; grid-template-columns: 1fr 104px; gap: 6px; align-items: start; }
canvas.scope { width: 100%; height: 104px; background: #0e1013; border-radius: 4px; display: block; }
.dynview canvas.curve { width: 104px; max-width: none; margin: 0; }
.dstate { font-size: 11px; margin: 4px 0 2px; color: var(--dim); }
.dstate.ok { color: var(--on); }
.dstate.mid { color: var(--warn); }
.dstate.shut { color: #d98b3a; }
.sendrow { display: grid; grid-template-columns: 1fr auto 1fr 56px; gap: 4px; align-items: center; margin: 3px 0; }
.sendrow button.sname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.sendrow button.sname.on { background: hsl(var(--hue) 38% 42%); border-color: hsl(var(--hue) 45% 52%); color: #0c0e11; }
.sendrow button.small { font-size: 10px; padding: 2px 4px; }
.sendrow .val input { width: 100%; }
.amover { margin-top: 6px; }
.amrow2 { display: grid; grid-template-columns: 110px 1fr; gap: 6px; align-items: center; margin: 2px 0; font-size: 11px; }
.amrow2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.amrow2.me span { color: var(--text); font-weight: 600; }
.amrow2 .ambar { height: 6px; }
.ambar.a > div { background: #3fd6c8; }
.srcbox { border-top: 1px solid hsl(var(--hue) 12% 24%); border-bottom: 1px solid hsl(var(--hue) 12% 24%); padding: 6px 0; margin: 6px 0; }

/* zwevende panelen en menu's */
.pop { position: fixed; z-index: 50; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); padding: 8px; max-width: 380px; }
.menu { display: flex; flex-direction: column; min-width: 170px; }
.menu button { background: transparent; border: 0; text-align: left; padding: 5px 10px; border-radius: 4px; }
.menu button:hover { background: #333a45; }
.menu button.danger { color: var(--mute); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }
.addpanel { width: 330px; }
.addpanel h4 { margin: 0 0 8px; }
.addpanel .ctl { grid-template-columns: 70px 1fr; }
.addpanel .ctl > .cell { grid-column: 2; }
.addpanel .ctl select, .addpanel .ctl input { width: 100%; }
button.bigchoice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 7px 9px; margin-bottom: 6px; }
button.bigchoice span { color: var(--dim); font-size: 11px; }

/* patchmatrix */
table.pgrid { border-collapse: collapse; margin: 4px 0 10px; }
.pgrid th, .pgrid td { padding: 0; border-bottom: 1px solid #23272e; text-align: center; white-space: nowrap; }
.pgrid th.nm, .pgrid td.nm { text-align: left; padding: 2px 10px 2px 6px; }
.pgrid td.nm { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pgrid th.chk, .pgrid td.chk { padding: 0 4px; }
.pgrid th.sg { color: var(--dim); font-weight: 500; border-left: 2px solid var(--line); padding: 2px 6px; }
.pgrid th.colh { width: 22px; font-size: 9px; color: var(--dim); font-weight: 400; vertical-align: bottom; padding-bottom: 2px; }
.pgrid .first { border-left: 2px solid var(--line); }
.pgrid td.pcell { border-left: 1px solid #23272e; }
.pgrid td.pcell:has(.first) { border-left: 2px solid var(--line); }
.chbar { width: 6px; height: 22px; margin: 0 auto 2px; background: #0c0d10; position: relative; border-radius: 1px; overflow: hidden; }
.chbar div { position: absolute; bottom: 0; left: 0; right: 0; background: var(--on); }
.chbar div.hot { background: var(--warn); }
.pgrid button.pc { width: 22px; height: 19px; border: 0; border-radius: 0; background: transparent; font-size: 10px; padding: 0; font-weight: 700; }
.pgrid button.pc:hover { background: #2c3340; }
.pgrid button.pc.l { background: hsl(140 40% 38%); color: #07120b; }
.pgrid tbody tr:hover td { background: #1a1e24; }
.pgrid tbody tr:hover td.pcell button.pc.l { background: hsl(140 45% 44%); }

/* embed-kanalen */

/* LUFS: klikbaar, groot venster */
.lufs { cursor: pointer; }
.lufs:hover, .lufs.open { border-color: var(--accent); }
.lufsmore { color: var(--dim); font-size: 13px; }
#lufsbig { padding: 10px 16px 12px; background: #0f1114; border-bottom: 1px solid var(--line); }
.lbvals { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.lbv { display: flex; flex-direction: column; }
.lbv .lab { color: var(--dim); font-size: 11px; }
.lbv .v { font-size: 26px; font-weight: 600; min-width: 3.4em; }
.lbv.big .v { font-size: 40px; }
.lbv .v.ok { color: var(--on); } .lbv .v.warn { color: var(--warn); } .lbv .v.bad { color: var(--mute); }
#lufsgraph { width: 100%; height: 190px; background: #0a0b0d; border-radius: 4px; margin: 8px 0; display: block; }
.lbset { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lbset label { color: var(--dim); }
.ctl > label > button { width: 100%; padding: 2px 4px; }

/* ===================== v5: faders + bewerkingsbalk vullen het scherm, blokrijen met standby, compacte vensters ===================== */

#desk { height: calc(100vh - var(--hdr, 52px)); display: flex; flex-direction: column; padding: 8px 16px 0; min-height: 520px; }
main { padding-top: 4px; }
#console { flex: 1 1 0; min-height: 0; overflow-x: auto; overflow-y: hidden; align-items: stretch; padding-bottom: 4px; }
#console .group { align-items: stretch; }
.strip { gap: 4px; padding: 5px; }
.strip .faderwrap { height: auto; flex: 1 1 0; min-height: 90px; }
.strip canvas.mini { height: 22px; }
.strip .name { font-size: 12px; }

/* blokken: één rij per blok, [naam][lampje]; automixer [AM][A][B][lampje] */
.blklist { display: flex; flex-direction: column; gap: 2px; }
.blkrow { display: flex; gap: 2px; align-items: stretch; height: 17px; }
.blkrow button.blk { flex: 1; min-width: 0; position: relative; overflow: hidden; padding: 0 4px; font-size: 9.5px; text-align: left; letter-spacing: .3px;
  background: hsl(var(--hue) 9% 18%); border-color: hsl(var(--hue) 12% 27%); color: hsl(var(--hue) 10% 52%); box-shadow: none; }
.blkrow.act button.blk { background: hsl(var(--hue) 22% 25%); border-color: hsl(var(--hue) 32% 40%); color: hsl(var(--hue) 45% 82%); font-weight: 600; }
.blkrow button.blk.open { border-color: hsl(var(--hue) 55% 62%); box-shadow: inset 3px 0 0 hsl(var(--hue) 55% 62%); }
.blkrow button.blk:hover { border-color: hsl(var(--hue) 40% 55%); }
button.led { flex: none; width: 17px; padding: 0; border-radius: 4px; background: #15171b; border-color: hsl(var(--hue) 12% 27%); position: relative; }
button.led::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #2b3038; }
button.led.on::after { background: hsl(var(--hue) 75% 58%); box-shadow: 0 0 5px hsl(var(--hue) 80% 55%); }
.blkrow.nogrp button.led::after { background: #2b3038; box-shadow: none; }
.ledspace { flex: none; width: 17px; }
.blkrow button.grp { flex: none; width: 17px; padding: 0; font-size: 9px; color: var(--dim); }
.blkrow button.grp.on { background: #3fd6c8; border-color: #3fd6c8; color: #04201d; font-weight: 700; }
.blkrow button.grp.on:nth-of-type(3) { background: #ff6fd0; border-color: #ff6fd0; color: #2a0420; }
/* meterlijntje onderin de blokknop */
.blk .gr.bm { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; background: transparent; border-radius: 1px; direction: rtl; }
.blk .gr.bm.am { direction: ltr; }
.blk .gr.bm > div { background: hsl(var(--hue) 75% 58%); }
.blk .gr.bm.am > div { background: #3fd6c8; }
.blk .gr.bm.am.b > div { background: #ff6fd0; }
.blk .gr.bm.off { opacity: 0; }
.blklist.horiz { flex-direction: row; width: 190px; }
.blklist.horiz .blkrow { flex: 1; }

/* pan op één regel */
.pan { display: flex; align-items: center; gap: 4px; }
.pan input { flex: 1; min-width: 0; }
.pan .panv { width: 24px; text-align: right; font-size: 10px; color: var(--dim); }

/* bewerkingsbalk */
#racksec { flex: 0 0 var(--rackh, 320px); margin-top: 0; padding: 0; background: transparent; border: 0; display: flex; flex-direction: column; min-height: 0; }
#racksplit { flex: none; height: 7px; cursor: ns-resize; position: relative; }
#racksplit::after { content: ''; position: absolute; left: 45%; right: 45%; top: 2px; height: 3px; border-radius: 2px; background: #2c3139; }
#racksplit:hover::after { background: var(--accent); left: 0; right: 0; }
.rackbody { flex: 1; min-height: 0; display: flex; gap: 6px; position: relative; background: #111316; border: 1px solid var(--line); border-radius: 8px 8px 0 0; padding: 6px 6px 0; }
.rackside { flex: none; display: flex; flex-direction: column; gap: 4px; width: 20px; }
.rackside button { padding: 4px 0; font-size: 10px; color: var(--dim); }
#rackclear, #racksort { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 0; }
#rack { flex: 1; min-width: 0; height: 100%; padding: 0 0 6px; align-items: stretch; }
#rackempty { position: absolute; left: 40px; top: 14px; right: 20px; }
#racksec.collapsed { flex-basis: 34px; }
#racksec.collapsed #rack, #racksec.collapsed #rackclear, #racksec.collapsed #racksort, #racksec.collapsed #rackempty { display: none; }
.win { height: 100%; max-height: none; }
.wtitle { padding: 3px 6px 3px 8px; }
.wtitle button { padding: 0 6px; font-size: 11px; }
.wbody { padding: 6px 8px 8px; }
.wbody .ctl { margin: 2px 0; grid-template-columns: 70px 1fr 60px; gap: 5px; }
.wbody .ctl input[type=text] { padding: 1px 4px; }
.wbody .row2 { margin-top: 6px; }
.wbody h4 { margin: 6px 0 2px; }

/* inklapbaar (pijltje) */
details.fold { margin: 4px 0; border-top: 1px solid hsl(var(--hue) 12% 24%); border-bottom: 1px solid hsl(var(--hue) 12% 24%); }
details.fold > summary { cursor: pointer; padding: 3px 0; color: hsl(var(--hue) 25% 72%); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.fold > summary .dot { width: 7px; height: 7px; }
details.fold[open] > summary { color: var(--text); }
.foldbody { padding: 2px 0 6px; }
.srcbox { border: 0; padding: 0; margin: 0; }
.srcfields { gap: 2px; margin: 2px 0; }

/* EQ compact: grafiek lager, vier banden naast elkaar */
.wbody .eqbig { height: 128px; }
.w-eq .bands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.w-eq .band { padding-left: 6px; }
.w-eq .band .hd { gap: 4px; margin-bottom: 2px; }
.w-eq .band .hd select { flex: 1; min-width: 0; font-size: 11px; }
.w-eq .band .hd button { padding: 0 6px; }
.w-eq .band .ctl { grid-template-columns: 10px minmax(0, 1fr) 38px; gap: 3px; margin: 1px 0; }
.w-eq .band .ctl .val input { font-size: 11px; padding: 0; }

/* dynamiek compact */
.dtop { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.dtop .sp { flex: 1; }
.dtop .dstate { margin: 0; }
.dynview { grid-template-columns: 1fr 72px; }
canvas.scope { height: 72px; }
.dynview canvas.curve { width: 72px; }

/* automixer-venster: alle kanalen */
.amhead, .amrow3 { display: grid; grid-template-columns: minmax(0, 1fr) 66px 17px 70px 34px 70px; gap: 5px; align-items: center; }
.amhead { font-size: 10px; color: var(--dim); margin-bottom: 2px; }
.amrow3 { padding: 2px 3px; border-radius: 4px; }
.amrow3 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.amrow3 .seg button { padding: 0 6px; font-size: 10px; }
.amrow3 .wv { font-size: 10px; color: var(--dim); text-align: right; }
.amrow3 .ambar { height: 7px; background: #121418; border-radius: 2px; overflow: hidden; }
.amrow3 .ambar > div { height: 100%; background: #3fd6c8; }
.amrow3.gb .ambar > div { background: #ff6fd0; }
.amrow3.gb .seg button.on { background: #ff6fd0; border-color: #ff6fd0; color: #2a0420; }
.amrow3.nogrp button.led::after { background: #2b3038; box-shadow: none; }
.amrow3.nogrp .nm { color: var(--dim); }
.amrow3.muted { opacity: .6; }
.amrow3.muted .nm { color: var(--mute); text-decoration: line-through; }
.amrow3.flash { animation: rowflash 1.2s ease-out; }
@keyframes rowflash { 0% { background: hsl(175 40% 30%); } 100% { background: transparent; } }
.amlist { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }

/* blokken twee per rij; automixer en sends over de hele breedte */
.blklist:not(.horiz) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.blklist:not(.horiz) .blkrow.b-am, .blklist:not(.horiz) .blkrow.b-snd, .blklist:not(.horiz) .blkrow.b-cl { grid-column: 1 / -1; }
.blklist:not(.horiz) .blkrow { gap: 1px; }
.blklist:not(.horiz) button.led, .blklist:not(.horiz) .ledspace, .blklist:not(.horiz) .blkrow button.grp { width: 15px; }
.blklist:not(.horiz) .blkrow button.blk { padding: 0 3px; letter-spacing: 0; }

/* ---- beeld: zwevend venster met de video van een stream (beeld.js), en het losse venster beeld.html */
.beeldwin { position: fixed; right: 16px; bottom: 16px; z-index: 50; width: 400px; height: 262px; min-width: 220px; min-height: 150px;
  display: flex; flex-direction: column; background: #000; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .55); overflow: hidden; resize: both; }
.beeldwin[hidden] { display: none; }
.beeldbar { display: flex; gap: 6px; align-items: center; padding: 3px 6px; background: var(--panel); border-bottom: 1px solid var(--line); cursor: move; user-select: none; }
.beeldbar select { max-width: 45%; }
.beeldbar button { padding: 1px 6px; }
.beeldsync { flex: 1; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beeldsync.ok { color: var(--on); }
.beeldsync.bad { color: var(--warn); }
.beeldwin video, .beeldpage video { flex: 1; min-height: 0; width: 100%; background: #000; object-fit: contain; }
.beeldpage { height: 100vh; display: flex; flex-direction: column; background: #000; }
.beeldpage .beeldbar { cursor: default; }
.hstat.bad { color: var(--warn); }

/* ---- routing: de grote matrix (ingangen en uitgangen) en het paneel om een verbinding in te stellen */
.rgrid th.sg.conn { padding: 0; }
.rgrid th.sg select { font-size: 11px; padding: 1px 2px; }
.connbtn { display: inline-flex; gap: 5px; align-items: center; background: transparent; border: 1px solid transparent; padding: 2px 6px; white-space: nowrap; }
.connbtn:hover { border-color: var(--dim); background: var(--panel2); }
.connbtn small { color: var(--dim); font-weight: 400; }
.rgrid td.pcell.na { background: repeating-linear-gradient(135deg, transparent 0 4px, #1b1e24 4px 6px); }
.rgrid tr.rsec td { text-align: left; padding: 8px 6px 3px; border-bottom: 1px solid var(--line); background: var(--panel); }
.rgrid .cell { display: flex; gap: 8px; align-items: center; }
.rgrid tr.rsec .statusline { max-width: 420px; overflow: hidden; }
.rgrid tr.rout td.nm .hint { padding-left: 14px; }
.conned { display: flex; flex-direction: column; gap: 8px; width: 360px; }
.conntitle { color: var(--dim); }
.conntitle b { color: var(--text); }
.cgrid { display: grid; grid-template-columns: 92px 1fr; gap: 5px 8px; align-items: center; }
.cfield { display: contents; }
.cfield > span { color: var(--dim); }
.cfield input[type=text], .cfield input[type=number], .cfield select { width: 100%; min-width: 0; }
.cfield input[type=checkbox] { justify-self: start; }
.cbtns { display: flex; gap: 6px; align-items: center; }

/* ---- debugpaneel (debug.js) */
.dbgpanel { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: min(760px, calc(100vw - 32px)); max-height: 60vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); font-size: 11px; }
.dbghead { display: flex; gap: 8px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.dbghead b { flex: 1; }
.dbgbody { padding: 6px 8px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.dbgverdict { padding: 4px 6px; border-radius: 4px; background: var(--panel2); }
.dbgverdict.ok { color: var(--on); } .dbgverdict.warn { color: var(--warn); } .dbgverdict.bad { color: var(--mute); }
.dbgline { display: flex; gap: 8px; } .dbglab { color: var(--dim); width: 70px; flex: none; }
.dbglog { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 4px; font-family: ui-monospace, monospace; }
.dbgev b { font-weight: 600; } .dbgev.server b { color: var(--mute); } .dbgev.netwerk b { color: var(--warn); }
.dbgev.browser b { color: var(--eq); } .dbgev.monitor b, .dbgev.beeld b { color: var(--accent); }

/* vensters in de bewerkingsbalk verslepen */
.wtitle { cursor: grab; touch-action: none; }
.win.dragging { opacity: .75; outline: 2px dashed hsl(var(--hue) 50% 60%); outline-offset: -2px; }
.win.dragging .wtitle { cursor: grabbing; }
body.dragwin { user-select: none; cursor: grabbing; }

/* DCA: eigen achtergrondkleur */
.strip.dca { background: hsl(205 28% 16%); border-color: hsl(205 32% 30%); }
.strip.dca .name { color: hsl(205 75% 76%); cursor: default; }
.strip.dca .dcamem { font-size: 10px; padding: 2px 0; background: hsl(205 25% 21%); border-color: hsl(205 30% 32%); color: hsl(205 45% 80%); }
.dcatag { margin-left: auto; font-size: 8px; padding: 0 3px; border-radius: 3px; background: hsl(205 65% 62%); color: #06121c; flex: none; }
.cuebadge:not([hidden]) + .dcatag { margin-left: 2px; }
button.mute.dcamute:not(.on) { border-color: var(--mute); color: var(--mute); animation: dcamute 1s steps(2) infinite; }
@keyframes dcamute { 50% { background: hsl(355 45% 24%); } }
.dcapick { display: flex; flex-wrap: wrap; gap: 4px; }
.dcapick button { padding: 1px 8px; font-size: 11px; }
.dcapick button.on { background: hsl(205 65% 58%); border-color: hsl(205 65% 66%); color: #06121c; }
.dcapop { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.dcarows { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; }
.dcarows label { white-space: nowrap; cursor: pointer; }
.dcapop .row2 { margin-top: 2px; }

/* namen in de routingmatrix */
.pgrid th.colh .vn { display: block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 96px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; margin: 0 auto 3px; font-size: 10px; color: var(--text); }
.pgrid th.colh .vn:empty { display: none; }
.pgrid th.colh { cursor: default; }
.pgrid td.nm .lname { color: var(--text); }
.renamepop { display: flex; gap: 6px; align-items: center; }
.renamepop label { color: var(--dim); white-space: nowrap; }
.mononote { align-self: center; color: var(--dim); }
.mononote[hidden] { display: none; }

/* kopiëren en plakken */
.wtitle button.wclip { font-size: 10px; padding: 0 5px; color: var(--dim); }
.wtitle button.wclip:hover:not(:disabled) { color: var(--text); }
button.wclip:disabled { opacity: .35; cursor: default; }
button.wclip.ok { color: var(--on); border-color: var(--on); }

/* verbinding: volledig / zuinig (📶) */
#netbtn { min-width: 7.6em; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
#netbtn .ndot { width: 7px; height: 7px; border-radius: 50%; background: var(--on); flex: none; }
#netbtn[data-q="warn"] .ndot { background: var(--warn); }
#netbtn[data-q="bad"] .ndot { background: var(--mute); }
#netbtn.lite { border-color: hsl(38 70% 45%); color: hsl(38 90% 70%); }
.netpanel { display: flex; flex-direction: column; gap: 8px; width: 470px; }
.pop:has(> .netpanel) { max-width: none; }
.netpanel .seg button { padding: 3px 10px; }
.netnow { color: var(--text); }
.nettab { border-collapse: collapse; width: 100%; font-size: 11px; }
.nettab th, .nettab td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.nettab th { color: var(--dim); font-weight: 500; }
.nettab td.cur { color: var(--text); background: hsl(205 25% 18%); }
.nettab td:not(.cur) { color: var(--dim); }
.nettab select { font-size: 11px; padding: 0 2px; }
.netlive { color: var(--dim); font-size: 11px; }
.toast { position: fixed; right: 16px; bottom: 20px; z-index: 60; max-width: 360px; padding: 10px 12px; border-radius: 8px;
  background: hsl(38 40% 18%); border: 1px solid hsl(38 60% 40%); color: hsl(38 80% 85%); box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: opacity .8s; }
.toast.gone { opacity: 0; }

/* ===================== v6: menu met pagina's, scènes rechts, master vast rechts ===================== */

/* console of pagina (routing, matrix-uitgangen) links, scènes rechts ernaast: die scrollen niet mee */
#deskrow { flex: 1 1 0; min-height: 0; display: flex; gap: 6px; }
#deskrow > #console { flex: 0 1 auto; min-width: 0; }   /* scènes direct naast de master; te breed: scrollen, scènes blijven rechts */
#page { flex: 1 1 auto; min-width: 0; overflow: auto; background: #101215; border-radius: 8px; padding: 0 12px 12px; }
#page[hidden] { display: none; }
.pagebar { position: sticky; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 0; background: #101215; }
.pagebar .sp { flex: 1; }
#pagehint { color: var(--dim); }
.pg[hidden] { display: none; }

/* master blijft rechts staan als de kanalen breder zijn dan het scherm */
#console .group.mastergrp { position: sticky; right: 0; z-index: 2; box-shadow: -10px 0 14px -8px rgba(0,0,0,.85); }

/* scènes: smal lipje rechts, klikken = uitklappen */
#scenes { flex: none; display: flex; min-height: 0; padding-bottom: 6px; margin-left: auto; }   /* altijd tegen de rechterrand */
#scenetab { width: 22px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 8px; background: #101215; color: var(--dim); border-radius: 6px; }
#scenetab:hover { color: var(--text); border-color: var(--accent); }
#scenetab .vt { writing-mode: vertical-rl; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; }
#scenetab .vt.cur { color: var(--accent); text-transform: none; letter-spacing: .5px; max-height: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#scenes .scenebody { display: none; width: 170px; flex-direction: column; gap: 6px; background: #101215; border: 1px solid var(--line); border-radius: 8px; padding: 6px; min-height: 0; }
#scenes:not(.collapsed) #scenetab { display: none; }
#scenes:not(.collapsed) .scenebody { display: flex; }
.scenehead { display: flex; align-items: center; gap: 6px; color: var(--dim); }
.scenehead .sp { flex: 1; }
.scenehead button { padding: 0 8px; }
#scenebuttons { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
#scenebuttons button { text-align: left; padding: 5px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
#scenebuttons button.current { background: var(--accent); border-color: var(--accent); color: #04121f; }
.scenesave { display: flex; flex-direction: column; gap: 4px; }
.scenesave input { width: 100%; }

/* klein ✕ (verwijderen) in een stripnaam of tabelrij */
button.xbtn { flex: none; padding: 0 4px; font-size: 10px; line-height: 14px; color: var(--dim); background: transparent; border-color: transparent; }
button.xbtn:hover { color: #fff; background: var(--mute); border-color: var(--mute); }
.strip .name button.xbtn { margin-left: auto; }
.pagemenu { min-width: 280px; }
.pagemenu button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; }
.pagemenu button span { color: var(--dim); font-size: 11px; }
.pagemenu button.cur { background: #24303d; }
#scenebuttons .hint { white-space: normal; word-break: normal; overflow-wrap: break-word; }
/* smallere schermen: eerst het LUFS-verloopje weg en de monitor wat smaller, dan merk en "verbonden" (het
   bolletje blijft; is de verbinding weg, dan staat de tekst er wel). Nog smaller: rechts naar een tweede regel. */
@media (max-width: 1720px) {
  #lufshist { display: none; }
  .monitor #monmeter { width: 90px; }
  .monitor #monvol { width: 70px; }
}
@media (max-width: 1560px) {
  .brand, #conntext.up { display: none; }
}
/* vinkje "lipsync" (geluid wacht op beeld) in de balk van het beeldvenster */
.beeldwait { display: flex; align-items: center; gap: 3px; color: var(--dim); font-size: 11px; white-space: nowrap; cursor: pointer; }
.beeldwait input { margin: 0; }
.beeldwait:has(input:checked) { color: var(--on); }
#monlat.warn { color: var(--warn); }

/* kop: statusvelden met een VASTE breedte (niet min-width): ook bij "DSP 125.5%", "⏱ 1216 ms" of "+1358 ms"
   verschuift er niets. Past het niet, dan wordt het afgekapt; de volledige waarde staat in de tooltip. */
#conntext { display: inline-block; width: 6.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#load.fixed { width: 3.9em; min-width: 0; display: inline-block; white-space: nowrap; }
#latency.hstat { width: 6.6em; min-width: 0; flex: none; overflow: hidden; white-space: nowrap; }
#sync { width: 4.2em; min-width: 0; flex: none; }
#monlat.fixed { width: 5.4em; min-width: 0; flex: none; overflow: hidden; text-overflow: ellipsis; }

/* scènes: naam + exporteren + verwijderen per regel */
#scenebuttons .scenerow { display: flex; gap: 2px; flex: none; }
#scenebuttons .scenerow .sname { flex: 1; min-width: 0; }
#scenebuttons .scenerow .sx { flex: none; width: 22px; padding: 0; text-align: center; color: var(--dim); opacity: .35; }
#scenebuttons .scenerow:hover .sx { opacity: 1; }
#scenebuttons .scenerow .sx:hover { color: var(--text); }
#scenebuttons .scenerow .sx.del:hover { color: var(--mute); border-color: var(--mute); }
#scenebuttons .scenerow.current .sname { background: var(--accent); border-color: var(--accent); color: #04121f; }
@media (hover: none) { #scenebuttons .scenerow .sx { opacity: 1; } }