/* WILDFM Radio Studio — Studio Objects (ADR-001).

   Tokens komen uit de theme-engine (app/js/objects/theme.js, port van de

   backoffice theme.py): 21 paletten × dark/light. Onderstaande compatibiliteits-

   laag vertaalt de oude object-tokens naar de backoffice-variabelen, zodat de

   object-CSS ongewijzigd blijft en met élk palet en beide modi meekleurt. */

:root {
  --surface-2: rgb(var(--surface2-rgb));

  --surface-deep: rgba(var(--bg-rgb), 0.55);

  --accent-2: var(--accent2);

  --ok: var(--success);

  --mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --bevel: 0 1px 0 var(--bevel-top) inset;

  --elev: var(--elev-2);

  --obj-radius: var(--radius);

  --layer-0: var(--warn);

  --layer-1: var(--accent);

  --layer-2: #9b8cff;

  --layer-3: var(--warn);

  --layer-4: var(--accent2);

  --layer-5: #f26dbb;

  --layer-6: #4dd0e1;

  --onair: var(--danger);

  --onair-glow: 0 0 22px rgba(255, 107, 107, 0.45);
}

html[data-mode="light"] {
  --layer-2: #6a5acd;

  --onair: #dc2626;

  --onair-glow: 0 0 18px rgba(220, 38, 38, 0.35);
}

/* Achtergrond: gradiënt-thema's (sunset/aurora/galaxy/nordic/cosmos/coral/neon/prism/inferno),

   geanimeerd bij de aurora-thema's — zelfde gedrag als de backoffice. */

body {
  background: var(--bg-gradient, var(--bg));

  background-attachment: fixed;
}

html[data-theme="nordic"] body,
html[data-theme="cosmos"] body,
html[data-theme="coral"] body,
html[data-theme="neon"] body,
html[data-theme="prism"] body,
html[data-theme="inferno"] body {
  background-size: 400% 400%;

  animation: aurora-shift 18s ease-in-out infinite;
}

html[data-theme="cosmos"] body {
  animation-duration: 22s;
  animation-timing-function: ease-in-out;
  animation-name: aurora-shift;
}

html[data-theme="coral"] body {
  animation-duration: 16s;
}

@keyframes aurora-shift {
  0%,
  100% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="nordic"] body,
  html[data-theme="cosmos"] body,
  html[data-theme="coral"] body,
  html[data-theme="neon"] body,
  html[data-theme="prism"] body,
  html[data-theme="inferno"] body {
    animation: none;
    background-size: 100% 100%;
  }
}

/* ── Object-schil ─────────────────────────────────────────────────────────── */

.obj {
  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  min-height: 0;

  height: 100%;

  background: radial-gradient(120% 100% at 0% 0%, rgba(var(--accent-rgb), 0.055), transparent 48%),
    linear-gradient(180deg, var(--surface-sheen), transparent 32%), var(--surface);

  border: 1px solid var(--border-light);

  border-radius: var(--obj-radius);

  box-shadow:
    var(--elev-2),
    inset 0 1px var(--bevel-top),
    inset 0 -1px var(--bevel-bottom);

  padding: 14px 16px;

  overflow: hidden;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.obj-grid:not(.obj-grid-editing) .obj-cell > .obj:hover {
  transform: translateY(-2px);

  border-color: rgba(var(--accent-rgb), 0.38);

  box-shadow:
    var(--elev-3),
    inset 0 1px var(--bevel-top);
}

.obj-head {
  position: relative;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 12px;

  padding-bottom: 9px;

  border-bottom: 1px solid var(--border);

  font-size: 11px;

  letter-spacing: 1.4px;

  text-transform: uppercase;

  color: var(--text-dim);
}

.obj-head::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 34px;

  height: 2px;

  border-radius: 2px;

  background: var(--accent-grad);

  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.obj-head[hidden] {
  display: none;
}

.obj-head-right {
  margin-left: auto;
  display: flex;
  gap: 6px;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}

/* Config-radertje (#134): ⚙ vóór de statuslampjes, per kaart door de host. */

.obj-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
}

.obj-gear svg {
  width: 14px;
  height: 14px;
}

.obj-gear:hover {
  color: var(--text);
  background: var(--surface-2, rgba(var(--accent-rgb), 0.08));
}

/* Instellingen-popover — zweeft op document-niveau naast de kaart. */

/* In-card instellingen (#141): velden in een strak uitgelijnd grid —
   label links, control rechts, bronnen en actie onderaan. */
/* Kop in obj-head stijl: klein caps-label + felle titel + accent-onderstreep. */

.obj-config .ocf-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--border);
}

.obj-config .ocf-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}

.obj-config .ocf-head-label {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.obj-config .ocf-head-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-bright);
}

.obj-config .ocf-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obj-config .ocf-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(0, 1.4fr);
  align-items: center;
  gap: 12px;
}

.obj-config .ocf-key {
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
}

.obj-config .ocf-row input[type="checkbox"] {
  justify-self: start;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.obj-config input[type="text"],
.obj-config input[type="number"] {
  width: 100%;
  max-width: 220px;
  background: var(--surface-2, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 9px;
  font: inherit;
}

.obj-config input[type="text"]:focus,
.obj-config input[type="number"]:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

.obj-config .ocf-empty {
  color: var(--muted);
  text-align: center;
  padding: 18px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  font-size: 11.5px;
}

/* #144 — tabbladen in het config-scherm: segment-track in huisstijl,
   actieve tab als accent-pill met gloeiend icoon. */
.obj-config .ocf-tabs {
  display: flex;
  gap: 2px;
  margin: 12px 0 2px;
  padding: 3px;
  background: var(--surface-2, rgba(var(--accent-rgb), 0.05));
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow-x: auto;
}

.obj-config .ocf-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.16s ease,
    background 0.16s ease;
}

.obj-config .ocf-tab svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.obj-config .ocf-tab:hover {
  color: var(--text);
}

.obj-config .ocf-tab.is-on {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}

.obj-config .ocf-tab.is-on svg {
  filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.7));
}

/* #148 — scroll-regio: tabs/kop/footer staan vast, alleen de pane-inhoud
   scrollt binnen de kaart. */
.obj-config .ocf-panes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

.obj-config .ocf-panes::-webkit-scrollbar {
  width: 6px;
}

.obj-config .ocf-panes::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.obj-config .ocf-pane {
  display: none;
  padding: 8px 0 4px;
}

.obj-config .ocf-pane.is-on {
  display: block;
}

.obj-config .ocf-sum-row {
  display: grid;
  grid-template-columns: minmax(76px, 110px) 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
}

.obj-config .ocf-sum-row:last-child {
  border-bottom: 0;
}

.obj-config .ocf-sum-row .ocf-key {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Status-LED in de summary (zelfde kleuren als .obj-led): ON AIR = rood,
   GELADEN = amber, leeg = dim. */
.obj-config .ocf-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: #3a4656;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  vertical-align: 1px;
}

.obj-config .ocf-led.is-air {
  background: var(--bad, #e05252);
  box-shadow: 0 0 8px rgba(224, 82, 82, 0.75);
}

.obj-config .ocf-led.is-load {
  background: var(--warn, #f0a63a);
  box-shadow: 0 0 8px rgba(240, 166, 58, 0.7);
}

.obj-config .ocf-led.is-off {
  opacity: 0.55;
}

/* Bronnenlijst als chips met LED: @rt = realtime-accent, rest = dim. */
.obj-config .ocf-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.obj-config .ocf-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: var(--surface-2, rgba(var(--accent-rgb), 0.05));
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--text);
}

.obj-config .ocf-src-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.obj-config .ocf-src-led.is-rt {
  background: var(--accent);
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}

.obj-config .ocf-src-led.is-rest {
  background: var(--muted);
  opacity: 0.6;
}

/* #146 — bron-chips tonen de echte bronstatus: ok / laden·leeg / geblokkeerd. */
.obj-config .ocf-src-led.is-ok {
  background: var(--ok, #35c26e);
  box-shadow: 0 0 6px rgba(53, 194, 110, 0.7);
}

.obj-config .ocf-src-led.is-warn {
  background: var(--warn, #f0a63a);
  box-shadow: 0 0 6px rgba(240, 166, 58, 0.7);
}

.obj-config .ocf-src-led.is-bad {
  background: var(--bad, #e05252);
  box-shadow: 0 0 6px rgba(224, 82, 82, 0.7);
}

/* #146 — testknop naast de uitgang-pulldown: ping naar het gekozen apparaat. */
.obj-config .ocf-dev-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.obj-config .ocf-dev-cell .ocf-select {
  flex: 1;
}

.obj-config .ocf-test {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 6px 9px;
  background: var(--surface-2, rgba(var(--accent-rgb), 0.06));
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.obj-config .ocf-test svg {
  width: 12px;
  height: 12px;
}

.obj-config .ocf-test:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.obj-config .ocf-test:disabled {
  opacity: 0.5;
}

/* #146 — laag-bezettingskaart op de Lagen-tab: 4 vakken, rol + eigenaar. */
.obj-config .ocf-laymap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.obj-config .ocf-lay {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2, rgba(var(--accent-rgb), 0.04));
  font-size: 10px;
  min-width: 0;
}

.obj-config .ocf-lay b {
  font-size: 11px;
  color: var(--text);
}

.obj-config .ocf-lay span {
  color: var(--text-dim);
}

.obj-config .ocf-lay i {
  font-style: normal;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-config .ocf-lay.is-mine {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: rgba(var(--accent-rgb), 0.1);
}

.obj-config .ocf-lay.is-mine i {
  color: var(--accent);
  font-weight: 600;
}

.obj-config .ocf-lay.is-taken i {
  color: var(--warn);
}

.obj-config .ocf-lay.is-free i {
  color: var(--muted);
}

/* #145 — apparaatkeuze: bus-rijen gebruiken de gewone ocf-row/select stijl;
   alleen de hint eronder is eigen. De naam-ontsluiting is een notice-rij met
   slot-icoon: amber = nog niet gevraagd, rood = geweigerd. */
.obj-config .ocf-dev-hint {
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--muted);
}

.obj-config .ocf-dev-lock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(240, 166, 58, 0.4);
  background: rgba(240, 166, 58, 0.08);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text);
}

.obj-config .ocf-dev-lock svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--warn);
}

.obj-config .ocf-dev-lock > span {
  flex: 1;
}

.obj-config .ocf-dev-lock .obj-btn {
  flex: none;
  font-size: 10.5px;
  padding: 5px 10px;
}

.obj-config .ocf-dev-lock.is-denied {
  border-color: rgba(224, 82, 82, 0.45);
  background: rgba(224, 82, 82, 0.08);
}

.obj-config .ocf-dev-lock.is-denied svg {
  color: var(--bad, #e05252);
}

.obj-config .ocf-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.obj-config .ocf-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
}

.obj-config .ocf-note-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok, #35c26e);
  box-shadow: 0 0 6px rgba(53, 194, 110, 0.7);
  flex: none;
}

/* #141 — custom pulldown: huisstijl-knop met chevron + zwevend menu. */
.obj-config .ocf-select {
  position: relative;
}

.obj-config .ocf-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  width: 100%;
  max-width: 220px;
  padding: 6px 10px;

  font: inherit;
  color: var(--text-bright);
  cursor: pointer;

  background: var(--surface-2, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.obj-config .ocf-select-btn:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}

.obj-config .ocf-select.is-open .ocf-select-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.obj-config .ocf-select-btn svg {
  width: 13px;
  height: 13px;
  transition: transform 0.18s ease;
}

.obj-config .ocf-select.is-open .ocf-select-btn svg {
  transform: rotate(180deg);
}

.obj-config .ocf-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 8;

  display: flex;
  flex-direction: column;
  padding: 4px;

  background: var(--surface);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 8px;

  box-shadow: var(--elev-2);
  max-height: 180px;
  overflow: auto;
}

.obj-config .ocf-menu[hidden] {
  display: none;
}

.obj-config .ocf-opt {
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  text-align: left;

  font: inherit;
  color: var(--text);
  background: none;
  cursor: pointer;
}

.obj-config .ocf-opt:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.obj-config .ocf-opt.is-sel {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent);
  font-weight: 700;
}

/* Bezette letters (unique): disabled, grijs, niet klikbaar. */
.obj-config .ocf-opt:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.obj-config .ocf-opt:disabled:hover {
  background: none;
  color: var(--text);
}

/* Toepassen als primaire actie-knop. */
.obj-config .ocf-apply {
  padding: 7px 18px;
  border-radius: 7px;
  font-weight: 700;
  cursor: pointer;

  background: var(--accent-grad, var(--accent));
  color: var(--on-accent, #fff);

  border: 1px solid transparent;
  box-shadow:
    var(--bevel),
    0 2px 10px rgba(var(--accent-rgb), 0.25);
}

.obj-config .ocf-apply:hover:not(:disabled) {
  filter: brightness(1.08);
}

.obj-config .ocf-apply:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* Bron-LED's per object: IoT (socket) + REST — rechts in de kop, uitgelijnd. */

.obj-leds {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.obj-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3a4656;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
  flex: none;
}

.obj-led-iot.led-ok,
.obj-led.ok {
  background: var(--ok, #35c26e);
  box-shadow: 0 0 8px rgba(53, 194, 110, 0.75);
}

.obj-led-iot.warn,
.obj-led.warn {
  background: var(--warn, #f0a63a);
  box-shadow: 0 0 8px rgba(240, 166, 58, 0.7);
}

.obj-led-iot.bad,
.obj-led.bad {
  background: var(--bad, #e05252);
  box-shadow: 0 0 8px rgba(224, 82, 82, 0.75);
}

.obj-led-rest.off {
  background: #3a4656;
  opacity: 0.55;
}

/* #141 — obj-views is het slide-frame: body en config liggen erin, de config
   schuift van rechts over de body heen zodra de kaart obj-cfg-open krijgt.
   Geen eigen border-radius: de kaartronding hoort bij .obj (buiten de
   padding); een geërfde radius hier knipt in de hoeken uit de inhoud —
   alle objecten. */
.obj-views {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  border-radius: 0;
}

.obj-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.obj-config {
  position: absolute;
  inset: 0;
  z-index: 6;

  display: flex;
  flex-direction: column;
  gap: 10px;

  /* #148 — kop, tabs en footer blijven vast; alleen .ocf-panes scrollt. */
  padding: 14px;
  overflow: hidden;

  border-radius: var(--radius-sm);

  background: linear-gradient(160deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)) 75%);

  transform: translateX(102%);

  transition:
    transform 0.28s ease,
    visibility 0.28s;

  visibility: hidden;
}

.obj-cfg-open .obj-config {
  transform: none;
  visibility: visible;
}

.obj-cfg-open .obj-gear {
  color: var(--accent);
}

.obj-gear svg {
  transition: transform 0.28s ease;
}

.obj-cfg-open .obj-gear svg {
  transform: rotate(70deg);
}

.obj-statebox {
  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: var(--text-dim);

  font-size: 15px;

  padding: 18px 12px;

  border: 1px dashed var(--border-light);

  border-radius: 10px;

  margin-bottom: 10px;
}

.obj-statebox[hidden] {
  display: none;
}

/* Vier verplichte toestanden. */

.obj-state-loading .obj-statebox {
  color: var(--text-dim);
}

.obj-state-loading .obj-body {
  opacity: 0.35;
}

.obj-state-empty .obj-statebox {
  color: var(--warn);
  border-color: rgba(243, 156, 18, 0.45);
}

.obj-state-empty .obj-body {
  opacity: 0.35;
}

.obj-state-blocked .obj-statebox {
  color: var(--danger);
  border-color: rgba(255, 107, 107, 0.45);
}

.obj-state-blocked .obj-body {
  opacity: 0.25;
  pointer-events: none;
}

.obj-state-ready .obj-body {
  opacity: 1;
}

/* ── Gedeelde bouwstenen voor objecten ────────────────────────────────────── */

.obj .tag {
  font-size: 10.5px;

  padding: 3px 8px;

  border-radius: 6px;

  background: var(--surface-2);

  border: 1px solid var(--border);

  color: var(--text);

  font-family: var(--mono);

  white-space: nowrap;
}

.obj .tag-l0 {
  border-color: var(--layer-0);
  color: var(--layer-0);
}

.obj .tag-l1 {
  border-color: var(--layer-1);
  color: var(--layer-1);
}

.obj .tag-l2 {
  border-color: var(--layer-2);
  color: var(--layer-2);
}

.obj .tag-l3 {
  border-color: var(--layer-3);
  color: var(--layer-3);
}

.obj .tag-onair {
  background: var(--onair);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: 0 3px 10px rgba(var(--accent-rgb), 0.18);
}

.obj .tag-live {
  background: var(--onair);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
  box-shadow: var(--onair-glow);
}

.obj .tag-next {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  font-weight: 800;
}

.obj .tag-ok {
  color: var(--accent-2);
  border-color: rgba(var(--accent2-rgb), 0.5);
}

.obj .tag-warn {
  color: var(--warn);
  border-color: var(--warn);
}

.obj .tag-bad {
  color: var(--danger);
  border-color: var(--danger);
}

.obj .tag-acc {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
}

.obj .tag-dim {
  color: var(--text-dim);
  border-color: var(--border);
}

.obj .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.obj .dim {
  color: var(--text-dim);
}

.obj .bright {
  color: var(--text-bright);
}

.obj .kpi {
  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.055), transparent 65%), var(--surface-deep);

  border: 1px solid var(--border-light);

  border-radius: 10px;

  padding: 10px 12px;

  box-shadow:
    var(--bevel),
    0 6px 18px -15px rgba(var(--bg-rgb), 0.85);
}

.obj .kpi small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.obj .kpi b {
  font-family: var(--mono);
  font-size: clamp(18px, 1.6vw, 24px);
  overflow-wrap: anywhere;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.obj .kpi b.ok {
  color: var(--accent-2);
}

.obj .kpi b.warn {
  color: var(--warn);
}

.obj .kpi b.bad {
  color: var(--danger);
}

.obj-horizon .hz-card,
.obj-program .pg-card,
.obj-monitoring-strip .ms-item,
.obj-queue .qu-list li,
.obj-news .nw-items li,
.obj-jingle-list .jl-item {
  background-image: linear-gradient(145deg, rgba(var(--accent-rgb), 0.045), transparent 68%);

  border-color: var(--border-light);

  box-shadow:
    var(--bevel),
    0 6px 18px -15px rgba(var(--bg-rgb), 0.8);

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.obj-horizon .hz-card:hover,
.obj-program .pg-card:hover,
.obj-monitoring-strip .ms-item:hover,
.obj-queue .qu-list li:hover,
.obj-news .nw-items li:hover,
.obj-jingle-list .jl-item:hover {
  transform: translateY(-1px);

  border-color: rgba(var(--accent-rgb), 0.3);

  box-shadow: var(--bevel), var(--elev-1);
}

.obj .obj-btn {
  min-height: 44px;

  border-radius: 10px;

  border: 1px solid var(--border-light);

  background: linear-gradient(180deg, var(--surface-sheen), transparent 70%), var(--surface-2);

  color: var(--text);

  font: inherit;

  font-weight: 800;

  letter-spacing: 1px;

  font-size: 13px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  box-shadow: var(--bevel), var(--elev-1);

  cursor: pointer;

  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    background-color 0.14s ease,
    box-shadow 0.14s ease;
}

.obj .obj-btn:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: var(--bevel), var(--elev-2);
}

.obj .obj-btn:not(:disabled):active {
  transform: translateY(1px);
}

.obj .obj-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.obj .obj-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Standalone route ─────────────────────────────────────────────────────── */

.obj-standalone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: calc(100vh - 190px);
  min-height: 420px;
}

.obj-standalone-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--text-dim);
}

.obj-standalone-title {
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.obj-standalone-cfg {
  font-family: var(--mono);
}

.obj-back {
  color: var(--accent);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.obj-standalone-host {
  flex: 1;
  min-height: 0;
  display: flex;
  /* #76 — wrap zodat de sibling-editor-dock onder het object valt ipv
     ernaast (de host is flex-row met één .obj-kind). */
  flex-wrap: wrap;
}

.obj-standalone-host > .obj {
  flex: 1;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.obj-grid {
  position: relative;
  display: grid;
  gap: 14px;
  grid-auto-rows: minmax(160px, auto);
}

/* Vlakken tonen altijd compleet: rijen zijn inhoud-hoog, de pagina scrolt als het niet past.

   Alleen lijst-objecten scrollen intern (max-hoogte).

   #160 — eigen hoogte per vlak: een lang vlak (bijv. player met playlist)

   mag zijn rij innemen zonder dat de buren mee-rekken; die houden hun

   eigen inhoudshoogte en hangen boven de rij uit. In edit-mode blijft

   stretch zodat de echte grid-footprint zichtbaar is tijdens indelen. */

.obj-grid:not(.obj-grid-editing) {
  align-items: start;
}

/* Pack-modus (#24): kolommen stapelen zelfstandig flush — 1px-rijbanen met
   JS-gemeten row-spans maken elke kolom een eigen stapel; een lang object
   duwt geen gat meer onder de buren. `row dense` is vereist: anders schuift
   de auto-placement-cursor alleen vooruit en kan een kortere buurkolom het
   gat onder zich niet meer opvullen. Alleen render-modus (geen -editing). */
.obj-grid.obj-grid-pack {
  grid-auto-rows: 1px;
  grid-auto-flow: row dense;
}

.obj-grid.obj-grid-fit {
  grid-auto-rows: auto;
}

.obj-grid .obj-cell > .obj {
  height: auto;
}

/* #65 — vaste H per object (fixh-pin): de cel houdt exact de H±-hoogte,
   het object vult de cel; de inhoud scrollt intern (bv. mx-boom/-lijst)
   of wordt afgekapt door .obj{overflow:hidden}. stretch is nodig omdat de
   grid-cellen anders (align-items:start) op inhoudshoogte krimpen. */
.obj-grid .obj-cell-fixed {
  align-self: stretch;
}
.obj-grid .obj-cell-fixed > .obj {
  height: 100%;
}
.obj-grid:not(.obj-grid-editing) .obj-cell-fixed {
  overflow: hidden;
}

.obj-hour-log .hl-scroll,
.obj-history .hi-list,
.obj-jingle-list .jl-groups {
  max-height: 52vh;
}

.obj-standalone-host .obj-hour-log .hl-scroll,
.obj-standalone-host .obj-history .hi-list,
.obj-standalone-host .obj-jingle-list .jl-groups {
  max-height: none;
}

.obj-cell {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.obj-cell > .obj {
  flex: 1;
}

/* ── Index ────────────────────────────────────────────────────────────────── */

.obj-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.obj-index a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  min-height: 56px;

  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-deep);

  color: var(--text);
  text-decoration: none;
}

.obj-index a:hover {
  border-color: rgba(79, 206, 243, 0.5);
}

.obj-index strong {
  font-family: var(--mono);
  color: var(--accent);
}

.obj-index span {
  font-size: 13px;
  color: var(--text-dim);
}

/* IoT-status per object-blok op de OBJECTEN-pagina. */

.obj-index .obj-rt-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.obj-index .obj-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4656;
  flex: none;
}

.obj-index .obj-led-iot.ok {
  background: var(--ok, #35c26e);
  box-shadow: 0 0 8px rgba(53, 194, 110, 0.75);
}

.obj-index .obj-led-iot.warn {
  background: var(--warn, #f0a63a);
  box-shadow: 0 0 8px rgba(240, 166, 58, 0.7);
}

.obj-index .obj-led-iot.bad {
  background: var(--bad, #e05252);
  box-shadow: 0 0 8px rgba(224, 82, 82, 0.75);
}

.obj-index .obj-led-iot.off {
  background: #3a4656;
  opacity: 0.55;
}

.obj-index .obj-rt-ch {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  padding: 1px 8px;
}

.obj-index .obj-rt-chips {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}

.obj-index .obj-rt-status span.dim {
  font-size: 11px;
}

@media (max-width: 1280px) {
  .obj-grid:not(.obj-grid-editing) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }

  /* Pack-modus valt hier terug op normale rijhoogte: cellen staan op
     grid-area:auto en zouden anders 1px-rijtjes krijgen. */

  .obj-grid.obj-grid-pack:not(.obj-grid-editing) {
    grid-auto-rows: minmax(160px, auto);
  }

  .obj-grid:not(.obj-grid-editing) .obj-cell {
    grid-area: auto !important;
  }

  .obj-grid-editing {
    grid-template-columns: repeat(var(--grid-columns), minmax(220px, 1fr)) !important;
    overflow-x: auto;
  }
}

@media (max-width: 760px) {
  .obj-grid:not(.obj-grid-editing) {
    grid-template-columns: 1fr !important;
  }
}

/* ── Object: now-playing ──────────────────────────────────────────────────── */

.obj-now-playing .onp-grid {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.obj-now-playing .onp-grid.onp-noart {
  grid-template-columns: minmax(0, 1fr) auto;
}

.obj-now-playing .onp-art {
  width: 112px;
  height: 112px;
  border-radius: 12px;
  overflow: hidden;

  background: radial-gradient(circle at 28% 24%, rgba(var(--accent-rgb), 0.28), transparent 58%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));

  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: var(--bevel), var(--elev-2);

  display: flex;
  align-items: center;
  justify-content: center;
}

.obj-now-playing .onp-art-empty {
  font-size: 34px;
  color: var(--text-dim);
}

.obj-now-playing .onp-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.obj-now-playing .onp-meta {
  min-width: 0;
}

.obj-now-playing .onp-artist {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;

  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-now-playing .onp-title {
  font-size: 18px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.obj-now-playing .onp-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.obj-now-playing .onp-time {
  text-align: right;
  line-height: 1;
}

.obj-now-playing .onp-remaining {
  font-size: clamp(40px, 4vw, 58px);
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
}

.obj-now-playing .onp-remaining.onp-warn {
  color: var(--warn);
}

.obj-now-playing .onp-remaining-label {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
}

.obj-now-playing .onp-elapsed {
  font-size: 13px;
  margin-top: 6px;
}

.obj-now-playing .onp-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-deep);
  margin-top: 12px;
  overflow: hidden;
}

.obj-now-playing .onp-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 1s linear;
}

.obj-now-playing .onp-next {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;

  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.12), transparent 75%), var(--surface-deep);

  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  box-shadow: var(--bevel);
  font-size: 14px;
}

