/* ==========================================================================
   Neumorphism theme layer — Stable Audio Visualizer
   Loaded last. Restyles buttons, toggles, sliders, equalizers, meters and
   panels with soft extruded / pressed surfaces. Works for:
     • dark  (default, also when data-theme is missing)
     • light (:root[data-theme="light"])
   The floating desktop widget (html.widget-mode) is left untouched.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root:not(.widget-mode) {
  --neu-bg: #1d2027;
  --neu-top: #242830;
  --neu-bottom: #171a20;
  --neu-hi: rgba(255, 255, 255, 0.055);
  --neu-lo: rgba(0, 0, 0, 0.62);
  --neu-edge: rgba(255, 255, 255, 0.045);
  --neu-ink: #e7eaf0;
  --neu-muted: #8c94a3;
  --neu-accent: #a996ff;
  --neu-accent-2: #6fe3ff;
  --neu-accent-ink: #14121f;
  --neu-track: #15171c;
  --neu-d: 6px;
  --neu-b: 14px;
  --neu-raised: var(--neu-d) var(--neu-d) var(--neu-b) var(--neu-lo), calc(var(--neu-d) * -1) calc(var(--neu-d) * -1) var(--neu-b) var(--neu-hi);
  --neu-raised-sm: 3px 3px 7px var(--neu-lo), -3px -3px 7px var(--neu-hi);
  --neu-raised-lg: 10px 10px 24px var(--neu-lo), -9px -9px 22px var(--neu-hi);
  --neu-pressed: inset 4px 4px 9px var(--neu-lo), inset -4px -4px 9px var(--neu-hi);
  --neu-inset: inset 3px 3px 7px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  --neu-surface: linear-gradient(145deg, var(--neu-top), var(--neu-bottom));
  --neu-panel: #1b1e24;
}

:root[data-theme="light"]:not(.widget-mode) {
  --neu-bg: #e4e8ef;
  --neu-top: #eef1f6;
  --neu-bottom: #d7dce4;
  --neu-hi: rgba(255, 255, 255, 0.95);
  --neu-lo: rgba(143, 156, 180, 0.62);
  --neu-edge: rgba(255, 255, 255, 0.6);
  --neu-ink: #2c3240;
  --neu-muted: #6b7384;
  --neu-accent: #6c58d6;
  --neu-accent-2: #0c9cc2;
  --neu-accent-ink: #ffffff;
  --neu-track: #d5dae2;
  --neu-panel: #e4e8ef;
  /* keep existing app variables in sync */
  --app-panel: #e4e8ef;
  --app-panel-solid: #e4e8ef;
  --app-text: #2c3240;
  --app-muted-text: #6b7384;
  --app-section-bg: #e4e8ef;
  --app-stroke: transparent;
}

/* ==========================================================================
   1. Round icon buttons (quick actions, top actions, studio icons, fullscreen)
   ========================================================================== */
:root:not(.widget-mode) :is(
  .icon-button,
  .quick-actions .quick-control,
  .spectrum-studio-icon,
  .fullscreen-exit-button,
  .library-tool-icon
) {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-raised) !important;
  backdrop-filter: none !important;
  transition: box-shadow 160ms ease, transform 120ms ease, color 120ms ease !important;
}

:root:not(.widget-mode) :is(
  .icon-button,
  .quick-actions .quick-control,
  .spectrum-studio-icon,
  .fullscreen-exit-button,
  .library-tool-icon
):hover {
  box-shadow: var(--neu-raised-lg) !important;
}

:root:not(.widget-mode) :is(
  .icon-button,
  .quick-actions .quick-control,
  .spectrum-studio-icon,
  .fullscreen-exit-button,
  .library-tool-icon
):is(.active, :active, [aria-pressed="true"]) {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-pressed) !important;
  transform: none !important;
}

/* library close button (kept separate so its ID doesn't raise the specificity of the group above) */
:root:not(.widget-mode) .library-panel #closeLibraryButton {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-raised) !important;
}

/* masked icons pick up theme ink, accent when active */
:root:not(.widget-mode) :is(.quick-actions .quick-control, .spectrum-studio-icon)::before {
  background: var(--neu-ink) !important;
  filter: none !important;
}

