/* ==========================================================================
   A/B hardware skin
   Licht geborsteld aluminium chassis, gepoedercoate frontplaten,
   toetsen met echte slag en LED, displays achter donker glas.
   Wordt als laatste geladen op elke pagina en overschrijft alleen uiterlijk.
   ========================================================================== */

:root {
  --hw-chassis:      #d6d9dc;
  --hw-chassis-hi:   #e7e9eb;
  --hw-chassis-lo:   #bfc3c7;
  --hw-plate:        #f2f2ef;
  --hw-plate-lo:     #e4e4e0;
  --hw-plate-edge:   #b9bbbd;
  --hw-deck:         #c9cdd1;
  --hw-ink:          #26282b;
  --hw-ink-mid:      #5d6166;
  --hw-ink-dim:      #8a8f95;
  --hw-key:          #fafaf8;
  --hw-key-lo:       #e3e3df;
  --hw-key-skirt:    #9da1a5;
  --hw-glass:        #101412;
  --hw-phosphor:     #3dff8a;
  --hw-led:          #fff6e0;
  --hw-a:            #6a4ff0;
  --hw-b:            #c98a0a;
  --hw-red:          #de3f38;

  /* herbruikbare materialen */
  --hw-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --hw-brush: repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, rgba(0,0,0,.018) 1px 2px, rgba(255,255,255,.04) 2px 3px);
  --hw-screw: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><defs><radialGradient id='g' cx='.35' cy='.3' r='.8'><stop offset='0' stop-color='%23ffffff'/><stop offset='.45' stop-color='%23c4c7ca'/><stop offset='1' stop-color='%23777b80'/></radialGradient></defs><circle cx='7' cy='7.6' r='6' fill='%23000' opacity='.18'/><circle cx='7' cy='7' r='6' fill='url(%23g)' stroke='%23868a8f' stroke-width='.6'/><path d='M4.2 7h5.6M7 4.2v5.6' stroke='%234a4e53' stroke-width='1.3' stroke-linecap='round'/><path d='M4.2 7.6h5.6M7.6 4.2v5.6' stroke='%23fff' stroke-width='.5' opacity='.6'/></svg>");

  --hw-key-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0,0,0,.05),
    0 2px 0 var(--hw-key-skirt),
    0 3px 1px rgba(0,0,0,.12),
    0 5px 8px rgba(0,0,0,.12);
  --hw-key-shadow-down:
    inset 0 1px 3px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.6),
    0 0 0 var(--hw-key-skirt),
    0 1px 1px rgba(0,0,0,.12);
  --hw-well:
    inset 0 2px 4px rgba(0,0,0,.22),
    inset 0 -1px 0 rgba(255,255,255,.7),
    0 1px 0 rgba(255,255,255,.8);
  --hw-glass-bezel:
    inset 0 3px 8px rgba(0,0,0,.85),
    inset 0 -1px 2px rgba(255,255,255,.06),
    0 0 0 1px #2c3033,
    0 1px 0 2px rgba(255,255,255,.75);
}

/* --------------------------------------------------------------------------
   Chassis: geborsteld aluminium
   -------------------------------------------------------------------------- */
