/* FLUID STATE — Weisses Labor-Design
   Reines Weiss #ffffff · Rahmen #e5e7eb · Text #1e293b · Akzent #06b6d4 */

:root {
  --bg: #ffffff;
  --line: #e5e7eb;
  --ink: #1e293b;
  --muted: #94a3b8;
  --accent: #06b6d4;
  --radius: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

body { overscroll-behavior: none; }

#hud {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  max-width: 980px;
  margin: 0 auto;
  transition: filter 2s ease;
}
#hud.dimmed { filter: none; }

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  flex-wrap: wrap;
}
.brand {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.timing { display: flex; align-items: center; gap: 10px; }
#timer {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
  min-width: 76px;
}
.tiles { display: flex; gap: 4px; }
.tbtn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 4px;
  font-size: 11px;
  padding: 5px 9px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, color .15s;
}
.tbtn:hover { border-color: var(--accent); }
.tbtn.active { border-color: var(--accent); color: var(--accent); }
.tbtn.inf { color: var(--muted); }
.tbtn:disabled { opacity: .35; cursor: not-allowed; border-color: var(--line); }

/* ---------- Canvas ---------- */
.scope {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
  height: 110px;
}
.scope canvas { display: block; width: 100%; height: 100%; }
.scope .lbl {
  position: absolute; top: 6px; left: 8px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Player-Zeile: Test links, Play/Stop zentriert auf gemeinsamer Achse ---------- */
.transportRow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex: 0 0 auto;
}
.transportRow .tierPick { justify-self: start; }
.transportCenter {
  position: relative;
  justify-self: center;
  min-height: 62px;
  width: 100%;
}
.transportSpacer { justify-self: end; }

/* ---------- Transport ---------- */
#playBtn {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg); color: var(--accent);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, box-shadow .2s, transform .1s;
}
#playBtn:hover { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent); }
#playBtn:active { transform: translate(-50%, -50%) scale(.97); }
#stopBtn {
  position: absolute;
  left: calc(50% + 43px); top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: 13px; cursor: pointer; display: none; place-items: center;
}
#stopBtn.show { display: grid; }
#stopBtn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Mixer ---------- */
details.mixer { border: 1px solid var(--line); border-radius: var(--radius); }
details.mixer > summary {
  list-style: none; cursor: pointer;
  padding: 7px 10px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); display: flex; justify-content: space-between; align-items: center;
}
details.mixer > summary::-webkit-details-marker { display: none; }
details.mixer > summary::after { content: "▾"; color: var(--muted); font-size: 10px; }
details.mixer[open] > summary::after { content: "▴"; }
.mixerBody {
  border-top: 1px solid var(--line);
  padding: 10px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 620px) { .mixerBody { grid-template-columns: 1fr; } }
.lane { border: 1px solid var(--line); border-radius: 4px; padding: 8px; }
.lane h4 {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 6px;
}
.row { display: flex; align-items: center; gap: 8px; }
select {
  width: 100%; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--ink); font-size: 12px; padding: 5px 6px; margin-bottom: 7px;
}
input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 2px; background: var(--line); border-radius: 2px; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--accent); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--accent); cursor: pointer;
}
input[type=range]:disabled { opacity: .5; }
.val { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }

.sub {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 9px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); cursor: pointer; margin-top: 7px; background: var(--bg);
  transition: color .2s, border-color .2s, box-shadow .6s;
}
.sub .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--line); transition: background .2s, box-shadow .6s; }
.sub.on { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); }
.sub.on .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%,100% { opacity: .45 } 50% { opacity: 1 } }

.resetBtn {
  grid-column: 1 / -1;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 4px; padding: 6px; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; cursor: pointer;
}
.resetBtn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Kategorien-HUD & grid ---------- */
.panes { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.panes::-webkit-scrollbar { width: 0; height: 0; }
.section h5 {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 0 0 5px;
}
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 620px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.grid.b4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .grid.b4 { grid-template-columns: repeat(2, 1fr); } }

.cell {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 4px;
  background-size: cover; background-position: center;
  padding: 9px 8px; min-height: 52px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; justify-content: center;
  transition: border-color .15s, box-shadow .2s;
}
.cell::before {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4);
  transition: background .2s;
}
.cell > * { position: relative; z-index: 1; }
.cell:hover::before { background: rgba(0,0,0,.5); }
.cell .hz { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: .02em; }
.cell .nm { font-size: 14px; color: rgba(255,255,255,.82); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.2; }
.cell.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); }
.cell.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
.cell.locked { cursor: pointer; opacity: .75; }
.cell .lock { position: absolute; top: 6px; right: 8px; font-size: 11px; z-index: 1; }
.cell .sub { margin-top: 0; background: rgba(255,255,255,.9); }

/* ---------- Footer ---------- */
footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 6px;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
footer .r { color: var(--ink); }
.hidden { display: none !important; }

/* ============ v5.5.0 Refactor ============ */

/* 1 · Top-Bar kompakt & exakt ausgerichtet */
.topbar { padding: 5px 10px; flex-wrap: nowrap; align-items: center; gap: 8px; }
.timing { align-items: center; gap: 8px; }
#timer {
  font-size: 18px; line-height: 1; min-width: 62px; text-align: right;
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 4px;
  display: flex; align-items: center; justify-content: flex-end;
}
.tbtn { padding: 3px 7px; font-size: 10px; line-height: 1.4; }
.tbtn.locked { opacity: .4; cursor: not-allowed; position: relative; }
.tbtn.locked::after { content: " 🔒"; font-size: 8px; }
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; }
  .brand { font-size: 10px; }
}

/* 2 · Play-Icon optisch zentrieren */
#playBtn .ico { display: block; transform: translateX(2px); }

/* 3 · BYP-Schalter, Tier-Leiste, Summary-Pfeil */
.byp {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 4px; font-size: 9px; letter-spacing: .1em; padding: 3px 6px;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.byp:hover { color: var(--ink); border-color: var(--accent); }
.byp.on { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 8%, transparent); }

details.mixer > summary { align-items: center; line-height: 1; }
details.mixer > summary::after { line-height: 1; display: flex; align-items: center; }

.tierbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px;
}
.tierLabel { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.tierLabel strong { color: var(--accent); font-weight: 600; }
.tierBtn {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 999px; padding: 3px 9px; font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.tierBtn:hover { color: var(--ink); border-color: var(--accent); }
.tierBtn.on { color: var(--accent); border-color: var(--accent); }

/* 5 · Trägerfrequenz-Zeile */
.carrierRow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.carrierRow h5 { margin: 0; white-space: nowrap; }
.carrierRow select { width: auto; flex: 1; margin-bottom: 0; }

/* 7 · Kachel-Raster & Leucht-Zustand */
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .grid.g3 { grid-template-columns: repeat(2, 1fr); } }
.cell::before { background: rgba(0,0,0,.4); transition: background .3s ease; }
.cell.active::before { background: rgba(0,0,0,.05); }
.cell.active:hover::before { background: rgba(0,0,0,.05); }

/* 8 · Sanfte Tab-Übergänge */
.section { transition: opacity .3s ease; }
.section.fading { opacity: 0; }

/* ---------- Permanente 40-Hz-Erdung ---------- */
.grounding { flex: 0 0 auto; }
.grounding .cell { min-height: 46px; }
/* Abdunklung gilt für HUD + Hintergrund via body */
html { transition: filter 2s ease; }
html.dimmed { filter: brightness(0.35); }
html.dimmed[data-theme="lab-dark"] { filter: brightness(0.80); }

/* ---------- PWA-Installation ---------- */
.installRow { position: relative; display: flex; justify-content: center; flex: 0 0 auto; }
.installBtn {
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .2s;
}
.installBtn:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent); }
.iosHint {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: min(340px, 92vw); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; text-align: left;
  box-shadow: 0 8px 30px rgba(15,23,42,.10); z-index: 20;
}
.iosHint strong { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 5px; }
.iosHint p { font-size: 11.5px; line-height: 1.5; color: var(--ink); }
.iosClose { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; }
.iosClose:hover { color: var(--ink); }

/* ============ v5.6.0 Update ============ */

/* 1 · Solfeggio-Kacheln strikt einzeilig */
.grid.g3 { grid-template-columns: repeat(3, 1fr); }
.grid.g3 .cell { min-height: 42px; padding: 6px 7px; }
.grid.g3 .cell .hz { font-size: 12px; line-height: 1.15; white-space: nowrap; }
.grid.g3 .cell .nm {
  font-size: 13px; line-height: 1.2; letter-spacing: .04em;
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; max-width: 100%;
}
.grid.g3 .cell > span { min-width: 0; max-width: 100%; }
@media (max-width: 520px) {
  .grid.g3 { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .grid.g3 .cell { min-height: 38px; padding: 5px 5px; }
  .grid.g3 .cell .hz { font-size: 10.5px; }
  .grid.g3 .cell .nm { font-size: 12px; letter-spacing: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.2; }
}

/* 3 · Header exakt zentriert */
.topbar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; text-align: center;
}
.topbar .brand { line-height: 1; display: flex; align-items: center; }
.topbar .timing { line-height: 1; }

/* Mischpult-Chevron */
details.mixer > summary { position: relative; }
details.mixer > summary::after { content: none; }
details.mixer > summary .chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1px solid var(--line); border-radius: 4px;
  color: var(--accent); font-size: 9px; line-height: 1;
}
details.mixer[open] > summary .chev::after { content: ""; }
details.mixer[open] > summary .chev { transform: translateY(-50%) rotate(180deg); }

/* 4 · Dynamische Regler-Füllung */
input[type=range] {
  height: 4px; border-radius: 999px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 50%, var(--line) 50%, var(--line) 100%);
}
input[type=range].muted { filter: grayscale(1); opacity: .55; }
input[type=range].muted::-webkit-slider-thumb { border-color: var(--muted); }
input[type=range].muted::-moz-range-thumb { border-color: var(--muted); }

/* 5 · Canvas-Zeile mit separatem VU-Meter */
.scopeRow { display: flex; gap: 6px; flex: 0 0 auto; height: 110px; }
.scopeRow .scope { flex: 1 1 auto; height: 100%; }
.vu {
  position: relative; flex: 0 0 22px; width: 22px; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 4px 4px; background: var(--bg);
}
.vu canvas { display: block; width: 100%; height: 100%; }
.vuLbl {
  position: absolute; top: 4px; left: 0; right: 0; text-align: center;
  font-size: 7px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* ============ v5.7.0 Update ============ */

/* Bildschirmfüllendes Kachel-Grid: aktive Sektion + Grid dehnen sich
   vertikal über den gesamten Restplatz, Zeilen teilen ihn gleichmäßig */
.panes > .section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.panes > .section.hidden { display: none !important; }
.panes .grid {
  flex: 1 1 auto;
  min-height: 0;
  grid-auto-rows: 1fr;
}
.panes .grid .cell { height: 100%; }

/* ============ v5.8.0 Update ============ */

/* Erweiterte Einstellungen: klappt nach OBEN auf + Cyan-Glow */
details.mixer {
  display: flex;
  flex-direction: column-reverse;
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), rgba(255, 255, 255, 0));
}
details.mixer > summary { color: var(--ink); }
details.mixer > .mixerBody {
  border-top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  animation: mixerUp .28s ease;
}
@keyframes mixerUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
details.mixer > summary .chev {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ============ v5.9.0 Update ============ */

/* Parallel-Modus-Button links neben der Trägerfrequenz */
.parBtn {
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: var(--bg);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: box-shadow .2s, background .2s, color .2s;
}
.parBtn:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent); }
.parBtn.on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Kopfhörer-Hinweis */
.hpHint {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); font-weight: 400; white-space: nowrap;
}
.hpHint span { font-size: 10px; }
.hpHead { display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; }
.hpHead .hpHint { margin-left: auto; }

/* Zwei-Button-Weiche für die Trägerfrequenz (nur im Parallel-Modus sichtbar) */
.carrierSwitch {
  display: flex; align-items: center; gap: 6px;
  margin: -2px 0 8px; width: 100%; box-sizing: border-box;
}
.carrierSwitch.hidden { display: none; }
.carBtn {
  flex: 1 1 0; min-width: 0;
  font-size: 8px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 6px; border-radius: 5px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  cursor: pointer; transition: all .2s ease;
}
.carBtn:hover { color: var(--ink); border-color: var(--accent); }
.carBtn.on {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Schliessen-X (im Kreis) in den Erweiterten Einstellungen — rechts in der Audio-Spur-Kopfzeile */
.mixerBody { position: relative; }
.laneHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.laneHead h4 { margin: 0; flex: 1 1 auto; }
.mixClose {
  flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: var(--bg); color: var(--accent);
  font-size: 9px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  transition: background .2s, color .2s, box-shadow .2s;
}
.mixClose:hover { background: var(--accent); color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Kopfhörer-Icon auf Routine-Kacheln */
.cell .hpIco {
  position: absolute; top: 4px; left: 5px;
  font-size: 9px; opacity: .75; filter: grayscale(.3);
  pointer-events: none;
}

/* Info-Button oben rechts in der Top-Bar */
.topbar { position: relative; z-index: 1000; overflow: visible; }
.infoBtn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 10px; font-style: italic; font-family: Georgia, serif; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s;
}
.infoBtn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); }

/* Info-Overlay (Weisses Labor-Design) */
.infoOverlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.infoOverlay.hidden { display: none; }
.infoCard {
  max-width: 520px; width: 100%; max-height: 82vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 8px rgba(0,0,0,.06);
  padding: 20px 22px;
  font-size: 11.5px; line-height: 1.55; color: var(--ink, #1a2430);
}
.infoCard h3 {
  margin: 0 0 10px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.infoCard p { margin: 0 0 10px; }
.infoCard .infoSub { font-weight: 600; margin-bottom: 6px; }
.infoCard ul { margin: 0 0 14px; padding-left: 16px; }
.infoCard li { margin-bottom: 7px; }
.infoCard strong { color: var(--accent); font-weight: 600; }
.infoClose {
  display: block; margin: 4px auto 0;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: var(--bg); color: var(--accent);
  border-radius: 999px; padding: 6px 22px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: background .2s, color .2s;
}
.infoClose:hover { background: var(--accent); color: #fff; }

/* Original-Typografie Handbuch-Kopf: kursives Cyan-Intro + Sans-Serif-Fließtext */
.infoManual .infoIntro {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-style: italic !important;
  color: #06b6d4 !important;
  font-size: 12px; line-height: 1.55;
  margin: 2px 0 10px;
}
.infoManual .infoLead {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-style: normal !important;
  color: #1a2430 !important;
  font-size: 11.5px; line-height: 1.55;
  margin: 0 0 12px;
}

/* ============ v6.0.0 Update ============ */

/* 1 · Trägerfrequenz-Zeile bündig im Grid (kein Überhang nach rechts) */
.carrierRow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  width: 100%; max-width: 100%; box-sizing: border-box;
}
.carrierRow select {
  flex: 1 1 120px; min-width: 0; max-width: 100%; width: auto;
  box-sizing: border-box;
}
.carrierRow .val { flex: 0 0 auto; margin-left: auto; }
.carrierRow .parBtn { flex: 0 0 auto; }
@media (max-width: 520px) {
  .carrierRow h5 { flex: 1 1 100%; }
}

/* 3 · Lizenz-Zahnrad */
.gearWrap { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); }
.tierPick { position: relative; display: inline-flex; }
.tierOpt {
  border: 0; background: var(--bg); color: var(--muted); cursor: pointer;
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 5px; text-align: left;
}
.tierOpt:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--ink); }
.tierOpt.on { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* 4 · Zahnrad oben links */
.gearBtn {
  position: relative;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-size: 10px; line-height: 1; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.gearBtn:hover { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent); }

/* 5 · KI-Ausrichtung (nur Routine 9) */
.aiRow {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 6px; padding: 6px 9px;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent);
}
.aiRow.hidden { display: none; }
.aiRow label {
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); white-space: nowrap;
}
.aiRow input {
  flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; font-size: 11px; color: var(--ink); padding: 3px 2px; outline: none;
}
.aiRow input:focus { border-bottom-color: var(--accent); }
.aiState { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }

/* ============ v6.1.0 Update ============ */