.obj-now-playing .onp-next-label {
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}

.obj-now-playing .onp-next-time {
  color: var(--accent-2);
  font-weight: 700;
}

.obj-now-playing .onp-next-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.obj-now-playing .onp-next-line strong {
  color: var(--text-bright);
}

.obj-now-playing .onp-after {
  width: 100%;
  font-size: 13px;
}

.obj-now-playing .onp-after strong {
  color: var(--text);
  font-weight: 600;
}

@media (max-width: 640px) {
  .obj-now-playing .onp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .obj-now-playing .onp-art {
    display: none;
  }

  .obj-now-playing .onp-time {
    text-align: left;
  }
}

/* ── Object: hour-clock ───────────────────────────────────────────────────── */

.obj-hour-clock .hc-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.obj-hour-clock .hc-ring {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.obj-hour-clock .hc-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 10;
}

.obj-hour-clock .hc-ring-fg {
  fill: none;
  stroke: var(--accent-2);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dasharray 1s linear;
}

.obj-hour-clock .hc-ring-txt {
  fill: #fff;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
}

.obj-hour-clock .hc-top {
  flex-wrap: wrap;
}

.obj-hour-clock .hc-clock {
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.obj-hour-clock .hc-sub {
  font-size: 13px;
  margin-top: 6px;
}

.obj-hour-clock .hc-sub b {
  color: var(--accent-2);
  font-weight: 700;
}

.obj-hour-clock .hc-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.obj-hour-clock .kpi b {
  font-size: 22px;
}

/* ── Object: hour-timeline (uurtijdlijn met meelopende playhead) ─────────── */

.obj-hour-timeline .ht-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;

  color: var(--text-dim);
  padding: 0 2px;
  margin-bottom: 3px;
}

.obj-hour-timeline .ht-lane {
  position: relative;
  height: 118px;
  border-radius: 10px;

  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;
}

.obj-hour-timeline .ht-block {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 6px;

  border: 1px solid color-mix(in srgb, var(--layer-1) 80%, #fff 10%);

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--layer-1) 52%, var(--surface-deep)),
    color-mix(in srgb, var(--layer-1) 30%, var(--surface-deep))
  );

  min-width: 2px;
  transition:
    opacity 0.3s,
    filter 0.3s;
  overflow: hidden;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.obj-hour-timeline .ht-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.obj-hour-timeline .ht-cap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 5px;

  padding: 3px 5px 2px;
  font-size: 10px;
  line-height: 1.2;
  overflow: hidden;
  pointer-events: none;

  background: linear-gradient(180deg, rgba(7, 9, 13, 0.5), rgba(7, 9, 13, 0.28));

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.obj-hour-timeline .ht-cap b {
  color: var(--text-bright);
  font-weight: 800;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-hour-timeline .ht-cap i {
  color: rgba(255, 255, 255, 0.8);
  font-style: normal;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.obj-hour-timeline .ht-cap em {
  font-style: normal;
  font-family: var(--mono);
  color: var(--accent);

  white-space: nowrap;
  font-weight: 700;
}

.obj-hour-timeline .ht-wavebox {
  position: relative;
  flex: 1;
  min-height: 0;
}

.obj-hour-timeline .ht-cue {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 2;
}

.obj-hour-timeline .ht-cue-in {
  background: #ffd23f;
  box-shadow: 0 0 6px rgba(255, 210, 63, 0.8);
}

.obj-hour-timeline .ht-cue-out {
  background: #ff4d4d;
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.6);
}

.obj-hour-timeline .ht-cap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px 2px;
  overflow: hidden;
  pointer-events: none;

  background: linear-gradient(180deg, rgba(7, 9, 13, 0.62), rgba(7, 9, 13, 0.1));

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

.obj-hour-timeline .ht-cap b {
  color: var(--text-bright);
  font-weight: 800;
  font-size: 11px;

  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-hour-timeline .ht-cap .ht-sub {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.obj-hour-timeline .ht-cap i {
  color: rgba(255, 255, 255, 0.88);
  font-style: normal;
  font-size: 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.obj-hour-timeline .ht-cap em {
  font-style: normal;
  font-family: var(--mono);
  color: var(--accent);

  font-size: 10px;
  white-space: nowrap;
  font-weight: 700;
}

.obj-hour-timeline .ht-block.narrow .ht-cap {
  display: none;
}

.obj-hour-timeline .ht-block.ht-l0 {
  border-color: #f39c12;

  background: linear-gradient(
    180deg,
    color-mix(in srgb, #f39c12 55%, var(--surface-deep)),
    color-mix(in srgb, #f39c12 34%, var(--surface-deep))
  );
}

.obj-hour-timeline .ht-block.ht-l0::after {
  content: "";
  position: absolute;
  inset: 0;

  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0 4px, transparent 4px 9px);
}

.obj-hour-timeline .ht-block.ht-l2 {
  border-color: var(--layer-2);

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--layer-2) 55%, var(--surface-deep)),
    color-mix(in srgb, var(--layer-2) 34%, var(--surface-deep))
  );
}

.obj-hour-timeline .ht-block.ht-l3 {
  border-color: #e67e22;

  background: linear-gradient(
    180deg,
    color-mix(in srgb, #e67e22 55%, var(--surface-deep)),
    color-mix(in srgb, #e67e22 34%, var(--surface-deep))
  );
}

.obj-hour-timeline .ht-block.is-past {
  opacity: 0.38;
  filter: saturate(0.35);
}

.obj-hour-timeline .ht-block.is-onair {
  border-color: #fff;

  box-shadow:
    0 0 0 1px #fff,
    0 0 18px rgba(var(--accent-rgb), 0.8);
  z-index: 2;
}

.obj-hour-timeline .ht-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;

  background: var(--text-bright);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
  z-index: 3;

  transition: left 1s linear;
  pointer-events: none;
}

.obj-hour-timeline .ht-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 8px var(--accent-glow);
}

.obj-hour-timeline .ht-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
}

.obj-hour-timeline .ht-scale {
  display: flex;
  justify-content: space-between;
}

@media (prefers-reduced-motion: reduce) {
  .obj-hour-timeline .ht-head {
    transition: none;
  }
}

.obj-hour-timeline .ht-preview {
  margin-top: 6px;
}
.obj-hour-timeline .ht-preview-img {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  border-radius: 8px;
  background: #0a0f18;
}
.obj-hour-timeline .ht-preview-cap {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Object: hour-strip (professionele uurtijdlijn) ──────────────────────── */

.obj-hour-strip .hs-ruler {
  position: relative;
  height: 20px;
  margin-bottom: 2px;
  overflow: hidden;
}

.obj-hour-strip .hs-tick {
  position: absolute;
  top: 12px;
  width: 1px;
  height: 5px;

  background: rgba(255, 255, 255, 0.18);
}

.obj-hour-strip .hs-tick.major {
  top: 8px;
  height: 9px;
  background: rgba(255, 255, 255, 0.4);
}

.obj-hour-strip .hs-lab {
  position: absolute;
  top: -2px;
  transform: translateX(3px);

  font-size: 10px;
  color: var(--text-dim);
  pointer-events: none;
}

.obj-hour-strip .hs-bubble {
  position: absolute;
  top: -2px;
  transform: translateX(-50%);

  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--on-accent, #04121c);

  font-size: 10px;
  font-weight: 800;
  font-family: var(--mono);
  box-shadow: var(--accent-glow);

  z-index: 4;
  pointer-events: none;
}

.obj-hour-strip .hs-lane {
  position: relative;
  height: 128px;
  border-radius: 10px;

  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;

  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.obj-hour-strip .hs-sel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  pointer-events: none;

  background: color-mix(in srgb, var(--accent) 22%, transparent);

  border-left: 1px solid rgba(var(--accent-rgb), 0.8);
  border-right: 1px solid rgba(var(--accent-rgb), 0.8);

  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.obj-hour-strip .hs-block {
  position: absolute;
  top: 6px;
  bottom: 6px;
  border-radius: 7px;

  background: var(--card);
  border: 1px solid var(--border);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  transition:
    opacity 0.3s,
    filter 0.3s,
    box-shadow 0.3s;

  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    var(--elev-1);
}

.obj-hour-strip .hs-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;

  background: var(--layer-1);
  z-index: 2;
}

.obj-hour-strip .hs-block.hs-l0 .hs-strip {
  background: #f39c12;
}

.obj-hour-strip .hs-block.hs-l2 .hs-strip {
  background: var(--layer-2);
}

.obj-hour-strip .hs-block.hs-l3 .hs-strip {
  background: #e67e22;
}

.obj-hour-strip .hs-cap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;

  gap: 1px;
  padding: 5px 7px 3px 10px;
  overflow: hidden;
  pointer-events: none;
}

.obj-hour-strip .hs-cap b {
  color: var(--text-bright);
  font-weight: 800;
  font-size: 11px;

  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-hour-strip .hs-cap i {
  color: var(--text-dim);
  font-style: normal;
  font-size: 10px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-hour-strip .hs-wavebox {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 1px 1px;

  border-radius: 0 0 6px 6px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}

.obj-hour-strip .hs-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.obj-hour-strip .hs-cue {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 2;
}

.obj-hour-strip .hs-cue-in {
  background: #ffd23f;
  box-shadow: 0 0 6px rgba(255, 210, 63, 0.85);
}

.obj-hour-strip .hs-cue-out {
  background: #ff4d4d;
  box-shadow: 0 0 6px rgba(255, 77, 77, 0.65);
}

.obj-hour-strip .hs-dur {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 2;
  font-style: normal;

  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(7, 9, 13, 0.55);

  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
}

.obj-hour-strip .hs-block.is-past {
  opacity: 0.42;
  filter: saturate(0.4);
}

.obj-hour-strip .hs-block.is-onair {
  border-color: rgba(var(--accent-rgb), 0.8);

  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.55),
    0 0 18px rgba(var(--accent-rgb), 0.45),
    var(--elev-2);
}

.obj-hour-strip .hs-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;

  background: var(--text-bright);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
  z-index: 3;

  transition: left 1s linear;
  pointer-events: none;
}

.obj-hour-strip .hs-energy {
  position: relative;
  height: 36px;
  margin-top: 6px;
  border-radius: 9px;
  overflow: hidden;

  background: linear-gradient(168deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.006) 46%, rgba(0, 0, 0, 0.13)),
    var(--surface-deep);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -8px 12px -10px rgba(0, 0, 0, 0.5),
    0 3px 8px -4px rgba(0, 0, 0, 0.4);
}

.obj-hour-strip .hs-energy canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.obj-hour-strip .hs-ehead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 2;

  background: var(--text-bright);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.9);

  transition: left 1s linear;
  pointer-events: none;
}

.obj-hour-strip .hs-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .obj-hour-strip .hs-head {
    transition: none;
  }
}

/* ── Object: hour-dial (uurwijzer — radiale klok) ────────────────────────── */

.obj-hour-dial .hd-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 240px;
}

.obj-hour-dial canvas {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  display: block;
}

.obj-hour-dial .hd-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;

  text-align: center;
  pointer-events: none;
  padding: 0 34px;
}

.obj-hour-dial .hd-center b {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 800;
  color: var(--text-bright);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.obj-hour-dial .hd-center i {
  font-style: normal;
  font-size: 12px;
  color: var(--text-dim);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.obj-hour-dial .hd-center em {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(24px, 2.4vw, 34px);

  font-weight: 800;
  color: var(--text-bright);
  margin-top: 6px;
}

.obj-hour-dial .hd-center span {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* ── Object: onair-strip (mega meeluisterbalk) ───────────────────────────── */

.obj-onair-strip .os-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obj-onair-strip .os-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;
  min-width: 0;
}

.obj-onair-strip .os-names {
  min-width: 0;
}

.obj-onair-strip .os-names b {
  display: block;
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 800;

  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-onair-strip .os-names i {
  font-style: normal;
  font-size: 13px;
  color: var(--text-dim);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.obj-onair-strip .os-count {
  text-align: right;
}

.obj-onair-strip .os-count em {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(26px, 2.6vw, 40px);

  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: 1px;
}

.obj-onair-strip .os-count em.os-warn {
  color: var(--onair);
}

.obj-onair-strip .os-count span {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;

  text-transform: uppercase;
  color: var(--text-dim);
}

.obj-onair-strip .os-bar {
  position: relative;
  height: 72px;
  border-radius: 12px;

  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;

  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    var(--elev-1);
}

.obj-onair-strip .os-bar canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.obj-onair-strip .os-cue {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  z-index: 2;
}

.obj-onair-strip .os-in {
  background: #ffd23f;
  box-shadow: 0 0 8px rgba(255, 210, 63, 0.85);
}

.obj-onair-strip .os-out {
  background: #ff4d4d;
  box-shadow: 0 0 8px rgba(255, 77, 77, 0.7);
}

.obj-onair-strip .os-cue i {
  position: absolute;
  top: 2px;
  left: 4px;
  font-style: normal;
  font-size: 8px;

  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.obj-onair-strip .os-in i {
  color: #ffd23f;
}

.obj-onair-strip .os-out i {
  color: #ff8a8a;
}

.obj-onair-strip .os-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;

  background: var(--text-bright);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
  z-index: 3;

  transition: left 1s linear;
  pointer-events: none;
}

.obj-onair-strip .os-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 10px var(--accent-glow);
}

.obj-onair-strip .os-ruler {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  .obj-onair-strip .os-head {
    transition: none;
  }
}

/* ── Object: player ───────────────────────────────────────────────────────── */

.obj-player {
  --deck: var(--accent);
}

.obj-player::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--deck);
}

.obj-player .pl-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: center;
}

.obj-player .pl-art {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;

  background: radial-gradient(circle at 28% 24%, rgba(var(--accent-rgb), 0.28), transparent 58%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));

  border: 1px solid rgba(var(--accent-rgb), 0.28);
  box-shadow: var(--bevel), var(--elev-2);

  display: flex;
  align-items: center;
  justify-content: center;
}

.obj-player .pl-art-empty {
  font-size: 30px;
  color: var(--text-dim);
}

/* #140 — huisstijl-fallbacks: jingle krijgt amber/bliksem-look, een track
   zonder cover/waveform een accent-plaatje. Beide thema-vars, geen assets. */
.obj-player .pl-art-empty.pl-art-jingle,
.obj-player .pl-art-empty.pl-art-default {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
}

.obj-player .pl-art-empty.pl-art-jingle {
  color: var(--warn);
  background: radial-gradient(circle at 70% 20%, rgba(243, 156, 18, 0.5), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(var(--accent2-rgb), 0.3), transparent 60%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));
  text-shadow: 0 0 14px rgba(243, 156, 18, 0.65);
}

.obj-player .pl-art-empty.pl-art-default {
  color: var(--accent);
  background: radial-gradient(circle at 30% 25%, rgba(var(--accent-rgb), 0.45), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(var(--accent2-rgb), 0.28), transparent 60%),
    linear-gradient(145deg, rgb(var(--surface2-rgb)), rgb(var(--bg-rgb)));
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
}

.obj-player .pl-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.obj-player .pl-art-img.pl-art-wave,
.obj-now-playing .onp-art-img.onp-art-wave {
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
}

.obj-player .pl-meta {
  min-width: 0;
}

.obj-player .pl-artist {
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-player .pl-title {
  font-size: 16px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-player .pl-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.obj-player .pl-time {
  text-align: right;
  line-height: 1;
}

.obj-player .pl-big {
  font-size: clamp(36px, 3.4vw, 50px);
  font-weight: 800;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.obj-player .pl-big.pl-onair {
  color: var(--accent-2);
}

.obj-player .pl-big.pl-warn {
  color: var(--warn);
}

.obj-player .pl-big-label {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 6px;
}

.obj-player .pl-cues {
  font-size: 12px;
  margin-top: 6px;
}

.obj-player .pl-wave {
  margin-top: 12px;
  height: 64px;
  border-radius: 10px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;
}

.obj-player .pl-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.obj-player .pl-times {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 6px;
}

/* Vaste track-info onderaan (#137): altijd één regel, dezelfde drie tags. */
.obj-player .pl-info {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  overflow: hidden;
}

.obj-player .pl-info .tag {
  flex: none;
}

/* Elk label een eigen getinte achtergrond voor contrast (#139). */
.obj-player .pl-info-bpm {
  background: rgba(var(--accent2-rgb), 0.16);
  border-color: rgba(var(--accent2-rgb), 0.5);
  color: var(--accent-2);
}

.obj-player .pl-info-key {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

.obj-player .pl-info-energy {
  background: rgba(243, 156, 18, 0.16);
  border-color: rgba(243, 156, 18, 0.5);
  color: var(--warn);
}

/* #161 — de 5-slot tabel (#143) is vervangen door de cartwall pad-rij
   (zie .pl-pads hieronder); geen .pl-list/.pl-slot-stijlen meer. */

/* #159 — zes knoppen in één rij: START mag breder, de rest verdeelt
   gelijkmatig. EJECT hoort op dezelfde lijn, nooit een eigen rij. */
.obj-player .pl-ctrl {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}

/* #160 — functiekleuren: START groen, STOP rood; PAUZE/PFL/NEXT/EJECT
   in de amber-familie (--warn volgt het actieve thema). De selectors
   zitten op data-cmd want de knoppen krijgen geen aparte classes.
   is-armed/is-pending (hieronder) overrulen deze kleuren. */
.obj-player .pl-cmd {
  white-space: nowrap;
}

.obj-player .pl-cmd[data-cmd="start"]:not(:disabled) {
  background: linear-gradient(180deg, #5ff09a, #2fbf6a);
  color: #04240f;
  border-color: transparent;
}

.obj-player .pl-cmd[data-cmd="stop"]:not(:disabled) {
  background: linear-gradient(180deg, #ff7b7b, #d94848);
  color: #fff;
  border-color: transparent;
}

.obj-player .pl-cmd[data-cmd="pause"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="pfl"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="next"]:not(:disabled),
.obj-player .pl-cmd[data-cmd="eject"]:not(:disabled) {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface-2));

  border-color: color-mix(in srgb, var(--warn) 55%, var(--border-light));

  color: var(--warn);
}

.obj-player .pl-note {
  font-size: 12px;
  margin-top: 8px;
}

/* #161 — jingle-mode is compact: de pad-rij vervangt de transportknoppen
   (zelfde rij-hoogte → even hoog als een gewone player). Amber-tint via
   --warn zoals de bedieningsknoppen; pads = toekomstige vuurknoppen. */
.obj-player .pl-pads {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.obj-player .pl-pad {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  min-height: 44px;

  padding: 4px 8px;

  border: 1px solid color-mix(in srgb, var(--warn) 50%, var(--border-light));

  border-radius: 9px;

  background: color-mix(in srgb, var(--warn) 11%, var(--surface-2));

  color: var(--text);

  font: inherit;
}

.obj-player .pl-pad .pl-pad-n {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 15px;
  color: var(--warn);
}

.obj-player .pl-pad .pl-pad-t {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-player .pl-pad:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

/* Bediening-feedback: armed = tweede klik vereist, pending = wacht op
   engine-bevestiging. Deze classes worden door player.js gezet. */
.obj-player .pl-cmd.is-armed {
  border-color: #f39c12;

  box-shadow:
    var(--bevel),
    0 0 0 1px rgba(243, 156, 18, 0.55),
    var(--elev-2);

  color: #ffd48a;
}

.obj-player .pl-cmd.is-pending {
  border-color: var(--accent);

  box-shadow:
    var(--bevel),
    0 0 0 1px rgba(var(--accent-rgb), 0.55),
    var(--elev-2);

  color: var(--text-bright);

  animation: pl-pending-pulse 1s ease-in-out infinite;
}

@keyframes pl-pending-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

.obj-player .pl-note.pl-note-ok {
  color: #5ff09a;
}

.obj-player .pl-note.pl-note-err {
  color: #ff7b7b;
}

.obj-player .pl-note.pl-note-warn {
  color: #ffd48a;
}

/* Deck A — geen labelrij onder de titel; de meta-info zit in de tijdstabel. */
.obj-player.pl-deck-a .pl-tags {
  display: none;
}

@media (max-width: 640px) {
  .obj-player .pl-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .obj-player .pl-art {
    display: none;
  }

  .obj-player .pl-time {
    text-align: left;
  }

  .obj-player.pl-deck-a .pl-time {
    align-items: flex-start;
  }

  /* #159 — ook smal: één rij, maar knoppen compacter zodat ze passen. */
  .obj-player .pl-ctrl {
    gap: 5px;
  }

  .obj-player .pl-ctrl .obj-btn {
    min-height: 38px;
    font-size: 11px;
    letter-spacing: 0.04em;
  }
}

/* ── Object: hour-log ─────────────────────────────────────────────────────── */

.obj-hour-log .hl-scroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  border-radius: 10px;
  scroll-padding: 34px 0 10px 0;
}

.obj-hour-log .hl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  table-layout: fixed;
}

.obj-hour-log .hl-c-start {
  width: 88px;
}
.obj-hour-log .hl-c-kind {
  width: 82px;
}
.obj-hour-log .hl-c-dur {
  width: 64px;
}

.obj-hour-log .hl-c-deck {
  width: 96px;
}
.obj-hour-log .hl-c-status {
  width: 164px;
}

.obj-hour-log th {
  position: sticky;
  top: 0;
  background: var(--surface);
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  z-index: 1;
  white-space: nowrap;
}

/* Kolomgreep rechts in elke kopcel — versleepbaar, breedtes worden
   opgeslagen onder studio.prefs.cols.hour-log. */
.obj-hour-log .hl-drag {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}
.obj-hour-log .hl-drag::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 2px;
  border-radius: 1px;
  background: var(--border-light);
  opacity: 0;
  transition: opacity 0.12s;
}
.obj-hour-log thead tr:hover .hl-drag::after {
  opacity: 0.5;
}
.obj-hour-log .hl-drag:hover::after {
  opacity: 1 !important;
  background: var(--accent);
}
/* Laatste greep blijft binnen de cel — anders forceert hij horizontale scroll. */
.obj-hour-log th:last-child .hl-drag {
  right: 0;
}

/* #164 — vaste rijhoogte: elke regel even hoog, altijd, ongeacht inhoud */
.obj-hour-log td {
  padding: 6px 8px;
  height: 36px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.obj-hour-log .hl-r {
  text-align: right;
}

.obj-hour-log .hl-start {
  color: var(--accent-2);
  font-weight: 600;
}

.obj-hour-log .hl-title strong {
  color: var(--text-bright);
  font-weight: 600;
}

/* #164 — type-chips uniform: elke soort even breed in de kolom */
.obj-hour-log .hl-kind {
  display: inline-block;
  min-width: 64px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
}

.obj-hour-log .hl-kind-jingle {
  background: rgba(243, 156, 18, 0.18);
  color: var(--layer-0);
}

.obj-hour-log .hl-kind-news {
  background: rgba(255, 107, 107, 0.18);
  color: var(--danger);
}

.obj-hour-log .hl-kind-voice {
  background: rgba(155, 140, 255, 0.2);
  color: var(--layer-2);
}

/* #21 — wildcard (role tohh): paars format-blok, zelfde tint als het
   wildcard-object (#9b8cff / layer-2-familie maar eigen accent). */
.obj-hour-log .hl-kind-tohh {
  background: rgba(155, 140, 255, 0.28);
  color: #c9bfff;
}

/* #21 — TOTH-uursluiter (role toth): het nieuwsblok in de uursluit,
   zelfde rode tint als het nieuws-kind. */
.obj-hour-log .hl-kind-toth {
  background: rgba(255, 107, 107, 0.18);
  color: var(--danger);
}

.obj-hour-log tr.hl-played td {
  opacity: 0.45;
}

.obj-hour-log tr.hl-now td {
  background: rgba(255, 107, 107, 0.1);
}

.obj-hour-log tr.hl-now td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

.obj-hour-log tr.hl-next td {
  background: rgba(79, 206, 243, 0.08);
}

.obj-hour-log tr.hl-next td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Nu-vlak: gespeeld + on air + volgende als één paneel, schuift mee met de playlist */
.obj-hour-log tr.hl-nowblock-first td,
.obj-hour-log tr.hl-nowblock-mid td,
.obj-hour-log tr.hl-nowblock-last td {
  background: rgba(var(--accent-rgb), 0.07);
}
.obj-hour-log tr.hl-nowblock-first.hl-played td {
  opacity: 0.9;
}
.obj-hour-log tr.hl-nowblock-mid.hl-now td {
  background: rgba(255, 107, 107, 0.14);
}
.obj-hour-log tr.hl-nowblock-first td {
  box-shadow: inset 0 2px 0 rgba(var(--accent-rgb), 0.45);
}
.obj-hour-log tr.hl-nowblock-last td {
  box-shadow: inset 0 -2px 0 rgba(var(--accent-rgb), 0.45);
}
.obj-hour-log tr.hl-nowblock-last.hl-next td:first-child {
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 -2px 0 rgba(var(--accent-rgb), 0.45);
}
.obj-hour-log tr.hl-nowblock-first td:first-child {
  border-top-left-radius: 10px;
}
.obj-hour-log tr.hl-nowblock-first td:last-child {
  border-top-right-radius: 10px;
}
.obj-hour-log tr.hl-nowblock-last td:first-child {
  border-bottom-left-radius: 10px;
}
.obj-hour-log tr.hl-nowblock-last td:last-child {
  border-bottom-right-radius: 10px;
}

.obj-hour-log tbody tr[data-i] {
  cursor: pointer;
}
.obj-hour-log tr.hl-open td {
  background: rgba(var(--accent-rgb), 0.1);
}

/* #171 — pijltjes-kolommen rechts: automaat-toggle + open-chevron
   (dezelfde toggle als de rij-klik). */
.obj-hour-log .hl-c-auto {
  width: 34px;
}
.obj-hour-log .hl-c-open {
  width: 38px;
}
.obj-hour-log .hl-autoc,
.obj-hour-log .hl-openc {
  text-align: center;
}
.obj-hour-log .hl-autobtn,
.obj-hour-log .hl-openbtn {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  padding: 0;
  font-size: 11px;
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.15s ease,
    color 0.15s,
    border-color 0.15s,
    background 0.15s;
}
.obj-hour-log tr.hl-open .hl-openbtn {
  transform: rotate(90deg);
  color: var(--accent);
  border-color: var(--accent);
}
/* Automaat-pijltje: goud/geel = speelt mee in de nonstop; gedempt = overgeslagen. */
.obj-hour-log .hl-autobtn.on {
  color: var(--layer-0);
  border-color: rgba(243, 156, 18, 0.55);
  background: rgba(243, 156, 18, 0.16);
}
.obj-hour-log .hl-autobtn:not(.on) {
  opacity: 0.55;
}
.obj-hour-log tr.hl-played .hl-autobtn {
  opacity: 0.3;
}

/* #171 — uitgeklapte detailrij: compacte mini-player (play + dunne wave). */
.obj-hour-log tr.hl-waverow td {
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
}
.obj-hour-log .hl-mp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
}
.obj-hour-log .hl-mp-play {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.obj-hour-log .hl-mp-play.on {
  background: var(--accent);
  color: #fff;
}
.obj-hour-log .hl-mp-play:disabled {
  opacity: 0.55;
  cursor: wait;
}
.obj-hour-log .hl-mp-wave {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0f18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer; /* klik = naar die positie luisteren */
}
.obj-hour-log .hl-mp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.85;
}
.obj-hour-log .hl-mp-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
.obj-hour-log .hl-mp-prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}
.obj-hour-log .hl-mp-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 86px;
  text-align: right;
}

/* #163/#164 — uur-scheidingsregel: duidelijk gekleurde band op de uurwissel,
   met een gevulde pil die het nieuwe uurbereik toont. */
.obj-hour-log tr.hl-hourrow td {
  padding: 6px 8px;
  height: 36px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(90deg, rgba(var(--accent2-rgb), 0.2), rgba(var(--accent2-rgb), 0.06) 55%, transparent);
}

.obj-hour-log tr.hl-hourrow td:first-child {
  box-shadow: inset 3px 0 0 var(--accent-2);
}

.obj-hour-log tr.hl-hourrow .hl-hr {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--accent-2);
  color: var(--on-accent, #04121c);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.obj-hour-log tr.hl-hourrow .hl-hr-n {
  font-size: 11px;
  margin-left: 10px;
  color: var(--accent-2);
  font-weight: 600;
}

.obj-hour-log tr.hl-emptyrow td {
  padding: 6px 8px;
  height: 36px;
  text-align: center;
}

/* #22 — formatblokken (WILDCARD ~:30, TOTH-nieuwsblok :55–:00): de rijen van
   een blok krijgen één omlijnd kader zodat je meteen ziet dat een blok speelt.
   Accent per bloktype via --blk-c/--blk-bg op de rij; de rand is een inset
   box-shadow (zelfde techniek als hl-nowblock), dus kolommen blijven uitgelijnd. */
.obj-hour-log tr.hl-blk-tohh {
  --blk-c: rgba(155, 140, 255, 0.55);
  --blk-bg: rgba(155, 140, 255, 0.1);
}
.obj-hour-log tr.hl-blk-toth {
  --blk-c: rgba(255, 107, 107, 0.5);
  --blk-bg: rgba(255, 107, 107, 0.07);
}
.obj-hour-log tr.hl-blkhead td {
  padding: 4px 8px;
  height: 30px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow:
    inset 0 2px 0 var(--blk-c),
    inset 2px 0 0 var(--blk-c),
    inset -2px 0 0 var(--blk-c);
  background: linear-gradient(90deg, var(--blk-bg), transparent 70%);
}
.obj-hour-log tr.hl-blkhead .hl-blk-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.obj-hour-log tr.hl-blkhead.hl-blk-tohh .hl-blk-tag {
  background: rgba(155, 140, 255, 0.3);
  color: #c9bfff;
}
.obj-hour-log tr.hl-blkhead.hl-blk-toth .hl-blk-tag {
  background: rgba(255, 107, 107, 0.22);
  color: var(--danger);
}
.obj-hour-log tr.hl-blkhead .hl-blk-n {
  font-size: 11px;
  margin-left: 10px;
  font-weight: 600;
}
.obj-hour-log tr.hl-blk td {
  background: var(--blk-bg);
}
.obj-hour-log tr.hl-blk td:first-child {
  box-shadow: inset 2px 0 0 var(--blk-c);
}
.obj-hour-log tr.hl-blk td:last-child {
  box-shadow: inset -2px 0 0 var(--blk-c);
}
.obj-hour-log tr.hl-blk-last td {
  box-shadow: inset 0 -2px 0 var(--blk-c);
}
.obj-hour-log tr.hl-blk-last td:first-child {
  box-shadow:
    inset 2px 0 0 var(--blk-c),
    inset 0 -2px 0 var(--blk-c);
  border-bottom-left-radius: 10px;
}
.obj-hour-log tr.hl-blk-last td:last-child {
  box-shadow:
    inset -2px 0 0 var(--blk-c),
    inset 0 -2px 0 var(--blk-c);
  border-bottom-right-radius: 10px;
}
/* on-air/volgende-markering wint van de blokrand (status is belangrijker). */
.obj-hour-log tr.hl-now td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}
.obj-hour-log tr.hl-next td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.obj-hour-log tr.hl-blk-last.hl-now td:last-child,
.obj-hour-log tr.hl-blk-last.hl-next td:last-child {
  box-shadow:
    inset -2px 0 0 var(--blk-c),
    inset 0 -2px 0 var(--blk-c);
}
.obj-hour-log tr.hl-blk-last.hl-now td:first-child {
  box-shadow:
    inset 3px 0 0 var(--danger),
    inset 0 -2px 0 var(--blk-c);
}
.obj-hour-log tr.hl-blk-last.hl-next td:first-child {
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 -2px 0 var(--blk-c);
}
/* segment-subrijen van het nieuwsblok: ingesprongen, compacter, niet klikbaar. */
.obj-hour-log tr.hl-blk-seg td {
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 11px;
}
.obj-hour-log .hl-seg-k {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: var(--text-dim);
}
.obj-hour-log .hl-seg-t {
  padding-left: 16px;
}