html body:not(#_hw),
html body:not(#_hw) .app,
html body:not(#_hw) .main,
html body:not(#_hw) .tracks-area {
  background:
    var(--hw-brush),
    linear-gradient(180deg, var(--hw-chassis-hi) 0%, var(--hw-chassis) 45%, var(--hw-chassis-lo) 100%) !important;
  background-attachment: fixed !important;
  color: var(--hw-ink) !important;
}

/* --------------------------------------------------------------------------
   Topbar: geëxtrudeerde aluminium lijst
   -------------------------------------------------------------------------- */
html body:not(#_hw) .topbar {
  background:
    var(--hw-brush),
    linear-gradient(180deg, #f3f4f5 0%, #dcdfe2 55%, #c8ccd0 100%) !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #9ea3a8 !important;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.06), 0 1px 0 rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.12) !important;
  color: var(--hw-ink) !important;
}
html body:not(#_hw) .topbar::before,
html body:not(#_hw) .topbar::after {
  background: var(--hw-screw) center / 12px 12px no-repeat !important;
  box-shadow: none !important;
}
html body:not(#_hw) .topbar *:not(.mode-badge):not(.profile-status) { color: var(--hw-ink) !important; -webkit-text-fill-color: currentColor !important; }
html body:not(#_hw) .topbar .logo span { color: var(--hw-ink-dim) !important; }
/* logo (licht op donkere jpg) omkeren zodat het op aluminium werkt */
html body:not(#_hw) .topbar img {
  mix-blend-mode: multiply !important;
  filter: invert(1) contrast(1.15) !important;
}

/* gegraveerd naamplaatje */
html body:not(#_hw) .mode-badge {
  background: linear-gradient(180deg, #2f3236, #1f2124) !important;
  color: #e9ebed !important;
  border: 1px solid #111 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.9) !important;
  letter-spacing: .14em !important;
}

/* --------------------------------------------------------------------------
   Toetsen (alle knoppen met tekst)
   -------------------------------------------------------------------------- */
html body:not(#_hw) .dash-btn,
html body:not(#_hw) .replace-audio-btn,
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn,
html body:not(#_hw) .ab-pill,
html body:not(#_hw) .copy-feedback-btn,
html body:not(#_hw) .btn-secondary,
html body:not(#_hw) .upload-file-btn,
html body:not(#_hw) .btn-ghost {
  position: relative;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  border-radius: 6px !important;
  box-shadow: var(--hw-key-shadow) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  transform: translateY(0);
  transition: transform .05s ease, box-shadow .05s ease, background .1s ease !important;
  opacity: 1 !important;
}
html body:not(#_hw) .dash-btn:hover,
html body:not(#_hw) .replace-audio-btn:hover,
html body:not(#_hw) .phone-btn:hover,
html body:not(#_hw) .blind-mode-btn:hover,
html body:not(#_hw) .loop-btn:hover,
html body:not(#_hw) .lm-btn:hover,
html body:not(#_hw) .ab-pill:hover,
html body:not(#_hw) .copy-feedback-btn:hover,
html body:not(#_hw) .upload-file-btn:hover {
  background: linear-gradient(180deg, #fff 0%, #ebebe7 100%) !important;
}

/* ingedrukt: toets zakt 2px en de rand verdwijnt */
html body:not(#_hw) .dash-btn:active,
html body:not(#_hw) .replace-audio-btn:active,
html body:not(#_hw) .phone-btn:active,
html body:not(#_hw) .blind-mode-btn:active,
html body:not(#_hw) .loop-btn:active,
html body:not(#_hw) .lm-btn:active,
html body:not(#_hw) .ab-pill:active,
html body:not(#_hw) .copy-feedback-btn:active,
html body:not(#_hw) .upload-file-btn:active,
html body:not(#_hw) .phone-btn.active,
html body:not(#_hw) .blind-mode-btn.active,
html body:not(#_hw) .loop-btn.active,
html body:not(#_hw) .lm-btn.active,
html body:not(#_hw) .ab-pill.active {
  transform: translateY(2px) !important;
  background: linear-gradient(180deg, #e6e6e2 0%, #eeeeea 100%) !important;
  box-shadow: var(--hw-key-shadow-down) !important;
}

/* LED in schakelaars: uit = donker, aan = oranje gloed */
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn,
html body:not(#_hw) .ab-pill {
  padding-left: 17px !important;
}
html body:not(#_hw) .phone-btn::after,
html body:not(#_hw) .blind-mode-btn::after,
html body:not(#_hw) .loop-btn::after,
html body:not(#_hw) .lm-btn::after,
html body:not(#_hw) .ab-pill::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}
html body:not(#_hw) .phone-btn.active::after,
html body:not(#_hw) .blind-mode-btn.active::after,
html body:not(#_hw) .loop-btn.active::after,
html body:not(#_hw) .lm-btn.active::after {
  background: radial-gradient(circle at 35% 35%, #ffffff, #fff3d6 50%, #d8c9a8);
  box-shadow: 0 0 3px #fff7e6, 0 0 8px rgba(255,240,205,.9), 0 0 14px rgba(255,236,190,.5);
}
html body:not(#_hw) .ab-pill.btn-a.active::after {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2);
  box-shadow: 0 0 4px #8f76ff, 0 0 9px rgba(143,118,255,.6);
}
html body:not(#_hw) .ab-pill.btn-b.active::after {
  background: radial-gradient(circle at 35% 35%, #fff4d6, #ffbe3d 55%, #a86f00);
  box-shadow: 0 0 4px #ffbe3d, 0 0 9px rgba(255,190,61,.6);
}

/* groepen toetsen zitten in een verzonken sleuf */
html body:not(#_hw) .ab-pills,
html body:not(#_hw) .listen-mode-pills {
  background: linear-gradient(180deg, #b9bdc1, #caced2) !important;
  border: 1px solid #9da2a7 !important;
  border-radius: 8px !important;
  box-shadow: var(--hw-well) !important;
  gap: 3px;
  padding: 3px 3px 5px !important;
}
html body:not(#_hw) .ab-pills .ab-pill,
html body:not(#_hw) .listen-mode-pills .lm-btn {
  border-radius: 5px !important;
}

/* primaire toets: donker geanodiseerd */
html body:not(#_hw) .btn-primary {
  background: linear-gradient(180deg, #3a3e43 0%, #24272a 100%) !important;
  color: #f1f2f3 !important;
  border: 1px solid #111 !important;
  border-radius: 6px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #0c0d0e, 0 4px 8px rgba(0,0,0,.25) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .btn-primary:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), 0 0 0 #0c0d0e !important;
}

/* akkoord: rode toets */
html body:not(#_hw) .approve-btn {
  background: linear-gradient(180deg, #f0564e 0%, #c7322b 100%) !important;
  color: #fff !important;
  border: 1px solid #8e1d18 !important;
  border-radius: 6px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #87201b, 0 5px 10px rgba(199,50,43,.28) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .approve-btn:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), 0 0 0 #87201b !important;
}

/* ronde icoontoetsen in de topbar */
html body:not(#_hw) .profile-btn,
html body:not(#_hw) .settings-btn,
html body:not(#_hw) .topbar .btn-icon,
html body:not(#_hw) .settings-close,
html body:not(#_hw) .feedback-header .btn-icon,
html body:not(#_hw) .engineer-card .btn-icon {
  background: radial-gradient(circle at 50% 30%, #ffffff 0%, #eceeef 45%, #cfd3d6 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #9ea3a8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9da1a5, 0 4px 6px rgba(0,0,0,.14) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .profile-btn:active,
html body:not(#_hw) .settings-btn:active,
html body:not(#_hw) .topbar .btn-icon:active,
html body:not(#_hw) .settings-close:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 #9da1a5 !important;
}
html body:not(#_hw) .profile-status {
  box-shadow: 0 0 0 2px #e7e9eb, 0 0 6px #3ddc84 !important;
}

/* --------------------------------------------------------------------------
   Frontplaat per track: gepoedercoat, vier schroeven, afgeschuinde rand
   -------------------------------------------------------------------------- */
html body:not(#_hw) .track-card {
  background:
    var(--hw-screw) 12px 12px / 13px 13px no-repeat,
    var(--hw-screw) calc(100% - 12px) 12px / 13px 13px no-repeat,
    var(--hw-screw) 12px calc(100% - 12px) / 13px 13px no-repeat,
    var(--hw-screw) calc(100% - 12px) calc(100% - 12px) / 13px 13px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 40%, var(--hw-plate-lo) 100%) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  border-radius: 10px !important;
  color: var(--hw-ink) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 1px 0 0 rgba(255,255,255,.7),
    inset 0 -2px 0 rgba(0,0,0,.06),
    0 1px 0 #9fa3a7,
    0 2px 0 #b3b7bb,
    0 10px 18px -6px rgba(30,34,38,.35),
    0 22px 40px -18px rgba(30,34,38,.35) !important;
}
html body:not(#_hw) .track-card.is-active {
  border-color: #9fa4a9 !important;
}

/* verzonken sectie op de plaat */
html body:not(#_hw) .lufs-strip {
  background: linear-gradient(180deg, #e2e2de, #ebebe7) !important;
  border: 1px solid #c3c5c7 !important;
  border-radius: 6px !important;
  box-shadow: var(--hw-well) !important;
  color: var(--hw-ink-mid) !important;
}

/* gegraveerd label */
html body:not(#_hw) .gain-badge {
  background: linear-gradient(180deg, #d9dadb, #cfd1d3) !important;
  color: var(--hw-ink-mid) !important;
  border: 1px solid #adb1b5 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14), 0 1px 0 #fff !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}

/* --------------------------------------------------------------------------
   Displays achter glas
   -------------------------------------------------------------------------- */
html body:not(#_hw) .lufs-val,
html body:not(#_hw) .lufs-peak-badge,
html body:not(#_hw) .lufs-bar-bg,
html body:not(#_hw) .waveform-container {
  position: relative;
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #16201a 0%, var(--hw-glass) 80%) !important;
  border: 1px solid #070908 !important;
  box-shadow: var(--hw-glass-bezel) !important;
}
html body:not(#_hw) .lufs-peak-st {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html body:not(#_hw) .lufs-val,
html body:not(#_hw) .lufs-peak-st {
  color: var(--hw-phosphor) !important;
  text-shadow: 0 0 4px rgba(61,255,138,.65), 0 0 10px rgba(61,255,138,.25) !important;
}
html body:not(#_hw) .waveform-container { border-radius: 6px !important; }

/* LED-ladder in de LUFS-meter */
html body:not(#_hw) .lufs-bar-fill {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px);
          mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 5px);
  filter: drop-shadow(0 0 3px rgba(61,255,138,.55));
}

/* tijd: rode 7-segment achter rood glas */
html body:not(#_hw) .time-display {
  background:
    linear-gradient(170deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 50% 40%, #2a0b0a 0%, #120404 85%) !important;
  border: 1px solid #070202 !important;
  border-radius: 4px !important;
  color: #ff4a3a !important;
  text-shadow: 0 0 5px rgba(255,74,58,.75), 0 0 12px rgba(255,74,58,.3) !important;
  box-shadow: var(--hw-glass-bezel) !important;
}

/* --------------------------------------------------------------------------
   Transportknop: gefreesd aluminium
   -------------------------------------------------------------------------- */
html body:not(#_hw) .play-btn {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0) 0 38%, rgba(0,0,0,.08) 39%, rgba(255,255,255,0) 41%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 0 1px, rgba(0,0,0,.035) 1px 2px),
    conic-gradient(from 200deg, #f5f6f7, #b9bdc1 18%, #eef0f1 32%, #a9aeb3 52%, #f2f3f4 68%, #b4b8bc 84%, #f5f6f7) !important;
  border: 1px solid #8a8f94 !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 0 0 4px #d9dcdf,
    0 0 0 5px #a9adb1,
    0 3px 0 5px #9a9ea3,
    0 8px 14px 4px rgba(0,0,0,.18) !important;
  transition: transform .06s ease, box-shadow .06s ease !important;
}
html body:not(#_hw) .play-btn:active {
  transform: translateY(2px) !important;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.25),
    0 0 0 4px #d9dcdf,
    0 0 0 5px #a9adb1,
    0 1px 0 5px #9a9ea3,
    0 3px 6px 4px rgba(0,0,0,.15) !important;
}

/* --------------------------------------------------------------------------
   Bedieningsdeck tussen de tracks
   -------------------------------------------------------------------------- */
html body:not(#_hw) .ab-switcher-bar {
  background:
    var(--hw-screw) 10px 50% / 11px 11px no-repeat,
    var(--hw-screw) calc(100% - 10px) 50% / 11px 11px no-repeat,
    var(--hw-brush),
    linear-gradient(180deg, #d3d6d9 0%, var(--hw-deck) 50%, #b6bbc0 100%) !important;
  border: 1px solid #9aa0a5 !important;
  border-radius: 8px !important;
  color: var(--hw-ink-mid) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 1px 0 #8f959a,
    0 8px 16px -8px rgba(30,34,38,.4) !important;
}
html body:not(#_hw) .ab-switcher-label {
  color: var(--hw-ink-mid) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}
html body:not(#_hw) .switcher-shortcut {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border-radius: 2px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.8) !important;
}

/* --------------------------------------------------------------------------
   Panelen en modals: zelfde frontplaat
   -------------------------------------------------------------------------- */
html body:not(#_hw) .engineer-card,
html body:not(#_hw) .settings-panel,
html body:not(#_hw) .feedback-panel,
html body:not(#_hw) .modal-content,
html body:not(#_hw) .modal-box,
html body:not(#_hw) .auth-card {
  background:
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 50%, var(--hw-plate-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 24px 60px -12px rgba(20,24,28,.45) !important;
}
html body:not(#_hw) .engineer-panel {
  background: rgba(60,66,72,.38) !important;
  backdrop-filter: blur(3px);
}
html body:not(#_hw) .feedback-header,
html body:not(#_hw) .feedback-footer {
  background: var(--hw-brush), linear-gradient(180deg, #e9ebed, #d3d7da) !important;
  color: var(--hw-ink) !important;
  border-color: #aeb3b7 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.08) !important;
}
html body:not(#_hw) .feedback-count,
html body:not(#_hw) .note-notif {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  color: #eef0f1 !important;
  border: 1px solid #0f1011 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.2) !important;
}
html body:not(#_hw) .version-timeline {
  background: linear-gradient(180deg, #e2e2de, #ebebe7) !important;
  box-shadow: var(--hw-well) !important;
  border: 1px solid #c3c5c7 !important;
}
html body:not(#_hw) .timeline-item {
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo)) !important;
  border: 1px solid #b4b8bc !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #a9adb1 !important;
  color: var(--hw-ink) !important;
}
html body:not(#_hw) .timeline-dot {
  background: linear-gradient(180deg, #3a3e43, #202326) !important;
  color: #eef0f1 !important;
}
html body:not(#_hw) .timeline-dot.current {
  box-shadow: 0 0 0 2px #26282b, 0 0 0 3px #fff !important;
}

/* invoervelden: verzonken */
html body:not(#_hw) .field-input,
html body:not(#_hw) .auth-input,
html body:not(#_hw) input[type="text"],
html body:not(#_hw) input[type="password"],
html body:not(#_hw) input[type="email"],
html body:not(#_hw) input[type="number"],
html body:not(#_hw) textarea {
  background: linear-gradient(180deg, #e3e4e1, #efefec) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #b0b4b8 !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .field-input:focus,
html body:not(#_hw) .auth-input:focus,
html body:not(#_hw) textarea:focus {
  outline: none !important;
  border-color: #6f757b !important;
}

html body:not(#_hw) .customization-panel {
  background: transparent !important;
}

html body:not(#_hw) #_toastEl {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  color: #eef0f1 !important;
  border: 1px solid #0f1011 !important;
}

/* toetsenbordfocus blijft zichtbaar */
html body:not(#_hw) button:focus,
html body:not(#_hw) a:focus { outline: none !important; }
html body:not(#_hw) button:focus-visible,
html body:not(#_hw) a:focus-visible {
  outline: 2px solid rgba(38,40,43,.55) !important;
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  html body * { transition: none !important; }
}

html body:not(#_hw) .feedback-title {
  color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}

/* --------------------------------------------------------------------------
   Groene hoofdtoets (inloggen, aanmelden, starten)
   -------------------------------------------------------------------------- */
html body:not(#_hw) .btn-green,
html body:not(#_hw) .btn-hero-primary,
html body:not(#_hw) .auth-submit {
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  color: #fff !important;
  border: 1px solid #0b0c0d !important;
  border-radius: 7px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 3px 0 #101214,
    0 5px 2px rgba(0,0,0,.12),
    0 10px 18px -4px rgba(0,0,0,.3) !important;
  transform: translateY(0);
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .btn-green:hover,
html body:not(#_hw) .btn-hero-primary:hover,
html body:not(#_hw) .auth-submit:hover {
  background: linear-gradient(180deg, #555a61 0%, #383d42 55%, #2a2d31 100%) !important;
}
html body:not(#_hw) .btn-green:active,
html body:not(#_hw) .btn-hero-primary:active,
html body:not(#_hw) .auth-submit:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 #101214, 0 2px 4px rgba(0,0,0,.2) !important;
}
html body:not(#_hw) .btn-hero-secondary,
html body:not(#_hw) .auth-social-btn {
  position: relative;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  border-radius: 7px !important;
  box-shadow: var(--hw-key-shadow) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .btn-hero-secondary:active,
html body:not(#_hw) .auth-social-btn:active {
  transform: translateY(2px) !important;
  box-shadow: var(--hw-key-shadow-down) !important;
}

/* --------------------------------------------------------------------------
   Landingspagina
   -------------------------------------------------------------------------- */
html body:not(#_hw) .grid-bg { display: none !important; }

html body:not(#_hw) .nav,
html body:not(#_hw) .nav.scrolled {
  background:
    var(--hw-brush),
    linear-gradient(180deg, #f3f4f5 0%, #dcdfe2 55%, #c8ccd0 100%) !important;
  border-bottom: 1px solid #9ea3a8 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.12) !important;
  color: var(--hw-ink) !important;
  backdrop-filter: none !important;
}
html body:not(#_hw) .nav .nav-links a,
html body:not(#_hw) .nav .nav-logo,
html body:not(#_hw) .nav .nav-logo-tag {
  color: var(--hw-ink-mid) !important;
  -webkit-text-fill-color: currentColor;
}
html body:not(#_hw) .nav .nav-logo-mark { color: var(--hw-ink) !important; }

html body:not(#_hw) .hero-badge {
  background: linear-gradient(180deg, #2f3236, #1f2124) !important;
  color: #e9ebed !important;
  border: 1px solid #111 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 rgba(255,255,255,.9) !important;
}

/* functies: kleine frontplaten */
html body:not(#_hw) .feature-card,
html body:not(#_hw) .how-step,
html body:not(#_hw) .mock-track {
  background:
    var(--hw-screw) 10px 10px / 11px 11px no-repeat,
    var(--hw-screw) calc(100% - 10px) 10px / 11px 11px no-repeat,
    var(--hw-screw) 10px calc(100% - 10px) / 11px 11px no-repeat,
    var(--hw-screw) calc(100% - 10px) calc(100% - 10px) / 11px 11px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 40%, var(--hw-plate-lo) 100%) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  border-radius: 10px !important;
  color: var(--hw-ink) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0,0,0,.05),
    0 1px 0 #9fa3a7,
    0 2px 0 #b3b7bb,
    0 12px 22px -10px rgba(30,34,38,.35) !important;
}
html body:not(#_hw) .how-step { padding: 28px 26px !important; }
html body:not(#_hw) .how-step-line { display: none !important; }
html body:not(#_hw) .how-step-num {
  color: #c9ccd0 !important;
  -webkit-text-fill-color: #d5d8db;
  text-shadow: 0 1px 0 #fff, 0 -1px 0 rgba(0,0,0,.18) !important;
}

html body:not(#_hw) .feature-icon {
  background: linear-gradient(180deg, #e2e2de, #ebebe7) !important;
  border: 1px solid #c3c5c7 !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .feature-icon.green { color: var(--hw-a) !important; }
html body:not(#_hw) .feature-icon.blue  { color: var(--hw-b) !important; }
html body:not(#_hw) .feature-icon.amber { color: #d9730d !important; }

/* productbeeld: een rackapparaat in plaats van een browservenster */
html body:not(#_hw) .screenshot-frame {
  background: var(--hw-brush), linear-gradient(180deg, #d9dcdf, #c3c7cb) !important;
  border: 1px solid #9aa0a5 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9ea3a8, 0 40px 80px -30px rgba(20,24,28,.5) !important;
}
html body:not(#_hw) .screenshot-bar {
  background: var(--hw-brush), linear-gradient(180deg, #eef0f1, #d5d8db) !important;
  border-bottom: 1px solid #a4a9ad !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.6) !important;
}
html body:not(#_hw) .screenshot-body { background: transparent !important; }
html body:not(#_hw) .screenshot-dot {
  width: 8px !important;
  height: 8px !important;
  box-shadow: inset 0 0 1px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.8) !important;
}
html body:not(#_hw) .screenshot-dot.r { background: radial-gradient(circle at 35% 35%, #ffd0c8, #ff4a3a 55%, #a3160c) !important; box-shadow: 0 0 6px rgba(255,74,58,.7) !important; }
html body:not(#_hw) .screenshot-dot.y { background: radial-gradient(circle at 35% 35%, #fff3c4, #ff8a1f 55%, #c24e00) !important; box-shadow: 0 0 6px rgba(255,138,31,.7) !important; }
html body:not(#_hw) .screenshot-dot.g { background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2) !important; box-shadow: 0 0 6px rgba(143,118,255,.7) !important; }
html body:not(#_hw) .mock-waveform {
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 50% 40%, #16201a 0%, var(--hw-glass) 80%) !important;
  border-radius: 5px !important;
  box-shadow: var(--hw-glass-bezel) !important;
}
html body:not(#_hw) .mock-time {
  color: #ff4a3a !important;
  text-shadow: 0 0 5px rgba(255,74,58,.6) !important;
}
html body:not(#_hw) .mock-play {
  background: conic-gradient(from 200deg, #f5f6f7, #b9bdc1 18%, #eef0f1 32%, #a9aeb3 52%, #f2f3f4 68%, #b4b8bc 84%, #f5f6f7) !important;
  border: 1px solid #8a8f94 !important;
  box-shadow: inset 0 1px 1px #fff, 0 2px 0 #9a9ea3, 0 3px 6px rgba(0,0,0,.18) !important;
}

/* cijferbalk: groene displays */
html body:not(#_hw) .proof-bar {
  background: var(--hw-brush), linear-gradient(180deg, #d3d6d9, var(--hw-deck) 50%, #b6bbc0) !important;
  border-top: 1px solid #fff !important;
  border-bottom: 1px solid #9aa0a5 !important;
}
html body:not(#_hw) .proof-value {
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}

/* inlogpaneel */
html body:not(#_hw) .auth-tabs {
  background: linear-gradient(180deg, #b9bdc1, #caced2) !important;
  border: 1px solid #9da2a7 !important;
  border-radius: 8px !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .auth-tab { color: var(--hw-ink-mid) !important; border-radius: 6px !important; }
html body:not(#_hw) .auth-tab.active {
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo)) !important;
  color: var(--hw-ink) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 var(--hw-key-skirt), 0 3px 5px rgba(0,0,0,.12) !important;
}
html body:not(#_hw) .auth-feature-check {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 0 6px rgba(143,118,255,.55), inset 0 0 1px rgba(0,0,0,.4) !important;
}

html body:not(#_hw) .footer {
  background: var(--hw-brush), linear-gradient(180deg, #d3d6d9, #bfc3c7) !important;
  border-top: 1px solid #9aa0a5 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

html body:not(#_hw) .hero,
html body:not(#_hw) .features,
html body:not(#_hw) .how-section,
html body:not(#_hw) .screenshot-section,
html body:not(#_hw) .auth-section {
  background: transparent !important;
  border-color: transparent !important;
}
html body:not(#_hw) .how-section,
html body:not(#_hw) .auth-section {
  box-shadow: inset 0 1px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.7) !important;
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
html:has(> body:not(#_hw)) {
  background:
    var(--hw-brush),
    linear-gradient(180deg, var(--hw-chassis-hi) 0%, var(--hw-chassis) 45%, var(--hw-chassis-lo) 100%) fixed !important;
}
html body:not(#_hw) { min-height: 100vh; }
html body:not(#_hw) > nav,
html body:not(#_hw) #loadingOverlay {
  background:
    var(--hw-brush),
    linear-gradient(180deg, #f3f4f5 0%, #dcdfe2 55%, #c8ccd0 100%) !important;
}
html body:not(#_hw) > nav {
  border-bottom: 1px solid #9ea3a8 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.12) !important;
  backdrop-filter: none !important;
}
html body:not(#_hw) > nav img {
  mix-blend-mode: multiply !important;
  filter: invert(1) contrast(1.15) !important;
}
html body:not(#_hw) main { background: transparent !important; }

html body:not(#_hw) .nav-avatar,
html body:not(#_hw) .profile-avatar-lg {
  background: radial-gradient(circle at 50% 30%, #fff 0%, #eceeef 45%, #cfd3d6 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #9ea3a8 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9da1a5, 0 4px 6px rgba(0,0,0,.14) !important;
}

html body:not(#_hw) .btn-new,
html body:not(#_hw) .btn-empty,
html body:not(#_hw) .profile-save-btn,
html body:not(#_hw) .lm-btn-primary {
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  color: #fff !important;
  border: 1px solid #0b0c0d !important;
  border-radius: 7px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #101214, 0 8px 14px -4px rgba(0,0,0,.3) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .btn-new:active,
html body:not(#_hw) .btn-empty:active,
html body:not(#_hw) .profile-save-btn:active,
html body:not(#_hw) .lm-btn-primary:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 #101214 !important;
}
html body:not(#_hw) .lm-btn-secondary,
html body:not(#_hw) .card-menu-btn,
html body:not(#_hw) .profile-close-btn,
html body:not(#_hw) .lm-close,
html body:not(#_hw) .ctx-close-btn {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  box-shadow: var(--hw-key-shadow) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .lm-btn-secondary:active,
html body:not(#_hw) .card-menu-btn:active,
html body:not(#_hw) .profile-close-btn:active,
html body:not(#_hw) .lm-close:active {
  transform: translateY(2px) !important;
  box-shadow: var(--hw-key-shadow-down) !important;
}
html body:not(#_hw) .profile-logout-btn,
html body:not(#_hw) .btn-logout {
  background: linear-gradient(180deg, #f0564e 0%, #c7322b 100%) !important;
  color: #fff !important;
  border: 1px solid #8e1d18 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #87201b, 0 5px 10px rgba(199,50,43,.25) !important;
}

/* statistieken als displays */
html body:not(#_hw) .stats-row { gap: 12px !important; }
html body:not(#_hw) .stat {
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #16201a 0%, var(--hw-glass) 80%) !important;
  border: 1px solid #070908 !important;
  border-radius: 6px !important;
  padding: 10px 16px 8px !important;
  box-shadow: var(--hw-glass-bezel) !important;
}
html body:not(#_hw) .stat-val {
  color: var(--hw-phosphor) !important;
  text-shadow: 0 0 5px rgba(61,255,138,.6), 0 0 12px rgba(61,255,138,.25) !important;
}
html body:not(#_hw) .stat-val.b {
  color: #ffc857 !important;
  text-shadow: 0 0 5px rgba(255,200,87,.6), 0 0 12px rgba(255,200,87,.25) !important;
}
html body:not(#_hw) .stat-val:not(.g):not(.b) {
  color: #ffb45c !important;
  text-shadow: 0 0 5px rgba(255,160,60,.6) !important;
}
html body:not(#_hw) .stat-label { color: #8f979c !important; }

html body:not(#_hw) .search-box,
html body:not(#_hw) .lm-input,
html body:not(#_hw) .profile-row input {
  background: linear-gradient(180deg, #e3e4e1, #efefec) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #b0b4b8 !important;
  box-shadow: var(--hw-well) !important;
}

/* projectkaarten: frontplaat met verzonken hoesvenster */
html body:not(#_hw) .project-card {
  background:
    var(--hw-screw) 8px calc(100% - 8px) / 10px 10px no-repeat,
    var(--hw-screw) calc(100% - 8px) calc(100% - 8px) / 10px 10px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 40%, var(--hw-plate-lo) 100%) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  border-radius: 10px !important;
  padding: 10px 10px 18px !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 0 #9fa3a7,
    0 2px 0 #b3b7bb,
    0 12px 22px -10px rgba(30,34,38,.35) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
html body:not(#_hw) .project-card:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #9fa3a7, 0 2px 0 #b3b7bb, 0 20px 30px -12px rgba(30,34,38,.4) !important;
}
html body:not(#_hw) .card-art {
  border-radius: 5px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25), 0 1px 0 2px rgba(255,255,255,.8) !important;
}
html body:not(#_hw) .card-info { padding-left: 4px !important; padding-right: 4px !important; }
html body:not(#_hw) .project-card .play-btn {
  background: conic-gradient(from 200deg, #f5f6f7, #b9bdc1 18%, #eef0f1 32%, #a9aeb3 52%, #f2f3f4 68%, #b4b8bc 84%, #f5f6f7) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #8a8f94 !important;
  box-shadow: inset 0 1px 1px #fff, 0 2px 0 #9a9ea3, 0 4px 8px rgba(0,0,0,.25) !important;
}

html body:not(#_hw) .profile-panel,
html body:not(#_hw) .load-modal-card,
html body:not(#_hw) .ctx-menu {
  background:
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 50%, var(--hw-plate-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 24px 60px -12px rgba(20,24,28,.45) !important;
}
html body:not(#_hw) .lm-upload {
  background: linear-gradient(180deg, #e2e2de, #ebebe7) !important;
  border: 1px dashed #a9adb1 !important;
  box-shadow: var(--hw-well) !important;
  color: var(--hw-ink-mid) !important;
}

/* ==========================================================================
   Elke losse toets zit in zijn eigen verzonken sleuf,
   net als de DEMO/MIX- en ST/M/S-groepen.
   ========================================================================== */
:root {
  /* Geen lijst rondom: een echte toets werpt licht een schaduw naar onderen
     (contactschaduw vlak eronder + zachte slagschaduw), en raakt het paneel
     verder nergens met een harde rand. */
  --hw-slot:
    0 1px 1px rgba(20,24,28,.10),
    0 4px 7px -3px rgba(20,24,28,.26),
    0 9px 16px -10px rgba(20,24,28,.30);
  --hw-slot-key:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0,0,0,.05),
    0 2px 0 var(--hw-key-skirt),
    0 3px 2px rgba(0,0,0,.16),
    var(--hw-slot);
  --hw-slot-key-down:
    inset 0 1px 3px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.6),
    0 1px 1px rgba(0,0,0,.12),
    var(--hw-slot);
}

/* lichte toetsen */
html body:not(#_hw) .dash-btn,
html body:not(#_hw) .replace-audio-btn,
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .copy-feedback-btn,
html body:not(#_hw) .btn-secondary,
html body:not(#_hw) .btn-ghost,
html body:not(#_hw) .btn-hero-secondary,
html body:not(#_hw) .auth-social-btn,
html body:not(#_hw) .lm-btn-secondary,
html body:not(#_hw) .card-menu-btn,
html body:not(#_hw) .settings-panel .lm-btn {
  border-radius: 5px !important;
  box-shadow: var(--hw-slot-key) !important;
}
html body:not(#_hw) .dash-btn:active,
html body:not(#_hw) .replace-audio-btn:active,
html body:not(#_hw) .phone-btn:active,
html body:not(#_hw) .blind-mode-btn:active,
html body:not(#_hw) .loop-btn:active,
html body:not(#_hw) .copy-feedback-btn:active,
html body:not(#_hw) .btn-secondary:active,
html body:not(#_hw) .btn-ghost:active,
html body:not(#_hw) .btn-hero-secondary:active,
html body:not(#_hw) .auth-social-btn:active,
html body:not(#_hw) .lm-btn-secondary:active,
html body:not(#_hw) .card-menu-btn:active,
html body:not(#_hw) .settings-panel .lm-btn:active,
html body:not(#_hw) .phone-btn.active,
html body:not(#_hw) .blind-mode-btn.active,
html body:not(#_hw) .loop-btn.active,
html body:not(#_hw) .settings-panel .lm-btn.active {
  box-shadow: var(--hw-slot-key-down) !important;
}

/* ruimte zodat naast elkaar liggende sleuven elkaar niet overlappen */


/* groene toetsen */
html body:not(#_hw) .btn-green,
html body:not(#_hw) .btn-hero-primary,
html body:not(#_hw) .auth-submit,
html body:not(#_hw) .btn-new,
html body:not(#_hw) .btn-empty,
html body:not(#_hw) .profile-save-btn,
html body:not(#_hw) .lm-btn-primary {
  border-radius: 6px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 3px 0 #101214,
    0 4px 2px rgba(0,0,0,.16),
    var(--hw-slot) !important;
}
html body:not(#_hw) .btn-green:active,
html body:not(#_hw) .btn-hero-primary:active,
html body:not(#_hw) .auth-submit:active,
html body:not(#_hw) .btn-new:active,
html body:not(#_hw) .btn-empty:active,
html body:not(#_hw) .profile-save-btn:active,
html body:not(#_hw) .lm-btn-primary:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), var(--hw-slot) !important;
}

/* donkere en rode toetsen */
html body:not(#_hw) .btn-primary {
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #0c0d0e, 0 3px 2px rgba(0,0,0,.2), var(--hw-slot) !important;
}
html body:not(#_hw) .btn-primary:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), var(--hw-slot) !important;
}
html body:not(#_hw) .approve-btn,
html body:not(#_hw) .profile-logout-btn {
  border-radius: 5px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #87201b, 0 3px 2px rgba(0,0,0,.16), var(--hw-slot) !important;
}
html body:not(#_hw) .approve-btn:active,
html body:not(#_hw) .profile-logout-btn:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), var(--hw-slot) !important;
}

/* ronde toetsen in een ronde uitsparing */
html body:not(#_hw) .profile-btn,
html body:not(#_hw) .settings-btn,
html body:not(#_hw) .topbar .btn-icon,
html body:not(#_hw) .settings-close,
html body:not(#_hw) .feedback-header .btn-icon,
html body:not(#_hw) .engineer-card .btn-icon,
html body:not(#_hw) .nav-avatar,
html body:not(#_hw) .profile-close-btn,
html body:not(#_hw) .lm-close,
html body:not(#_hw) .ctx-close-btn {
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9da1a5, 0 3px 2px rgba(0,0,0,.16), var(--hw-slot) !important;
}
html body:not(#_hw) .profile-btn:active,
html body:not(#_hw) .settings-btn:active,
html body:not(#_hw) .topbar .btn-icon:active,
html body:not(#_hw) .settings-close:active,
html body:not(#_hw) .feedback-header .btn-icon:active,
html body:not(#_hw) .engineer-card .btn-icon:active,
html body:not(#_hw) .profile-close-btn:active,
html body:not(#_hw) .lm-close:active {
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), var(--hw-slot) !important;
}
html body:not(#_hw) .topbar .btn-icon,
html body:not(#_hw) .settings-btn,
html body:not(#_hw) .profile-btn {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

/* ==========================================================================
   Overige panelen: feedbackoverzicht, profiel, delen, akkoord, markers
   ========================================================================== */

/* frontplaten */
html body:not(#_hw) .fb-overview,
html body:not(#_hw) .profile-dropdown,
html body:not(#_hw) #sharePanel,
html body:not(#_hw) .approve-dialog,
html body:not(#_hw) .marker-popup,
html body:not(#_hw) .fb-popup,
html body:not(#_hw) .fb-playback-popup {
  background:
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 50%, var(--hw-plate-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 24px 60px -12px rgba(20,24,28,.45) !important;
}
html body:not(#_hw) #sharePanel div { color: var(--hw-ink-mid) !important; }

/* kopstrook: aluminium profiel */
html body:not(#_hw) .fb-ov-header,
html body:not(#_hw) .fb-popup-header,
html body:not(#_hw) .settings-header,
html body:not(#_hw) .profile-header {
  background: var(--hw-brush), linear-gradient(180deg, #eef0f1, #d5d8db) !important;
  color: var(--hw-ink) !important;
  border-bottom: 1px solid #a4a9ad !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.5) !important;
}
html body:not(#_hw) .fb-ov-title,
html body:not(#_hw) .fb-popup-header-title,
html body:not(#_hw) .settings-title,
html body:not(#_hw) .profile-header-name {
  color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
}
html body:not(#_hw) .fb-ov-subtitle,
html body:not(#_hw) .profile-header-email { color: var(--hw-ink-mid) !important; }
html body:not(#_hw) .fb-ov-icon,
html body:not(#_hw) .profile-header-avatar {
  background: linear-gradient(180deg, #3a3e43, #202326) !important;
  color: #eef0f1 !important;
  border: 1px solid #111 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 #fff !important;
}
html body:not(#_hw) .profile-header-role {
  background: linear-gradient(180deg, #2f3236, #1f2124) !important;
  color: #e9ebed !important;
  border: 1px solid #111 !important;
  border-radius: 3px !important;
}

/* tellers als displays in een verzonken strook */
html body:not(#_hw) .fb-ov-stats,
html body:not(#_hw) .profile-stat-row {
  background: linear-gradient(180deg, #e2e2de, #ebebe7) !important;
  box-shadow: var(--hw-well) !important;
  border-color: #c3c5c7 !important;
  gap: 8px !important;
  padding: 10px 12px !important;
}
html body:not(#_hw) .fb-ov-stat,
html body:not(#_hw) .profile-stat {
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 40%, #16201a 0%, var(--hw-glass) 80%) !important;
  border: 1px solid #070908 !important;
  border-radius: 6px !important;
  box-shadow: var(--hw-glass-bezel) !important;
}
html body:not(#_hw) .fb-ov-stat-num,
html body:not(#_hw) .profile-stat-value {
  color: #ffb45c !important;
  text-shadow: 0 0 5px rgba(255,160,60,.6) !important;
}
html body:not(#_hw) .fb-ov-stat-num.c-a {
  color: var(--hw-phosphor) !important;
  text-shadow: 0 0 5px rgba(61,255,138,.6) !important;
}
html body:not(#_hw) .fb-ov-stat-num.c-b {
  color: #ffc857 !important;
  text-shadow: 0 0 5px rgba(255,200,87,.6) !important;
}
html body:not(#_hw) .fb-ov-stat-label,
html body:not(#_hw) .profile-stat-label { color: #8f979c !important; }

/* tijdcodes: rode LED */
html body:not(#_hw) .fb-popup-header-timecode,
html body:not(#_hw) .marker-popup-time,
html body:not(#_hw) .fb-pp-time,
html body:not(#_hw) .fb-ov-note-tc {
  background: radial-gradient(ellipse at 50% 40%, #2a0b0a 0%, #120404 85%) !important;
  color: #ff4a3a !important;
  text-shadow: 0 0 5px rgba(255,74,58,.7) !important;
  border: 1px solid #070202 !important;
  border-radius: 3px !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.8) !important;
  padding: 2px 6px !important;
}

/* filtertoetsen in een sleuf, met LED */
html body:not(#_hw) .fb-ov-filters { background: transparent !important; }
html body:not(#_hw) .fb-ov-filter {
  position: relative;
  padding-left: 18px !important;
}
html body:not(#_hw) .fb-ov-filter::after {
  content: '';
  position: absolute;
  left: 7px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}
html body:not(#_hw) .fb-ov-filter.active::after {
  background: radial-gradient(circle at 35% 35%, #ffffff, #fff3d6 50%, #d8c9a8);
  box-shadow: 0 0 3px #fff7e6, 0 0 8px rgba(255,240,205,.9), 0 0 14px rgba(255,236,190,.5);
}
html body:not(#_hw) .fb-ov-filter.f-a.active::after {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2);
  box-shadow: 0 0 4px #8f76ff, 0 0 9px rgba(143,118,255,.6);
}
html body:not(#_hw) .fb-ov-filter.f-b.active::after {
  background: radial-gradient(circle at 35% 35%, #fff4d6, #ffbe3d 55%, #a86f00);
  box-shadow: 0 0 4px #ffbe3d, 0 0 9px rgba(255,190,61,.6);
}

/* lichte toetsen in sleuf */
html body:not(#_hw) .fb-ov-filter,
html body:not(#_hw) .fb-ov-btn,
html body:not(#_hw) #fbOvCreateToggle,
html body:not(#_hw) .approve-dialog-btn.btn-no,
html body:not(#_hw) .marker-popup-btn,
html body:not(#_hw) .copy-btn,
html body:not(#_hw) .fb-ov-note-del,
html body:not(#_hw) .version-pill,
html body:not(#_hw) .profile-dropdown .profile-save-btn:not(#profileSaveBtn) {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  border-radius: 5px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  box-shadow: var(--hw-slot-key) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .fb-ov-filter:active,
html body:not(#_hw) .fb-ov-filter.active,
html body:not(#_hw) .fb-ov-btn:active,
html body:not(#_hw) #fbOvCreateToggle:active,
html body:not(#_hw) .approve-dialog-btn.btn-no:active,
html body:not(#_hw) .marker-popup-btn:active,
html body:not(#_hw) .copy-btn:active,
html body:not(#_hw) .fb-ov-note-del:active,
html body:not(#_hw) .version-pill:active {
  transform: translateY(2px) !important;
  background: linear-gradient(180deg, #e6e6e2 0%, #eeeeea 100%) !important;
  color: var(--hw-ink) !important;
  box-shadow: var(--hw-slot-key-down) !important;
}
html body:not(#_hw) .fb-ov-filters { gap: 12px !important; padding-left: 8px !important; }

/* donkere toetsen */
html body:not(#_hw) .fb-ov-btn.primary,
html body:not(#_hw) .marker-popup-btn.primary,
html body:not(#_hw) .fb-popup-send-btn,
html body:not(#_hw) #sharePanel button:not([onclick*="toggleSharePanel"]) {
  background: linear-gradient(180deg, #3a3e43 0%, #24272a 100%) !important;
  color: #f1f2f3 !important;
  border: 1px solid #111 !important;
  border-radius: 5px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 0 #0c0d0e, 0 3px 2px rgba(0,0,0,.2), var(--hw-slot) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .fb-ov-btn.primary:active,
html body:not(#_hw) .marker-popup-btn.primary:active,
html body:not(#_hw) .fb-popup-send-btn:active,
html body:not(#_hw) #sharePanel button:not([onclick*="toggleSharePanel"]):active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), var(--hw-slot) !important;
}

/* groene toets: akkoord */
html body:not(#_hw) .approve-dialog-btn.btn-yes {
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  color: #fff !important;
  border: 1px solid #0b0c0d !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #101214, 0 4px 2px rgba(0,0,0,.16), var(--hw-slot) !important;
}
html body:not(#_hw) .approve-dialog-btn.btn-yes:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), var(--hw-slot) !important;
}

/* ronde sluitknoppen */
html body:not(#_hw) .fb-ov-close,
html body:not(#_hw) .fb-popup-close,
html body:not(#_hw) #sharePanel button[onclick*="toggleSharePanel"] {
  background: radial-gradient(circle at 50% 30%, #fff 0%, #eceeef 45%, #cfd3d6 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #9ea3a8 !important;
  border-radius: 50% !important;
  width: 30px !important; height: 30px !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9da1a5, 0 3px 2px rgba(0,0,0,.16), var(--hw-slot) !important;
}
html body:not(#_hw) .fb-ov-close:active,
html body:not(#_hw) .fb-popup-close:active {
  transform: translateY(2px) !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.2), var(--hw-slot) !important;
}

/* invoer */
html body:not(#_hw) select,
html body:not(#_hw) .profile-edit-input,
html body:not(#_hw) .marker-popup-input,
html body:not(#_hw) .fb-popup-textarea,
html body:not(#_hw) #sharePanel input {
  background: linear-gradient(180deg, #e3e4e1, #efefec) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #b0b4b8 !important;
  box-shadow: var(--hw-well) !important;
}

/* lijstregels */
html body:not(#_hw) .fb-ov-note {
  background: linear-gradient(180deg, #fbfbf9, #efefeb) !important;
  border: 1px solid #c1c4c7 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb !important;
  color: var(--hw-ink) !important;
}
html body:not(#_hw) .fb-ov-empty,
html body:not(#_hw) .feedback-empty,
html body:not(#_hw) .fb-ov-note-meta,
html body:not(#_hw) .fb-ov-note-when { color: var(--hw-ink-mid) !important; }
html body:not(#_hw) .profile-menu-item { color: var(--hw-ink) !important; }
html body:not(#_hw) .profile-menu-item:hover { background: rgba(0,0,0,.04) !important; }
html body:not(#_hw) .profile-menu-item.danger { color: var(--hw-red) !important; }
html body:not(#_hw) .fb-ov-footer {
  background: var(--hw-brush), linear-gradient(180deg, #e9ebed, #d3d7da) !important;
  border-top: 1px solid #aeb3b7 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

/* ==========================================================================
   Startscherm: apparaat in stand-by
   ========================================================================== */
html body:not(#_hw) .empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px !important;
  background: transparent !important;
}
html body:not(#_hw) .empty-state::before,
html body:not(#_hw) .empty-state::after { display: none !important; }

html body:not(#_hw) .standby-unit {
  width: 100%;
  max-width: 480px;
  padding: 34px 40px 38px;
  text-align: center;
  border-radius: 12px;
  background:
    var(--hw-screw) 14px 14px / 13px 13px no-repeat,
    var(--hw-screw) calc(100% - 14px) 14px / 13px 13px no-repeat,
    var(--hw-screw) 14px calc(100% - 14px) / 13px 13px no-repeat,
    var(--hw-screw) calc(100% - 14px) calc(100% - 14px) / 13px 13px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 40%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 0 rgba(0,0,0,.06),
    0 1px 0 #9fa3a7,
    0 2px 0 #b3b7bb,
    0 16px 30px -10px rgba(30,34,38,.35),
    0 40px 70px -30px rgba(30,34,38,.35);
}

html body:not(#_hw) .standby-display {
  position: relative;
  height: 112px;
  margin: 8px 6px 18px;
  border-radius: 7px;
  overflow: hidden;
  background:
    linear-gradient(170deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, #17231c 0%, var(--hw-glass) 80%);
  border: 1px solid #070908;
  box-shadow: var(--hw-glass-bezel);
}
html body:not(#_hw) .standby-readout {
  position: absolute;
  inset: 10px 12px auto 12px;
  display: flex;
  justify-content: space-between;
  font: 500 10px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(61,255,138,.75);
  text-shadow: 0 0 5px rgba(61,255,138,.45);
}
html body:not(#_hw) .standby-lufs { color: rgba(61,255,138,.4); }
/* vlakke lijn met een zacht licht dat eroverheen scant */
html body:not(#_hw) .standby-trace {
  position: absolute;
  left: 12px; right: 12px; top: 62px;
  height: 1px;
  background: rgba(61,255,138,.35);
  box-shadow: 0 0 6px rgba(61,255,138,.35);
}
html body:not(#_hw) .standby-trace::after {
  content: '';
  position: absolute;
  top: -14px; bottom: -14px;
  width: 90px;
  left: -90px;
  background: radial-gradient(ellipse at center, rgba(61,255,138,.55) 0, rgba(61,255,138,.12) 35%, transparent 70%);
  animation: hwScan 3.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes hwScan {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(480px)); opacity: 0; }
}

html body:not(#_hw) .standby-channels {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 26px;
  font: 400 10px/1 'DM Mono', monospace;
  letter-spacing: .08em;
  color: var(--hw-ink-mid);
}
html body:not(#_hw) .standby-ch { display: inline-flex; align-items: center; gap: 7px; }
html body:not(#_hw) .standby-ch b { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--hw-ink); }
html body:not(#_hw) .standby-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}

html body:not(#_hw) .empty-state .empty-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -.01em !important;
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  margin: 0 0 8px !important;
}
html body:not(#_hw) .empty-state .empty-sub {
  max-width: 34ch;
  margin: 0 auto 30px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--hw-ink-mid) !important;
  -webkit-text-fill-color: currentColor !important;
}

html body:not(#_hw) .btn-open-engineer {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  height: 46px !important;
  min-width: 220px;
  padding: 0 28px !important;
  border-radius: 7px !important;
  font: 700 13px/1 'Syne', sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #fff !important;
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  border: 1px solid #0b0c0d !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 3px 0 #101214,
    0 4px 2px rgba(0,0,0,.16),
    var(--hw-slot) !important;
  animation: none !important;
  transform: none;
}
html body:not(#_hw) .btn-open-engineer:hover {
  background: linear-gradient(180deg, #555a61 0%, #383d42 55%, #2a2d31 100%) !important;
}
html body:not(#_hw) .btn-open-engineer:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), var(--hw-slot) !important;
}
@media (max-width: 600px) {
  html body:not(#_hw) .standby-unit { padding: 28px 22px 30px; }
  html body:not(#_hw) .btn-open-engineer { width: 100% !important; min-width: 0; }
}

/* ==========================================================================
   VU-meter: kleuren liggen vast op de schaal, met piek-indicator
   ========================================================================== */
html body:not(#_hw) .lufs-bar-fill {
  width: 0%;
  transition: none !important;
  animation: none !important;
  background: linear-gradient(90deg, #20ff7a 0, #20ff7a 68%, #ffd23a 80%, #ff8a1f 90%, #ff3b30 100%) 0 0 / var(--hw-meter-w, 90px) 100% no-repeat !important;
  box-shadow: none !important;
}
html body:not(#_hw) .lufs-bar-bg::after {
  content: '';
  position: absolute;
  top: 1px; bottom: 1px;
  left: calc(var(--hw-peak, 0%) - 3px);
  width: 3px;
  border-radius: 1px;
  background: #eafff1;
  box-shadow: 0 0 5px rgba(61,255,138,.9);
  opacity: 0;
  transition: opacity .3s ease;
}
html body:not(#_hw) .lufs-bar-bg.has-peak::after { opacity: 1; }

/* schroefzones vrijhouden: inhoud komt nooit onder een schroef */
html body:not(#_hw) .track-card {
  padding-left: max(28px, 2.4vw) !important;
  padding-right: max(28px, 2.4vw) !important;
  padding-top: 22px !important;
  padding-bottom: 22px !important;
}
html body:not(#_hw) .ab-switcher-bar {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
html body:not(#_hw) .feature-card,
html body:not(#_hw) .mock-track {
  padding-left: max(26px, var(--hw-pad, 0px)) !important;
  padding-right: max(26px, var(--hw-pad, 0px)) !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}
html body:not(#_hw) .project-card { padding-bottom: 24px !important; }

/* ==========================================================================
   Beweging: rustig, fysiek, zonder gestuiter of pulserende gloed
   ========================================================================== */
:root {
  --hw-ease-out: cubic-bezier(.22, 1, .36, 1);
  --hw-ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* oude pulserende en stuiterende animaties neutraliseren */
@keyframes abBtnPulse   { from { opacity: 1; } to { opacity: 1; } }
@keyframes buttonPulse  { from { opacity: 1; } to { opacity: 1; } }
@keyframes loadPulse    { from { opacity: 1; } to { opacity: 1; } }
@keyframes pulse-ring   { from { opacity: 0; } to { opacity: 0; } }
@keyframes errorPulse   { from { opacity: 1; } to { opacity: 1; } }
html body:not(#_hw) .blind-mode-btn.active,
html body:not(#_hw) .ab-switcher-bar .blind-mode-btn.active,
html body:not(#_hw) .btn-open-engineer,
html body:not(#_hw) .feedback-btn.selected::after {
  animation: none !important;
}
html body:not(#_hw) .track-v3.is-active,
html body:not(#_hw) .version-pill.active {
  box-shadow: var(--hw-slot-key-down) !important;
}

/* panelen en dialogen: zacht invliegen */
@keyframes hwRise {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes hwRiseCentered {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hwDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hwFade { from { opacity: 0; } to { opacity: 1; } }

@keyframes fbPopIn        { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fbOvSlideIn    { from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.985); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes popIn          { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes profileSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes toastIn        { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

html body:not(#_hw) .fb-popup,
html body:not(#_hw) .fb-overview,
html body:not(#_hw) .approve-dialog,
html body:not(#_hw) .marker-popup,
html body:not(#_hw) .profile-dropdown.open {
  animation-duration: .38s !important;
  animation-timing-function: var(--hw-ease-out) !important;
}
html body:not(#_hw) .fb-popup-overlay,
html body:not(#_hw) .fb-overview-overlay,
html body:not(#_hw) .approve-dialog-overlay {
  animation-duration: .3s !important;
  animation-timing-function: ease-out !important;
  backdrop-filter: blur(4px) saturate(.9);
}
html body:not(#_hw) .toast,
html body:not(#_hw) #_toastEl {
  animation-timing-function: var(--hw-ease-out) !important;
}

/* uitschuifpanelen en modals die met transitions werken */
html body:not(#_hw) .settings-panel,
html body:not(#_hw) .feedback-panel,
html body:not(#_hw) .profile-panel,
html body:not(#_hw) .engineer-panel,
html body:not(#_hw) .engineer-card,
html body:not(#_hw) .load-modal,
html body:not(#_hw) .load-modal-card,
html body:not(#_hw) .ctx-menu {
  transition-duration: .42s !important;
  transition-timing-function: var(--hw-ease-out) !important;
}
html body:not(#_hw) #sharePanel[style*="block"],
html body:not(#_hw) #sharePanel[style*="flex"] {
  animation: hwRiseCentered .38s var(--hw-ease-out) both;
}

/* toetsen: fysieke slag, LED's gaan zacht aan */
html body:not(#_hw) button,
html body:not(#_hw) .upload-file-btn,
html body:not(#_hw) .dash-btn {
  transition:
    transform .07s var(--hw-ease-out),
    box-shadow .07s var(--hw-ease-out),
    background .18s ease,
    color .18s ease !important;
}
html body:not(#_hw) .phone-btn::after,
html body:not(#_hw) .blind-mode-btn::after,
html body:not(#_hw) .loop-btn::after,
html body:not(#_hw) .lm-btn::after,
html body:not(#_hw) .ab-pill::after,
html body:not(#_hw) .fb-ov-filter::after {
  transition: background .25s ease, box-shadow .35s ease;
}
html body:not(#_hw) .play-btn {
  transition: transform .09s var(--hw-ease-out), box-shadow .09s var(--hw-ease-out) !important;
}
html body:not(#_hw) .project-card {
  transition: transform .45s var(--hw-ease-out), box-shadow .45s var(--hw-ease-out) !important;
}
html body:not(#_hw) .feature-card {
  transition: transform .45s var(--hw-ease-out), box-shadow .45s var(--hw-ease-out) !important;
}

/* power-on bij het laden: platen komen op, displays gaan aan */
@keyframes hwPlateIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hwDisplayOn {
  0%   { filter: brightness(.25) saturate(.4); }
  40%  { filter: brightness(1.35) saturate(1.1); }
  55%  { filter: brightness(.85); }
  100% { filter: none; }
}
html body:not(#_hw) .standby-unit,
html body:not(#_hw) .track-card,
html body:not(#_hw) .ab-switcher-bar {
  animation: hwPlateIn .7s var(--hw-ease-out) both;
}
html body:not(#_hw) .ab-switcher-bar { animation-delay: .08s; }
html body:not(#_hw) .track-card.track-b { animation-delay: .16s; }
html body:not(#_hw) .standby-display,
html body:not(#_hw) .waveform-container,
html body:not(#_hw) .lufs-val,
html body:not(#_hw) .lufs-peak-badge,
html body:not(#_hw) .time-display,
html body:not(#_hw) .stat {
  animation: hwDisplayOn .9s ease-out .25s both;
}

/* landingspagina: onthulling rustiger */
html body:not(#_hw) .reveal {
  transition-duration: .9s !important;
  transition-timing-function: var(--hw-ease-out) !important;
}

@media (prefers-reduced-motion: reduce) {
  html body:not(#_hw) *,
  html body:not(#_hw) *::before,
  html body:not(#_hw) *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}

/* ==========================================================================
   Echte sleufgroepen in de bedieningsbalk (zelfde opbouw als DEMO/MIX)
   ========================================================================== */
html body:not(#_hw) .ab-pills,
html body:not(#_hw) .listen-mode-pills,
html body:not(#_hw) .hw-slot-group {
  display: inline-flex !important;
  align-items: stretch;
  gap: 3px !important;
  padding: 3px 3px 5px !important;
  background: linear-gradient(180deg, #b9bdc1, #caced2) !important;
  border: 1px solid #9da2a7 !important;
  border-radius: 8px !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .sim-btns-row {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* toetsen binnen een sleuf: geen eigen uitsparing, geen marges, geen scheidingslijnen */
html body:not(#_hw) .hw-slot-group > button,
html body:not(#_hw) .ab-pills > button,
html body:not(#_hw) .listen-mode-pills > button {
  margin: 0 !important;
  border-radius: 5px !important;
  box-shadow: var(--hw-key-shadow) !important;
}
html body:not(#_hw) .hw-slot-group > button:active,
html body:not(#_hw) .hw-slot-group > button.active,
html body:not(#_hw) .ab-pills > button:active,
html body:not(#_hw) .ab-pills > button.active,
html body:not(#_hw) .listen-mode-pills > button:active,
html body:not(#_hw) .listen-mode-pills > button.active {
  box-shadow: var(--hw-key-shadow-down) !important;
}
html body:not(#_hw) .hw-slot-group > button::before,
html body:not(#_hw) .sim-btns-row > button::before,
html body:not(#_hw) .ab-pill-divider,
html body:not(#_hw) .lm-divider {
  display: none !important;
}
html body:not(#_hw) .hw-slot-group > button {
  border-left: 1px solid #a7abaf !important;
  border-right: 1px solid #a7abaf !important;
}

/* ==========================================================================
   A = violet, B = goud: labels en statusdetails
   ========================================================================== */
:root {
  --hw-a-ink: #5640D8;
  --hw-a-glow: #8f76ff;
  --hw-b-ink: #A97627;
  --hw-b-glow: #ffbe3d;
}
html body:not(#_hw) #trackLetterA,
html body:not(#_hw) .track-card.track-a .track-letter {
  color: var(--hw-a-ink) !important;
  -webkit-text-fill-color: var(--hw-a-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
html body:not(#_hw) #trackLetterB,
html body:not(#_hw) .track-card.track-b .track-letter {
  color: var(--hw-b-ink) !important;
  -webkit-text-fill-color: var(--hw-b-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
html body:not(#_hw) .profile-status {
  background: radial-gradient(circle at 35% 35%, #d8ffe6, #3ddc84 55%, #16804a) !important;
}

/* witte LED leesbaar maken op een lichte toets: donker kapje eromheen */
html body:not(#_hw) .phone-btn.active::after,
html body:not(#_hw) .blind-mode-btn.active::after,
html body:not(#_hw) .loop-btn.active::after,
html body:not(#_hw) .lm-btn.active::after,
html body:not(#_hw) .fb-ov-filter.active:not(.f-a):not(.f-b)::after {
  background: radial-gradient(circle at 40% 38%, #ffffff 0 35%, #fff1c9 60%, #e9cf93 100%) !important;
  box-shadow:
    0 0 0 1px rgba(60,50,30,.45),
    0 0 4px 1px rgba(255,236,180,.95),
    0 0 12px 2px rgba(255,214,120,.55) !important;
}

/* ==========================================================================
   Golfvorm: verlichte balkjes, scanner met nagloed die op het geluid reageert
   ========================================================================== */
html body:not(#_hw) .waveform-container .waveform-progress {
  overflow: hidden !important;
  background: none !important;
  z-index: 1;
}
html body:not(#_hw) .waveform-progress canvas.wf-lit {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 3px var(--wf-glow, rgba(143,118,255,.55)));
}
/* nagloed achter de afspeelkop */
html body:not(#_hw) .waveform-container .waveform-progress::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 90px;
  background: linear-gradient(90deg, transparent, var(--wf-trail, rgba(143,118,255,.22)));
  opacity: .7;
  pointer-events: none;
}
html body:not(#_hw) .track-a .waveform-container { --wf-glow: rgba(143,118,255,.6); --wf-trail: rgba(143,118,255,.24); --wf-head: #e6deff; --wf-bloom: rgba(143,118,255,.75); }
html body:not(#_hw) .track-b .waveform-container { --wf-glow: rgba(255,190,61,.55); --wf-trail: rgba(255,190,61,.22); --wf-head: #fff0cc; --wf-bloom: rgba(255,190,61,.7); }

/* de afspeelkop zelf */
html body:not(#_hw) .track-card .waveform-cursor {
  width: 2px !important;
  margin-left: -1px;
  z-index: 3;
  background: linear-gradient(180deg, transparent 0, var(--wf-head, #fff) 18%, #fff 50%, var(--wf-head, #fff) 82%, transparent 100%) !important;
  box-shadow: 0 0 6px 1px var(--wf-bloom, rgba(255,255,255,.7)) !important;
  border: 0 !important;
  pointer-events: none;
}
/* bloei rond de kop, groeit mee met het audioniveau */
html body:not(#_hw) .track-card .waveform-cursor::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 120%;
  transform: translate(-50%, -50%) scale(calc(.55 + var(--hw-level, 0) * .75), calc(.6 + var(--hw-level, 0) * .5));
  background: radial-gradient(ellipse at center, var(--wf-bloom, rgba(255,255,255,.6)) 0, transparent 68%);
  opacity: calc(.25 + var(--hw-level, 0) * .75);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: transform .06s linear, opacity .06s linear;
}
/* kleine markeringen boven en onder, als op een bandmachine */
html body:not(#_hw) .track-card .waveform-cursor::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  background:
    linear-gradient(135deg, var(--wf-head, #fff) 50%, transparent 50%) 0 0 / 4px 4px no-repeat,
    linear-gradient(-135deg, var(--wf-head, #fff) 50%, transparent 50%) 4px 0 / 4px 4px no-repeat,
    linear-gradient(45deg, var(--wf-head, #fff) 50%, transparent 50%) 0 100% / 4px 4px no-repeat,
    linear-gradient(-45deg, var(--wf-head, #fff) 50%, transparent 50%) 4px 100% / 4px 4px no-repeat;
  display: block !important;
  pointer-events: none;
}

/* afspeelicoon ingegraveerd in de aluminium knop */
html body:not(#_hw) .track-card.track-a .play-btn svg,
html body:not(#_hw) .track-card.track-a .play-btn svg * {
  fill: #4a3a9c !important;
  color: #4a3a9c !important;
  stroke: none !important;
}
html body:not(#_hw) .track-card.track-b .play-btn svg,
html body:not(#_hw) .track-card.track-b .play-btn svg * {
  fill: #8a5d0c !important;
  color: #8a5d0c !important;
  stroke: none !important;
}
html body:not(#_hw) .track-card .play-btn svg {
  opacity: .88;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.95))
    drop-shadow(0 -1px 0 rgba(0,0,0,.45))
    drop-shadow(1px 0 0 rgba(255,255,255,.35)) !important;
}

/* warmwitte LED: helder gloeiend in plaats van een hol ringetje */
html body:not(#_hw) .phone-btn.active::after,
html body:not(#_hw) .blind-mode-btn.active::after,
html body:not(#_hw) .loop-btn.active::after,
html body:not(#_hw) .lm-btn.active::after,
html body:not(#_hw) .fb-ov-filter.active:not(.f-a):not(.f-b)::after {
  background: radial-gradient(circle at 45% 42%, #ffffff 0 45%, #fff3d2 75%, #f3d993 100%) !important;
  box-shadow:
    0 0 0 .5px rgba(150,110,40,.35),
    0 0 3px 1px rgba(255,244,210,1),
    0 0 9px 3px rgba(255,210,120,.65),
    0 0 16px 4px rgba(255,200,100,.25) !important;
}

/* smalle schermen: sleuven lopen door op een nieuwe regel in plaats van afgesneden te worden */
@media (max-width: 760px) {
  html body:not(#_hw) .sim-btns-row {
    overflow: visible !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    padding: 4px 0 !important;
    -webkit-mask: none !important;
            mask: none !important;
  }
  html body:not(#_hw) .hw-slot-group {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }
}

/* ruimte voor de sleufrand van toetsen onderin, weg van de schroeven */
html body:not(#_hw) .track-card { padding-bottom: 32px !important; padding-top: 26px !important; }

/* topbar: toetsen optisch gecentreerd met ruimte rond de sleuven */
html body:not(#_hw) .topbar {
  height: 60px !important;
  min-height: 60px !important;
}
html body:not(#_hw) .topbar-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: -2px;           /* compenseert de toetsrand onder de knoppen */
}
html body:not(#_hw) .topbar-actions > .profile-btn,
html body:not(#_hw) .topbar-actions > .settings-btn,
html body:not(#_hw) .topbar-actions > .btn-icon {
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
}
html body:not(#_hw) .topbar-actions > .dash-btn {
  height: 34px !important;
  margin: 0 6px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ==========================================================================
   Losse toetsen: strakke dunne uitsparing in plaats van een dikke ring
   ========================================================================== */
:root {
  /* geen lijntje rondom: alleen de schaduw die een echte toets op het paneel werpt */
  --hw-slot:
    0 1px 1px rgba(20,24,28,.10),
    0 4px 7px -3px rgba(20,24,28,.26),
    0 9px 16px -10px rgba(20,24,28,.30);
}

/* ==========================================================================
   Feedbackoverzicht
   ========================================================================== */
/* tellers: ingegraveerd in één verzonken strook */
html body:not(#_hw) .fb-ov-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  margin: 14px 20px 6px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  border: 1px solid #bfc2c5 !important;
  background: linear-gradient(180deg, #e0e1dd, #ebebe7) !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .fb-ov-stat {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 8px 10px !important;
  text-align: center;
}
html body:not(#_hw) .fb-ov-stat + .fb-ov-stat {
  box-shadow: inset 1px 0 0 rgba(0,0,0,.12), inset 2px 0 0 rgba(255,255,255,.7) !important;
}
html body:not(#_hw) .fb-ov-stat-num {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  color: #3a3d41 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.18) !important;
}
html body:not(#_hw) .fb-ov-stat-num.c-a { color: var(--hw-a-ink) !important; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.15) !important; }
html body:not(#_hw) .fb-ov-stat-num.c-b { color: var(--hw-b-ink) !important; text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 -1px 0 rgba(0,0,0,.15) !important; }
html body:not(#_hw) .fb-ov-stat-label {
  color: var(--hw-ink-mid) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}

/* filters: gecentreerd in één sleuf */
html body:not(#_hw) .fb-ov-filters {
  display: flex !important;
  justify-content: center !important;
  padding: 12px 20px !important;
  gap: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body:not(#_hw) .fb-ov-filters .hw-slot-group > .fb-ov-filter {
  min-width: 76px;
  justify-content: center;
  box-shadow: var(--hw-key-shadow) !important;
}
html body:not(#_hw) .fb-ov-filters .hw-slot-group > .fb-ov-filter.active,
html body:not(#_hw) .fb-ov-filters .hw-slot-group > .fb-ov-filter:active {
  box-shadow: var(--hw-key-shadow-down) !important;
}
html body:not(#_hw) .fb-ov-filter.f-a.active::after {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2) !important;
  box-shadow: 0 0 4px #8f76ff, 0 0 9px rgba(143,118,255,.6) !important;
}
html body:not(#_hw) .fb-ov-filter.f-b.active::after {
  background: radial-gradient(circle at 35% 35%, #fff4d6, #ffbe3d 55%, #a86f00) !important;
  box-shadow: 0 0 4px #ffbe3d, 0 0 9px rgba(255,190,61,.6) !important;
}

/* "Create note": gewone lichte toets */
html body:not(#_hw) #fbOvCreateToggle {
  border-style: solid !important;
  color: var(--hw-ink) !important;
  font-size: 11px !important;
}

/* voettekst: Copy en Clear samen in een sleuf, alles verticaal gecentreerd */
html body:not(#_hw) .fb-ov-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 20px !important;
}
html body:not(#_hw) .fb-ov-footer-left {
  display: inline-flex !important;
  align-items: stretch;
  gap: 3px !important;
  padding: 3px 3px 5px !important;
  background: linear-gradient(180deg, #b9bdc1, #caced2) !important;
  border: 1px solid #9da2a7 !important;
  border-radius: 8px !important;
  box-shadow: var(--hw-well) !important;
}
html body:not(#_hw) .fb-ov-footer-left > .fb-ov-btn {
  margin: 0 !important;
  box-shadow: var(--hw-key-shadow) !important;
}
html body:not(#_hw) .fb-ov-footer-left > .fb-ov-btn:active {
  box-shadow: var(--hw-key-shadow-down) !important;
}
html body:not(#_hw) .fb-ov-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px;
  height: 32px !important;
  padding: 0 14px !important;
}
html body:not(#_hw) .fb-ov-stat-num {
  font-family: 'DM Mono', monospace !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  letter-spacing: -.02em !important;
}
html body:not(#_hw) .ab-switcher-bar button,
html body:not(#_hw) .ab-switcher-bar button.active { animation: none !important; }

/* ==========================================================================
   Kopregel per track: "DEMO: titel", links uitgelijnd, titel bewerkbaar
   ========================================================================== */
html body:not(#_hw) .track-label-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
html body:not(#_hw) .track-label-row .track-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body:not(#_hw) .track-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  margin-bottom: 2px;
}
html body:not(#_hw) .track-heading .track-letter {
  flex: none;
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  letter-spacing: .02em !important;
  cursor: pointer;
  transform: none !important;
}
html body:not(#_hw) .track-heading .track-colon { margin-left: 1px; }
html body:not(#_hw) .track-heading .track-title {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  cursor: text;
  border-radius: 4px;
  padding: 0 4px;
  margin-left: -4px;
  transition: background .15s ease;
}
html body:not(#_hw) .track-heading .track-title:hover:not(.is-editing) {
  background: rgba(0,0,0,.045);
}
html body:not(#_hw) .track-heading .track-title.is-editing {
  overflow: visible;
  flex: 1 1 auto;
  padding: 0;
  margin-left: 0;
}
html body:not(#_hw) .track-title-input {
  width: 100%;
  min-width: 240px;
  font: 700 18px/1.2 'Syne', sans-serif;
  color: var(--hw-ink);
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid #b0b4b8;
  background: linear-gradient(180deg, #e3e4e1, #efefec);
  box-shadow: var(--hw-well);
  outline: none;
}
html body:not(#_hw) .track-title-edit {
  flex: none;
  align-self: center;
  width: 24px;
  height: 24px;
  padding: 5px;
  border: 0;
  border-radius: 5px;
  background: none !important;
  box-shadow: none !important;
  color: var(--hw-ink-dim) !important;
  cursor: pointer;
}
html body:not(#_hw) .track-title-edit:hover { color: var(--hw-ink) !important; background: rgba(0,0,0,.05) !important; }
html body:not(#_hw) .track-title-edit svg { width: 14px; height: 14px; display: block; }
html body:not(#_hw) .track-heading .edit-icon { display: none; }
html body:not(#_hw) .track-label-row .track-subtitle { text-align: left !important; margin-bottom: 8px !important; }
html body:not(#_hw) .track-label-row .lufs-strip { margin-left: 0 !important; }

/* ==========================================================================
   Alles in beeld op een laptopscherm: compactere verticale maatvoering
   ========================================================================== */
@media (min-width: 761px) {
  html body:not(#_hw) #mainContent {
    padding-top: clamp(10px, 2vh, 22px) !important;
    padding-bottom: clamp(10px, 2vh, 22px) !important;
  }
  html body:not(#_hw) #tracksArea { gap: clamp(8px, 1.6vh, 16px) !important; }
  html body:not(#_hw) #tracksArea .track-card,
  html body:not(#_hw) #tracksArea > .ab-switcher-bar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  html body:not(#_hw) .track-card {
    padding-top: clamp(16px, 2.6vh, 24px) !important;
    padding-bottom: clamp(18px, 3vh, 28px) !important;
  }
  html body:not(#_hw) .track-card .track-label-row { margin-bottom: clamp(6px, 1.2vh, 12px) !important; }
  html body:not(#_hw) .track-card .track-subtitle { margin-bottom: 6px !important; }
  html body:not(#_hw) .track-card .waveform-container { height: clamp(44px, 7.5vh, 76px) !important; }
  html body:not(#_hw) .track-card .track-controls { padding-top: clamp(8px, 1.4vh, 14px) !important; }
  html body:not(#_hw) .track-card .play-btn { width: 50px !important; height: 50px !important; }
}
html body:not(#_hw) .track-heading .track-letter { cursor: default; }
html body:not(#_hw) .track-heading .track-title.is-editing { flex: 1 1 auto; max-width: 560px; }
html body:not(#_hw) .track-heading .track-title.is-editing + .track-title-edit { display: none; }
@media (min-width: 761px) and (max-height: 740px) {
  html body:not(#_hw) .track-card .waveform-container { height: 40px !important; }
  html body:not(#_hw) .track-card { padding-top: 14px !important; padding-bottom: 18px !important; }
  html body:not(#_hw) .track-card .play-btn { width: 44px !important; height: 44px !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) .track-heading { flex-wrap: wrap; row-gap: 0; }
  html body:not(#_hw) .track-heading .track-title {
    white-space: normal;
    overflow: visible;
    font-size: 17px !important;
    flex-basis: calc(100% - 34px);
    margin-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 760px) {
  html body:not(#_hw) .track-heading .track-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}

/* ==========================================================================
   Trackkop: rustiger hiërarchie en ritme
   ========================================================================== */
html body:not(#_hw) .track-heading {
  align-items: baseline;
  gap: 9px;
  margin: 0 0 5px !important;
}
html body:not(#_hw) .track-heading .track-letter {
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  position: relative;
  top: -1px;                 /* optisch op de basislijn van de titel */
}
html body:not(#_hw) .track-heading .track-colon { margin-left: 0; opacity: .55; }
html body:not(#_hw) .track-heading .track-title {
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  line-height: 1.15 !important;
}
html body:not(#_hw) .track-heading .track-title-edit { align-self: center; margin-left: -2px; }
html body:not(#_hw) .track-label-row .track-subtitle {
  font-size: 9.5px !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
  color: var(--hw-ink-dim) !important;
  -webkit-text-fill-color: var(--hw-ink-dim) !important;
  margin: 0 0 12px 1px !important;
}
html body:not(#_hw) .track-label-row .track-status { margin-top: 1px !important; }
@media (min-width: 761px) and (max-height: 740px) {
  html body:not(#_hw) .track-label-row .track-subtitle { margin-bottom: 8px !important; }
}

/* ==========================================================================
   De track die niet speelt zakt terug: donkerder en iets vlakker
   ========================================================================== */
html body:not(#_hw) #tracksArea .track-card {
  transition: filter .45s var(--hw-ease-out, ease), box-shadow .45s ease !important;
}
html body:not(#_hw) #tracksArea .track-card:not(.is-active) {
  filter: brightness(.8) saturate(.75) contrast(.96);
}
html body:not(#_hw) #tracksArea .track-card:not(.is-active):hover {
  filter: brightness(.88) saturate(.85);
}

/* ==========================================================================
   PIN-scherm voor klanten
   ========================================================================== */
html body:not(#_hw) .pin-overlay {
  position: fixed; inset: 0;
  align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(60,66,72,.35) !important;
  backdrop-filter: blur(6px) saturate(.9);
}
html body:not(#_hw) .pin-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 32px 30px !important;
  border-radius: 12px !important;
  text-align: center;
  background:
    var(--hw-screw) 12px 12px / 12px 12px no-repeat,
    var(--hw-screw) calc(100% - 12px) 12px / 12px 12px no-repeat,
    var(--hw-screw) 12px calc(100% - 12px) / 12px 12px no-repeat,
    var(--hw-screw) calc(100% - 12px) calc(100% - 12px) / 12px 12px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 45%, var(--hw-plate-lo) 100%) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 30px 70px -20px rgba(20,24,28,.5) !important;
  animation: hwRise .45s var(--hw-ease-out) both;
}
html body:not(#_hw) .pin-title {
  font: 700 20px/1.2 'Syne', sans-serif !important;
  color: var(--hw-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
html body:not(#_hw) .pin-sub {
  font: 400 12px/1.55 'DM Mono', monospace !important;
  color: var(--hw-ink-mid) !important;
  margin-bottom: 4px;
}
html body:not(#_hw) #pinGateInput {
  width: 100%;
  padding: 14px !important;
  font: 500 20px/1 'DM Mono', monospace !important;
  letter-spacing: .4em !important;
  text-align: center;
  color: var(--hw-phosphor) !important;
  text-shadow: 0 0 6px rgba(61,255,138,.5);
  border-radius: 6px !important;
  border: 1px solid #070908 !important;
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(ellipse at 50% 40%, #16201a 0%, var(--hw-glass) 80%) !important;
  box-shadow: var(--hw-glass-bezel) !important;
  outline: none !important;
}
html body:not(#_hw) #pinGateInput::placeholder { color: rgba(61,255,138,.3); letter-spacing: .12em; font-size: 13px; }
html body:not(#_hw) #pinGateInput.is-wrong { color: #ff4a3a !important; animation: hwShake .35s ease; }
@keyframes hwShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
html body:not(#_hw) .pin-error {
  font: 400 11px/1 'DM Mono', monospace;
  color: var(--hw-red) !important;
  opacity: 0; height: 0; transition: opacity .2s ease;
}
html body:not(#_hw) .pin-error.show { opacity: 1; height: auto; }
html body:not(#_hw) #pinGateSubmit {
  height: 46px;
  border-radius: 7px !important;
  font: 700 13px/1 'Syne', sans-serif !important;
  color: #fff !important;
  cursor: pointer;
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  border: 1px solid #0b0c0d !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 0 #101214, 0 4px 2px rgba(0,0,0,.16), var(--hw-slot) !important;
  transition: transform .07s var(--hw-ease-out), box-shadow .07s var(--hw-ease-out) !important;
}
html body:not(#_hw) #pinGateSubmit:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3), var(--hw-slot) !important;
}

/* klantmodus: geen engineer-knoppen */
html body.is-listener:not(#_hw) .dash-btn,
html body.is-listener:not(#_hw) #profileBtn,
html body.is-listener:not(#_hw) #engineerBtn,
html body.is-listener:not(#_hw) #shareBtn,
html body.is-listener:not(#_hw) .replace-audio-btn,
html body.is-listener:not(#_hw) #multiVersionToggle,
html body.is-listener:not(#_hw) .engineer-only,
html body.is-listener:not(#_hw) .engineer-only-block {
  display: none !important;
}

/* ==========================================================================
   Prestaties: zelfde uiterlijk, veel minder herteken-werk
   ========================================================================== */
/* 1. achtergrond niet meer 'fixed' (dat hertekent het hele scherm bij elke beweging) */
html:has(> body:not(#_hw)),
html body:not(#_hw),
html body:not(#_hw) .app,
html body:not(#_hw) .main,
html body:not(#_hw) .tracks-area {
  background-attachment: scroll !important;
}
html body:not(#_hw) .main,
html body:not(#_hw) .tracks-area { background: transparent !important; }

/* 2. inactieve kaart dimmen met een lichte laag in plaats van een filter */
html body:not(#_hw) #tracksArea .track-card,
html body:not(#_hw) #tracksArea .track-card:not(.is-active),
html body:not(#_hw) #tracksArea .track-card:not(.is-active):hover {
  filter: none !important;
}
html body:not(#_hw) #tracksArea .track-card { position: relative; }
html body:not(#_hw) #tracksArea .track-card::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  margin: 0 !important; transform: none !important; box-shadow: none !important; border: 0 !important;
  border-radius: inherit !important;
  background: rgba(58, 62, 68, .2) !important;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity .45s var(--hw-ease-out, ease);
  z-index: 5;
}
html body:not(#_hw) #tracksArea .track-card:not(.is-active)::after { opacity: 1; }
html body:not(#_hw) #tracksArea .track-card:not(.is-active):hover::after { opacity: .55; }

/* 3. gloed rond de afspeelkop zonder overvloeimodus, op eigen laag */
html body:not(#_hw) .track-card .waveform-cursor::before {
  mix-blend-mode: normal !important;
  will-change: transform, opacity;
}
html body:not(#_hw) .track-card .waveform-cursor { will-change: left; }

/* 4. LUFS-meter via een masker in plaats van breedte (geen layout per frame) */
html body:not(#_hw) .lufs-bar-fill {
  width: 100% !important;
  clip-path: inset(0 calc(100% - var(--hw-fill, 0%)) 0 0);
  will-change: clip-path;
}

/* ==========================================================================
   Achtergrond: echte geborstelde textuur (geen fijne lijnverlopen, want die
   geven moiré-banden in Safari) op één vaste laag die niet mee hertekent.
   ========================================================================== */
:root {
  --hw-brush: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='b' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.0025 0.55' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .38 -.14'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>") 0 0 / 600px 300px repeat;
}
html:has(> body:not(#_hw)) {
  background: var(--hw-chassis) !important;
}
html:has(> body:not(#_hw))::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    var(--hw-brush),
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--hw-chassis-hi) 0%, var(--hw-chassis) 50%, var(--hw-chassis-lo) 100%);
  transform: translateZ(0);
}
html body:not(#_hw),
html body:not(#_hw) .app,
html body:not(#_hw) .main,
html body:not(#_hw) .tracks-area,
html body:not(#_hw) #mainContent,
html body:not(#_hw) #tracksArea,
html body:not(#_hw) .empty-state {
  background: transparent !important;
}

/* ==========================================================================
   Dashboard: tellers, projectkop, zoekveld en lege staat
   ========================================================================== */
html body:not(#_hw) .welcome { align-items: center !important; margin-bottom: 26px !important; }

/* tellers: gelijke displays met duidelijke cijfers */
html body:not(#_hw) .stats-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-bottom: 40px !important;
}
html body:not(#_hw) .stats-row .stat {
  min-width: 132px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px 11px !important;
}
html body:not(#_hw) .stats-row .stat-val {
  font-family: 'DM Mono', monospace !important;
  font-weight: 500 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
}
html body:not(#_hw) .stats-row .stat-val.g {
  color: var(--hw-phosphor) !important;
  text-shadow: 0 0 5px rgba(61,255,138,.55), 0 0 12px rgba(61,255,138,.2) !important;
}
html body:not(#_hw) .stats-row .stat-label {
  font: 400 9px/1 'DM Mono', monospace !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: #8f979c !important;
}

/* projectkop */
html body:not(#_hw) .section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-bottom: 14px !important;
  margin-bottom: 22px !important;
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 2px 0 rgba(255,255,255,.7) !important;
}
html body:not(#_hw) .section-title-text {
  font: 700 20px/1 'Syne', sans-serif !important;
  color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
html body:not(#_hw) input.search-box {
  width: 260px !important;
  max-width: 55vw;
  height: 36px !important;
  padding: 0 12px 0 34px !important;
  border-radius: 7px !important;
  font: 400 12px/1 'DM Mono', monospace !important;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236f757b' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>") 12px 50% / 14px 14px no-repeat,
    linear-gradient(180deg, #e3e4e1, #efefec) !important;
  outline: none !important;
}
html body:not(#_hw) .search-box::placeholder { color: var(--hw-ink-dim); }
html body:not(#_hw) input.search-box:focus { border-color: #6f757b !important; }

/* lege staat: apparaat in stand-by, net als in de app */
html body:not(#_hw) .projects-grid .empty-state {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 28px 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html body:not(#_hw) .empty-unit {
  width: 100%;
  max-width: 440px;
  padding: 30px 36px 34px;
  text-align: center;
  border-radius: 12px;
  background:
    var(--hw-screw) 14px 14px / 12px 12px no-repeat,
    var(--hw-screw) calc(100% - 14px) 14px / 12px 12px no-repeat,
    var(--hw-screw) 14px calc(100% - 14px) / 12px 12px no-repeat,
    var(--hw-screw) calc(100% - 14px) calc(100% - 14px) / 12px 12px no-repeat,
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 40%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #9fa3a7, 0 2px 0 #b3b7bb, 0 16px 30px -12px rgba(30,34,38,.35);
  animation: hwPlateIn .7s var(--hw-ease-out) both;
}
html body:not(#_hw) .empty-display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  margin: 6px 4px 22px;
  padding: 0 16px;
  border-radius: 7px;
  font: 500 11px/1 'DM Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(61,255,138,.75);
  text-shadow: 0 0 5px rgba(61,255,138,.45);
  background:
    linear-gradient(170deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, #17231c 0%, var(--hw-glass) 80%);
  border: 1px solid #070908;
  box-shadow: var(--hw-glass-bezel);
}
html body:not(#_hw) .empty-display-count { font-size: 20px; letter-spacing: .04em; color: rgba(61,255,138,.5); }
html body:not(#_hw) .projects-grid .empty-state p { text-transform: none !important; letter-spacing: 0 !important; }
html body:not(#_hw) .projects-grid .empty-unit p.empty-title {
  font: 700 20px/1.2 'Syne', sans-serif !important;
  color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  margin-bottom: 8px !important;
}
html body:not(#_hw) .projects-grid .empty-unit p.empty-sub {
  font: 400 12px/1.6 'DM Mono', monospace !important;
  color: var(--hw-ink-mid) !important;
  max-width: 34ch;
  margin: 0 auto 26px !important;
}
html body:not(#_hw) .empty-unit .btn-empty {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 44px !important;
  min-width: 230px;
  padding: 0 26px !important;
  font: 700 13px/1 'Syne', sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  color: #fff !important;
  border-radius: 7px !important;
}
@media (max-width: 600px) {
  html body:not(#_hw) .section-header { flex-wrap: wrap; }
  html body:not(#_hw) .search-box { width: 100% !important; max-width: none; }
  html body:not(#_hw) .stats-row .stat { min-width: calc(50% - 6px); }
  html body:not(#_hw) .empty-unit { padding: 26px 22px 28px; }
  html body:not(#_hw) .empty-unit .btn-empty { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Telefoon
   ========================================================================== */
@media (max-width: 760px) {

  /* ── Landingspagina: navigatie past binnen het scherm ── */
  html body:not(#_hw) .nav { padding: 0 14px !important; gap: 10px; }
  html body:not(#_hw) .nav .nav-logo-tag,
  html body:not(#_hw) .nav .nav-links { display: none !important; }
  html body:not(#_hw) .nav .nav-cta { display: flex !important; gap: 8px !important; flex-shrink: 0; }
  html body:not(#_hw) .nav .nav-cta .btn-ghost,
  html body:not(#_hw) .nav .nav-cta .btn-green {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }

  /* ── Dashboard: tellers 2 × 2, zoekveld over de volle breedte ── */
  html body:not(#_hw) .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    margin-bottom: 32px !important;
  }
  html body:not(#_hw) .stats-row .stat { min-width: 0 !important; width: auto !important; }
  html body:not(#_hw) .section-header { flex-direction: column; align-items: stretch !important; gap: 12px !important; }
  html body:not(#_hw) .section-title-text { text-align: left; }
  html body:not(#_hw) input.search-box { width: 100% !important; max-width: none !important; }

  /* ── App: geen bedieningsbalk zolang er nog geen tracks zijn ── */
  html body:not(#_hw):has(#emptyState:not([style*="none"])) #abSwitcherMid { display: none !important; }

  /* ── App: compacte bedieningsbalk onderin ── */
  html body:not(#_hw) #abSwitcherMid {
    display: flex;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important;
    max-height: none !important;
    overflow: visible !important;
    background:
      var(--hw-brush),
      linear-gradient(180deg, #d3d6d9 0%, var(--hw-deck) 50%, #b6bbc0 100%) !important;
    border-radius: 14px 14px 0 0 !important;
  }
  html body:not(#_hw) #abSwitcherMid .ab-switcher-label,
  html body:not(#_hw) #abSwitcherMid .switcher-right { display: none !important; }
  html body:not(#_hw) #abSwitcherMid .ab-pills { flex: 1 1 auto; min-width: 0; }
  html body:not(#_hw) #abSwitcherMid .ab-pills .ab-pill { flex: 1 1 0; min-width: 0; height: 32px !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills { flex: none; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills .lm-btn { height: 32px !important; min-width: 36px; }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row {
    flex: 1 1 100% !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group { flex-wrap: nowrap !important; max-width: 100%; }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button {
    height: 30px !important;
    padding: 0 8px 0 16px !important;
    font-size: 8.5px !important;
    letter-spacing: .04em !important;
    white-space: nowrap;
  }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button::after { left: 6px; }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button svg { width: 11px !important; height: 11px !important; }

  /* ruimte onderaan zodat niets achter de balk verdwijnt */
  html body:not(#_hw) #mainContent { padding-bottom: calc(var(--hw-bar-h, 150px) + 28px) !important; }

  /* ── App: trackkaart en LUFS-strook ── */
  html body:not(#_hw) .track-card {
    padding: 22px 18px 26px !important;
  }
  html body:not(#_hw) .track-heading .track-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  html body:not(#_hw) .track-label-row .lufs-strip {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 8px !important;
    width: 100% !important;
    padding: 8px 10px !important;
  }
  html body:not(#_hw) .track-label-row .lufs-strip .lufs-label { flex: none; margin: 0 !important; }
  html body:not(#_hw) .track-label-row .lufs-strip .lufs-bar-bg { flex: 1 1 auto !important; width: auto !important; min-width: 80px; margin: 0 !important; }
  html body:not(#_hw) .track-label-row .lufs-strip .lufs-val,
  html body:not(#_hw) .track-label-row .lufs-strip .lufs-peak-badge,
  html body:not(#_hw) .track-label-row .lufs-strip .gain-badge {
    flex: none;
    margin: 0 !important;
    padding: 4px 8px !important;
    font-size: 9.5px !important;
    width: auto !important;
    white-space: nowrap;
  }
  html body:not(#_hw) .track-label-row .lufs-strip .lufs-peak-st { font-size: 9.5px !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw):has(#emptyState:not([style*="none"])) #tracksArea { display: none !important; }

  /* DEMO/MIX en ST/M/S naast elkaar op één regel */
  html body:not(#_hw) #abSwitcherMid .ab-pills { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; }
  /* lege sleuf (Phone/TikTok/Spotify zijn op mobiel verborgen) niet tonen */
  html body:not(#_hw) #abSwitcherMid .hw-slot-group:has(#phoneBtn) { display: none !important; }

  /* statuslabel rechtsboven, tekst en meters over de volle breedte */
  html body:not(#_hw) .track-card .track-label-row { display: block !important; }
  html body:not(#_hw) .track-card .track-label-row .track-info { width: 100% !important; }
  html body:not(#_hw) .track-card .track-status {
    position: absolute !important;
    top: 20px !important;
    right: 40px !important;
    margin: 0 !important;
  }
  html body:not(#_hw) .track-card .track-heading { padding-right: 78px; }
  html body:not(#_hw) .track-label-row .lufs-strip { width: 100% !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid { flex-direction: row !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills { margin: 0 !important; }
}
@media (max-width: 760px) {
  /* schroeven vrijhouden van de kop */
  html body:not(#_hw) #tracksArea .track-card {
    padding-top: 38px !important;
    padding-bottom: 34px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  html body:not(#_hw) .track-card .track-status { top: 30px !important; right: 20px !important; }
  /* onderste knoppenrij past op het scherm: iconen weg, tekst blijft */
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button svg { display: none !important; }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button { padding: 0 9px 0 17px !important; }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button::after { left: 7px; }
}

/* nooit zijwaarts scrollen door decoratie */
html body:not(#_hw) .hero-waveform { overflow: hidden !important; max-width: 100% !important; }
html:has(> body:not(#_hw)),
html body:not(#_hw) { overflow-x: clip; }

@media (max-width: 760px) {
  html body:not(#_hw) main .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html body:not(#_hw) main .stats-row .stat { min-width: 0 !important; width: auto !important; flex: none !important; }

  /* feedbackoverzicht: voetknoppen op één regel */
  html body:not(#_hw) .fb-ov-footer { gap: 8px !important; padding: 12px 14px !important; }
  html body:not(#_hw) .fb-ov-btn {
    white-space: nowrap !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  html body:not(#_hw) .fb-ov-footer-left > .fb-ov-btn svg { display: none !important; }
}

/* ==========================================================================
   Dashboard: moderne projectkaarten en leesbaar menu
   ========================================================================== */
html body:not(#_hw) .projects-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
  gap: 16px !important;
}
html body:not(#_hw) .project-card.proj {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px;
  padding: 14px 14px 16px !important;
  cursor: pointer;
  text-align: left;
  border-radius: 12px !important;
  background:
    var(--hw-noise),
    linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 45%, var(--hw-plate-lo) 100%) !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #9fa3a7, 0 10px 22px -12px rgba(30,34,38,.35) !important;
  transition: transform .3s var(--hw-ease-out), box-shadow .3s var(--hw-ease-out) !important;
  outline: none;
}
html body:not(#_hw) .project-card.proj:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #9fa3a7, 0 18px 30px -14px rgba(30,34,38,.45) !important;
}
html body:not(#_hw) .project-card.proj:active { transform: translateY(0) scale(.99); }
html body:not(#_hw) .project-card.proj:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(38,40,43,.55) !important; }

html body:not(#_hw) .proj-display {
  height: 86px;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  background:
    linear-gradient(170deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 45%, #17201b 0%, var(--hw-glass) 80%);
  border: 1px solid #070908;
  box-shadow: var(--hw-glass-bezel);
}
html body:not(#_hw) .proj-wave {
  height: 24px;
  display: flex;
  align-items: center;
  gap: 3px;
}
html body:not(#_hw) .proj-wave i {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 1px;
}
html body:not(#_hw) .proj-wave-a i { background: linear-gradient(180deg, #b9a8ff, #6f55f2); box-shadow: 0 0 4px rgba(143,118,255,.45); }
html body:not(#_hw) .proj-wave-b i { background: linear-gradient(180deg, #ffd88a, #d9900a); box-shadow: 0 0 4px rgba(255,190,61,.4); }

html body:not(#_hw) .proj-body { min-width: 0; padding: 0 4px; padding-right: 36px; }
html body:not(#_hw) .proj-title {
  font: 700 15px/1.25 'Syne', sans-serif;
  color: var(--hw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body:not(#_hw) .proj-sub {
  margin-top: 3px;
  font: 400 11px/1.3 'DM Mono', monospace;
  color: var(--hw-ink-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body:not(#_hw) .proj-meta {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: 400 10px/1 'DM Mono', monospace;
  color: var(--hw-ink-dim);
  letter-spacing: .04em;
}
html body:not(#_hw) .proj-status { display: inline-flex; align-items: center; gap: 6px; }
html body:not(#_hw) .proj-status i {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}
html body:not(#_hw) .proj-status.is-saved { color: #2d6b45; }
html body:not(#_hw) .proj-status.is-saved i {
  background: radial-gradient(circle at 35% 35%, #d8ffe6, #3ddc84 55%, #16804a);
  box-shadow: 0 0 5px rgba(61,220,132,.7);
}
html body:not(#_hw) .project-card.proj .proj-menu {
  position: absolute !important;
  right: 12px; bottom: 30px;
  width: 30px !important; height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  border-radius: 7px !important;
}

/* contextmenu: donkere, goed leesbare tekst */
html body:not(#_hw) .ctx-menu { padding: 6px !important; border-radius: 10px !important; min-width: 200px; }
html body:not(#_hw) .ctx-menu .ctx-item {
  color: var(--hw-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  font: 500 13px/1 'DM Mono', monospace !important;
  opacity: 1 !important;
}
html body:not(#_hw) .ctx-menu .ctx-item svg { color: var(--hw-ink-mid) !important; stroke: currentColor; opacity: 1 !important; }
html body:not(#_hw) .ctx-menu .ctx-item:hover { background: rgba(0,0,0,.06) !important; }
html body:not(#_hw) .ctx-menu .ctx-item.danger,
html body:not(#_hw) .ctx-menu .ctx-item.danger svg { color: var(--hw-red) !important; }
html body:not(#_hw) .ctx-menu .ctx-item.danger:hover { background: rgba(222,63,56,.08) !important; }
html body:not(#_hw) .ctx-menu .ctx-divider { background: rgba(0,0,0,.12) !important; height: 1px !important; margin: 4px 6px !important; }

@media (max-width: 600px) {
  html body:not(#_hw) .projects-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Blind test: niets verraadt welke versie welke is
   ========================================================================== */
html body:not(#_hw) .app.blind-mode #tracksArea { display: flex !important; flex-direction: column !important; }
html body:not(#_hw) .app.blind-mode .track-heading,
html body:not(#_hw) .app.blind-mode .track-subtitle,
html body:not(#_hw) .app.blind-mode .lufs-strip,
html body:not(#_hw) .app.blind-mode .track-status,
html body:not(#_hw) .app.blind-mode .replace-audio-btn,
html body:not(#_hw) .app.blind-mode .approve-btn,
html body:not(#_hw) .app.blind-mode .waveform-canvas,
html body:not(#_hw) .app.blind-mode .wf-lit,
html body:not(#_hw) .app.blind-mode .gain-badge {
  visibility: hidden !important;
}
html body:not(#_hw) .app.blind-mode .track-heading,
html body:not(#_hw) .app.blind-mode .track-subtitle,
html body:not(#_hw) .app.blind-mode .lufs-strip { display: none !important; }
html body:not(#_hw) .app.blind-mode .track-letter,
html body:not(#_hw) .app.blind-mode .track-title,
html body:not(#_hw) .app.blind-mode .ab-pill { filter: none !important; }

/* label per versie */
html body:not(#_hw) .blind-tag { display: none; }
html body:not(#_hw) .app.blind-mode .blind-tag {
  display: block;
  font: 800 20px/1.2 'Syne', sans-serif;
  letter-spacing: .02em;
  color: var(--hw-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  margin: 0 0 12px;
}
/* neutrale golfvorm: alleen voortgang, geen vorm en geen kleur */
html body:not(#_hw) .app.blind-mode .waveform-container {
  background:
    linear-gradient(90deg, transparent 0 calc(50% - .5px), rgba(200,206,212,.25) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)) center / 100% 1px no-repeat,
    radial-gradient(ellipse at 50% 40%, #1a1d20 0%, #101214 80%) !important;
}
html body:not(#_hw) .app.blind-mode .waveform-progress::after { --wf-trail: rgba(220,226,232,.18); }
html body:not(#_hw) .app.blind-mode .track-card .waveform-cursor { --wf-head: #e8ecef; --wf-bloom: rgba(220,226,232,.6); }
html body:not(#_hw) .app.blind-mode .track-card .play-btn svg,
html body:not(#_hw) .app.blind-mode .track-card .play-btn svg * { fill: #4b5056 !important; color: #4b5056 !important; }
html body:not(#_hw) .app.blind-mode .ab-pill.btn-a.active::after,
html body:not(#_hw) .app.blind-mode .ab-pill.btn-b.active::after {
  background: radial-gradient(circle at 45% 42%, #ffffff 0 45%, #fff3d2 75%, #f3d993 100%) !important;
  box-shadow: 0 0 0 .5px rgba(150,110,40,.35), 0 0 3px 1px rgba(255,244,210,1), 0 0 9px 3px rgba(255,210,120,.65) !important;
}
html body:not(#_hw) .app.blind-mode .ab-pills { display: flex !important; }
html body:not(#_hw) .app.blind-mode .blind-tag {
  position: absolute;
  top: clamp(14px, 2.4vh, 22px);
  left: max(28px, 2.4vw);
  white-space: nowrap;
  margin: 0;
  z-index: 2;
}
html body:not(#_hw) .app.blind-mode #tracksArea .track-card { padding-top: clamp(48px, 7vh, 60px) !important; }
@media (max-width: 760px) {
  html body:not(#_hw) .app.blind-mode .blind-tag { top: 30px; left: 20px; font-size: 18px; }
  html body:not(#_hw) .app.blind-mode #tracksArea .track-card { padding-top: 66px !important; }
}

/* ==========================================================================
   Modus-aanduiding bovenin: Engineer | Listener
   ========================================================================== */
html body:not(#_hw) .mode-badge.mode-switch {
  display: inline-flex !important;
  align-items: stretch;
  gap: 3px;
  padding: 3px 3px 4px !important;
  height: auto !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, #b9bdc1, #caced2) !important;
  border: 1px solid #9da2a7 !important;
  box-shadow: var(--hw-well) !important;
  letter-spacing: 0 !important;
  cursor: help;
}
html body:not(#_hw) .mode-switch .mode-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 5px;
  font: 600 10px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hw-ink-dim) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body:not(#_hw) .mode-switch .mode-seg i {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}
html body:not(#_hw) .mode-switch .mode-seg.is-on {
  color: #eef0f1 !important;
  background: linear-gradient(180deg, #3a3e43, #202326);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.3);
}
html body:not(#_hw) .mode-switch .mode-seg.is-on i {
  background: radial-gradient(circle at 35% 35%, #d8ffe6, #3ddc84 55%, #16804a);
  box-shadow: 0 0 5px rgba(61,220,132,.8);
}
html body.is-listener:not(#_hw) .mode-switch .mode-seg.is-on i {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2);
  box-shadow: 0 0 5px rgba(143,118,255,.8);
}
@media (max-width: 760px) {
  html body:not(#_hw) .topbar .mode-badge.mode-switch { display: none !important; }
  html body:not(#_hw) .topbar::after { display: none !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) .topbar .mode-badge.mode-switch { display: inline-flex !important; padding: 2px !important; }
  html body:not(#_hw) .mode-switch .mode-seg:not(.is-on) { display: none; }
  html body:not(#_hw) .mode-switch .mode-seg { padding: 5px 8px; font-size: 9px; letter-spacing: .08em; }
}

/* ==========================================================================
   MASTER en REF naast MIX
   ========================================================================== */
:root { --v3-color: #d43f8d; --ref-color: #6b7785; }
html body:not(#_hw) .ab-pills .version-pill {
  position: relative;
  padding-left: 17px !important;
  font: 600 10px/1 'Syne', sans-serif !important;
  letter-spacing: .06em !important;
  margin: 0 !important;
  box-shadow: var(--hw-key-shadow) !important;
}
html body:not(#_hw) .ab-pills .version-pill.is-empty {
  padding-left: 11px !important;
  color: var(--hw-ink-dim) !important;
  background: linear-gradient(180deg, #eeeeeb, #dcdcd8) !important;
  border-style: dashed !important;
}
html body:not(#_hw) .ab-pills .version-pill.is-empty::after { display: none; }
html body:not(#_hw) .ab-pills .version-pill.active { box-shadow: var(--hw-key-shadow-down) !important; transform: translateY(2px); }
html body:not(#_hw) .ab-pills .version-pill::after {
  content: ''; position: absolute; left: 7px; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7d8388, #33373b);
  box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8);
}
html body:not(#_hw) .ab-pills .version-pill.btn-v3.active::after { background: radial-gradient(circle at 35% 35%, #ffd6ea, #ec5aa7 55%, #8f1f5b); box-shadow: 0 0 4px 1px #ec5aa7, 0 0 12px 3px rgba(236,90,167,.5); }
html body:not(#_hw) .ab-pills .version-pill.btn-ref.active::after { background: radial-gradient(circle at 35% 35%, #ffffff, #b8c3cd 55%, #56616c); box-shadow: 0 0 4px 1px #c9d3dc, 0 0 10px 3px rgba(201,211,220,.6); }
html body:not(#_hw) .extra-letter-v3 { color: #b02f72 !important; -webkit-text-fill-color: #b02f72 !important; }
html body:not(#_hw) .extra-letter-ref { color: #56616c !important; -webkit-text-fill-color: #56616c !important; }
html body:not(#_hw) .track-extra .track-letter { text-shadow: 0 1px 0 rgba(255,255,255,.8) !important; }
html body:not(#_hw) .track-extra .visualizer { display: none !important; }
html body:not(#_hw) .track-v3 .waveform-container { --wf-head: #ffe0ef; --wf-bloom: rgba(236,90,167,.7); }
html body:not(#_hw) .track-ref .waveform-container { --wf-head: #eef2f5; --wf-bloom: rgba(201,211,220,.7); }
html body:not(#_hw) #extraTracksContainer { display: contents; }

/* oude afspeelknop op projectkaarten weg */
html body:not(#_hw) .project-card .play-btn { display: none !important; }

@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid .ab-pills .version-pill { font-size: 9px !important; padding: 0 6px 0 13px !important; }
  html body:not(#_hw) #abSwitcherMid .ab-pills .version-pill.is-empty { padding: 0 6px !important; }
}
/* met extra versies mag het trackgebied scrollen; bedieningsbalk blijft in beeld */
html body:not(#_hw) .app.has-extra-tracks #tracksArea { overflow-y: auto !important; }
@media (min-width: 761px) {
  html body:not(#_hw) .app.has-extra-tracks #abSwitcherMid { position: sticky !important; top: 0; bottom: 0; z-index: 20; }
}
html body:not(#_hw) .app.has-extra-tracks .track-card,
html body:not(#_hw) .app.has-many-extra-tracks .track-card { transform: none !important; }

/* ==========================================================================
   Loop: sleep over de golfvorm, het stuk licht op in de trackkleur
   ========================================================================== */
html body:not(#_hw) .wf-loop-handle,
html body:not(#_hw) .wf-loop-handle.visible { display: none !important; }
html body:not(#_hw) .waveform-container,
html body:not(#_hw) .track-card .track-controls,
html body:not(#_hw) .ab-switcher-bar {
  -webkit-user-select: none !important;
  user-select: none !important;
}
html body:not(#_hw) .waveform-container { cursor: text !important; }
html body:not(#_hw) .wf-loop-region.visible {
  display: block !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, var(--loop-a, rgba(143,118,255,.34)), var(--loop-b, rgba(143,118,255,.2))) !important;
  box-shadow:
    inset 2px 0 0 var(--loop-edge, rgba(190,176,255,.95)),
    inset -2px 0 0 var(--loop-edge, rgba(190,176,255,.95)),
    0 0 18px var(--loop-glow, rgba(143,118,255,.35)) !important;
  mix-blend-mode: normal !important;
}
html body:not(#_hw) .wf-loop-region:not(.visible) { display: none !important; }
html body:not(#_hw) .track-b .wf-loop-region { --loop-a: rgba(255,190,61,.32); --loop-b: rgba(255,190,61,.18); --loop-edge: rgba(255,214,140,.95); --loop-glow: rgba(255,190,61,.3); }
html body:not(#_hw) .app.blind-mode .wf-loop-region { --loop-a: rgba(220,226,232,.22); --loop-b: rgba(220,226,232,.12); --loop-edge: rgba(235,240,244,.9); --loop-glow: rgba(220,226,232,.2); }

/* projectkaart met eigen afbeelding */
html body:not(#_hw) .proj-display.has-cover {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  height: 150px;
}
html body:not(#_hw) .proj-display.has-cover .proj-wave { display: none; }
html body:not(#_hw) .proj-display.is-uploading { opacity: .55; filter: saturate(.4); transition: opacity .2s; }
html body:not(#_hw) .proj-display,
html body:not(#_hw) .proj-display.has-cover { height: 120px !important; }

/* maximaal één extra paneel tegelijk */
html body:not(#_hw) .track-card.hw-extra-hidden { display: none !important; }

/* MASTER en REF na uploaden: gewone toets, zoals DEMO en MIX */
html body:not(#_hw) .ab-pills .version-pill:not(.is-empty) {
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: var(--hw-ink) !important;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  border: 1px solid #a7abaf !important;
  border-style: solid !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  opacity: 1 !important;
  filter: none !important;
}
html body:not(#_hw) .ab-pills .version-pill:not(.is-empty):hover {
  background: linear-gradient(180deg, #fff 0%, #ebebe7 100%) !important;
}
html body:not(#_hw) .ab-pills .version-pill.active {
  background: linear-gradient(180deg, #e6e6e2 0%, #eeeeea 100%) !important;
}

/* Export PDF en andere knoppen met verborgen icoon: tekst netjes gecentreerd */
html body:not(#_hw) .fb-ov-btn { justify-content: center !important; text-align: center !important; }
html body:not(#_hw) .fb-ov-btn.primary { gap: 0 !important; padding: 0 18px !important; }
html body:not(#_hw) .fb-ov-btn.primary svg { display: none !important; }

/* feedbackvenster: tracklabel past in het blokje */
html body:not(#_hw) .fb-popup-track-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 5px !important;
  font: 800 11px/1 'Syne', sans-serif !important;
  letter-spacing: .06em !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 rgba(255,255,255,.8) !important;
}
html body:not(#_hw) .fb-popup-track-badge.badge-a { background: linear-gradient(180deg, #7b62f6, #5a3fe0) !important; }
html body:not(#_hw) .fb-popup-track-badge.badge-b { background: linear-gradient(180deg, #d9950f, #b37400) !important; }
html body:not(#_hw) .fb-popup-track-badge.badge-v3 { background: linear-gradient(180deg, #d64b95, #b02f72) !important; }
html body:not(#_hw) .fb-popup-track-badge.badge-ref { background: linear-gradient(180deg, #7a8693, #56616c) !important; }
html body:not(#_hw) .fb-popup-header-left { display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0; }
html body:not(#_hw) .fb-popup-header-title { font: 700 14px/1.2 'Syne', sans-serif !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* blind test: voorkeur kiezen */
html body:not(#_hw) .blind-pick { display: none; }
html body:not(#_hw) .app.blind-mode .blind-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: clamp(12px, 2.2vh, 20px);
  right: max(28px, 2.4vw);
  z-index: 3;
  height: 32px;
  padding: 0 14px 0 12px;
  font: 700 12px/1 'Syne', sans-serif;
  color: #fff;
  border-radius: 6px;
  border: 1px solid #0b0c0d;
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101214, 0 3px 2px rgba(0,0,0,.16), var(--hw-slot);
  cursor: pointer;
  transition: transform .07s var(--hw-ease-out), box-shadow .07s var(--hw-ease-out);
}
html body:not(#_hw) .app.blind-mode .blind-pick:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.35), var(--hw-slot); }
html body:not(#_hw) .app.blind-mode .blind-pick i {
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 45% 42%, #ffffff 0 45%, #fff3d2 75%, #f3d993 100%);
  box-shadow: 0 0 6px rgba(255,236,190,.9);
}
@media (max-width: 760px) {
  html body:not(#_hw) .app.blind-mode .blind-pick { top: 26px; right: 18px; height: 30px; font-size: 11px; padding: 0 10px; }
}
html body:not(#_hw) .app.blind-mode .ab-pills .version-pill { display: none !important; }

/* ==========================================================================
   Dashboard: kaarten staand, als een speelkaart / hoes
   ========================================================================== */
html body:not(#_hw) .projects-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 18px !important;
}
html body:not(#_hw) .project-card.proj {
  aspect-ratio: 5 / 7;
  padding: 12px 12px 14px !important;
  gap: 12px;
}
html body:not(#_hw) .proj-display,
html body:not(#_hw) .proj-display.has-cover {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
  justify-content: center;
  gap: 14px;
  padding: 16px 14px;
}
html body:not(#_hw) .proj-wave { height: 38px; }
html body:not(#_hw) .proj-body { flex: none; padding-right: 0; }
html body:not(#_hw) .proj-title { font-size: 14px; }
html body:not(#_hw) .proj-meta { margin-top: 10px; padding-right: 38px; }
html body:not(#_hw) .project-card.proj .proj-menu { right: 12px; bottom: 12px; }
@media (max-width: 600px) {
  html body:not(#_hw) .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  html body:not(#_hw) .project-card.proj { padding: 9px 9px 11px !important; gap: 9px; }
  html body:not(#_hw) .proj-title { font-size: 12.5px; }
  html body:not(#_hw) .proj-sub { font-size: 10px; }
  html body:not(#_hw) .proj-meta { font-size: 9px; flex-direction: column; align-items: flex-start; gap: 5px; padding-right: 30px; }
  html body:not(#_hw) .proj-wave { height: 26px; gap: 2px; }
  html body:not(#_hw) .project-card.proj .proj-menu { width: 26px !important; height: 26px !important; right: 8px; bottom: 9px; }
}

/* projectkaart: menuknop rechtsboven op het display, tekst vrij */
html body:not(#_hw) .project-card.proj .proj-menu {
  top: 20px !important;
  right: 20px !important;
  bottom: auto !important;
  width: 30px !important;
  height: 30px !important;
  color: #eef0f1 !important;
  background: rgba(20,22,24,.55) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(6px);
  opacity: .9;
}
html body:not(#_hw) .project-card.proj .proj-menu:hover { opacity: 1; background: rgba(20,22,24,.75) !important; }
html body:not(#_hw) .proj-body { padding-right: 4px !important; }
html body:not(#_hw) .proj-meta { padding-right: 0 !important; }
html body:not(#_hw) .proj-title,
html body:not(#_hw) .proj-sub { max-width: 100%; }
@media (max-width: 600px) {
  html body:not(#_hw) .project-card.proj .proj-menu { top: 14px !important; right: 14px !important; width: 26px !important; height: 26px !important; }
  html body:not(#_hw) .proj-meta { padding-right: 0 !important; }
}

/* kaart zonder eigen afbeelding: vast kleurverloop per project */
html body:not(#_hw) .proj-display.has-gradient {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -30px 60px -30px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.12), 0 1px 0 2px rgba(255,255,255,.75) !important;
}

/* ==========================================================================
   Versiegeschiedenis: rondje + lijn links, kaartje rechts, alles binnen de rand
   ========================================================================== */
html body:not(#_hw) .version-timeline {
  padding: 12px 12px 12px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  gap: 0 !important;
}
html body:not(#_hw) .version-timeline .timeline-item {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body:not(#_hw) .version-timeline .timeline-item::after {
  left: 11px !important;
  top: 26px !important;
  bottom: 2px !important;
  width: 2px !important;
  height: auto !important;
  background: linear-gradient(180deg, #8f959b, #b6bbc0) !important;
  border-radius: 1px;
}
html body:not(#_hw) .version-timeline .timeline-item:last-child { padding-bottom: 0 !important; }
html body:not(#_hw) .version-timeline .timeline-item:last-child::after { display: none !important; }
html body:not(#_hw) .version-timeline .timeline-dot {
  flex: none !important;
  position: relative !important;
  left: auto !important;
  margin: 2px 0 0 !important;
  width: 24px !important;
  height: 24px !important;
  z-index: 1;
}
html body:not(#_hw) .version-timeline .timeline-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px !important;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo));
  border: 1px solid #b4b8bc;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #a9adb1;
  overflow: hidden;
}
html body:not(#_hw) .version-timeline .timeline-title,
html body:not(#_hw) .version-timeline .timeline-notes { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* oude multi-versie-schakelaar niet meer nodig */
html body:not(#_hw) #multiVersionToggle,
html body:not(#_hw) #mvUploadFields { display: none !important; }
html body:not(#_hw) .settings-section:has(> #multiVersionToggle) { display: none !important; }

/* ==========================================================================
   Install app
   ========================================================================== */
html body:not(#_hw) .install-app-btn[hidden] { display: none !important; }
html body:not(#_hw) .install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  margin-right: 10px;
  font: 600 12px/1 'DM Mono', monospace;
  color: var(--hw-ink);
  border-radius: 6px;
  border: 1px solid #a7abaf;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot-key);
  cursor: pointer;
  white-space: nowrap;
}
html body:not(#_hw) .install-app-btn:active { transform: translateY(2px); box-shadow: var(--hw-slot-key-down); }
html body:not(#_hw) .install-help {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(60,66,72,.35); backdrop-filter: blur(6px);
}
html body:not(#_hw) .install-help.open { display: flex; }
html body:not(#_hw) .install-help-card {
  width: 100%; max-width: 360px; text-align: center; padding: 30px 28px 26px; border-radius: 12px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 45%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 30px 70px -20px rgba(20,24,28,.5);
  animation: hwRise .4s var(--hw-ease-out) both;
}
html body:not(#_hw) .install-help-card img { border-radius: 14px; margin-bottom: 12px; }
html body:not(#_hw) .install-help-card h2 { font: 700 20px/1.2 'Syne', sans-serif; color: var(--hw-ink); margin: 0 0 8px; }
html body:not(#_hw) .install-help-steps { font: 400 13px/1.6 'DM Mono', monospace; color: var(--hw-ink-mid); margin: 0 0 20px; }
html body:not(#_hw) .install-help-close {
  height: 40px; min-width: 140px; padding: 0 18px; border-radius: 7px;
  font: 700 13px/1 'Syne', sans-serif; color: #fff; cursor: pointer;
  border: 1px solid #0b0c0d; background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101214, var(--hw-slot);
}
@media (max-width: 760px) {
  html body:not(#_hw) .nav .install-app-btn { display: none !important; }
  html body:not(#_hw) > nav .install-app-btn { height: 30px; padding: 0 10px; font-size: 11px; margin-right: 8px; }
}

/* ==========================================================================
   Merk: Fix My Demo (FMD op smalle schermen)
   ========================================================================== */
html body:not(#_hw) .fmd-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 19px;
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: var(--hw-ink) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
  cursor: pointer;
}
html body:not(#_hw) .fmd-logo .fmd-short { display: none; letter-spacing: .02em; }
html body:not(#_hw) .topbar .fmd-logo { font-size: 17px; }
html body:not(#_hw) .footer-logo .fmd-logo { font-size: 16px; }
html body:not(#_hw) .nav .nav-logo { display: flex; align-items: center; }
@media (max-width: 760px) {
  html body:not(#_hw) .topbar .fmd-logo .fmd-full,
  html body:not(#_hw) > nav .fmd-logo .fmd-full,
  html body:not(#_hw) .nav .fmd-logo .fmd-full { display: none; }
  html body:not(#_hw) .topbar .fmd-logo .fmd-short,
  html body:not(#_hw) > nav .fmd-logo .fmd-short,
  html body:not(#_hw) .nav .fmd-logo .fmd-short { display: inline; }
}

/* kaart met afbeelding: zelfde lichte rand als het kleurverloop, geen donkere binnenschaduw */
html body:not(#_hw) .proj-display.has-cover {
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(0,0,0,.12), 0 1px 0 2px rgba(255,255,255,.75) !important;
}

/* ==========================================================================
   Dashboard: mappen en slepen
   ========================================================================== */
html body:not(#_hw) .folder-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -6px 0 22px;
}
html body:not(#_hw) .folder-chip,
html body:not(#_hw) .folder-new {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  font: 500 12px/1 'DM Mono', monospace;
  color: var(--hw-ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .07s var(--hw-ease-out), box-shadow .07s var(--hw-ease-out), background .15s ease;
}
html body:not(#_hw) .folder-chip {
  border: 1px solid #a7abaf;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot-key);
}
html body:not(#_hw) .folder-chip:hover { background: linear-gradient(180deg, #fff 0%, #ebebe7 100%); }
html body:not(#_hw) .folder-chip.is-active {
  color: #eef0f1;
  border-color: #0b0c0d;
  background: linear-gradient(180deg, #3a3e43, #202326);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--hw-slot);
}
html body:not(#_hw) .folder-chip svg { opacity: .7; flex: none; }
html body:not(#_hw) .folder-chip-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  font-size: 10px;
  background: rgba(0,0,0,.08);
}
html body:not(#_hw) .folder-chip.is-active .folder-chip-count { background: rgba(255,255,255,.16); }
html body:not(#_hw) .folder-chip-more {
  margin-left: 2px; padding: 2px 4px; border-radius: 4px; letter-spacing: .05em; opacity: .8;
}
html body:not(#_hw) .folder-chip-more:hover { background: rgba(255,255,255,.14); opacity: 1; }
html body:not(#_hw) .folder-chip.is-drop-target {
  transform: translateY(-2px) scale(1.04);
  border-color: #6a4ff0;
  box-shadow: 0 0 0 2px rgba(106,79,240,.35), 0 8px 18px -8px rgba(106,79,240,.6);
}
html body:not(#_hw).is-dragging-project .folder-chip.is-droppable:not(.is-active) { border-style: dashed; }
html body:not(#_hw) .folder-new {
  border: 1px dashed #9da2a7;
  background: transparent;
  color: var(--hw-ink-mid);
}
html body:not(#_hw) .folder-new:hover { color: var(--hw-ink); background: rgba(255,255,255,.4); }

/* slepen */
html body:not(#_hw) .project-card.proj-ghost { opacity: .35; }
html body:not(#_hw) .project-card.proj-chosen { cursor: grabbing; }
html body:not(#_hw) .project-card.proj-drag { transform: rotate(2deg); box-shadow: 0 24px 40px -14px rgba(20,24,28,.5) !important; }

/* dialoog */
html body:not(#_hw) .folder-dialog {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(60,66,72,.35); backdrop-filter: blur(5px);
}
html body:not(#_hw) .folder-dialog.open { display: flex; }
html body:not(#_hw) .folder-dialog-card {
  width: 100%; max-width: 380px; padding: 22px 22px 18px; border-radius: 12px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 45%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 30px 70px -20px rgba(20,24,28,.5);
  animation: hwRise .35s var(--hw-ease-out) both;
}
html body:not(#_hw) .folder-dialog-card h3 { font: 700 18px/1.2 'Syne', sans-serif; color: var(--hw-ink); margin: 0 0 14px; }
html body:not(#_hw) .folder-dialog-text { font: 400 12px/1.6 'DM Mono', monospace; color: var(--hw-ink-mid); margin: 0 0 16px; }
html body:not(#_hw) .folder-dialog-input {
  width: 100%; height: 40px; padding: 0 12px; margin-bottom: 16px; border-radius: 7px;
  font: 400 14px/1 'DM Mono', monospace; color: var(--hw-ink);
  border: 1px solid #b0b4b8; background: linear-gradient(180deg, #e3e4e1, #efefec); box-shadow: var(--hw-well); outline: none;
}
html body:not(#_hw) .folder-dialog-input:focus { border-color: #6f757b; }
html body:not(#_hw) .folder-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
html body:not(#_hw) .folder-btn-primary,
html body:not(#_hw) .folder-btn-secondary,
html body:not(#_hw) .folder-btn-danger {
  height: 36px; padding: 0 16px; border-radius: 7px; cursor: pointer;
  font: 700 12px/1 'Syne', sans-serif;
}
html body:not(#_hw) .folder-btn-primary { color: #fff; border: 1px solid #0b0c0d; background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #101214, var(--hw-slot); }
html body:not(#_hw) .folder-btn-secondary { color: var(--hw-ink); border: 1px solid #a7abaf; background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo)); box-shadow: var(--hw-slot-key); }
html body:not(#_hw) .folder-btn-danger { color: #fff; border: 1px solid #8e1d18; background: linear-gradient(180deg, #f0564e 0%, #c7322b 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #87201b, var(--hw-slot); margin-right: auto; }
html body:not(#_hw) .folder-btn-primary:disabled, html body:not(#_hw) .folder-btn-danger:disabled { opacity: .6; }
html body:not(#_hw) .folder-pick-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; max-height: 280px; overflow-y: auto; }
html body:not(#_hw) .folder-pick {
  text-align: left; height: 38px; padding: 0 12px; border-radius: 7px; cursor: pointer;
  font: 500 13px/1 'DM Mono', monospace; color: var(--hw-ink);
  border: 1px solid #b4b8bc; background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo)); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #a9adb1;
}
html body:not(#_hw) .folder-pick:hover { background: linear-gradient(180deg, #fff, #ebebe7); }
html body:not(#_hw) .folder-pick.is-current { border-color: #6f757b; box-shadow: inset 0 0 0 1px #6f757b; }
@media (max-width: 600px) {
  html body:not(#_hw) .folder-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  html body:not(#_hw) .folder-bar::-webkit-scrollbar { display: none; }
}

/* logo in huisstijlkleuren */
html body:not(#_hw) .fmd-logo .fmd-f { color: var(--hw-a-ink, #5640D8); -webkit-text-fill-color: var(--hw-a-ink, #5640D8); }
html body:not(#_hw) .fmd-logo .fmd-m { color: var(--hw-ink); -webkit-text-fill-color: var(--hw-ink); }
html body:not(#_hw) .fmd-logo .fmd-d { color: var(--hw-b-ink, #A97627); -webkit-text-fill-color: var(--hw-b-ink, #A97627); }

/* hover-voorbeeld van een feedbackpunt */
html body:not(#_hw) .fb-hover-tip {
  position: fixed; z-index: 5000;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 7px;
  background: linear-gradient(180deg, #2f3236, #1d1f22);
  border: 1px solid #0f1011;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45);
  color: #eef0f1;
  font: 400 12px/1.45 'DM Mono', monospace;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s var(--hw-ease-out);
}
html body:not(#_hw) .fb-hover-tip.show { opacity: 1; transform: none; }
html body:not(#_hw) .fb-hover-time {
  display: inline-block; margin-right: 7px; padding: 1px 5px; border-radius: 3px;
  font-size: 10px; color: #ff6a5c; background: rgba(255,74,58,.14);
}
html body:not(#_hw) .fb-marker { cursor: pointer; }
html body:not(#_hw) .track-v3 .wf-loop-region { --loop-a: rgba(236,90,167,.32); --loop-b: rgba(236,90,167,.18); --loop-edge: rgba(255,170,210,.95); --loop-glow: rgba(236,90,167,.3); }
html body:not(#_hw) .track-ref .wf-loop-region { --loop-a: rgba(201,211,220,.3); --loop-b: rgba(201,211,220,.16); --loop-edge: rgba(235,240,244,.95); --loop-glow: rgba(201,211,220,.3); }

/* blind test: alle versies (ook MASTER/REF) als gewone neutrale knoppen */
html body:not(#_hw) .app.blind-mode .ab-pills .version-pill { display: none !important; }
html body:not(#_hw) .app.blind-mode .ab-pills .version-pill.is-blind-pill { display: inline-flex !important; }
html body:not(#_hw) .app.blind-mode .ab-pills .is-blind-pill::after { background: radial-gradient(circle at 35% 35%, #7d8388, #33373b) !important; box-shadow: inset 0 0 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.8) !important; }
html body:not(#_hw) .app.blind-mode .ab-pills .is-blind-pill.active::after {
  background: radial-gradient(circle at 45% 42%, #ffffff 0 45%, #fff3d2 75%, #f3d993 100%) !important;
  box-shadow: 0 0 0 .5px rgba(150,110,40,.35), 0 0 3px 1px rgba(255,244,210,1), 0 0 9px 3px rgba(255,210,120,.65) !important;
}
html body:not(#_hw) .app.blind-mode .track-card.is-blind-card { display: flex !important; }
html body:not(#_hw) .app.blind-mode .track-extra .waveform-container {
  background: radial-gradient(ellipse at 50% 40%, #1a1d20 0%, #101214 80%) !important;
}
html body:not(#_hw) .app.blind-mode .track-extra .play-btn svg,
html body:not(#_hw) .app.blind-mode .track-extra .play-btn svg * { fill: #4b5056 !important; color: #4b5056 !important; }
html body:not(#_hw) .app.blind-mode .track-card .waveform-cursor { --wf-head: #e8ecef !important; --wf-bloom: rgba(220,226,232,.6) !important; }
html body:not(#_hw) .blind-tag .blind-num { font-family: 'DM Mono', monospace; font-weight: 500; }

/* --------------------------------------------------------------------------
   Smallere vensters (761–1280px): knoppen blijven netjes gecentreerd
   -------------------------------------------------------------------------- */
html body:not(#_hw) .switcher-shortcut:empty { display: none !important; }
@media (min-width: 761px) and (max-width: 1280px) {
  html body:not(#_hw) #abSwitcherMid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    row-gap: 10px !important;
    column-gap: 14px !important;
  }
  html body:not(#_hw) #abSwitcherMid .switcher-right { display: none !important; }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row {
    flex: 1 1 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group { flex-wrap: nowrap !important; }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group > button { white-space: nowrap; }

  /* statuslabel vast rechtsboven in plaats van onder de meters te springen */
  html body:not(#_hw) .track-card .track-label-row { position: relative; flex-wrap: nowrap !important; }
  html body:not(#_hw) .track-card .track-label-row .track-info { min-width: 0; width: 100%; }
  html body:not(#_hw) .track-card .track-status {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
  }
  html body:not(#_hw) .track-card .track-heading { padding-right: 90px; max-width: 100%; }
  html body:not(#_hw) .track-label-row .lufs-strip { max-width: 100% !important; flex-wrap: wrap; row-gap: 6px; }
}

/* --------------------------------------------------------------------------
   Logo blijft in huisstijlkleuren, ook in de app-topbar
   -------------------------------------------------------------------------- */
html body:not(#_hw) .fmd-logo .fmd-f:not(#_x) { color: var(--hw-a-ink, #5640D8) !important; -webkit-text-fill-color: var(--hw-a-ink, #5640D8) !important; }
html body:not(#_hw) .fmd-logo .fmd-m:not(#_x) { color: var(--hw-ink) !important; -webkit-text-fill-color: var(--hw-ink) !important; }
html body:not(#_hw) .fmd-logo .fmd-d:not(#_x) { color: var(--hw-b-ink, #A97627) !important; -webkit-text-fill-color: var(--hw-b-ink, #A97627) !important; }

/* --------------------------------------------------------------------------
   Instellingen: versiegeschiedenis vult het paneel, Master & Reference onderaan
   -------------------------------------------------------------------------- */
html body:not(#_hw) #settingsPanel .settings-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
html body:not(#_hw) #settingsPanel .settings-section:has(#versionTimeline) {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
html body:not(#_hw) #settingsPanel #versionTimeline {
  flex: 1 1 auto !important;
  max-height: none !important;
  min-height: 180px;
}
html body:not(#_hw) #settingsPanel .settings-extras { flex: none !important; margin-bottom: 0 !important; }
html body:not(#_hw) #settingsPanel .settings-extra-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
html body:not(#_hw) #settingsPanel .settings-remove-btn {
  width: 100% !important;
  height: 40px !important;
  justify-content: center !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
html body:not(#_hw) #settingsPanel .settings-remove-btn:disabled { opacity: .45; cursor: default; }

/* --------------------------------------------------------------------------
   Telefoon: header, trackkaart, LUFS-strook en bedieningsbalk netjes
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* header: alles past, dashboardknop wordt een pijltje */
  html body:not(#_hw) .topbar { padding: 0 12px !important; gap: 8px !important; }
  html body:not(#_hw) .topbar .topbar-actions { gap: 6px !important; margin-left: auto !important; flex-shrink: 0; }
  html body:not(#_hw) .topbar .dash-btn { width: 34px !important; padding: 0 !important; justify-content: center !important; font-size: 0 !important; gap: 0 !important; }
  html body:not(#_hw) .topbar .dash-btn svg { width: 12px !important; height: 12px !important; }
  html body:not(#_hw) .topbar .profile-btn,
  html body:not(#_hw) .topbar .settings-btn,
  html body:not(#_hw) .topbar .btn-icon { width: 34px !important; height: 34px !important; flex-shrink: 0; }
  html body:not(#_hw) .topbar #modeBadge { flex-shrink: 0; }

  /* LUFS, peak en matched op één regel */
  html body:not(#_hw) .track-card .lufs-strip:not(#_x) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 7px !important;
  }
  html body:not(#_hw) .track-card .lufs-strip .lufs-label,
  html body:not(#_hw) .track-card .lufs-strip .lufs-bar-bg { display: none !important; }
  html body:not(#_hw) .track-card .lufs-strip .lufs-val,
  html body:not(#_hw) .track-card .lufs-strip .lufs-peak-badge,
  html body:not(#_hw) .track-card .lufs-strip .gain-badge {
    font-size: 8.5px !important;
    letter-spacing: .02em !important;
    padding: 4px 6px !important;
    height: 24px !important;
    line-height: 16px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  html body:not(#_hw) .track-card .lufs-strip .lufs-peak-badge { flex: 1 1 auto !important; justify-content: center !important; overflow: hidden; }
  html body:not(#_hw) .track-card .lufs-strip .gain-badge { margin-left: auto !important; }

  /* play-knop, tijd en replace op één nette regel, vrij van de golfvorm */
  html body:not(#_hw) .track-card .track-controls:not(#_x) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 12px !important;
    padding: 0 0 0 6px !important;
  }
  html body:not(#_hw) .track-card .track-controls .play-btn { width: 46px !important; height: 46px !important; flex: none !important; }
  html body:not(#_hw) .track-card .track-controls .time-display { flex: none !important; margin: 0 !important; }
  html body:not(#_hw) .track-card .track-controls > div:last-child:not(.time-display) {
    margin: 0 0 0 auto !important;
    display: flex !important;
    gap: 6px !important;
    flex: none !important;
  }
  html body:not(#_hw) .track-card .track-controls .replace-audio-btn,
  html body:not(#_hw) .track-card .track-controls .approve-btn { height: 32px !important; padding: 0 10px !important; font-size: 9px !important; }

  /* bedieningsbalk: twee strakke rijen van gelijke toetsen */
  html body:not(#_hw) #abSwitcherMid:not(#_x) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 6px !important;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) !important;
  }
  html body:not(#_hw) #abSwitcherMid .ab-pills:not(#_x) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    width: 100% !important;
    grid-column: 1 / -1;
  }
  html body:not(#_hw) #abSwitcherMid .ab-pills .ab-pill:not(#_x) {
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 4px 0 12px !important;
    font-size: 9px !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html body:not(#_hw) #abSwitcherMid .ab-pills .ab-pill.is-empty:not(#_x) { padding: 0 4px !important; line-height: 1 !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills .lm-btn:not(#_x) { height: 34px !important; min-width: 0 !important; width: 30px !important; padding: 0 0 0 10px !important; font-size: 8.5px !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills .lm-btn::after { left: 4px !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills:not(#_x),
  html body:not(#_hw) #abSwitcherMid .sim-btns-row:not(#_x) { margin: 0 !important; }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row:not(#_x) {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
  }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group:not(#_x) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group > button:not(#_x) {
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 3px 0 12px !important;
    font-size: 8.5px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group > button::after { left: 5px !important; }
  html body:not(#_hw) #abSwitcherMid .lbl-long { display: none; }
}
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group:has(#phoneBtn):not(#_x) { display: none !important; }
  html body:not(#_hw) #abSwitcherMid #lufsMatchBtn { text-transform: uppercase !important; letter-spacing: .04em !important; font-size: 8.5px !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) .track-card .track-controls:not(#_x) { gap: 10px !important; }
  html body:not(#_hw) .track-card .track-controls .time-display:not(#_x) { padding: 6px 8px !important; font-size: 11px !important; }
  html body:not(#_hw) .track-card .track-controls:has(.approve-btn) .replace-audio-btn:not(#_x) {
    font-size: 0 !important; width: 32px !important; padding: 0 !important; gap: 0 !important; justify-content: center !important;
  }
  html body:not(#_hw) .track-card .track-controls:has(.approve-btn) .replace-audio-btn svg { width: 13px !important; height: 13px !important; margin: 0 !important; }
  html body:not(#_hw) .track-card .lufs-strip .lufs-val:not(#_x) { gap: 4px; }
}
@media (max-width: 760px) {
  html body:not(#_hw) .track-card .track-controls > .visualizer,
  html body:not(#_hw) .track-card .track-controls > div > input[type="file"] { display: none !important; }
  html body:not(#_hw) .track-card .track-controls .approve-btn:not(#_x) { letter-spacing: .04em !important; padding: 0 9px !important; gap: 4px !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) .track-card .track-controls:has(.approve-btn):not(#_x) { gap: 8px !important; padding-left: 5px !important; }
  html body:not(#_hw) .track-card .track-controls:has(.approve-btn) .play-btn:not(#_x) { width: 42px !important; height: 42px !important; }
  html body:not(#_hw) .track-card .track-controls:has(.approve-btn) .time-display:not(#_x) { padding: 6px 6px !important; font-size: 10px !important; }
}
@media (max-width: 760px) {
  html body:not(#_hw) #tracksArea .track-card:not(#_x) { padding-bottom: 42px !important; }
}
html body:not(#_hw) #settingsPanel .settings-remove-btn:disabled:not(#_x) { opacity: .4 !important; pointer-events: none; }

/* --------------------------------------------------------------------------
   Feedbackvenster: alles leesbaar, met de aangeklikte notitie bovenaan
   -------------------------------------------------------------------------- */
html body:not(#_hw) #fbPopup { width: 400px !important; padding-bottom: 4px; }
html body:not(#_hw) #fbPopup .fb-popup-textarea {
  min-height: 84px !important;
  max-height: 140px !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  padding: 10px 12px !important;
  color: var(--hw-ink) !important;
}
html body:not(#_hw) #fbPopup .fb-popup-textarea::placeholder { color: #8b9096 !important; opacity: 1 !important; }
html body:not(#_hw) #fbPopup .fb-popup-input-hint {
  color: var(--hw-ink-mid) !important;
  font-size: 10px !important;
  letter-spacing: .04em !important;
}
html body:not(#_hw) #fbPopup .fb-popup-history-label {
  background: linear-gradient(180deg, #dcdedf, #cbcfd2) !important;
  color: var(--hw-ink) !important;
  font-size: 10px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase;
  padding: 7px 14px !important;
  border-top: 1px solid #b7bbbe !important;
  border-bottom: 1px solid #b7bbbe !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
}
html body:not(#_hw) #fbPopup #fbHistoryCount { color: var(--hw-ink) !important; font-weight: 700; }
html body:not(#_hw) #fbPopup .fb-history-empty {
  color: var(--hw-ink-mid) !important;
  font-size: 11.5px !important;
  padding: 18px 14px !important;
  text-align: center;
}
html body:not(#_hw) #fbPopup .fb-history-item {
  background: linear-gradient(180deg, #fbfbf9, #efefeb) !important;
  border: 1px solid #c1c4c7 !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb !important;
  margin-bottom: 8px !important;
  padding: 9px 10px !important;
  gap: 10px !important;
}
html body:not(#_hw) #fbPopup .fb-history-text { color: var(--hw-ink) !important; font-size: 12px !important; line-height: 1.45 !important; }
html body:not(#_hw) #fbPopup .fb-history-meta,
html body:not(#_hw) #fbPopup .fb-history-meta span { color: var(--hw-ink-mid) !important; font-size: 9.5px !important; }
html body:not(#_hw) #fbPopup .fb-history-delete {
  color: var(--hw-ink-mid) !important;
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo)) !important;
  border: 1px solid #b4b8bc !important;
  border-radius: 5px !important;
  width: 24px; height: 24px; flex: none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb !important;
}
html body:not(#_hw) #fbPopup .fb-history-delete:hover { color: var(--hw-red, #b3261e) !important; }
html body:not(#_hw) #fbPopup .fb-history { padding: 10px 12px !important; }

/* de notitie waarop je rechtsklikte */
html body:not(#_hw) .fb-selected-note {
  margin: 12px 14px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfbf9, #eeeeea);
  border: 1px solid #c1c4c7;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb;
}
html body:not(#_hw) .fb-selected-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
html body:not(#_hw) .fb-selected-tc {
  font: 500 10px/1 'DM Mono', monospace;
  padding: 4px 7px; border-radius: 4px;
  background: linear-gradient(180deg, #2f3236, #1d1f22);
  color: #ffd9a0;
}
html body:not(#_hw) .fb-selected-when { font: 400 9.5px/1 'DM Mono', monospace; color: var(--hw-ink-mid); }
html body:not(#_hw) .fb-selected-text {
  font: 400 12.5px/1.5 'DM Mono', monospace;
  color: var(--hw-ink);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 10px;
}
html body:not(#_hw) .fb-selected-delete {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  font: 500 10px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #c8493f, #a5362d) !important;
  border: 1px solid #8e2b23 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 0 #7d241d !important;
}
html body:not(#_hw) .fb-selected-delete:active { transform: translateY(1px); }
html body:not(#_hw) #fbPopup .fb-history-tc {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border: 1px solid #0f1011 !important;
  border-radius: 4px !important;
  padding: 4px 7px !important;
  font-size: 10px !important;
  color: #cfc3ff !important;
}
html body:not(#_hw) #fbPopup .fb-history-tc.tc-b { color: #ffdd9e !important; }
html body:not(#_hw) #fbPopup .fb-history-tc.tc-v3 { color: #ffc6e3 !important; }
html body:not(#_hw) #fbPopup .fb-history-tc.tc-ref { color: #d6dde4 !important; }
html body:not(#_hw) #fbPopup .fb-history-item .fb-history-delete { opacity: .9 !important; }

/* --------------------------------------------------------------------------
   Profielfoto
   -------------------------------------------------------------------------- */
html body:not(#_hw) #profileBtn,
html body:not(#_hw) #profileAvatarBig,
html body:not(#_hw) #navAvatar,
html body:not(#_hw) #profileAvatarLg { background-size: cover !important; background-position: center !important; cursor: pointer; }
html body:not(#_hw) #profileBtn.has-photo .profile-initials,
html body:not(#_hw) #profileAvatarBig.has-photo .profile-initials { opacity: 0 !important; }
html body:not(#_hw) #navAvatar.has-photo span,
html body:not(#_hw) #profileAvatarLg.has-photo { font-size: 0 !important; color: transparent !important; }
html body:not(#_hw) #profileBtn.has-photo,
html body:not(#_hw) #profileAvatarBig.has-photo,
html body:not(#_hw) #navAvatar.has-photo,
html body:not(#_hw) #profileAvatarLg.has-photo { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 1px 0 #fff !important; }
html body:not(#_hw) .avatar-actions { display: flex; gap: 8px; margin-top: 8px; }
html body:not(#_hw) .avatar-action {
  height: 24px;
  padding: 0 9px;
  border-radius: 5px;
  font: 500 9px/1 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--hw-ink);
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo));
  border: 1px solid #b4b8bc;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb;
}
html body:not(#_hw) .avatar-action:active { transform: translateY(1px); }
html body:not(#_hw) .avatar-action-remove { color: var(--hw-ink-mid); }
html body:not(#_hw) #profileBtn.has-photo,
html body:not(#_hw) #profileAvatarBig.has-photo,
html body:not(#_hw) #navAvatar.has-photo,
html body:not(#_hw) #profileAvatarLg.has-photo { filter: none !important; }
html body:not(#_hw) #profileAvatarLg.has-photo,
html body:not(#_hw) #navAvatar.has-photo { color: transparent !important; }

/* --------------------------------------------------------------------------
   Meldingen onderin: donkere plaat met lichte tekst, altijd leesbaar
   -------------------------------------------------------------------------- */
html body:not(#_hw) #toast,
html body:not(#_hw) .toast {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border: 1px solid #0f1011 !important;
  border-radius: 8px !important;
  color: #f1f2f3 !important;
  -webkit-text-fill-color: #f1f2f3 !important;
  font: 500 12px/1.45 'DM Mono', monospace !important;
  letter-spacing: .02em !important;
  padding: 10px 16px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.5) !important;
  text-align: center;
}
html body:not(#_hw) #toast *,
html body:not(#_hw) .toast * { color: #f1f2f3 !important; -webkit-text-fill-color: #f1f2f3 !important; }
/* bij hoveren alleen de tekstballon onder de golfvorm, niet ook de oude erboven */
html body:not(#_hw) .fb-marker:hover .fb-marker-bubble:not(.visible) { opacity: 0 !important; }

/* --------------------------------------------------------------------------
   Dashboard: mapkaarten, samenvoegen en slepen naar een map
   -------------------------------------------------------------------------- */
html body:not(#_hw) .folder-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  padding: 10px 10px 4px;
  cursor: pointer;
  background: var(--hw-brush), linear-gradient(180deg, #f2f3f1 0%, var(--hw-plate) 60%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b0b4b8, 0 12px 22px -14px rgba(20,24,28,.5);
  transition: transform .28s var(--hw-ease-out), box-shadow .28s var(--hw-ease-out);
}
html body:not(#_hw) .folder-card:hover { transform: translateY(-2px); }
html body:not(#_hw) .folder-card-display {
  border-radius: 10px;
  aspect-ratio: 1 / 1;
  padding: 7px;
  background: linear-gradient(180deg, #dcdedf, #c9cdd0);
  box-shadow: var(--hw-well);
}
html body:not(#_hw) .folder-card-thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  width: 100%; height: 100%;
}
html body:not(#_hw) .folder-card-thumbs i {
  display: block;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
html body:not(#_hw) .folder-card-thumbs i.is-empty {
  grid-column: 1 / -1; grid-row: 1 / -1;
  background: repeating-linear-gradient(45deg, #d5d8da 0 7px, #cbcfd2 7px 14px);
}
html body:not(#_hw) .folder-card .proj-body { padding: 10px 2px 8px; }

/* doelmarkering tijdens slepen */
html body:not(#_hw) .is-drop-target,
html body:not(#_hw) .is-merge-target {
  outline: 2px solid var(--hw-a-ink, #5640D8) !important;
  outline-offset: 2px;
}
html body:not(#_hw) .is-merge-target { transform: scale(1.04); }
html body:not(#_hw) .is-merge-wait { transform: scale(1.02); }
html body:not(#_hw) .project-card.is-merge-target .proj-display,
html body:not(#_hw) .folder-card.is-merge-target .folder-card-display { filter: brightness(1.05); }
html body:not(#_hw) #folderNewBtn.is-drop-target { outline-offset: 3px; }
html body:not(#_hw) .folder-card-thumbs.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
html body:not(#_hw) .folder-card-thumbs.n2 { grid-template-rows: 1fr; }
html body:not(#_hw) .folder-card .card-menu-btn {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 3;
}
/* zwevend kaartje tijdens slepen: altijd dezelfde kaartvorm */
html body:not(#_hw) .sortable-fallback {
  box-sizing: border-box !important;
  margin: 0 !important;
  opacity: .96 !important;
}
html body:not(#_hw) .sortable-fallback.is-merge-wait,
html body:not(#_hw) .sortable-fallback.is-merge-target { transform: none !important; }

/* --------------------------------------------------------------------------
   Merklogo (Fix My Demo): vectorlogo in de balken, symbool op smalle schermen
   -------------------------------------------------------------------------- */
html body:not(#_hw) .fmd-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
  text-shadow: none !important;
  line-height: 0;
}
html body:not(#_hw) .fmd-logo img {
  display: block;
  width: auto;
  height: 22px;
  user-select: none;
  -webkit-user-drag: none;
}
html body:not(#_hw) .fmd-logo .fmd-short { display: none; height: 24px; }
html body:not(#_hw) .topbar .fmd-logo img { height: 20px; }
html body:not(#_hw) .nav .fmd-logo img,
html body:not(#_hw) > nav .fmd-logo img { height: 24px; }
html body:not(#_hw) .footer-logo .fmd-logo img { height: 20px; }
@media (max-width: 760px) {
  html body:not(#_hw) .topbar .fmd-logo .fmd-short,
  html body:not(#_hw) > nav .fmd-logo .fmd-short,
  html body:not(#_hw) .nav .fmd-logo .fmd-short { display: block; height: 26px; }
  html body:not(#_hw) .topbar .fmd-logo .fmd-short { height: 22px; }
}
/* het logo houdt zijn eigen merkkleuren, geen inversie of blend */
html body:not(#_hw) .fmd-logo img,
html body:not(#_hw) .fmd-logo img.fmd-full,
html body:not(#_hw) .fmd-logo img.fmd-short {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
/* logo op het PIN-scherm en de inlogkaart */
html body:not(#_hw) .pin-logo,
html body:not(#_hw) .auth-brand {
  display: block;
  height: 22px;
  width: auto;
  margin: 0 auto 16px;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html body:not(#_hw) .auth-brand { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Tekstballon bij een feedbackpunt tijdens het afspelen: leesbaar en onder de
   golfvorm, net als de preview bij hoveren
   -------------------------------------------------------------------------- */
html body:not(#_hw) .fb-marker .fb-marker-bubble {
  top: calc(100% + 10px) !important;
  bottom: auto !important;
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border: 1px solid #0f1011 !important;
  border-radius: 7px !important;
  color: #eef0f1 !important;
  -webkit-text-fill-color: #eef0f1 !important;
  font: 400 12px/1.45 'DM Mono', monospace !important;
  letter-spacing: .02em !important;
  padding: 8px 10px !important;
  width: max-content !important;
  max-width: 260px;
  white-space: normal !important;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,.45) !important;
  text-shadow: none !important;
  z-index: 40;
}
html body:not(#_hw) .fb-marker .fb-marker-bubble .fb-bubble-time {
  color: #ffd9a0 !important;
  -webkit-text-fill-color: #ffd9a0 !important;
  opacity: 1 !important;
  margin-right: 8px !important;
  font-size: 10px !important;
}
/* pijltje wijst nu omhoog naar het punt */
html body:not(#_hw) .fb-marker .fb-marker-bubble::after {
  top: auto !important;
  bottom: 100% !important;
  border-top-color: transparent !important;
  border-bottom-color: #2f3236 !important;
}

/* de melding die tijdens het afspelen bij een feedbackpunt verschijnt */
html body:not(#_hw) .fb-playback-popup {
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border: 1px solid #0f1011 !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.5) !important;
  padding: 9px 12px !important;
}
html body:not(#_hw) .fb-playback-popup .fb-pp-text {
  color: #eef0f1 !important;
  -webkit-text-fill-color: #eef0f1 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
html body:not(#_hw) .fb-playback-popup .fb-pp-time {
  color: #ffd9a0 !important;
  -webkit-text-fill-color: #ffd9a0 !important;
  font-size: 10px !important;
  letter-spacing: .06em !important;
}
/* niet twee keer dezelfde tekst: de losse ballon blijft weg tijdens het afspelen */
html body:not(#_hw) .fb-marker .fb-marker-bubble { display: none !important; }

/* --------------------------------------------------------------------------
   Dashboard: cijfers horen bij je profiel, niet boven je projecten
   -------------------------------------------------------------------------- */
html body:not(#_hw) #profilePanel .stats-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
}
html body:not(#_hw) #profilePanel .stats-row .stat {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #121417, #0b0d0f);
  box-shadow: var(--hw-well);
}
html body:not(#_hw) #profilePanel .stats-row .stat-val { font-size: 18px !important; }
html body:not(#_hw) #profilePanel .stats-row .stat-label { color: #8b9096 !important; }
/* kaarten en hun plaatjes blijven binnen de rand */
html body:not(#_hw) #projectsGrid .project-card,
html body:not(#_hw) #projectsGrid .folder-card { overflow: hidden; }
html body:not(#_hw) #projectsGrid .proj-display,
html body:not(#_hw) #projectsGrid .folder-card-display { max-width: 100% !important; }
@media (max-width: 760px) {
  /* kruisje niet op de scheidingslijn van de kop */
  html body:not(#_hw) #profilePanel .profile-close-btn { top: 34px !important; right: 16px !important; }
}
/* tijdens het wegvegen geen eigen overgang op het profielvenster */
html body:not(#_hw) .profile-panel.is-vegen { transition: none !important; }

/* --------------------------------------------------------------------------
   Blind test: geen feedbackpunten zichtbaar, anders herken je de track eraan
   -------------------------------------------------------------------------- */
html body:not(#_hw) .app.blind-mode .fb-marker,
html body:not(#_hw) .app.blind-mode .fb-marker-bubble,
html body:not(#_hw) .app.blind-mode .fb-playback-popup,
html body:not(#_hw) .app.blind-mode .fb-hover-tip,
html body:not(#_hw) .app.blind-mode .marker-number { display: none !important; }

/* --------------------------------------------------------------------------
   Alle knoppen hetzelfde toetsgevoel: zelfde schaduw, zelfde indrukken.
   Geen sleufrand eromheen, alleen de toets zelf.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .note-notif-close,
html body:not(#_hw) #fbOvCreateSubmit,
html body:not(#_hw) .fb-pp-close,
html body:not(#_hw) .pin-submit,
html body:not(#_hw) .btn-empty-ghost {
  position: relative;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  border-radius: 6px !important;
  box-shadow: var(--hw-key-shadow) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  transition: transform .05s ease, box-shadow .05s ease, background .1s ease !important;
}
html body:not(#_hw) .note-notif-close:hover,
html body:not(#_hw) #fbOvCreateSubmit:hover {
  background: linear-gradient(180deg, #fff 0%, #ebebe7 100%) !important;
}
html body:not(#_hw) .note-notif-close:active,
html body:not(#_hw) #fbOvCreateSubmit:active,
html body:not(#_hw) .pin-submit:active {
  transform: translateY(2px) !important;
  box-shadow: var(--hw-key-shadow-down) !important;
}
/* het potloodje bij de titel blijft een los icoontje, geen toets */
html body:not(#_hw) .track-title-edit {
  width: 24px; height: 24px; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  opacity: .45; transition: opacity .15s ease, transform .15s ease;
}
html body:not(#_hw) .track-title-edit:hover { opacity: 1; transform: translateY(-1px); }

/* donkere knoppen: dezelfde opbouw als de hoofdknop, alleen in het donker */
html body:not(#_hw) .btn-primary,
html body:not(#_hw) .fb-popup-send-btn,
html body:not(#_hw) .folder-btn-primary,
html body:not(#_hw) .lm-btn-primary,
html body:not(#_hw) .auth-social-btn.is-dark {
  background: linear-gradient(180deg, #4a4f55 0%, #30343a 55%, #25282c 100%) !important;
  color: #fff !important;
  border: 1px solid #0b0c0d !important;
  border-radius: 7px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 3px 0 #101214,
    0 5px 2px rgba(0,0,0,.12),
    0 10px 18px -4px rgba(0,0,0,.3) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .btn-primary:hover,
html body:not(#_hw) .fb-popup-send-btn:hover,
html body:not(#_hw) .folder-btn-primary:hover,
html body:not(#_hw) .lm-btn-primary:hover {
  background: linear-gradient(180deg, #555a61 0%, #383d42 55%, #2a2d31 100%) !important;
}
html body:not(#_hw) .btn-primary:active,
html body:not(#_hw) .fb-popup-send-btn:active,
html body:not(#_hw) .folder-btn-primary:active,
html body:not(#_hw) .lm-btn-primary:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 0 #101214, 0 2px 4px rgba(0,0,0,.2) !important;
}

/* rode knoppen (verwijderen, afkeuren) krijgen dezelfde opbouw in hun eigen kleur */
html body:not(#_hw) .folder-btn-danger,
html body:not(#_hw) .fb-selected-delete,
html body:not(#_hw) .settings-remove-btn.is-danger {
  background: linear-gradient(180deg, #d1584d 0%, #b0392f 55%, #9c2f26 100%) !important;
  color: #fff !important;
  border: 1px solid #7c231c !important;
  border-radius: 7px !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.1),
    0 3px 0 #7c231c,
    0 5px 2px rgba(0,0,0,.12),
    0 10px 18px -4px rgba(0,0,0,.28) !important;
  transition: transform .05s ease, box-shadow .05s ease !important;
}
html body:not(#_hw) .folder-btn-danger:active,
html body:not(#_hw) .fb-selected-delete:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.28), 0 0 0 #7c231c !important;
}

/* laatste vangnet: elke knop die nog plat is krijgt hetzelfde toetsgevoel */
html body:not(#_hw) .settings-panel button:not([class*="btn"]):not(.settings-close):not(.lm-btn),
html body:not(#_hw) .fb-popup button:not([class*="btn"]):not(.fb-popup-close),
html body:not(#_hw) .profile-dropdown button:not([class*="btn"]):not(.profile-btn) {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
  border: 1px solid #a7abaf !important;
  border-radius: 6px !important;
  box-shadow: var(--hw-key-shadow) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
}
/* inloggen via Google/GitHub staat nog niet aan: knoppen rustiger tonen */
html body:not(#_hw) .auth-social-btn { opacity: .72; }
html body:not(#_hw) .auth-social-btn:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   Prijzenpagina: drie platen naast elkaar
   -------------------------------------------------------------------------- */
html body:not(#_hw) .pricing-section { padding: 120px 40px 90px; }
html body:not(#_hw) .pricing-inner { max-width: 1120px; margin: 0 auto; }
html body:not(#_hw) .pricing-inner .section-sub { max-width: 560px; }
html body:not(#_hw) .plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
  align-items: stretch;
}
html body:not(#_hw) .plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border-radius: 14px;
  background: var(--hw-brush), linear-gradient(180deg, #f3f4f2 0%, var(--hw-plate) 60%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #b0b4b8, 0 16px 28px -18px rgba(20,24,28,.5);
}
html body:not(#_hw) .plan.is-featured {
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a8acb0, 0 0 0 2px var(--hw-a-ink), 0 20px 34px -18px rgba(20,24,28,.55);
}
html body:not(#_hw) .plan.is-featured::before {
  content: 'Most picked';
  position: absolute;
  top: -11px; left: 24px;
  padding: 3px 10px;
  border-radius: 20px;
  background: linear-gradient(180deg, #6f55f2, var(--hw-a-ink));
  color: #fff;
  font: 500 9px/1.6 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(86,64,216,.35);
}
html body:not(#_hw) .plan-name {
  font: 700 13px/1 'DM Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hw-ink-mid);
}
html body:not(#_hw) .plan-price { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; }
html body:not(#_hw) .plan-amount { font: 800 38px/1 'Syne', sans-serif; color: var(--hw-ink); letter-spacing: -.02em; }
html body:not(#_hw) .plan-per { font: 400 11px/1 'DM Mono', monospace; color: var(--hw-ink-mid); }
html body:not(#_hw) .plan-note { font-size: 13px; line-height: 1.5; color: var(--hw-ink-mid); margin: 0 0 18px; }
html body:not(#_hw) .plan-list { list-style: none; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid rgba(0,0,0,.09); flex: 1; }
html body:not(#_hw) .plan-list li {
  position: relative;
  padding: 0 0 10px 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hw-ink);
}
html body:not(#_hw) .plan-list li::before {
  content: '';
  position: absolute;
  left: 2px; top: 7px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--hw-a-ink);
  border-bottom: 2px solid var(--hw-a-ink);
  transform: rotate(-45deg);
}
html body:not(#_hw) .plan-btn { width: 100%; height: 42px; justify-content: center; }
html body:not(#_hw) .pricing-foot { margin-top: 30px; font-size: 12px; color: var(--hw-ink-mid); max-width: 620px; }
@media (max-width: 900px) {
  html body:not(#_hw) .plan-grid { grid-template-columns: 1fr; gap: 26px; }
  html body:not(#_hw) .pricing-section { padding: 90px 20px 70px; }
}

/* --------------------------------------------------------------------------
   Laadscherm tijdens het inladen van sporen
   -------------------------------------------------------------------------- */
html body:not(#_hw) .hw-loader {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,24,28,.32);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
html body:not(#_hw) .hw-loader.open { opacity: 1; pointer-events: auto; }
html body:not(#_hw) .hw-loader-card {
  width: min(360px, calc(100vw - 40px));
  padding: 22px 22px 20px;
  border-radius: 14px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 50%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 24px 60px -12px rgba(20,24,28,.45);
  animation: hwLoaderIn .28s var(--hw-ease-out) both;
}
@keyframes hwLoaderIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
html body:not(#_hw) .hw-loader-title {
  font: 800 16px/1.2 'Syne', sans-serif;
  color: var(--hw-ink);
  letter-spacing: -.01em;
}
html body:not(#_hw) .hw-loader-sub {
  font: 400 11px/1.4 'DM Mono', monospace;
  color: var(--hw-ink-mid);
  margin: 4px 0 14px;
}
html body:not(#_hw) .hw-loader-bar {
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #d9dcdf, #e9ebec);
  box-shadow: var(--hw-well);
  overflow: hidden;
}
html body:not(#_hw) .hw-loader-bar i {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: 6px;
  background: linear-gradient(180deg, #8f76ff, var(--hw-a-ink));
  box-shadow: 0 0 8px rgba(143,118,255,.6);
  transition: width .3s var(--hw-ease-out);
}
html body:not(#_hw) .hw-loader-rows { margin-top: 14px; display: grid; gap: 6px; }
html body:not(#_hw) .hw-loader-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font: 400 11px/1.4 'DM Mono', monospace;
  color: var(--hw-ink-mid);
}
html body:not(#_hw) .hw-loader-naam {
  color: var(--hw-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 62%;
}
html body:not(#_hw) .hw-loader-row.is-done .hw-loader-fase { color: var(--hw-a-ink); }

/* laadscherm: dicht en meteen zichtbaar, niets van de lege staat erachter */
html body:not(#_hw) .hw-loader {
  background: var(--hw-brush), linear-gradient(180deg, #e4e6e8 0%, #d3d6d9 100%) !important;
  backdrop-filter: none !important;
}
html body:not(#_hw) .hw-loader.direct { transition: none !important; }
html.hw-laden body:not(#_hw) #emptyState { visibility: hidden !important; }
/* laadscherm: alles netjes gecentreerd onder de balk */
html body:not(#_hw) .hw-loader-card { text-align: center; }
html body:not(#_hw) .hw-loader-rows { justify-items: center; gap: 8px; }
html body:not(#_hw) .hw-loader-row {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
}
html body:not(#_hw) .hw-loader-naam { max-width: 100%; text-align: center; }
html body:not(#_hw) .hw-loader-fase { font-size: 10px; color: var(--hw-ink-mid); }
/* laadscherm: alleen titel, stap en balk; geen bestandsnamen eronder */
html body:not(#_hw) .hw-loader-rows { display: none !important; }

/* Engineer/Listener: geen vraagteken meer, Listener is een knop naar de klantweergave */
html body:not(#_hw) .mode-badge.mode-switch { cursor: default !important; }
html body:not(#_hw) .mode-switch .mode-seg.is-clickable {
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
html body:not(#_hw) .mode-switch .mode-seg.is-clickable:hover {
  color: var(--hw-ink) !important;
  background: linear-gradient(180deg, #fafaf8, #e3e3df);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.15);
}
html body:not(#_hw) .mode-switch .mode-seg.is-clickable:active { transform: translateY(1px); }

/* Approve in merkpaars in plaats van rood */
html body:not(#_hw) .approve-btn {
  background: linear-gradient(180deg, #7b62f6 0%, #5640D8 55%, #4631b8 100%) !important;
  border: 1px solid #33239a !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,.3) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 0 rgba(0,0,0,.08),
    0 3px 0 #33239a,
    0 5px 2px rgba(0,0,0,.1),
    0 10px 18px -4px rgba(86,64,216,.35) !important;
}
html body:not(#_hw) .approve-btn:hover { background: linear-gradient(180deg, #8a73f8 0%, #614bdf 55%, #4d37c2 100%) !important; }
html body:not(#_hw) .approve-btn:active {
  transform: translateY(3px) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 #33239a !important;
}
/* bevestigen van een approve in hetzelfde paars */
html body:not(#_hw) .approve-dialog-btn.btn-yes {
  background: linear-gradient(180deg, #7b62f6 0%, #5640D8 55%, #4631b8 100%) !important;
  border: 1px solid #33239a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #33239a, 0 4px 2px rgba(0,0,0,.14), var(--hw-slot) !important;
}
/* luisteraar: DEMO/MIX-namen zijn geen knop */
html body.is-listener:not(#_hw) .track-letter,
html body.is-listener:not(#_hw) .track-title { cursor: default !important; }
/* klant komt binnen via een link: geen knop om zelf tracks te laden */
html body.is-listener:not(#_hw) #openEngineerBtn,
html body.is-listener:not(#_hw) .btn-open-engineer { display: none !important; }

/* --------------------------------------------------------------------------
   Meldingen van de klant (goedgekeurd / ingetrokken)
   -------------------------------------------------------------------------- */
html body:not(#_hw) .hw-notices {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 9400;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  pointer-events: none;
}
html body:not(#_hw) .hw-notice {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 14px;
  border-radius: 12px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 55%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 18px 40px -12px rgba(20,24,28,.45);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity .3s var(--hw-ease-out), transform .3s var(--hw-ease-out);
}
html body:not(#_hw) .hw-notice.is-in { opacity: 1; transform: none; }
html body:not(#_hw) .hw-notice.is-leaving { opacity: 0; transform: translateX(18px); }
html body:not(#_hw) .hw-notice-icon {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 'Space Grotesk', sans-serif;
  color: #fff;
  background: linear-gradient(180deg, #7b62f6, var(--hw-a-ink));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #33239a, 0 0 12px rgba(86,64,216,.35);
}
html body:not(#_hw) .hw-notice.is-revoked .hw-notice-icon {
  background: linear-gradient(180deg, #8a8f95, #5d6268);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 0 #3f4348;
}
html body:not(#_hw) .hw-notice-body { flex: 1; min-width: 0; }
html body:not(#_hw) .hw-notice-title { font: 800 14px/1.2 'Syne', sans-serif; color: var(--hw-ink); }
html body:not(#_hw) .hw-notice-text { font-size: 13px; line-height: 1.45; color: var(--hw-ink); margin-top: 3px; }
html body:not(#_hw) .hw-notice-time { font: 400 10px/1.4 'DM Mono', monospace; color: var(--hw-ink-mid); margin-top: 6px; }
html body:not(#_hw) .hw-notice-close {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid #b4b8bc;
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo));
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb;
  color: var(--hw-ink-mid);
  font-size: 11px;
  cursor: pointer;
}
@media (max-width: 760px) {
  html body:not(#_hw) .hw-notices { top: 70px; right: 14px; left: 14px; width: auto; }
}

/* --------------------------------------------------------------------------
   Meldingencentrum in het dashboard
   -------------------------------------------------------------------------- */
html body:not(#_hw) .notif-btn {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--hw-ink);
  background: radial-gradient(circle at 50% 30%, #fff 0%, #eceeef 45%, #cfd3d6 100%);
  border: 1px solid #9ea3a8;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #9da1a5, 0 4px 6px rgba(0,0,0,.14);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .06s ease;
}
html body:not(#_hw) .notif-btn:active,
html body:not(#_hw) .notif-btn.is-open { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0,0,0,.18), 0 1px 0 #9da1a5; }
html body:not(#_hw) .notif-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 17px; height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  font: 600 9.5px/17px 'DM Mono', monospace;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, #7b62f6, var(--hw-a-ink));
  box-shadow: 0 0 0 2px #e4e6e8, 0 0 8px rgba(86,64,216,.5);
}
html body:not(#_hw) .notif-count[hidden] { display: none; }
html body:not(#_hw) .notif-panel {
  position: fixed;
  top: 64px; right: 16px;
  width: min(360px, calc(100vw - 32px));
  max-height: min(70vh, 520px);
  display: flex; flex-direction: column;
  z-index: 9150;
  border-radius: 14px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 50%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 24px 60px -12px rgba(20,24,28,.45);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .2s var(--hw-ease-out), transform .2s var(--hw-ease-out);
}
html body:not(#_hw) .notif-panel.open { opacity: 1; transform: none; pointer-events: auto; }
html body:not(#_hw) .notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
html body:not(#_hw) .notif-title { font: 800 15px/1 'Syne', sans-serif; color: var(--hw-ink); }
html body:not(#_hw) .notif-settings {
  height: 26px; padding: 0 10px; border-radius: 6px;
  font: 500 9.5px/1 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hw-ink);
  background: linear-gradient(180deg, var(--hw-key), var(--hw-key-lo));
  border: 1px solid #b4b8bc;
  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #b3b7bb;
  cursor: pointer;
}
html body:not(#_hw) .notif-list { overflow-y: auto; padding: 8px; display: grid; gap: 6px; }
html body:not(#_hw) .notif-empty { padding: 22px 16px; text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--hw-ink-mid); }
html body:not(#_hw) .notif-item {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%;
  padding: 10px 11px;
  text-align: left;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--hw-ink);
}
html body:not(#_hw) .notif-item:hover { background: rgba(255,255,255,.55); border-color: rgba(0,0,0,.06); }
html body:not(#_hw) .notif-item.is-new {
  background: linear-gradient(180deg, #fbfbf9, #f0eefb);
  border-color: rgba(86,64,216,.22);
}
html body:not(#_hw) .notif-icon {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px/1 'Space Grotesk', sans-serif; color: #fff;
  background: linear-gradient(180deg, #7b62f6, var(--hw-a-ink));
}
html body:not(#_hw) .notif-item.is-revoked .notif-icon { background: linear-gradient(180deg, #8a8f95, #5d6268); }
html body:not(#_hw) .notif-text { font-size: 13px; line-height: 1.4; min-width: 0; }
html body:not(#_hw) .notif-text b { font-weight: 700; }
html body:not(#_hw) .notif-text em {
  display: block; font-style: normal;
  font: 400 10px/1.4 'DM Mono', monospace; color: var(--hw-ink-mid); margin-top: 2px;
}

/* 'Approved' op de projectkaart */
html body:not(#_hw) .proj-display { position: relative; }
html body:not(#_hw) .proj-approved {
  position: absolute;
  left: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 7px;
  border-radius: 20px;
  font: 600 9.5px/1 'DM Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, rgba(123,98,246,.96), rgba(86,64,216,.96));
  box-shadow: 0 2px 8px rgba(40,24,140,.35), inset 0 1px 0 rgba(255,255,255,.3);
  pointer-events: none;
}

/* meldingsinstellingen in het profiel */
html body:not(#_hw) .notif-pref {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}
html body:not(#_hw) .notif-pref input { margin-top: 3px; accent-color: var(--hw-a-ink); width: 15px; height: 15px; flex: none; }
html body:not(#_hw) .notif-pref span { display: flex; flex-direction: column; gap: 2px; }
html body:not(#_hw) .notif-pref b { font-size: 13px; font-weight: 600; color: var(--hw-ink); }
html body:not(#_hw) .notif-pref i { font-style: normal; font-size: 11.5px; line-height: 1.4; color: var(--hw-ink-mid); }
html body:not(#_hw) .notif-pref.is-soon { opacity: .55; cursor: default; }
@media (max-width: 760px) {
  html body:not(#_hw) .notif-panel { top: 60px; right: 10px; left: 10px; width: auto; }
}
/* al goedgekeurd: ingedrukte, rustige toets in plaats van een actieknop */
html body:not(#_hw) .approve-btn.is-approved {
  background: linear-gradient(180deg, #ebe8fb 0%, #dcd6f7 100%) !important;
  color: var(--hw-a-ink) !important;
  -webkit-text-fill-color: var(--hw-a-ink) !important;
  border: 1px solid rgba(86,64,216,.45) !important;
  text-shadow: none !important;
  box-shadow: inset 0 2px 4px rgba(40,24,140,.18), 0 1px 0 rgba(255,255,255,.8) !important;
  transform: translateY(2px);
}
html body:not(#_hw) .approve-timestamp {
  font: 400 10.5px/1.4 'DM Mono', monospace !important;
  color: var(--hw-a-ink) !important;
  margin-top: 6px;
  text-align: right;
}

/* play-knop: geen vlakke ring meer, maar een smalle naad in het paneel en een echte slagschaduw */
html body:not(#_hw) .play-btn {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.9),
    inset 0 -2px 3px rgba(0,0,0,.18),
    0 0 0 1px rgba(20,24,28,.18),
    0 1px 1px rgba(20,24,28,.12),
    0 5px 9px -3px rgba(20,24,28,.32),
    0 12px 20px -10px rgba(20,24,28,.30) !important;
}
html body:not(#_hw) .play-btn:active {
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,.22),
    inset 0 -1px 1px rgba(255,255,255,.5),
    0 0 0 1px rgba(20,24,28,.2),
    0 1px 2px rgba(20,24,28,.18) !important;
}

/* --------------------------------------------------------------------------
   Feedback die omhoog komt tijdens het afspelen (onder de golfvorm)
   -------------------------------------------------------------------------- */
html body:not(#_hw) .fb-playback-popup { display: none !important; }   /* vervangen door .fb-live */
html body:not(#_hw) .track-card,
html body:not(#_hw) .track-extra { position: relative; }
html body:not(#_hw) .fb-live {
  position: absolute;
  z-index: 25;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: min(320px, calc(100% - 24px));
  padding: 9px 12px 9px 10px;
  border-radius: 9px;
  background: linear-gradient(180deg, #2f3236, #1d1f22);
  border: 1px solid #0f1011;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.55);
  color: #eef0f1;
  font: 400 12.5px/1.45 'DM Mono', monospace;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(.98);
  transform-origin: var(--pijl, 20px) top;
  transition: opacity .22s var(--hw-ease-out), transform .22s var(--hw-ease-out);
}
html body:not(#_hw) .fb-live.is-in { opacity: 1; transform: none; }
html body:not(#_hw) .fb-live::before {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(var(--pijl, 20px) - 6px);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: #2f3236;
}
html body:not(#_hw) .fb-live-dot {
  flex: none;
  width: 8px; height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}
html body:not(#_hw) .fb-live-tc {
  flex: none;
  color: #ffd9a0;
  font-size: 10.5px;
  margin-top: 1px;
}
html body:not(#_hw) .fb-live-text { color: #eef0f1; word-break: break-word; }
html body:not(#_hw) .app.blind-mode .fb-live { display: none !important; }

/* --------------------------------------------------------------------------
   Statuslampje overal hetzelfde: paars en gloeiend (was groen in een project)
   -------------------------------------------------------------------------- */
html body:not(#_hw) .profile-status {
  background: radial-gradient(circle at 35% 35%, #efeaff, #8f76ff 55%, #4a33c2) !important;
  box-shadow: 0 0 0 2px #e7e9eb, 0 0 6px rgba(143,118,255,.95), 0 0 12px rgba(86,64,216,.55) !important;
}
html body:not(#_hw) .mode-switch .mode-seg.is-on i,
html body.is-listener:not(#_hw) .mode-switch .mode-seg.is-on i {
  background: radial-gradient(circle at 35% 35%, #f0ebff, #8f76ff 55%, #4a33c2) !important;
  box-shadow: 0 0 5px rgba(143,118,255,.9), 0 0 11px rgba(86,64,216,.5) !important;
}
html body:not(#_hw) .nav-avatar .dot {
  background: radial-gradient(circle at 35% 35%, #efeaff, #8f76ff 55%, #4a33c2) !important;
  border-color: #e7e9eb !important;
  box-shadow: 0 0 5px rgba(143,118,255,.9), 0 0 11px rgba(86,64,216,.5) !important;
}

/* golfvorm wordt nog berekend: rustige streep die meeloopt */
html body:not(#_hw) .track-card.is-analysing .waveform-container::after {
  content: 'Analysing…';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font: 400 10px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  animation: hwPuls 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hwPuls { 0%,100% { opacity: .35; } 50% { opacity: .85; } }

/* --------------------------------------------------------------------------
   'My plan' in je profiel: abonnement, opslag en wat er in je account zit
   -------------------------------------------------------------------------- */
html body:not(#_hw) .plan-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
html body:not(#_hw) .plan-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font: 600 10px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #7b62f6, var(--hw-a-ink));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 6px rgba(86,64,216,.35);
}
html body:not(#_hw) .plan-sub { font-size: 11.5px; color: var(--hw-ink-mid); }
html body:not(#_hw) .plan-meter-bar {
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(180deg, #d9dcdf, #e9ebec);
  box-shadow: var(--hw-well);
  overflow: hidden;
}
html body:not(#_hw) .plan-meter-bar i {
  display: block; height: 100%; width: 2%;
  border-radius: 5px;
  background: linear-gradient(180deg, #8f76ff, var(--hw-a-ink));
  box-shadow: 0 0 8px rgba(143,118,255,.55);
  transition: width .5s var(--hw-ease-out);
}
html body:not(#_hw) .plan-meter-bar i.is-vol { background: linear-gradient(180deg, #e0713f, #b8431f); box-shadow: 0 0 8px rgba(200,80,40,.5); }
html body:not(#_hw) .plan-meter-txt {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font: 400 10.5px/1.4 'DM Mono', monospace;
  color: var(--hw-ink-mid);
}
html body:not(#_hw) .plan-facts { margin-top: 12px; display: grid; gap: 6px; }
html body:not(#_hw) .plan-fact {
  display: flex; justify-content: space-between;
  font-size: 12px;
  color: var(--hw-ink-mid);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
html body:not(#_hw) .plan-fact b { color: var(--hw-ink); font-weight: 600; }
html body:not(#_hw) .plan-link {
  display: inline-block;
  margin-top: 12px;
  font: 500 10px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hw-a-ink) !important;
  text-decoration: none;
}
html body:not(#_hw) .plan-link:hover { text-decoration: underline; }
html body:not(#_hw) .plan-acties { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
html body:not(#_hw) .plan-acties .plan-link { margin-top: 0; }
html body:not(#_hw) .plan-upgrade {
  display: inline-flex; align-items: center;
  height: 30px; padding: 0 14px;
  border-radius: 7px;
  font: 600 10px/1 'DM Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff !important;
  background: linear-gradient(180deg, #7b62f6 0%, #5640D8 55%, #4631b8 100%);
  border: 1px solid #33239a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 #33239a, 0 6px 12px -6px rgba(86,64,216,.5);
}
html body:not(#_hw) .plan-upgrade:active { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 0 0 #33239a; }

/* --------------------------------------------------------------------------
   Referentie kiezen: eigen bestand of een fragment van een bekende track
   -------------------------------------------------------------------------- */
html body:not(#_hw) .ref-kies-waas {
  position: fixed; inset: 0; z-index: 9600;
  background: rgba(16,20,24,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; transition: opacity .18s var(--hw-ease-out);
}
html body:not(#_hw) .ref-kies-waas.open { opacity: 1; }
html body:not(#_hw) .ref-kies {
  width: min(520px, 100%);
  max-height: min(78vh, 680px);
  display: flex; flex-direction: column;
  border-radius: 14px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 55%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 28px 60px -18px rgba(20,24,28,.55);
  transform: translateY(10px) scale(.99);
  transition: transform .18s var(--hw-ease-out);
}
html body:not(#_hw) .ref-kies-waas.open .ref-kies { transform: none; }
html body:not(#_hw) .ref-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
html body:not(#_hw) .ref-kop h3 {
  margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .2px; color: var(--hw-ink);
}
html body:not(#_hw) .ref-sluit {
  border: 0; background: none; cursor: pointer; color: var(--hw-ink-dim);
  font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px;
}
html body:not(#_hw) .ref-sluit:hover { color: var(--hw-ink); background: rgba(0,0,0,.05); }
html body:not(#_hw) .ref-body { padding: 14px 16px 16px; overflow: auto; }
html body:not(#_hw) .ref-uitleg {
  margin: 0 0 12px; font-size: 12px; line-height: 1.5; color: var(--hw-ink-mid);
}
html body:not(#_hw) .ref-bestand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px; margin-bottom: 14px; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--hw-plate-edge);
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot);
  font-size: 13px; font-weight: 600; color: var(--hw-ink);
}
html body:not(#_hw) .ref-bestand:hover { filter: brightness(1.03); }
html body:not(#_hw) .ref-of {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--hw-ink-dim);
}
html body:not(#_hw) .ref-of::before,
html body:not(#_hw) .ref-of::after {
  content: ''; flex: 1; height: 1px; background: rgba(0,0,0,.10);
}
html body:not(#_hw) .ref-zoekrij { display: flex; gap: 8px; }
html body:not(#_hw) .ref-zoekrij input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 13px;
  border-radius: 8px; border: 1px solid var(--hw-plate-edge);
  background: #fbfbf9; color: var(--hw-ink);
  box-shadow: inset 0 1px 3px rgba(20,24,28,.10);
}
html body:not(#_hw) .ref-zoekrij input:focus { outline: 2px solid var(--hw-a); outline-offset: 1px; }
html body:not(#_hw) .ref-zoekrij button {
  padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 8px; border: 1px solid var(--hw-plate-edge); color: var(--hw-ink);
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot);
}
html body:not(#_hw) .ref-lijst { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
html body:not(#_hw) .ref-rij {
  display: flex; align-items: center; gap: 10px; text-align: left; cursor: pointer;
  padding: 7px; border-radius: 9px; border: 1px solid transparent; background: none;
}
html body:not(#_hw) .ref-rij:hover { background: rgba(255,255,255,.65); border-color: var(--hw-plate-edge); }
html body:not(#_hw) .ref-rij img { width: 40px; height: 40px; border-radius: 5px; flex: none; }
html body:not(#_hw) .ref-rij-tekst { min-width: 0; }
html body:not(#_hw) .ref-rij b {
  display: block; font-size: 13px; font-weight: 600; color: var(--hw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body:not(#_hw) .ref-rij span {
  display: block; font-size: 11.5px; color: var(--hw-ink-mid);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html body:not(#_hw) .ref-status { margin-top: 12px; font-size: 12px; color: var(--hw-ink-mid); }

/* Twee plannen naast elkaar (Free en Pro) */
html body:not(#_hw) .plan-grid-2 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
  html body:not(#_hw) .plan-grid-2 { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   Pro-functie: vriendelijke uitleg in plaats van een knop die niets doet
   -------------------------------------------------------------------------- */
html body:not(#_hw) .pro-waas {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(16,20,24,.55);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  opacity: 0; transition: opacity .18s var(--hw-ease-out);
}
html body:not(#_hw) .pro-waas.open { opacity: 1; }
html body:not(#_hw) .pro-doos {
  width: min(400px, 100%);
  padding: 22px 22px 18px;
  text-align: center;
  border-radius: 14px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 55%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 28px 60px -18px rgba(20,24,28,.55);
  transform: translateY(10px) scale(.99);
  transition: transform .18s var(--hw-ease-out);
}
html body:not(#_hw) .pro-waas.open .pro-doos { transform: none; }
html body:not(#_hw) .pro-merk {
  display: inline-block; margin-bottom: 12px; padding: 4px 11px;
  border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 1.6px;
  background: linear-gradient(180deg, #6f55f2 0%, #5640D8 100%); color: #fff;
}
html body:not(#_hw) .pro-doos h3 {
  margin: 0 0 8px; font-size: 16px; font-weight: 650; color: var(--hw-ink);
}
html body:not(#_hw) .pro-doos p {
  margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--hw-ink-mid);
}
html body:not(#_hw) .pro-knoppen { display: flex; gap: 8px; }
html body:not(#_hw) .pro-knoppen button {
  flex: 1; padding: 11px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--hw-plate-edge); color: var(--hw-ink);
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot);
}
html body:not(#_hw) .pro-knoppen button.hoofd {
  background: linear-gradient(180deg, #6f55f2 0%, #5640D8 100%);
  border-color: #4b35c4; color: #fff;
}
html body:not(#_hw) .pro-knoppen button:hover { filter: brightness(1.04); }

/* --------------------------------------------------------------------------
   Menuknop op de telefoon: zonder deze knop waren How it works en Pricing
   op een klein scherm niet te bereiken.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .nav-menu-knop { display: none; }
html body:not(#_hw) .nav-menu { display: none; }

@media (max-width: 760px) {
  html body:not(#_hw) .nav-menu-knop {
    position: relative;
    display: block;
    width: 38px; height: 34px; flex: none; cursor: pointer; padding: 0;
    border-radius: 9px; border: 1px solid var(--hw-plate-edge);
    background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
    box-shadow: var(--hw-slot);
  }
  /* de schuif-laag */
  html body:not(#_hw) .nav-menu-knop span {
    position: absolute; left: 11px; right: 11px; height: 2px;
    transition: transform .16s var(--hw-ease-out) .14s, opacity .1s linear .12s;
  }
  html body:not(#_hw) .nav-menu-knop span:nth-child(1) { top: calc(50% - 7px); }
  html body:not(#_hw) .nav-menu-knop span:nth-child(2) { top: calc(50% - 1px); }
  html body:not(#_hw) .nav-menu-knop span:nth-child(3) { top: calc(50% + 5px); }
  /* de draai-laag */
  html body:not(#_hw) .nav-menu-knop span i {
    display: block; height: 2px; border-radius: 2px; background: var(--hw-ink);
    transition: transform .16s var(--hw-ease-out);
  }
  /* open: eerst naar het midden schuiven, daarna draaien */
  html body:not(#_hw) .nav-menu-knop.open span {
    transition-delay: 0s;
  }
  html body:not(#_hw) .nav-menu-knop.open span:nth-child(1) { transform: translateY(6px); }
  html body:not(#_hw) .nav-menu-knop.open span:nth-child(3) { transform: translateY(-6px); }
  html body:not(#_hw) .nav-menu-knop.open span:nth-child(2) { opacity: 0; transition-delay: 0s; }
  html body:not(#_hw) .nav-menu-knop.open span i { transition-delay: .15s; }
  html body:not(#_hw) .nav-menu-knop.open span:nth-child(1) i { transform: rotate(45deg); }
  html body:not(#_hw) .nav-menu-knop.open span:nth-child(3) i { transform: rotate(-45deg); }

  html body:not(#_hw) .nav-menu {
    position: absolute; top: calc(100% + 8px); left: 14px; right: 14px;
    display: flex; flex-direction: column; padding: 6px;
    border-radius: 12px;
    background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 60%, var(--hw-plate-lo) 100%);
    border: 1px solid var(--hw-plate-edge);
    box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 20px 40px -18px rgba(20,24,28,.45);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .18s var(--hw-ease-out), transform .18s var(--hw-ease-out);
    z-index: 60;
  }
  html body:not(#_hw) .nav-menu.open { display: flex; opacity: 1; transform: none; pointer-events: auto; }
  html body:not(#_hw) .nav-menu a {
    padding: 11px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500; text-decoration: none; color: var(--hw-ink);
  }
  html body:not(#_hw) .nav-menu a:active { background: rgba(0,0,0,.06); }
  html body:not(#_hw) .nav { position: relative; }
}

/* Live: er luistert nu iemand mee in dit project */
html body:not(#_hw) .live-luister {
  display: none; align-items: center; gap: 7px;
  margin-right: 10px; padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--hw-plate-edge);
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%);
  box-shadow: var(--hw-slot);
  font-size: 11px; font-weight: 600; letter-spacing: .2px; color: var(--hw-ink-mid);
  white-space: nowrap;
}
html body:not(#_hw) .live-luister.aan { display: inline-flex; }
html body:not(#_hw) .live-luister i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #6f55f2;
  box-shadow: 0 0 0 0 rgba(111,85,242,.55);
  animation: liveKlop 1.8s ease-out infinite;
}
@keyframes liveKlop {
  0%   { box-shadow: 0 0 0 0 rgba(111,85,242,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(111,85,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,85,242,0); }
}
@media (max-width: 760px) {
  html body:not(#_hw) .live-luister span { display: none; }
  html body:not(#_hw) .live-luister { padding: 5px 8px; margin-right: 6px; }
}

/* Feedbackpuntje op de golfvorm: het donkerpaars viel weg tegen de donkere
   golfvorm. Het bolletje is nu licht, met de kleur van het spoor als gloed. */
html body:not(#_hw) .fb-marker-dot {
  background: #f2eeff !important;
  border: 2px solid rgba(18,20,24,.85) !important;
  box-shadow: 0 0 9px currentColor, 0 0 0 1px rgba(255,255,255,.4), 0 1px 3px rgba(0,0,0,.55) !important;
}
html body:not(#_hw) .fb-marker:hover .fb-marker-dot {
  background: #fff !important;
  box-shadow: 0 0 14px currentColor, 0 0 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.6) !important;
}
html body:not(#_hw) .fb-marker-line {
  background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.55) 100%) !important;
  opacity: .75 !important;
  width: 2px !important;
}
html body:not(#_hw) .fb-marker:hover .fb-marker-line { opacity: 1 !important; }

/* ==========================================================================
   ZWEVENDE BEDIENING
   Geen balk over de volle breedte meer: het logo staat linksboven, de knoppen
   zweven rechtsboven als losse toetsen. Zelfde materiaal als de rest, alleen
   zonder de plank eronder — zo begint de pagina bij de inhoud.
   ========================================================================== */

/* ── landingspagina's ── */
html body:not(#_hw) .nav {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 20px 26px !important;
  pointer-events: none;
}
html body:not(#_hw) .nav > * { pointer-events: auto; }
html body:not(#_hw) .nav.scrolled { background: none !important; }
html body:not(#_hw) .nav .nav-links { gap: 22px !important; }
html body:not(#_hw) .nav .nav-links a {
  font-size: 12px !important;
  letter-spacing: .3px;
  color: var(--hw-ink-mid) !important;
  text-decoration: none;
}
html body:not(#_hw) .nav .nav-links a:hover { color: var(--hw-ink) !important; }

/* ── dashboard ── */
html body:not(#_hw) nav {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 18px 22px !important;
}

/* ── app en listener ── */
html body:not(#_hw) .topbar {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 20px !important;
  position: relative;
  z-index: 40;
}
html body:not(#_hw) .topbar::before,
html body:not(#_hw) .topbar::after { display: none !important; }
html body:not(#_hw) .topbar img { mix-blend-mode: normal !important; }

/* ── de toetsen zelf: allemaal even groot en rond ── */
html body:not(#_hw) .topbar-actions,
html body:not(#_hw) .nav-right { gap: 9px !important; align-items: center; }

html body:not(#_hw) .topbar-actions .dash-btn,
html body:not(#_hw) .topbar-actions .btn-icon,
html body:not(#_hw) .topbar-actions .settings-btn,
html body:not(#_hw) .topbar-actions .profile-btn,
html body:not(#_hw) .nav-right .notif-btn,
html body:not(#_hw) .nav-right .nav-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hw-plate-edge) !important;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  box-shadow: var(--hw-slot) !important;
  color: var(--hw-ink) !important;
}
html body:not(#_hw) .topbar-actions .dash-btn:hover,
html body:not(#_hw) .topbar-actions .btn-icon:hover,
html body:not(#_hw) .topbar-actions .settings-btn:hover,
html body:not(#_hw) .topbar-actions .profile-btn:hover,
html body:not(#_hw) .nav-right .notif-btn:hover,
html body:not(#_hw) .nav-right .nav-avatar:hover { filter: brightness(1.04); }

html body:not(#_hw) .topbar-actions .dash-btn:active,
html body:not(#_hw) .topbar-actions .btn-icon:active,
html body:not(#_hw) .topbar-actions .settings-btn:active,
html body:not(#_hw) .nav-right .notif-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(20,24,28,.16) !important;
}

/* de tekst 'Dashboard' hoort bij het pijltje, maar alleen voor schermlezers */
html body:not(#_hw) .dash-tekst {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
html body:not(#_hw) .topbar-actions .dash-btn svg { width: 13px; height: 13px; }

/* de modus is een rustig bijschrift, geen knop: er valt niets te kiezen */
html body:not(#_hw) .mode-badge.mode-switch,
html body:not(#_hw) .topbar .mode-badge.mode-switch,
html body:not(#_hw) .mode-badge,
html body:not(#_hw) .mode-switch {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body:not(#_hw) .mode-switch .mode-seg,
html body:not(#_hw) .mode-switch .mode-seg.is-on {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--hw-ink-dim) !important;
  font-size: 10px !important;
  letter-spacing: 1.6px !important;
  text-transform: uppercase;
}
html body:not(#_hw) .mode-switch .mode-seg i {
  box-shadow: 0 0 6px rgba(111,85,242,.9) !important;
}

@media (max-width: 760px) {
  html body:not(#_hw) .topbar { padding: 12px 14px !important; }
  html body:not(#_hw) nav { padding: 14px 14px !important; }
  html body:not(#_hw) .topbar-actions .dash-btn,
  html body:not(#_hw) .topbar-actions .btn-icon,
  html body:not(#_hw) .topbar-actions .settings-btn,
  html body:not(#_hw) .topbar-actions .profile-btn,
  html body:not(#_hw) .nav-right .notif-btn,
  html body:not(#_hw) .nav-right .nav-avatar { width: 33px !important; height: 33px !important; }
}

/* --------------------------------------------------------------------------
   Vervagen bij het scrollen: onder de zwevende knoppen schuift de pagina weg
   achter een zachte waas, zodat het logo en de toetsen leesbaar blijven.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .nav::before,
html body:not(#_hw) nav::before,
html body:not(#_hw) .topbar::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 260%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .3s var(--hw-ease-out);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  background: linear-gradient(180deg, rgba(233,235,237,.92) 0%, rgba(233,235,237,.72) 42%, rgba(233,235,237,.28) 74%, rgba(233,235,237,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  display: block !important;
}
html.hw-gescrold body:not(#_hw) .nav::before,
html.hw-gescrold body:not(#_hw) nav::before,
html.hw-gescrold body:not(#_hw) .topbar::before { opacity: 1; }

html body:not(#_hw) .nav,
html body:not(#_hw) nav,
html body:not(#_hw) .topbar { isolation: isolate; }

/* --------------------------------------------------------------------------
   Rustige beweging bij het scrollen. Alleen wat het script zelf aanwijst, zodat
   een pagina nooit leeg blijft als er iets misgaat.
   -------------------------------------------------------------------------- */
html.hw-motion body:not(#_hw) [data-hw-in] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--hw-ease-out), transform .55s var(--hw-ease-out);
  transition-delay: var(--hw-wacht, 0ms);
  will-change: opacity, transform;
}
html.hw-motion body:not(#_hw) [data-hw-in].hw-zichtbaar {
  opacity: 1 !important;
  transform: none !important;
}
/* titels komen een tikje zachter dan kaarten */
html.hw-motion body:not(#_hw) .section-title[data-hw-in],
html.hw-motion body:not(#_hw) .section-sub[data-hw-in] { transform: translateY(10px); }

@media (prefers-reduced-motion: reduce) {
  html.hw-motion body:not(#_hw) [data-hw-in] {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   De drie knoppen in de kop zijn één familie: zelfde hoogte, ronding, rand en
   schaduw. Alleen de vulling verschilt, want alleen 'Get Started' is de hoofdstap.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .nav-cta .install-app-btn,
html body:not(#_hw) .nav-cta .btn-ghost,
html body:not(#_hw) .nav-cta .btn-green,
html body:not(#_hw) .nav-right .install-app-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  white-space: nowrap;
  border: 1px solid var(--hw-plate-edge) !important;
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  box-shadow: var(--hw-slot) !important;
  color: var(--hw-ink) !important;
  text-decoration: none;
}
html body:not(#_hw) .nav-cta .install-app-btn svg,
html body:not(#_hw) .nav-right .install-app-btn svg { width: 13px !important; height: 13px !important; }

/* de hoofdstap: dezelfde vorm, andere vulling */
html body:not(#_hw) .nav-cta .btn-green {
  background: linear-gradient(180deg, #33363a 0%, #16181b 100%) !important;
  border-color: #0b0c0d !important;
  color: #f7f7f5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--hw-slot) !important;
}
html body:not(#_hw) .nav-cta .install-app-btn:hover,
html body:not(#_hw) .nav-cta .btn-ghost:hover,
html body:not(#_hw) .nav-cta .btn-green:hover { filter: brightness(1.05); }
html body:not(#_hw) .nav-cta .install-app-btn:active,
html body:not(#_hw) .nav-cta .btn-ghost:active,
html body:not(#_hw) .nav-cta .btn-green:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(20,24,28,.16) !important;
}

@media (max-width: 760px) {
  html body:not(#_hw) .nav-cta .install-app-btn,
  html body:not(#_hw) .nav-cta .btn-ghost,
  html body:not(#_hw) .nav-cta .btn-green {
    height: 34px !important; min-height: 34px !important;
    padding: 0 13px !important; font-size: 12px !important;
  }
  /* op een telefoon telt de ruimte: de installeerknop zit al in het menu */
  html body:not(#_hw) .nav-cta .install-app-btn { display: none !important; }
}
}

/* ==========================================================================
   ÉÉN KNOPPENFAMILIE  (goedgekeurd: variant B, 9 px)
   Alles op de site en in de app deelt dezelfde ronding, rand en schaduw.
   Drie maten: 48 voor de hero, 40 voor gewone knoppen, 30 voor de regelaars
   in de speler. Paars blijft een signaal — alleen goedkeuren en wat aan staat.
   ========================================================================== */
html body:not(#_hw) .btn-hero-primary,
html body:not(#_hw) .btn-hero-secondary,
html body:not(#_hw) .plan-btn,
html body:not(#_hw) .btn-empty,
html body:not(#_hw) .btn-primary,
html body:not(#_hw) .btn-secondary,
html body:not(#_hw) .dash-btn,
html body:not(#_hw) .replace-audio-btn,
html body:not(#_hw) .copy-feedback-btn,
html body:not(#_hw) .upload-file-btn,
html body:not(#_hw) .approve-btn,
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn,
html body:not(#_hw) .ab-pill {
  border-radius: 9px !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: var(--hw-slot) !important;
  font-weight: 500 !important;
  letter-spacing: .2px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
}

/* de grote stap op een pagina */
html body:not(#_hw) .btn-hero-primary,
html body:not(#_hw) .btn-hero-secondary {
  height: 48px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
}
/* gewone knoppen */
html body:not(#_hw) .plan-btn,
html body:not(#_hw) .btn-empty,
html body:not(#_hw) .btn-primary,
html body:not(#_hw) .btn-secondary,
html body:not(#_hw) .replace-audio-btn,
html body:not(#_hw) .copy-feedback-btn,
html body:not(#_hw) .upload-file-btn,
html body:not(#_hw) .approve-btn {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}
/* de regelaars onder de speler */
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn,
html body:not(#_hw) .ab-pill {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
}

/* donker = de hoofdstap, en verder niets */
html body:not(#_hw) .btn-hero-primary,
html body:not(#_hw) .plan.is-featured .plan-btn,
html body:not(#_hw) .btn-empty,
html body:not(#_hw) .btn-primary {
  background: linear-gradient(180deg, #33363a 0%, #16181b 100%) !important;
  border-color: #0b0c0d !important;
  color: #f7f7f5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--hw-slot) !important;
}
/* licht = al het andere */
html body:not(#_hw) .btn-hero-secondary,
html body:not(#_hw) .plan-btn,
html body:not(#_hw) .btn-secondary,
html body:not(#_hw) .replace-audio-btn,
html body:not(#_hw) .copy-feedback-btn,
html body:not(#_hw) .upload-file-btn,
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
}

/* paars: alleen goedkeuren */
html body:not(#_hw) .approve-btn {
  background: linear-gradient(180deg, #6f55f2 0%, #5640D8 100%) !important;
  border-color: #4433b5 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--hw-slot) !important;
}
/* en wat aan staat: ingedrukt in plaats van vol paars */
html body:not(#_hw) .phone-btn.active,
html body:not(#_hw) .blind-mode-btn.active,
html body:not(#_hw) .loop-btn.active,
html body:not(#_hw) .lm-btn.active {
  background: linear-gradient(180deg, #e7e3ff 0%, #d6cfff 100%) !important;
  border-color: #a99bf5 !important;
  color: #3a2aa8 !important;
  box-shadow: inset 0 2px 4px rgba(60,40,160,.25) !important;
}

html body:not(#_hw) .btn-hero-primary:active,
html body:not(#_hw) .btn-hero-secondary:active,
html body:not(#_hw) .plan-btn:active,
html body:not(#_hw) .btn-empty:active,
html body:not(#_hw) .replace-audio-btn:active,
html body:not(#_hw) .approve-btn:active,
html body:not(#_hw) .phone-btn:active,
html body:not(#_hw) .loop-btn:active,
html body:not(#_hw) .lm-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(20,24,28,.16) !important;
}

/* ── de kop op een telefoon: naam links, knop en menu rechts ── */
@media (max-width: 760px) {
  html body:not(#_hw) .nav .fmd-logo .fmd-full { display: inline !important; height: 15px !important; }
  html body:not(#_hw) .nav .fmd-logo .fmd-short { display: none !important; }
  html body:not(#_hw) .nav .nav-menu-knop { order: 3; margin-left: 4px; }
  html body:not(#_hw) .nav .nav-logo { order: 1; margin-right: auto; }
  html body:not(#_hw) .nav .nav-cta { order: 2; }
  /* Log In staat in het menu, zodat er rechts één knop overblijft */
  html body:not(#_hw) .nav .nav-cta .btn-ghost { display: none !important; }
}

/* Dezelfde familie, maar met de selectors die de oudere regels aanhielden —
   anders houden die de ronding van vroeger vast. */
html body:not(#_hw) .hw-slot-group > button,
html body:not(#_hw) .ab-pills > button,
html body:not(#_hw) .listen-mode-pills > button,
html body:not(#_hw) .ab-pills .ab-pill,
html body:not(#_hw) .listen-mode-pills .lm-btn {
  border-radius: 8px !important;
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
html body:not(#_hw) .track-card .approve-btn,
html body:not(#_hw) .approve-btn,
html body:not(#_hw) .profile-logout-btn,
html body:not(#_hw) .track-card .replace-audio-btn {
  border-radius: 9px !important;
}
html body:not(#_hw) .hw-slot-group,
html body:not(#_hw) .ab-pills,
html body:not(#_hw) .listen-mode-pills { border-radius: 11px !important; }

/* Meldingen mogen nooit buiten het scherm vallen: op een telefoon is de tekst
   vaak langer dan de breedte, dus hij loopt door op een tweede regel. */
html body:not(#_hw) .toast-container {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  padding: 0 14px;
  align-items: center;
  pointer-events: none;
}
html body:not(#_hw) #toast,
html body:not(#_hw) .toast {
  max-width: min(520px, calc(100vw - 28px)) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  html body:not(#_hw) .toast-container { bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  html body:not(#_hw) #toast,
  html body:not(#_hw) .toast {
    font-size: 11.5px !important;
    padding: 9px 13px !important;
    line-height: 1.5 !important;
  }
}

/* "This sounds best" is de beslissing in blind mode — net als Approve krijgt
   die het paars van het merk, en dezelfde vorm als de rest. */
html body:not(#_hw) .app.blind-mode .blind-pick {
  height: 34px !important;
  border-radius: 9px !important;
  font: 500 12px/1 'DM Mono', monospace !important;
  letter-spacing: .2px !important;
  background: linear-gradient(180deg, #6f55f2 0%, #5640D8 100%) !important;
  border: 1px solid #4433b5 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--hw-slot) !important;
}
html body:not(#_hw) .app.blind-mode .blind-pick i {
  background: #fff !important;
  box-shadow: 0 0 6px rgba(255,255,255,.75) !important;
}
html body:not(#_hw) .app.blind-mode .blind-pick:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(30,16,110,.45) !important;
}
@media (max-width: 760px) {
  html body:not(#_hw) .app.blind-mode .blind-pick { height: 30px !important; font-size: 11px !important; }
}

/* De melding onderin heeft zijn maten in de pagina zelf staan, met "niet
   afbreken" erbij. Op een telefoon liep hij daardoor het scherm uit. */
html body:not(#_hw) #_toastEl {
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-width: min(520px, calc(100vw - 28px)) !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  background: linear-gradient(180deg, #2f3236, #1d1f22) !important;
  border: 1px solid #0f1011 !important;
  border-radius: 9px !important;
  font: 500 12px/1.45 'DM Mono', monospace !important;
  color: #f1f2f3 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.5) !important;
}
@media (max-width: 760px) {
  html body:not(#_hw) #_toastEl {
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 11.5px !important;
    padding: 9px 13px !important;
  }
}

/* Op een telefoon is de bovenkant al vol; de modus staat daar onder de
   knoppen, waar hij niet in de weg zit. */
@media (max-width: 760px) {
  html body:not(#_hw) .topbar .mode-badge,
  html body:not(#_hw) .topbar .mode-badge.mode-switch { display: none !important; }
  html body:not(#_hw) .hw-modus-onder {
    display: flex !important;
    justify-content: center;
    padding: 6px 0 2px;
  }
  html body:not(#_hw) .hw-modus-onder .mode-seg {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 9.5px !important; letter-spacing: 1.5px !important; text-transform: uppercase;
    color: var(--hw-ink-dim) !important;
  }
  html body:not(#_hw) .hw-modus-onder .mode-seg i {
    width: 6px; height: 6px; border-radius: 50%; background: #6f55f2;
    box-shadow: 0 0 6px rgba(111,85,242,.9);
  }
}
html body:not(#_hw) .hw-modus-onder { display: none; }

/* --------------------------------------------------------------------------
   FOOTER — variant A: dezelfde taal als de kop
   Geen harde streep meer maar een verloop dat aan de zijkanten uitdooft, links
   in dezelfde maat en grijstint als boven, logo links en het jaar rechts.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .footer {
  border: 0 !important;
  border-top: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 46px 26px 30px !important;
}
html body:not(#_hw) .footer-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: flex !important;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
html body:not(#_hw) .footer-inner::before {
  content: '';
  position: absolute;
  top: -26px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(20,24,28,.16) 22%, rgba(20,24,28,.16) 78%, transparent 100%);
}
html body:not(#_hw) .footer-logo { margin: 0 !important; }
html body:not(#_hw) .footer-logo img { height: 15px !important; width: auto !important; }
html body:not(#_hw) .footer-logo .fmd-short { display: none !important; }
html body:not(#_hw) .footer-logo .fmd-full { display: inline !important; }
html body:not(#_hw) .footer-links {
  display: flex !important;
  flex-wrap: wrap;
  gap: 18px !important;
  margin: 0 !important;
}
html body:not(#_hw) .footer-links a {
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: .2px;
  color: var(--hw-ink-mid) !important;
  -webkit-text-fill-color: var(--hw-ink-mid) !important;
  text-decoration: none;
  transition: color .15s var(--hw-ease-out);
}
html body:not(#_hw) .footer-links a:hover {
  color: var(--hw-ink) !important;
  -webkit-text-fill-color: var(--hw-ink) !important;
}
html body:not(#_hw) .footer-copy {
  margin: 0 0 0 auto !important;
  font-size: 11px !important;
  color: var(--hw-ink-dim) !important;
  -webkit-text-fill-color: var(--hw-ink-dim) !important;
}
@media (max-width: 760px) {
  html body:not(#_hw) .footer { padding: 38px 18px 26px !important; }
  html body:not(#_hw) .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  html body:not(#_hw) .footer-inner::before { top: -20px; }
  html body:not(#_hw) .footer-links { justify-content: center; gap: 14px !important; }
  html body:not(#_hw) .footer-copy { margin: 0 !important; }
}

/* --------------------------------------------------------------------------
   Profielpaneel op de telefoon: één doorlopend vlak
   De kopbalk had een eigen, koelere kleur dan het paneel eronder, met een harde
   lijn ertussen. Op een telefoon zit die naad pal onder het handvat en dat viel
   op. Nu is het één oppervlak met een zachte scheiding.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html body:not(#_hw) .profile-panel {
    background:
      var(--hw-noise),
      linear-gradient(180deg, #f1f2f3 0%, #eaecee 40%, #e2e4e7 100%) !important;
    border-top: 1px solid rgba(255,255,255,.9) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -18px 50px -20px rgba(20,24,28,.5) !important;
  }
  html body:not(#_hw) .profile-panel .profile-header {
    position: relative;
    background: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding-top: 10px !important;
  }
  html body:not(#_hw) .profile-panel .profile-header::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20,24,28,.12), transparent);
  }
  /* het handvat: iets breder en rustiger, en meer lucht eromheen */
  html body:not(#_hw) .profile-panel::before {
    width: 42px !important;
    height: 4px !important;
    background: rgba(20,24,28,.16) !important;
    margin: 10px auto 2px !important;
  }
  /* dezelfde behandeling voor de andere panelen die van onderen komen */
  html body:not(#_hw) .settings-panel .settings-header,
  html body:not(#_hw) .feedback-panel .fb-popup-header {
    background: none !important;
    background-image: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }
}

/* "This sounds best" staat nu in dezelfde rij als Approve, dus hij hoeft niet
   meer los rechtsboven te zweven. */
html body:not(#_hw) .app.blind-mode .blind-pick {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: 8px;
}
/* in blind mode zeggen Replace en Approve niets: die horen er even niet te zijn */
html body:not(#_hw) .app.blind-mode .approve-btn,
html body:not(#_hw) .app.blind-mode .replace-audio-btn { display: none !important; }

/* ==========================================================================
   KOPPEN IN SYNE  (goedgekeurd)
   De app, het dashboard en de rondleiding gebruiken Syne al voor titels. De
   landingspagina's deden hun koppen nog in DM Mono, en dat verschil was groot.
   Nu overal dezelfde koppenletter; alles wat je bedient of afleest — knoppen,
   labels, metertjes, lopende tekst — blijft DM Mono.
   ========================================================================== */
html body:not(#_hw) .hero-title,
html body:not(#_hw) .section-title,
html body:not(#_hw) .feature-card h3,
html body:not(#_hw) .how-step h3,
html body:not(#_hw) .plan-name,
html body:not(#_hw) .plan-amount,
html body:not(#_hw) .faq-q,
html body:not(#_hw) .cta-title {
  font-family: 'Syne', sans-serif !important;
}
html body:not(#_hw) .hero-title {
  font-weight: 800 !important;
  letter-spacing: -1.4px !important;
  line-height: 1.02 !important;
}
html body:not(#_hw) .section-title {
  font-weight: 800 !important;
  letter-spacing: -.8px !important;
  line-height: 1.06 !important;
}
html body:not(#_hw) .feature-card h3,
html body:not(#_hw) .how-step h3,
html body:not(#_hw) .faq-q {
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
}
html body:not(#_hw) .plan-name {
  font-weight: 700 !important;
  letter-spacing: -.2px !important;
}
html body:not(#_hw) .plan-amount {
  font-weight: 800 !important;
  letter-spacing: -1px !important;
}

/* ==========================================================================
   PAARSE GLOED OVER DE PAGINA
   Dezelfde waas als op de rondleiding: een paarse gloed van bovenaf en een
   warme van rechtsonder, over het aluminium heen. Het ligt achter alles, dus
   je kunt er gewoon doorheen klikken.
   ========================================================================== */
html body:not(#_hw)::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -14%, rgba(86,64,216,.11) 0%, rgba(86,64,216,.04) 38%, transparent 64%),
    radial-gradient(820px 520px at 96% 112%, rgba(169,118,39,.10) 0%, transparent 58%);
}
@media (max-width: 760px) {
  html body:not(#_hw)::before {
    background:
      radial-gradient(760px 460px at 50% -12%, rgba(86,64,216,.10) 0%, rgba(86,64,216,.035) 40%, transparent 66%),
      radial-gradient(620px 420px at 100% 108%, rgba(169,118,39,.09) 0%, transparent 60%);
  }
}

/* De hero in Syne is smaller dan de oude letter, maar op een telefoon werd hij
   te groot voor het scherm. */
@media (max-width: 760px) {
  html body:not(#_hw) .hero-title {
    font-size: clamp(30px, 9.4vw, 46px) !important;
    letter-spacing: -.8px !important;
    overflow-wrap: break-word;
  }
  html body:not(#_hw) .section-title {
    font-size: clamp(24px, 7.4vw, 34px) !important;
    letter-spacing: -.4px !important;
  }
}

/* ==========================================================================
   FEATURES ALS RACK  (goedgekeurd)
   Elke functie is een unit in het apparaat: schroeven aan weerszijden, een
   lampje dat zegt dat hij meedraait, en een venster dat laat zien wat hij doet.
   De units wisselen van kant, zodat je oog meeloopt in plaats van een raster
   af te scannen.
   ========================================================================== */
html body:not(#_hw) .rack { display: grid; gap: 14px; max-width: 1060px; margin: 0 auto; }
html body:not(#_hw) .rack-unit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 22px 30px;
  border-radius: 14px;
  border: 1px solid var(--hw-plate-edge);
  background: var(--hw-brush), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 55%, var(--hw-plate-lo) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 18px 34px -26px rgba(20,24,28,.6);
}
html body:not(#_hw) .rack-unit.omgekeerd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
html body:not(#_hw) .rack-unit.omgekeerd .rack-tekst { order: 2; }
html body:not(#_hw) .rack-unit::before,
html body:not(#_hw) .rack-unit::after {
  content: '';
  position: absolute; top: 50%;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--hw-screw, radial-gradient(circle at 38% 34%, #fdfdfc 0%, #d8dade 42%, #9ea2a6 70%, #7d8184 100%)) center / 11px 11px no-repeat;
  transform: translateY(-50%);
  box-shadow: inset 0 -1px 1px rgba(255,255,255,.7), 0 1px 1px rgba(0,0,0,.25);
}
html body:not(#_hw) .rack-unit::before { left: 10px; }
html body:not(#_hw) .rack-unit::after { right: 10px; }
html body:not(#_hw) .rack-tekst { min-width: 0; padding-left: 8px; }
html body:not(#_hw) .rack-led {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px;
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hw-ink-dim);
}
html body:not(#_hw) .rack-led i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6f55f2; box-shadow: 0 0 7px rgba(111,85,242,.9);
  transition: box-shadow .2s var(--hw-ease-out);
}
html body:not(#_hw) .rack-led.warm i { background: #ffcf7a; box-shadow: 0 0 7px rgba(255,207,122,.9); }
html body:not(#_hw) .rack-unit:hover .rack-led i { box-shadow: 0 0 14px rgba(111,85,242,1); }
html body:not(#_hw) .rack-unit:hover .rack-led.warm i { box-shadow: 0 0 14px rgba(255,207,122,1); }
html body:not(#_hw) .rack-unit h3 {
  font-family: 'Syne', sans-serif !important;
  font-weight: 700 !important; font-size: 19px !important; letter-spacing: -.2px !important;
  margin: 0 0 7px !important; color: var(--hw-ink) !important;
}
html body:not(#_hw) .rack-unit p {
  margin: 0 !important; font-size: 12.5px !important; line-height: 1.65 !important;
  color: var(--hw-ink-mid) !important;
}

/* het venster: hetzelfde donkere glas als de schermen in de speler */
html body:not(#_hw) .rack-venster {
  position: relative; display: grid; align-content: center; gap: 10px;
  min-height: 104px; padding: 13px; border-radius: 10px; background: #12141a;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.65);
}
html body:not(#_hw) .rack-pillen { display: flex; gap: 6px; flex-wrap: wrap; }
html body:not(#_hw) .rack-pil {
  font-size: 9px; letter-spacing: 1.2px; padding: 5px 9px; border-radius: 7px;
  color: #9aa0a6; border: 1px solid #2a2e36; background: #181b21;
}
html body:not(#_hw) .rack-pil.aan {
  color: #cfc3ff; border-color: #4b3fa8;
  background: linear-gradient(180deg, #2a2550, #1d1a3a);
  box-shadow: 0 0 10px rgba(111,85,242,.35);
}
html body:not(#_hw) .rack-pil.warm {
  color: #ffe3a3; border-color: #6b5320;
  background: linear-gradient(180deg, #332a15, #221c10);
  box-shadow: 0 0 10px rgba(255,207,122,.25);
}
html body:not(#_hw) .rack-golf { display: flex; align-items: center; gap: 1.5px; height: 36px; }
html body:not(#_hw) .rack-golf i { flex: 1; background: #4a4f57; border-radius: 1px; }
html body:not(#_hw) .rack-golf.paars i { background: linear-gradient(180deg, #8f7bff, #5640d8); }
html body:not(#_hw) .rack-link {
  font-size: 11px; color: #cfc3ff; padding: 9px 12px; border-radius: 999px;
  background: linear-gradient(180deg, #2a2550, #1d1a3a); border: 1px solid #4b3fa8;
  justify-self: start; box-shadow: 0 0 14px rgba(111,85,242,.28);
}
html body:not(#_hw) .rack-goed {
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  font-size: 9.5px; letter-spacing: 1.5px; color: #6fe39a; text-shadow: 0 0 9px rgba(111,227,154,.5);
}
html body:not(#_hw) .rack-vink {
  width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; color: #0f1216; background: #6fe39a; box-shadow: 0 0 10px rgba(111,227,154,.55);
}
html body:not(#_hw) .rack-markers { position: relative; height: 40px; }
html body:not(#_hw) .rack-markers .lijn { position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: #2b3038; }
html body:not(#_hw) .rack-markers i {
  position: absolute; top: 15px; width: 9px; height: 9px; border-radius: 50%;
  background: #f2eeff; border: 2px solid #0f1116; transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #8f7bff;
}
html body:not(#_hw) .rack-notitie {
  position: absolute; left: 52%; top: 24px; transform: translateX(-50%);
  white-space: nowrap; background: #1b1d25; color: #fff; font-size: 9.5px;
  padding: 5px 9px; border-radius: 7px;
}
html body:not(#_hw) .rack-verborgen {
  display: flex; gap: 8px; align-items: center; justify-content: center;
  color: #6b7078; font-size: 10px; letter-spacing: 1.4px;
}
html body:not(#_hw) .rack-blok { width: 54px; height: 12px; border-radius: 3px; background: #242932; }

@media (max-width: 820px) {
  html body:not(#_hw) .rack-unit,
  html body:not(#_hw) .rack-unit.omgekeerd { grid-template-columns: 1fr; padding: 20px 22px; }
  html body:not(#_hw) .rack-unit.omgekeerd .rack-tekst { order: 0; }
  html body:not(#_hw) .rack-unit::before,
  html body:not(#_hw) .rack-unit::after { top: 18px; }
}

/* ==========================================================================
   CIJFERS ALS VIER DISPLAYS  (goedgekeurd)
   Geen brede plaat meer, maar vier kleine vensters met schermlicht — dezelfde
   taal als de meters in de speler.
   ========================================================================== */
html body:not(#_hw) .proof-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px !important;
  max-width: 760px;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
html body:not(#_hw) .proof-item {
  text-align: left !important;
  padding: 13px 15px;
  border-radius: 10px;
  background: #0f1216;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.7);
}
html body:not(#_hw) .proof-value {
  font-family: 'DM Mono', monospace !important;
  font-size: 22px !important; font-weight: 500 !important; margin: 0 0 5px !important;
  color: #6fe39a !important; -webkit-text-fill-color: #6fe39a !important;
  text-shadow: 0 0 10px rgba(111,227,154,.55) !important;
  line-height: 1.1 !important;
}
html body:not(#_hw) .proof-value .accent-g,
html body:not(#_hw) .proof-value .accent-g * {
  color: #b7a6ff !important; -webkit-text-fill-color: #b7a6ff !important;
  text-shadow: 0 0 10px rgba(143,123,255,.5) !important;
}
html body:not(#_hw) .proof-value .accent-b,
html body:not(#_hw) .proof-value .accent-b * {
  color: #ffcf7a !important; -webkit-text-fill-color: #ffcf7a !important;
  text-shadow: 0 0 10px rgba(255,207,122,.45) !important;
}
html body:not(#_hw) .proof-label {
  font-size: 8.5px !important; letter-spacing: 1.5px !important;
  color: #6b727c !important; -webkit-text-fill-color: #6b727c !important;
}
@media (max-width: 620px) {
  html body:not(#_hw) .proof-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Het lampje op de bedieningsknoppen zat tegen de tekst aan: het staat vast op
   7 px vanaf de linkerrand, terwijl de inhoud daar ook begon. Nu schuift de
   inhoud op, zodat er lucht tussen het lampje en het woord zit. */
html body:not(#_hw) .phone-btn,
html body:not(#_hw) .blind-mode-btn,
html body:not(#_hw) .loop-btn,
html body:not(#_hw) .lm-btn,
html body:not(#_hw) .ab-pill,
html body:not(#_hw) .hw-slot-group > button,
html body:not(#_hw) .ab-pills > button,
html body:not(#_hw) .listen-mode-pills > button {
  padding-left: 18px !important;
  padding-right: 11px !important;
  gap: 6px !important;
}
html body:not(#_hw) .phone-btn::after,
html body:not(#_hw) .blind-mode-btn::after,
html body:not(#_hw) .loop-btn::after,
html body:not(#_hw) .lm-btn::after,
html body:not(#_hw) .ab-pill::after,
html body:not(#_hw) .hw-slot-group > button::after,
html body:not(#_hw) .ab-pills > button::after,
html body:not(#_hw) .listen-mode-pills > button::after { left: 8px !important; }

/* de kleinste knoppen (ST / M / S) hebben geen tekstruimte nodig */
html body:not(#_hw) .listen-mode-pills > button { padding-left: 17px !important; padding-right: 10px !important; }

@media (max-width: 760px) {
  html body:not(#_hw) .phone-btn,
  html body:not(#_hw) .blind-mode-btn,
  html body:not(#_hw) .loop-btn,
  html body:not(#_hw) .lm-btn,
  html body:not(#_hw) .ab-pill,
  html body:not(#_hw) .hw-slot-group > button,
  html body:not(#_hw) .ab-pills > button,
  html body:not(#_hw) .listen-mode-pills > button {
    padding-left: 18px !important;
    padding-right: 10px !important;
  }
  html body:not(#_hw) .phone-btn::after,
  html body:not(#_hw) .blind-mode-btn::after,
  html body:not(#_hw) .loop-btn::after,
  html body:not(#_hw) .lm-btn::after,
  html body:not(#_hw) .ab-pill::after,
  html body:not(#_hw) .hw-slot-group > button::after,
  html body:not(#_hw) .ab-pills > button::after,
  html body:not(#_hw) .listen-mode-pills > button::after { left: 7px !important; }
}

/* De bedieningsbalk past op een laptopscherm net niet meer op één regel sinds
   de knoppen wat ruimer zijn. Een paar pixels eraf, en hij staat weer netjes
   op één rij; op smallere schermen breekt hij nog steeds netjes af. */
html body:not(#_hw) #abSwitcherMid { column-gap: 7px !important; }
html body:not(#_hw) #abSwitcherMid .sim-btns-row { gap: 8px !important; }
html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group > button,
html body:not(#_hw) #abSwitcherMid .sim-btns-row > button {
  padding-left: 17px !important;
  padding-right: 10px !important;
}
html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group > button::after,
html body:not(#_hw) #abSwitcherMid .sim-btns-row > button::after { left: 8px !important; }



/* --------------------------------------------------------------------------
   Telefoon: het statusbolletje en het live-lampje netjes in de rij
   Op een klein scherm stak het bolletje half buiten de profielfoto en werd het
   live-lampje een half afgeknipt pilletje. Allebei krijgen ze nu de maat en de
   vorm van de andere toetsen.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* het online-bolletje: kleiner, binnen de rand van de foto */
  html body:not(#_hw) .profile-btn { position: relative; overflow: visible; }
  html body:not(#_hw) .profile-status,
  html body:not(#_hw) .nav-avatar .dot {
    width: 9px !important;
    height: 9px !important;
    right: -1px !important;
    bottom: -1px !important;
    border: 0 !important;
    box-shadow: 0 0 0 2px #e9ebed, 0 0 6px rgba(143,118,255,.85) !important;
  }

  /* het live-lampje wordt een ronde toets, net als de knoppen ernaast */
  html body:not(#_hw) .live-luister {
    width: 33px !important;
    height: 33px !important;
    padding: 0 !important;
    margin-right: 6px !important;
    border-radius: 50% !important;
    justify-content: center;
    overflow: visible;
  }
  html body:not(#_hw) .live-luister span { display: none !important; }
  html body:not(#_hw) .live-luister i { width: 9px !important; height: 9px !important; }
}

/* Het filter 'Approved' krijgt het groene schermlicht van een goedgekeurde
   track, zodat je in één oogopslag ziet welke knop waarover gaat. */
html body:not(#_hw) .folder-chip.is-goed .folder-chip-name::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8ffe9, #3ddc84 60%, #1f9d5b);
  box-shadow: 0 0 6px rgba(61,220,132,.8);
}

/* --------------------------------------------------------------------------
   Vensters met een vraag: lange namen breken af en de knoppen horen bij de
   familie. De rode knop had een zware rand om zich heen; dat hoort hier niet.
   -------------------------------------------------------------------------- */
html body:not(#_hw) .folder-dialog-card h3 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: 16px !important;
  line-height: 1.25 !important;
  max-height: 3.8em;
  overflow: hidden;
}
html body:not(#_hw) .folder-dialog-card {
  max-width: min(420px, calc(100vw - 32px));
}
html body:not(#_hw) .folder-btn-primary,
html body:not(#_hw) .folder-btn-secondary,
html body:not(#_hw) .folder-btn-danger {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 9px !important;
  font: 500 13px/1 'DM Mono', monospace !important;
  letter-spacing: .2px !important;
  border: 1px solid var(--hw-plate-edge) !important;
  box-shadow: var(--hw-slot) !important;
}
html body:not(#_hw) .folder-btn-primary {
  background: linear-gradient(180deg, #33363a 0%, #16181b 100%) !important;
  border-color: #0b0c0d !important;
  color: #f7f7f5 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--hw-slot) !important;
}
html body:not(#_hw) .folder-btn-secondary {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: var(--hw-ink) !important;
}
/* verwijderen blijft herkenbaar rood, maar zonder die dikke rand eromheen */
html body:not(#_hw) .folder-btn-danger {
  background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
  color: #b8322b !important;
  border-color: #cfa9a6 !important;
  box-shadow: var(--hw-slot) !important;
}
html body:not(#_hw) .folder-btn-danger:hover {
  background: linear-gradient(180deg, #fdf1f0 0%, #f6dedc 100%) !important;
  color: #9c2620 !important;
}
html body:not(#_hw) .folder-btn-primary:active,
html body:not(#_hw) .folder-btn-secondary:active,
html body:not(#_hw) .folder-btn-danger:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(20,24,28,.16) !important;
}

/* Delen is geen luisterinstelling: die knop krijgt zijn eigen sleuf met wat
   meer lucht ervoor, zodat hij niet bij de blind/loop-groep lijkt te horen. */
html body:not(#_hw) .hw-slot-group.is-delen { margin-left: 6px !important; }
html body:not(#_hw) #shareBtn {
  letter-spacing: 1px !important;
}
@media (max-width: 760px) {
  html body:not(#_hw) .hw-slot-group.is-delen { margin-left: 6px !important; }
}

/* Rechts in de balk staat een leeg blokje met een automatische marge. Die marge
   slokt alle overgebleven ruimte op, waardoor de knoppenrij naar de volgende
   regel werd geduwd terwijl hij prima paste. */
html body:not(#_hw) #abSwitcherMid .switcher-right {
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}
html body:not(#_hw) #abSwitcherMid .switcher-right:empty { display: none !important; }

/* Nog een paar pixels speling zodat de rij ook past als een knop iets breder
   uitvalt (andere taal, langere naam). */
@media (min-width: 1100px) {
  html body:not(#_hw) #abSwitcherMid { padding-left: 18px !important; padding-right: 18px !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills { margin-left: 5px !important; }
}

/* De schroefjes van de bedieningsbalk stonden op 10 px, terwijl de inhoud op
   18 px begint: bij "PLAYING" liepen ze door elkaar. Ze schuiven iets naar de
   rand toe, dan houdt de tekst lucht. */
@media (min-width: 1100px) {
  html body:not(#_hw) #abSwitcherMid {
    background-position: 6px 50%, calc(100% - 6px) 50%, 0 0, 0 0 !important;
    background-size: 11px 11px, 11px 11px, auto, auto !important;
  }
  html body:not(#_hw) #abSwitcherMid .ab-switcher-label { padding-left: 7px !important; }
}

/* --------------------------------------------------------------------------
   Telefoon: de bedieningsrij netjes in plaats van gehusseld
   De groepen stonden in een raster van vier kolommen, ook als er maar één knop
   in zat. Nu vullen de knoppen hun groep gelijkmatig en krijgt delen een eigen
   regel onderaan, waar je hem verwacht.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid .sim-btns-row:not(#_x) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: center;
    gap: 6px !important;
    width: 100% !important;
  }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group:not(#_x) {
    display: flex !important;
    flex: 1 1 auto !important;
    gap: 4px !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
  }
  html body:not(#_hw) #abSwitcherMid .sim-btns-row .hw-slot-group > button:not(#_x) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: center;
  }
  /* delen is een handeling op zichzelf: eigen regel, over de volle breedte */
  html body:not(#_hw) #abSwitcherMid .hw-slot-group.is-delen:not(#_x) {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
  }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group.is-delen > button {
    flex: 1 1 auto !important;
  }
  /* de luisterstanden blijven compact naast de rest */
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills:not(#_x) {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}

/* De ST/M/S-knopjes stonden gecentreerd over twee regels en zweefden daardoor
   tussen de rijen in. Ze lijnen nu uit met de bovenste regel. */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid:not(#_x) { align-items: flex-start !important; }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills:not(#_x) { align-self: flex-start !important; }
  html body:not(#_hw) #abSwitcherMid .ab-pills:not(#_x) { align-self: stretch !important; }
}

/* De ST/M/S-knopjes waren vastgezet op 30 px met het lampje pal tegen de letter.
   Ze mogen meegroeien met hun inhoud, zodat er lucht tussen zit. */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills .lm-btn:not(#_x) {
    width: auto !important;
    min-width: 38px !important;
    padding: 0 9px 0 17px !important;
    justify-content: center;
  }
  html body:not(#_hw) #abSwitcherMid .listen-mode-pills .lm-btn::after { left: 7px !important; }
}

/* De deelknop hoeft de hele breedte niet: hij staat op zijn eigen regel,
   gecentreerd, op de maat van zijn tekst. */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid .hw-slot-group.is-delen:not(#_x) {
    justify-content: center !important;
  }
  html body:not(#_hw) #abSwitcherMid .hw-slot-group.is-delen > button:not(#_x) {
    flex: 0 0 auto !important;
    min-width: 130px;
    padding-left: 21px !important;
    padding-right: 16px !important;
  }
}

/* Staat de deelknop op een telefoon als eigen regel in de balk, dan vult die
   regel de volle breedte zodat de knop echt in het midden staat. */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid > .hw-slot-group.is-delen {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    margin: 2px 0 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
}

/* Op een telefoon staat delen bovenin, als ronde toets tussen de andere. */
@media (max-width: 760px) {
  html body:not(#_hw) .topbar-actions .hw-slot-group.is-boven {
    display: contents !important;
  }
  html body:not(#_hw) .topbar-actions #shareBtn {
    width: 33px !important;
    height: 33px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    justify-content: center;
    border: 1px solid var(--hw-plate-edge) !important;
    background: linear-gradient(180deg, var(--hw-key) 0%, var(--hw-key-lo) 100%) !important;
    box-shadow: var(--hw-slot) !important;
    color: var(--hw-ink) !important;
  }
  html body:not(#_hw) .topbar-actions #shareBtn svg { width: 14px !important; height: 14px !important; }
  /* de tekst SHARE staat er nog steeds in, maar op nul; zonder deze regel houdt
     de tussenruimte hem scheef en staat het symbooltje links van het midden */
  html body:not(#_hw) .topbar-actions #shareBtn {
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-indent: 0 !important;
    line-height: 0 !important;
  }
  html body:not(#_hw) .topbar-actions #shareBtn::after { display: none !important; }
}

/* De foto zit als achtergrond op de knop en wordt al door de ronding bijgesneden.
   Het afsnijden van de knop zelf mag dus uit — dat sneed de gloed van het
   statuslampje vierkant af, waardoor je witte hoekjes zag. */
html body:not(#_hw) .profile-btn,
html body:not(#_hw) .profile-btn.has-avatar,
html body:not(#_hw) .profile-btn.has-photo,
html body:not(#_hw) .nav-avatar,
html body:not(#_hw) .nav-avatar.has-photo,
html body:not(#_hw) .live-luister {
  overflow: visible !important;
  background-clip: padding-box;
}

/* Wie zit er in dit project: klein lijstje onder het live-lampje */
html body:not(#_hw) .live-luister { cursor: pointer; border: 1px solid var(--hw-plate-edge); }
html body:not(#_hw) .live-lijst {
  position: fixed;
  z-index: 9500;
  min-width: 220px;
  max-width: min(300px, calc(100vw - 24px));
  padding: 10px;
  border-radius: 12px;
  background: var(--hw-noise), linear-gradient(180deg, #f7f7f4 0%, var(--hw-plate) 55%, var(--hw-plate-lo) 100%);
  border: 1px solid var(--hw-plate-edge);
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #aeb2b6, 0 20px 40px -18px rgba(20,24,28,.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s var(--hw-ease-out), transform .18s var(--hw-ease-out);
}
html body:not(#_hw) .live-lijst.open { opacity: 1; transform: none; pointer-events: auto; }
html body:not(#_hw) .live-kop {
  font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--hw-ink-dim); padding: 2px 6px 8px;
}
html body:not(#_hw) .live-rij {
  display: grid; grid-template-columns: 10px 1fr; gap: 4px 9px;
  align-items: center; padding: 7px 6px; border-radius: 8px;
}
html body:not(#_hw) .live-rij + .live-rij { border-top: 1px solid rgba(20,24,28,.08); }
html body:not(#_hw) .live-rij b {
  font-size: 12.5px; font-weight: 600; color: var(--hw-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body:not(#_hw) .live-rij em {
  grid-column: 2; font-style: normal; font-size: 10.5px; color: var(--hw-ink-mid);
}
html body:not(#_hw) .live-stip {
  width: 8px; height: 8px; border-radius: 50%; grid-row: span 2;
  background: #6f55f2; box-shadow: 0 0 6px rgba(111,85,242,.8);
}
html body:not(#_hw) .live-stip.eng { background: #3ddc84; box-shadow: 0 0 6px rgba(61,220,132,.8); }
html body:not(#_hw) .live-leeg { font-size: 12px; color: var(--hw-ink-mid); padding: 6px; }

/* ── VASTE VOLGORDE IN DE BOVENBALK ─────────────────────────────────────
   Op elk scherm hetzelfde ritme: het dashboard-pijltje helemaal links,
   dan de losse knoppen, en rechts achter elkaar instellingen en je profiel.
   Met order hoeft de HTML-volgorde er niet voor te veranderen. */
html body:not(#_hw) .topbar-actions { align-items: center; }
html body:not(#_hw) .topbar-actions > * { order: 2; }
html body:not(#_hw) .topbar-actions .dash-btn { order: 0; margin-right: auto; }
html body:not(#_hw) .topbar-actions .settings-btn { order: 8; }
html body:not(#_hw) .topbar-actions .profile-btn { order: 9; }

/* ── TELEFOON: de bedieningsbalk loopt het scherm uit ────────────────────
   De balk stopte precies op de onderrand, en zodra de browser zijn eigen
   balk liet zakken zag je daar een streepje achtergrond. Hij hangt nu een
   stuk lager en heeft dat stuk er als vulling bij, zodat het paneel gewoon
   doorloopt tot buiten beeld. */
@media (max-width: 760px) {
  html body:not(#_hw) #abSwitcherMid:not(#_x) {
    bottom: -28px !important;
    padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    border-bottom: none !important;
  }
}

/* Het deelknopje zit in een groepje met display:contents, dus de knop zelf is
   het item in de rij en heeft zijn eigen plek in de volgorde nodig. */
html body:not(#_hw) .topbar-actions #shareBtn,
html body:not(#_hw) .topbar-actions .hw-slot-group > * { order: 2; }

/* ── NIETS SELECTEREN OP EEN AANRAAKSCHERM ──────────────────────────────
   Een map maken gaat met ingedrukt houden en slepen, en dat vatte de
   telefoon op als tekst selecteren: een blauwe waas met kopieer-ballon over
   de kaartjes. De app zelf selecteert nu nergens meer; in velden waar je
   echt tekst typt of leest blijft het gewoon werken. */
html body:not(#_hw),
html body:not(#_hw) * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}
/* Waar je echt tekst typt of wilt overnemen blijft selecteren gewoon werken. */
html body:not(#_hw) input,
html body:not(#_hw) textarea,
html body:not(#_hw) select,
html body:not(#_hw) [contenteditable="true"],
html body:not(#_hw) [contenteditable="true"] *,
html body:not(#_hw) .fb-history-text,
html body:not(#_hw) .feedback-item-text,
html body:not(#_hw) .fb-ov-note-text,
html body:not(#_hw) .share-url,
html body:not(#_hw) .selecteerbaar {
  -webkit-user-select: text !important;
  user-select: text !important;
}
/* Slepen van plaatjes en links uitzetten, dat trekt anders een spookbeeld mee. */
html body:not(#_hw) img,
html body:not(#_hw) a,
html body:not(#_hw) button { -webkit-user-drag: none; }

/* ── DE LUISTERAAR STELT ZICH VOOR ──────────────────────────────────────
   Eén veld voor de deellink opengaat: geen account, wel een naam die de
   engineer in het project ziet staan. */
html body:not(#_hw) .naam-poort {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 24, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html body:not(#_hw) .naam-poort .naam-paneel {
  width: min(360px, 100%);
  padding: 24px 22px 20px;
  border-radius: 16px;
  background:
    var(--hw-brush),
    linear-gradient(180deg, #e6e8ea 0%, var(--hw-deck) 55%, #c9ced2 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html body:not(#_hw) .naam-poort .naam-kop {
  font-family: 'Syne', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--hw-ink, #1c1f22);
}
html body:not(#_hw) .naam-poort .naam-uitleg {
  margin: 6px 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(28, 31, 34, 0.62);
}
html body:not(#_hw) .naam-poort .naam-veld {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--hw-ink, #1c1f22);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 9px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}
html body:not(#_hw) .naam-poort .naam-veld:focus {
  outline: none;
  border-color: rgba(124, 92, 245, 0.7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(124, 92, 245, 0.18);
}
html body:not(#_hw) .naam-poort.leeg .naam-veld {
  border-color: rgba(190, 60, 60, 0.7);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(190, 60, 60, 0.15);
}
html body:not(#_hw) .naam-poort .naam-knop {
  width: 100%;
  height: 44px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #8a6cf6 0%, #6f4fe0 100%);
  border: 1px solid rgba(80, 55, 170, 0.8);
  border-radius: 9px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(80, 55, 170, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html body:not(#_hw) .naam-poort .naam-knop:active { transform: translateY(1px); }

/* Het tijdvakje in het feedbackvenster is te overtypen; dat mag je zien. */
html body:not(#_hw) #fbTimecode[contenteditable="true"] {
  cursor: text;
  padding: 2px 6px;
  border-radius: 5px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
  min-width: 46px;
  text-align: center;
}
html body:not(#_hw) #fbTimecode[contenteditable="true"]:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.55);
}

/* ── GOEDKEUREN IS AAN DE KLANT ─────────────────────────────────────────
   In engineer-modus staat de knop er alleen maar in de weg. Heeft de klant
   wél goedgekeurd, dan blijft dat zichtbaar als stempel — maar je kunt er
   zelf niet meer op drukken. */
html body:not(#_hw):not(.is-listener) .approve-btn:not(.approved) { display: none !important; }
html body:not(#_hw):not(.is-listener) .approve-btn.approved {
  pointer-events: none !important;
  cursor: default !important;
}

/* ── HET REGELTJE BOVEN EEN NIEUWE NOTITIE ──────────────────────────────
   De knop AT kreeg donkere letters op een donkere knop (uit de knoppenfamilie)
   en stond veel te krap. Hier staat alles op zijn eigen maat, met licht op
   donker zoals de rest van dat paneel. */
html body:not(#_hw) #fbOvCreateForm > div:first-child {
  gap: 10px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
html body:not(#_hw) #fbOvCreateTrack,
html body:not(#_hw) #fbOvTijdKnop,
html body:not(#_hw) #fbOvCreateTime {
  height: 34px !important;
  border-radius: 8px !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: #e8eaec !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: linear-gradient(180deg, #26292c 0%, #1a1d20 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
html body:not(#_hw) #fbOvCreateTrack { padding: 0 10px !important; }
html body:not(#_hw) #fbOvTijdKnop {
  padding: 0 14px !important;
  min-width: 56px !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
}
html body:not(#_hw) #fbOvTijdKnop:hover {
  background: linear-gradient(180deg, #31353a 0%, #212529 100%) !important;
}
html body:not(#_hw) #fbOvCreateTime {
  width: 78px !important;
  padding: 0 10px !important;
  text-align: center !important;
  background: rgba(0, 0, 0, 0.42) !important;
}
html body:not(#_hw) #fbOvCreateTime::placeholder { color: rgba(232, 234, 236, 0.35) !important; }
html body:not(#_hw) #fbOvCreateTime:focus {
  outline: none !important;
  border-color: rgba(138, 108, 246, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(138, 108, 246, 0.18) !important;
}
html body:not(#_hw) #fbOvCreateText {
  height: 58px !important;
  padding: 10px 12px !important;
  color: #e8eaec !important;
  border-radius: 8px !important;
}
html body:not(#_hw) #fbOvCreateSubmit {
  height: 38px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
}

/* ── BLINDE TEST OP TELEFOON ────────────────────────────────────────────
   "This sounds best" is te breed om naast de afspeelknop en de teller te
   passen: hij stak 25 px buiten de kaart. Op een smal scherm krijgt hij
   daarom zijn eigen regel over de volle breedte. */
@media (max-width: 760px) {
  html body:not(#_hw) .track-card .track-controls {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  html body:not(#_hw) .track-card .blind-pick {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-content: center !important;
  }
}

/* Op een groot scherm staat het online-lampje links van het dashboard-pijltje. */
@media (min-width: 761px) {
  html body:not(#_hw) .topbar-actions .live-luister { order: -1 !important; }
}

/* Listener: geen projectnaam/branding in de instellingen. */
html body:not(#_hw).is-listener .settings-section:has(.customization-panel) { display: none !important; }

/* De keuzeknop zit in een tussenlaagje met margin-left:auto; dat laagje moest
   ook mee, anders steekt het nog steeds buiten de kaart. */
@media (max-width: 760px) {
  html body:not(#_hw) .track-card .track-controls:not(#_x) {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
  }
  html body:not(#_hw) .track-card .track-controls > div:has(> .blind-pick) {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  html body:not(#_hw) .track-card .track-controls .blind-pick:not(#_x) {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}

/* ── DE DRIE LINKS PRECIES IN HET MIDDEN ────────────────────────────────
   De balk verdeelt links/midden/rechts, maar het blok met de knoppen is
   breder dan het logo, dus de links stonden iets naar links. Beide buitenste
   blokken krijgen nu evenveel ruimte, waardoor het midden echt het midden is. */
@media (min-width: 761px) {
  html body:not(#_hw) .nav .nav-logo { flex: 1 1 0 !important; min-width: 0 !important; }
  html body:not(#_hw) .nav .nav-cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }
  html body:not(#_hw) .nav .nav-links { flex: 0 0 auto !important; }
}

/* ── EEN PROJECT ECHT VASTHOUDEN ────────────────────────────────────────
   Het kaartje komt bij het oppakken iets omhoog, hangt in je hand mee te
   kantelen met je beweging en legt zichzelf bij het loslaten weer neer.
   De plek waar hij vandaan komt blijft als open vakje staan. */
/* LET OP: transform is van Sortable zelf — daar volgt het kaartje je muis mee.
   Draaien en vergroten gaat daarom via de losse eigenschappen rotate en scale,
   die er bovenop komen in plaats van ertegenin. */
html body:not(#_hw) .sortable-fallback {
  rotate: var(--kanteling, 0deg);
  scale: 1.045;
  transform-origin: 50% 45%;
  /* Kaarten hebben een zachte overgang op transform (.45s) voor het zweven bij
     hover. Op het gesleepte kaartje moet die eraf, anders kruipt hij een halve
     seconde achter je muis aan — dat is wat 'niet lekker' aanvoelde. */
  transition: rotate .1s linear, scale .15s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease !important;
  box-shadow:
    0 30px 50px -18px rgba(16, 20, 24, 0.55),
    0 6px 14px rgba(16, 20, 24, 0.18) !important;
  opacity: 1 !important;
  cursor: grabbing !important;
  will-change: transform, rotate, scale;
  pointer-events: none !important;
}
html body:not(#_hw) .sortable-fallback.pakt-op {
  scale: 1;
  rotate: 0deg;
  box-shadow: 0 6px 14px rgba(16, 20, 24, 0.18) !important;
}

/* de lege plek die je achterlaat */
html body:not(#_hw) .project-card.proj-ghost {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.32) !important;
  box-shadow: inset 0 0 0 1.5px rgba(92, 98, 104, 0.35) !important;
  transform: scale(.975);
  transition: transform .2s ease;
}
html body:not(#_hw) .project-card.proj-ghost > * { opacity: 0 !important; }

/* neerleggen: één keer kort naveren */
html body:not(#_hw) .project-card.legt-neer { animation: hwNeerleggen .32s cubic-bezier(.22, 1, .36, 1); }
@keyframes hwNeerleggen {
  0%   { transform: scale(1.05); }
  55%  { transform: scale(.985); }
  100% { transform: scale(1); }
}

/* zolang je sleept is de hele pagina in 'vasthoud'-stand */
html body:not(#_hw).is-dragging-project,
html body:not(#_hw).is-dragging-project * { cursor: grabbing !important; }
html body:not(#_hw) .project-card { cursor: grab; }

/* Het regeltje met spoor, AT en de tijd plakte tegen de streep van de kop aan
   (gemeten: 0 px ertussen). Nu staat er lucht boven en onder. */
html body:not(#_hw) #fbOvCreateForm {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ── DELEN IS NU EEN KNOP IN DE BALK, OP ELK SCHERM ─────────────────────
   Op een groot scherm zijn de knoppen bovenin 36 px; op een telefoon 33.
   De deelknop doet precies mee, inclusief het ronde jasje. */
html body:not(#_hw) .topbar-actions .hw-slot-group.is-delen {
  display: contents !important;
}
html body:not(#_hw) .topbar-actions #shareBtn {
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 50% !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body:not(#_hw) .topbar-actions #shareBtn svg { width: 15px !important; height: 15px !important; }
html body:not(#_hw) .topbar-actions #shareBtn::after,
html body:not(#_hw) .topbar-actions #shareBtn::before { display: none !important; }
@media (max-width: 760px) {
  html body:not(#_hw) .topbar-actions #shareBtn { width: 33px !important; height: 33px !important; }
  html body:not(#_hw) .topbar-actions #shareBtn svg { width: 14px !important; height: 14px !important; }
}

/* De losse knop "Load tracks" is weg: het laadscherm komt vanzelf bij een leeg
   project, en audio vervangen doe je op de kaart zelf. */
html body:not(#_hw) #engineerBtn { display: none !important; }

/* Even oplichten waar je terechtkomt als je op "Settings" klikt bij meldingen. */
html body:not(#_hw) #notifPrefsSection.is-gevonden {
  animation: hwGevonden 1.8s ease-out;
  border-radius: 12px;
}
@keyframes hwGevonden {
  0%   { box-shadow: 0 0 0 0 rgba(124, 92, 245, 0); background: transparent; }
  18%  { box-shadow: 0 0 0 3px rgba(124, 92, 245, 0.35); background: rgba(124, 92, 245, 0.07); }
  100% { box-shadow: 0 0 0 0 rgba(124, 92, 245, 0); background: transparent; }
}

/* ── Albumhoes voor een map ──────────────────────────────────────────
   Heeft een map een eigen hoes, dan vult die de hele kaart in plaats van
   het raster met losse projectcovers. */
html body:not(#_hw) .folder-card-display.has-cover {
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
html body:not(#_hw) .album-hoes-beeld {
  display: block;
  width: 54px; height: 54px;
  flex: 0 0 auto;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-image: repeating-linear-gradient(45deg, #d5d8da 0 7px, #cbcfd2 7px 14px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), var(--hw-well);
}