/* 3 · Kopfzeile "Audio-Spur" + Schliessen-X exakt vertikal mittig */
.lane .laneHead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-height: 22px; margin: -2px 0 6px;
}
.lane .laneHead h4 { margin: 0; line-height: 1; display: flex; align-items: center; }
.laneHead .mixClose { align-self: center; }

/* 2 · Live-Frequenzanzeige neben dem Spürbar-Schalter */
.subRow { display: flex; align-items: center; gap: 8px; }
.subRow .sub { margin-top: 0; }
.liveHz {
  font-size: 10px; letter-spacing: .1em; color: var(--accent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lane.hidden { display: none; }

/* 4 · Binaural-Kopfzeile: Parallel-Button + Trägerfrequenz in EINER Zeile */
#paneBinaural .carrierRow {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px;
  width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 6px;
}
#paneBinaural .carrierRow .parBtn { flex: 0 0 auto; white-space: nowrap; }
#paneBinaural .carrierRow select {
  flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%;
  margin-bottom: 0; box-sizing: border-box;
}
#paneBinaural .carrierRow .val { flex: 0 0 auto; margin-left: 0; min-width: 0; }

/* 6 · Routine-Kacheln: sauberer Zeilenumbruch statt Abschneiden */
#gridBasis.grid.g3 .cell .hz {
  white-space: normal; overflow-wrap: anywhere; text-wrap: balance; line-height: 1.1;
}
#gridBasis.grid.g3 .cell .nm {
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere; line-height: 1.15;
}

/* 5 · Toast-Hinweis */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--bg); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px; padding: 8px 16px; z-index: 90;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: opacity .25s ease, transform .25s ease;
}
.toast.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }

/* ---- Zusatzkanäle: Forest Rain & Galactic Radio Noise ---- */
.onoff {
  font: 600 10px/1 ui-sans-serif, system-ui;
  letter-spacing: .08em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #e5e7eb);
  background: var(--bg);
  color: #94a3b8;
  cursor: pointer;
}
.onoff.on {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 25%, transparent);
}
.laneLock { margin-left: 6px; font-size: 11px; opacity: .7; }
.lane.locked { opacity: .45; pointer-events: none; }

/* 3b · 30-Sekunden-Vorschau */
.previewCd {
  font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-left: auto; margin-right: 8px; white-space: nowrap;
}
.previewCd.hidden { display: none; }
.cell .previewBadge {
  position: absolute; left: 6px; bottom: 5px; z-index: 4;
  font-size: 8.5px; letter-spacing: .1em; color: var(--accent);
  background: rgba(255,255,255,.86); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 1px 7px;
}
.infoLead { color: var(--accent); font-style: italic; }
.infoFoot { margin-top: 8px; color: var(--muted); font-size: 10.5px; }

/* 3c · Labor-Popup nach Vorschau-Ende (zentriertes Modal) */
.previewPopup {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); backdrop-filter: blur(6px);
  padding: 18px;
  transition: opacity .3s ease;
}
.previewPopup .previewCard {
  max-width: min(92vw, 420px); width: 100%;
  background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px;
  padding: 26px 28px;
  text-align: center;
  box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 14px rgba(0,0,0,.08);
}
.previewPopup .previewCard p {
  margin: 0;
  font-size: 14px; line-height: 1.45; letter-spacing: .02em;
  color: var(--ink);
}
.previewPopup .previewCard strong {
  display: block; font-size: 16px; font-weight: 600;
  color: var(--accent); margin-bottom: 6px;
}
.previewPopup button {
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); background: var(--bg); color: var(--accent);
  border-radius: 999px; padding: 6px 22px;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: background .2s, color .2s;
}
.previewPopup button:hover { background: var(--accent); color: #fff; }
.previewPopup.hidden { opacity: 0; pointer-events: none; }

/* 3d · Live-Countdown auf Vorschau-Kachel */
.cell .nm.previewCountdown {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  font-size: 16px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); text-transform: uppercase;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
  white-space: nowrap; overflow: visible;
  background: var(--bg); border-radius: 4px; padding: 2px 8px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 8px rgba(0,0,0,.25);
}

/* ============ v6.3.0 · HUD-Restrukturierung & horizontales Mischpult ============ */

#hud { gap: 6px; }

/* 1 · Zeitvorwahl als eigene Zeile unter der Top-Bar */
.timingRow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 8px;
}
.timingRow #timer { border: 0; padding: 0 4px; }

/* 2 · Canvas vertikal um 1/3 komprimiert + hauchdünne Gitterlinien */
.scopeRow { height: 73px; }
.scope .lbl { top: 4px; left: 6px; font-size: 8px; }