:root:not(.widget-mode) :is(.quick-actions .quick-control, .spectrum-studio-icon).active::before,
:root:not(.widget-mode) .quick-actions .quick-control[aria-pressed="true"]::before {
  background: var(--neu-accent) !important;
}

:root:not(.widget-mode) .quick-actions .repeat-core.repeat-off::before {
  background: var(--neu-muted) !important;
}

:root:not(.widget-mode) .quick-actions :is(.repeat-core.repeat-one, .sleep-core[data-timer])::after {
  background: var(--neu-accent) !important;
  color: var(--neu-accent-ink) !important;
  box-shadow: var(--neu-raised-sm) !important;
}

/* ==========================================================================
   2. Transport (prev / play / next) — main + fullscreen
   ========================================================================== */
:root:not(.widget-mode) :is(.transport-button, .fullscreen-transport-button) {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-raised-lg) !important;
  backdrop-filter: none !important;
  transition: box-shadow 160ms ease, transform 120ms ease !important;
}

:root:not(.widget-mode) .transport-button.small {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
}

:root:not(.widget-mode) .transport-button.small::before {
  width: 40px !important;
  height: 40px !important;
}

:root:not(.widget-mode) :is(.transport-button, .fullscreen-transport-button):hover {
  box-shadow: 12px 12px 28px var(--neu-lo), -11px -11px 26px var(--neu-hi) !important;
}

:root:not(.widget-mode) :is(.transport-button, .fullscreen-transport-button):active {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-pressed) !important;
  transform: none !important;
}

:root:not(.widget-mode) :is(.transport-button, .fullscreen-transport-button)::before {
  background: var(--neu-ink) !important;
  filter: none !important;
  opacity: 0.92;
}

/* the play button gets an inset accent well around the icon */
:root:not(.widget-mode) .transport-button.play {
  box-shadow:
    var(--neu-raised-lg),
    inset 0 0 0 10px var(--neu-bg),
    inset 4px 4px 14px var(--neu-lo),
    inset -4px -4px 14px var(--neu-hi) !important;
}

:root:not(.widget-mode) .transport-button.play::before,
:root:not(.widget-mode) .fullscreen-play-button::before {
  background: linear-gradient(135deg, var(--neu-accent), var(--neu-accent-2)) !important;
  opacity: 1;
}

:root:not(.widget-mode) .transport-button.play.pause-core,
:root:not(.widget-mode) .transport-button.play:active {
  box-shadow: var(--neu-pressed), 0 0 0 1px var(--neu-edge) !important;
}

/* ==========================================================================
   3. Text / pill buttons in panels, menus and studios
   ========================================================================== */
:root:not(.widget-mode) :is(
  .library-panel button:not(.library-tool-icon):not(#closeLibraryButton):not(.track-row):not(.favorite-heart),
  .control-panel button:not(.icon-button),
  .equalizer-panel button:not(.icon-button):not(.effect-stepper),
  .studio-tabs button,
  .studio-character-presets button,
  .studio-eq-heading button,
  .spectrum-topic-nav button,
  .spectrum-slot-switch button,
  .dynamic-orb-actions button,
  .sleep-menu button,
  .track-context-menu button,
  .effect-preset-row button,
  .effect-speed-presets button,
  .player-art-menu button,
  .player-art-dialog button,
  #startAudioButton
) {
  border: 1px solid var(--neu-edge) !important;
  border-radius: 14px !important;
  background: var(--neu-surface) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-raised-sm) !important;
  font-weight: 650;
  transition: box-shadow 140ms ease, color 140ms ease !important;
}