.obj-hour-log .hl-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-top: 8px;
}

/* ── Object: queue ────────────────────────────────────────────────────────── */

.obj-queue .qu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obj-queue .qu-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  font-size: 14px;
  min-height: 44px;
}

.obj-queue .qu-pos {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(79, 206, 243, 0.14);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.obj-queue .qu-main {
  flex: 1 1 160px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-queue .qu-main strong {
  color: var(--text-bright);
  font-weight: 600;
}

.obj-queue .qu-start {
  color: var(--accent-2);
  font-weight: 700;
}

.obj-queue .qu-dur {
  font-size: 12px;
}

.obj-queue .qu-none {
  justify-content: center;
}

.obj-queue .qu-hours {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ── Object: horizon ──────────────────────────────────────────────────────── */

/* Object: horizon — compacte strip per uur, glas & diepte, alles op één regel */

.obj-horizon .hz-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.obj-horizon .hz-card {
  position: relative;
  display: grid;
  align-items: center;

  grid-template-columns: 28px minmax(86px, auto) 84px 78px 1fr 64px;

  gap: 10px;
  min-height: 30px;
  padding: 3px 10px 3px 14px;

  border-radius: 9px;
  overflow: hidden;
  font-size: 12px;

  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008) 46%, rgba(0, 0, 0, 0.1)),
    var(--surface-deep);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 3px 8px -4px rgba(0, 0, 0, 0.45);
}

.obj-horizon .hz-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, transparent 30%);
}

.obj-horizon .hz-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 5px;
  width: 2px;
  border-radius: 2px;

  background: transparent;
}

/* gevuld: fel glas met statusgloed */

.obj-horizon .hz-card.hz-filled {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.015) 44%, rgba(0, 0, 0, 0.13)),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent 55%), var(--surface-deep);

  border-color: rgba(255, 255, 255, 0.11);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -8px 12px -10px rgba(0, 0, 0, 0.5),
    0 6px 14px -6px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

.obj-horizon .hz-card.hz-ok::after {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(69, 232, 132, 0.75);
}

.obj-horizon .hz-card.hz-warn::after {
  background: var(--warn);
  box-shadow: 0 0 7px rgba(243, 156, 18, 0.6);
}

.obj-horizon .hz-card.hz-now {
  border-color: rgba(69, 232, 132, 0.5);
}

.obj-horizon .hz-card.hz-now .hz-label {
  text-shadow: 0 0 10px rgba(69, 232, 132, 0.65);
}

/* leeg: gedimd, gestippeld */

.obj-horizon .hz-card.hz-empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.05);
  opacity: 0.55;
}

.obj-horizon .hz-label {
  font-weight: 800;
  letter-spacing: 1.1px;
  color: var(--accent);
  font-size: 11px;
}

.obj-horizon .hz-range {
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--text-dim);
  white-space: nowrap;
}

.obj-horizon .hz-card.hz-filled .hz-range {
  color: var(--text);
}

.obj-horizon .hz-nums {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.obj-horizon .hz-nums b {
  font-size: 16px;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.obj-horizon .hz-nums small {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.4px;
}

.obj-horizon .hz-card .clock-chip.dur {
  font-size: 10.5px;
  padding: 2px 7px;
}

.obj-horizon .hz-fill {
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  align-self: center;

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03);
}

.obj-horizon .hz-fill i {
  display: block;
  height: 100%;
  border-radius: 3px;
  min-width: 2px;

  background: linear-gradient(90deg, rgba(69, 232, 132, 0.4), var(--accent));

  box-shadow:
    0 0 7px rgba(69, 232, 132, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.obj-horizon .hz-fill i.warn {
  background: linear-gradient(90deg, rgba(243, 156, 18, 0.35), var(--warn));

  box-shadow:
    0 0 6px rgba(243, 156, 18, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.obj-horizon .hz-card .tag {
  font-size: 9.5px;
  padding: 2px 7px;
  justify-self: end;
  white-space: nowrap;

  min-width: 56px;
  text-align: center;
}

/* ── Object: history ──────────────────────────────────────────────────────── */

.obj-history .hi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  min-height: 0;
}

.obj-history .hi-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.obj-history .hi-time {
  color: var(--accent-2);
  font-weight: 600;
  flex-shrink: 0;
}

.obj-history .hi-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-history .hi-main strong {
  color: var(--text-bright);
  font-weight: 600;
}

/* ── Objecten: jingle-machine / jingle-list ───────────────────────────────── */

.obj-jingle-machine .jm-pads {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, 1fr);
  gap: 8px;
  flex: 1;
}

.obj-jingle-machine .jm-pad {
  position: relative;
  text-align: left;
  border-radius: 10px;
  padding: 8px 9px 8px 9px;
  min-height: 72px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;

  background: linear-gradient(160deg, var(--surface-sheen), transparent 62%), var(--surface-2);

  border: 1px solid var(--border-light);
  box-shadow: var(--bevel), var(--elev-1);

  color: var(--text);
  font: inherit;
  cursor: pointer;

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}

.obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):hover {
  transform: translateY(-2px);
  box-shadow: var(--bevel), var(--elev-2);
  filter: brightness(1.06);
}

.obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):active {
  transform: translateY(1px);
  filter: brightness(0.98);
}

.obj-jingle-machine .jm-pad.jm-empty:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
  background: var(--accent-soft);
}

.obj-jingle-machine .jm-pad:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.obj-jingle-machine .jm-key {
  position: absolute;
  top: 6px;
  right: 8px;
  font: 700 10px var(--mono);
  color: var(--text-dim);
}

.obj-jingle-machine .jm-name {
  font-size: 13px;
  color: var(--text-bright);
  line-height: 1.2;
  padding-right: 16px;
}

.obj-jingle-machine .jm-sub {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-jingle-machine .jm-dur {
  font-size: 11px;
  color: var(--text-dim);
}

.obj-jingle-machine .jm-empty {
  background: transparent;
  border-style: dashed;
  justify-content: center;
  align-items: center;
  color: var(--text-dim);
  font-size: 11px;
}

.obj-jingle-machine .jm-disabled {
  opacity: 0.55;
}

.obj-jingle-machine .jm-over {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.obj-jingle-machine .jm-clear {
  display: none;
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 12px;
  color: var(--danger);
}

.obj-jingle-machine.jm-editing .jm-clear {
  display: inline;
}

.obj-jingle-machine.jm-editing .jm-pad:not(.jm-empty) {
  outline: 1px dashed rgba(255, 255, 255, 0.35);
}

/* #25 — automaat-lock: pusher voedt de keten → pads vergrendeld (klik geeft
   een eerlijke melding, vuurt niet); Indelen/pad-indeling blijft lokaal. */
.obj-jingle-machine .jm-pads.jm-locked .jm-pad:not(.jm-empty) {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.5);
}
.obj-jingle-machine .jm-pads.jm-locked .jm-pad:not(.jm-empty):hover {
  transform: none;
  box-shadow: var(--bevel);
  filter: saturate(0.5);
}
.obj-jingle-machine .jm-lock {
  color: var(--warn, #f0a63a);
  border-color: var(--warn, #f0a63a);
}

.obj-jingle-machine .jm-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  margin-top: 8px;
}

.obj-jingle-machine .jm-edit {
  min-height: 32px;
  padding: 0 10px;
  font-size: 11px;
}

.jm-c1 {
  background: linear-gradient(180deg, rgba(243, 156, 18, 0.35), rgba(243, 156, 18, 0.12)) !important;
  border-color: rgba(243, 156, 18, 0.5) !important;
}

.jm-c2 {
  background: linear-gradient(180deg, rgba(79, 206, 255, 0.32), rgba(79, 206, 255, 0.1)) !important;
  border-color: rgba(79, 206, 255, 0.5) !important;
}

.jm-c3 {
  background: linear-gradient(180deg, rgba(155, 140, 255, 0.35), rgba(155, 140, 255, 0.12)) !important;
  border-color: rgba(155, 140, 255, 0.5) !important;
}

.jm-c4 {
  background: linear-gradient(180deg, rgba(69, 232, 132, 0.32), rgba(69, 232, 132, 0.1)) !important;
  border-color: rgba(69, 232, 132, 0.5) !important;
}

.jm-c5 {
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.38), rgba(255, 107, 107, 0.14)) !important;
  border-color: rgba(255, 107, 107, 0.6) !important;
}

.jm-c6 {
  background: linear-gradient(180deg, rgba(230, 126, 34, 0.35), rgba(230, 126, 34, 0.12)) !important;
  border-color: rgba(230, 126, 34, 0.5) !important;
}

.obj-jingle-list .jl-search {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 10px;
}

.obj-jingle-list .jl-search input {
  flex: 1;
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 6px 10px;
  font: inherit;
}

.obj-jingle-list .jl-groups {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.obj-jingle-list .jl-fam {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: inline-block;
  margin: 0 0 6px;
}

.obj-jingle-list .jl-fam.jm-c1,
.obj-jingle-list .jl-fam.jm-c2,
.obj-jingle-list .jl-fam.jm-c3,
.obj-jingle-list .jl-fam.jm-c4,
.obj-jingle-list .jl-fam.jm-c5,
.obj-jingle-list .jl-fam.jm-c6 {
  color: var(--text-bright);
}

.obj-jingle-list .jl-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.obj-jingle-list .jl-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 40px;
  border-radius: 8px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  font-size: 13px;
  cursor: grab;
}

.obj-jingle-list .jl-item:active {
  cursor: grabbing;
}

.obj-jingle-list .jl-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-bright);
}

.obj-jingle-list .jl-none {
  padding: 12px;
  text-align: center;
}

/* ── Objecten: news / program / monitoring-strip / stream-player / show-notes ── */

.obj-news .nw-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.obj-news .nw-count {
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
  color: var(--accent-2);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.obj-news .nw-count.nw-soon {
  color: var(--warn);
}

.obj-news .nw-lbl {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.obj-news .nw-lbl b {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--text-bright);
}

.obj-news .nw-items {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

/* #20: grid-rij — tijd | kind | label | duur | play op vaste kolommen zodat
   alle segmenten verticaal én horizontaal uitlijnen. --p = speelvoortgang. */
.obj-news .nw-items li {
  display: grid;
  grid-template-columns: 46px 88px minmax(0, 1fr) 46px 22px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.obj-news .nw-items li:not([data-seg]) {
  grid-template-columns: 1fr;
}

.obj-news .nw-items li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: var(--p, 0%);
  background: var(--accent-2);
  opacity: 0.8;
  transition: width 0.25s linear;
}

.obj-news .nw-items li.nw-playing {
  border-color: var(--accent-2);
}

.obj-news .nw-kind {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-news .nw-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.obj-news .nw-play {
  appearance: none;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--accent-2);
  font-size: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.obj-news .nw-play:hover {
  border-color: var(--accent-2);
  background: var(--surface);
}

.obj-news .nw-items li:not(.nw-has-audio) .nw-play {
  visibility: hidden;
}

.obj-news .nw-time {
  color: var(--accent-2);
  font-weight: 700;
}

.obj-news .nw-foot {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.obj-program .pg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.obj-program .pg-card {
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.obj-program .pg-card small {
  display: block;
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.obj-program .pg-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-bright);
}

.obj-program .pg-host {
  font-size: 13px;
  margin-top: 2px;
}

.obj-program .pg-desc {
  font-size: 13px;
  margin: 6px 0 0;
}

/* Object: Uitzending — compacte strip, glas & diepte, alles op één regel */

.obj-monitoring-strip .ms-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.obj-monitoring-strip .ms-item {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr auto;

  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding: 3px 10px 3px 12px;

  border-radius: 9px;
  overflow: hidden;

  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008) 46%, rgba(0, 0, 0, 0.1)),
    var(--surface-deep);

  border: 1px solid rgba(255, 255, 255, 0.06);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 3px 8px -4px rgba(0, 0, 0, 0.45);
}

.obj-monitoring-strip .ms-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, transparent 30%);
}

.obj-monitoring-strip .ms-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a4656;
  justify-self: center;
}

.obj-monitoring-strip .ms-ok .ms-led {
  background: var(--accent-2);
  box-shadow:
    0 0 9px var(--accent-2),
    0 0 3px var(--accent-2);
}

.obj-monitoring-strip .ms-warn .ms-led {
  background: var(--warn);
  box-shadow:
    0 0 9px var(--warn),
    0 0 3px var(--warn);
}

.obj-monitoring-strip .ms-bad .ms-led {
  background: var(--danger);
  box-shadow:
    0 0 9px var(--danger),
    0 0 3px var(--danger);
}

.obj-monitoring-strip .ms-lbl {
  font-size: 10.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-monitoring-strip .ms-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;

  padding: 2px 10px;
  border-radius: 6px;
  white-space: nowrap;

  min-width: 78px;
  text-align: center;
  justify-self: end;

  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* status-verschil: de hele rij tint en kreegt een randje mee */

.obj-monitoring-strip .ms-item.ms-warn {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006) 46%, rgba(0, 0, 0, 0.08)),
    linear-gradient(90deg, color-mix(in srgb, var(--warn) 8%, transparent), transparent 60%), var(--surface-deep);

  border-color: color-mix(in srgb, var(--warn) 26%, transparent);
}

.obj-monitoring-strip .ms-item.ms-bad {
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.006) 46%, rgba(0, 0, 0, 0.08)),
    linear-gradient(90deg, color-mix(in srgb, var(--danger) 9%, transparent), transparent 60%), var(--surface-deep);

  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}

.obj-monitoring-strip .ms-item.ms-warn .ms-lbl,
.obj-monitoring-strip .ms-item.ms-bad .ms-lbl {
  color: var(--text);
}

.obj-monitoring-strip .ms-ok .ms-val {
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-2) 32%, transparent);
}

.obj-monitoring-strip .ms-warn .ms-val {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 11%, transparent);
  border-color: color-mix(in srgb, var(--warn) 34%, transparent);
}

.obj-monitoring-strip .ms-bad .ms-val {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 36%, transparent);
}

.obj-stream-player .sp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}

.obj-stream-player .sp-vol {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  margin-top: 12px;
}

.obj-stream-player .sp-vol input {
  flex: 1;
  min-height: 44px;
}

.obj-stream-player .sp-state {
  font-size: 12px;
  margin-top: 8px;
}

/* #147 — engine-cue re-attach: cue-bus loopt server-side door een refresh
   heen; deze rij biedt meteen een luister-knop naar de PFL-feed. */
.obj-stream-player .sp-cue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn) 8%, transparent);
}
.obj-stream-player .sp-cue[hidden] {
  display: none;
}
.obj-stream-player .sp-cue-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.obj-stream-player .sp-cue-listen {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 4px 10px;
}

.obj-show-notes .sn-area {
  flex: 1;
  min-height: 160px;
  width: 100%;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
}

