:root, [data-theme="dark"]{
  --bg: #080b14;
  --bg-2: #0d1220;
  --bg-radial: #16203a;
  --panel: rgba(255,255,255,0.045);
  --panel-border: rgba(255,255,255,0.08);
  --panel-strong: rgba(255,255,255,0.08);
  --cyan: #34e0d8;
  --violet: #9b6bff;
  --pink: #ff5fa8;
  --text: #eef1fb;
  --text-dim: #8f97b3;
  --text-dimmer: #5c6485;
  --danger: #ff6b6b;
  --nav-surface: rgba(10,14,26,0.88);
  --shadow-color: rgba(0,0,0,0.4);
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

[data-theme="light"]{
  --bg: #eef0f8;
  --bg-2: #ffffff;
  --bg-radial: #ffffff;
  --panel: rgba(20,25,50,0.045);
  --panel-border: rgba(20,25,50,0.09);
  --panel-strong: rgba(20,25,50,0.07);
  --cyan: #0eb8ad;
  --violet: #7c4dff;
  --pink: #e1408f;
  --text: #161a2c;
  --text-dim: #5b6180;
  --text-dimmer: #8790ac;
  --danger: #d6395a;
  --nav-surface: rgba(255,255,255,0.88);
  --shadow-color: rgba(30,30,60,0.12);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(120% 90% at 50% -10%, var(--bg-radial) 0%, var(--bg) 55%);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  transition: background-color .3s ease, color .3s ease;
}

button{font-family:inherit;}
input{font-family:inherit;}

.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  padding-bottom: calc(74px + var(--safe-bottom));
  position:relative;
}