:root:not(.widget-mode) :is(
  .library-panel button:not(.library-tool-icon):not(#closeLibraryButton):not(.track-row):not(.favorite-heart),
  .control-panel button:not(.icon-button),
  .equalizer-panel button:not(.icon-button):not(.effect-stepper),
  .studio-tabs button,
  .studio-character-presets button,
  .studio-eq-heading button,
  .spectrum-topic-nav button,
  .spectrum-slot-switch button,
  .dynamic-orb-actions button,
  .sleep-menu button,
  .track-context-menu button,
  .effect-preset-row button,
  .effect-speed-presets button,
  .player-art-menu button,
  .player-art-dialog button,
  #startAudioButton
):hover {
  box-shadow: var(--neu-raised) !important;
}

:root:not(.widget-mode) :is(
  .library-tabs button.active,
  .studio-tabs button[aria-selected="true"],
  .studio-character-presets button[aria-pressed="true"],
  .spectrum-topic-nav button.active,
  .spectrum-topic-button.active,
  .spectrum-slot-switch button.active,
  .effect-speed-presets button.active,
  .effect-speed-presets button[aria-pressed="true"],
  .control-panel button.active,
  .library-panel button.active
),
:root:not(.widget-mode) :is(
  .library-panel button,
  .control-panel button,
  .equalizer-panel button,
  .studio-tabs button,
  .spectrum-topic-nav button,
  .sleep-menu button
):not(.icon-button):active {
  background: var(--neu-bg) !important;
  color: var(--neu-accent) !important;
  box-shadow: var(--neu-pressed) !important;
  border-color: transparent !important;
}

:root:not(.widget-mode) .track-context-menu .track-context-delete {
  color: #ff5a6e !important;
}

/* ==========================================================================
   4. Panels & sections (library, settings, equalizer, sleep, studio)
   ========================================================================== */
:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .sleep-menu, .track-context-menu, .player-art-menu, .player-art-dialog) {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-panel) !important;
  color: var(--neu-ink) !important;
  box-shadow: 18px 18px 46px rgba(0, 0, 0, 0.45), -6px -6px 24px var(--neu-hi) !important;
  backdrop-filter: none !important;
}

:root:not(.widget-mode) .library-panel {
  --lib-ink: var(--neu-ink);
  --lib-muted: var(--neu-muted);
  --lib-surface: var(--neu-bg);
  --lib-line: transparent;
  --lib-accent: var(--neu-accent);
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-panel) !important;
  box-shadow: 18px 18px 46px rgba(0, 0, 0, 0.45), -6px -6px 24px var(--neu-hi) !important;
}

:root:not(.widget-mode) .library-panel::before {
  background: var(--neu-panel) !important;
  opacity: 0.9 !important;
}

:root:not(.widget-mode) :is(.settings-section, .studio-engine-section, .studio-graphic-eq, .studio-character, .effect-preset-tools, .spectrum-studio-preview-shell) {
  border: 1px solid var(--neu-edge) !important;
  border-radius: 18px !important;
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-raised) !important;
}

:root:not(.widget-mode) .spectrum-studio {
  color: var(--neu-ink) !important;
  background: var(--neu-panel) !important;
}

:root:not(.widget-mode) .spectrum-card {
  border: 1px solid var(--neu-edge) !important;
  border-radius: 18px !important;
  background: var(--neu-surface) !important;
  box-shadow: var(--neu-raised) !important;
}

:root:not(.widget-mode) .spectrum-card:hover {
  box-shadow: var(--neu-raised-lg) !important;
}

:root:not(.widget-mode) .spectrum-card.active {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-pressed), 0 0 0 2px var(--neu-accent) !important;
}

:root:not(.widget-mode) .spectrum-card canvas {
  border-radius: 12px;
}

/* library rows become soft tiles; the playing one is pressed in */
:root:not(.widget-mode) .library-panel .track-row {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  box-shadow: var(--neu-raised-sm) !important;
  margin-bottom: 12px !important;
}

:root:not(.widget-mode) .library-panel .track-row:hover {
  box-shadow: var(--neu-raised) !important;
}

:root:not(.widget-mode) .library-panel .track-row.active {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-pressed) !important;
  border-color: transparent !important;
}

:root:not(.widget-mode) .library-panel .track-row.active strong {
  color: var(--neu-accent) !important;
}

:root:not(.widget-mode) .panel-backdrop {
  background: rgba(0, 0, 0, 0.38) !important;
}