/* Spreekkaart (#29): NU compact + AANKOMEND volledig, ververst per track. */
.obj-show-notes .sn-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  max-height: 45%;
  overflow-y: auto;
  flex: 0 0 auto;
}
.obj-show-notes .sn-tk {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface-deep);
  padding: 8px 10px;
}
.obj-show-notes .sn-tk-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.obj-show-notes .sn-tk-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.obj-show-notes .sn-tk-meta {
  margin-top: 4px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-show-notes .sn-tk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.obj-show-notes .sn-tk-chips .tag {
  font-size: 10.5px;
  padding: 2px 7px;
}
.obj-show-notes .sn-tk-say {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 10px;
}
.obj-show-notes .sn-tk-now {
  opacity: 0.88;
}
.obj-show-notes .sn-tk-none {
  font-size: 12px;
  padding: 8px 10px;
}

/* Studio chat (#34): berichtenlijst + invoerbalk. */
.obj-studio-chat .sc-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 6px;
}
.obj-studio-chat .sc-empty {
  font-size: 12px;
  padding: 10px 4px;
}
.obj-studio-chat .sc-msg {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--surface-deep);
  padding: 6px 10px;
}
.obj-studio-chat .sc-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.obj-studio-chat .sc-u {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-studio-chat .sc-t {
  margin-left: auto;
  font-size: 10px;
  flex: 0 0 auto;
}
.obj-studio-chat .sc-x {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.obj-studio-chat .sc-compose {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex: 0 0 auto;
}
.obj-studio-chat .sc-in {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.obj-studio-chat .sc-send {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--accent);
  color: var(--surface-deep);
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.obj-studio-chat .sc-send:disabled,
.obj-studio-chat .sc-in:disabled {
  opacity: 0.55;
  cursor: default;
}

.obj-broadcast .bc-hint {
  font-size: 11px;
  padding: 0 2px 6px;
}
.obj-broadcast .bc-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 6px;
}
.obj-broadcast .bc-empty {
  font-size: 12px;
  padding: 10px 4px;
}
.obj-broadcast .bc-msg {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--onair);
  border-radius: 10px;
  background: var(--surface-deep);
  padding: 6px 10px;
}
.obj-broadcast .bc-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.obj-broadcast .bc-u {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-broadcast .bc-t {
  margin-left: auto;
  font-size: 10px;
  flex: 0 0 auto;
}
.obj-broadcast .bc-x {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.obj-broadcast .bc-compose {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex: 0 0 auto;
}
.obj-broadcast .bc-in {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.obj-broadcast .bc-send {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--onair);
  color: #fff;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.obj-broadcast .bc-send:disabled,
.obj-broadcast .bc-in:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Luisteraars-shoutbox (api-chat #18): publieke feed, listener-badge. */
.obj-luisteraars .ls-hint {
  font-size: 11px;
  padding: 0 2px 6px;
}
.obj-luisteraars .ls-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 2px 6px;
}
.obj-luisteraars .ls-empty {
  font-size: 12px;
  padding: 10px 4px;
}
.obj-luisteraars .ls-msg {
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  background: var(--surface-deep);
  padding: 6px 10px;
}
.obj-luisteraars .ls-msg.ls-listener {
  border-left-color: var(--onair);
}
.obj-luisteraars .ls-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.obj-luisteraars .ls-u {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-luisteraars .ls-msg.ls-listener .ls-u {
  color: var(--onair);
}
.obj-luisteraars .ls-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--onair);
  border: 1px solid var(--onair);
  border-radius: 6px;
  padding: 1px 5px;
  flex: 0 0 auto;
}
.obj-luisteraars .ls-t {
  margin-left: auto;
  font-size: 10px;
  flex: 0 0 auto;
}
.obj-luisteraars .ls-x {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.obj-luisteraars .ls-compose {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex: 0 0 auto;
}
.obj-luisteraars .ls-in {
  flex: 1;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 8px 12px;
  font: inherit;
}
.obj-luisteraars .ls-send {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--accent);
  color: var(--surface-deep);
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.obj-luisteraars .ls-send:disabled,
.obj-luisteraars .ls-in:disabled {
  opacity: 0.55;
  cursor: default;
}

.obj-show-notes .sn-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 8px;
}

/* ── Klokjes: gedeeld tijdlabel voor alle objecten ───────────────────────── */

.clock-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  font-family: var(--mono);
  font-variant-numeric: tabular-nums;

  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;

  padding: 3px 8px;
  border-radius: 7px;
  color: var(--accent-2);

  background: rgba(var(--accent-rgb), 0.08);

  border: 1px solid rgba(var(--accent-rgb), 0.25);

  box-shadow: 0 1px 0 var(--bevel-top) inset;
}

.clock-chip::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  opacity: 0.85;

  background-color: var(--accent-2);

  -webkit-mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");

  mask: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
}

.clock-chip.dur {
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
}

.clock-chip.dur::before {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
  background-color: var(--text-dim);
  opacity: 0.7;
}

.clock-chip.big {
  gap: 9px;
  padding: 6px 16px;
  border-radius: 12px;
}

.clock-chip.big::before {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

.clock-chip.warn {
  color: var(--warn);
  background: rgba(231, 76, 60, 0.1);
  border-color: rgba(231, 76, 60, 0.38);
}

.clock-chip.warn::before {
  background-color: var(--warn);
}

/* ── Object: topbar-status ────────────────────────────────────────────────── */

.obj-topbar-status {
  padding: 10px 16px;
}

.obj-topbar-status .tb-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}

.obj-topbar-status .tb-onair {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 15px;
  background: var(--surface-2);
  color: var(--text-dim);
}

.obj-topbar-status .tb-onair::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a4656;
}

.obj-topbar-status .tb-onair.is-onair {
  background: var(--onair);
  color: #fff;
  box-shadow: 0 0 22px rgba(231, 76, 60, 0.45);
}

.obj-topbar-status .tb-onair.is-onair::before {
  background: #fff;
  box-shadow: 0 0 10px #fff;
}

.obj-topbar-status .tb-mode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.obj-topbar-status .tb-mode b {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent-2);
}

.obj-topbar-status .tb-mode.tb-live {
  background: var(--onair);
  border-color: transparent;
}

.obj-topbar-status .tb-mode.tb-live b,
.obj-topbar-status .tb-mode.tb-live .dim {
  color: #fff;
}

/* Vakjes: label boven, waarde onder — gelijke hoogte en uitlijning (klokjes-stijl). */

.obj-topbar-status .tb-hour,
.obj-topbar-status .tb-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;

  min-width: 96px;
  padding: 6px 12px;
  border-radius: 10px;

  background: var(--surface-2);
  border: 1px solid var(--border);
  line-height: 1.1;
  font-size: 11px;
}

.obj-topbar-status .tb-chip small,
.obj-topbar-status .tb-hour .dim {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.obj-topbar-status .tb-chip b,
.obj-topbar-status .tb-hour b {
  font-size: 15px;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

.obj-topbar-status .tb-clock {
  margin-left: auto;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  padding: 2px 14px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.obj-topbar-status .tb-ok {
  color: var(--accent-2) !important;
}

.obj-topbar-status .tb-warn {
  color: var(--warn) !important;
}

.obj-cell > .obj-topbar-status {
  min-height: 0;
}

/* ── Lay-out-editor (stap 10) ─────────────────────────────────────────────── */

.obj-layout-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 12px;
  font-size: 13px;
}

.obj-layout-title {
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-bright);
}

.obj-layout-spacer {
  flex: 1;
}

.obj-layout-bar .obj-btn {
  min-height: 40px;
  padding: 0 14px;
  font-size: 12px;
}

.obj-layout-bar .ol-add {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.obj-layout-bar select,
.obj-layout-bar input {
  min-height: 40px;
  border-radius: 9px;
  border: 1px solid var(--border-light);
  background: var(--surface-deep);
  color: var(--text);
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
}

.obj-layout-bar input {
  width: 160px;
}

.obj-grid-editing .obj-cell {
  position: relative;
  outline: 1px dashed rgba(79, 206, 243, 0.45);
  outline-offset: -1px;
  border-radius: var(--obj-radius);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.obj-grid-editing .obj-cell > .obj {
  pointer-events: none;
  opacity: 0.85;
}

.obj-grid-editing .obj-cell-dragging {
  cursor: grabbing;
}

.obj-drag-ghost {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: var(--elev-3);
}

.obj-drag-ghost > .obj {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.obj-drop-preview {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  border: 2px dashed var(--accent);
  border-radius: var(--obj-radius);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--bevel-top);
}

.obj-cell-tools {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;

  margin: 6px 8px 4px;
  padding: 6px 8px;
  border-radius: 9px;

  background: rgba(9, 14, 24, 0.92);
  border: 1px solid var(--border-light);
  font-size: 12px;

  box-shadow: var(--elev-1);
}

.obj-cell-tools .ol-grip {
  cursor: grab;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--mono);
  padding: 4px 6px;
}

.obj-cell-tools .ol-grip:active {
  cursor: grabbing;
}

.obj-cell-tools .ol-group {
  display: inline-flex;
  gap: 2px;
}

.obj-cell-tools button {
  min-width: 36px;
  min-height: 32px;
  border-radius: 7px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: var(--accent-soft);
  color: var(--text-bright);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.obj-cell-tools button:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.obj-cell-tools button:focus-visible {
  outline: 2px solid var(--accent);
}

/* #65 — vaste-H toggle: actief = accent gevuld */
.obj-cell-tools .ol-fixh {
  background: transparent;
  border-style: dashed;
  color: var(--text-dim);
}
.obj-cell-tools .ol-fixh.is-on {
  background: var(--accent);
  border-style: solid;
  border-color: var(--accent);
  color: var(--on-accent);
}

.obj-cell-tools .ol-remove {
  margin-left: auto;
  border-color: var(--danger);
  background: transparent;
  color: var(--danger);
}

.obj-cell-tools .ol-remove:hover {
  background: var(--danger);
  color: #fff;
}

/* In de indel-modus krijgt de pagina onderruimte zodat de zwevende balk

   de laatste objecten niet bedekt. */

body.layout-editing .studio-main {
  padding-bottom: 150px;
}

.obj-cell-over {
  outline: 2px dashed var(--accent) !important;
}

.obj-cell-dragging {
  opacity: 0.5;
}

/* ── Backoffice-topbar chrome: 20-theme picker, modus, profiel/login, indelen ─ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 90;

  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;

  min-height: var(--topbar-h);
  height: auto;
  padding: 8px 22px;

  background: rgba(var(--bg-rgb), 0.72);
  backdrop-filter: blur(18px) saturate(1.2);

  border-bottom: 1px solid var(--border);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-shrink: 0;
}

.topbar .brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-grad);
  box-shadow: var(--accent-glow);
  flex-shrink: 0;
}

.topbar .brand-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-bright);
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.topbar .brand-name em {
  color: var(--accent);
  font-style: normal;
}

.topbar > .studio-nav {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
}

/* Player + stereo-VU staan ín de flexrij (geen absolute centrering meer:

   die legde de speler over het menu heen zodra het menu breder werd). */

.topbar > .topbar-vu {
  order: 2;
  position: static;
  transform: none;

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;

  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.topbar-vu .tb-player {
  position: static;
  transform: none;
  pointer-events: auto;
  border: 0;

  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

.topbar-vu .tb-player .tb-play {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.topbar-vu .tb-vu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;

  width: clamp(190px, 16vw, 260px);
  min-width: 190px;
}

.topbar-vu .tb-vu-row {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 9px;
}

.topbar-vu .tb-vu-label {
  flex: 0 0 10px;
  font-family: var(--mono);
  font-size: 8px;

  letter-spacing: 0.5px;
  color: var(--text-dim);
  line-height: 1;
  text-align: left;
}

.topbar-vu .tb-vu-seg {
  flex: 1 1 0;
  min-width: 2px;
  height: 8px;
  border-radius: 2px;

  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.22) inset;

  transition:
    background 0.06s linear,
    box-shadow 0.06s linear;
}

.topbar-vu .tb-vu-seg.on {
  background: linear-gradient(180deg, #7dffb0, #2ecc71);
  box-shadow:
    0 0 5px rgba(46, 204, 113, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.topbar-vu .tb-vu-seg.on.mid {
  background: linear-gradient(180deg, #ffe08a, #f39c12);
  box-shadow:
    0 0 5px rgba(243, 156, 18, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.topbar-vu .tb-vu-seg.on.hot {
  background: linear-gradient(180deg, #ff9d8a, #e74c3c);
  box-shadow:
    0 0 6px rgba(231, 76, 60, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset;
}

.topbar-vu .tb-vu-seg.peak {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

.topbar-vu.live .tb-vu-label {
  color: var(--text);
}

.topbar > .topbar-center {
  order: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-left: auto;
}

.topbar > .tb-theme,
.topbar > .tb-zoom,
.topbar > .tb-btn[title="Donker / licht"],
.topbar > .tb-edit,
.topbar > .tb-profile {
  order: 4;
}

.topbar .studio-clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 700;

  color: var(--text-bright);
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 10px;

  background: var(--card);
  border: 1px solid var(--border);
  line-height: 1.1;
  text-align: center;
  min-width: 118px;

  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    var(--elev-1);
}

.tb-onair {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 30vw;
  padding: 6px 12px 6px 8px;

  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text);

  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    var(--elev-1);
}

.tb-onair .onair-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
  padding: 3px 8px;
  border-radius: 999px;

  background: var(--danger);
  color: #fff;
  animation: studio-onair-pulse 1.6s infinite;
}

.tb-onair.off .onair-pill {
  background: var(--text-dim);
  animation: none;
}

.tb-onair .onair-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes studio-onair-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 80, 80, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(255, 80, 80, 0);
  }
}

.tb-btn {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  border: 1px solid var(--border);

  background: var(--card);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    var(--elev-1);
  transition: all 0.16s;
}

.tb-btn:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.tb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tb-btn svg {
  width: 18px;
  height: 18px;
}

.tb-btn .swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-grad);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* #167 — weergave-zoom: −/%/+ als één pill naast de thema-knop; de knoppen
   delen de rand zodat ze als groep lezen. */
.tb-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.tb-zoom .tb-btn {
  width: 30px;
  flex: 0 0 30px;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
}

.tb-zoom .tb-btn:first-child {
  border-radius: 11px 0 0 11px;
}

.tb-zoom .tb-btn:last-child {
  border-radius: 0 11px 11px 0;
}

.tb-zoom .tb-btn + .tb-btn {
  border-left: 0;
}

.tb-zoom .tb-zoom-val {
  width: 46px;
  flex: 0 0 46px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}

html[data-mode="dark"] .tb-btn .ico-sun {
  display: none;
}

html[data-mode="light"] .tb-btn .ico-moon {
  display: none;
}

.tb-edit {
  color: var(--accent);
}

.tb-edit[aria-pressed="true"] {
  background: var(--accent-soft2);
  border-color: rgba(var(--accent-rgb), 0.5);
}

/* Mini-player in de topbalk: compacte meeluisterknop + volume, thema-getrouw. */

/* De speler hangt aan de VU-groep; hier alleen de basis als hij nog niet

   verplaatst is (voorkomt flits van absolute positie bij opstarten). */

.topbar > .tb-player {
  order: 2;
  position: static;
  transform: none;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px 3px 4px;

  border-radius: 12px;
  border: 1px solid var(--border-light);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    rgba(var(--surface-rgb), 0.5);

  backdrop-filter: blur(14px) saturate(1.2);

  box-shadow:
    0 1px 0 var(--bevel-top) inset,
    0 6px 18px rgba(0, 0, 0, 0.3);
}

.tb-player .tb-play {
  border-color: transparent;
}

.tb-player.is-playing .tb-play {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: var(--accent-soft2);
}

.tb-player.is-connecting .tb-play {
  animation: tb-player-pulse 1.1s infinite;
}

/* #147 — autoplay geblokkeerd na refresh: knop pulseert als hervat-affordance. */
.tb-player.is-resume .tb-play {
  animation: tb-player-pulse 1.1s infinite;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.5);
  background: var(--accent-soft2);
}

.tb-play .ico-pause {
  display: none;
}

.tb-player.is-playing .ico-play {
  display: none;
}

.tb-player.is-playing .ico-pause {
  display: inline;
}

.tb-eq i {
  width: 3px;
  border-radius: 1px;
  background: var(--accent-grad);
  transform-origin: bottom;
  animation: tb-eq 0.9s ease-in-out infinite;
}

.tb-eq i:nth-child(1) {
  height: 7px;
  animation-delay: 0s;
}

.tb-eq i:nth-child(2) {
  height: 12px;
  animation-delay: 0.18s;
}

.tb-eq i:nth-child(3) {
  height: 9px;
  animation-delay: 0.22s;
}

@keyframes tb-eq {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes tb-player-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(var(--accent-rgb), 0);
  }
}

.tb-player.is-connecting .tb-play {
  animation: tb-player-pulse 1.1s infinite;
}

@media (max-width: 1700px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .topbar > .brand {
    order: 0;
  }

  .topbar > .topbar-center {
    order: 1;
    margin-left: auto;
  }

  .topbar > .topbar-vu {
    position: static;
    transform: none;
    order: 2;
    margin: 0 auto;
  }

  .topbar-vu .tb-vu {
    width: clamp(170px, 20vw, 240px);
    min-width: 170px;
  }

  .topbar > .tb-theme,
  .topbar > .tb-zoom,
  .topbar > .tb-btn[title="Donker / licht"],
  .topbar > .tb-edit,
  .topbar > .tb-profile {
    order: 3;
  }

  .topbar > .studio-nav {
    order: 4;
    flex: 1 0 100%;
    justify-content: flex-start;

    border-top: 1px solid var(--border);
    padding-top: 4px;
  }
}

@media (max-width: 760px) {
  .topbar > .topbar-vu {
    order: 5;
    flex: 1 0 100%;
    justify-content: center;
    margin: 2px 0;
  }

  .topbar-vu .tb-vu {
    width: min(280px, 72vw);
    min-width: min(220px, 58vw);
  }

  .topbar-vu .tb-vu-seg {
    min-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tb-eq i,
  .tb-player.is-connecting .tb-play {
    animation: none;
  }
}

.tb-profile {
  border-radius: 50%;
}

.tb-profile .profile-avatar {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-bright);
}

.theme-pop,
.profile-pop,
.layout-pop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 22px;
  z-index: 120;

  background: rgb(var(--surface-rgb));
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);

  padding: 14px;
  box-shadow: var(--elev-3);
  flex-direction: column;
  gap: 10px;
}

.theme-pop.open,
.profile-pop.open,
.layout-pop.open {
  display: flex;
  animation: studio-popin 0.16s ease;
}

@keyframes studio-popin {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.theme-pop {
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow-y: auto;
}

.theme-pop h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--text-dim);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.theme-pop .palette-opt {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;

  min-width: 0;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-hover);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.theme-pop .palette-opt:hover {
  border-color: rgba(var(--accent-rgb), 0.55);
}

.theme-pop .palette-opt .pal {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.theme-pop .palette-opt .pname {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
}

.theme-pop .palette-opt .pdesc {
  font-size: 10px;
  line-height: 1.2;
  color: var(--text-dim);
}

.profile-pop {
  width: 240px;
}

.layout-pop {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--topbar-h) - 24px);
  overflow-y: auto;
}

/* Zwevende balk onderin de pagina (vaste positie in de viewport). */

.layout-pop {
  position: fixed;
  top: auto;
  right: auto;
  left: 50%;
  bottom: 14px;

  transform: translateX(-50%);

  width: min(920px, calc(100vw - 24px));
  max-height: calc(100dvh - 120px);

  overflow-y: auto;

  border-radius: var(--radius);
  box-shadow: var(--elev-2);
}

.layout-pop-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-bright);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.layout-pop-content {
  min-width: 0;
}

.layout-pop .obj-layout-bar {
  margin: 0;
  align-items: center;
  gap: 8px;
}

.layout-pop .obj-layout-title {
  font-size: 12px;
  letter-spacing: 0.08em;
}

.layout-pop .obj-layout-bar .obj-btn {
  appearance: none;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(var(--accent-rgb), 0.42);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text-bright);
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  box-shadow: var(--elev-1);
  transition:
    background 0.14s,
    border-color 0.14s,
    transform 0.14s;
}

.layout-pop .obj-layout-bar .obj-btn:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.layout-pop .obj-layout-bar .obj-btn:active {
  transform: translateY(1px);
}

.layout-pop .obj-layout-bar .ol-add-btn {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}

.layout-pop .obj-layout-bar .ol-add-btn:hover {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  filter: brightness(1.08);
}

.layout-pop .obj-layout-bar .ol-saveas {
  background: rgba(var(--accent2-rgb), 0.14);
  border-color: rgba(var(--accent2-rgb), 0.45);
}

.layout-pop .obj-layout-bar .ol-reset {
  background: transparent;
  border-color: var(--warn);
  color: var(--warn);
}

.layout-pop .obj-layout-bar .ol-reset:hover {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--on-accent);
}

.layout-pop .obj-layout-bar .ol-add {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 500px;
  min-width: 0;
}

.layout-pop .obj-layout-bar .ol-add-id {
  appearance: none;
  min-width: 180px;
  flex: 0 1 220px;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 5px 5px;
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
}

.layout-pop .obj-layout-bar .ol-add-cfg {
  flex: 1 1 180px;
  min-width: 120px;
}

.layout-pop .obj-layout-bar select,
.layout-pop .obj-layout-bar input {
  min-height: 42px;
  background-color: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.35);
  border-radius: var(--radius-sm);
  color: var(--text-bright);
}

.layout-pop .obj-layout-bar select option {
  background: rgb(var(--surface-rgb));
  color: var(--text);
}

.layout-pop .obj-layout-bar input::placeholder {
  color: var(--text-dim);
}

.layout-pop .obj-layout-bar select:focus-visible,
.layout-pop .obj-layout-bar input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
  outline-offset: 1px;
}

.pp-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-head .pp-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-head b {
  display: block;
  font-size: 14px;
  color: var(--text-bright);
}

.pp-head small {
  font-size: 11px;
  color: var(--text-dim);
}

.pp-item {
  width: 100%;
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-hover);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
/* #193 — profiel-sectie in de profiel-popup: sync-status + acties */
.pp-profile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.pp-profile-st {
  font-size: 11.5px;
  color: var(--text-dim);
}
.pp-profile-st.ok b {
  color: var(--success);
}
.pp-profile-st.warn b {
  color: var(--warn);
}
.pp-profile-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pp-mini {
  flex: 1 1 45%;
  min-height: 28px;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-hover);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.pp-mini.warn {
  border-color: var(--warn);
  color: var(--warn);
}

.pp-item:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}

.pp-item.pp-login {
  background: var(--accent-grad);
  color: var(--on-accent);
  border-color: transparent;
  font-weight: 700;
}

/* Live-kanalen-overzicht in de profiel-pulldown (realtime lees-laag). */

.pp-rt {
  margin: 10px 0;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card-hover);
}

.pp-rt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pp-rt-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-weight: 700;
}

.pp-rt-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
}

.pp-rt-state .led {
  width: 7px;
  height: 7px;
}

