/* iPhone web app adjustments (loaded after all other styles) */

html.phone-web,
html.phone-web body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Desktop-only switches (desktop spectrum widget) */
html.phone-web label:has(#autoWidgetEnabled),
html.phone-web label:has(#autoWidgetQuickToggle),
html.phone-web .spectrum-widget-controls,
html.phone-web .spectrum-widget-resize-handle {
  display: none !important;
}

/* Keep controls clear of the notch / Dynamic Island and the home bar */
html.phone-web .top-settings-action {
  top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 10px) !important;
  right: calc(env(safe-area-inset-right, 0px) + 10px) !important;
}
html.phone-web #libraryButton,
html.phone-web .library-toggle,
html.phone-web .top-library-action {
  top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 10px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 10px) !important;
}
html.phone-web .control-panel,
html.phone-web .library-panel,
html.phone-web .spectrum-studio,
html.phone-web .equalizer-panel {
  padding-top: max(var(--phone-safe-top, env(safe-area-inset-top, 0px)), 0px);
  padding-bottom: max(var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px)), 0px);
}

/* Bigger touch targets */
html.phone-web button,
html.phone-web select {
  touch-action: manipulation;
}
html.phone-web input[type="range"] {
  min-height: 28px;
}

/* "Add music" (+) button in the library */
html.phone-web .phone-add-music {
  font-size: 22px !important;
  font-weight: 800 !important;
}

/* Spectrum edit mode on touch: bigger handles, no page scrolling while dragging */
html.phone-web .spectrum-edit-layer {
  touch-action: none;
}
html.phone-web .spectrum-edit-banner {
  top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 62px);
  font-size: 12px; padding: 7px 14px;
  white-space: normal;
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* ---------- Portrait phone layout ---------- */
@media (orientation: portrait) {
  /* background fills the screen, never repeats */
  html.phone-web #backgroundImage {
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
}

@media (max-width: 600px) {
  /* quick action buttons: two tidy rows instead of one row wider than the screen */
  html.phone-web .quick-actions {
    grid-template-columns: repeat(6, 40px) !important;
    gap: 10px 12px !important;
    width: auto !important;
    max-width: 96vw !important;
    justify-content: center !important;
  }
  /* Beat / Level / Bass meters: small, top-right, clear of the play controls */
  html.phone-web .player-meter-strip {
    --hud-scale: 0.58;
    --hud-beat-x: 70vw;
    --hud-level-x: 81vw;
    --hud-bass-x: 92vw;
    --hud-beat-y: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 88px);
    --hud-level-y: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 88px);
    --hud-bass-y: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 88px);
  }
  html.phone-web .player-meter-strip span,
  html.phone-web .player-meter-strip strong {
    transform: scale(0.8);
  }
}

/* rotated full-screen text runs along the screen height, so don't cap it at the screen width */
html.phone-web .fullscreen-text-layer {
  max-width: none !important;
}

/* ---------- One spectrum only on iPhone ---------- */
html.phone-web [data-spectrum-slot="s2"],
html.phone-web #spectrumSlotSwitch,
html.phone-web .liquid-slot-picker,
html.phone-web .liquid-card-actions button:nth-child(2),
html.phone-web #s2LiquidWaveSource,
html.phone-web .dynamic-orb-slot[data-slot="s2"] {
  display: none !important;
}
html.phone-web .liquid-card-actions {
  grid-template-columns: 1fr !important;
}

/* =====================================================================
   iPhone look — player buttons
   ===================================================================== */