:root[data-theme="light"]:not(.widget-mode) .panel-backdrop {
  background: rgba(200, 207, 219, 0.45) !important;
}

/* ==========================================================================
   5. Inputs: text, search, select, color, number — pressed-in wells
   ========================================================================== */
:root:not(.widget-mode) :is(
  .control-line select,
  .text-control input,
  .library-panel input:not([type="checkbox"]):not([type="range"]),
  .library-panel select,
  .playlist-tools input,
  .playlist-tools select,
  .spectrum-search input,
  .studio-options select,
  .effect-preset-row select,
  .effect-preset-row input,
  .sleep-menu input,
  .spectrum-theme-picker select,
  .theme-picker select
) {
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--neu-bg) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-inset) !important;
  outline: none;
}

:root:not(.widget-mode) :is(.control-line select, .text-control input, .library-panel input, .spectrum-search input, .sleep-menu input, .studio-options select):focus-visible {
  box-shadow: var(--neu-inset), 0 0 0 2px var(--neu-accent) !important;
}

:root:not(.widget-mode) :is(select) option {
  background: var(--neu-panel);
  color: var(--neu-ink);
}

/* ==========================================================================
   6. Checkboxes → neumorphic toggle switches
   ========================================================================== */
:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 40px !important;
  height: 22px !important;
  margin: 0;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: var(--neu-inset);
  cursor: pointer;
  vertical-align: middle;
  transition: background 160ms ease;
}

:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--neu-surface);
  box-shadow: 2px 2px 4px var(--neu-lo), -1px -1px 3px var(--neu-hi);
  transition: transform 180ms ease, background 180ms ease;
}

:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--neu-accent) 30%, var(--neu-bg));
}

:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: var(--neu-accent);
}

:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .studio-engine-section) input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--neu-accent);
  outline-offset: 2px;
}

:root:not(.widget-mode) .effect-switch {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-raised-sm) !important;
  padding: 0 6px 0 12px !important;
}

/* ==========================================================================
   7. Range sliders (settings, studio, trims) — inset groove + raised thumb
   ========================================================================== */
:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character, .library-panel) input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}

:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character, .library-panel) input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: inset 2px 2px 4px var(--neu-lo), inset -2px -2px 4px var(--neu-hi);
}

:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character, .library-panel) input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--neu-accent) 0 3px, transparent 3.5px),
    linear-gradient(145deg, var(--neu-top), var(--neu-bottom));
  box-shadow: 3px 3px 7px var(--neu-lo), -2px -2px 6px var(--neu-hi);
}

/* ==========================================================================
   8. Equalizers
   ========================================================================== */
/* 8a. 10-band graphic EQ (vertical sliders) */
:root:not(.widget-mode) .studio-graphic-eq svg {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inset);
  border-radius: 14px !important;
}

:root:not(.widget-mode) #studioEqCurve {
  stroke: var(--neu-accent) !important;
}

:root:not(.widget-mode) .studio-band input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 26px !important;
  height: 118px !important;
  padding: 0;
  border-radius: 999px;
  background: var(--neu-bg);
  box-shadow: inset 3px 3px 6px var(--neu-lo), inset -3px -3px 6px var(--neu-hi);
  cursor: pointer;
}

:root:not(.widget-mode) .studio-band input[type="range"]::-webkit-slider-runnable-track {
  width: 26px;
  border-radius: 999px;
  background: transparent;
}

:root:not(.widget-mode) .studio-band input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--neu-accent) 0 3px, transparent 3.5px),
    linear-gradient(145deg, var(--neu-top), var(--neu-bottom));
  box-shadow: 3px 3px 6px var(--neu-lo), -2px -2px 5px var(--neu-hi);
}

:root:not(.widget-mode) .studio-band output {
  color: var(--neu-muted);
}

/* 8b. Effect fader bank (Bass & EQ tab) */
:root:not(.widget-mode) .effect-fader-bank {
  border-radius: 18px !important;
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
}

:root:not(.widget-mode) .effect-fader {
  border: 1px solid var(--neu-edge) !important;
  border-radius: 16px !important;
  background: var(--neu-surface) !important;
  box-shadow: var(--neu-raised-sm) !important;
}