.pp-rt-ok {
  color: var(--ok, #35c26e);
  border-color: rgba(53, 194, 110, 0.35);
}

.pp-rt-warn {
  color: var(--warn, #f0a63a);
  border-color: rgba(240, 166, 58, 0.4);
}

.pp-rt-bad {
  color: var(--bad, #e05555);
  border-color: rgba(224, 80, 80, 0.4);
}

.pp-rt-dim {
  color: var(--text-dim);
}

.pp-rt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pp-rt-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  padding: 2px 6px;
  border-radius: 6px;
}

.pp-rt-list li:hover {
  background: rgba(var(--accent-rgb), 0.08);
}

.pp-rt-obj {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-rt-ch {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  border-radius: 999px;
  padding: 1px 8px;
  flex: none;
}

.pp-rt-empty {
  font-size: 11.5px;
  padding: 2px 4px;
}

.pp-rt-foot {
  font-size: 10.5px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

@media (max-width: 1280px) and (min-width: 761px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .topbar > .brand {
    order: 0;
  }

  .topbar > .topbar-center {
    order: 1;
    margin-left: auto;
  }

  .topbar > .tb-player {
    order: 1;
  }

  .topbar > .tb-theme,
  .topbar > .tb-zoom,
  .topbar > .tb-btn[title="Donker / licht"],
  .topbar > .tb-edit,
  .topbar > .tb-profile {
    order: 2;
  }

  .topbar > .studio-nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    border-top: 1px solid var(--border);
    padding-top: 4px;
  }
}

@media (max-width: 760px) {
  .topbar {
    gap: 6px;
    padding: 8px;
    flex-wrap: wrap;
  }

  .topbar .brand {
    flex: 1 1 auto;
    order: 0;
  }

  .topbar .brand-name {
    font-size: 12px;
  }

  .topbar .topbar-center {
    order: 5;
    flex: 1 0 100%;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .topbar .studio-clock {
    min-width: 0;
    font-size: 16px;
    padding: 4px 8px;
  }

  .tb-onair {
    max-width: 45vw;
  }

  .tb-theme {
    order: 1;
  }

  .topbar > .tb-player {
    order: 2;
  }

  .topbar > .tb-zoom {
    order: 2;
  }

  .topbar > .tb-btn[title="Donker / licht"] {
    order: 2;
  }

  .topbar > .tb-edit {
    order: 3;
  }

  .topbar > .tb-profile {
    order: 4;
  }

  .topbar > .studio-nav {
    order: 6;
    flex: 1 0 100%;
    justify-content: space-between;
    gap: 2px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
    flex-wrap: wrap;
  }

  .topbar > .studio-nav .nav-group {
    flex: 1 1 auto;
  }

  .topbar > .studio-nav a,
  .topbar > .studio-nav .nav-group-btn {
    flex: 1 1 auto;
    min-height: 38px;
    padding: 0 5px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .theme-pop,
  .profile-pop,
  .layout-pop {
    right: 8px;
  }

  .layout-pop .obj-layout-bar .ol-add {
    flex-wrap: wrap;
  }

  .layout-pop .obj-layout-bar .ol-add-id {
    flex: 1 1 150px;
  }

  .layout-pop .obj-layout-bar .ol-add-cfg {
    flex: 1 1 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .obj,
  .obj .obj-btn,
  .obj-horizon .hz-card,
  .obj-program .pg-card,
  .obj-monitoring-strip .ms-item,
  .obj-queue .qu-list li,
  .obj-news .nw-items li,
  .obj-jingle-list .jl-item,
  .obj-jingle-machine .jm-pad,
  .tb-btn,
  .theme-pop.open,
  .profile-pop.open,
  .layout-pop.open,
  .tb-onair .onair-pill {
    animation: none;
    transition: none;
  }

  .obj-grid:not(.obj-grid-editing) .obj-cell > .obj:hover,
  .obj-horizon .hz-card:hover,
  .obj-program .pg-card:hover,
  .obj-monitoring-strip .ms-item:hover,
  .obj-queue .qu-list li:hover,
  .obj-news .nw-items li:hover,
  .obj-jingle-list .jl-item:hover,
  .obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):hover,
  .obj-jingle-machine .jm-pad:not(.jm-disabled):not(.jm-empty):active {
    transform: none;
  }
}

/* Smal log: titel gaat vóór deck/duur/status (container query op het object).

   #168 — bij smalle vlakken schakelt de tabel naar auto-layout: een

   verborgen kolom verdwijnt dan echt (in fixed-layout claimt hij toch

   zijn vaste breedte en krijgt de titel de vrijgevallen ruimte niet).

   De titelcel krijgt een cqw-cap zodat nowrap-tekst ellipst en de rij

   altijd exact zo breed blijft als het vlak — nooit horizontaal scrollen. */

.obj-hour-log {
  container-type: inline-size;
}

@container (max-width: 700px) {
  .obj-hour-log .hl-table {
    table-layout: auto;
  }

  /* statuscel krimpt naar tag-breedte ("ON AIR −mm:ss" ≈ 120px) zodat de
     titel ook op ~600px vlakken leesbaar blijft */

  .obj-hour-log td.hl-status {
    max-width: 118px;
  }

  /* start+type+duur+status+automaat+pijl ≈ 450px incl. paddings — titel krijgt de rest */

  .obj-hour-log td.hl-title {
    max-width: calc(100cqw - 458px);
  }

  .obj-hour-log td:nth-child(5),
  .obj-hour-log th:nth-child(5) {
    display: none;
  }
}

@container (max-width: 560px) {
  .obj-hour-log td:nth-child(4),
  .obj-hour-log th:nth-child(4) {
    display: none;
  }

  .obj-hour-log td:nth-child(6),
  .obj-hour-log th:nth-child(6) {
    display: none;
  }

  /* open-chevron weg op smalle vlakken — de rij-klik opent dezelfde detailrij;
     het automaat-pijltje blijft juist wél zichtbaar */

  .obj-hour-log td:nth-child(8),
  .obj-hour-log th:nth-child(8) {
    display: none;
  }

  /* start+type+automaat ≈ 246px incl. paddings */

  .obj-hour-log td.hl-title {
    max-width: calc(100cqw - 246px);
  }
}

.obj-queue {
  container-type: inline-size;
}

@container (max-width: 420px) {
  .obj-queue .qu-dur {
    display: none;
  }
}

/* ── Classic Playout objecten (Navigator / Autoplay / BaseBrowser / Mix editor) ──

   Retro playout-look: beige paneelgevoel via bevel-tokens, LCD-displays altijd

   donker met accent-cijfers, mono tabular-nums. Werkt in élk palet. */

.cl-lcd {
  display: flex;

  align-items: baseline;

  gap: 10px;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.84), rgba(0, 0, 0, 0.66));

  border: 1px solid var(--border-light);

  border-radius: 8px;

  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.75),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);

  padding: 8px 12px;

  min-width: 0;
}

.cl-lcd-val {
  font-family: var(--mono);

  font-variant-numeric: tabular-nums;

  color: var(--accent);

  font-weight: 700;

  letter-spacing: 1.5px;

  text-shadow: 0 0 9px rgba(var(--accent-rgb), 0.55);

  white-space: nowrap;
}

.cl-lcd-sub {
  font-family: var(--mono);

  font-variant-numeric: tabular-nums;

  font-size: 12px;

  color: var(--accent-2);

  text-shadow: 0 0 7px rgba(var(--accent2-rgb), 0.45);

  white-space: nowrap;
}

/* ── classic-log (Navigator) ─────────────────────────────────────────────── */

.obj-classic-log {
  container-type: inline-size;
}

.cl-log {
  list-style: none;

  margin: 0;
  padding: 0;

  overflow-y: auto;

  min-height: 0;

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 2px;
}

.cl-log li {
  display: grid;

  grid-template-columns: 62px minmax(0, 1fr) auto auto auto;

  align-items: center;

  gap: 8px;

  padding: 5px 8px;

  border-radius: 7px;

  border: 1px solid transparent;

  font-size: 12.5px;
}

.cl-log li.cl-done {
  opacity: 0.48;
}

.cl-log li.cl-now {
  background: rgba(var(--accent-rgb), 0.13);

  border-color: rgba(var(--accent-rgb), 0.45);

  box-shadow: inset 2px 0 0 var(--accent);
}

.cl-log li.cl-now .cl-main strong {
  color: var(--text-bright);
}

.cl-time {
  font-size: 11px;
  color: var(--text-dim);
}

.cl-log li.cl-now .cl-time {
  color: var(--accent);
}

.cl-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-main strong {
  font-weight: 700;
}

.cl-dur {
  justify-self: end;
}

@container (max-width: 560px) {
  .cl-log li {
    grid-template-columns: 52px minmax(0, 1fr) auto;
  }

  .cl-log li .tag,
  .cl-log li .cl-dur {
    display: none;
  }
}

/* ── classic-deck (Autoplay) ─────────────────────────────────────────────── */

.cd-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.cd-lcds {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.cd-lcd-main {
  flex: 1;
}

.cd-lcd-main .cl-lcd-val {
  font-size: clamp(22px, 3.2vw, 34px);
}

.cd-lcd-main .cl-lcd-sub {
  margin-left: auto;
}

.cd-lamps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.cd-lamp {
  display: flex;
  align-items: center;
  gap: 6px;

  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;

  color: var(--text-dim);
  text-transform: uppercase;
}

.cd-lamp i {
  width: 10px;
  height: 10px;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid var(--border-light);

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cd-lamp.on {
  color: var(--text);
}

.cd-lamp[data-f="lamp-play"].on i {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 0 9px rgba(var(--accent-rgb), 0.65);
}

.cd-lamp[data-f="lamp-cue"].on i {
  background: var(--warn);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(243, 156, 18, 0.55);
}

.cd-lamp[data-f="lamp-end"].on i {
  background: var(--danger);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(255, 107, 107, 0.6);
}

.cd-names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cd-names b {
  font-size: 15px;
  color: var(--text-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-names i {
  font-style: normal;
  color: var(--text-dim);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-track {
  position: relative;
  height: 6px;
  border-radius: 4px;

  background: var(--surface-deep);

  border: 1px solid var(--border);

  overflow: hidden;
}

.cd-head {
  height: 100%;
  width: 0%;

  background: var(--accent-grad);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);

  transition: width 0.6s linear;
}

.cd-next {
  font-size: 12px;
  min-height: 1.2em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cd-next b {
  color: var(--text-bright);
  font-weight: 700;
}

/* ── classic-browser (BaseBrowser) ───────────────────────────────────────── */

.obj-classic-browser {
  container-type: inline-size;
}

.cb-wrap {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.cb-cats {
  display: flex;
  flex-direction: column;
  gap: 5px;

  width: 138px;
  flex: 0 0 138px;

  min-height: 0;
  overflow-y: auto;
}

.cb-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;

  font: inherit;
  font-size: 12px;
  color: var(--text);

  background: linear-gradient(180deg, var(--surface-2), var(--surface-deep));

  border: 1px solid var(--border-light);

  border-radius: 7px;

  padding: 7px 10px;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 var(--bevel-top),
    inset 0 -1px 0 var(--bevel-bottom);

  text-align: left;
}

.cb-cat:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.cb-cat.is-sel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.16));

  border-color: rgba(var(--accent-rgb), 0.55);

  color: var(--text-bright);
  font-weight: 700;
}

.cb-cat.cb-empty {
  opacity: 0.4;
  cursor: default;
}

.cb-n {
  font-size: 10.5px;
  color: var(--text-dim);
}

.cb-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cb-list {
  list-style: none;
  margin: 0;
  padding: 0;

  overflow-y: auto;
  min-height: 0;
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cb-list li {
  display: grid;

  grid-template-columns: 44px minmax(0, 1fr) auto;

  align-items: center;
  gap: 8px;

  padding: 5px 8px;

  border-radius: 7px;

  font-size: 12.5px;
}

.cb-list li:hover {
  background: rgba(var(--accent-rgb), 0.07);
}

.cb-time {
  font-size: 11px;
}

.cb-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cb-dur {
  justify-self: end;
}

.cb-count {
  margin-top: 8px;
  font-size: 11px;
}

@container (max-width: 420px) {
  .cb-time {
    display: none;
  }
  .cb-cats {
    width: 108px;
    flex-basis: 108px;
  }
}

/* ── media-browser (Mediabrowser) ────────────────────────────────────────── */

.obj-media-browser {
  container-type: inline-size;
}

.mb-wrap {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

/* Zelfde hoogte-gedrag als het uurlog: grid-rijen groeien mee met de inhoud
   (auto), dus het scrollende vlak krijgt een plafond — bij -h/+h past de kaart
   mee en de lijst scrollt intern. Standalone mag onbegrensd. */
.obj-media-browser .mb-wrap {
  max-height: 56vh;
}

.obj-standalone-host .obj-media-browser .mb-wrap {
  max-height: none;
}

.mb-tree {
  width: 190px;
  flex: 0 0 190px;

  min-height: 0;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mb-node {
  display: flex;
  align-items: center;
  gap: 4px;

  padding: 4px 6px 4px calc(6px + var(--d, 0) * 14px);

  border-radius: 6px;

  font-size: 12px;
  color: var(--text);

  cursor: pointer;

  border: 1px solid transparent;
}

.mb-node:hover {
  background: rgba(var(--accent-rgb), 0.07);
}

.mb-node.is-sel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.16));

  border-color: rgba(var(--accent-rgb), 0.55);

  color: var(--text-bright);
  font-weight: 700;
}

.mb-tw {
  width: 16px;
  flex: 0 0 16px;

  font: inherit;
  font-size: 9px;
  color: var(--text-dim);

  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mb-tw:disabled {
  cursor: default;
}

.mb-ico {
  width: 14px;
  flex: 0 0 14px;
  color: var(--text-dim);
  display: inline-flex;
}

.mb-ico svg {
  width: 14px;
  height: 14px;
}

/* Mapkleur per mediasoort (zelfde palet als de uurlog-kind-chips). */
.mb-ico[data-kind="tracks"],
.mb-dir[data-kind="tracks"] {
  color: var(--accent);
}
.mb-ico[data-kind="jingles"],
.mb-dir[data-kind="jingles"] {
  color: var(--warn);
}
.mb-ico[data-kind="voice"],
.mb-dir[data-kind="voice"] {
  color: var(--layer-2);
}
.mb-ico[data-kind="news"],
.mb-dir[data-kind="news"] {
  color: var(--danger);
}
.mb-ico[data-kind="sweepers"],
.mb-dir[data-kind="sweepers"],
.mb-ico[data-kind="spots"],
.mb-dir[data-kind="spots"],
.mb-ico[data-kind="promo"],
.mb-dir[data-kind="promo"] {
  color: var(--accent-2);
}
.mb-ico[data-kind="nieuw"],
.mb-dir[data-kind="nieuw"] {
  color: var(--ok);
}
.mb-ico[data-kind="hot"],
.mb-dir[data-kind="hot"] {
  color: var(--danger);
}
.mb-ico[data-kind="programma"],
.mb-dir[data-kind="programma"] {
  color: var(--layer-6);
}

.mb-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-n {
  font-size: 10.5px;
  color: var(--text-dim);
}

.mb-pane {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.mb-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

/* Categorieknoppen (dj-weergave): boven de lijst, mapkleur per categorie.
   Knoppen mogen naar een tweede regel wrapen — nooit onzichtbaar afsnijden. */
.mb-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.mb-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);

  background: var(--surface-2);

  border: 1px solid var(--border-light);
  border-radius: 8px;

  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}

.mb-cat:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
}

.mb-cat .mb-cat-n {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
}

.mb-cat.is-sel {
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--text-bright);
}

.mb-cat-tracks.is-sel {
  background: rgba(var(--accent-rgb), 0.2);
}

.mb-cat-jingles.is-sel {
  background: rgba(243, 156, 18, 0.2);
  border-color: rgba(243, 156, 18, 0.55);
}

.mb-cat-voice.is-sel {
  background: rgba(155, 140, 255, 0.2);
  border-color: rgba(155, 140, 255, 0.55);
}

.mb-cat-news.is-sel {
  background: rgba(255, 107, 107, 0.16);
  border-color: rgba(255, 107, 107, 0.5);
}

.mb-cat-nieuw.is-sel {
  background: rgba(46, 204, 113, 0.18);
  border-color: rgba(46, 204, 113, 0.5);
}

.mb-cat-hot.is-sel {
  background: rgba(255, 107, 107, 0.2);
  border-color: rgba(255, 107, 107, 0.55);
}

.mb-cat-programma.is-sel {
  background: rgba(77, 208, 225, 0.18);
  border-color: rgba(77, 208, 225, 0.5);
}

/* Dj-weergave: boomkolom weg — navigatie via knoppen + kruimel + map-rijen */
.mb-wrap.is-cats .mb-tree {
  display: none;
}

.mb-crumbrow {
  margin-bottom: 6px;
  min-height: 15px;
}

.mb-crumb {
  font-size: 11px;
  color: var(--text-dim);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-crumb-seg {
  font: inherit;
  font-size: 11px;
  color: var(--text-dim);

  background: none;
  border: 0;
  border-radius: 4px;
  padding: 2px 4px;

  cursor: pointer;
}

.mb-crumb-seg:hover {
  color: var(--accent, var(--text-bright));
  background: rgba(var(--accent-rgb), 0.1);
}

.mb-crumb-seg:last-child {
  color: var(--text);
  font-weight: 600;
}

.mb-crumb-sep {
  color: var(--text-dim);
  opacity: 0.45;
  padding: 0 1px;
}

.mb-filter {
  font: inherit;
  font-size: 11.5px;
  color: var(--text);

  background: var(--surface-deep);

  border: 1px solid var(--border-light);
  border-radius: 7px;

  padding: 4px 8px;
  width: 150px;
}

.mb-list {
  /* Kolombreedtes gedeeld door header en rijen: play · type · artiest ·
     titel · jaar · bpm · key · energie · duur */
  --mb-cols: 30px 62px minmax(0, 1fr) minmax(0, 1.5fr) 44px 56px 44px 58px 52px;

  list-style: none;
  margin: 0;
  padding: 0;

  overflow-y: auto;
  min-height: 0;
  flex: 1;

  display: flex;
  flex-direction: column;

  border-radius: 8px;

  /* scrollIntoView houdt marge onder de kop en boven de ronde hoeken —
     de detailrij breekt nooit af tegen de rand van het vlak. */
  scroll-padding: 34px 0 10px 0;
}

/* Sticky kolomkoppen — zelfde grid als de rijen, zelfde look als het
   uurlog: oppervlakte, fijne onderlijn, brede letterspatiëring. */
.mb-cols {
  display: grid;

  grid-template-columns: var(--mb-cols);

  align-items: center;
  gap: 8px;

  padding: 6px 8px;

  position: sticky;
  top: 0;
  z-index: 2;

  background: var(--surface);

  border-bottom: 1px solid var(--border-light, var(--border));
}

.mb-thcell {
  position: relative;
  min-width: 0;

  display: flex;
  align-items: center;
}

.mb-th {
  flex: 1 1 auto;
  min-width: 0;

  font: inherit;
  font-size: 10.5px;
  font-weight: 800;

  letter-spacing: 1.2px;
  text-transform: uppercase;

  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 0;

  text-align: left;
  cursor: pointer;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-th:hover {
  color: var(--text-bright);
}

.mb-th.is-on {
  color: var(--accent, var(--text-bright));
}

.mb-th.mb-th-r {
  text-align: right;
}

/* Kolomgreep aan de rechterrand van elke kopcel — versleepbaar, breedtes
   worden opgeslagen onder studio.prefs.cols.media-browser. */
.mb-drag {
  position: absolute;
  right: -5px;
  top: -6px;
  bottom: -6px;
  width: 10px;

  cursor: col-resize;
  z-index: 3;
  touch-action: none;
}

.mb-drag::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 50%;
  width: 2px;

  border-radius: 1px;
  background: var(--border-light);
  opacity: 0;

  transition: opacity 0.12s;
}

.mb-cols:hover .mb-drag::after {
  opacity: 0.5;
}

.mb-drag:hover::after {
  opacity: 1 !important;
  background: var(--accent);
}

/* Laatste greep blijft binnen de cel — anders forceert hij horizontale scroll. */
.mb-thcell:last-child .mb-drag {
  right: 0;
}

.mb-row {
  display: grid;

  grid-template-columns: var(--mb-cols);

  align-items: center;
  gap: 8px;

  padding: 0 8px;
  height: 38px;

  border-bottom: 1px solid var(--border);

  font-size: 12.5px;
}

.mb-row:last-child {
  border-bottom: 0;
}

.mb-row:hover {
  background: rgba(var(--accent-rgb), 0.07);
}

.mb-row.is-playing {
  background: rgba(var(--accent-rgb), 0.12);
}

.mb-row.is-missing {
  opacity: 0.65;
}

.mb-row.mb-nodb {
  opacity: 0.5;
}

/* Uitgeklapte detailrij: compacte mini-player (play + dunne wave) —
   zelfde patroon als .hl-mp in het uurlog. Blok-lij (niet de rij-grid),
   ~1 extra rijhoogte zodat rij + detail ≈ 2 regels is. */
.mb-waveli {
  display: block;
  height: 44px;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
}
.mb-row.mb-open {
  border-bottom-color: transparent;
}
.mb-mp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px 5px 34px;
  height: 100%;
}
.mb-mp-play {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 0;
  font-size: 12px;
  border: 1px solid var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mb-mp-play.on {
  background: var(--accent);
  color: #fff;
}
.mb-mp-play:disabled {
  opacity: 0.55;
  cursor: wait;
}
.mb-mp-wave {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: #0a0f18;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer; /* klik = naar die positie luisteren */
}
.mb-mp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: 0.85;
}
.mb-mp-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 3px;
  pointer-events: none;
}
.mb-mp-prog i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent);
}
.mb-mp-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-dim);
  min-width: 86px;
  text-align: right;
}

.mb-play {
  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font: inherit;
  font-size: 10px;
  color: var(--text);

  background: linear-gradient(180deg, var(--surface-2), var(--surface-deep));

  border: 1px solid var(--border-light);
  border-radius: 50%;

  cursor: pointer;

  box-shadow:
    inset 0 1px 0 var(--bevel-top),
    inset 0 -1px 0 var(--bevel-bottom);
}

.mb-row.is-playing .mb-play {
  border-color: rgba(var(--accent-rgb), 0.6);

  color: var(--accent, var(--text-bright));
}

.mb-artist {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Titelcel: titeltekst + map-link/status-chips in dezelfde kolom */
.mb-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;

  display: flex;
  align-items: center;
  gap: 7px;
}

.mb-title-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mb-tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.mb-year,
.mb-bpm,
.mb-key,
.mb-enr {
  font-size: 10.5px;
  color: var(--accent-2);
  white-space: nowrap;
}

.mb-year,
.mb-bpm {
  justify-self: end;
}

.mb-key {
  justify-self: center;
}

/* Energie als visuele strip: ghost-gradient toont de schaal, de fill loopt
   tot de waarde — groen rustig, oranje midden, rood vol gas. */
.mb-enr {
  justify-self: stretch;
  align-self: center;
}

.mb-enr-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;

  background: linear-gradient(90deg, rgba(46, 204, 113, 0.14), rgba(243, 156, 18, 0.14) 55%, rgba(255, 107, 107, 0.14));
}

.mb-enr-bar i {
  display: block;
  height: 100%;
  width: 100%;

  background: linear-gradient(90deg, var(--ok) 0%, var(--warn) 55%, var(--danger) 100%);

  clip-path: inset(0 calc(100% - var(--e, 0%)) 0 0);
}

.mb-dirrow {
  cursor: pointer;
  color: var(--text-bright);
}

.mb-dirrow:hover {
  background: rgba(var(--accent-rgb), 0.12);
}

.mb-dirrow .mb-dur {
  color: var(--text-dim);
  font-size: 14px;
}

.mb-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;
  color: var(--accent, var(--text-dim));
}

.mb-dir svg {
  width: 15px;
  height: 15px;
}

.mb-loc {
  font: inherit;
  font-size: 10.5px;
  color: var(--text-dim);

  background: none;
  border: 0;
  padding: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

button.mb-loc {
  cursor: pointer;
  text-decoration: underline dotted;
}

button.mb-loc:hover {
  color: var(--accent, var(--text-bright));
}

/* Type-chip zoals het uurlog: uniforme breedte, kleur per mediasoort */
.mb-kind {
  display: inline-block;
  min-width: 58px;
  text-align: center;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;

  padding: 2px 6px;
  border-radius: 5px;

  background: var(--surface-2);
  color: var(--text);

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mb-kind-jingle {
  background: rgba(243, 156, 18, 0.18);
  color: var(--layer-0);
}

.mb-kind-voice {
  background: rgba(155, 140, 255, 0.2);
  color: var(--layer-2);
}

.mb-kind-news {
  background: rgba(255, 107, 107, 0.18);
  color: var(--danger);
}

.mb-kind-sweeper,
.mb-kind-promo,
.mb-kind-spot {
  background: rgba(46, 204, 113, 0.16);
  color: var(--ok);
}

.mb-chip {
  font-size: 9.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  padding: 1px 6px;
  border-radius: 999px;

  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text-dim);

  white-space: nowrap;
}

.mb-chip.mb-miss {
  background: rgba(255, 90, 90, 0.18);
  color: #ff9d9d;
}

.mb-chip.mb-off {
  background: rgba(255, 200, 60, 0.14);
  color: #e8c25a;
}

.mb-chip.mb-nodbchip {
  background: rgba(var(--accent-rgb), 0.1);
}

.mb-dur {
  justify-self: end;
  font-size: 11px;
  color: var(--text-dim);
}

.mb-foot {
  margin-top: 6px;
  font-size: 11px;
}

.mb-none {
  padding: 12px 8px;
}

@container (max-width: 520px) {
  .mb-tree {
    width: 140px;
    flex-basis: 140px;
  }
  .mb-filter {
    width: 100px;
  }
}

@container (max-width: 400px) {
  .mb-wrap {
    flex-direction: column;
  }
  .mb-tree {
    width: auto;
    flex: 0 0 auto;
    max-height: 120px;
  }
}

/* ── classic-editor (Mix editor) ─────────────────────────────────────────── */

.ce-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
}

.ce-bar {
  position: relative;
  flex: 1;
  min-height: 64px;

  border: 1px solid var(--border-light);

  border-radius: 8px;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.28));

  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);

  overflow: hidden;
}

.ce-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ce-cue {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;

  transform: translateX(-1px);
  pointer-events: none;
}

.ce-cue i {
  position: absolute;
  top: 2px;
  left: 3px;

  font: 700 8.5px/1 var(--mono);
  font-style: normal;

  padding: 2px 4px;
  border-radius: 4px;
  letter-spacing: 0.8px;
}

.ce-cue.ce-in i {
  color: #101010;
  background: var(--warn);
}

.ce-cue.ce-out i {
  background: var(--onair);
  color: #fff;
}

.ce-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;

  background: var(--text-bright);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

.ce-dot {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 8px;
  height: 8px;

  border-radius: 50%;
  background: var(--accent);

  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}

.ce-ruler {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ce-chip {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;

  padding: 3px 8px;
  border-radius: 6px;

  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--border-light);

  color: var(--accent);
  text-shadow: 0 0 7px rgba(var(--accent-rgb), 0.5);

  white-space: nowrap;
}

.ce-chip.ce-in {
  color: var(--warn);
  text-shadow: none;
}

.ce-chip.ce-out {
  color: var(--danger);
  text-shadow: none;
}

/* ── Nonstop-console: status, lagen en automaat-toggle ── */

.obj-nonstop-status .ns-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.obj-nonstop-status .ns-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}

.obj-nonstop-status .ns-row b {
  font-weight: 700;
}

.obj-nonstop-layer .nl-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-size: 12px;
  line-height: 1.7;
  overflow: auto;
  max-height: 140px;
}

.obj-nonstop-layer .nl-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-nonstop-layer .nl-list li.nl-onair {
  color: var(--onair);
  font-weight: 700;
}

.obj-nonstop-layer .nl-seq {
  display: inline-block;
  min-width: 34px;
}

.obj-nonstop-layer .nl-ctrl {
  display: flex;
  gap: 6px;
}

.obj-nonstop-layer .nl-cmd.is-armed {
  border-color: var(--warn);
  color: var(--warn);
}