/* ---------- topbar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: calc(18px + var(--safe-top)) 20px 8px;
}
.topbar--stack{ justify-content:center; padding-top: calc(22px + var(--safe-top)); }
.topbar__brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:0.01em;
  background: linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.topbar__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
}
.topbar__actions{ display:flex; gap:8px; }
.icon-btn{
  width:38px;height:38px;
  border-radius:12px;
  border:1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.icon-btn:active{ background: rgba(255,255,255,0.1); }
.text-btn{
  border:none;background:none;color:var(--cyan);
  font-weight:600;font-size:0.92rem;cursor:pointer;padding:6px 4px;
}

/* ---------- screens ---------- */
.screen{ display:none; padding: 4px 20px 20px; animation: fadeIn .22s ease; }
.screen.active{ display:block; }
.screen--eq{ display:none; }
.screen--eq.active{ display:block; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* ============ RECEIVER FACE (Radio screen) ============ */
:root, [data-theme="dark"]{
  --gold-1:#f2d9a0; --gold-2:#caa968; --gold-3:#9a7a3f; --gold-4:#6b501f;
  --lcd-bg:#0b0f0a; --lcd-text:#ffb833; --lcd-glow: rgba(255,184,51,0.55);
  --panel-metal-1:#2a2e38; --panel-metal-2:#14161c;
}
[data-theme="light"]{
  --gold-1:#f4e6c4; --gold-2:#d9c393; --gold-3:#b39a63; --gold-4:#8a7345;
  --lcd-bg:#0b0f0a; --lcd-text:#ffb833; --lcd-glow: rgba(255,184,51,0.5);
  --panel-metal-1:#454955; --panel-metal-2:#20232b;
}

.receiver{ display:flex; flex-direction:column; align-items:center; padding-top:8px; }

.receiver__plate{
  width:100%; border-radius:18px; padding:18px 14px 14px;
  background:
    repeating-linear-gradient(100deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px),
    linear-gradient(160deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-3) 72%, var(--gold-4) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -10px 22px rgba(0,0,0,0.35) inset,
    0 18px 40px -16px rgba(0,0,0,0.55);
  position:relative;
}
.receiver.is-off .receiver__plate{ filter: grayscale(0.55) brightness(0.55); }
.receiver__meters{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.receiver__nameplate{
  text-align:center; margin-top:10px; font-family:var(--font-display);
  font-size:0.58rem; letter-spacing:0.14em; color: rgba(40,30,10,0.55); font-weight:600;
}

/* ---- VU meters ---- */
.vu-meter{ position:relative; width:120px; height:70px; flex-shrink:0; overflow:hidden; }
.vu-meter__ch{
  position:absolute; left:6px; top:2px; font-family:var(--font-display);
  font-size:0.6rem; font-weight:700; color: rgba(40,30,10,0.5); letter-spacing:0.05em;
}
.vu-meter__face{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vu-meter__track{ stroke: rgba(20,15,5,0.28); }
.vu-meter__fill{
  stroke:#ffb833; filter: drop-shadow(0 0 3px rgba(255,184,51,0.8));
  stroke-dasharray:198.1; stroke-dashoffset:198.1; transition: stroke-dashoffset .09s linear;
}
.vu-meter__ticks line{ stroke: rgba(30,22,8,0.4); }
.vu-meter__ticks line.vu-meter__tick--peak{ stroke:#c0332f; }
.vu-meter__needle{
  stroke:#2a2018; transition: transform .09s linear;
}
.receiver.is-off .vu-meter__needle{ transition: transform .4s ease; }

/* ---- center display: logo badge + LCD ---- */
.receiver__center{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:0; padding:0 6px; }
.receiver__badge{
  width:38px; height:38px; border-radius:10px; position:relative; flex-shrink:0;
  background: var(--lcd-bg); box-shadow: 0 2px 6px rgba(0,0,0,0.5) inset, 0 1px 0 rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
}
.receiver__logo{ width:26px; height:26px; object-fit:contain; border-radius:6px; }
.receiver__logo-fallback{
  font-family:var(--font-display); font-weight:700; font-size:0.72rem; color: var(--lcd-text);
  text-shadow: 0 0 6px var(--lcd-glow);
}

.lcd{
  width:100%; max-width:210px; border-radius:8px; padding:6px 10px 7px;
  background: var(--lcd-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.55) inset, 0 1px 0 rgba(255,255,255,0.3);
  text-align:center; overflow:hidden;
}
.lcd__clock{
  font-family: "Courier New", monospace; font-weight:700; font-size:0.68rem;
  color: var(--lcd-text); opacity:0.85; letter-spacing:0.06em;
  text-shadow: 0 0 5px var(--lcd-glow);
}
.lcd__station{
  font-family: "Courier New", monospace; font-weight:700; font-size:0.92rem;
  color: var(--lcd-text); text-shadow: 0 0 7px var(--lcd-glow);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.lcd__sub{
  font-family: "Courier New", monospace; font-size:0.62rem; color: var(--lcd-text); opacity:0.7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;
}
.receiver.is-off .lcd__station,
.receiver.is-off .lcd__sub,
.receiver.is-off .lcd__clock{ opacity:0.25; text-shadow:none; }

/* ---- controls row: power / knob / sleep ---- */
.receiver__controls{
  display:flex; align-items:center; justify-content:center; gap:40px;
  width:100%; margin-top:20px;
}
.power-switch{
  width:38px; height:38px; border-radius:50%; flex-shrink:0; cursor:pointer;
  border: none; color: var(--text-dim);
  background: radial-gradient(circle at 35% 30%, #3a3f4c, #14161c 70%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
  display:flex; align-items:center; justify-content:center; position:relative;
  margin-bottom:2px;
}
.power-switch__led{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#4a1414;
  box-shadow:none; transition: all .2s ease;
}
.power-switch[aria-pressed="true"] .power-switch__led{
  background:#ff5f5f; box-shadow: 0 0 6px 1px rgba(255,95,95,0.9);
}
.power-switch[aria-pressed="true"]{ color:#eee; }

.icon-btn--panel{
  margin-bottom:2px;
  background: radial-gradient(circle at 35% 30%, #3a3f4c, #14161c 70%);
  border:none; box-shadow: 0 3px 8px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset;
  color: var(--text-dim);
}
.icon-btn--panel.is-active{ color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 3px 8px rgba(0,0,0,0.5); }

/* ---- transport row ---- */
.transport{ display:flex; align-items:center; justify-content:center; gap:14px; width:100%; margin-top:22px; }
.transport__side{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:12px;
  color:var(--text); opacity:0.85; cursor:pointer;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.transport__side.is-fav{ color: var(--pink); opacity:1; }
.transport__side.is-active{ color: var(--cyan); opacity:1; }
.transport__main{
  width:60px; height:60px; border-radius:16px; border:none; cursor:pointer;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color:#0a0e1a; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -8px rgba(155,107,255,0.6);
}
.transport__main:active{ transform: scale(0.96); }
.sleep-status{ margin-top:14px; font-size:0.78rem; color:var(--cyan); min-height:1em; text-align:center; }


/* ---------- equalizer: hifi graphic-EQ styling ---------- */
.eq-panel{
  border-radius:16px; padding:16px 14px 6px; margin-bottom:16px;
  background: linear-gradient(160deg, var(--panel-metal-1), var(--panel-metal-2) 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -8px 18px rgba(0,0,0,0.35) inset, 0 14px 30px -16px var(--shadow-color);
}

/* Real spectrum display, driven only by actual analyser data — no random
   flicker. Sits still until audio is actually playing through the graph.
   Styled as a classic green phosphor LED bargraph (segmented, brighter near
   the top of each lit column), like a hifi spectrum analyzer readout. */
.eq-vis{
  height:64px; margin-bottom:16px; border-radius:8px;
  background: var(--lcd-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.5) inset;
  display:flex; align-items:flex-end; gap:2px; padding:6px 6px;
}
@property --lvl {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.eq-vis span{
  --lvl: 6%;
  flex:1; border-radius:1px; height:100%;
  background:
    repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.72) 3px, rgba(0,0,0,0.72) 4px),
    linear-gradient(to top, transparent 0%, transparent var(--lvl), rgba(6,10,8,0.86) var(--lvl), rgba(6,10,8,0.86) 100%),
    linear-gradient(to top, #4a7d59 0%, #4a7d59 68%, #ab8f4a 68%, #ab8f4a 87%, #9c4a44 87%, #9c4a44 100%);
}
.eq-note{
  font-size:0.8rem; color:var(--text-dim); background:var(--panel);
  border:1px solid var(--panel-border); border-radius:10px; padding:10px 12px; margin: 0 0 16px;
}
.eq-presets{ display:flex; gap:8px; margin-bottom:22px; overflow-x:auto; }
.preset{
  flex-shrink:0; padding:9px 16px; border-radius:8px; border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04); color:var(--text-dim); font-size:0.86rem; font-weight:600; cursor:pointer;
}
.preset.active{ background: #1c2b22; color:#8dffb8; border-color: rgba(87,255,160,0.4); box-shadow: 0 0 0 1px rgba(87,255,160,0.15) inset; }

.eq-sliders{ display:flex; justify-content:space-between; padding:6px 2px 10px; }
.eq-band{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.eq-band__freq{ font-size:0.68rem; color:var(--text-dim); }
.eq-band__db{ font-size:0.66rem; color:var(--text-dimmer); white-space:nowrap; font-variant-numeric:tabular-nums; }

/* Segmented LED-ladder fader, like the graphic EQs on classic hifi gear
   (green phosphor level display + a plain, unlit fader cap — no colour).
   Built with pointer events in app.js (no native <input>, fully reliable
   on touch). The fill animates with a slow "deceleration" ease when the
   value drops — like a level meter settling back down — and snaps quickly
   when it rises or while actively dragged. */
.eq-slider{
  position:relative; width:28px; height:168px; border-radius:4px;
  background: var(--lcd-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6) inset, 0 1px 0 rgba(255,255,255,0.06);
  overflow:hidden; cursor:pointer; touch-action:none;
}
.eq-slider__zero{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background: rgba(255,255,255,0.16); z-index:1;
}
.eq-slider__fill{
  position:absolute; left:1px; right:1px; top:1px; bottom:1px;
  --lvl: 50%;
  background:
    repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.72) 3px, rgba(0,0,0,0.72) 4px),
    linear-gradient(to top, transparent 0%, transparent var(--lvl), rgba(6,10,8,0.86) var(--lvl), rgba(6,10,8,0.86) 100%),
    linear-gradient(to top, #4a7d59 0%, #4a7d59 68%, #ab8f4a 68%, #ab8f4a 87%, #9c4a44 87%, #9c4a44 100%);
  transition: --lvl .7s cubic-bezier(.22, 1, .36, 1);
}
.eq-slider__fill.eq-slider__fill--rising{ transition: --lvl .16s cubic-bezier(.4,0,.2,1); }
.eq-slider__fill.eq-slider__fill--dragging{ transition: none; }
.eq-slider__handle{
  position:absolute; left:1px; right:1px; height:9px; z-index:2;
  margin-bottom:-4px; border-radius:2px;
  background: linear-gradient(180deg, #6a6f7a, #2a2d33 55%, #1a1c20);
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
  transition: bottom .7s cubic-bezier(.22, 1, .36, 1);
}
.eq-slider__handle::before{
  content:""; position:absolute; left:3px; right:3px; top:50%; height:1px;
  background: rgba(255,255,255,0.35); transform:translateY(-50%);
}
.eq-slider__handle::after{
  content:""; position:absolute; right:-4px; top:50%; width:3px; height:3px;
  border-radius:50%; background:#ff3b30; transform:translateY(-50%);
  box-shadow:0 0 3px rgba(255,59,48,0.85);
}
.eq-slider__handle.eq-slider__handle--rising{ transition: bottom .16s cubic-bezier(.4,0,.2,1); }
.eq-slider__handle.eq-slider__handle--dragging{ transition: none; }



.eq-toggles{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 2px; font-size:0.92rem; cursor:pointer; position:relative;
}
.toggle-row input[type="checkbox"]{ position:absolute; opacity:0; width:0; height:0; }
.toggle-switch{
  width:42px; height:24px; border-radius:14px; background:rgba(255,255,255,0.12);
  position:relative; transition: background .2s;
}
.toggle-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition: transform .2s;
}
.toggle-row input:checked + .toggle-switch{ background: linear-gradient(90deg,var(--cyan),var(--violet)); }
.toggle-row input:checked + .toggle-switch::after{ transform: translateX(18px); }

/* ---------- browse / search ---------- */
.search-wrap{ position:relative; margin: 6px 0 14px; }
.search-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-dimmer); }
#searchInput{
  width:100%; padding:12px 14px 12px 40px; border-radius:14px;
  border:1px solid var(--panel-border); background:var(--panel); color:var(--text); font-size:0.94rem;
}
#searchInput::placeholder{ color: var(--text-dimmer); }
#searchInput:focus{ outline:none; border-color: var(--cyan); }

.genre-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; }
.chip{
  flex-shrink:0; padding:8px 15px; border-radius:20px; border:1px solid var(--panel-border);
  background:var(--panel); color:var(--text-dim); font-size:0.83rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.chip.active{ background:linear-gradient(90deg,var(--cyan),var(--violet)); color:#0a0e1a; border-color:transparent; }

.station-list{ display:flex; flex-direction:column; gap:10px; }
.station-row{
  display:flex; align-items:center; gap:12px; padding:10px; border-radius:16px;
  background:var(--panel); border:1px solid var(--panel-border); cursor:pointer;
}
.station-row:active{ background: rgba(255,255,255,0.08); }
.station-row.is-playing{ border-color: rgba(52,224,216,0.5); }
.station-row__logo{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff;
  object-fit:contain; background:var(--bg-2);
}
.station-row__meta{ flex:1; min-width:0; }
.station-row__meta h3{ margin:0; font-size:0.94rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.station-row__meta p{ margin:2px 0 0; font-size:0.78rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.station-row__fav{ background:none; border:none; color:var(--text-dimmer); flex-shrink:0; padding:6px; cursor:pointer; }
.station-row__fav.active{ color:var(--pink); }
.station-row__play{ background:none; border:none; color:var(--text-dim); flex-shrink:0; padding:6px; cursor:pointer; }
.station-row.is-playing .station-row__play{ color:var(--cyan); }

.empty-state{ color:var(--text-dim); font-size:0.9rem; text-align:center; margin-top:40px; line-height:1.5; }

/* ---------- settings ---------- */
.settings-list{ display:flex; flex-direction:column; }
.settings-row{
  border-bottom:1px solid var(--panel-border);
}
.settings-row--static{ display:flex; justify-content:space-between; padding:14px 2px; color:var(--text-dim); font-size:0.92rem; }
.settings-value{ color:var(--text-dimmer); }
.settings-row--action{
  text-align:left; background:none; border:none; border-bottom:1px solid var(--panel-border);
  color:var(--danger); font-size:0.92rem; padding:16px 2px; cursor:pointer;
}

/* ---------- bottom nav ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  max-width:480px; margin:0 auto;
  display:flex; justify-content:space-around;
  background: var(--nav-surface); backdrop-filter: blur(16px);
  border-top:1px solid var(--panel-border);
  padding: 8px 6px calc(8px + var(--safe-bottom));
}
.nav-btn{
  background:none; border:none; color:var(--text-dimmer); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:0.68rem; padding:4px 10px; flex:1;
}
.nav-btn.active{ color:var(--cyan); }

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom: calc(84px + var(--safe-bottom));
  transform: translate(-50%, 10px); max-width:88%;
  background: var(--bg-2); border:1px solid var(--panel-border); color:var(--text); box-shadow: 0 10px 30px -10px var(--shadow-color);
  padding:11px 18px; border-radius:12px; font-size:0.85rem;
  opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
  z-index:30; text-align:center;
}
.toast.show{ opacity:1; transform: translate(-50%, 0); }

/* ---------- lock screen ---------- */
.lock-screen{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 90% at 50% -10%, var(--bg-radial) 0%, var(--bg) 55%);
  padding: 24px;
}
.lock-card{
  width:100%; max-width:320px; display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.lock-icon{
  width:64px; height:64px; border-radius:20px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background: linear-gradient(145deg, var(--violet), var(--pink) 55%, var(--cyan));
  box-shadow: 0 20px 45px -16px rgba(155,107,255,0.55);
}
.lock-brand{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  background: linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:4px;
}
.lock-subtitle{ color:var(--text-dim); font-size:0.88rem; margin:0 0 26px; }

.lock-dots{ display:flex; gap:14px; margin-bottom:10px; }
.lock-dots span{
  width:13px; height:13px; border-radius:50%; border:1.5px solid var(--panel-border);
  background: var(--panel); transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.lock-dots span.filled{
  background: linear-gradient(135deg,var(--cyan),var(--violet)); border-color: transparent;
  transform: scale(1.12);
}
.lock-dots.shake{ animation: shakeDots .42s ease; }
@keyframes shakeDots{
  10%,90%{ transform: translateX(-1px); }
  20%,80%{ transform: translateX(3px); }
  30%,50%,70%{ transform: translateX(-7px); }
  40%,60%{ transform: translateX(7px); }
}

.lock-error{ color:var(--danger); font-size:0.82rem; min-height:1.2em; margin: 4px 0 18px; }

.lock-keypad{
  display:grid; grid-template-columns: repeat(3, 68px); gap:14px; justify-content:center;
}
.lock-keypad button{
  width:68px; height:68px; border-radius:50%; border:1px solid var(--panel-border);
  background: var(--panel); color:var(--text); font-family:var(--font-display);
  font-size:1.3rem; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lock-keypad button:active{
  background: linear-gradient(135deg,var(--cyan),var(--violet)); color:#0a0e1a; border-color:transparent;
  transform: scale(0.96);
}
.lock-keypad__spacer{ width:68px; height:68px; }
.lock-keypad__back{ color:var(--text-dim); }

.lock-screen.unlocking{ animation: lockFadeOut .45s ease forwards; }
@keyframes lockFadeOut{ to{ opacity:0; transform: scale(0.97); pointer-events:none; } }


::selection{ background: var(--violet); color:#fff; }
@media (prefers-reduced-motion: reduce){
  .artwork.is-playing, .live-bars.playing span{ animation:none; }
}