:root:not(.widget-mode) .effect-fader-label { color: var(--neu-muted) !important; }
:root:not(.widget-mode) .effect-fader-value { color: var(--neu-ink) !important; }

:root:not(.widget-mode) .effect-fader-rail::before {
  width: 10px !important;
  background: var(--neu-bg) !important;
  box-shadow: inset 2px 2px 4px var(--neu-lo), inset -2px -2px 4px var(--neu-hi) !important;
}

:root:not(.widget-mode) .effect-fader-rail::after {
  width: 4px !important;
  margin-bottom: 0;
  box-shadow: 0 0 8px color-mix(in srgb, var(--effect-color) 70%, transparent) !important;
}

:root:not(.widget-mode) .effect-fader input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
}

:root:not(.widget-mode) .effect-fader input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
}

/* horizontal in the rotated input = a vertical fader cap */
:root:not(.widget-mode) .effect-fader input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 36px !important;
  margin-top: -16px !important;
  border: 1px solid var(--neu-edge) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(90deg, transparent 42%, var(--effect-color) 42% 58%, transparent 58%) center / 100% 55% no-repeat,
    linear-gradient(145deg, var(--neu-top), var(--neu-bottom)) !important;
  box-shadow: 3px -3px 8px var(--neu-lo), -3px 3px 7px var(--neu-hi) !important;
}

:root:not(.widget-mode) .effect-stepper {
  border: 1px solid var(--neu-edge) !important;
  background: var(--neu-surface) !important;
  box-shadow: 2px 2px 5px var(--neu-lo), -2px -2px 5px var(--neu-hi) !important;
}

:root:not(.widget-mode) .effect-stepper:active {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inset) !important;
}

:root:not(.widget-mode) .studio-meter {
  background: var(--neu-bg) !important;
  box-shadow: var(--neu-inset);
}

/* 8c. Settings-panel meter bars + fullscreen HUD bars */
:root:not(.widget-mode) .meters i {
  height: 10px !important;
  border-radius: 99px !important;
  background:
    linear-gradient(90deg, var(--green), var(--cyan), var(--pink)) 0 / var(--value, 0%) 100% no-repeat,
    var(--neu-bg) !important;
  box-shadow: inset 2px 2px 4px var(--neu-lo), inset -2px -2px 4px var(--neu-hi) !important;
}



/* ==========================================================================
   9. Main Level / Bass / Beat dials (Bass + Beat are adjustable knobs)
   ========================================================================== */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div {
  width: calc(80px * var(--hud-scale, 1)) !important;
  border: 0 !important;
  background: linear-gradient(145deg, var(--neu-top), var(--neu-bottom)) !important;
  box-shadow:
    calc(8px * var(--hud-scale, 1)) calc(8px * var(--hud-scale, 1)) calc(18px * var(--hud-scale, 1)) var(--neu-lo),
    calc(-6px * var(--hud-scale, 1)) calc(-6px * var(--hud-scale, 1)) calc(15px * var(--hud-scale, 1)) var(--neu-hi) !important;
  opacity: 1 !important;
  isolation: isolate;
}

/* groove with live level arc (270° sweep) */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div::before {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: 0;
  border-radius: 50%;
  background: conic-gradient(from -135deg,
    var(--meter-color) calc(var(--value, 0%) * 0.75),
    color-mix(in srgb, var(--neu-ink) 7%, transparent) 0 75%,
    transparent 0);
  box-shadow: inset 4px 4px 8px var(--neu-lo), inset -3px -3px 7px var(--neu-hi);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59%);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--meter-color) 55%, transparent));
}