/* #61: enqueue-paneel — catalogus zoeken → achteraan de keten. */
.obj-nonstop-layer .nl-enq {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.obj-nonstop-layer .nl-enq[hidden] {
  display: none;
}

.obj-nonstop-layer .nl-q {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  color: var(--text);
}

.obj-nonstop-layer .nl-q:focus {
  border-color: var(--accent);
  outline: none;
}

.obj-nonstop-layer .nl-res {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 150px;
  overflow: auto;
}

.obj-nonstop-layer .nl-res-it {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 7px;
  font-size: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 4px);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.obj-nonstop-layer .nl-res-it:hover {
  border-color: var(--accent);
}

.obj-nonstop-layer .nl-res-it.is-armed {
  border-color: var(--warn);
}

.obj-nonstop-layer .nl-res-it .nl-arm {
  color: var(--warn);
  font-weight: 700;
}

.obj-automaat-toggle .at-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.obj-automaat-toggle .at-mode {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}

.obj-automaat-toggle .at-mode.at-auto {
  color: var(--accent-2);
}

.obj-automaat-toggle .at-mode.at-manual {
  color: var(--warn);
}

.obj-automaat-toggle .at-mode.at-none {
  color: var(--danger);
}

.obj-automaat-toggle .at-btn {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 14px;
}

/* #80 — bevestiging ín het object (overlay dekt alleen dit vlak) */
.obj-automaat-toggle .at-wrap {
  position: relative;
}
.obj-automaat-toggle .at-confirm {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(4, 8, 14, 0.78);
  border-radius: 10px;
}
.obj-automaat-toggle .at-confirm[hidden] {
  display: none;
}
.obj-automaat-toggle .at-confirm-box {
  max-width: 340px;
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--warn);
  border-radius: 10px;
  box-shadow: var(--elev-2, 0 8px 24px rgba(0, 0, 0, 0.45));
}
.obj-automaat-toggle .at-confirm-title {
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--warn);
  margin-bottom: 6px;
}
.obj-automaat-toggle .at-confirm-msg {
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 12px;
}
.obj-automaat-toggle .at-confirm-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.obj-automaat-toggle .at-confirm-btns .obj-btn {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 12px;
}
.obj-automaat-toggle .at-confirm-ok {
  border-color: var(--danger);
  color: var(--danger);
}
.obj-automaat-toggle .at-confirm-ok:not(:disabled):hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ── backend-config (#101): tabs + settings-formulieren ────────────────── */

.obj-backend-config .bc-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

.obj-backend-config .bc-tab {
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    background 0.14s ease;
}

.obj-backend-config .bc-tab:hover {
  color: var(--text);
  border-color: var(--border-light);
}

.obj-backend-config .bc-tab.is-active {
  color: var(--accent-2);
  border-color: rgba(var(--accent-rgb), 0.45);
  background: var(--accent-soft);
}

.obj-backend-config .bc-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.obj-backend-config .bc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}

.obj-backend-config .bc-sec {
  background: var(--surface-deep);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.obj-backend-config .bc-sec-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.4px;
  color: var(--text-dim);
  text-transform: uppercase;
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.obj-backend-config .bc-sec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
  border-radius: 2px;
}

.obj-backend-config .bc-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}

.obj-backend-config .bc-kv:last-child {
  border-bottom: 0;
}

.obj-backend-config .bc-lab {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 0.4px;
  flex: none;
}

.obj-backend-config .bc-val {
  text-align: right;
  overflow-wrap: anywhere;
}

.obj-backend-config .bc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.obj-backend-config .bc-table th {
  text-align: left;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 800;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}

.obj-backend-config .bc-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}

.obj-backend-config .bc-table tr:last-child td {
  border-bottom: 0;
}

.obj-backend-config .bc-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.obj-backend-config .bc-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  align-items: center;
  gap: 10px;
}

.obj-backend-config .bc-input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 6px 10px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12.5px;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.obj-backend-config .bc-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
}

.obj-backend-config .bc-check {
  appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 22px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  position: relative;
  cursor: pointer;
  margin: 0;
  transition:
    background 0.14s ease,
    border-color 0.14s ease;
  flex: none;
}

.obj-backend-config .bc-check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition:
    transform 0.14s ease,
    background 0.14s ease;
}

.obj-backend-config .bc-check:checked {
  background: var(--accent-soft2);
  border-color: rgba(var(--accent-rgb), 0.55);
}

.obj-backend-config .bc-check:checked::after {
  transform: translateX(16px);
  background: var(--accent-2);
}

.obj-backend-config .bc-check:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.obj-backend-config .bc-bool {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.obj-backend-config .bc-bool-state {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--text-dim);
}

.obj-backend-config .bc-check:checked ~ .bc-bool-state {
  color: var(--accent-2);
}

.obj-backend-config .bc-json {
  margin: 0;
  max-height: 140px;
  overflow: auto;
  white-space: pre;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  border: 1px dashed var(--border);
  background: var(--surface-2);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-dim);
}

.obj-backend-config .bc-ro {
  font-size: 12px;
  color: var(--text-dim);
}

.obj-backend-config .bc-row-audit .bc-lab {
  opacity: 0.6;
}

.obj-backend-config .bc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.obj-backend-config .bc-actions .obj-btn {
  min-height: 36px;
  padding: 0 14px;
  font-size: 11px;
}

.obj-backend-config .bc-actions .bc-save:not(:disabled) {
  background: var(--accent-grad);
  color: var(--on-accent);
  border-color: transparent;
}

.obj-backend-config .bc-note {
  flex: 1;
  font-size: 11.5px;
}

.obj-backend-config .bc-note.dim,
.obj-backend-config .bc-foot {
  color: var(--text-dim);
}

.obj-backend-config .bc-note.ok {
  color: var(--accent-2);
}

.obj-backend-config .bc-note.err,
.obj-backend-config .bc-err {
  color: var(--danger);
}

.obj-backend-config .bc-note.warn {
  color: var(--warn);
}

.obj-backend-config .bc-blocked {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px;
  color: var(--warn);
  font-size: 12.5px;
}

.obj-backend-config .bc-run {
  min-height: 40px;
  width: 100%;
  font-size: 12px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.obj-backend-config .bc-foot {
  margin-top: 12px;
  font-size: 11px;
}

/* ── audio-flow (#110): bedradingsdiagram van de audio-pipeline ─────────── */
/* ── Generieke huisstijl-pulldown `.sel` (#124 / F5.4b) ─────────────────────
   Gegeneraliseerd uit de uur-keuze van local-tracking (lt-hour). Alleen
   tokens — geen vaste kleuren — zodat thema/modus-wissel klopt. */
.sel {
  position: relative;
}
.sel-btn {
  min-height: 38px;
  min-width: 196px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface-sheen), transparent 70%), var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
  box-shadow: var(--bevel), var(--elev-1);
  transition:
    transform 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}
.sel-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.sel-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sel.open > .sel-btn {
  border-color: rgba(var(--accent-rgb), 0.55);
}
.sel-val {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sel-arrow {
  font-style: normal;
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
  transition: transform 0.14s ease;
}
.sel.open > .sel-btn .sel-arrow {
  transform: rotate(180deg);
}
.sel-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--surface-sheen), transparent 40%), var(--surface-2);
  box-shadow: var(--elev-3);
  max-height: 320px;
  overflow: auto;
  animation: sel-open 0.15s ease;
}
@keyframes sel-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.sel-opt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
}
.sel-opt:hover {
  background: rgba(var(--accent-rgb), 0.1);
  border-color: rgba(var(--accent-rgb), 0.3);
}
.sel-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.sel-opt.sel-cur {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--accent);
}
.sel-empty {
  padding: 8px 10px;
  color: var(--text-dim);
  font-size: 12px;
}

@keyframes af-flow {
  to {
    stroke-dashoffset: -14;
  }
}

@keyframes af-blink {
  50% {
    opacity: 0.55;
  }
}

/* cam-publish (O2 / #290) — studio-cam preview + publish-knop */
.obj-cam-publish .cp-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-2, #000);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.obj-cam-publish .cp-preview video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.obj-cam-publish .cp-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.obj-cam-publish .ft-ctl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 6px 0;
}
.obj-cam-publish .ft-btn {
  min-height: 48px;
  padding: 0 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.obj-cam-publish .ft-live {
  border-color: var(--danger);
  color: var(--danger);
  animation: af-blink 1.4s ease-in-out infinite;
}
.obj-cam-publish .ft-vu {
  max-width: none;
  height: 8px;
}
/* destinations (video-dashboard O7 / #44, layout #50) — multistream-bediening.
   Twee-regelige grid-rij: regel 1 = dot|naam|state|toggle|src,
   regel 2 = meta|keys — elke rij dezelfde kolommen, dus uitgelijnd. */
.obj-destinations .dst-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.obj-destinations .dst-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "dot name state toggle src"
    "dot meta meta keys keys";
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.obj-destinations .dst-dot {
  grid-area: dot;
  align-self: start;
  margin-top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
}
.obj-destinations .dst-dot[data-s="live"] {
  background: var(--ok);
}
.obj-destinations .dst-dot[data-s="warn"] {
  background: var(--warn);
}
.obj-destinations .dst-dot[data-s="key"] {
  background: var(--warn);
}
.obj-destinations .dst-dot[data-s="off"] {
  background: var(--dim);
}
.obj-destinations .dst-name {
  grid-area: name;
  font-size: 12.5px;
  min-width: 0;
}
.obj-destinations .dst-meta {
  grid-area: meta;
  font-size: 10.5px;
  line-height: 1.3;
}
.obj-destinations .dst-state {
  grid-area: state;
  justify-self: end;
  font-size: 11.5px;
  white-space: nowrap;
}
.obj-destinations .dst-state[data-s="live"] {
  color: var(--ok);
}
.obj-destinations .dst-state[data-s="warn"],
.obj-destinations .dst-state[data-s="key"] {
  color: var(--warn);
}
.obj-destinations .dst-row > .btn[data-a="toggle"] {
  grid-area: toggle;
  justify-self: end;
}
.obj-destinations .dst-keys {
  grid-area: keys;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.obj-destinations .dst-key {
  flex: 0 1 140px;
  min-width: 80px;
  font: inherit;
  font-size: 11.5px;
  padding: 4px 7px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
}
/* destinations src-picker (DASHBOARDS / #47) — bronkeuze per bestemming */
.obj-destinations .dst-src {
  grid-area: src;
  justify-self: end;
  font: inherit;
  font-size: 11px;
  padding: 3px 5px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  max-width: 120px;
}

/* video-multiview (O4 / #292) — tegelgrid met WHEP-feeds */
.obj-video-multiview .mv-grid,
.obj-webcams .mv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  height: 100%;
}
.obj-video-multiview .mv-tile,
.obj-webcams .wc-vid {
  position: relative;
  background: var(--bg-2, #000);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.obj-video-multiview .mv-tile video,
.obj-webcams .wc-vid video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.obj-video-multiview .mv-tag,
.obj-webcams .mv-tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 9px;
  font-size: 11px;
  color: white;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent);
}
.obj-video-multiview .mv-status[data-state="live"],
.obj-webcams .mv-status[data-state="live"] {
  color: var(--onair);
  font-weight: 800;
}
.obj-video-multiview .mv-status[data-state="error"],
.obj-webcams .mv-status[data-state="error"] {
  color: var(--danger);
  font-weight: 800;
}
.obj-webcams .mv-status[data-state="nortc"] {
  color: var(--warn);
  font-weight: 800;
}
/* webcams (DASHBOARDS / #47) — cam-tegel met aan/uit-toggle */
.obj-webcams .wc-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.obj-webcams .wc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.obj-webcams .wc-dev {
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-webcams .wc-ext {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
/* overlay (#52) — banner+ticker tekst-overlay op de program-feed */
.obj-overlay .ov-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
}
.obj-overlay .ov-lbl {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--dim);
  min-width: 46px;
}
.obj-overlay .ov-inp {
  font: inherit;
  font-size: 12.5px;
  padding: 6px 9px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  min-width: 0;
}
.obj-overlay .ov-meta {
  padding: 2px 8px 6px;
  font-size: 11px;
  color: var(--text-dim);
}
.obj-overlay .ov-meta.is-err {
  color: var(--danger);
}
/* scenes (video-dashboard O9 / #45) — programma-scene selectie */
.obj-scenes .scn-row {
  display: flex;
  gap: 8px;
  padding: 8px;
  flex-wrap: wrap;
}
.obj-scenes .scn-btn {
  flex: 1;
  min-width: 72px;
  padding: 10px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.obj-scenes .scn-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.obj-scenes .scn-btn.is-pending {
  opacity: 0.6;
  cursor: wait;
}
.obj-scenes .scn-btn:disabled {
  opacity: 0.5;
}
.obj-scenes .scn-meta {
  padding: 0 8px 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.obj-scenes .scn-meta.is-err {
  color: var(--danger);
}
.obj-scenes .scn-btn.is-pending {
  opacity: 0.6;
  cursor: wait;
}
.obj-scenes .scn-btn:disabled {
  opacity: 0.5;
}
.obj-scenes .scn-meta {
  padding: 0 8px 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.obj-scenes .scn-meta.is-err {
  color: var(--danger);
}
.obj-scenes .scn-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
}
.obj-scenes .scn-badge.is-err {
  background: transparent;
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FLOW als grid van kaarten (#126) — gedeelde bouwstenen `fl-*`, keten
   `fc-*`, bronnen/uitgangen `fs-*`, talk `ft-*`, apparaten `fd-*`,
   stiltewacht `fz-*`, gebeurtenissen `fe-*`. Alleen tokens.
   ═══════════════════════════════════════════════════════════════════════ */
.fl-meter {
  display: inline-block;
  width: 100%;
  max-width: 160px;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-deep);
  border: 1px solid var(--border);
  overflow: hidden;
  vertical-align: middle;
}
.fl-meter > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--ok));
  transition: width 0.12s linear;
}
.fl-meter-silent > i {
  background: var(--text-dim);
}
.fl-meter-alarm > i {
  background: var(--danger);
}
.fl-listen {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
}
.fl-listen-sm {
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
  font-size: 12px;
}
.fl-listen-on {
  border-color: var(--accent);
  color: var(--accent);
}
.fl-act {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fl-act .obj-btn {
  min-height: 34px;
  padding: 0 12px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.fl-act .fl-danger {
  border-color: var(--danger);
  color: var(--danger);
}
.fl-act-ask {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px dashed var(--danger);
}
.fl-ask {
  font-size: 12px;
  color: var(--danger);
  font-weight: 700;
}
.fl-yes {
  border-color: var(--danger) !important;
  color: var(--danger) !important;
}
.fl-hint {
  font-size: 11.5px;
  line-height: 1.35;
}
.fl-btn-sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: 11px;
}
.fl-result {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  margin-top: 6px;
}
.fl-result-ok {
  color: var(--ok);
  border-color: var(--ok);
}
.fl-result-warn {
  color: var(--warn);
  border-color: var(--warn);
}
.fl-result-err {
  color: var(--danger);
  border-color: var(--danger);
}

/* live-desk (LIVE-3 / #185): mode-segmenten + monitor-knop */
.obj-live-desk .lv-modes {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.obj-live-desk .lv-seg {
  flex: 1;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.obj-live-desk .lv-seg.lv-on {
  border-color: var(--onair);
  color: var(--onair);
  font-weight: 800;
  box-shadow: var(--onair-glow);
}
.obj-live-desk .lv-mon.lv-on {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.fl-selrow {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.fl-selrow .sel-btn {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  font-size: 12.5px;
}
.fl-selbus {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
}

/* Signaalketen */
.obj-flow-chain .fc-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.obj-flow-chain .fc-edges {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.obj-flow-chain .fc-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 56px;
  column-gap: 56px;
  row-gap: 0;
  padding: 4px 2px;
}
.obj-flow-chain .fc-node {
  grid-row: calc(var(--row) * 2 + 1) / span 2;
  align-self: start;
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  cursor: default;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008) 46%, rgba(0, 0, 0, 0.1)),
    var(--surface-deep);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 3px 8px -4px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 96px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.obj-flow-chain .fc-node:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
}
.obj-flow-chain .fc-node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.obj-flow-chain .fc-on {
  border-color: rgba(var(--accent2-rgb), 0.55);
  box-shadow:
    0 0 0 1px rgba(var(--accent2-rgb), 0.25),
    0 6px 18px -8px rgba(var(--accent2-rgb), 0.5);
}
.obj-flow-chain .fc-alarm {
  border-color: var(--danger);
}
.obj-flow-chain .fc-kind-switch,
.obj-flow-chain .fc-kind-processor {
  border-style: dashed;
}
.obj-flow-chain .fc-dragging {
  opacity: 0.8;
  cursor: grabbing;
  border-style: dashed;
  border-color: var(--accent);
}
.obj-flow-chain .fc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.obj-flow-chain .fc-label {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 13px;
}
.obj-flow-chain .fc-sub {
  font-size: 11px;
}
.obj-flow-chain .fc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}
.obj-flow-chain .fc-db {
  font-size: 10.5px;
  min-width: 42px;
  text-align: right;
}
.obj-flow-chain .fc-mount {
  font-size: 10px;
}
.obj-flow-chain .fc-edge {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 2;
}
.obj-flow-chain .fc-edge-override,
.obj-flow-chain .fc-edge-mix {
  stroke: var(--accent-2);
  opacity: 0.55;
}
.obj-flow-chain .fc-edge-mount {
  stroke-dasharray: 3 4;
}
.obj-flow-chain .fc-edge-active {
  stroke: var(--ok);
  stroke-width: 2.5;
  opacity: 1;
  stroke-dasharray: 6 8;
  animation: af-flow 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .obj-flow-chain .fc-edge-active {
    animation: none;
    stroke-dasharray: none;
  }
}
.obj-flow-chain .fc-foot {
  margin-top: 6px;
  min-height: 0;
}

/* Bronnen / uitgangen */
.obj-flow-sources .fs-list,
.obj-flow-outputs .fs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.fs-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.2fr) minmax(120px, 1fr) auto minmax(0, 1.6fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.008) 46%, rgba(0, 0, 0, 0.1)),
    var(--surface-deep);
}
.fs-row.fs-on {
  border-color: rgba(var(--accent2-rgb), 0.45);
}
.fs-row.fs-alarm {
  border-color: var(--danger);
}
.fs-name {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.fs-sub {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.fs-meter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fs-db {
  font-size: 10.5px;
  min-width: 40px;
  text-align: right;
}
.fs-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fs-foot {
  margin-top: 6px;
}
@media (max-width: 1100px) {
  .fs-row {
    grid-template-columns: 1fr 1fr;
  }
  .fs-actions {
    grid-column: 1 / -1;
  }
}

/* Talk */
.obj-flow-talk .ft-ctl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 6px 0;
}
.obj-flow-talk .ft-btn {
  min-height: 48px;
  padding: 0 18px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.obj-flow-talk .ft-live {
  border-color: var(--danger);
  color: var(--danger);
  animation: af-blink 1.4s ease-in-out infinite;
}
.obj-flow-talk .ft-vu {
  max-width: none;
  height: 8px;
}

/* Stiltewacht */
.obj-flow-silence {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.obj-flow-silence.fz-alarm {
  border-color: var(--danger);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 24px rgba(0, 0, 0, 0.3);
}
.obj-flow-silence.fz-warn {
  border-color: var(--warn);
}
.obj-flow-silence .fz {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  min-height: 36px;
}
.obj-flow-silence .fz-big {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: var(--danger);
  animation: af-blink 1.2s ease-in-out infinite;
}
.obj-flow-silence .fz-why {
  font-size: 12px;
  color: var(--text-dim);
}
.obj-flow-silence .fz-mid {
  font-size: 14px;
  font-weight: 700;
  color: var(--warn);
}
.obj-flow-silence .fz-okline {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

/* Gebeurtenissen */
.obj-flow-events .fe-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.obj-flow-events .fe-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border);
}
.obj-flow-events .fe-hook {
  margin-top: 8px;
  font-size: 11.5px;
}
.obj-flow-events .fe-hook summary {
  cursor: pointer;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
.obj-flow-events .fe-hookrow {
  padding: 4px 0;
  line-height: 1.4;
}

.fl-layer {
  min-height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 0 8px;
}

/* OBJECTEN-index: standalone eerst + pagina-chips (#objects-groep) */
.obj-index .obj-idx-in {
  display: inline-flex;
  flex-direction: row;
  min-height: 0;
  color: var(--accent);
  font-size: 10px;
  text-decoration: none;
  padding: 1px 6px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 6px;
  background: none;
}
.obj-index .obj-idx-in:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.35);
}
.obj-index .obj-idx-places {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.obj-idx-places.dim {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 8px;
}

/* ── #79 — index: zoekbalk + alfabetische groepen ────────────────────────── */
.obj-idx-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 4px 0 14px;
}
.obj-idx-tools .mx-search {
  flex: 0 1 340px;
}
.obj-idx-note {
  margin: 0;
  flex: 1 1 320px;
}
section.obj-idx-group {
  margin-top: 14px;
}

/* ── Import-object (#172) — admin-importpariteit via orchestrator-chain ──── */
.obj-importer .im-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.obj-importer .im-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 130px;
}
.obj-importer .im-f > span:first-child {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.obj-importer .im-f .input {
  width: 100%;
}
.obj-importer .im-labelrow {
  display: flex;
  gap: 4px;
}
.obj-importer .im-labelrow .im-newlabel {
  flex: 1;
}
.obj-importer .im-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 6px;
}
.obj-importer .im-check span {
  font-size: 12.5px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
}
.obj-importer .im-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.obj-importer .im-drop {
  border: 1.5px dashed var(--border-light);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-deep);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.obj-importer .im-drop:hover,
.obj-importer .im-drop.drag {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 79 206 243), 0.07);
}
.obj-importer .im-drop-in b {
  display: block;
  font-size: 14.5px;
}
.obj-importer .im-drop-in .dim {
  font-size: 12px;
}