html.phone-web:root {
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ios-bg: #000000;
  --ios-card: #1c1c1e;
  --ios-card-2: #2c2c2e;
  --ios-raised: #636366;
  --ios-sep: rgba(84, 84, 88, 0.55);
  --ios-text: #ffffff;
  --ios-sub: rgba(235, 235, 245, 0.6);
  --ios-blue: #0a84ff;
  --ios-green: #30d158;
  --ios-fill: rgba(120, 120, 128, 0.36);
  --ios-glass: rgba(255, 255, 255, 0.14);
}
html.phone-web:root[data-theme="light"] {
  --ios-bg: #f2f2f7;
  --ios-card: #ffffff;
  --ios-card-2: #e5e5ea;
  --ios-raised: #ffffff;
  --ios-sep: rgba(60, 60, 67, 0.22);
  --ios-text: #000000;
  --ios-sub: rgba(60, 60, 67, 0.6);
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-fill: rgba(120, 120, 128, 0.2);
}
html.phone-web, html.phone-web body, html.phone-web button, html.phone-web input, html.phone-web select {
  font-family: var(--ios-font) !important;
}

/* ---- Player screen: frosted-glass round buttons ---- */
html.phone-web:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control),
html.phone-web:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control):hover {
  border: 0.5px solid rgba(255, 255, 255, 0.22) !important;
  background: rgba(30, 30, 34, 0.38) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
}
html.phone-web:root:not(.widget-mode) :is(.poweramp-stage, .top-settings-action, .stage-actions) :is(.icon-button, .quick-control):is(.active, :active, [aria-pressed="true"]) {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
  color: #000000 !important;
  transform: scale(0.96) !important;
}
html.phone-web:root:not(.widget-mode) .quick-actions .quick-control::before {
  background: #ffffff !important;
  width: 22px !important;
  height: 22px !important;
  filter: none !important;
  opacity: 1 !important;
}
html.phone-web:root:not(.widget-mode) .quick-actions .quick-control:is(.active, [aria-pressed="true"])::before {
  background: #000000 !important;
}
html.phone-web:root:not(.widget-mode) .quick-actions .repeat-core.repeat-off::before {
  background: rgba(255, 255, 255, 0.55) !important;
}
html.phone-web:root:not(.widget-mode) .quick-actions .quick-control svg {
  stroke: currentColor;
}
html.phone-web:root:not(.widget-mode) .poweramp-stage .quick-actions :is(.repeat-core.repeat-one, .sleep-core[data-timer])::after {
  background: var(--ios-blue) !important;
  color: #ffffff !important;
}
html.phone-web #trackPosition {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
}

/* transport: Apple Music style — big white glyphs, glass play button */
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button,
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button:hover {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button::before {
  background: #ffffff !important;
  opacity: 1 !important;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35)) !important;
}
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button.play,
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button.play:hover,
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button.play.pause-core {
  border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button.play::before {
  background: #ffffff !important;
}
html.phone-web:root:not(.widget-mode) .poweramp-stage .transport-button:active {
  transform: scale(0.9) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
html.phone-web .seek-bar { accent-color: #ffffff; }

/* ---- Spectrum gallery: square previews that show the whole shape ---- */
html.phone-web #spectrumStudio .spectrum-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
html.phone-web #spectrumStudio .spectrum-card {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.phone-web #spectrumStudio .spectrum-card canvas {
  display: block !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  width: 100% !important;
}
html.phone-web #spectrumStudio .spectrum-card-copy {
  position: static !important;
  padding: 8px 10px 10px !important;
  background: none !important;
}
/* iOS hides scrollbars until you scroll */
html.phone-web *::-webkit-scrollbar { width: 0 !important; height: 0 !important; background: transparent !important; }
html.phone-web * { scrollbar-width: none; }

/* ---- Meters: movable in edit mode ---- */
.phone-meter-handle {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(140, 190, 255, 0.95);
  background: rgba(0, 108, 255, 0.1);
  touch-action: none;
  cursor: grab;
  transform: translate(-50%, -50%);
}
.phone-meter-handle.dragging { border-style: solid; cursor: grabbing; }

/* keep the player clear of the Dynamic Island and the home bar (the iPhone shows its own clock) */
html.phone-web .poweramp-stage {
  padding-top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 6px) !important;
  padding-bottom: calc(var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px)) + 4px) !important;
}
html.phone-web .stage-status #clockText { display: none !important; }
html.phone-web .stage-status {
  justify-content: center;
  font-size: 12px !important;
  font-weight: 600 !important;
  max-width: calc(100vw - 210px);
  justify-self: center;
}
html.phone-web .stage-status #status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.phone-web .stage-actions {
  top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 10px) !important;
  left: calc(env(safe-area-inset-left, 0px) + 14px) !important;
}
html.phone-web .top-settings-action {
  right: calc(env(safe-area-inset-right, 0px) + 14px) !important;
}
/* smaller live preview on the phone so the gallery and settings get room */
html.phone-web #spectrumStudio#spectrumStudio:not(.stage-mode) .spectrum-studio-preview {
  height: 32vh !important;
  min-height: 0 !important;
  max-height: 32vh !important;
}
html.phone-web #spectrumStudio#spectrumStudio:not(.stage-mode) {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}
html.phone-web #spectrumStudio#spectrumStudio:not(.stage-mode) .spectrum-studio-preview-shell {
  height: auto !important;
}
/* settings sheets fill the whole phone screen */
html.phone-web .control-panel,
html.phone-web .audio-effects-panel {
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  border-radius: 0 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 8px) !important;
  padding-bottom: calc(var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px) !important;
  box-sizing: border-box !important;
}