/* raised center cap */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div::after {
  content: "";
  position: absolute;
  inset: 21%;
  z-index: 1;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--neu-top), var(--neu-bottom));
  box-shadow:
    4px 4px 9px var(--neu-lo),
    -3px -3px 8px var(--neu-hi),
    0 0 calc(var(--neu-hit, 0) * 22px) color-mix(in srgb, var(--meter-color) 75%, transparent);
  transition: box-shadow 90ms ease-out;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) span,
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) strong {
  position: relative;
  z-index: 2;
  text-shadow: none !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) span {
  margin-top: 33% !important;
  color: var(--neu-muted) !important;
  font-size: calc(9px * var(--hud-scale, 1)) !important;
  letter-spacing: 0.08em;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) strong {
  align-self: start;
  margin-top: -18% !important;
  color: var(--neu-ink) !important;
  font-size: calc(16px * var(--hud-scale, 1)) !important;
}

/* adjustable knobs */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob {
  pointer-events: auto;
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob:focus-visible {
  box-shadow: var(--neu-raised), 0 0 0 2px var(--meter-color) !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob.dragging {
  box-shadow: 4px 4px 10px var(--neu-lo), -3px -3px 8px var(--neu-hi) !important;
}

/* the <i> becomes the sensitivity notch */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:is(.neu-knob, .neu-dial) i {
  display: block !important;
  position: absolute;
  inset: 9%;
  z-index: 3;
  border-radius: 50%;
  background: none !important;
  transform: rotate(var(--neu-angle, 0deg));
  transition: transform 80ms ease-out;
  pointer-events: none;
}

/* pointer sits in the groove, like the notch on a hardware knob */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:is(.neu-knob, .neu-dial) i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1%;
  width: 18%;
  height: 18%;
  margin-left: -9%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--neu-top), var(--neu-bottom));
  box-shadow:
    2px 2px 4px var(--neu-lo),
    -1px -1px 3px var(--neu-hi),
    inset 0 0 0 3px var(--meter-color);
}