.obj-importer .im-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 26vh;
}
.obj-standalone-host .obj-importer .im-list {
  max-height: none;
}
.obj-importer .im-row {
  display: grid;
  grid-template-columns: 1fr 64px 92px 1fr 24px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.obj-importer .im-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-importer .im-size {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.obj-importer .im-st {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obj-importer .im-st-busy {
  color: var(--accent);
}
.obj-importer .im-st-ok {
  color: var(--ok);
}
.obj-importer .im-st-warn {
  color: var(--warn);
}
.obj-importer .im-st-bad {
  color: var(--danger);
}
.obj-importer .im-note {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-importer .im-rm {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.obj-importer .im-rm:hover {
  color: var(--danger);
  background: rgba(255, 107, 107, 0.12);
}

.obj-importer .im-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.obj-importer .im-btn {
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}
.obj-importer .im-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.obj-importer .im-btn-primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}
.obj-importer .im-sum {
  margin-left: auto;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.obj-importer .im-hist {
  margin-top: 8px;
  font-size: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.obj-importer .im-h {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
}
.obj-importer .im-h-done {
  color: var(--ok);
}
.obj-importer .im-h-rejected {
  color: var(--danger);
}
.obj-importer .im-h-skipped_exists {
  color: var(--warn);
}
/* #177: mislukte imports + retry */
.obj-importer .im-failed {
  margin-top: 8px;
}
.obj-importer .im-failed-h {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
  margin-bottom: 4px;
}
.obj-importer .im-failed-h .dim {
  font-weight: 400;
}
.obj-importer .im-failed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 18vh;
  overflow: auto;
}
.obj-importer .im-frow {
  display: grid;
  grid-template-columns: 1fr 1fr 74px;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12px;
}
.obj-importer .im-retry {
  padding: 3px 8px;
  min-height: 26px;
  font-size: 11.5px;
}

/* ── track-upload (#35) — upload + groeps-tag + queue met voortgang ─────── */
.obj-track-upload .tu-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.obj-track-upload .tu-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
  flex: 1;
}
.obj-track-upload .tu-f > span:first-child {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.obj-track-upload .tu-f .input {
  width: 100%;
}
.obj-track-upload .tu-f-year {
  min-width: 90px;
  flex: 0 0 110px;
}

.obj-track-upload .tu-drop {
  border: 1.5px dashed var(--border-light);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-deep);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.obj-track-upload .tu-drop:hover,
.obj-track-upload .tu-drop.drag {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 79 206 243), 0.07);
}
.obj-track-upload .tu-drop-in b {
  display: block;
  font-size: 14.5px;
}
.obj-track-upload .tu-drop-in .dim {
  font-size: 12px;
}

.obj-track-upload .tu-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 26vh;
}
.obj-standalone-host .obj-track-upload .tu-list {
  max-height: none;
}
.obj-track-upload .tu-row {
  display: grid;
  grid-template-columns: 1fr 64px 84px 96px 1fr 24px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.obj-track-upload .tu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-track-upload .tu-size {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.obj-track-upload .tu-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-deep);
  overflow: hidden;
}
.obj-track-upload .tu-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.15s linear;
}
.obj-track-upload .tu-st {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obj-track-upload .tu-st-busy {
  color: var(--accent);
}
.obj-track-upload .tu-st-ok {
  color: var(--ok);
}
.obj-track-upload .tu-st-warn {
  color: var(--warn);
}
.obj-track-upload .tu-st-bad {
  color: var(--danger);
}
.obj-track-upload .tu-note {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-track-upload .tu-rm {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.obj-track-upload .tu-rm:hover {
  color: var(--danger);
  background: rgba(255, 107, 107, 0.12);
}

.obj-track-upload .tu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.obj-track-upload .tu-btn {
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}
.obj-track-upload .tu-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.obj-track-upload .tu-btn-primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}

/* Groeps-tag chips in de media-explorer-rijen (#35). */
.obj-media-explorer .mx-tag-grp {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* ── track-upload (#35) — upload + groeps-tag + queue met voortgang ─────── */
.obj-track-upload .tu-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.obj-track-upload .tu-f {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
  flex: 1;
}
.obj-track-upload .tu-f > span:first-child {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.obj-track-upload .tu-f .input {
  width: 100%;
}
.obj-track-upload .tu-f-year {
  min-width: 90px;
  flex: 0 0 110px;
}

.obj-track-upload .tu-drop {
  border: 1.5px dashed var(--border-light);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-deep);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.obj-track-upload .tu-drop:hover,
.obj-track-upload .tu-drop.drag {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb, 79 206 243), 0.07);
}
.obj-track-upload .tu-drop-in b {
  display: block;
  font-size: 14.5px;
}
.obj-track-upload .tu-drop-in .dim {
  font-size: 12px;
}

.obj-track-upload .tu-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 26vh;
}
.obj-standalone-host .obj-track-upload .tu-list {
  max-height: none;
}
.obj-track-upload .tu-row {
  display: grid;
  grid-template-columns: 1fr 64px 84px 96px 1fr 24px;
  gap: 8px;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 12.5px;
}
.obj-track-upload .tu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-track-upload .tu-size {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.obj-track-upload .tu-bar {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-deep);
  overflow: hidden;
}
.obj-track-upload .tu-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.15s linear;
}
.obj-track-upload .tu-st {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.obj-track-upload .tu-st-busy {
  color: var(--accent);
}
.obj-track-upload .tu-st-ok {
  color: var(--ok);
}
.obj-track-upload .tu-st-warn {
  color: var(--warn);
}
.obj-track-upload .tu-st-bad {
  color: var(--danger);
}
.obj-track-upload .tu-note {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.obj-track-upload .tu-rm {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.obj-track-upload .tu-rm:hover {
  color: var(--danger);
  background: rgba(255, 107, 107, 0.12);
}

.obj-track-upload .tu-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.obj-track-upload .tu-btn {
  border: 1px solid var(--border-light);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 38px;
}
.obj-track-upload .tu-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.obj-track-upload .tu-btn-primary {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}

/* Groeps-tag chips in de media-explorer-rijen (#35). */
.obj-media-explorer .mx-tag-grp {
  color: var(--accent-2);
  border-color: var(--accent-2);
}

/* ── airlite-mixer (#120) — compacte view: D&R Airlite desk-status ──────── */
/* Alleen theme-tokens (CSS-hygiëne-gate): rood = --danger (ON), geel =
   --warn (CUE/bron), groen = --success; tinten via color-mix(). */
.obj-airlite-mixer .mk3-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.obj-airlite-mixer .mk3-topline {
  display: flex;
  gap: 6px;
  align-items: center;
}
.obj-airlite-mixer .mk3-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.obj-airlite-mixer .mk3-pill.ok {
  color: var(--success);
  border-color: var(--success);
}
.obj-airlite-mixer .mk3-pill.bad {
  color: var(--danger);
  border-color: var(--danger);
}
.obj-airlite-mixer .mk3-pill.dim {
  opacity: 0.8;
}
.obj-airlite-mixer .mk3-deck {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  min-height: 0;
}
.obj-airlite-mixer .mk3-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-height: 0;
}
.obj-airlite-mixer .mk3-modnr {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
}
.obj-airlite-mixer .mk3-src {
  display: flex;
  gap: 3px;
}
.obj-airlite-mixer .mk3-sq {
  font-size: 8px;
  font-weight: 800;
  width: 14px;
  text-align: center;
  padding: 1px 0;
  border-radius: 3px;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.obj-airlite-mixer .mk3-sq.act {
  color: var(--warn);
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 18%, transparent);
}
.obj-airlite-mixer .mk3-btn {
  width: 100%;
  padding: 4px 0;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  background: var(--surface);
}
.obj-airlite-mixer .mk3-btn.lit-r {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text-bright);
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 60%, transparent);
}
.obj-airlite-mixer .mk3-btn.lit-g {
  background: var(--success);
  border-color: var(--success);
  color: var(--on-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--success) 60%, transparent);
}
.obj-airlite-mixer .mk3-readonly .mk3-btn {
  cursor: default;
}
.obj-airlite-mixer .mk3-fad {
  flex: 1;
  display: flex;
  gap: 4px;
  width: 100%;
  justify-content: center;
  min-height: 40px;
}
.obj-airlite-mixer .mk3-fadtrack {
  position: relative;
  width: 6px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.obj-airlite-mixer .mk3-knob {
  position: absolute;
  left: -6px;
  bottom: 2px;
  width: 18px;
  height: 8px;
  border-radius: 3px;
  background: var(--text-dim);
  transition: bottom 0.18s ease;
}
.obj-airlite-mixer .mk3-knob.open {
  bottom: calc(100% - 10px);
  background: var(--success);
}
.obj-airlite-mixer .mk3-mvu {
  position: relative;
  width: 6px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
.obj-airlite-mixer .mk3-mvubar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: linear-gradient(180deg, var(--danger) 0%, var(--warn) 25%, var(--success) 50%);
  transition: height 0.1s linear;
}
.obj-airlite-mixer .mk3-master {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.obj-airlite-mixer .mk3-master .mk3-btn {
  width: auto;
  padding: 4px 10px;
}
.obj-airlite-mixer .mk3-sign {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.obj-airlite-mixer .mk3-sign.lit {
  color: var(--text-bright);
  background: color-mix(in srgb, var(--danger) 65%, black);
  border-color: var(--danger);
  box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 60%, transparent);
}
.obj-airlite-mixer .mk3-meters {
  display: flex;
  gap: 10px;
}
.obj-airlite-mixer .mk3-meter {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.obj-airlite-mixer .mk3-mtrack {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 36px;
  padding: 2px;
  border-radius: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.obj-airlite-mixer .mk3-mbar {
  flex: 1;
  height: 0;
  align-self: flex-end;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--danger) 0%, var(--warn) 25%, var(--success) 50%);
  transition: height 0.1s linear;
}
.obj-airlite-mixer .mk3-mlbl {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-dim);
}

/* ── airlite-mixer desk view (#120) — de echte zilveren Airlite ──────────── */
/* Brushed-aluminium frontplaat (licht, uit --text-bright gemengd), donkere
   modulestroken (uit --bg), rode ON / gele CUE knopkappen, zwarte faderrails
   met zilveren knoppen, rode LED-signs en gesegmenteerde LED-meters.
   Themakleur-onafhankelijk: de desk ziet er in elk thema als de desk uit. */
.obj-airlite-mixer {
  --mk3-silver: color-mix(in srgb, var(--text-bright) 78%, var(--text-dim));
  --mk3-silver-dark: color-mix(in srgb, var(--text-bright) 55%, var(--text-dim));
  --mk3-steel: color-mix(in srgb, var(--text-dim) 55%, black);
  --mk3-black: color-mix(in srgb, var(--text-dim) 15%, black);
  --mk3-ink: color-mix(in srgb, var(--text-dim) 35%, black);
}
.obj-airlite-mixer .mk3d-wrap {
  height: 100%;
  display: flex;
}
.obj-airlite-mixer .mk3d-face {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  color: var(--mk3-ink);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--mk3-silver) 0%, var(--mk3-silver-dark) 100%);
  border: 1px solid var(--mk3-steel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.45);
}
.obj-airlite-mixer .mk3d-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  color: var(--mk3-ink);
}
.obj-airlite-mixer .mk3d-brand b {
  color: var(--danger);
  font-style: italic;
  letter-spacing: 1px;
}
.obj-airlite-mixer .mk3d-pill {
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--mk3-steel);
  color: var(--mk3-ink);
  background: rgba(255, 255, 255, 0.4);
}
.obj-airlite-mixer .mk3d-pill.ok {
  color: color-mix(in srgb, var(--success) 70%, black);
  border-color: var(--success);
}
.obj-airlite-mixer .mk3d-pill.bad {
  color: color-mix(in srgb, var(--danger) 75%, black);
  border-color: var(--danger);
}
.obj-airlite-mixer .mk3d-fw {
  font-size: 10px;
  color: var(--mk3-steel);
  font-weight: 500;
  letter-spacing: 0;
}
.obj-airlite-mixer .mk3d-ro {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  color: color-mix(in srgb, var(--warn) 70%, black);
  border: 1px solid var(--warn);
  background: rgba(255, 255, 255, 0.4);
}
.obj-airlite-mixer .mk3d-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr)) minmax(150px, 1.6fr);
  gap: 6px;
}

.obj-airlite-mixer .mk3d-mod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 5px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--mk3-ink), var(--mk3-black));
  border: 1px solid var(--mk3-black);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.5);
}
.obj-airlite-mixer .mk3d-nr {
  font-size: 10px;
  font-weight: 800;
  color: var(--mk3-silver);
  letter-spacing: 1px;
}
.obj-airlite-mixer .mk3d-src {
  display: flex;
  gap: 3px;
}
.obj-airlite-mixer .mk3d-sq {
  font-size: 8px;
  font-weight: 800;
  width: 16px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
  color: var(--mk3-steel);
  border: 1px solid var(--mk3-steel);
  background: var(--mk3-black);
}
.obj-airlite-mixer .mk3d-sq.act {
  color: var(--text-bright);
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 70%, black);
  box-shadow: 0 0 6px color-mix(in srgb, var(--warn) 60%, transparent);
}

.obj-airlite-mixer .mk3d-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 6px 0;
  font: inherit;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--mk3-silver);
  border: 1px solid var(--mk3-black);
  border-radius: 4px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--mk3-steel), var(--mk3-ink));
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.obj-airlite-mixer .mk3d-btn:active {
  transform: translateY(1px);
}
.obj-airlite-mixer .mk3-readonly .mk3d-btn {
  cursor: default;
}
.obj-airlite-mixer .mk3d-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mk3-black);
  border: 1px solid var(--mk3-steel);
}
/* ON = rode knopkap, CUE = gele knopkap — zoals de echte Airlite */
.obj-airlite-mixer .mk3d-btn[data-kind="on"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--danger) 50%, black),
    color-mix(in srgb, var(--danger) 30%, black)
  );
  color: color-mix(in srgb, var(--danger) 35%, white);
  border-color: color-mix(in srgb, var(--danger) 20%, black);
}
.obj-airlite-mixer .mk3d-btn[data-kind="on"].lit-r {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 80%, white), var(--danger));
  color: var(--text-bright);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--danger) 75%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.obj-airlite-mixer .mk3d-btn[data-kind="cue"] {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--warn) 50%, black),
    color-mix(in srgb, var(--warn) 30%, black)
  );
  color: color-mix(in srgb, var(--warn) 45%, white);
  border-color: color-mix(in srgb, var(--warn) 20%, black);
}
.obj-airlite-mixer .mk3d-btn[data-kind="cue"].lit-g {
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn) 75%, white), var(--warn));
  color: var(--mk3-black);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--warn) 75%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.obj-airlite-mixer .mk3d-btn.lit-r .mk3d-led {
  background: var(--text-bright);
  border-color: var(--text-bright);
  box-shadow: 0 0 6px var(--text-bright);
}
.obj-airlite-mixer .mk3d-btn.lit-g .mk3d-led {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.obj-airlite-mixer .mk3d-btn[data-kind="cue"].lit-g .mk3d-led {
  background: var(--mk3-black);
  border-color: var(--mk3-black);
  box-shadow: none;
}

.obj-airlite-mixer .mk3d-rail {
  position: relative;
  flex: 1;
  min-height: 90px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.obj-airlite-mixer .mk3d-slot {
  width: 5px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, black, var(--mk3-black));
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.08);
}
.obj-airlite-mixer .mk3d-knob {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  width: 24px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--text-bright) 0%, var(--mk3-silver-dark) 45%, var(--mk3-steel) 100%);
  border: 1px solid var(--mk3-steel);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: bottom 0.18s ease;
}
.obj-airlite-mixer .mk3d-knob::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--mk3-black);
  border-radius: 1px;
}
.obj-airlite-mixer .mk3d-knob.open {
  bottom: calc(100% - 20px);
}
.obj-airlite-mixer .mk3d-vu {
  width: 10px;
  height: 40px;
  border-radius: 3px;
  background: var(--mk3-black);
  border: 1px solid var(--mk3-steel);
  position: relative;
  overflow: hidden;
}
.obj-airlite-mixer .mk3d-vubar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background:
    repeating-linear-gradient(0deg, var(--success) 0 3px, transparent 3px 5px) bottom/100% 62%,
    repeating-linear-gradient(0deg, var(--warn) 0 3px, transparent 3px 5px) bottom/100% 82%,
    repeating-linear-gradient(0deg, var(--danger) 0 3px, transparent 3px 5px) bottom/100% 100%;
  background-repeat: no-repeat;
  transition: height 0.1s linear;
}

.obj-airlite-mixer .mk3d-right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--mk3-ink), var(--mk3-black));
  border: 1px solid var(--mk3-black);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.5);
}
.obj-airlite-mixer .mk3d-signs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.obj-airlite-mixer .mk3d-sign {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 4px 7px;
  border-radius: 4px;
  color: var(--mk3-steel);
  border: 1px solid var(--mk3-steel);
  background: var(--mk3-black);
}
.obj-airlite-mixer .mk3d-sign.lit {
  color: var(--text-bright);
  background: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 70%, white);
  box-shadow: 0 0 12px color-mix(in srgb, var(--danger) 70%, transparent);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.obj-airlite-mixer .mk3d-mrow {
  display: flex;
  gap: 10px;
  flex: 1;
  align-items: flex-end;
}
.obj-airlite-mixer .mk3d-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.obj-airlite-mixer .mk3d-mtr {
  display: flex;
  gap: 3px;
  flex: 1;
  width: 100%;
  min-height: 56px;
  padding: 3px;
  border-radius: 4px;
  background: var(--mk3-black);
  border: 1px solid var(--mk3-steel);
}
.obj-airlite-mixer .mk3d-mseg {
  flex: 1;
  height: 0;
  align-self: flex-end;
  border-radius: 2px;
  background:
    repeating-linear-gradient(0deg, var(--success) 0 4px, transparent 4px 6px) bottom/100% 62%,
    repeating-linear-gradient(0deg, var(--warn) 0 4px, transparent 4px 6px) bottom/100% 84%,
    repeating-linear-gradient(0deg, var(--danger) 0 4px, transparent 4px 6px) bottom/100% 100%;
  background-repeat: no-repeat;
  transition: height 0.1s linear;
}
.obj-airlite-mixer .mk3d-mlbl {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--mk3-silver);
}
.obj-airlite-mixer .mk3d-mbtns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.obj-airlite-mixer .mk3d-mbtns .mk3d-btn {
  width: auto;
  padding: 6px 9px;
}

/* ── mk3-controller (#188) — hotkey-mapping + LED-status van de 16 control-keys ── */
.obj-mk3-controller .mk3c {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}
.obj-mk3-controller .mk3c-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.obj-mk3-controller .mk3c-pill {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.obj-mk3-controller .mk3c-pill.ok {
  color: var(--success);
  border-color: var(--success);
}
.obj-mk3-controller .mk3c-pill.dim {
  opacity: 0.8;
}
.obj-mk3-controller .mk3c-keys {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
}
.obj-mk3-controller .mk3c-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 0;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  transition: transform 0.12s ease;
}
.obj-mk3-controller .mk3c-key i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
}
.obj-mk3-controller .mk3c-key.led-green i {
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 0 6px color-mix(in srgb, var(--success) 60%, transparent);
}
.obj-mk3-controller .mk3c-key.led-red i {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 6px color-mix(in srgb, var(--danger) 60%, transparent);
}
.obj-mk3-controller .mk3c-key.hit {
  transform: translateY(1px);
  background: color-mix(in srgb, var(--accent) 25%, var(--surface-2));
  color: var(--text-bright);
}
.obj-mk3-controller .mk3c-last {
  font-size: 10px;
  color: var(--text-dim);
  min-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── media-explorer (#23) — OmniPlayer/Dalet-stijl bestandsbeheer ──────────
   Drie panelen: echte disk-mapboom (files-service), itemlijst met
   catalog-overlay, detail/bewerkpaneel. Schrijfacties gaan via
   api-files/api-catalog; zonder rol valt het object op alleen-lezen. */

.obj-media-explorer .mx-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1;
}
.obj-media-explorer .mx-wrap {
  max-height: 64vh;
}
/* #76 — de WAV-editor-dock hangt als sibling ná het explorer-object, niet
   meer ín de wrap: de 64vh-cap mag dus gewoon blijven staan. */
/* #65 — in een vaste cel telt alleen de H±-hoogte: geen vh-cap, de wrap
   vult het vlak en de interne scroll-delen (boom, tabel) doen de rest. */
.obj-cell-fixed .obj-media-explorer .mx-wrap,
.obj-standalone-host .obj-media-explorer .mx-wrap {
  max-height: none;
  height: 100%;
}

.mx-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.mx-filter {
  flex: 0 1 240px;
  min-width: 120px;
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mx-filter:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}
/* #26 — gear-paneel MEDIA-tab: bewerkbare server-settings. */
.mx-cfg-in {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  min-width: 0;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mx-cfg-in:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}
.mx-cfg-in[disabled] {
  opacity: 0.55;
}
.mx-cfg-act {
  display: flex;
  gap: 10px;
  align-items: center;
}
.mx-cfg-hint {
  font-size: 11px;
  line-height: 1.45;
}
.mx-cfg-rootrow {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.mx-cfg-rootrow .mx-cfg-in {
  flex: 1;
  min-width: 0;
}
.mx-pickbox {
  margin: 0 0 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  max-height: 180px;
  overflow-y: auto;
}
.mx-pick-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px 3px calc(8px + var(--d, 0) * 16px);
  cursor: pointer;
  font-size: 12px;
}
.mx-pick-row:hover {
  background: rgba(var(--accent-rgb), 0.12);
}
.mx-pick-row.mx-pick-top {
  font-weight: 600;
}
.mx-pick-tw {
  width: 20px;
  flex: 0 0 20px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: center;
}
.mx-pick-tw[disabled] {
  cursor: default;
}
.mx-pick-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* #37 — verborgen-paden tree + chips in de gear-config */
.mx-hidebox {
  margin: 0 0 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.mx-hide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  min-height: 20px;
}
.mx-hchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  max-width: 100%;
}
.mx-hchip-x {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0 3px;
}
.mx-hchip-x:hover {
  color: var(--danger);
}
.mx-hide {
  max-height: 210px;
  overflow-y: auto;
  padding: 3px 0;
}
.mx-hide-row {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 8px 3px calc(8px + var(--d, 0) * 16px);
  font-size: 12px;
}
.mx-hide-row:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
.mx-hide-row.is-off .mx-hide-name {
  color: var(--muted);
  text-decoration: line-through;
}
.mx-hide-row.is-off .mx-hide-ico {
  opacity: 0.45;
}
.mx-hide-tw {
  width: 20px;
  flex: 0 0 20px;
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-align: center;
}
.mx-hide-tw[disabled] {
  cursor: default;
}
.mx-hide-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--muted);
}
.mx-hide-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* #62/#64 — groep-labels beheren in het gear-paneel, in huisstijl: kaart met
   kop (titel + teller), rijen met accent-pill counts en mx-btn-acties,
   accent-gradient op de primaire toevoeg-knop. */
.mx-lblbox {
  margin: 0 0 4px;
  max-width: 620px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: var(--bevel), var(--elev-1);
  overflow: hidden;
}
.mx-lbl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.mx-lbl-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-bright);
}
.mx-lbl-meta {
  font-size: 10.5px;
  white-space: nowrap;
}
.mx-lbl {
  max-height: 240px;
  overflow-y: auto;
  padding: 5px 6px;
}
.mx-lbl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 7px;
  font-size: 12.5px;
}
.mx-lbl-row:hover {
  background: rgba(var(--accent-rgb), 0.08);
}
.mx-lbl-row.is-edit {
  gap: 7px;
}
.mx-lbl-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.mx-lbl-row.is-sys .mx-lbl-name {
  color: var(--muted);
  font-weight: 500;
}
.mx-lbl-cnt {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  padding: 2px 8px;
  border-radius: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--text);
}
.mx-lbl-row.is-sys .mx-lbl-cnt {
  background: none;
  border-color: var(--border);
  color: var(--muted);
}
.mx-lbl-acts {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}
.mx-lbl-btn[disabled],
.mx-grm[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.mx-lbl-del:hover:not([disabled]) {
  border-color: var(--danger);
  color: var(--danger);
}
.mx-lbl-sys {
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mx-lbl-editin {
  flex: 1;
  min-width: 0;
}
.mx-lbl-addrow {
  display: flex;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--border);
}
.mx-lbl-addrow .mx-cfg-in {
  flex: 1;
  min-width: 0;
}
.mx-lbl-add {
  flex: 0 0 auto;
  font-weight: 700;
}
.mx-lbl-ok {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
}
.mx-lbl-ok:hover {
  filter: brightness(1.08);
}
.mx-lbl-hint {
  padding: 0 12px 9px;
  font-size: 11px;
}
.mx-eye {
  width: 26px;
  flex: 0 0 26px;
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
}
.mx-eye svg {
  width: 15px;
  height: 15px;
  display: block;
  margin: auto;
}
.mx-eye:hover {
  background: rgba(var(--accent-rgb), 0.14);
}
.mx-eye.is-off {
  color: var(--danger);
}
.mx-eye.is-off.is-inh {
  color: var(--muted);
}
.mx-msg {
  flex: 1;
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-msg.is-err {
  color: var(--danger);
}

.mx-btn {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: var(--surface-2);
  color: var(--text);
}
.mx-btn:hover:not(:disabled) {
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--text-bright);
}
.mx-btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.mx-btn-danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

.mx-ro {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--warn) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  color: var(--warn);
}

.mx-body {
  display: flex;
  gap: 10px;
  min-height: 0;
  flex: 1;
}

.mx-treecol {
  width: 240px;
  flex: 0 0 240px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mx-tree {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* favorieten-balk links boven de tree (#31) */
.mx-favs {
  flex: 0 0 auto;
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mx-fav-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 6px 2px;
  color: var(--warn);
}
.mx-fav-sec {
  color: var(--accent);
}
.mx-fav-split {
  flex: 0 0 auto;
  height: 0;
  margin: 3px 2px;
  border-top: 1px solid rgba(var(--accent-rgb), 0.35);
}
.mx-fav-empty {
  font-size: 11px;
  padding: 4px 6px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}
.mx-fav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border: 1px solid transparent;
}
.mx-fav:hover {
  background: rgba(var(--accent-rgb), 0.07);
}
.mx-fav.is-sel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.28), rgba(var(--accent-rgb), 0.14));
  border-color: rgba(var(--accent-rgb), 0.5);
}
.mx-fav-ico {
  color: var(--warn);
  font-size: 11px;
  flex: 0 0 auto;
}
.mx-fav-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.mx-fav-x {
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.mx-fav-x:hover {
  color: var(--err);
}
.mx-star {
  color: var(--warn);
  font-size: 11px;
  margin-left: auto;
}
.mx-gcnt {
  font-size: 10px;
  margin-left: auto;
  color: var(--text-dim);
}
.mx-gcnt + .mx-grm,
.mx-name + .mx-grm {
  margin-left: 4px;
}
.mx-grm {
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 3px;
  border-radius: 4px;
  flex: 0 0 auto;
  opacity: 0.65;
}
.mx-grm:hover {
  color: var(--err);
  opacity: 1;
}
.mx-node.is-grp .mx-name {
  font-style: italic;
}
.mx-tag-grp {
  font-size: 9px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  flex: 0 0 auto;
}
.mx-btn-star {
  font-size: 14px;
  line-height: 1;
}
.mx-btn-star.is-fav {
  color: var(--warn);
}
.mx-btn-favpub {
  font-size: 12px;
  line-height: 1;
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.mx-btn-favpub:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.7);
}
/* tag-chips in het detailpaneel (#31) */
.mx-d-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.mx-d-tags-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex: 0 0 auto;
}
.mx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 1px 4px 1px 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
}
.mx-chip-x {
  background: none;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  border-radius: 3px;
}
.mx-chip-x:hover {
  color: var(--err);
}
.mx-tagadd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.mx-tagadd-sel {
  font-size: 11px;
  padding: 2px 4px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  max-width: 130px;
}
.mx-node {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px calc(6px + var(--d, 0) * 26px);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
}
/* Geleidelijn op de twistie-kolom van de ouder — de rijen staan
   aaneengesloten dus per diepte ontstaat één doorlopende lijn. */
.mx-node:not(.is-root)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--d, 0) * 26px - 10px);
  width: 1px;
  background: var(--border);
  opacity: 0.6;
}
/* Horizontale tak-stub: ├─ van de geleidelijn naar de node — als
   een echte Windows-explorer tree. */
.mx-node:not(.is-root)::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  left: calc(var(--d, 0) * 26px - 10px);
  width: 13px;
  background: var(--border);
  opacity: 0.6;
}
.mx-node:hover {
  background: rgba(var(--accent-rgb), 0.07);
}
.mx-node.is-sel {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.16));
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--text-bright);
  font-weight: 700;
}
.mx-node.is-drop {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
}
.mx-tw {
  width: 16px;
  flex: 0 0 16px;
  font: inherit;
  font-size: 9px;
  color: var(--text-dim);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
}
.mx-tw:hover:not(:disabled) {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15);
}
.mx-tw:disabled {
  cursor: default;
}
.mx-ico {
  width: 14px;
  flex: 0 0 14px;
  color: var(--text-dim);
  display: inline-flex;
}
.mx-ico svg {
  width: 14px;
  height: 14px;
}
.mx-node.is-root .mx-ico {
  color: var(--accent);
}
.mx-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mx-listcol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}
.mx-crumb {
  font-size: 11px;
  color: var(--text-dim);
  flex: 0 0 auto;
}
/* Kolommen-tabel (#31) — echte <table> zoals de log (.hl-table):
   table-layout:fixed met colgroup-breedtes, sticky thead, vaste rijhoogte,
   en kop-grips die de <col>-breedte slepen (per DJ in prefs mx.colw). */