/* =====================================================================
   PRO GLASS THEME — every settings screen on iPhone
   Frosted panels over the blurred player, glass cards, gradient accents.
   ===================================================================== */
html.phone-web:root {
  --g-grad: linear-gradient(120deg, #4fe3ff 0%, #8a63ff 52%, #ff5fd2 100%);
  --g-grad-soft: linear-gradient(120deg, rgba(79, 227, 255, 0.22), rgba(138, 99, 255, 0.22) 52%, rgba(255, 95, 210, 0.22));
  --g-accent: #8a63ff;
  --g-accent-2: #4fe3ff;
  --g-panel: rgba(8, 10, 20, 0.58);
  --g-card: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0.06) 100%);
  --g-card-solid: rgba(255, 255, 255, 0.07);
  --g-line: rgba(255, 255, 255, 0.075);
  --g-border: rgba(255, 255, 255, 0.13);
  --g-hi: rgba(255, 255, 255, 0.18);
  --g-text: #ffffff;
  --g-sub: rgba(235, 238, 255, 0.62);
  --g-field: rgba(255, 255, 255, 0.08);
  --g-track: rgba(255, 255, 255, 0.12);
  --g-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
html.phone-web:root[data-theme="light"] {
  --g-panel: rgba(240, 243, 255, 0.62);
  --g-card: linear-gradient(165deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  --g-card-solid: rgba(255, 255, 255, 0.7);
  --g-line: rgba(20, 24, 60, 0.08);
  --g-border: rgba(255, 255, 255, 0.9);
  --g-hi: rgba(255, 255, 255, 1);
  --g-text: #0d1022;
  --g-sub: rgba(30, 34, 70, 0.58);
  --g-field: rgba(20, 24, 60, 0.06);
  --g-track: rgba(20, 24, 60, 0.12);
  --g-shadow: 0 14px 34px rgba(40, 50, 110, 0.16);
}

/* desktop-only sections never show on the phone */
html.phone-web .settings-section:has(#widgetWidth),
html.phone-web .settings-section:has(#autoWidgetQuickToggle),
html.phone-web .settings-section:has([data-mirror-of="autoWidgetEnabled"]),
html.phone-web .settings-section:has(#autoWidgetEnabled) {
  display: none !important;
}

/* ---- the panels themselves: frosted glass over the live player ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel),
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio {
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(79, 227, 255, 0.16), transparent 60%),
    radial-gradient(110% 60% at 100% 100%, rgba(255, 95, 210, 0.14), transparent 60%),
    var(--g-panel) !important;
  -webkit-backdrop-filter: blur(38px) saturate(170%) !important;
  backdrop-filter: blur(38px) saturate(170%) !important;
  color: var(--g-text) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: var(--ios-font) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio {
  padding-top: calc(var(--phone-safe-top, env(safe-area-inset-top, 0px)) + 4px) !important;
  padding-bottom: var(--phone-safe-bottom, env(safe-area-inset-bottom, 0px)) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio :is(.spectrum-studio-scroll, .spectrum-studio-preview-shell, .spectrum-studio-head, .spectrum-topic-panel, .studio-page) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(h2, h3, h4, p, span, strong, label) {
  text-shadow: none !important;
}

/* headers */
html.phone-web:root:not(.widget-mode) :is(.control-panel .settings-head, .audio-effects-panel .audio-effects-head) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 6px 2px 14px !important;
  align-items: center !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel .settings-head h2, .audio-effects-panel h2, #spectrumStudio .spectrum-studio-title h2) {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: var(--g-text) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio .spectrum-studio-title h2 {
  background: linear-gradient(100deg, var(--g-text) 0%, var(--g-text) 45%, #b9a6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel .settings-head p, #spectrumStudio .spectrum-studio-title p) {
  color: var(--g-sub) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-studio-kicker {
  background: var(--g-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
}

/* round glass header buttons (close, settings) */
html.phone-web:root:not(.widget-mode) :is(.control-panel #closeSettingsButton, .audio-effects-panel .audio-effects-head button.icon-button),
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-studio-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: var(--g-field) !important;
  border: 0.5px solid var(--g-border) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  color: var(--g-text) !important;
  font-size: 0 !important;
  display: grid !important;
  place-items: center !important;
}
html.phone-web:root:not(.widget-mode) .control-panel #closeSettingsButton::before {
  content: "✕";
  font-size: 16px;
  font-weight: 700;
  color: var(--g-text);
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-studio-icon::before {
  background: var(--g-text) !important;
  width: 18px !important;
  height: 18px !important;
}

/* ---- section cards ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(.settings-section, .effect-section, .studio-engine-section, .eq-mixer) {
  position: relative !important;
  background: var(--g-card) !important;
  border: 0.5px solid var(--g-border) !important;
  border-radius: 24px !important;
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow) !important;
  padding: 14px 16px 6px !important;
  margin: 0 0 16px !important;
  overflow: hidden !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(.settings-section, .effect-section) > :is(h3, h4):first-child {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 6px !important;
  padding: 0 0 10px !important;
  border-bottom: 0.5px solid var(--g-line) !important;
  color: var(--g-text) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(.settings-section, .effect-section) > :is(h3, h4):first-child::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--g-grad);
  box-shadow: 0 4px 12px rgba(138, 99, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(.settings-note, .studio-audio-hint, .settings-section > p, .liquid-settings-head p) {
  color: var(--g-sub) !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* rows */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) .settings-section :is(.control-line, label.range, .mirror-choice-line) {
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--g-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-text) !important;
  font-size: 15px !important;
  font-weight: 560 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) .settings-section > :last-child,
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) .settings-section > :is(.control-line, label.range):nth-last-child(1 of :not([hidden])) {
  border-bottom: 0 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section .checkbox-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
/* slider rows: name + value pill on one line, slider underneath */
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section label.range {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  row-gap: 8px !important;
  column-gap: 10px !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section label.range > span:first-child {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section label.range > input[type="range"] {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
  margin: 0 !important;
}
html.phone-web .glass-val {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--g-field);
  border: 0.5px solid var(--g-border);
  color: var(--g-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}

/* ---- sliders: glowing gradient fill + glass thumb ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character) input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character) input[type="range"]::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  background:
    linear-gradient(90deg, #4fe3ff, #8a63ff 55%, #ff5fd2) 0 0 / var(--ios-pct, 50%) 100% no-repeat,
    var(--g-track) !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .spectrum-studio, .studio-engine-section, .studio-character) input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 26px !important;
  height: 26px !important;
  margin-top: -10px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: radial-gradient(circle at 50% 50%, #ffffff 0 5px, transparent 5.5px), linear-gradient(160deg, #ffffff, #e6e9ff) !important;
  box-shadow: 0 0 0 4px rgba(138, 99, 255, 0.28), 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 18px rgba(138, 99, 255, 0.45) !important;
}

/* ---- switches: glass track, gradient + glow when on ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  flex: 0 0 auto !important;
  width: 52px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 0.5px solid var(--g-border) !important;
  background: var(--g-track) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: background 240ms ease, box-shadow 240ms ease !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]::after {
  top: 2px !important;
  left: 2px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 50% !important;
  background: linear-gradient(160deg, #ffffff, #e9ebff) !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3) !important;
  transition: transform 260ms cubic-bezier(.3, 1.4, .5, 1) !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]:checked {
  background: var(--g-grad) !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(138, 99, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, .spectrum-studio, .effect-switch, .studio-engine-section) input[type="checkbox"]:checked::after {
  transform: translateX(20px) !important;
  background: #ffffff !important;
}

/* ---- dropdowns and text fields: glass pills ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) select {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 40px !important;
  padding: 0 38px 0 14px !important;
  border-radius: 14px !important;
  border: 0.5px solid var(--g-border) !important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a99bff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 12px center / 16px no-repeat,
    var(--g-field) !important;
  box-shadow: inset 0 1px 0 var(--g-hi) !important;
  color: var(--g-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(input[type="text"], input[type="number"], input[type="search"], textarea) {
  min-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  border: 0.5px solid var(--g-border) !important;
  background: var(--g-field) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  color: var(--g-text) !important;
  font-size: 15px !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section .control-line:has(> select) {
  display: grid !important;
  gap: 8px !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section .control-line > select {
  width: 100% !important;
}

/* colour pickers: round glowing swatches */
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) input[type="color"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  overflow: hidden !important;
  cursor: pointer;
}
html.phone-web input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
html.phone-web input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section .control-line:has(> input[type="color"]) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ---- buttons ---- */
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) .settings-section button:not(.spectrum-card):not(.image-library-card):not(.image-library-remove):not(.mirror-choice-buttons button):not(.effect-stepper),
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio :is(.spectrum-preview-expand, .spectrum-gallery-tools button, .design-actions button, .dynamic-orb-actions button) {
  min-height: 42px !important;
  padding: 0 16px !important;
  border-radius: 14px !important;
  border: 0.5px solid var(--g-border) !important;
  background: var(--g-field) !important;
  box-shadow: inset 0 1px 0 var(--g-hi) !important;
  color: var(--g-text) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section :is(#openSpectrumStudioFromSettings, button.primary, .settings-actions button:first-child) {
  background: var(--g-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(138, 99, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-section :is(button.danger, .lyrics-style-reset) {
  background: rgba(255, 69, 96, 0.14) !important;
  border-color: rgba(255, 99, 120, 0.4) !important;
  color: #ff7a8f !important;
}
html.phone-web:root:not(.widget-mode) .settings-section button:active { transform: scale(0.97); }

/* segmented choices (spin direction etc.) */
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .mirror-choice-line {
  display: grid !important;
  gap: 8px !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .mirror-choice-buttons {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 1fr !important;
  padding: 3px !important;
  gap: 3px !important;
  border-radius: 14px !important;
  background: var(--g-field) !important;
  border: 0.5px solid var(--g-border) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .mirror-choice-buttons button {
  min-height: 34px !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-sub) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .mirror-choice-buttons button.active {
  background: var(--g-grad) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(138, 99, 255, 0.45) !important;
}

/* ---- Spectrum Studio specifics ---- */
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-studio-preview {
  border-radius: 26px !important;
  border: 0.5px solid var(--g-border) !important;
  background: radial-gradient(circle at 50% 55%, rgba(60, 50, 120, 0.35), rgba(0, 0, 0, 0.55) 70%) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 16px 40px rgba(0, 0, 0, 0.4) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-preview-copy span#spectrumPreviewSlotLabel {
  color: var(--g-sub) !important;
  letter-spacing: 0.14em !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-preview-expand {
  min-height: 30px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-preview-status {
  border-radius: 999px !important;
  border: 0.5px solid var(--g-border) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  box-shadow: none !important;
  color: var(--g-text) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-theme-picker select {
  min-height: 40px !important;
  border-radius: 999px !important;
}
/* topic tabs: glass scroller, gradient active pill */
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-topic-nav {
  display: flex !important;
  gap: 8px !important;
  padding: 4px !important;
  margin: 4px 0 10px !important;
  border-radius: 999px !important;
  background: var(--g-field) !important;
  border: 0.5px solid var(--g-border) !important;
  box-shadow: inset 0 1px 0 var(--g-hi) !important;
  overflow-x: auto !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-topic-nav button {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-sub) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-topic-nav button.active {
  background: var(--g-grad) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(138, 99, 255, 0.5) !important;
}
/* gallery cards */
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-card {
  background: var(--g-card) !important;
  border: 0.5px solid var(--g-border) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 var(--g-hi), 0 10px 26px rgba(0, 0, 0, 0.3) !important;
  outline: 0 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-card:is(.active, [aria-pressed="true"]) {
  border: 0 !important;
  box-shadow: 0 0 0 2px #8a63ff, 0 0 24px rgba(138, 99, 255, 0.55), inset 0 1px 0 var(--g-hi) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-card-copy strong {
  color: var(--g-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-card-copy span {
  color: var(--g-sub) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .liquid-card-actions button {
  min-height: 36px !important;
  border-radius: 12px !important;
  border: 0.5px solid rgba(138, 99, 255, 0.45) !important;
  background: var(--g-grad-soft) !important;
  box-shadow: inset 0 1px 0 var(--g-hi) !important;
  color: var(--g-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .liquid-card-actions button.in-use {
  background: var(--g-grad) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(138, 99, 255, 0.5) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .image-library-card {
  border-radius: 18px !important;
  border: 0.5px solid var(--g-border) !important;
  background: var(--g-card) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .image-library-card.active {
  box-shadow: 0 0 0 2px #8a63ff, 0 0 22px rgba(138, 99, 255, 0.5) !important;
}
/* settings two-column layouts become one clean column */
html.phone-web #spectrumStudio .spectrum-settings-columns {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  padding: 10px 0 !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, #spectrumStudio) .settings-actions.three {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* ---- Equalizer / audio effects panel ---- */
html.phone-web:root:not(.widget-mode) .audio-effects-panel :is(.studio-tabs) {
  padding: 4px !important;
  border-radius: 999px !important;
  background: var(--g-field) !important;
  border: 0.5px solid var(--g-border) !important;
  box-shadow: none !important;
}
html.phone-web:root:not(.widget-mode) .audio-effects-panel .studio-tabs button {
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--g-sub) !important;
  font-weight: 700 !important;
}
html.phone-web:root:not(.widget-mode) .audio-effects-panel .studio-tabs button.active {
  background: var(--g-grad) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(138, 99, 255, 0.45) !important;
}
html.phone-web:root:not(.widget-mode) .audio-effects-panel .effect-stepper {
  border-radius: 12px !important;
  border: 0.5px solid var(--g-border) !important;
  background: var(--g-field) !important;
  box-shadow: inset 0 1px 0 var(--g-hi) !important;
  color: var(--g-text) !important;
}
html.phone-web:root:not(.widget-mode) .audio-effects-panel .effect-switch {
  border-radius: 999px !important;
  background: var(--g-field) !important;
  border: 0.5px solid var(--g-border) !important;
  box-shadow: none !important;
  color: var(--g-text) !important;
}
html.phone-web:root:not(.widget-mode) :is(.control-panel, .audio-effects-panel, #spectrumStudio) :is(.settings-section, .effect-section, .studio-engine-section, .eq-mixer) {
  flex-shrink: 0 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
html.phone-web:root:not(.widget-mode) .control-panel #closeSettingsButton {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-preview-expand { white-space: nowrap !important; }
html.phone-web:root:not(.widget-mode) #spectrumStudio#spectrumStudio .spectrum-preview-copy strong { font-size: 15px !important; font-weight: 750 !important; }