/* sensitivity readout (shown on hover / drag) */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) .neu-sens {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 4;
  padding: 3px 8px;
  border-radius: 999px;
  transform: translateX(-50%);
  background: var(--neu-bg);
  box-shadow: var(--neu-raised-sm);
  color: var(--meter-color);
  font-size: calc(11px * var(--hud-scale, 1));
  font-style: normal;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob:is(:hover, .dragging, :focus-visible) .neu-sens {
  opacity: 1;
}

/* light theme meter colours: deepen neon for contrast on pearl */
:root[data-theme="light"]:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:nth-child(1) { --meter-color: #10b86a; }
:root[data-theme="light"]:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:nth-child(2) { --meter-color: #0a9fd0; }
:root[data-theme="light"]:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:nth-child(3) { --meter-color: #d6239f; }

/* ==========================================================================
   10. Seek bar thumb + start overlay
   ========================================================================== */
:root:not(.widget-mode) .seek-bar::-webkit-slider-thumb {
  width: 16px !important;
  height: 16px !important;
  margin-top: calc((16px - var(--seek-visualizer-height)) / 2) !important;
  background:
    radial-gradient(circle, var(--neu-accent) 0 3px, transparent 3.5px),
    linear-gradient(145deg, var(--neu-top), var(--neu-bottom)) !important;
  box-shadow: 2px 2px 5px var(--neu-lo), -2px -2px 4px var(--neu-hi) !important;
}

:root:not(.widget-mode) .start-overlay > div {
  border-radius: 24px;
  background: var(--neu-panel);
  color: var(--neu-ink);
  box-shadow: var(--neu-raised-lg);
}

/* headings & muted text inside panels follow the theme */
:root:not(.widget-mode) :is(.control-panel, .equalizer-panel, .spectrum-studio, .sleep-menu) :is(h2, h3, h4, strong, label, span) {
  color: inherit;
}

:root:not(.widget-mode) :is(.studio-audio-hint, .studio-engine-section small, .effect-section h4, .spectrum-studio-kicker, .dynamic-orb-header p) {
  color: var(--neu-muted) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root:not(.widget-mode) * { transition: none !important; }
}



/* library header text follows the theme (no artwork text-shadow) */
:root:not(.widget-mode) .library-panel * {
  text-shadow: none !important;
}

:root:not(.widget-mode) .library-panel .library-search > span {
  color: var(--neu-muted) !important;
}

:root:not(.widget-mode) .library-panel :is(.library-head h2, .library-head h1, .library-count) {
  color: var(--neu-ink) !important;
}

:root:not(.widget-mode) .library-panel :is(.library-sort-label, .library-head p, .library-head small) {
  color: var(--neu-muted) !important;
}

:root:not(.widget-mode) .library-panel .library-eyebrow {
  color: var(--neu-accent) !important;
}

/* ==========================================================================
   11. Player screen — no glow: shadow only below/right + soft inner light,
       no outer highlight halo, no coloured glow on dials.
   ========================================================================== */
:root:not(.widget-mode) {
  --neu-stage-raised: 5px 6px 12px rgba(0, 0, 0, 0.55), inset 1px 1px 0 var(--neu-edge), inset -2px -2px 5px rgba(0, 0, 0, 0.18);
  --neu-stage-raised-lg: 7px 9px 18px rgba(0, 0, 0, 0.55), inset 1px 1px 0 var(--neu-edge), inset -3px -3px 8px rgba(0, 0, 0, 0.18);
  --neu-stage-pressed: inset 4px 4px 9px rgba(0, 0, 0, 0.5), inset -2px -2px 6px rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"]:not(.widget-mode) {
  --neu-stage-raised: 5px 6px 12px rgba(0, 0, 0, 0.45), inset 1px 1px 0 #ffffff, inset -2px -2px 5px rgba(143, 156, 180, 0.35);
  --neu-stage-raised-lg: 7px 9px 18px rgba(0, 0, 0, 0.45), inset 1px 1px 0 #ffffff, inset -3px -3px 8px rgba(143, 156, 180, 0.35);
  --neu-stage-pressed: inset 4px 4px 9px rgba(143, 156, 180, 0.7), inset -3px -3px 7px rgba(255, 255, 255, 0.9);
}

:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control, .transport-button),
:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control, .transport-button):hover {
  box-shadow: var(--neu-stage-raised) !important;
}

:root:not(.widget-mode) .poweramp-stage .transport-button,
:root:not(.widget-mode) .poweramp-stage .transport-button:hover,
:root:not(.widget-mode) .poweramp-stage .transport-button.play,
:root:not(.widget-mode) .poweramp-stage .transport-button.play:hover {
  box-shadow: var(--neu-stage-raised-lg) !important;
}

:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control, .transport-button):is(.active, :active, [aria-pressed="true"]),
:root:not(.widget-mode) .poweramp-stage .transport-button.play.pause-core {
  box-shadow: var(--neu-stage-pressed) !important;
}

:root:not(.widget-mode) .poweramp-stage .quick-actions :is(.repeat-core.repeat-one, .sleep-core[data-timer])::after {
  box-shadow: none !important;
}

/* dials */
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div,
:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob.dragging {
  box-shadow: var(--neu-stage-raised-lg) !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div.neu-knob:focus-visible {
  box-shadow: var(--neu-stage-raised-lg), 0 0 0 2px var(--meter-color) !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div::before {
  filter: none !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div::after {
  box-shadow: 3px 4px 8px rgba(0, 0, 0, 0.45), inset 1px 1px 0 var(--neu-edge) !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) div:is(.neu-knob, .neu-dial) i::before {
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 3px var(--meter-color) !important;
}

:root:not(.widget-mode) :is(.player-meter-strip, .fullscreen-meter) .neu-sens {
  box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.45) !important;
}

:root:not(.widget-mode) .seek-bar::-webkit-slider-thumb {
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* fullscreen is part of the player screen: no glow there either
   (class doubled on purpose to outrank the general round-button rule) */
:root:not(.widget-mode) :is(.fullscreen-exit-button.fullscreen-exit-button, .fullscreen-transport-button.fullscreen-transport-button),
:root:not(.widget-mode) :is(.fullscreen-exit-button.fullscreen-exit-button, .fullscreen-transport-button.fullscreen-transport-button):hover {
  box-shadow: var(--neu-stage-raised) !important;
}

:root:not(.widget-mode) :is(.fullscreen-exit-button.fullscreen-exit-button, .fullscreen-transport-button.fullscreen-transport-button):active {
  box-shadow: var(--neu-stage-pressed) !important;
}