.mx-lscroll {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  border-radius: 10px;
  scroll-padding: 34px 0 10px 0;
}
/* min-width: de kolommen tellen op tot 1294px — onder dat punt pakt de
   scroll-container over. Álle kolommen hebben een breedte: de restruimte
   verdeelt proportioneel (geen enkele auto-kolom die een dode kloof
   opentrekt zoals voorheen de name-kolom deed, #70). */
.mx-table {
  width: 100%;
  min-width: 1294px;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}
/* #70 — dir-only views (programma, media-root): alleen naam+type-kolommen
   tellen; de vaste min-width zou de rijen overbodig laten scrollen. */
.mx-table.is-dirview {
  min-width: 0;
}
.mx-w-ico {
  width: 58px;
}
.mx-w-artist {
  width: 190px;
}
.mx-w-name {
  width: 320px;
}
.mx-w-year {
  width: 54px;
}
.mx-w-bpm {
  width: 52px;
}
.mx-w-energy {
  width: 104px;
}
.mx-w-plays {
  width: 54px;
}
.mx-w-tags {
  width: 220px;
}
.mx-w-badges {
  width: 118px;
}
.mx-w-dur {
  width: 56px;
}
.mx-w-size {
  width: 68px;
}

/* Kopkolommen (#41): iets hoger, kolom-scheidingslijn, sorteerpijl altijd
   gedimd zichtbaar; de actieve kolom licht op met een accent-onderlijn. */
.mx-th {
  position: sticky;
  top: 0;
  text-align: left;
  height: 32px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 0 10px;
  border-bottom: 1px solid var(--border-light);
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset -1px 0 0 var(--border);
}
.mx-th:last-child {
  box-shadow: none;
}
.mx-th.is-sorted {
  color: var(--text-bright);
  box-shadow:
    inset -1px 0 0 var(--border),
    inset 0 -2px 0 var(--accent);
}
.mx-th-r {
  text-align: right;
}
.mx-th-r .mx-c-sort {
  flex-direction: row-reverse;
}
.mx-th-t {
  font-weight: 700;
}
.mx-sa {
  font-style: normal;
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.35;
  transition:
    opacity 0.12s,
    color 0.12s;
}
.mx-c-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: inherit;
  text-transform: inherit;
}
.mx-c-sort:hover {
  color: var(--accent);
}
.mx-c-sort:hover .mx-sa {
  opacity: 0.8;
}
.mx-c-sort.is-on {
  color: var(--accent);
}
.mx-c-sort.is-on .mx-sa {
  opacity: 1;
  color: var(--accent);
}
/* Kolomgreep rechts in elke kopcel — zelfde patroon als .hl-drag, maar
   altijd zichtbaar (gedimd) zodat je weet dát je kunt slepen (#41). */
.mx-grip {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}
.mx-grip::after {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 2px;
  border-radius: 1px;
  background: var(--text-dim);
  opacity: 0.18;
  transition:
    opacity 0.12s,
    background 0.12s;
}
.mx-table thead tr:hover .mx-grip::after {
  opacity: 0.45;
}
.mx-grip:hover::after,
.mx-grip.is-drag::after {
  opacity: 1 !important;
  background: var(--accent);
}
.mx-th:last-child .mx-grip {
  right: 0;
}

/* Rijen (#41): vaste hoogte, zebra, hover-glow en accent-rand bij selectie. */
.mx-td {
  padding: 4px 10px;
  height: 36px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  font-size: 12.5px;
  color: var(--text);
  transition: background 0.1s;
}
.mx-td-r {
  text-align: right;
}
.mx-li {
  cursor: pointer;
}
.mx-list .mx-li:nth-child(even) .mx-td {
  background: rgba(255 255 255 / 0.018);
}
.mx-li:hover .mx-td {
  background: rgba(var(--accent-rgb), 0.07);
}
.mx-li.is-sel .mx-td {
  background: rgba(var(--accent-rgb), 0.14);
}
.mx-li.is-sel .mx-td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.mx-li.is-playing .mx-td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.mx-li.is-missing .mx-td {
  color: var(--warn);
}
.mx-li.is-missing {
  opacity: 0.7;
}
.mx-li.is-off {
  opacity: 0.55;
}
.mx-li[draggable="true"] {
  cursor: grab;
}
.mx-li[draggable="true"]:active {
  cursor: grabbing;
}
.mx-li.is-drop .mx-td {
  background: color-mix(in srgb, var(--ok) 13%, transparent);
}
.mx-li.is-drop .mx-td:first-child {
  box-shadow: inset 3px 0 0 var(--ok);
}
.mx-li-empty .mx-td {
  text-align: center;
  padding: 16px 8px;
}
.mx-li.is-dir .mx-td {
  color: var(--text-dim);
}
.mx-li.is-dir .mx-itemname {
  color: var(--text-bright);
}

/* icoon-kolom: play-knop + type-icoon naast elkaar */
.mx-td-ico {
  font-size: 0;
}
.mx-td-ico .mx-play {
  margin-right: 6px;
}

/* energie-minibalk (#41): vulling krijgt per rij een kleur op de
   groen→oranje→rood schaal (inline via energyColor), percentage ernaast. */
.mx-td-e {
  font-size: 0;
}
.mx-ebar {
  display: inline-flex;
  width: 54px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255 255 255 / 0.08);
  overflow: hidden;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255 255 255 / 0.05);
}
.mx-ebar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 0 6px currentColor;
  transition: width 0.2s;
}
.mx-eval {
  display: inline-block;
  margin-left: 7px;
  min-width: 20px;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  vertical-align: middle;
  opacity: 0.9;
}

/* tags per rij (#31/#41) — gekleurde chips + grote +-knop (popover) */
.mx-tags-in {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: hidden;
}
.mx-tags-in .mx-chip {
  font-size: 10px;
  padding: 1px 2px 1px 6px;
  flex: 0 0 auto;
  gap: 5px;
  background: rgba(255 255 255 / 0.03);
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mx-chip-grp .mx-dot {
  width: 7px;
  height: 7px;
}
.mx-chip-grp .mx-chip-x {
  color: inherit;
  opacity: 0.55;
}
.mx-chip-grp .mx-chip-x:hover {
  opacity: 1;
  color: var(--err);
}
.mx-tagbtn {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition:
    color 0.1s,
    border-color 0.1s,
    background 0.1s;
}
.mx-tagbtn:hover,
.mx-tagbtn.is-open {
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  background: rgba(var(--accent-rgb), 0.12);
}
.mx-tags-none {
  font-size: 10px;
}
/* Popover buiten de tabel (position:fixed, zie _tagPopRender). */
.mx-tagpop-host {
  position: static;
}
.mx-tagpop {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: 210px;
  max-height: 330px;
  overflow-y: auto;
  padding: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0 0 0 / 0.45);
  animation: mx-pop-in 0.12s ease-out;
}
@keyframes mx-pop-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.mx-tagpop-h {
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 10px 6px;
}
.mx-tagpop-i {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.mx-tagpop-i span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-tagpop-i:hover:not(:disabled) {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--text-bright);
}
.mx-tagpop-i.is-on {
  color: var(--text-dim);
  cursor: default;
}
.mx-tagpop-ck {
  font-style: normal;
  color: var(--ok);
  font-size: 11px;
}
.mx-tagpop-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 4px 6px;
}
.mx-tagpop-untag {
  color: var(--text-dim);
  font-style: italic;
}
.mx-dot-untag {
  border: 1px dashed var(--text-dim);
  background: transparent !important;
}

.mx-play {
  width: 22px;
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
}
.mx-play:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.mx-play:disabled {
  opacity: 0.35;
  cursor: default;
}
.mx-li.is-playing .mx-play {
  color: var(--accent);
  border-color: var(--accent);
}

/* #69 — vergrootglas naast de play-knop: opent de track in de
   standalone WAV-editor-pagina (alleen gecatalogde rijen). */
.mx-edit {
  width: 22px;
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 3px;
}
.mx-edit svg {
  width: 12px;
  height: 12px;
}
.mx-edit:hover:not(:disabled) {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.mx-edit:disabled {
  opacity: 0.35;
  cursor: default;
}

/* #70 — splitter tussen boom en lijst: 4px greep met col-resize cursor,
   licht op bij hover/drag. */
.mx-split {
  flex: 0 0 4px;
  align-self: stretch;
  margin: 0 -2px;
  cursor: col-resize;
  touch-action: none;
  border-radius: 2px;
  background: transparent;
  transition: background 0.12s;
}
.mx-split:hover,
.mx-split.is-drag {
  background: var(--accent);
}

/* #69/#76 — de dock onder de explorer: daarin hangt het catalogue-editor
   object als echte .obj (eigen kop + gear + leds). De dock is een sibling
   NÁ het explorer-object (niet erin) — eigen object eronder, met de
   studio:media-select-koppeling voor vergrootglas/dubbelklik. De
   grid-view blijft staan — geen hash-navigatie weg. */
.mx-editdock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 390px;
  min-height: 200px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
/* In de standalone host (flex-row) moet de dock volle breedte pakken zodat
   hij onder het explorer-object valt; in grid-cellen (flex-column) geldt
   de vaste hoogte hierboven. */
.obj-standalone-host > .mx-editdock {
  flex-basis: 100%;
  width: 100%;
  margin-top: 8px;
}
.mx-editdock[hidden] {
  display: none;
}
.mx-editdock > .obj {
  flex: 1;
  min-height: 0;
}
.mx-editdock .obj-views,
.mx-editdock .obj-body {
  min-height: 0;
}
.mx-editdock .obj-body {
  overflow: hidden;
}
.mx-dockhide {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  margin-right: 6px;
}
.mx-dockhide:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Bestandstype-icoon per rij — kleurcodeert de media-rol in huisstijl. */
.mx-ftype {
  width: 15px;
  display: inline-flex;
  vertical-align: middle;
  color: var(--text-dim);
}
.mx-ftype svg {
  width: 15px;
  height: 15px;
}
.mx-ftype-audio {
  color: var(--accent);
}
.mx-ftype-dir {
  color: var(--accent);
}
.mx-li.is-dir .mx-itemname {
  font-weight: 700;
}
.mx-dirname,
.mx-li.is-dir .mx-ftype {
  cursor: pointer;
}
.mx-dirname:hover {
  text-decoration: underline;
}
.mx-tag-dir {
  color: var(--text-dim);
}
.mx-dirhint {
  margin-left: 10px;
  font-size: 10px;
  opacity: 0.6;
}
.mx-ftype-image {
  color: var(--layer-2, var(--accent-2));
}
.mx-ftype-video {
  color: var(--accent-2);
}
.mx-ftype-archive {
  color: var(--warn);
}
.mx-ftype-text {
  color: var(--text-dim);
  opacity: 0.9;
}
.mx-li.is-missing .mx-ftype {
  color: var(--warn);
}

/* Detail-header: groter type-icoon + naam/pad kolom. */
.mx-d-icorow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.mx-d-ico {
  width: 30px;
  flex: 0 0 30px;
  height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.mx-d-ico svg {
  width: 17px;
  height: 17px;
}
.mx-d-idcol {
  min-width: 0;
  flex: 1;
}

/* #41 — artiest voorop en fel; titel normaal gewicht, iets lichter. */
.mx-itemname {
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-artist strong {
  font-weight: 700;
  color: var(--text-bright);
}
.mx-li.is-dir .mx-itemname {
  color: var(--text-bright);
}
.mx-count {
  flex: 0 0 auto;
  font-size: 10.5px;
  padding: 3px 2px 0;
  border-top: 1px solid var(--border);
}

.mx-dur,
.mx-size {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
}
.mx-size {
  min-width: 52px;
  text-align: right;
}

.mx-tag {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 1.5px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.mx-tag-nocat {
  color: var(--text-dim);
  border-color: var(--border);
  border-style: dashed;
}
.mx-tag-miss {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent);
}
.mx-tag-off {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.mx-detail {
  width: 260px;
  flex: 0 0 260px;
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: 10px;
  font-size: 12px;
}
.mx-d-none {
  padding: 18px 6px;
  text-align: center;
}
.mx-d-none-ico {
  display: block;
  margin: 0 auto 8px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  opacity: 0.8;
}
.mx-d-none-ico svg {
  width: 22px;
  height: 22px;
  margin: 9px;
}
.mx-d-hint {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
}
.mx-d-head {
  margin-bottom: 8px;
}
.mx-d-name {
  font-weight: 700;
  color: var(--text-bright);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.mx-d-sub {
  font-size: 10.5px;
  overflow-wrap: anywhere;
}
.mx-d-tid {
  font-size: 10px;
  margin-top: 2px;
}
.mx-d-play {
  width: 100%;
  margin-bottom: 8px;
}
.mx-d-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.mx-f {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mx-f span {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-dim);
}
.mx-f input {
  font: inherit;
  font-size: 11.5px;
  padding: 4px 6px;
  width: 100%;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 5px;
}
.mx-f input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
}
.mx-f input:disabled {
  opacity: 0.5;
}
.mx-f-wide {
  grid-column: 1 / -1;
}
.mx-d-ops {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 6px 0;
}
.mx-d-size {
  font-size: 10.5px;
  margin-top: 4px;
}

/* ── mini wave-editor (#31) — inline onder de bron-rij ──────────────────
   Dblclick op een gecatalogde rij klappt een compacte cue-editor uit:
   peaks-canvas, sleepbare IN/UIT (+MIX) handles, IN→UIT beluisteren en
   opslaan via PUT /track/<id>/cue-points. */
.mx-waverow .mx-wv-td {
  padding: 0;
  height: auto;
}
/* De editor-rij leeft in de 1040px-brede tabel maar de scrollport is vaak
   smaller: sticky + JS-breedte (= port-breedte) houdt hem altijd volledig
   zichtbaar, ook bij horizontale scroll. */
.mx-wv {
  position: sticky;
  left: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px 8px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  border-left: 3px solid var(--accent);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mx-wv-play {
  flex: 0 0 34px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}
.mx-wv-play:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mx-wv-play.is-on {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
.mx-wv-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 70%, black);
  border: 1px solid var(--border);
}
.mx-wv-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.mx-wv-region {
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.mx-wv-head {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text-bright);
  pointer-events: none;
}
.mx-wv-load {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  pointer-events: none;
}
.mx-wv-h {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  margin-left: -7px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.mx-wv-h::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  width: 2px;
  background: currentColor;
}
.mx-wv-h b {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font: 700 8px/1.2 inherit;
  font-style: normal;
  letter-spacing: 0.3px;
  padding: 1px 3px;
  border-radius: 3px;
  background: currentColor;
  color: var(--surface);
  text-shadow: none;
}
.mx-wv-h-in {
  color: var(--ok);
}
.mx-wv-h-out {
  color: var(--danger);
}
.mx-wv-h-mix {
  color: var(--layer-2);
}
.mx-wv-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  align-items: flex-end;
  min-width: 150px;
}
.mx-wv-times {
  font-size: 10.5px;
  white-space: nowrap;
}
.mx-wv-by {
  font-size: 9.5px;
}
.mx-wv-save {
  font-size: 10.5px;
  padding: 3px 10px;
}
.mx-wv-save.is-dirty {
  border-color: var(--accent);
  color: var(--accent);
  animation: mx-wv-pulse 1.2s ease-in-out infinite;
}
@keyframes mx-wv-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
.mx-wv-close {
  padding: 1px 7px;
}

/* ── import-venster (#31) — modal op de upload/importeren-knop ──────────────
   Enkel/bulk-tabs, groepen-pulldown (6 vaste rotatietags, multi-select),
   queue met per-bestand voortgang + statusbadges, zelfde keten als
   track-upload: upload → analyze → import → tag-merge. */
.mx-imp-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.mx-imp {
  width: min(620px, 96vw);
  max-height: min(82vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(var(--accent-rgb), 0.12);
  overflow: hidden;
}
.mx-imp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.mx-imp-head > b {
  font-size: 15px;
}
.mx-imp-ico {
  display: inline-flex;
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex: 0 0 auto;
}
.mx-imp-ico svg {
  width: 100%;
  height: 100%;
}
.mx-imp-ico-acc {
  color: var(--accent);
  width: 18px;
  height: 18px;
}
.mx-imp-tabs {
  display: flex;
  margin-left: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.mx-imp-tab {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 7px;
  cursor: pointer;
}
.mx-imp-tab.is-on {
  background: var(--accent-grad);
  color: var(--on-accent);
}
.mx-imp-tab:disabled {
  opacity: 0.5;
  cursor: default;
}
.mx-imp-x {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.mx-imp-x:hover {
  color: var(--text);
  background: var(--surface-2);
}
.mx-imp-x:disabled {
  opacity: 0.4;
  cursor: default;
}
.mx-imp-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  min-height: 0;
}
.mx-imp-drop {
  border: 1.5px dashed var(--border-light);
  border-radius: 12px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: var(--surface-deep);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.mx-imp-drop:hover,
.mx-imp-drop.drag {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.07);
}
.mx-imp-drop b {
  display: block;
  font-size: 14px;
  margin-top: 2px;
}
.mx-imp-drop .dim {
  font-size: 12px;
}
.mx-imp-dropico {
  width: 26px;
  height: 26px;
  color: var(--accent);
  opacity: 0.85;
}
/* groepen-pulldown: summary toont de gekozen chips, body = checkbox-lijst */
.mx-imp-grpdd {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.mx-imp-grpdd > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.mx-imp-grpdd > summary::-webkit-details-marker {
  display: none;
}
.mx-imp-grpdd > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.mx-imp-grpdd:not([open]) > summary::after {
  content: "▸";
}
.mx-imp-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.mx-imp-grpchips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}
.mx-imp-grpchips .mx-chip {
  padding: 1px 8px;
  border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}
.mx-imp-grplist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--border);
}
.mx-imp-grpopt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  background: var(--surface-deep);
  transition:
    border-color 0.12s,
    background 0.12s;
}
.mx-imp-grpopt:hover {
  border-color: rgba(var(--accent-rgb), 0.5);
}
.mx-imp-grpopt input {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
  margin: 0;
}
.mx-imp-grpopt:has(input:checked) {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.mx-imp-grpopt input:checked + .mx-imp-grpname {
  color: var(--accent);
  font-weight: 700;
}
.mx-imp-year {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.mx-imp-in {
  width: 130px;
  font: inherit;
  font-size: 12.5px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mx-imp-in:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}
.mx-imp-in::placeholder {
  color: var(--muted);
}
.mx-imp-in:disabled {
  opacity: 0.55;
}
.mx-imp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mx-imp-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(70px, 90px) auto minmax(0, 1.1fr) auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}
.mx-imp-fileico {
  width: 16px;
  height: 16px;
  color: var(--accent);
  opacity: 0.8;
}
.mx-imp-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.mx-imp-size {
  white-space: nowrap;
}
.mx-imp-bar {
  height: 5px;
  border-radius: 3px;
  background: var(--surface-deep);
  overflow: hidden;
  display: block;
}
.mx-imp-bar i {
  display: block;
  height: 100%;
  background: var(--accent-grad);
  border-radius: 3px;
  transition: width 0.15s ease;
}
.mx-imp-st {
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
}
.mx-imp-st.busy {
  color: var(--accent);
}
.mx-imp-st.ok {
  color: var(--ok);
}
.mx-imp-st.warn {
  color: var(--warn);
}
.mx-imp-st.bad {
  color: var(--danger);
}
.mx-imp-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-imp-rm {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
}
.mx-imp-rm:hover {
  color: var(--danger);
  background: rgba(var(--danger-rgb, 231 76 60), 0.12);
}
.mx-imp-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.mx-imp-foot .dim {
  flex: 1;
  font-size: 12px;
}
.mx-imp-go {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
  padding: 8px 18px;
}
.mx-imp-go:disabled {
  opacity: 0.45;
}
/* toolbar-knop die het venster opent — accent zodat hij eruit springt */
.mx-btn-import {
  background: var(--accent-grad);
  border-color: transparent;
  color: var(--on-accent);
  font-weight: 700;
}
.mx-btn-import:hover {
  filter: brightness(1.08);
}
.mx-btn-import:disabled {
  opacity: 0.45;
}

/* ── zoeken & filters (#31): globale zoekbalk met suggesties +
     filterbalk met dropdown-popups — studio-stijl, zelfde vars ── */
.mx-search {
  position: relative;
  flex: 1 1 300px;
  min-width: 200px;
  max-width: 460px;
  display: flex;
  align-items: center;
}
.mx-search-ico {
  position: absolute;
  left: 9px;
  width: 15px;
  height: 15px;
  color: var(--muted);
  pointer-events: none;
}
.mx-search-in {
  flex: 1;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 28px 7px 30px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition:
    border-color 0.12s,
    box-shadow 0.12s;
}
.mx-search-in::placeholder {
  color: var(--muted);
  opacity: 0.75;
}
.mx-search-in:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.12);
}
.mx-search-in::-webkit-search-cancel-button {
  display: none;
}
.mx-search-x {
  position: absolute;
  right: 6px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-deep);
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.mx-search-x:hover {
  color: var(--text);
  background: rgba(var(--danger-rgb, 231 76 60), 0.18);
}

/* suggestie-dropdown onder het zoekveld */
.mx-sug {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 320px;
  overflow: auto;
  background: var(--surface-1, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 4px;
}
.mx-sug-i {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12.5px;
}
.mx-sug-i:hover,
.mx-sug-i.is-act {
  background: rgba(var(--accent-rgb), 0.14);
}
.mx-sug-i b {
  color: var(--accent);
  font-weight: 800;
}
.mx-sug-ico {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: var(--muted);
}
.mx-sug-ico svg {
  width: 15px;
  height: 15px;
}
.mx-sug-ico-grp {
  color: var(--warn);
}
.mx-sug-ico-dir {
  color: var(--accent);
}
.mx-sug-ico-doc {
  color: var(--accent);
}
.mx-sug-l {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-sug-s {
  flex: 0 0 auto;
  font-size: 10.5px;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx-sug-all {
  margin-top: 2px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 7px 7px;
  font-weight: 600;
  color: var(--accent);
}

/* filterbalk onder de toolbar */
.mx-fbar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  padding: 2px 0 0;
}
.mx-fb {
  position: relative;
}
.mx-fbtn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 9px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.12s,
    color 0.12s,
    background 0.12s;
}
.mx-fbtn:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.4);
}
.mx-fbtn .mx-fb-car {
  width: 11px;
  height: 11px;
  opacity: 0.7;
  transition: transform 0.12s;
}
.mx-fbtn.is-open .mx-fb-car {
  transform: rotate(180deg);
}
.mx-fbtn.is-on {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.mx-fb-n {
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-grad);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.mx-fpop {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 40;
  min-width: 170px;
  max-height: 300px;
  overflow: auto;
  background: var(--surface-1, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
}
.mx-fpop-h {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 8px 6px;
}
.mx-fopt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.mx-fopt:hover {
  background: rgba(var(--accent-rgb), 0.1);
}
.mx-fopt input {
  accent-color: var(--accent);
  width: 13px;
  height: 13px;
  margin: 0;
}
.mx-fopt.is-on {
  color: var(--accent);
  font-weight: 600;
}
.mx-fclear {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  background: none;
  color: var(--danger);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}
.mx-fclear:hover {
  background: rgba(var(--danger-rgb, 231 76 60), 0.12);
}

/* herkomst-map bij zoekresultaten */
.mx-resdir {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 1px;
}

/* ── #38: multi-select, bulk-balk, cover-art, detail-flash ─────────────
   Geselecteerde rijen krijgen een eigen tint (naast is-sel = "de rij in het
   detailpaneel"); de bulk-balk verschijnt zodra _mselN > 0. */

.mx-li.is-msel .mx-td {
  background: rgba(var(--accent-rgb), 0.22);
}
.mx-li.is-msel .mx-td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
}
.mx-li.is-msel.is-sel .mx-td {
  background: rgba(var(--accent-rgb), 0.3);
}

/* afgeleide "untagged"-chip in de rij — geen echte tag, wel zichtbare default */
.mx-chip-untag {
  border-style: dashed;
  border-color: var(--border);
  color: var(--text-dim);
  font-style: italic;
}

/* bulk-balk: verschijnt boven de tabel bij een actieve multi-selectie */
.mx-bulk {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: var(--surface-2);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 7px;
}
.mx-bulk[hidden] {
  display: none;
}
.mx-bulk-n {
  font-size: 11.5px;
  color: var(--text-bright);
  margin-right: 4px;
}
.mx-bulk-n b {
  color: var(--accent);
}
.mx-bulk-x {
  margin-left: auto;
}

/* groep-popup onder "groep taggen…" */
.mx-bulkpop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 8px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 4px;
  background: var(--surface-1, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0 0 0 / 0.35);
}
.mx-bulkpop-i {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.mx-bulkpop-i:hover {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--text-bright);
}
.mx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* cover-art in het detailpaneel — blob→objectURL via U.artwork (#38) */
.mx-d-cover {
  position: relative;
  margin: 8px 0;
  width: 100%;
  aspect-ratio: 1;
  max-height: 160px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mx-d-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mx-d-cover-ph {
  font-size: 10.5px;
}