/* 3 · Musik-Auswahl direkt unter dem Canvas */
.musicRow {
  display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 8px;
}
.musicRow label {
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.musicRow select { margin-bottom: 0; flex: 1 1 auto; padding: 3px 6px; }

/* 4 · Horizontales Mischpult (Short-Fader-Muster) */
details.mixer { display: block; flex: 0 0 auto; }
details.mixer > summary { padding: 4px 10px; font-size: 9.5px; }
details.mixer > .mixerBody {
  display: block;
  border-top: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-bottom: 0;
  padding: 7px 8px;
}
.chRow {
  display: flex; align-items: stretch; gap: 5px;
  overflow: hidden; padding-bottom: 2px;
}
.chRow::-webkit-scrollbar { height: 0; }
.ch {
  --ch: var(--accent);
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 3px;
  background: var(--bg);
  transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease;
  animation: chIn .28s ease;
}
@keyframes chIn { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.ch.hidden { display: none !important; }
.chName {
  font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.ch .val {
  min-width: 0; text-align: center;
  font-size: 11px; font-weight: 600; color: var(--ch);
  text-shadow: 0 0 8px color-mix(in srgb, var(--ch) 35%, transparent);
}
.ch input[type=range] {
  width: 100%; flex: 0 0 auto;
  margin-top: 14px !important;
  margin-bottom: 14px !important;
}
.ch input[type=range]::-webkit-slider-thumb {
  border-color: var(--ch);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ch) 55%, transparent);
}
.ch input[type=range]::-moz-range-thumb {
  border-color: var(--ch);
  box-shadow: 0 0 7px color-mix(in srgb, var(--ch) 55%, transparent);
}
.chSwitches { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.ch .sub { margin-top: 0; padding: 2px 6px; font-size: 8.5px; gap: 4px; }
.ch .byp { font-size: 8.5px; padding: 2px 6px; }
.ch .onoff { font-size: 8.5px; padding: 3px 9px; }
.ch .liveHz { font-size: 8.5px; color: var(--ch); }

/* Neon-Indikatorfarben pro Kanal */
.ch-audio { --ch: var(--accent); }
.ch-freq  { --ch: #c9a227; }
.ch-cosmic { --ch: #FF007F; }
.ch-engel { --ch: #14b8a6; }
html[data-theme="lab-dark"] .ch-engel { --ch: #2dd4bf; }
.ch-freq .sub.on { color: #e08a1e; border-color: #e08a1e; box-shadow: 0 0 10px rgba(224,138,30,.3); }
.ch-freq .sub.on .dot { background: #e08a1e; box-shadow: 0 0 8px #e08a1e; }
.ch-bin   { --ch: #2563eb; }
.ch-rain  { --ch: #16a34a; }
.ch-noise { --ch: #7c3aed; }
.ch .byp.on, .ch .onoff.on, .ch .sub.on {
  color: var(--ch); border-color: var(--ch);
  box-shadow: 0 0 9px color-mix(in srgb, var(--ch) 32%, transparent);
}
.ch .sub.on .dot { background: var(--ch); box-shadow: 0 0 8px var(--ch); }
/* Rahmenlogik: AUDIO/SOLFEGGIO/KOSMISCH/BINAURAL leuchten im Normalbetrieb,
   erst aktiver BYP schaltet den Rahmen auf steriles Labor-Grau.
   RAIN/NOISE umgekehrt: Grau bei OFF, Farbe bei ON. */
.ch-audio, .ch-freq, .ch-bin {
  border-color: color-mix(in srgb, var(--ch) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ch) 18%, transparent);
}
.ch-audio:has(.byp.on), .ch-freq:has(.byp.on), .ch-bin:has(.byp.on) {
  --ch: var(--muted);
  border-color: var(--line);
  box-shadow: none;
}
.ch-freq:has(.byp.on) .sub.on {
  color: var(--muted); border-color: var(--muted); box-shadow: none;
}
.ch-freq:has(.byp.on) .sub.on .dot { background: var(--muted); box-shadow: none; }
.ch-rain:has(.onoff.on), .ch-noise:has(.onoff.on) {
  border-color: color-mix(in srgb, var(--ch) 55%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--ch) 18%, transparent);
}
.ch.locked { opacity: .45; pointer-events: none; }

.mixFoot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.mixFoot .resetBtn { flex: 1 1 auto; grid-column: auto; }

/* 5 · 40-Hz-Erdung als Fusszeile */
.grounding { margin-top: auto; }
.panes { flex: 1 1 auto; }


/* ============ v6.5.0 · Cockpit-Layout ============ */

/* 1 · Top-Bar: Icons exakt auf der Titel-Mittelachse, dezentes Cyan */
.gearWrap {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; z-index: 10000;
}
.gearBtn, .infoBtn {
  position: static; transform: none;
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.infoBtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

.gearBtn:active, .gearBtn:focus-visible,
.infoBtn:active, .infoBtn:focus-visible {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent); outline: none;
}
@keyframes infoPulse {
  0%, 100% { box-shadow: 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); opacity: .75; }
  50% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); opacity: 1; }
}
.infoBtn { animation: infoPulse 2s ease-in-out 15; }

/* Vollflächiges Lizenz- & Account-Terminal */
.licenseTerminal {
  position: fixed !important;
  top: 40px !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 40px) !important;
  background-color: var(--bg) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  font-family: "Courier New", Courier, monospace;
}
.licenseTerminal.hidden { display: none !important; }
.licenseTerminalContent {
  width: 100%;
  height: 100%;
  padding: 24px 10% 96px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.licenseTerminalHeading {
  margin: 0 0 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid #e5e7eb;
  color: var(--ink);
  font-family: inherit;
  font-size: clamp(13px, 2vw, 16px);
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25;
  text-align: left !important;
}
.licenseTierList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.licenseTierList .tierOpt {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: left;
}
.licenseTierList .tierOpt:hover { border-color: var(--accent); color: var(--ink); background: var(--bg); }
.licenseTierList .tierOpt.on {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tierActiveIcon {
  display: none;
  flex: 0 0 auto;
  margin-right: 12px;
  color: var(--accent);
}
.licenseTierList .tierOpt.on .tierActiveIcon { display: inline-block; }
.licenseFeedbackRow {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}
.licenseFeedbackButton {
  min-height: 38px;
  padding: 8px 18px;
  border: 1px solid var(--accent) !important;
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent) !important;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700 !important;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.licenseFeedbackButton:hover,
.licenseFeedbackButton:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--bg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
  outline: none;
}
.licenseTerminalClose {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  min-height: 34px;
  padding: 7px 22px;
  border: 1px solid var(--accent) !important;
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent) !important;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 700 !important;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.licenseTerminalClose:hover,
.licenseTerminalClose:focus-visible {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--bg);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
  outline: none;
}

@media (max-width: 520px) {
  .licenseTerminalContent { padding-top: 18px; }
  .licenseTerminalHeading { margin-bottom: 14px; }
  .licenseTierList .tierOpt { min-height: 44px; }
}

/* Kompakteres Zählerfenster */
.timingRow { padding: 2px 8px; gap: 8px; }
.timingRow #timer { font-size: 15px; min-width: 54px; }

/* 3 · Mischpult permanent offen, ohne Kopfzeile */
section.mixer {
  display: block; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), rgba(255,255,255,0));
}
section.mixer > .mixerBody { border: 0; padding: 7px 8px 3px; }

.ch { gap: 5px; padding: 6px 5px; justify-content: flex-start; }
.chName {
  margin-bottom: 1px; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
}
.ch .val { margin-bottom: 1px; font-size: 9px; min-width: 34px; }
.chSwitches {
  margin-top: 2px; display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; white-space: nowrap; gap: 4px;
}
.ch .byp, .ch .sub, .ch .onoff {
  white-space: nowrap; display: inline-flex; align-items: center; gap: 3px;
  line-height: 1; height: 16px; padding: 2px 5px; font-size: 8px; letter-spacing: .06em;
}
.ch .byp .dot, .ch .sub .dot { width: 4px; height: 4px; }

/* GALACTIC NOISE Spezial-Fix: Schloss filigran links, Text extra klein */
.ch-noise .chName { font-size: 8px; letter-spacing: .04em; gap: 3px; display: inline-flex; align-items: center; }
.ch-noise .laneLock { margin-left: 0; font-size: 8px; opacity: .7; order: -1; }

/* Dynamische Kompression sobald 5 Kanäle aktiv sind */
.chRow:has(> .ch:not(.hidden):nth-child(5)) .chName { font-size: 9px; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .val { font-size: 8px; min-width: 30px; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .byp,
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .sub,
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .onoff { font-size: 7px; padding: 2px 4px; height: 15px; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch-noise .chName { font-size: 7px; letter-spacing: .02em; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch-noise .laneLock { font-size: 7px; }
.ch .byp .dot, .ch .sub .dot {
  width: 5px; height: 5px; border-radius: 999px; background: var(--line);
  flex: 0 0 auto;
}
.ch .byp.on .dot { background: var(--ch); box-shadow: 0 0 8px var(--ch); }

/* Dynamische Noise-Kaskade: Dichte-Regler UNTER dem Noise-Kanal */
.ch .chSub {
  width: 100%; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--ch) 40%, transparent);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ch .chSub.hidden { display: none !important; }

/* Reset schmal & unaufdringlich, kompakt am Raster */
.mixFoot { margin-top: 1px; justify-content: center; }
.mixFoot .resetBtn {
  flex: 0 0 auto; font-size: 8px; letter-spacing: .12em; padding: 1px 10px;
  border-radius: 999px; color: var(--muted); border-color: var(--line); opacity: .8;
}

/* 4 · Drehgelenk-Kategorien-HUD */
.categoryHud {
  --section-color: var(--accent);
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
  gap: 5px; height: 34px; min-height: 34px; flex: 0 0 34px;
  font-family: "Courier New", Courier, monospace;
}
.categoryHud[data-section="solfeggio"] { --section-color: #c9a227; }
.categoryHud[data-section="binaural"] { --section-color: #2563eb; }
.categoryHud[data-section="kosmisch"] { --section-color: #FF007F; }
.categoryHud[data-section="engel"] { --section-color: #14b8a6; }
html[data-theme="lab-dark"] .categoryHud[data-section="engel"] { --section-color: #2dd4bf; }
.categoryHud[data-section="meditation"] { --section-color: #cbd5e1; }
.categoryJog,
.categoryDisplay,
.presetOpen {
  height: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 3px;
  background: var(--bg); font-family: inherit;
}
.categoryJog {
  flex: 1 1 0;
  min-width: 76px;
  position: relative; overflow: hidden; cursor: ew-resize; touch-action: none;
  padding: 0; color: var(--section-color); transition: border-color .18s ease, box-shadow .18s ease;
}
.categoryJog:hover,
.categoryJog:focus-visible,
.categoryJog.turning { border-color: var(--section-color); box-shadow: 0 0 9px color-mix(in srgb, var(--section-color) 32%, transparent); outline: none; }
.categoryTicks {
  position: absolute; inset: 6px 7px;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 7px);
  opacity: .62; transform: skewX(-8deg);
  transition: background-position .18s ease;
}
.categoryHud[data-section="basis"] .categoryTicks { background-position-x: 0; }
.categoryHud[data-section="solfeggio"] .categoryTicks { background-position-x: 7px; }
.categoryHud[data-section="binaural"] .categoryTicks { background-position-x: 14px; }
.categoryHud[data-section="kosmisch"] .categoryTicks { background-position-x: 21px; }
.categoryHud[data-section="engel"] .categoryTicks { background-position-x: 25px; }
.categoryHud[data-section="meditation"] .categoryTicks { background-position-x: 28px; }
.categoryAxis {
  position: absolute; left: 50%; top: 3px; bottom: 3px; width: 1px;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.categoryDisplay {
  flex: 1.8 1 0;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex; align-items: center; justify-content: center; padding: 4px 8px;
  color: var(--section-color); border-color: var(--section-color);
  box-shadow: inset 0 0 8px color-mix(in srgb, var(--section-color) 10%, transparent), 0 0 9px color-mix(in srgb, var(--section-color) 24%, transparent);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1;
}
.categoryHud[data-section="meditation"] .categoryDisplay { box-shadow: none; }
.presetOpen {
  flex: 0 0 48px;
  width: 48px;
  color: var(--ink); cursor: pointer; font-size: 9px; font-weight: 700; letter-spacing: .08em;
  transition: color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.presetOpen:hover,
.presetOpen:focus-visible { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 22%, transparent); outline: none; }

/* USER-PRESETS — blickdicht, nur über ✕ CLOSE schließbar */
.presetOverlay {
  position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(255,255,255,.96);
}
.presetOverlay.hidden { display: none; }
.presetCard {
  position: relative; width: min(430px, 100%); background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 18px 55px rgba(15,23,42,.16); padding: 42px 18px 18px;
  font-family: "Courier New", Courier, monospace;
}
.presetCard h3 {
  margin: 0 0 15px; text-align: center; color: var(--ink); font-size: 12px;
  font-weight: 600; letter-spacing: .16em;
}
.presetClose {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: var(--muted); cursor: pointer; font-family: inherit; font-size: 9px; letter-spacing: .08em;
}
.presetClose:hover,
.presetClose:focus-visible { color: var(--ink); outline: none; }
.presetGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.presetSlot {
  aspect-ratio: 1.4 / 1; min-width: 0; border: 1px solid var(--line); border-radius: 2px;
  background: var(--bg); color: var(--muted); font-family: inherit; font-size: 9px; letter-spacing: .08em;
  display: flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
}
.presetSlot:disabled { opacity: .68; cursor: not-allowed; }
.presetSlot.saved { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 18%, transparent); }
.presetSlot.locked { color: #9ca3af; background: #f8fafc; opacity: .72; }
.presetSlot .slotLock { font-size: 9px; line-height: 1; }

/* 5 · Erdung als schmaler Button zwischen Play und Installation */
.grounding { margin-top: 0; flex: 0 0 auto; }
.grounding .grid { display: block; }
.grounding .cell {
  min-height: 0; height: auto; padding: 6px 14px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 8px; border-radius: 999px; text-align: left;
}
.grounding .cell .hz { font-size: 10px; letter-spacing: .12em; }
.grounding .cell .nm { font-size: 10px; letter-spacing: .08em; }
.grounding .cell .sub { margin: 0; padding: 2px 7px; font-size: 8px; }

/* 6 · Statuszeile ganz unten */
footer {
  justify-content: center; border-top: 0; padding: 2px 0 0;
  font-size: 7.5px; letter-spacing: .18em; color: var(--muted); opacity: .7;
}

.grounding .grid { display: flex; justify-content: center; }
.grounding .cell { width: min(420px, 100%); }
.grounding .cell .nm { white-space: nowrap; }

/* Vorschau-Modal: Upgrade-Stufen (FREE / BASIS / PRO) */
.previewTiers { display: flex; gap: 6px; justify-content: center; margin: 8px 0 6px; flex-wrap: nowrap; }
.previewTiers .upBtn {
  flex: 1 1 0; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--bg); color: var(--accent);
  border-radius: 6px; padding: 5px 6px; font-size: 9px; letter-spacing: .14em; cursor: pointer;
  white-space: nowrap;
}
.previewTiers .upBtn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* === FLUID-STATE FEEDBACKFORMULAR === */
.tierDivider { border:0; border-top:1px solid #e2e8f0; margin:4px 0; }
.fbOpt { font-family:"Courier New",Courier,monospace; letter-spacing:.5px; }
.fbOverlay { position:fixed; inset:0; z-index:100000; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.fbOverlay.hidden { display:none; }
.fbCard { position:relative; background:var(--bg); border:1px solid #cbd5e1; box-shadow:0 20px 60px rgba(15,23,42,.25); max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:22px 26px 26px; font-family:"Courier New",Courier,monospace; text-align:left; }
.fbClose { position:absolute; top:10px; right:12px; background:none; border:none; font-family:inherit; font-size:.72rem; color:#64748b; cursor:pointer; letter-spacing:1px; }
.fbClose:hover { color:#0f172a; }
.fbCard h3 { font-size:.85rem; letter-spacing:1px; margin:0 0 8px; color:#0f172a; }
.fbLead { font-size:.78rem; color:#475569; margin:0 0 14px; text-align:left; line-height:1.5; }
.fbForm { display:flex; flex-direction:column; gap:6px; }
.fbBlock { font-size:.7rem; letter-spacing:1px; color:#0891b2; margin:12px 0 2px; }
.fbQ { font-size:.78rem; color:#0f172a; margin-top:8px; line-height:1.4; }
.fbOptionalRow { display:flex; flex-direction:column; gap:2px; }
.fbOptional { margin-top:6px; font-size:.74rem; color:#475569; }
.fbForm select, .fbForm textarea, .fbForm input[type="text"], .fbForm input[type="email"] { font-family:inherit; font-size:.78rem; background:var(--bg); color:#0f172a; border:1px solid #cbd5e1; padding:6px 8px; border-radius:0; width:100%; box-sizing:border-box; }
.fbForm textarea { resize:vertical; }
.fbOptionalInput { margin-bottom:4px; }
.fbRadios { display:flex; gap:18px; flex-wrap:wrap; font-size:.78rem; color:#334155; padding:2px 0; }
.fbRadios label { display:flex; align-items:center; gap:6px; cursor:pointer; }
.fbSliderRow input[type="range"] { width:100%; accent-color:var(--accent); }
.fbRangeLbl { display:flex; justify-content:space-between; font-size:.62rem; color:#94a3b8; }
.fbHoney { position:absolute; left:-9999px; opacity:0; height:0; }
.fbSubmit { align-self:center; margin-top:16px; font-family:inherit; font-size:.78rem; letter-spacing:1px; background:var(--bg); color:#0f172a; border:1px solid #0f172a; padding:9px 18px; cursor:pointer; }
.fbSubmit:hover { background:#0f172a; color:#fff; }
.fbPrivacy { font-size:.7rem; line-height:1.45; color:#888888; margin:10px 0 0; text-align:left; }
.fbHint { font-size:.64rem; line-height:1.35; color:#94a3b8; margin:-4px 0 2px; }
.fbOptIn { display:flex; align-items:flex-start; gap:8px; font-size:.72rem; line-height:1.4; color:#334155; cursor:pointer; padding:4px 0; }
.fbOptIn input { margin-top:2px; flex:0 0 auto; }
@media (max-width:768px) {
  .fbCard { text-align:center; font-size:.78rem; padding:18px 14px 20px; }
  .fbCard .fbLead { text-align:left; }
  .fbCard h3, .fbBlock, .fbQ { text-align:center; font-size:.78rem; }
  .fbRadios { justify-content:center; }
}

/* ============ v6.8.0 · Musik-Leiste, Parallel-Zeile, Auto-Fit-Mixer ============ */

/* 1 · Dreigeteilte Musik-Leiste unter dem Canvas */
.musicRow {
  display: flex; align-items: center; gap: 6px; padding: 3px 6px;
}
.musicRow .mrBtn {
  flex: 0 0 auto;
  font-family: inherit; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.musicRow .mrBtn:hover, .musicRow .mrBtn:focus-visible {
  color: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent); outline: none;
}
.musicRow #musicBtn {
  color: var(--accent);
  border-color: var(--accent);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);
}
.musicRow .mrNow {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-size: 10px; letter-spacing: .08em; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 4px;
  padding: 2px 6px; background: color-mix(in srgb, var(--accent) 4%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.musicRow select.hidden { display: none !important; }
.mixFoot { display: none !important; }
section.mixer > .mixerBody { padding: 6px 8px 6px; }

/* Musik-Popup (Design analog zur Anwendungsbeschreibung) */
.musicCard { max-width: 320px; }
.musicList { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.musicOpt {
  font-family: inherit; font-size: 12px; letter-spacing: .06em;
  padding: 9px 12px; text-align: left; cursor: pointer;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  transition: all .2s ease;
}
.musicOpt:hover { border-color: var(--accent); color: var(--accent); }
.musicOpt.on {
  border-color: var(--accent); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* 2 · Parallel + Trägerwahl in einer Zeile */
#paneBinaural .carrierRow {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  margin-bottom: 6px;
}
#paneBinaural .carrierRow .carrierSwitch {
  display: flex; gap: 5px; flex: 1 1 auto; min-width: 0; margin: 0;
}
#paneBinaural .carrierRow .carrierSwitch.hidden { display: none; }
#paneBinaural .carrierRow .carBtn {
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  font-size: 8px; letter-spacing: .05em; padding: 4px 5px;
  overflow: hidden; text-overflow: ellipsis;
}

/* 3 · Dynamische Auto-Fit-Skalierung der Kanalzüge */
.ch { container-type: inline-size; overflow: hidden; }
.ch > * { max-width: 100%; }
.chName, .ch .val, .ch .liveHz, .ch .byp, .ch .sub, .ch .onoff {
  overflow: hidden; text-overflow: ellipsis;
}
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .chName { font-size: clamp(5.5px, 13cqi, 9px); }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .val { font-size: clamp(6px, 14cqi, 9px); min-width: 0; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch:not(.ch-freq):not(.ch-bin) .liveHz { font-size: clamp(5.5px, 12cqi, 8.5px); }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .byp,
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .sub,
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .onoff {
  font-size: clamp(5px, 10cqi, 7.5px); padding: 2px 3px; height: auto; min-height: 13px; gap: 2px;
}
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch-noise .chName { font-size: clamp(5px, 10cqi, 7px); }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch-noise .laneLock { font-size: clamp(5px, 10cqi, 7px); }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch { padding: 5px 3px; gap: 3px; }
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .byp .dot,
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch .sub .dot { width: 3px; height: 3px; }

/* ====== v6.9.0 · FLUID STATE FREQUENZRAD (3-6-9 Easter Egg) ====== */
.freqWheelWrap{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:.6rem 0 1rem; flex:1 1 auto;
}
.freqWheelWrap.hidden{ display:none; }
.freqWheelClose{
  position:absolute; top:0; right:.2rem;
  background:var(--bg); border:1px solid rgba(0,0,0,.12); border-radius:50%;
  width:1.6rem; height:1.6rem; line-height:1; cursor:pointer;
  font-family:"Courier New",monospace; font-size:.8rem; color:#334;
}
.freqWheel{
  --fwDeg:0deg;
  position:relative;
  width:min(62vw, 15rem); aspect-ratio:1/1; border-radius:50%;
  background:var(--bg);
  border:1px solid rgba(0,0,0,.14);
  box-shadow:0 0 0 6px rgba(255,255,255,.9), 0 0 22px rgba(0,200,220,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25rem; touch-action:none; cursor:grab; user-select:none;
}
.freqWheel:active{ cursor:grabbing; }
.freqWheel::before{
  content:""; position:absolute; inset:14%;
  border-radius:50%; border:1px dashed rgba(0,0,0,.10);
}
.fwBrand{
  font-family:"Courier New",monospace; font-size:.6rem; letter-spacing:.22em;
  color:rgba(0,0,0,.42); text-transform:uppercase;
}
.fwVal{
  font-family:"Courier New",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(.95rem,4.2vw,1.35rem); color:#0b8ea0; letter-spacing:.04em;
}
.fwMark{
  /* Nadel startet am inneren Kreis (inset 14%) und laeuft radial nach aussen */
  position:absolute; left:50%; top:2%;
  width:2px; height:12%; background:rgba(0,190,215,.85);
  transform-origin:50% 400%;
  transform:translateX(-50%) rotate(var(--fwDeg));
  border-radius:2px;
}
.fwInput{
  width:5.6rem; text-align:center;
  font-family:"Courier New",monospace; font-size:.72rem; color:#123;
  background:var(--bg); border:1px solid rgba(0,0,0,.14); border-radius:3px;
  padding:.15rem .2rem; outline:none;
}
.fwInput:focus{ border-color:rgba(0,190,215,.7); }
/* LAB-DARK: Frequenzrad kontrastreich */
html[data-theme="lab-dark"] .freqWheel{ background:#1f2022; border-color:rgba(255,255,255,.16); box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 0 24px rgba(6,182,212,.25); }
html[data-theme="lab-dark"] .freqWheel::before{ border-color:rgba(255,255,255,.18); }
html[data-theme="lab-dark"] .freqWheelClose{ background:#262729; border-color:rgba(255,255,255,.2); color:#e5e7eb; }
html[data-theme="lab-dark"] .fwBrand{ color:rgba(255,255,255,.6); }
html[data-theme="lab-dark"] .fwVal{ color:#22d3ee; }
html[data-theme="lab-dark"] .fwMark{ background:#22d3ee; }
html[data-theme="lab-dark"] .fwInput{ background:#262729; border-color:rgba(255,255,255,.2); color:#ffffff; }
html[data-theme="lab-dark"] .fwInput:focus{ border-color:#22d3ee; }

/* ============ v7.0.0 · Mobile-Zoom-Schutz ============ */
html, body {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}

/* ============ v7.0.1 · Kacheltypografie & Touch-Lupe ============ */
/* Titel bleiben auf jeder Kachel exakt 1 px größer als ihre Untertitel. */
.cell {
  container-type: inline-size;
  --tile-sub-size: clamp(9px, 7.4cqi, 12px);
}
.cell > .hz,
.cell > .nm {
  width: 100%;
  box-sizing: border-box;
  padding-right: 30px;
}
.cell .hz {
  font-size: calc(var(--tile-sub-size) + 1px);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.cell .nm {
  font-size: var(--tile-sub-size);
  line-height: 1.2;
  margin-top: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.grid.g3 .cell { --tile-sub-size: clamp(8px, 7.4cqi, 11px); }
.grid.g3 .cell .hz { font-size: calc(var(--tile-sub-size) + 1px); }
.grid.g3 .cell .nm { font-size: var(--tile-sub-size); margin-top: 3px; }
.grounding .cell { --tile-sub-size: 8px; }
.grounding .cell .hz { font-size: calc(var(--tile-sub-size) + 1px); }
.grounding .cell .nm { font-size: var(--tile-sub-size); }

/* Der Live-Countdown bleibt als untrennbarer Block in genau einer Zeile. */
.grid .cell > .nm.previewCountdown,
#gridBasis.grid.g3 .cell > .nm.previewCountdown {
  width: auto;
  max-width: 100%;
  padding: 2px 6px;
  flex-shrink: 1;
  font-size: clamp(7px, 8cqi, 16px);
  letter-spacing: clamp(0px, .35cqi, .08em);
  line-height: 1.2;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

@media (max-width: 520px) {
  .grid.g3 .cell { --tile-sub-size: clamp(7px, 8.2cqi, 10px); }
  .grid.g3 .cell .hz { font-size: calc(var(--tile-sub-size) + 1px); }
  .grid.g3 .cell .nm { font-size: var(--tile-sub-size); }
  .cell > .hz,
  .cell > .nm { padding-right: 28px; }
  .grid .cell > .nm.previewCountdown,
  #gridBasis.grid.g3 .cell > .nm.previewCountdown { padding-right: 5px; }
}

/* Präzise Touch-Fläche; die bestehende Faderfüllung bleibt unverändert. */
.ch input[type=range] {
  touch-action: none;
  cursor: ew-resize;
}
.ch .val {
  transform-origin: center;
  transition: transform .18s ease, text-shadow .18s ease, filter .18s ease;
}
.ch input[type=range]::-webkit-slider-thumb {
  transform: scale(1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ch input[type=range]::-moz-range-thumb {
  transform: scale(1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ch.fader-touch {
  overflow: visible;
  z-index: 8;
}
.ch.fader-touch .val {
  transform: scale(1.65);
  filter: saturate(1.35) brightness(1.08);
  text-shadow: 0 0 5px var(--ch), 0 0 15px var(--ch), 0 0 25px color-mix(in srgb, var(--ch) 70%, transparent);
}
.ch.fader-touch input[type=range]::-webkit-slider-thumb {
  transform: scale(1.55);
  box-shadow: 0 0 5px var(--ch), 0 0 14px var(--ch);
}
.ch.fader-touch input[type=range]::-moz-range-thumb {
  transform: scale(1.55);
  box-shadow: 0 0 5px var(--ch), 0 0 14px var(--ch);
}

/* ============ v7.2.0 · Vollflächiges 9-Track-Lizenz-Terminal ============ */
.musicTerminal {
  position: fixed;
  inset: var(--music-terminal-top, 48px) 0 0;
  z-index: 11000;
  display: flex;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
}
.musicTerminal ~ .previewPopup,
body > .previewPopup { z-index: 100002; }
.musicTerminal.hidden { display: none !important; }
.musicTerminalShell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.musicTerminalHead {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.musicTerminalHeading {
  width: min(680px, calc(100% - 48px));
  margin: 0 auto 8px;
  color: var(--ink);
  font: bold 15px/1.2 "Courier New", Courier, monospace !important;
  letter-spacing: 0 !important;
  text-align: left;
  white-space: nowrap;
}
.musicTabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(680px, calc(100% - 48px));
  margin: 0 auto;
}
.musicTab {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--muted);
  font: 700 clamp(8px, 2.4vw, 11px)/1 "Courier New", Courier, monospace;
  letter-spacing: 0;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.musicTab:last-child { border-right: 1px solid var(--line); }
.musicTab.on {
  position: relative;
  z-index: 1;
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent);
}
.musicTab.on + .musicTab { border-left-color: var(--accent); }
.musicTerminalTitle {
  width: min(680px, calc(100% - 48px));
  margin: 10px auto 0;
  color: var(--accent);
  font: bold clamp(12px, 2.4vw, 16px)/1.15 "Courier New", Courier, monospace !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap;
}
.musicTerminalScroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px max(24px, calc((100vw - 680px) / 2)) 88px;
  background: var(--bg);
}
.musicTrack {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.musicTrack:hover { border-color: var(--accent); }
.musicTrackIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
}
.musicTrackName {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: clamp(12px, 3.2vw, 15px);
  font-weight: 700;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.musicTrackState {
  color: var(--muted);
  font-size: clamp(8px, 2.2vw, 10px);
  letter-spacing: .1em;
  white-space: nowrap;
}
.musicTrack.active {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 0 13px color-mix(in srgb, var(--accent) 22%, transparent);
}
.musicTrack.active .musicTrackIcon {
  margin-right: 12px;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent);
}
.musicTrack.locked { color: var(--muted); background: #f8fafc; }
.musicTrack.locked .musicTrackIcon { font-size: 12px; opacity: .75; }
.musicTrack.previewing {
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
}
.musicTrack.previewing .musicTrackState { color: var(--accent); }
.musicTerminalFoot {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
  min-height: 65px;
}
.musicTerminalClose {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  min-width: 180px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font: 700 11px/1 "Courier New", Courier, monospace;
  letter-spacing: .14em;
  cursor: pointer;
}
.musicTerminalClose:hover,
.musicTerminalClose:focus-visible { border-color: var(--accent); color: var(--accent); }
@media (max-width: 520px) {
  .musicTerminalHead { padding-left: 8px; padding-right: 8px; }
  .musicTerminalHeading,
  .musicTabs,
  .musicTerminalTitle { width: calc(100% - 32px); }
  .musicTerminalScroll { padding-left: 24px; padding-right: 24px; }
  .musicTrack { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 7px; padding: 9px 10px; }
}

/* ============ v7.2.1 · Fünf-Spur-Kompression & Überlagerungsschutz ============ */

/* 1 · Lane-Kopfzeile: Prozentwert (+ optionales Schloss) als flache, zentrierte Flex-Reihe.
       Das Schloss sitzt NIE absolut über dem Text, sondern als eigenes Element links daneben. */
.chHead {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  position: relative !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: 1;
}
.chHead > * { flex: 0 0 auto; min-width: 0; }
.chHead .val {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap;
}

/* 2 · Schloss-Icon: eigenständiges flaches Element, konstanter Abstand, immer links der Prozentzahl */
.laneLock {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  order: -1;
  margin: 0 !important;
  width: 12px;
  height: 12px;
  font-size: 11px !important;
  line-height: 1;
  opacity: .7;
  flex: 0 0 auto;
}
/* Freigegebene Spur: Schloss bleibt deaktiviert, auch gegen die eigene Anzeige-Regel */
.laneLock.hidden { display: none !important; }

/* 3 · Fünf AKTIV sichtbare Kanalzüge (Parallel-Modus): Info-Zeilen unter den Fadern
       werden nie abgeschnitten, nie mit Punkten abgekürzt und überlagern keine Nachbar-Spur.
       Die Spur-Zählung prüft ausdrücklich alle fünf Lane-Positionen auf "sichtbar". */
.chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .ch,
.chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .chHead {
  overflow: visible !important;
}
.chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .ch:not(.ch-freq):not(.ch-bin) .liveHz {
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  letter-spacing: 0 !important;
  text-align: center;
}
.chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .ch .chHead .laneLock {
  width: 10px;
  height: 10px;
  font-size: 9px !important;
}

/* Enge Kanalzüge: 0.72rem bleibt die Obergrenze, darüber hinaus proportional zur Spurbreite
   komprimieren, damit keine Frequenzangabe die Nachbar-Spur überlagert. */
@container (max-inline-size: 80px) {
  .chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .ch:not(.ch-freq):not(.ch-bin) .liveHz {
    font-size: 0.62rem !important;
  }
}
@container (max-inline-size: 68px) {
  .chRow:has(> .ch:nth-child(1):not(.hidden)):has(> .ch:nth-child(2):not(.hidden)):has(> .ch:nth-child(3):not(.hidden)):has(> .ch:nth-child(4):not(.hidden)):has(> .ch:nth-child(5):not(.hidden)) .ch:not(.ch-freq):not(.ch-bin) .liveHz {
    font-size: 0.52rem !important;
  }
}

/* ============ v7.2.2 · GALACTIC-NOISE Active-Kompression ============ */

/* Der Haupttitel folgt exakt der Typografie der übrigen Kanalüberschriften. */
.ch-noise > .chName {
  font-size: 10px !important;
  font-weight: inherit !important;
  letter-spacing: .035em !important;
  line-height: 1 !important;
}
.chRow:has(> .ch:not(.hidden):nth-child(5)) .ch-noise > .chName {
  font-size: clamp(5.5px, 13cqi, 9px) !important;
  letter-spacing: .015em !important;
}

/* Nur bei aktivem Noise-Kanal: Zusatzsteuerung ohne zusätzlichen Vertikalblock. */
.ch-noise:has(#noiseToggle.on) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.ch-noise:has(#noiseToggle.on) > .chName,
.ch-noise:has(#noiseToggle.on) > .chHead,
.ch-noise:has(#noiseToggle.on) > .chSwitches {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.ch-noise:has(#noiseToggle.on) > .chName {
  margin-bottom: 0 !important;
}
.ch-noise:has(#noiseToggle.on) > input[type=range] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.ch-noise:has(#noiseToggle.on) > .chSwitches {
  min-height: 13px !important;
  height: auto !important;
  line-height: 1 !important;
}
.ch-noise:has(#noiseToggle.on) > .chSwitches .onoff {
  min-height: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
.ch-noise:has(#noiseToggle.on) > .chSub {
  margin: 0 !important;
  padding: 2px 0 0 !important;
  border-top-width: 1px;
  gap: 1px !important;
  line-height: 1 !important;
  flex: 0 0 auto;
}
.ch-noise:has(#noiseToggle.on) > .chSub > .chName,
.ch-noise:has(#noiseToggle.on) > .chSub > .val {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.ch-noise:has(#noiseToggle.on) > .chSub > .chName {
  font-size: 6px !important;
  letter-spacing: 0 !important;
}
.ch-noise:has(#noiseToggle.on) > .chSub > .val {
  font-size: 7px !important;
}
.ch-noise:has(#noiseToggle.on) > .chSub > input[type=range] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ============ v7.2.6 · Frequenzanzeigen Kanal 2 & 3: starre Größe, selektive Laufweite ============ */
.ch-freq,
.ch-bin {
  overflow: visible !important;
}
.ch-freq > *,
.ch-bin > * {
  max-width: none !important;
}
#freqLiveHz,
#binLiveHz {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 8.5px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  letter-spacing: .1em !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: center !important;
  position: relative !important;
  z-index: 4 !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
}
#freqLiveHz.is-long,
#binLiveHz.is-long {
  letter-spacing: -0.04em !important;
}

/* v7.2.2 — Musik-SCHLIESSEN symmetrisch zum Lizenz-Terminal; Preset-Nebula */
.musicTerminalClose { border: 1px solid var(--accent) !important; color: var(--accent) !important; background: var(--bg) !important; border-radius: 6px !important; font-weight: 700 !important; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); }
.musicTerminalClose:hover, .musicTerminalClose:focus-visible { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.presetSlot.saved { position: relative; overflow: hidden; background-color: var(--bg); color: #ffffff !important; font-weight: bold !important; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.35); }
.presetSlot.saved * { color: #ffffff !important; font-weight: bold !important; }
.presetSlot.saved[data-slot="1"], .presetSlot.saved[data-slot="4"], .presetSlot.saved[data-slot="7"] { background-image: url("./tile-wave.jpg"); }
.presetSlot.saved[data-slot="2"], .presetSlot.saved[data-slot="5"], .presetSlot.saved[data-slot="8"] { background-image: url("./tile-cosmic.jpg"); }
.presetSlot.saved[data-slot="3"], .presetSlot.saved[data-slot="6"], .presetSlot.saved[data-slot="9"] { background-image: url("./tile-geometry.jpg"); }

/* v7.2.3 — AUDIOCACHE LEEREN (Labor-Grau wie FADERRESET) */
.licenseCacheButton {
  display: block; margin-top: 12px; min-height: 38px; padding: 8px 18px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--bg);
  color: var(--muted); font-family: "Courier New", Courier, monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0; cursor: pointer;
}

/* v7.2.4 — Vollflächiges Preset-Terminal */
.presetOverlay:not(.hidden){position:fixed !important;top:40px !important;left:0 !important;width:100vw !important;height:calc(100vh - 40px) !important;background-color:var(--bg) !important;z-index:99999 !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;padding:0 !important;align-items:stretch !important;justify-content:flex-start !important;right:auto !important;bottom:auto !important;}
.presetOverlay .presetCard{position:static !important;width:100% !important;max-width:none !important;height:100% !important;margin:0 !important;padding:18px 10% 100px !important;background:var(--bg) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;backdrop-filter:none !important;display:flex !important;flex-direction:column !important;overflow-y:auto !important;transform:none !important;}
.presetOverlay #presetTitle{margin:0 0 18px !important;text-align:left !important;font:bold 15px/1.2 "Courier New",Courier,monospace !important;letter-spacing:0 !important;color:#111 !important;}
.presetOverlay .presetGrid{margin:auto !important;}
.presetOverlay .presetSlot:not(.saved):not(.active){background:var(--bg) !important;border:1px solid #e5e7eb !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;filter:none !important;opacity:1 !important;}
.presetOverlay .presetClose{position:fixed !important;bottom:30px !important;left:50% !important;top:auto !important;right:auto !important;transform:translateX(-50%) !important;z-index:99999 !important;min-width:180px;height:40px;border:1px solid var(--accent) !important;color:var(--accent) !important;background:var(--bg) !important;border-radius:6px !important;font:700 11px/1 "Courier New",Courier,monospace !important;letter-spacing:.14em;box-shadow:0 0 10px color-mix(in srgb, var(--accent) 18%, transparent);cursor:pointer;}

/* v7.2.5 — Preset-Matrix 95px haptisch + glasklare Kachel-Bilder */
.presetOverlay .presetGrid{grid-template-columns:repeat(3,95px) !important;gap:12px !important;margin:auto !important;justify-content:center !important;align-content:center !important;}
.presetOverlay .presetSlot{width:95px !important;height:95px !important;padding:0 !important;flex:0 0 auto !important;}
.presetOverlay .presetSlot.saved,
.presetOverlay .presetSlot.active{background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;image-rendering:-webkit-optimize-contrast !important;image-rendering:crisp-edges !important;filter:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;opacity:1 !important;transform:none !important;}
.presetOverlay .presetSlot.saved::before,
.presetOverlay .presetSlot.saved::after,
.presetOverlay .presetSlot.active::before,
.presetOverlay .presetSlot.active::after{content:none !important;display:none !important;}
.presetOverlay .presetSlot.saved *,
.presetOverlay .presetSlot.active *{filter:none !important;opacity:1 !important;text-shadow:0 1px 3px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.35) !important;}

/* ============ v7.3.0 · Meditations-Labor ============ */
.categoryHud[data-section="meditation"] { --section-color: #5b3fd6; }
.categoryHud[data-section="meditation"] .categoryDisplay { color: #5b3fd6 !important; border-color: #5b3fd6 !important; box-shadow: 0 0 12px rgba(91,63,214,.45) !important; }
#gridMeditation .cell.medPlaceholder { filter: grayscale(1); opacity: .45; cursor: default; }
#gridMeditation .cell.active { outline: 2px solid #5b3fd6; box-shadow: 0 0 12px rgba(91,63,214,.45); }
.medBadge, .medRow { display: none !important; }
.ch-audio.med-on { overflow: hidden !important; }
.ch-audio.med-on #bypTrack { display: none !important; }
.ch-audio.med-on .medBadge {
  display: inline-flex !important; align-items: center; gap: 3px; justify-content: center;
  border: 1px solid #5b3fd6; color: #5b3fd6; border-radius: 3px; padding: 1px 5px;
  font: 700 8px/1.2 "Courier New", Courier, monospace; box-shadow: 0 0 8px rgba(91,63,214,.35);
}
.ch-audio.med-on .medBadge .dot { width: 5px; height: 5px; border-radius: 50%; background: #5b3fd6; box-shadow: 0 0 6px #5b3fd6; }
.ch-audio.med-on .medRow {
  display: flex !important; flex-direction: column; gap: 1px;
  border-top: 1px solid var(--line); padding-top: 2px; margin-top: 2px; --ch: #5b3fd6;
}
.medRowHead { display: flex; justify-content: space-between; align-items: center; line-height: 1; }
.medLabel { font-size: 6px; letter-spacing: .06em; color: var(--muted); }
.medRow .val { font-size: 7px; color: #5b3fd6 !important; }
#medFader { --ch: #5b3fd6; height: 4px; margin: 0; accent-color: #5b3fd6; }
#medFader::-webkit-slider-thumb { background: #5b3fd6 !important; border-color: #5b3fd6 !important; }
#medFader::-moz-range-thumb { background: #5b3fd6 !important; border-color: #5b3fd6 !important; }
/* Galactic Noise Kinetik: ON oben rechts neben %, Unterteil clean */
.ch-noise > .chHead > .onoff { margin-left: 4px !important; min-height: 13px; height: 13px; padding: 1px 4px; font-size: 7px; }
.ch-noise:has(#noiseToggle.on) > .chSwitches:not(:has(.previewCd:not(.hidden))) { display: none !important; }
.ch-noise:has(#noiseToggle.on) > .chSub { border-top: 0 !important; }

/* v7.3.0-FINAL: Kanal 1 Höhe gedeckelt, Meditation kompakt */
.ch-audio.med-on > .chSwitches { display: none !important; }
.ch-audio.med-on .medRow { gap: 1px !important; padding-top: 1px !important; margin-top: 1px !important; }
.ch-audio.med-on .medLabel { font-size: 6px; line-height: 1; letter-spacing: .08em; }
.ch-audio.med-on .medRowHead { justify-content: flex-start !important; gap: 5px; }
.ch-audio.med-on .medBadge { padding: 0 4px !important; font-size: 7px !important; line-height: 1.1 !important; }
.ch-audio.med-on { contain: size !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; }
.ch-audio.med-on > .chHead { margin-bottom: 0 !important; }
.ch-audio.med-on #trackFader { margin: 2px 0 !important; }

/* Tablet & Desktop: ab 768px schmales, mittig ausgerichtetes 450px-Gehäuse; Kanalzüge füllen die gesamte Mischpultbreite. */
@media (min-width: 768px) {
  body {
    width: 100%;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #hud {
    width: 100%;
    max-width: 450px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  section.mixer,
  section.mixer > .mixerBody,
  section.mixer .chRow {
    width: 100% !important;
    min-width: 0;
  }
  section.mixer > .mixerBody {
    display: block !important;
  }
  section.mixer .chRow > .ch:not(.hidden) {
    flex: 1 1 0% !important;
    min-width: 0;
  }
  .musicTerminal,
  .licenseTerminal,
  .presetOverlay:not(.hidden) {
    left: 50% !important;
    right: auto !important;
    width: 450px !important;
    max-width: 450px !important;
    transform: translateX(-50%);
  }
  .musicTerminalScroll {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ============ v7.3.2 · Mikro-Ergonomie Kanal 1 & 4 (Rahmen unverändert) ============ */
.ch-audio.med-on .medRow { margin-top: 4px !important; padding-top: 2px !important; }
.ch-audio.med-on .medRow input[type=range] { margin-top: 2px !important; margin-bottom: 0 !important; }
.ch-noise:has(#noiseToggle.on) > .chSub { margin-top: -3px !important; padding-top: 0 !important; }
.ch-noise:has(#noiseToggle.on) > .chSub > input[type=range] { margin-top: 3px !important; }

/* ============ v7.3.3 · Identische 6-Reihen-Matrix Kanal 1 & 4 (nur aktiv) ============ */
.ch-audio.med-on,
.ch-noise:has(#noiseToggle.on) {
  contain: size !important;
  box-sizing: border-box !important;
  display: flex !important; flex-direction: column !important;
  justify-content: space-between !important; align-items: stretch !important;
  height: 100% !important; gap: 0 !important;
  padding-top: 8px !important; padding-bottom: 14px !important;
}
.ch-audio.med-on .medRow,
.ch-noise:has(#noiseToggle.on) > .chSub { display: contents !important; border: 0 !important; }
.ch-audio.med-on *, .ch-noise:has(#noiseToggle.on) * { border-top: 0 !important; border-bottom: 0 !important; }
.ch-audio.med-on .medBadge { border: 1px solid #5b3fd6 !important; }
.ch-noise:has(#noiseToggle.on) .onoff { border: 1px solid currentColor !important; }
.ch-audio.med-on > *, .ch-audio.med-on .medRow > *,
.ch-noise:has(#noiseToggle.on) > *, .ch-noise:has(#noiseToggle.on) > .chSub > * {
  margin: 0 !important; flex: 0 0 auto !important;
}
.ch-audio.med-on > .chName, .ch-noise:has(#noiseToggle.on) > .chName { line-height: 1 !important; }
.ch-audio.med-on > .chHead, .ch-noise:has(#noiseToggle.on) > .chHead { height: 13px !important; align-items: center !important; }
.ch-audio.med-on .medLabel, .ch-noise:has(#noiseToggle.on) > .chSub > .chName {
  font-size: 6px !important; line-height: 1 !important; letter-spacing: .08em !important; text-transform: uppercase;
}
.ch-audio.med-on .medRowHead { display: flex !important; justify-content: center !important; gap: 5px; height: 10px; align-items: center; width: 100%; }
.ch-noise:has(#noiseToggle.on) > .chSub > .val { font-size: 7px !important; line-height: 10px !important; height: 10px; text-align: center !important; }
/* v7.5.15 · Unterspuren zentriert: MEDITATION/85 %/MED in Kanal 1, DICHTE in Kanal 4 */
.ch-audio.med-on .medLabel,
.ch-noise:has(#noiseToggle.on) > .chSub > .chName { display: block !important; width: 100% !important; text-align: center !important; }

/* ============ v7.3.4 · Feinzentrierung: AUDIO-Header & MED-Dot ============ */

/* 1 · AUDIO-Haupttitel: exakt horizontale Mitte seiner Lane,
       fluchtgleich mit GALACTIC NOISE in Kanal 4. */
.ch-audio > .chName {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  letter-spacing: .14em;
}
/* Ausgleich der Letter-Spacing-Optik: letzter Buchstabe trägt Nachlaufraum,
   daher der Textblock einen halben Raum nach rechts versetzen. */
.ch-audio > .chName { padding-left: .07em !important; }

/* 2 · MED-Pille: Dot und Text auf gemeinsamer Mittelachse, Dot absolut zentriert. */
.ch-audio.med-on .medBadge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.ch-audio.med-on .medBadge .dot {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ============ v7.3.5 · Doppel-Blink Speicherbestätigung ============ */
@keyframes blink {
  0%,100% { box-shadow: none; border-color: inherit; }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 14px var(--accent); border-color: var(--accent); }
}
.presetSlot.saveBlink { animation: blink 300ms linear 2 !important; border-color: var(--accent) !important; }

/* v7.4.0 — FOUNDERS LIFETIME DEAL */
.foundersDeal { display:flex; flex-direction:column; gap:10px; margin-top:14px; font-family:"Courier New",Courier,monospace; text-align:left; }
.foundersTitle { font-weight:700; text-transform:uppercase; letter-spacing:0; font-size:14px; color:var(--ink); }
.foundersPrice { font-weight:700; font-size:16px; color:var(--ink); }
.foundersDesc { margin:0 0 6px; font-size:12px; line-height:1.5; color:var(--ink); }
.foundersPrimary, .foundersSecondary { width:100%; min-height:40px; padding:10px 12px; font-family:"Courier New",Courier,monospace; font-weight:700; font-size:11px; letter-spacing:0; text-transform:uppercase; border-radius:4px; cursor:pointer; }
.foundersPrimary { background:var(--accent); color:#fff; border:1px solid var(--accent); }
.foundersSecondary { background:#f3f4f6; color:#4b5563; border:1px solid #d1d5db; }
.foundersDeal .licenseCacheButton { margin-top:8px; }
.previewCard .previewDeal { font-size:12px; margin:4px 0 10px; }
.previewCard .foundersPrimary, .previewCard .foundersSecondary { margin-bottom:6px; }

/* ===== v7.5.0 · Dreistufiges Interface-Farbwechsel-Gesetz ===== */
html[data-theme="lab-dark"] { --bg:#1a1a1a; --line:#3a3d42; --ink:#ffffff; --muted:#a3a9b3; }
html[data-theme="lab-dark"] .licenseTerminal,
html[data-theme="lab-dark"] .welcomeTerminal { background-color:#1a1a1a !important; color:#fff; }
html[data-theme="lab-dark"] .foundersSecondary { background:#262729; color:#e5e7eb; border-color:#3a3d42; }
html[data-theme="lab-dark"] .infoOverlay { background: rgba(26,26,26,.8); }
html[data-theme="spa-creme"] { --bg:#f5ece3; --line:#e2d3c4; --ink:#3b2f2a; --muted:#a39184; --accent:#7da28d; }
html[data-theme="spa-creme"] .licenseTerminal,
html[data-theme="spa-creme"] .welcomeTerminal { background-color:#f5ece3 !important; }
html[data-theme="spa-creme"] .foundersSecondary { background:#ede1d5; color:#6b5a50; border-color:#e2d3c4; }
html[data-theme="spa-creme"] .infoOverlay { background: rgba(245,236,227,.8); }
html[data-theme="spa-creme"] .vu,
html[data-theme="spa-creme"] [class*="vu"],
html[data-theme="spa-creme"] .presetSlot.saved { filter: sepia(.35) hue-rotate(50deg) saturate(.8); }

.themeSection { margin-top:18px; }
.themeLabel { font-family:"Courier New",Courier,monospace; font-weight:700; font-size:11px; color:var(--ink); margin-bottom:8px; }
.themePicker { display:flex; gap:6px; }
.themeTab { flex:1 1 0; min-height:34px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:4px; font-family:"Courier New",Courier,monospace; font-weight:700; font-size:10px; cursor:pointer; }
.themeTab.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== v7.5.0 · Willkommens-Terminal ===== */
.welcomeTerminal { position:fixed !important; top:40px !important; left:0; right:0; bottom:0 !important; width:100vw; height:auto !important; max-height:none !important; background-color:var(--bg); color:var(--ink); z-index:99998; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight:400; overflow:hidden; display:flex; flex-direction:column; }
.welcomeTerminal.hidden { display:none !important; }
.welcomeContent { flex:1 1 auto; min-height:0; height:auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px 10% 16px; display:flex; flex-direction:column; gap:12px; font-size:13px; line-height:1.55; font-family:inherit; color:var(--ink); }
.welcomeContent p { font-family:inherit; font-weight:400; color:var(--muted); margin:0; }
.welcomeHeading { font-size:20px; font-weight:700; letter-spacing:.02em; text-align:left; font-family:inherit; color:var(--accent); margin:0; }
.welcomeLead { font-size:13.5px; font-weight:600; color:var(--ink) !important; }
.welcomeWarn { border:1px solid var(--line); padding:10px; border-radius:4px; font-size:12px; color:var(--ink) !important; }
.welcomeTerminal .themeTab { font-family:inherit; font-weight:600; font-size:10.5px; letter-spacing:.04em; }
.welcomeTerminal .foundersPrimary { font-family:inherit; font-weight:600; letter-spacing:.04em; }
.welcomeStart { position:static; flex:0 0 auto; margin:0 10% calc(18px + env(safe-area-inset-bottom, 0px)); min-height:48px; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:4px; font-family:inherit; font-weight:700; font-size:12.5px; letter-spacing:.06em; cursor:pointer; }

.infoOverlay { z-index:100001 !important; }
@media (min-width: 768px) {
  .welcomeTerminal { left:50% !important; width:450px !important; transform:translateX(-50%); }
}

/* v7.5.1 · SPA-CREME: einheitlicher Salbei-Akzent, ohne Eingriff in Geometrie oder Audio. */
html[data-theme="spa-creme"] .ch { --ch: var(--accent); }
html[data-theme="spa-creme"] .ch:has(.byp.on) { --ch: var(--accent); }
html[data-theme="spa-creme"] .ch-freq .sub.on,
html[data-theme="spa-creme"] .ch-freq .sub.on .dot { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-theme="spa-creme"] .ch-freq .sub.on .dot { background: var(--accent); }
html[data-theme="spa-creme"] .musicRow #musicBtn,
html[data-theme="spa-creme"] .presetOpen { color: var(--accent); border-color: var(--accent); }
html[data-theme="spa-creme"] #playBtn { color: var(--accent); border-color: var(--accent); }
html[data-theme="spa-creme"] #gridSine .sub.on { color: var(--accent); border-color: var(--accent); }
html[data-theme="spa-creme"] #gridSine .sub.on .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
html[data-theme="spa-creme"] .categoryDisplay { color: var(--accent); border-color: var(--accent); --section-color: var(--accent); }
html[data-theme="spa-creme"] .categoryHud[data-section="meditation"] .categoryDisplay { color: var(--accent) !important; border-color: var(--accent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent) !important; }
html[data-theme="spa-creme"] .ch .val,
html[data-theme="spa-creme"] .medRow .val { color: var(--accent) !important; }
html[data-theme="spa-creme"] .medRow,
html[data-theme="spa-creme"] #medFader { --ch: var(--accent); accent-color: var(--accent); }
html[data-theme="spa-creme"] #medFader::-webkit-slider-thumb { background: var(--accent) !important; border-color: var(--accent) !important; }
html[data-theme="spa-creme"] #medFader::-moz-range-thumb { background: var(--accent) !important; border-color: var(--accent) !important; }
html[data-theme="spa-creme"] .ch-audio.med-on .medBadge { color: var(--accent); border-color: var(--accent) !important; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent); }
html[data-theme="spa-creme"] .ch-audio.med-on .medBadge .dot { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
html[data-theme="spa-creme"] .fbBlock,
html[data-theme="spa-creme"] .presetCard h3,
html[data-theme="spa-creme"] .fwVal { color: var(--accent); }
html[data-theme="spa-creme"] .fwMark { background: var(--accent); }
html[data-theme="spa-creme"] .fwInput:focus { border-color: var(--accent); }
html[data-theme="spa-creme"] .fbCard { border-color: var(--line); }

/* v7.5.2 – Flucht-Farben LAB-DARK / SPA-CREME */
html[data-theme="lab-dark"] .cell,
html[data-theme="lab-dark"] .ch,
html[data-theme="lab-dark"] .ch .chName,
html[data-theme="lab-dark"] .ch .chHead { background-color:#262626 !important; color:#ffffff; }
html[data-theme="lab-dark"] .cell * { color:#ffffff; }
html[data-theme="spa-creme"] { --line:#b76e79; }
html[data-theme="spa-creme"] .cell,
html[data-theme="spa-creme"] .ch,
html[data-theme="spa-creme"] .mixerBody,
html[data-theme="spa-creme"] section.mixer,
html[data-theme="spa-creme"] .presetSlot { border-color:#b76e79 !important; }

/* ===== v7.5.2-PROD · Theme-Dynamik ===== */
:root { --vu-off:#eef2f5; }
/* LAB-DARK: helle Rahmen, reinweisse Titel, Erdung weiss mit Cyan-Schrift */
html[data-theme="lab-dark"] { --line:#F2F0EF; --vu-off:#333; }
html[data-theme="lab-dark"] .ch, html[data-theme="lab-dark"] .cell, html[data-theme="lab-dark"] .presetSlot,
html[data-theme="lab-dark"] section.mixer, html[data-theme="lab-dark"] .mixerBody { border-color:#F2F0EF !important; }
html[data-theme="lab-dark"] .chName, html[data-theme="lab-dark"] .medLabel, html[data-theme="lab-dark"] .categoryDisplay,
html[data-theme="lab-dark"] .musicTerminalHeading, html[data-theme="lab-dark"] .licenseTerminalHeading, html[data-theme="lab-dark"] #presetTitle { color:#ffffff !important; }
html[data-theme="lab-dark"] .ch .muted, html[data-theme="lab-dark"] .ch small, html[data-theme="lab-dark"] .ch .chSub { color:#c9c9c9; }
html[data-theme="lab-dark"] #gridSine .sub.on { background:#ffffff !important; color:#06b6d4 !important; border-color:#06b6d4 !important; }
html[data-theme="lab-dark"] #gridSine .sub.on .dot { background:#06b6d4 !important; }
/* SPA-CREME: Salbei-Akzent, Roségold-Typo/Rahmen, VU rosé */
html[data-theme="spa-creme"] { --accent:#7da28d; --line:#b76e79; --vu-off:#ecd3d1; }
html[data-theme="spa-creme"] .vu, html[data-theme="spa-creme"] [class*="vu"], html[data-theme="spa-creme"] .presetSlot.saved { filter:none !important; }
html[data-theme="spa-creme"] .chName, html[data-theme="spa-creme"] .medLabel,
html[data-theme="spa-creme"] .musicTerminalHeading, html[data-theme="spa-creme"] .licenseTerminalHeading, html[data-theme="spa-creme"] #presetTitle { color:#b76e79 !important; }
html[data-theme="spa-creme"] .section h5 { color:#b76e79 !important; }
html[data-theme="spa-creme"] #stopBtn { color:var(--accent) !important; border-color:var(--accent) !important; }
html[data-theme="spa-creme"] input[type=range] { accent-color:var(--accent); }
html[data-theme="spa-creme"] input[type=range]::-webkit-slider-thumb { background:var(--accent) !important; border-color:var(--accent) !important; }
html[data-theme="spa-creme"] input[type=range]::-moz-range-thumb { background:var(--accent) !important; border-color:var(--accent) !important; }
html[data-theme="spa-creme"] #gridSine .sub:not(.on) { color:#9a9a9a !important; border-color:#cfcfcf !important; background:transparent !important; }
html[data-theme="spa-creme"] #gridSine .sub:not(.on) .dot { background:#cfcfcf !important; box-shadow:none !important; }
html[data-theme="spa-creme"] .presetSlot:not(.saved) { background:#ffffff !important; border-color:#b76e79 !important; color:var(--accent) !important; }
html[data-theme="spa-creme"] .presetSlot.saved[data-slot="1"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="4"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="7"] { background-image:url("./tile-spa-wave.jpg") !important; }
html[data-theme="spa-creme"] .presetSlot.saved[data-slot="2"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="5"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="8"] { background-image:url("./tile-spa-cosmic.jpg") !important; }
html[data-theme="spa-creme"] .presetSlot.saved[data-slot="3"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="6"], html[data-theme="spa-creme"] .presetSlot.saved[data-slot="9"] { background-image:url("./tile-spa-geometry.jpg") !important; }
/* Rad: nur die Schrift trägt die Sektionsfarbe, Box bleibt neutral */
html[data-theme="spa-creme"] .categoryHud { --section-color:#7da28d; }
html[data-theme="spa-creme"] .categoryHud[data-section="solfeggio"] { --section-color:#c9a227; }
html[data-theme="spa-creme"] .categoryHud[data-section="binaural"] { --section-color:#2563eb; }
html[data-theme="spa-creme"] .categoryHud[data-section="kosmisch"] { --section-color:#8b3fd6; }
html[data-theme="spa-creme"] .categoryHud[data-section="meditation"] { --section-color:#4b3fb0; }
html[data-theme="spa-creme"] .categoryHud .categoryDisplay,
html[data-theme="spa-creme"] .categoryHud[data-section="meditation"] .categoryDisplay { color:var(--section-color) !important; border-color:#b76e79 !important; box-shadow:none !important; background:var(--bg) !important; }

/* ===== v7.5.3 · Spa-Bildwelt auf allen Kachel-Ebenen ===== */
html[data-theme="spa-creme"] .cell[data-img="wave"] { background-image:url("./tile-spa-wave.jpg") !important; }
html[data-theme="spa-creme"] .cell[data-img="cosmic"] { background-image:url("./tile-spa-cosmic.jpg") !important; }
html[data-theme="spa-creme"] .cell[data-img="geo"] { background-image:url("./tile-spa-geometry.jpg") !important; }
html[data-theme="spa-creme"] .cell::before { background:rgba(255,252,249,.52) !important; }
html[data-theme="spa-creme"] .cell:hover::before { background:rgba(255,252,249,.62) !important; }
html[data-theme="spa-creme"] .cell.active::before { background:rgba(255,252,249,.3) !important; }
html[data-theme="spa-creme"] .cell.active:hover::before { background:rgba(255,252,249,.3) !important; }
html[data-theme="spa-creme"] .cell .hz { color:#3b2f2a !important; text-shadow:0 1px 2px rgba(255,255,255,.65) !important; }
html[data-theme="spa-creme"] .cell .nm { color:#6b584f !important; text-shadow:0 1px 2px rgba(255,255,255,.65) !important; }
html[data-theme="spa-creme"] .cell .lock, html[data-theme="spa-creme"] .cell .hpIco { color:#b76e79 !important; }

/* ============ Handbuch (i): einheitliche Sans-Serif-Typografie ============ */
.infoManual,
.infoManual p,
.infoManual ul,
.infoManual li,
.infoManual strong,
.infoCard h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.infoManual { padding: 0 !important; }
.infoManual p, .infoManual li { font-size: 11.5px; line-height: 1.6; }
.infoManual .infoSub {
  margin: 14px 0 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
.infoManual .infoSub strong { font-weight: 700; color: var(--accent); }
.infoManual ul { margin: 0 0 12px; padding-left: 16px; }
.infoManual li { margin-bottom: 7px; color: #475569; }
.infoManual .infoLead { color: #475569 !important; }

html[data-theme="lab-dark"] .infoManual li,
html[data-theme="lab-dark"] .infoManual .infoLead { color: #cbd5e1 !important; }

/* SPA-CREME: Überschriften Salbei, Fließtext Roségold */
html[data-theme="spa-creme"] .infoCard h3,
html[data-theme="spa-creme"] .infoManual .infoSub,
html[data-theme="spa-creme"] .infoManual .infoSub strong,
html[data-theme="spa-creme"] .infoManual strong,
html[data-theme="spa-creme"] .infoManual .infoIntro { color: #7da28d !important; }
html[data-theme="spa-creme"] .infoManual li,
html[data-theme="spa-creme"] .infoManual .infoLead { color: #b76e79 !important; }

/* LAB-DARK: Kopfabsatz des Handbuchs reinweiss */
html[data-theme="lab-dark"] .infoManual .infoLead { color: #ffffff !important; }
html[data-theme="lab-dark"] .infoManual .infoIntro { color: #ffffff !important; }

/* ====== Lizenz-Terminal: einheitliche Sans-Serif-Typografie ====== */
.licenseTerminalContent,
.licenseTerminalHeading,
.foundersDeal,
.foundersTitle,
.foundersPrice,
.foundersDesc,
.foundersPrimary,
.foundersSecondary,
.themeSection,
.themeLabel,
.themeTab,
.licenseTerminalClose {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
.foundersTitle { letter-spacing: .04em; }
.foundersDesc { font-size: 12.5px; line-height: 1.6; }
.foundersPrimary, .foundersSecondary { font-size: 11.5px; letter-spacing: .04em; }
.themeLabel { letter-spacing: .08em; }
.themeTab { font-size: 10.5px; letter-spacing: .04em; }

/* Audiocache-Knopf sitzt ganz unten, direkt ueber SCHLIESSEN */
.licenseTerminalContent > .licenseCacheButton { margin-top: 22px; }

/* Willkommens-Terminal: einheitliche Sans-Serif-Typografie je Farbwelt */
html[data-theme="lab-dark"] .welcomeContent p { color:#cbd5e1; }
html[data-theme="lab-dark"] .welcomeLead,
html[data-theme="lab-dark"] .welcomeWarn { color:#ffffff !important; }
html[data-theme="spa-creme"] .welcomeHeading { color:#7da28d; }
html[data-theme="spa-creme"] .welcomeContent p,
html[data-theme="spa-creme"] .welcomeLead,
html[data-theme="spa-creme"] .welcomeWarn { color:#b76e79 !important; }

/* Lizenz-Fenster: INTERFACE-DESIGN mit automatischem Darkmode-Schalter */
.licenseTerminalContent .themeSection { margin-top:38px !important; }
.themeLabelRow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.themeLabelRow .themeLabel { margin-bottom:0 !important; }
.autoDarkToggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.autoDarkText { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size:9.5px; font-weight:600; letter-spacing:.08em; color:var(--muted); }
.autoDarkToggle input { position:absolute; opacity:0; width:0; height:0; }
.autoDarkTrack { position:relative; width:28px; height:15px; border-radius:8px; border:1px solid var(--line); background:transparent; transition:background .2s, border-color .2s; }
.autoDarkKnob { position:absolute; top:2px; left:2px; width:9px; height:9px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; }
.autoDarkToggle input:checked + .autoDarkTrack { background:var(--accent); border-color:var(--accent); }
.autoDarkToggle input:checked + .autoDarkTrack .autoDarkKnob { transform:translateX(13px); background:#fff; }
.autoDarkToggle input:checked ~ .autoDarkTrack, .autoDarkToggle:has(input:checked) .autoDarkText { color:var(--accent); }

/* v7.5.9 Stealth-i: unsichtbar in Hintergrundfarbe, leuchtet im Dev-Mode */
.topbar .infoBtn, .topbar .infoBtn:hover, .topbar .infoBtn:active, .topbar .infoBtn:focus-visible {
  background: transparent !important; color: transparent !important; border-color: transparent !important;
  box-shadow: none !important; animation: none !important; outline: none; -webkit-tap-highlight-color: transparent;
}
.topbar .infoBtn.devOn, .topbar .infoBtn.devOn:hover, .topbar .infoBtn.devOn:active {
  color: #22d3ee !important; border-color: #22d3ee !important;
  animation: devGlow 1.8s ease-in-out infinite !important;
}
@keyframes devGlow {
  0%,100% { box-shadow: 0 0 4px rgba(34,211,238,.45); }
  50% { box-shadow: 0 0 14px rgba(34,211,238,.95); }
}
#manualBtn { margin-top: 38px !important; margin-bottom: 0 !important; background: transparent !important; border: 1px solid var(--accent) !important; color: var(--accent) !important; }
.licenseTerminalContent > #cacheClearBtn { margin-top: 38px !important; }
/* Fix: ON-Zustand darf Kanalhöhe nicht kollabieren */
.ch-audio.med-on,
.ch-noise:has(#noiseToggle.on) { contain: none !important; height: auto !important; max-height: none !important; align-self: stretch !important; }

/* ===== _GHOST TERMINAL · Terminal-Grün #03A062 auf LAB-DARK ===== */
html[data-ghost] { --line:#03A062 !important; --accent:#03A062 !important; }
html[data-ghost] .ch, html[data-ghost] .cell, html[data-ghost] .presetSlot,
html[data-ghost] section.mixer, html[data-ghost] .mixerBody,
html[data-ghost] .categoryHud, html[data-ghost] .categoryJog,
html[data-ghost] #playBtn, html[data-ghost] #stopBtn,
html[data-ghost] .chSwitches button, html[data-ghost] .tbtn { border-color:#03A062 !important; }
html[data-ghost] .categoryDisplay, html[data-ghost] .section h5 { color:#03A062 !important; }
html[data-ghost] .chName, html[data-ghost] #paneGhost .cell, html[data-ghost] #paneGhost .cell * { color:#ffffff !important; }
html[data-ghost] .categoryHud { --section-color:#03A062; }
html[data-ghost] #paneGhost .cell { box-shadow:0 0 14px rgba(3,160,98,.35); }
#paneGhost .cell, html[data-ghost] #paneGhost .cell.active { background-image:url("./tile-deepfocus.jpg") !important; background-size:cover !important; background-position:center !important; }
html[data-ghost] #paneGhost .cell.active { background-color:rgba(3,160,98,.18) !important; }
html[data-ghost] #gridSine .cell { background-image:none !important; background-color:rgba(3,160,98,.08) !important; border-color:#03A062 !important; box-shadow:0 0 14px rgba(3,160,98,.35) !important; }
html[data-ghost] #gridSine .cell.active { background-color:rgba(3,160,98,.18) !important; }
html[data-ghost] #gridSine .cell::before { background:transparent !important; }
html[data-ghost] #gridSine .cell .hz, html[data-ghost] #gridSine .cell .nm { color:#ffffff !important; }
html[data-ghost] #gridSine .sub.on { background:transparent !important; color:#03A062 !important; border-color:#03A062 !important; }
html[data-ghost] #gridSine .sub.on .dot { background:#03A062 !important; box-shadow:0 0 8px #03A062 !important; }

/* v7.5.12 · DEEP FOCUS: Weiß für Musik/Drehrad/Auswahl, Orange für Fader & Pause */
html[data-ghost] #musicBtn, html[data-ghost] #trackNow { color:#ffffff !important; border-color:#ffffff !important; }
html[data-ghost] .categoryJog, html[data-ghost] .categoryDisplay { color:#ffffff !important; border-color:#ffffff !important; --section-color:#ffffff; box-shadow:none !important; }
html[data-ghost] .categoryJog * { color:#ffffff !important; border-color:#ffffff !important; }
html[data-ghost] .ch input[type=range]:not(.muted)::-webkit-slider-thumb { border-color:#ff7a00 !important; box-shadow:0 0 7px rgba(255,122,0,.6) !important; }
html[data-ghost] .ch input[type=range]:not(.muted)::-moz-range-thumb { border-color:#ff7a00 !important; box-shadow:0 0 7px rgba(255,122,0,.6) !important; }
html[data-ghost] .ch .val { color:#ff7a00 !important; }
html[data-ghost] #playBtn.isPlaying { color:#ff7a00 !important; border-color:#ff7a00 !important; box-shadow:0 0 12px rgba(255,122,0,.45) !important; }

/* v7.5.13 · Tastenfeld ◀ SET ▶ im bisherigen Rad-Rahmen */
.categoryJog { display:flex; align-items:stretch; cursor:default; touch-action:manipulation; }
.jogBtn {
  flex:1 1 0; min-width:0; border:0; background:transparent; color:var(--section-color);
  font-family:inherit; font-size:10px; line-height:1; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.jogSet { flex:1.5 1 0; font-weight:700; letter-spacing:.12em; border-left:1px solid var(--line); border-right:1px solid var(--line); }
.jogBtn:active { background:color-mix(in srgb, var(--section-color) 18%, transparent); }
.jogBtn:focus-visible { outline:1px solid var(--section-color); outline-offset:-2px; }
html[data-ghost] .jogBtn { color:#ffffff !important; }
html[data-ghost] .jogSet { border-color:#ffffff !important; }

/* v7.5.13 · DEEP FOCUS: Bernstein #fb9920 für alle orangen Elemente */
html[data-ghost] .ch input[type=range]:not(.muted)::-webkit-slider-thumb { background:#fb9920 !important; border-color:#fb9920 !important; box-shadow:0 0 8px rgba(251,153,32,.6) !important; }
html[data-ghost] .ch input[type=range]:not(.muted)::-moz-range-thumb { background:#fb9920 !important; border-color:#fb9920 !important; box-shadow:0 0 8px rgba(251,153,32,.6) !important; }
html[data-ghost] .ch .val { color:#fb9920 !important; }
html[data-ghost] #playBtn.isPlaying { border-radius:999px !important; color:#fb9920 !important; border-color:#fb9920 !important; box-shadow:0 0 14px rgba(251,153,32,.5) !important; }

/* v7.5.14 · DEEP FOCUS: Fader-Füllung Bernstein, Kanal-Schalter Weiß */
html[data-ghost] .ch:not(:has(.byp.on)), html[data-ghost] .ch-rain, html[data-ghost] .ch-noise, html[data-ghost] .ch-freq, html[data-ghost] #medFader { --ch:#fb9920 !important; }
html[data-ghost] .ch .byp.on, html[data-ghost] .ch .onoff.on, html[data-ghost] .ch .sub.on { color:#ffffff !important; border-color:#ffffff !important; box-shadow:0 0 8px rgba(255,255,255,.35) !important; }
html[data-ghost] .ch .byp.on .dot, html[data-ghost] .ch .sub.on .dot { background:#ffffff !important; box-shadow:0 0 6px #ffffff !important; }
html[data-ghost] .ch .chSub { border-top-color:rgba(251,153,32,.4) !important; }
/* v7.5.15 · Dev-Mode: rundes Leucht-Symbol statt i */
.freqWheelClose { display: none !important; }
.topbar .infoBtn.devOn { font-size: 0 !important; width: 20px; height: 20px; position: absolute; }
.topbar .infoBtn.devOn::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #22d3ee; box-shadow: 0 0 6px #22d3ee, 0 0 0 3px color-mix(in srgb, #22d3ee 18%, transparent);
}

/* ===== v7.5.16 · 3×3-Design-Raster (FREE / BASIS / PRO) ===== */
.themePicker.themeGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.themeGrid .themeTab { min-height:28px; font-size:9.5px; letter-spacing:.02em; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.themeGrid .themeTab.locked { opacity:.45; }
.themeGrid .themeTab.locked::after { content:" 🔒"; font-size:8px; }
.themeGrid .themeEmpty { cursor:not-allowed; border-style:dashed; color:var(--muted); }
.toast { z-index:100002 !important; }

/* Skins färben nur das Chassis; Kategorie- und Kanal-Signaturfarben (.ch-freq, .ch-bin,
   .ch-cosmic, .ch-engel, .ch-rain, .ch-noise, categoryHud-Sektionen) bleiben unverändert. */

/* DARK-AMBER v7.5.17: LAB-DARK-Chassis, weisse Schrift, graue Inaktive, Bernstein nur aktiv */
html[data-skin="dark-amber"]:not([data-ghost]) { --bg:#161616; --line:#555555; --ink:#ffffff; --muted:#9a9a9a; --accent:#fb9920; --vu-off:#333333; }
html[data-skin="dark-amber"]:not([data-ghost]) body { background:#161616; }
html[data-skin="dark-amber"]:not([data-ghost]) .licenseTerminal,
html[data-skin="dark-amber"]:not([data-ghost]) .welcomeTerminal { background-color:#161616 !important; color:#ffffff; }
html[data-skin="dark-amber"]:not([data-ghost]) .ch,
html[data-skin="dark-amber"]:not([data-ghost]) .cell,
html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot,
html[data-skin="dark-amber"]:not([data-ghost]) section.mixer,
html[data-skin="dark-amber"]:not([data-ghost]) .mixerBody { border-color:#555555 !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .cell.active,
html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved { border-color:#fb9920 !important; box-shadow:0 0 10px rgba(251,153,32,.35); }
html[data-skin="dark-amber"]:not([data-ghost]) .ch,
html[data-skin="dark-amber"]:not([data-ghost]) .ch .chName,
html[data-skin="dark-amber"]:not([data-ghost]) .ch .chHead { background-color:#222222 !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .chName,
html[data-skin="dark-amber"]:not([data-ghost]) .medLabel,
html[data-skin="dark-amber"]:not([data-ghost]) .musicTerminalHeading,
html[data-skin="dark-amber"]:not([data-ghost]) .licenseTerminalHeading,
html[data-skin="dark-amber"]:not([data-ghost]) #presetTitle,
html[data-skin="dark-amber"]:not([data-ghost]) .cell .hz,
html[data-skin="dark-amber"]:not([data-ghost]) .cell .nm { color:#ffffff !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .ch .chSub,
html[data-skin="dark-amber"]:not([data-ghost]) .ch small { color:#a8a8a8; }
html[data-skin="dark-amber"]:not([data-ghost]) .foundersSecondary { background:#222; color:#fff; border-color:#555; }
html[data-skin="dark-amber"]:not([data-ghost]) .foundersPrimary,
html[data-skin="dark-amber"]:not([data-ghost]) .themeTab.active,
html[data-skin="dark-amber"]:not([data-ghost]) .welcomeStart { background:#fb9920; border-color:#fb9920; color:#161616; }
html[data-skin="dark-amber"]:not([data-ghost]) #playBtn { color:#fb9920; border-color:#fb9920; }
html[data-skin="dark-amber"]:not([data-ghost]) #gridSine .sub.on { background:#fb9920 !important; color:#161616 !important; border-color:#fb9920 !important; }
html[data-skin="dark-amber"]:not([data-ghost]) #gridSine .sub.on .dot { background:#161616 !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .infoOverlay { background:rgba(22,22,22,.88); }
html[data-skin="dark-amber"]:not([data-ghost]) .cell[data-img="wave"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="1"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="4"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="7"] { background-image:url("./tile-amber-wave.jpg") !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .cell[data-img="cosmic"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="2"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="5"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="8"] { background-image:url("./tile-amber-cosmic.jpg") !important; }
html[data-skin="dark-amber"]:not([data-ghost]) .cell[data-img="geo"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="3"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="6"], html[data-skin="dark-amber"]:not([data-ghost]) .presetSlot.saved[data-slot="9"] { background-image:url("./tile-amber-geometry.jpg") !important; }

/* FOCUS-CHROME v7.5.17: gebuerstetes Silber-Metall + violette Gravur */
html[data-skin="focus-chrome"]:not([data-ghost]) { --bg:#c9ced6; --line:#7c3aed; --ink:#14151c; --muted:#4a4e5c; --accent:#7c3aed; --vu-off:#b3b8c2; }
html[data-skin="focus-chrome"]:not([data-ghost]) body { background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.035) 1px 2px),linear-gradient(160deg,#eef0f3 0%,#c3c8d1 35%,#e4e7ec 55%,#b4bac4 100%) !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .licenseTerminal,
html[data-skin="focus-chrome"]:not([data-ghost]) .welcomeTerminal { background:linear-gradient(160deg,#eceef2,#c7ccd4) !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .ch,
html[data-skin="focus-chrome"]:not([data-ghost]) .presetSlot:not(.saved) { background:linear-gradient(180deg,#f2f3f6 0%,#d3d7de 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.18); }
html[data-skin="focus-chrome"]:not([data-ghost]) .ch,
html[data-skin="focus-chrome"]:not([data-ghost]) .cell,
html[data-skin="focus-chrome"]:not([data-ghost]) .presetSlot,
html[data-skin="focus-chrome"]:not([data-ghost]) section.mixer,
html[data-skin="focus-chrome"]:not([data-ghost]) .mixerBody { border-color:#7c3aed !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .foundersSecondary { background:#e4e7ec; color:#2b2d38; border-color:#7c3aed; }
html[data-skin="focus-chrome"]:not([data-ghost]) .musicTerminalHeading,
html[data-skin="focus-chrome"]:not([data-ghost]) .licenseTerminalHeading,
html[data-skin="focus-chrome"]:not([data-ghost]) #presetTitle { color:#5b21b6 !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .infoOverlay { background:rgba(201,206,214,.88); }

/* LILAC-DREAM v7.5.17: warmes pudriges Flieder, klar getrennt vom kuehlen Chrome */
html[data-skin="lilac-dream"]:not([data-ghost]) { --bg:#efe3fa; --line:#c084fc; --ink:#4a2a6b; --muted:#9a76c2; --accent:#a855f7; --vu-off:#e2cff5; }
html[data-skin="lilac-dream"]:not([data-ghost]) body { background:linear-gradient(170deg,#f7eefc 0%,#ead9f8 50%,#f6e2f0 100%) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .licenseTerminal,
html[data-skin="lilac-dream"]:not([data-ghost]) .welcomeTerminal { background-color:#f4e9fb !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .ch,
html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot:not(.saved) { background-color:#f8f0fd !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .ch,
html[data-skin="lilac-dream"]:not([data-ghost]) .cell,
html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot,
html[data-skin="lilac-dream"]:not([data-ghost]) section.mixer,
html[data-skin="lilac-dream"]:not([data-ghost]) .mixerBody { border-color:#c084fc !important; border-radius:6px; }
html[data-skin="lilac-dream"]:not([data-ghost]) .foundersSecondary { background:#f4e9fb; color:#5b3785; border-color:#d8b4fe; }
html[data-skin="lilac-dream"]:not([data-ghost]) .chName,
html[data-skin="lilac-dream"]:not([data-ghost]) .medLabel,
html[data-skin="lilac-dream"]:not([data-ghost]) .musicTerminalHeading,
html[data-skin="lilac-dream"]:not([data-ghost]) .licenseTerminalHeading,
html[data-skin="lilac-dream"]:not([data-ghost]) #presetTitle,
html[data-skin="lilac-dream"]:not([data-ghost]) .section h5 { color:#9333ea !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell::before { background:rgba(250,242,255,.45) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell.active::before { background:rgba(250,242,255,.2) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .infoOverlay { background:rgba(244,233,251,.88); }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell[data-img="wave"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="1"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="4"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="7"] { background-image:url("./tile-lilac-wave.jpg") !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell[data-img="cosmic"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="2"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="5"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="8"] { background-image:url("./tile-lilac-cosmic.jpg") !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell[data-img="geo"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="3"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="6"], html[data-skin="lilac-dream"]:not([data-ghost]) .presetSlot.saved[data-slot="9"] { background-image:url("./tile-lilac-geometry.jpg") !important; }

/* v7.5.18 · FOCUS-CHROME eigene Kacheln */
html[data-skin="focus-chrome"] .cell[data-img="wave"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="1"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="4"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="7"] { background-image:url("./tile-chrome-wave.jpg") !important; }
html[data-skin="focus-chrome"] .cell[data-img="cosmic"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="2"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="5"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="8"] { background-image:url("./tile-chrome-cosmic.jpg") !important; }
html[data-skin="focus-chrome"] .cell[data-img="geo"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="3"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="6"], html[data-skin="focus-chrome"] .presetSlot.saved[data-slot="9"] { background-image:url("./tile-chrome-geometry.jpg") !important; }

/* v7.5.18 · TERMINAL (PRO): Serverraum-Monitorwand über 3×3-Kacheln */
html[data-skin="terminal"] .grid:not(#gridGhost) .cell,
html[data-skin="terminal"] .presetSlot.saved { background-image:url("./tile-deepfocus.jpg") !important; background-size:300% 300% !important; background-repeat:no-repeat !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell::before { background:rgba(0,0,0,.08) !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell.active::before, html[data-skin="terminal"] .grid:not(#gridGhost) .cell.active:hover::before { background:transparent !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell .hz, html[data-skin="terminal"] .grid:not(#gridGhost) .cell .nm { color:#ffffff !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(3n+1), html[data-skin="terminal"] .presetSlot.saved:nth-child(3n+1) { background-position-x:0% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(3n+2), html[data-skin="terminal"] .presetSlot.saved:nth-child(3n+2) { background-position-x:50% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(3n), html[data-skin="terminal"] .presetSlot.saved:nth-child(3n) { background-position-x:100% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(-n+3), html[data-skin="terminal"] .presetSlot.saved:nth-child(-n+3) { background-position-y:0% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(n+4):nth-child(-n+6), html[data-skin="terminal"] .presetSlot.saved:nth-child(n+4):nth-child(-n+6) { background-position-y:50% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell:nth-child(n+7), html[data-skin="terminal"] .presetSlot.saved:nth-child(n+7) { background-position-y:100% !important; }
html[data-skin="terminal"] .grid:not(#gridGhost) .cell.active { box-shadow:0 0 14px rgba(3,160,98,.55) !important; }

/* v7.5.19 */
html[data-skin="dark-amber"]:not([data-ghost]) .categoryHud[data-section="meditation"] .categoryDisplay { color:#ffffff !important; }
html[data-skin="terminal"] .categoryHud[data-section="meditation"] .categoryDisplay { color:#ffffff !important; border-color:#ffffff !important; box-shadow:0 0 12px rgba(255,255,255,.35) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell .hz, html[data-skin="lilac-dream"]:not([data-ghost]) .cell .nm { color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell::before { background:rgba(74,42,107,.28) !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .cell.active::before { background:rgba(74,42,107,.14) !important; }
html[data-skin="dark-amber"] .cell .hz, html[data-skin="dark-amber"] .cell .nm,
html[data-skin="lab-dark"] .cell .hz, html[data-skin="lab-dark"] .cell .nm,
html[data-skin="lilac-dream"] .cell .hz, html[data-skin="lilac-dream"] .cell .nm,
html[data-skin="terminal"] .cell .hz, html[data-skin="terminal"] .cell .nm { text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important; }
/* v7.5.28 · TERMINAL Binaural: ein durchgehendes Serverraum-Bild über alle 4 Kacheln */
html[data-skin="terminal"] #gridBinaural { background:url("./tile-deepfocus.jpg") center/cover no-repeat; border-radius:4px; }
html[data-skin="terminal"] #gridBinaural .cell { background:transparent !important; }
/* v7.5.19 · 40-Hz-Spürbar AUS: dunkle Schrift auf heller Pille (Dark Amber & Terminal) */
html[data-skin="dark-amber"] #gridSine .sub:not(.on),
html[data-skin="terminal"] #gridSine .sub:not(.on) { color:#2a2a2a !important; }
html[data-skin="dark-amber"] #gridSine .sub:not(.on) .dot,
html[data-skin="terminal"] #gridSine .sub:not(.on) .dot { background:#9a9a9a !important; box-shadow:none !important; }

/* v7.5.20 · OPAL-LILAC (PRO): LAB-WHITE-Chassis, Flieder statt Cyan */
html[data-skin="opal-lilac"]:not([data-ghost]) { --bg:#ffffff; --line:#c084fc; --ink:#1a1a1a; --muted:#8a7a9e; --accent:#a855f7; --vu-off:#eee6f7; }
html[data-skin="opal-lilac"]:not([data-ghost]) body { background:#ffffff !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .ch, html[data-skin="opal-lilac"]:not([data-ghost]) .cell, html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot, html[data-skin="opal-lilac"]:not([data-ghost]) section.mixer, html[data-skin="opal-lilac"]:not([data-ghost]) .mixerBody { border-color:#c084fc !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell.active, html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved { border-color:#a855f7 !important; box-shadow:0 0 10px rgba(168,85,247,.35); }
html[data-skin="opal-lilac"]:not([data-ghost]) .chName, html[data-skin="opal-lilac"]:not([data-ghost]) .medLabel, html[data-skin="opal-lilac"]:not([data-ghost]) .musicTerminalHeading, html[data-skin="opal-lilac"]:not([data-ghost]) .licenseTerminalHeading, html[data-skin="opal-lilac"]:not([data-ghost]) #presetTitle { color:#9333ea !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .themeTab.active, html[data-skin="opal-lilac"]:not([data-ghost]) .foundersPrimary, html[data-skin="opal-lilac"]:not([data-ghost]) .welcomeStart { background:#a855f7; border-color:#a855f7; color:#ffffff; }
html[data-skin="opal-lilac"]:not([data-ghost]) #playBtn { color:#a855f7; border-color:#a855f7; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell .hz, html[data-skin="opal-lilac"]:not([data-ghost]) .cell .nm { color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell::before { background:rgba(74,42,107,.3) !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell.active::before { background:rgba(74,42,107,.15) !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell[data-img="wave"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="1"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="4"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="7"] { background-image:url("./tile-opal-wave.jpg") !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell[data-img="cosmic"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="2"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="5"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="8"] { background-image:url("./tile-opal-cosmic.jpg") !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell[data-img="geo"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="3"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="6"], html[data-skin="opal-lilac"]:not([data-ghost]) .presetSlot.saved[data-slot="9"] { background-image:url("./tile-opal-geometry.jpg") !important; }

/* v7.5.20 · AURUM-NOIR (PRO): invertiert – Goldhintergrund, Akzente Dunkel-Anthrazit */
html[data-skin="aurum-noir"]:not([data-ghost]) { --bg:#c9a24f; --line:#1c1c1f; --ink:#141416; --muted:#4a3d22; --accent:#1c1c1f; --vu-off:#b08a3e; }
html[data-skin="aurum-noir"]:not([data-ghost]) body { background:linear-gradient(165deg,#d8b866 0%,#c49a45 50%,#b98e3c 100%) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .licenseTerminal, html[data-skin="aurum-noir"]:not([data-ghost]) .welcomeTerminal { background:#c9a24f !important; color:#141416; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch, html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot:not(.saved) { background-color:#d4b062 !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch, html[data-skin="aurum-noir"]:not([data-ghost]) .cell, html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot, html[data-skin="aurum-noir"]:not([data-ghost]) section.mixer, html[data-skin="aurum-noir"]:not([data-ghost]) .mixerBody { border-color:#1c1c1f !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell.active, html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved { border-color:#141416 !important; box-shadow:0 0 0 1px #141416, 0 2px 8px rgba(0,0,0,.35); }
html[data-skin="aurum-noir"]:not([data-ghost]) .chName, html[data-skin="aurum-noir"]:not([data-ghost]) .medLabel, html[data-skin="aurum-noir"]:not([data-ghost]) .musicTerminalHeading, html[data-skin="aurum-noir"]:not([data-ghost]) .licenseTerminalHeading, html[data-skin="aurum-noir"]:not([data-ghost]) #presetTitle, html[data-skin="aurum-noir"]:not([data-ghost]) .brand { color:#141416 !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .themeTab.active, html[data-skin="aurum-noir"]:not([data-ghost]) .foundersPrimary, html[data-skin="aurum-noir"]:not([data-ghost]) .welcomeStart { background:#1c1c1f; border-color:#1c1c1f; color:#d8b866; }
html[data-skin="aurum-noir"]:not([data-ghost]) .foundersSecondary { background:#d4b062; color:#141416; border-color:#1c1c1f; }
html[data-skin="aurum-noir"]:not([data-ghost]) #playBtn { color:#141416; border-color:#141416; }
html[data-skin="aurum-noir"]:not([data-ghost]) #gridSine .sub.on { background:#1c1c1f !important; color:#d8b866 !important; border-color:#1c1c1f !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .infoOverlay { background:rgba(201,162,79,.9); }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell .hz, html[data-skin="aurum-noir"]:not([data-ghost]) .cell .nm { color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell::before { background:rgba(20,20,22,.3) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell.active::before { background:rgba(20,20,22,.15) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell[data-img="wave"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="1"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="4"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="7"] { background-image:url("./tile-aurum-wave.jpg") !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell[data-img="cosmic"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="2"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="5"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="8"] { background-image:url("./tile-aurum-cosmic.jpg") !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell[data-img="geo"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="3"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="6"], html[data-skin="aurum-noir"]:not([data-ghost]) .presetSlot.saved[data-slot="9"] { background-image:url("./tile-aurum-geometry.jpg") !important; }

/* v7.5.21 · AURUM-NOIR: Solfeggio lesbar, OFF-Tasten Anthrazit */
html[data-skin="aurum-noir"]:not([data-ghost]) .categoryHud[data-section="solfeggio"] { --section-color:#141416; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch-freq { --ch:#1c1c1f; }
html[data-skin="aurum-noir"]:not([data-ghost]) #freqVal, html[data-skin="aurum-noir"]:not([data-ghost]) #freqLiveHz { color:#141416 !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch-freq .sub.on { color:#141416 !important; border-color:#141416 !important; box-shadow:0 0 0 1px rgba(20,20,22,.25) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch-freq .sub.on .dot { background:#141416 !important; box-shadow:none !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .ch .onoff:not(.on) { color:#141416 !important; border-color:#1c1c1f !important; box-shadow:none !important; }

/* v7.5.21 · Kachel-Dimmung 8 % / aktiv 0 % (Opal, Aurum, Chrome, Lilac) */
html[data-skin="opal-lilac"]:not([data-ghost]) .cell::before,
html[data-skin="lilac-dream"]:not([data-ghost]) .cell::before { background:rgba(74,42,107,.08) !important; }
html[data-skin="aurum-noir"]:not([data-ghost]) .cell::before { background:rgba(20,20,22,.08) !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .cell::before { background:rgba(0,0,0,.08) !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell.active::before, html[data-skin="opal-lilac"]:not([data-ghost]) .cell.active:hover::before,
html[data-skin="lilac-dream"]:not([data-ghost]) .cell.active::before, html[data-skin="lilac-dream"]:not([data-ghost]) .cell.active:hover::before,
html[data-skin="aurum-noir"]:not([data-ghost]) .cell.active::before, html[data-skin="aurum-noir"]:not([data-ghost]) .cell.active:hover::before,
html[data-skin="focus-chrome"]:not([data-ghost]) .cell.active::before, html[data-skin="focus-chrome"]:not([data-ghost]) .cell.active:hover::before { background:transparent !important; }

/* AURUM-NOIR: leuchtender Spürbar-Punkt */
html[data-skin="aurum-noir"]:not([data-ghost]) #gridSine .sub.on .dot { background:#fff6d6 !important; box-shadow:0 0 6px #ffe9a8, 0 0 12px #ffd700 !important; }

/* FOCUS-CHROME: Aluminium statt Violett, Steuerzeile wie Kanalfenster */
html[data-skin="focus-chrome"]:not([data-ghost]) { --line:#6b7280; --accent:#374151; --muted:#5b616e; }
html[data-skin="focus-chrome"]:not([data-ghost]) .ch, html[data-skin="focus-chrome"]:not([data-ghost]) .cell, html[data-skin="focus-chrome"]:not([data-ghost]) .presetSlot, html[data-skin="focus-chrome"]:not([data-ghost]) section.mixer, html[data-skin="focus-chrome"]:not([data-ghost]) .mixerBody, html[data-skin="focus-chrome"]:not([data-ghost]) .foundersSecondary { border-color:#6b7280 !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .musicTerminalHeading, html[data-skin="focus-chrome"]:not([data-ghost]) .licenseTerminalHeading, html[data-skin="focus-chrome"]:not([data-ghost]) #presetTitle { color:#374151 !important; }
html[data-skin="focus-chrome"]:not([data-ghost]) .categoryJog,
html[data-skin="focus-chrome"]:not([data-ghost]) .categoryDisplay,
html[data-skin="focus-chrome"]:not([data-ghost]) .presetOpen { background:linear-gradient(180deg,#f2f3f6 0%,#d3d7de 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.18) !important; }

/* LILAC-DREAM: Steuerzeile wie Kanalfenster + 40-Hz-Kapsel */
html[data-skin="lilac-dream"]:not([data-ghost]) .categoryJog,
html[data-skin="lilac-dream"]:not([data-ghost]) .categoryDisplay,
html[data-skin="lilac-dream"]:not([data-ghost]) .presetOpen { background:#f8f0fd !important; }
html[data-skin="lilac-dream"]:not([data-ghost]) .grounding .cell { border-radius:999px !important; }

/* AURUM-NOIR: Steuerzeile SET–PRST wie Kanalfenster */
html[data-skin="aurum-noir"]:not([data-ghost]) .categoryJog,
html[data-skin="aurum-noir"]:not([data-ghost]) .categoryDisplay,
html[data-skin="aurum-noir"]:not([data-ghost]) .presetOpen { background:#d4b062 !important; border-color:#1c1c1f !important; }

/* ===== v7.5.22 Frequenzrad (Dev-Mode) – Farben der 6 neuen Themes ===== */
html[data-skin="focus-chrome"] .freqWheel{ background:linear-gradient(180deg,#f2f3f6 0%,#d3d7de 100%) !important; border-color:#6b7280 !important; box-shadow:0 0 0 6px rgba(255,255,255,.8), 0 2px 16px rgba(0,0,0,.15) !important; }
html[data-skin="focus-chrome"] .freqWheel::before{ border-color:rgba(55,65,81,.3) !important; }
html[data-skin="focus-chrome"] .fwBrand{ color:#5b616e !important; }
html[data-skin="focus-chrome"] .fwVal{ color:#14151c !important; }
html[data-skin="focus-chrome"] .fwMark{ background:#374151 !important; }
html[data-skin="focus-chrome"] .fwInput{ background:#f2f3f6 !important; border-color:#6b7280 !important; color:#14151c !important; }
html[data-skin="focus-chrome"] .fwInput:focus{ border-color:#374151 !important; }

html[data-skin="dark-amber"] .freqWheel{ background:#1c1c1f !important; border-color:rgba(255,255,255,.16) !important; box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 0 24px rgba(251,153,32,.28) !important; }
html[data-skin="dark-amber"] .freqWheel::before{ border-color:rgba(255,255,255,.18) !important; }
html[data-skin="dark-amber"] .fwBrand{ color:rgba(255,255,255,.6) !important; }
html[data-skin="dark-amber"] .fwVal{ color:#fb9920 !important; }
html[data-skin="dark-amber"] .fwMark{ background:#fb9920 !important; }
html[data-skin="dark-amber"] .fwInput{ background:#262729 !important; border-color:rgba(255,255,255,.2) !important; color:#fff !important; }
html[data-skin="dark-amber"] .fwInput:focus{ border-color:#fb9920 !important; }

html[data-skin="lilac-dream"] .freqWheel{ background:#f8f0fd !important; border-color:#c084fc !important; box-shadow:0 0 0 6px rgba(255,255,255,.7), 0 0 24px rgba(168,85,247,.22) !important; }
html[data-skin="lilac-dream"] .freqWheel::before{ border-color:rgba(192,132,252,.4) !important; }
html[data-skin="lilac-dream"] .fwBrand{ color:#7e22ce !important; }
html[data-skin="lilac-dream"] .fwVal{ color:#9333ea !important; }
html[data-skin="lilac-dream"] .fwMark{ background:#a855f7 !important; }
html[data-skin="lilac-dream"] .fwInput{ border-color:#c084fc !important; }
html[data-skin="lilac-dream"] .fwInput:focus{ border-color:#9333ea !important; }

html[data-skin="opal-lilac"] .freqWheel{ background:#ffffff !important; border-color:#c084fc !important; box-shadow:0 0 0 6px rgba(255,255,255,.8), 0 0 24px rgba(168,85,247,.25) !important; }
html[data-skin="opal-lilac"] .freqWheel::before{ border-color:rgba(192,132,252,.4) !important; }
html[data-skin="opal-lilac"] .fwVal{ color:#a855f7 !important; }
html[data-skin="opal-lilac"] .fwMark{ background:#a855f7 !important; }
html[data-skin="opal-lilac"] .fwInput{ border-color:#c084fc !important; }
html[data-skin="opal-lilac"] .fwInput:focus{ border-color:#a855f7 !important; }

html[data-skin="terminal"] .freqWheel{ background:#0d1117 !important; border-color:rgba(3,160,98,.5) !important; box-shadow:0 0 0 4px rgba(3,160,98,.08), 0 0 24px rgba(3,160,98,.35) !important; }
html[data-skin="terminal"] .freqWheel::before{ border-color:rgba(3,160,98,.35) !important; }
html[data-skin="terminal"] .fwBrand{ color:rgba(0,255,136,.55) !important; font-family:ui-monospace,Menlo,monospace; }
html[data-skin="terminal"] .fwVal{ color:#00ff88 !important; text-shadow:0 0 8px rgba(0,255,136,.5); }
html[data-skin="terminal"] .fwMark{ background:#00ff88 !important; }
html[data-skin="terminal"] .fwInput{ background:#0d1117 !important; border-color:rgba(3,160,98,.5) !important; color:#00ff88 !important; }
html[data-skin="terminal"] .fwInput:focus{ border-color:#00ff88 !important; }

html[data-skin="aurum-noir"] .freqWheel{ background:#d4b062 !important; border-color:#1c1c1f !important; box-shadow:0 0 0 4px rgba(28,28,31,.12), 0 4px 18px rgba(0,0,0,.35) !important; }
html[data-skin="aurum-noir"] .freqWheel::before{ border-color:rgba(28,28,31,.35) !important; }
html[data-skin="aurum-noir"] .fwBrand{ color:#1c1c1f !important; }
html[data-skin="aurum-noir"] .fwVal{ color:#141416 !important; }
html[data-skin="aurum-noir"] .fwMark{ background:#141416 !important; }
html[data-skin="aurum-noir"] .fwInput{ background:#d4b062 !important; border-color:#1c1c1f !important; color:#141416 !important; }
html[data-skin="aurum-noir"] .fwInput:focus{ border-color:#141416 !important; }

/* v7.5.22 – Kachelschrift-Schatten + Terminal/Deep Focus 0 % */
html[data-skin="opal-lilac"] .cell .hz, html[data-skin="opal-lilac"] .cell .nm,
html[data-skin="lilac-dream"] .cell .hz, html[data-skin="lilac-dream"] .cell .nm,
html[data-skin="focus-chrome"] .cell .hz, html[data-skin="focus-chrome"] .cell .nm,
html[data-skin="lab-white"] .cell .hz, html[data-skin="lab-white"] .cell .nm {
  color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important;
}
html[data-skin="terminal"] .grid .cell::before,
html[data-skin="terminal"] .grid .cell.active::before,
#paneGhost .cell::before, #paneGhost .cell:hover::before, html[data-ghost] #paneGhost .cell::before { background:transparent !important; }
html[data-theme="lab-white"]:not([data-skin]) .cell .hz, html[data-theme="lab-white"]:not([data-skin]) .cell .nm,
html[data-theme="lab-dark"] .cell .hz, html[data-theme="lab-dark"] .cell .nm {
  color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.9), 1px 2px 4px rgba(0,0,0,.45) !important;
}

/* v7.5.28 – OPAL-LILAC: Kacheln 0 % Abdunkelung, Aubergine-Schrift mit weißem Lichtsaum */
html[data-skin="opal-lilac"]:not([data-ghost]) .cell::before,
html[data-skin="opal-lilac"]:not([data-ghost]) .cell:hover::before,
html[data-skin="opal-lilac"]:not([data-ghost]) .cell.active::before { background:transparent !important; }
html[data-skin="opal-lilac"]:not([data-ghost]) .cell .hz,
html[data-skin="opal-lilac"]:not([data-ghost]) .cell .nm { color:#33144a !important; text-shadow:1px 1px 1px rgba(255,255,255,.95) !important; }

/* Feedback-Formular: Lesbarkeit in allen Designs */
.fbCard { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.fbCard h3 { font-size:.95rem; }
.fbQ, .fbLead, .fbRadios, .fbForm select, .fbForm textarea, .fbForm input[type="text"], .fbForm input[type="email"] { font-size:.85rem; }
.fbQ { font-weight:600; }
html[data-theme="lab-dark"]:not([data-skin]) .fbCard, html[data-skin="dark-amber"] .fbCard, html[data-skin="terminal"] .fbCard { background:#14151a !important; border-color:#3a3d45 !important; color:#f1f5f9; }
html[data-theme="lab-dark"]:not([data-skin]) .fbCard h3, html[data-skin="dark-amber"] .fbCard h3, html[data-skin="terminal"] .fbCard h3, html[data-theme="lab-dark"]:not([data-skin]) .fbQ, html[data-skin="dark-amber"] .fbQ, html[data-skin="terminal"] .fbQ, html[data-theme="lab-dark"]:not([data-skin]) .fbOptIn, html[data-skin="dark-amber"] .fbOptIn, html[data-skin="terminal"] .fbOptIn { color:#ffffff !important; }
html[data-theme="lab-dark"]:not([data-skin]) .fbLead, html[data-skin="dark-amber"] .fbLead, html[data-skin="terminal"] .fbLead, html[data-theme="lab-dark"]:not([data-skin]) .fbRadios, html[data-skin="dark-amber"] .fbRadios, html[data-skin="terminal"] .fbRadios { color:#cbd5e1 !important; }
html[data-theme="lab-dark"]:not([data-skin]) .fbForm select, html[data-skin="dark-amber"] .fbForm select, html[data-skin="terminal"] .fbForm select, html[data-theme="lab-dark"]:not([data-skin]) .fbForm textarea, html[data-skin="dark-amber"] .fbForm textarea, html[data-skin="terminal"] .fbForm textarea, html[data-theme="lab-dark"]:not([data-skin]) .fbForm input[type="text"], html[data-skin="dark-amber"] .fbForm input[type="text"], html[data-skin="terminal"] .fbForm input[type="text"], html[data-theme="lab-dark"]:not([data-skin]) .fbForm input[type="email"], html[data-skin="dark-amber"] .fbForm input[type="email"], html[data-skin="terminal"] .fbForm input[type="email"] { background:#1f2228 !important; color:#ffffff !important; border-color:#4b5060 !important; }
html[data-skin="dark-amber"] .fbCard h3 { color:#fb9920 !important; }
html[data-skin="terminal"] .fbCard h3 { color:#00ff88 !important; }
html[data-skin="aurum-noir"] .fbCard { background:#d4b062 !important; border-color:#1c1c1f !important; }
html[data-skin="aurum-noir"] .fbCard h3, html[data-skin="aurum-noir"] .fbQ, html[data-skin="aurum-noir"] .fbLead, html[data-skin="aurum-noir"] .fbRadios, html[data-skin="aurum-noir"] .fbOptIn { color:#141416 !important; }
html[data-skin="aurum-noir"] .fbForm select, html[data-skin="aurum-noir"] .fbForm textarea, html[data-skin="aurum-noir"] .fbForm input[type="text"], html[data-skin="aurum-noir"] .fbForm input[type="email"] { background:#e6cc8a !important; color:#141416 !important; border-color:#1c1c1f !important; }
html[data-skin="opal-lilac"] .fbCard, html[data-skin="lilac-dream"] .fbCard { border-color:#c084fc !important; }
html[data-skin="opal-lilac"] .fbCard h3, html[data-skin="lilac-dream"] .fbCard h3 { color:#7e22ce !important; }
/* v7.5.28 Feedback-Formular Feinschliff */
html[data-theme="lab-dark"]:not([data-skin]) .fbSubmit { background:#1f2228 !important; color:#ffffff !important; border-color:#22d3ee !important; }
html[data-theme="lab-dark"]:not([data-skin]) .fbSubmit:hover { background:#22d3ee !important; color:#0f172a !important; }
html[data-skin="dark-amber"] .fbSubmit { background:#1f2228 !important; color:#fb9920 !important; border-color:#fb9920 !important; }
html[data-skin="dark-amber"] .fbSubmit:hover { background:#fb9920 !important; color:#14151a !important; }
html[data-skin="terminal"] .fbSubmit { background:#0d1117 !important; color:#00ff88 !important; border-color:#00ff88 !important; }
html[data-skin="terminal"] .fbSubmit:hover { background:#00ff88 !important; color:#0d1117 !important; }
html[data-skin="focus-chrome"] .fbForm select, html[data-skin="focus-chrome"] .fbForm textarea, html[data-skin="focus-chrome"] .fbForm input[type="text"], html[data-skin="focus-chrome"] .fbForm input[type="email"] { border-color:#6b7280 !important; }
html[data-skin="focus-chrome"] .fbForm select:focus, html[data-skin="focus-chrome"] .fbForm textarea:focus, html[data-skin="focus-chrome"] .fbForm input:focus { border-color:#374151 !important; outline:none; }
html[data-skin="focus-chrome"] .fbCard { border-color:#6b7280 !important; }
html[data-skin="aurum-noir"] .fbBlock { color:#ffffff !important; text-shadow:1px 1px 2px rgba(0,0,0,.6); }
html[data-skin="aurum-noir"] .fbSubmit { background:#1c1c1f !important; color:#d8b866 !important; border-color:#1c1c1f !important; }