/* Crankyhub UI palette, sampled from https://music.crankyhub.de/ on 2026-11-03.
   Colors only: layout, typography, scene/widget colors and interactions stay independent. */
:root {
  color-scheme: dark;
  --bg: #07111f;
  --canvas: #050c17;
  --surface-sunken: #08101f;
  --panel: #0d192d;
  --surface: #13223f;
  --surface-raised: #192c4c;
  --surface-hover: #20375a;
  --line: rgba(148, 163, 184, .18);
  --line-strong: #344d70;
  --muted: #95a9c6;
  --subtle: #849abd;
  --text: #edf4ff;
  --text-soft: #c6dcff;
  --accent: #5ab2ff;
  --accent-strong: #8ad1ff;
  --accent-soft: rgba(90, 178, 255, .12);
  --accent-border: rgba(90, 178, 255, .32);
  --accent-ink: #06111f;
  --brand-secondary: #7a74ff;
  --secondary-soft: rgba(122, 116, 255, .12);
  --secondary-line: #7168bc;
  --secondary-text: #d4d0ff;
  --success: #29d391;
  --success-text: #c4ffe8;
  --success-surface: #102d29;
  --success-line: #316653;
  --warning: #f5b942;
  --warning-text: #ffe3a8;
  --warning-surface: #302817;
  --warning-line: #806337;
  --danger: #ff6b7d;
  --danger-text: #ffc1c9;
  --danger-surface: #311c2b;
  --danger-line: #884650;
  --brand-gradient: linear-gradient(135deg, #5ab2ff, #7a74ff);
  --panel-background: linear-gradient(180deg, rgba(19, 34, 63, .9), rgba(8, 16, 31, .88));
  --page-background: radial-gradient(circle at top left, rgba(90, 178, 255, .22), transparent 30%), radial-gradient(circle at top right, rgba(139, 92, 246, .18), transparent 28%), radial-gradient(circle at bottom center, rgba(35, 211, 146, .12), transparent 36%), #07111f;
}
/* These controls inherit the same palette in the dashboard and both studios. */
input[type=checkbox], input[type=range] { accent-color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }

/* Native popup options need their own opaque colors on Windows/Chromium.
   Styling only the closed select does not reliably style its popup. */
select { color-scheme: dark; }
select option, select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
select option:checked {
  background-color: var(--surface-hover);
  color: var(--text);
}
select option:disabled { color: var(--muted); }