:root {
  color-scheme: dark;
  --bg: #121216; --surface: #23232b; --surface-end: #1b1b21; --raised: #292631;
  --line: #3a3742; --text: #f7f6fc; --muted: #a6a4b5; --purple: #a38bea;
  --accent: #8b6fe0; --focus: #c6b6ff; --play-start: #895ed8; --play-end: #6f62d7;
  --on-accent: #f7f3ff; --accent-soft: #8b6fe020; --accent-border: #a38bea45;
  --highlight: #daceff; --edge: #ffffff0c; --nav: #202026; --thumb: #322c45;
  --glow: #24212f; --sheet: #292631; --sheet-end: #1b1a22; --toast: #36303f;
  --app-height: 100dvh;
  --app-top: 0px; --safe-top: env(safe-area-inset-top,0px); --safe-bottom: env(safe-area-inset-bottom,0px);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px;
}
:root[data-theme="crimson"] { --bg:#130f11; --surface:#251b1e; --surface-end:#1a1316; --raised:#312126; --line:#51373f; --muted:#bca7af; --purple:#f28b96; --accent:#cb4b64; --focus:#ffc5ce; --play-start:#c24560; --play-end:#a32c48; --accent-soft:#cb4b6424; --accent-border:#f28b9650; --highlight:#ffd4da; --nav:#23171c; --thumb:#44242e; --glow:#351d27; --sheet:#312126; --sheet-end:#21161b; --toast:#43242f; }
:root[data-theme="ocean"] { --bg:#0c1520; --surface:#1c2c3e; --surface-end:#111b28; --raised:#20364c; --line:#35516c; --muted:#a5b6c9; --purple:#80c3ff; --accent:#368cd5; --focus:#b6dfff; --play-start:#287fc8; --play-end:#1b5e9f; --accent-soft:#368cd525; --accent-border:#80c3ff50; --highlight:#b9e2ff; --nav:#152638; --thumb:#243f5c; --glow:#20364c; --sheet:#20364c; --sheet-end:#142333; --toast:#24445f; }
:root[data-theme="emerald"] { --bg:#101913; --surface:#213229; --surface-end:#121f1b; --raised:#203b30; --line:#365648; --muted:#a4bcb0; --purple:#79d3ac; --accent:#389b71; --focus:#b5f2d4; --play-start:#318b64; --play-end:#206848; --accent-soft:#389b7125; --accent-border:#79d3ac50; --highlight:#b5eed3; --nav:#1a2b23; --thumb:#264c38; --glow:#213c2d; --sheet:#203b30; --sheet-end:#15271f; --toast:#284e3a; }
:root[data-theme="amber"] { --bg:#17120f; --surface:#30261e; --surface-end:#211a13; --raised:#3b2b1d; --line:#594431; --muted:#c3b1a0; --purple:#efbd78; --accent:#c58b45; --focus:#ffe0b3; --play-start:#b87b32; --play-end:#8c571e; --accent-soft:#c58b4525; --accent-border:#efbd7850; --highlight:#ffe0b1; --nav:#2b2018; --thumb:#513920; --glow:#3b2b1d; --sheet:#3b2b1d; --sheet-end:#271e16; --toast:#503922; }
:root[data-theme="rose"] { --bg:#1b111a; --surface:#352632; --surface-end:#241822; --raised:#432c3e; --line:#5f4058; --muted:#c0aabc; --purple:#edabd7; --accent:#c271aa; --focus:#ffd6f0; --play-start:#b965a1; --play-end:#904476; --accent-soft:#c271aa25; --accent-border:#edabd750; --highlight:#fbd5ee; --nav:#30202d; --thumb:#593a4f; --glow:#432b3c; --sheet:#432c3e; --sheet-end:#2a1b27; --toast:#58334b; }
:root[data-theme="arctic"] { color-scheme:light; --bg:#e5eaf1; --surface:#f7f9fc; --surface-end:#e9edf4; --raised:#e2e8f1; --line:#bcc7d8; --text:#182334; --muted:#56667b; --purple:#42659b; --accent:#5478ad; --focus:#254777; --play-start:#5579ab; --play-end:#3f5e89; --accent-soft:#5478ad19; --accent-border:#5478ad65; --highlight:#2a4975; --edge:#263b5d15; --nav:#e8edf5; --thumb:#cfdaeb; --glow:#cdd8e7; --sheet:#f7f9fc; --sheet-end:#e9edf4; --toast:#314666; }
:root[data-theme="graphite"] { --bg:#111315; --surface:#262a2e; --surface-end:#191b1d; --raised:#303438; --line:#494f56; --muted:#aeb6bf; --purple:#c6cdd5; --accent:#9ba5b1; --focus:#eff3f9; --play-start:#66727f; --play-end:#424c57; --accent-soft:#9ba5b124; --accent-border:#c6cdd550; --highlight:#edf0f4; --nav:#212529; --thumb:#394047; --glow:#2b3239; --sheet:#303438; --sheet-end:#1e2226; --toast:#424a53; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
body { height:var(--app-height); background:radial-gradient(ellipse at 50% 40%,var(--glow),var(--bg) 65%); color:var(--text); display:grid; place-items:center; }
button,input { font:inherit; } button { cursor:pointer; color:inherit; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.35; cursor:default; }
button:focus-visible,input:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.icon-definitions { position:absolute; width:0; height:0; overflow:hidden; }
.app-shell { width:min(470px,calc(100% - 32px)); height:min(890px,calc(var(--app-height) - 48px)); min-height:0; background:linear-gradient(145deg,var(--surface),var(--surface-end) 65%); border-radius:30px; box-shadow:0 28px 90px #0007,0 0 0 1px var(--edge); overflow:hidden; position:relative; display:flex; flex-direction:column; }
.app-header { display:flex; flex-shrink:0; align-items:center; padding:22px 24px 15px; gap:10px; }
.header-heading { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.eyebrow { font-size:.6875rem; letter-spacing:.3em; font-weight:600; color:var(--highlight); display:block; }
.header-heading>span:last-child { font-size:1.2rem; font-weight:600; color:var(--text); }
.header-heading>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#app-name { font-size:1.125rem; line-height:1.2; font-weight:750; letter-spacing:-.025em; color:var(--text); }
#view-label { font-size:.8125rem; line-height:1.2; font-weight:500; color:var(--muted); }
.icon-button { border:0; padding:9px; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:none; color:var(--muted); border-radius:12px; position:relative; flex-shrink:0; }
.icon-button:hover { color:var(--text); background:var(--edge); }
.icon-button.active,.icon-button[aria-pressed=true] { color:var(--purple); }
#favorite-button[aria-pressed=true] svg { fill:var(--purple); }
.app-shell main { flex:1; min-height:0; overflow:hidden; }
.view { height:100%; padding:10px 31px 15px; min-height:0; display:flex; flex-direction:column; }
.player-view { overflow:hidden; }
.artwork-wrap { flex:1 1 0; min-height:0; display:grid; place-items:center; margin:0 0 clamp(12px,2.4dvh,26px); container-type:size; }
.art-frame { position:relative; width:min(100%,100cqh); max-width:380px; aspect-ratio:1; }
.album-art { width:100%; height:100%; border-radius:12px; border:1px solid var(--edge); box-shadow:0 25px 35px -10px #0008; background-color:var(--thumb); background-size:cover; background-position:center; }
.album-art { display:grid; place-items:center; }.album-art>svg { width:25%; height:25%; color:var(--muted); opacity:.45; }
.reference-art { background-image:url('./assets/reference.webp'); background-size:322.15% 214.02%; background-position:50% 24.08%; }
.art-badge { position:absolute; bottom:12px; left:12px; font-size:.625rem; letter-spacing:.16em; background:#15111fbf; color:#ddd2f3; padding:6px 8px; border:1px solid #ffffff13; border-radius:5px; backdrop-filter:blur(10px); }
.track-info { flex-shrink:0; min-width:0; }
.track-info h1 { margin:0 0 7px; font-size:1.8rem; font-weight:700; letter-spacing:-.045em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-info p { color:var(--muted); font-size:.98rem; margin:0; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.timeline { flex-shrink:0; margin-top:16px; }
input[type=range] { appearance:none; -webkit-appearance:none; background:transparent; cursor:pointer; margin:0; width:100%; height:24px; --progress:0%; }
input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:5px; background:linear-gradient(to right,var(--accent) 0,var(--purple) var(--progress),var(--line) var(--progress),var(--line) 100%); }
input[type=range]::-moz-range-track { height:4px; border-radius:5px; background:var(--line); }
input[type=range]::-moz-range-progress { background:var(--purple); height:4px; border-radius:5px; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; border-radius:50%; border:3px solid var(--purple); background:var(--surface-end); margin-top:-4.5px; }
input[type=range]::-moz-range-thumb { width:8px; height:8px; border:3px solid var(--purple); border-radius:50%; background:var(--surface-end); }
.time-labels { display:flex; justify-content:space-between; color:var(--muted); font-size:.8125rem; font-variant-numeric:tabular-nums; }
.transport { flex-shrink:0; display:flex; justify-content:space-between; align-items:center; margin:8px 0; gap:8px; }
.transport svg { width:26px; height:26px; }.transport .skip-button svg { width:30px; height:30px; }
.play-button { background:linear-gradient(130deg,var(--play-start),var(--play-end)); width:70px; height:70px; flex-shrink:0; border:1px solid var(--accent-border); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px #0003; color:var(--on-accent); transition:transform .15s; }
.play-button:hover { transform:scale(1.04); }.play-button:active { transform:scale(.96); }.play-button svg { width:31px; height:31px; }
.play-button svg:has(use[href='#i-play']) { margin-left:3px; }
#repeat-one { position:absolute; left:19px; top:17px; font-size:10px; font-weight:700; background:var(--surface); padding:0 2px; }
.mode-button[aria-pressed=true]:after { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:var(--purple); bottom:2px; }
.secondary-controls { flex-shrink:0; display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.volume-control { flex:1; min-width:0; display:flex; align-items:center; }.volume-control .icon-button { color:var(--purple); }
.volume-popover { position:fixed; z-index:30; display:flex; flex-direction:column; align-items:center; gap:10px; width:76px; padding:14px 12px 8px; border:1px solid var(--accent-border); border-radius:18px; background:linear-gradient(145deg,var(--sheet),var(--sheet-end)); box-shadow:0 15px 50px #0007; }
.volume-popover output { font-size:.8125rem; line-height:1.4; color:var(--highlight); font-weight:600; font-variant-numeric:tabular-nums; }
input.volume-slider { writing-mode:vertical-lr; direction:rtl; width:44px; height:min(160px,34dvh); touch-action:none; flex-shrink:0; }
input.volume-slider::-webkit-slider-runnable-track { width:6px; height:100%; border-radius:10px; background:linear-gradient(to top,var(--purple) 0,var(--purple) var(--progress),var(--line) var(--progress),var(--line) 100%); }
input.volume-slider::-webkit-slider-thumb { width:16px; height:16px; border:0; background:var(--purple); margin:0 0 0 -5px; box-shadow:0 0 0 4px var(--accent-soft); }
input.volume-slider::-moz-range-track { width:6px; height:100%; border-radius:10px; }input.volume-slider::-moz-range-progress { width:6px; background:var(--purple); }input.volume-slider::-moz-range-thumb { width:16px; height:16px; border:0; background:var(--purple); }
.eq-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:12px; }.eq-heading>strong { font-size:1rem; color:var(--highlight); font-weight:600; }
.eq-switch { display:flex; align-items:center; gap:9px; min-height:44px; cursor:pointer; color:var(--muted); font-size:.875rem; }.eq-switch input { width:20px; height:20px; accent-color:var(--accent); }
.eq-chart { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:7px; margin:0 0 22px; border:1px solid var(--edge); border-radius:14px; padding:14px 12px; background:var(--edge); }
.eq-band { display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }.eq-band small { font-size:.625rem; line-height:1.4; color:var(--muted); font-variant-numeric:tabular-nums; }.eq-band>small:first-child { color:var(--highlight); }
.eq-column { position:relative; display:block; height:80px; width:8px; border-radius:8px; background:var(--line); }.eq-column i { position:absolute; left:0; width:100%; border-radius:8px; background:var(--purple); }
.eq-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.eq-preset { display:flex; flex-direction:column; gap:5px; align-items:flex-start; padding:12px; min-width:0; border:1px solid var(--edge); border-radius:12px; text-align:left; background:var(--edge); }
.eq-preset strong { font-size:.875rem; font-weight:550; }.eq-preset small { font-size:.75rem; color:var(--muted); line-height:1.4; }.eq-preset[aria-pressed=true] { border-color:var(--accent-border); background:var(--accent-soft); }.eq-preset[aria-pressed=true] strong { color:var(--highlight); }
.import-prompt { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:7px; font-size:.8125rem; border:0; background:transparent; color:var(--muted); margin:3px auto 0; padding:8px; min-height:36px; }
.import-prompt svg { width:15px; height:15px; }
.bottom-nav { flex-shrink:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--nav); border-top:1px solid var(--edge); padding:10px 15px 12px; }
.bottom-nav button { min-width:0; min-height:48px; border:0; background:none; display:flex; justify-content:center; align-items:center; gap:7px; color:var(--muted); font-size:.875rem; position:relative; padding:6px 0 10px; white-space:normal; }
.bottom-nav button span { line-height:1.3; }.bottom-nav svg { width:19px; height:19px; }.bottom-nav .active { color:var(--text); font-weight:600; }
.bottom-nav .active:after { content:""; height:3px; background:var(--accent); border-radius:2px; width:65%; max-width:96px; position:absolute; bottom:1px; }
.library-view,.search-view { padding-top:19px; }
.folder-picker { position:fixed; left:-10000px; width:1px; height:1px; opacity:0; }
.library-import-status { flex-shrink:0; display:flex; align-items:center; gap:8px; border:1px solid var(--accent-border); background:var(--accent-soft); border-radius:10px; padding:8px 11px; margin-bottom:12px; }
.library-import-status p { flex:1; min-width:0; margin:0; font-size:.8125rem; line-height:1.45; overflow-wrap:anywhere; }
.library-import-status .text-button { flex-shrink:0; font-size:.75rem; padding:7px 0; min-height:36px; }
.import-errors { padding:0; margin:18px 0; list-style:none; }
.import-errors li { padding:13px 0; border-top:1px solid var(--edge); overflow-wrap:anywhere; }
.import-errors strong { font-size:.875rem; }.import-errors p { margin:7px 0 0; font-size:.8125rem; color:var(--muted); line-height:1.5; }
#last-import-summary { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#import-report-counts { margin-top:0; } #import-report-help:empty { display:none; }
.section-heading { flex-shrink:0; display:flex; align-items:center; gap:16px; justify-content:space-between; margin-bottom:22px; }
.section-heading h1 { font-size:1.8rem; letter-spacing:-.04em; margin:0 0 7px; }.section-heading p { margin:0; color:var(--muted); font-size:.875rem; line-height:1.5; }
.add-button { border:1px solid var(--accent-border); background:var(--accent-soft); color:var(--purple); border-radius:14px; width:44px; height:44px; display:grid; place-items:center; flex-shrink:0; }
.filter-bar { flex-shrink:0; display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.library-controls { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; flex-shrink:0; margin-bottom:16px; }
.library-controls .filter-bar { margin:0; flex:1; }.library-controls>#select-songs-button { flex-shrink:0; min-height:44px; color:var(--purple); }
.selection-toolbar { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-shrink:0; margin-bottom:14px; padding:10px 12px; border:1px solid var(--accent-border); border-radius:12px; background:var(--accent-soft); }
.bulk-select-all { display:flex; align-items:center; gap:9px; cursor:pointer; min-height:44px; min-width:0; flex:1; }.bulk-select-all>span { display:flex; flex-direction:column; gap:5px; min-width:0; }
.bulk-select-all strong { font-weight:500; font-size:.8125rem; line-height:1.3; }.bulk-select-all small { color:var(--muted); font-size:.75rem; line-height:1.4; }
.song-checkbox { display:grid; place-items:center; width:44px; min-height:44px; flex-shrink:0; cursor:pointer; }
.song-checkbox input,.bulk-select-all input { width:20px; height:20px; margin:0; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }.selection-toolbar>.danger-button { flex-shrink:0; padding:11px 13px; font-size:.8125rem; }
.song-row.selected { background:var(--accent-soft); box-shadow:inset 0 0 0 1px var(--accent-border); }
.selected-delete-list { list-style:none; padding:0; margin:-8px 0 23px; border-top:1px solid var(--line); }.selected-delete-list li { padding:10px 0; border-bottom:1px solid var(--line); font-size:.8125rem; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#selection-delete-dialog .confirm-actions { flex-wrap:wrap; }
.chip { padding:8px 12px; min-height:36px; border:1px solid var(--edge); border-radius:9px; background:transparent; color:var(--muted); font-size:.8125rem; }.chip.active { border-color:var(--accent-border); background:var(--accent-soft); color:var(--highlight); }
.song-list { display:flex; flex-direction:column; gap:5px; min-height:0; }
#library-list,#search-results { flex:1; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
.album-heading { font-size:.875rem; color:var(--purple); margin:15px 4px 7px; font-weight:500; }
.song-row { display:flex; align-items:center; gap:11px; padding:9px 5px; border-radius:12px; min-width:0; flex-shrink:0; }.song-row.current { background:var(--accent-soft); }
.song-select { flex:1; min-width:0; display:flex; gap:13px; align-items:center; background:none; border:0; text-align:left; padding:0; }
.song-thumb { width:48px; height:48px; border-radius:7px; flex-shrink:0; background-color:var(--thumb); background-position:center; background-size:cover; display:grid; place-items:center; overflow:hidden; }
.song-thumb.reference-art { background-size:322.15% 214.02%; background-position:50% 24.08%; }.song-thumb svg { width:21px; height:21px; color:var(--muted); }
.song-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }.song-copy strong { font-size:.875rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.song-copy small { font-size:.75rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.song-row.current .song-copy strong { color:var(--highlight); }
.row-action { width:36px; height:36px; flex-shrink:0; padding:8px; }.row-action svg { width:19px; height:19px; }
.favorite-remove { width:44px; height:44px; }
.virtual-list { display:block; position:relative; overflow-anchor:none; }
.list-surface { position:relative; width:100%; }
.virtual-row { position:absolute; left:0; right:0; }
.list-measure { position:absolute; visibility:hidden; left:0; right:0; pointer-events:none; }
.search-box { flex-shrink:0; display:flex; align-items:center; gap:12px; background:var(--edge); border:1px solid var(--edge); border-radius:13px; padding:12px 14px; margin-bottom:20px; color:var(--muted); }
.search-box input { background:none; color:var(--text); border:0; outline:none; width:100%; min-width:0; font-size:1rem; }.search-box input::placeholder { color:var(--muted); }
.empty-state { text-align:center; padding:32px 12px; color:var(--muted); }.empty-state svg { width:38px; height:38px; margin-bottom:14px; color:var(--purple); }
.empty-state strong { display:block; color:var(--text); font-size:1rem; font-weight:500; margin-bottom:8px; }.empty-state p { font-size:.875rem; line-height:1.6; margin:0; }.empty-state button { margin-top:18px; }
.mini-player { flex-shrink:0; display:flex; align-items:center; gap:2px; padding:10px 18px; border-top:1px solid var(--edge); background:var(--surface-end); }
.mini-track { border:0; background:none; display:flex; align-items:center; text-align:left; gap:11px; flex:1; min-width:0; padding:0; }.mini-track>span:last-child { min-width:0; display:flex; flex-direction:column; gap:5px; }
.mini-track strong { font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500; }.mini-track small { font-size:.75rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-art { width:39px; height:39px; border-radius:6px; flex-shrink:0; background-color:var(--thumb); background-position:center; background-size:cover; display:grid; place-items:center; }.mini-art.reference-art { background-size:322.15% 214.02%; background-position:50% 24.08%; }.mini-art>svg { width:18px; height:18px; color:var(--muted); }
.sheet { padding:25px; max-width:440px; width:calc(100% - 28px); border-radius:22px; border:1px solid var(--line); background:linear-gradient(145deg,var(--sheet),var(--sheet-end)); color:var(--text); box-shadow:0 25px 90px #0007; max-height:calc(var(--app-height) - 28px); overflow:auto; overscroll-behavior:contain; }
.sheet::backdrop { background:#08060db0; backdrop-filter:blur(8px); }
.sheet-heading { display:flex; flex-shrink:0; justify-content:space-between; gap:15px; align-items:center; margin-bottom:16px; }.sheet-heading h2 { font-size:1.25rem; letter-spacing:-.02em; margin:0; }.sheet-heading .eyebrow { margin-bottom:8px; }
.sheet-description { font-size:.9375rem; line-height:1.6; color:var(--muted); margin:0 0 23px; }.fine-print { font-size:.8125rem; color:var(--muted); line-height:1.6; margin:20px 0 0; }
.option-list { display:flex; flex-direction:column; gap:8px; }.choice { display:flex; align-items:center; gap:14px; padding:15px 12px; border:1px solid var(--edge); background:var(--edge); border-radius:12px; text-align:left; }
.choice>svg { color:var(--purple); width:24px; height:24px; }.choice>span { display:flex; flex-direction:column; gap:6px; }.choice strong { font-size:.9375rem; font-weight:500; }.choice small { font-size:.8125rem; color:var(--muted); line-height:1.4; }.choice:hover { background:var(--accent-soft); }
.tall-sheet { height:75dvh; }.tall-sheet[open] { display:flex; flex-direction:column; }.tall-sheet .song-list { flex:1; overflow:auto; overscroll-behavior:contain; }
.primary-button,.danger-button { border:0; background:var(--play-end); color:var(--on-accent); border-radius:11px; padding:13px 18px; font-size:.875rem; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; }.danger-button { background:#9c3c51; color:white; }
.text-button { border:0; background:none; color:var(--purple); padding:12px 8px; font-size:.875rem; min-height:44px; }.confirm-actions { display:flex; justify-content:flex-end; gap:10px; }
.storage-cleanup { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.storage-cleanup h3 { font-size:1rem; margin:0 0 10px; font-weight:500; }.storage-cleanup .sheet-description { margin-bottom:15px; font-size:.875rem; }
.storage-cleanup>.danger-button { width:100%; }.storage-cleanup svg { width:18px; height:18px; }
.delete-error { border:1px solid #e38d9d70; background:#9c3c511c; color:var(--text); font-size:.875rem; line-height:1.6; padding:12px; border-radius:10px; margin:0 0 20px; }
#clear-library-dialog .confirm-actions { flex-wrap:wrap; }
.lyrics-sheet { height:80dvh; }.lyrics-sheet[open] { display:flex; flex-direction:column; }.lyrics-content { flex:1; overflow-y:auto; min-height:0; scroll-behavior:smooth; scrollbar-width:thin; overscroll-behavior:contain; }
.lyrics-content .lyric-line { display:block; border:0; background:none; color:var(--muted); font-size:1.5rem; line-height:1.5; font-weight:600; padding:12px 0; text-align:left; transition:color .2s; width:100%; overflow-wrap:anywhere; }.lyrics-content .lyric-line.current { color:var(--highlight); }
.lyrics-content .plain-lyrics { white-space:pre-wrap; font-size:1.2rem; line-height:1.9; color:var(--text); }.lyrics-content .empty-state { text-align:left; padding:28px 0; }
.theme-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.theme-card { position:relative; display:flex; flex-direction:column; padding:8px; border:1px solid var(--edge); background:var(--edge); border-radius:13px; gap:10px; text-align:left; min-width:0; }
.theme-card.selected { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); background:var(--accent-soft); }
.theme-swatch { height:58px; display:block; width:100%; border-radius:8px; position:relative; overflow:hidden; }
.swatch-play { position:absolute; display:grid; place-items:center; width:31px; height:31px; right:14px; top:13px; border-radius:50%; color:#fff; }.swatch-play svg { width:15px; height:15px; margin-left:2px; }.swatch-line { position:absolute; width:50%; height:3px; left:12px; top:28px; border-radius:3px; }
.theme-app-icon { position:absolute; width:38px; height:38px; right:12px; top:10px; border-radius:10px; box-shadow:0 3px 9px #0003; }
.theme-name { font-size:.875rem; padding:0 17px 3px 3px; font-weight:500; }.theme-check { display:none; position:absolute; right:9px; bottom:11px; width:15px; height:15px; color:var(--purple); }.theme-card.selected .theme-check { display:block; }
.import-progress { position:fixed; z-index:10; left:50%; bottom:95px; transform:translateX(-50%); background:var(--raised); width:calc(100% - 40px); max-width:410px; border:1px solid var(--accent-border); border-radius:12px; padding:15px; box-shadow:0 8px 35px #0006; font-size:.875rem; }
.import-progress progress { display:block; width:100%; height:5px; margin-top:12px; accent-color:var(--purple); }
.toast { position:fixed; z-index:20; bottom:30px; left:50%; transform:translateX(-50%); border:1px solid #ffffff20; border-radius:12px; background:var(--toast); color:#f4f4ff; padding:13px 19px; max-width:calc(100% - 30px); width:max-content; box-shadow:0 6px 40px #0006; font-size:.875rem; line-height:1.45; backdrop-filter:blur(12px); }
.noscript { padding:20px; text-align:center; } [hidden] { display:none!important; }
@media (max-width:600px), (pointer:coarse) {
  body { background:var(--surface-end); }.app-shell { position:fixed; top:var(--app-top); left:0; width:100%; height:var(--app-height); max-width:none; border-radius:0; box-shadow:none; padding-top:var(--safe-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .app-header { padding:12px 20px 10px; gap:8px; }
  .view { padding:8px 28px 12px; }.track-info h1 { font-size:1.7rem; }.bottom-nav { padding-bottom:calc(10px + var(--safe-bottom)); }
  .library-view,.search-view { padding-top:16px; }.sheet { margin:auto auto max(12px,env(safe-area-inset-bottom)); border-radius:24px 24px 18px 18px; max-height:calc(var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px); }
  .toast { bottom:calc(85px + env(safe-area-inset-bottom)); }
}
@media (max-height:730px) {
  .app-header { padding-top:10px; padding-bottom:9px; }.view { padding-top:5px; padding-bottom:6px; }.artwork-wrap { margin-bottom:12px; }
  .track-info h1 { font-size:1.45rem; margin-bottom:4px; }.track-info p { font-size:.875rem; }.timeline { margin-top:10px; }
  .transport { margin:5px 0; }.play-button { width:62px; height:62px; }.bottom-nav { padding-top:6px; padding-bottom:calc(7px + var(--safe-bottom)); }.bottom-nav button { min-height:43px; }
}
@media (max-height:520px) and (max-width:1000px) {
  .app-shell { position:fixed; top:var(--app-top); left:0; width:100%; height:var(--app-height); border-radius:0; box-shadow:none; padding-top:var(--safe-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .app-header { padding:5px 20px; }.header-heading { flex-direction:row; align-items:center; gap:16px; }.eyebrow { font-size:.625rem; }.header-heading>span:last-child { font-size:1rem; }
  .player-view { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto auto auto auto auto; column-gap:24px; padding:5px 28px; }
  .artwork-wrap { grid-column:1; grid-row:1/6; height:100%; margin:0; }.art-frame { max-width:260px; }
  .track-info,.timeline,.transport,.secondary-controls,.import-prompt { grid-column:2; }.track-info h1 { font-size:1.35rem; }.track-info p { font-size:.8125rem; }
  .timeline { margin-top:2px; }.transport { margin:2px 0; }.play-button { width:54px; height:54px; }.secondary-controls { height:40px; }.import-prompt { margin:0 auto; min-height:28px; padding:4px; }
  .bottom-nav { padding-top:3px; padding-bottom:calc(3px + var(--safe-bottom)); }.bottom-nav button { min-height:40px; }
  .section-heading { margin-bottom:12px; }.filter-bar { margin-bottom:8px; }.mini-player { padding:6px 18px; }
  .library-view .section-heading h1 { font-size:1.35rem; margin-bottom:4px; }.library-view .section-heading p { font-size:.75rem; }
  .library-controls { margin-bottom:8px; }.library-controls .filter-bar { margin-bottom:0; }
  .selection-toolbar { padding:0 10px; margin-bottom:8px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:350px) and (min-height:521px) {
  .app-header { gap:4px; padding-left:14px; padding-right:14px; }
  .header-heading>span:last-child { font-size:1rem; white-space:nowrap; }
  .bottom-nav button { font-size:.8125rem; gap:4px; }
  .bottom-nav button span { white-space:nowrap; }
  .bottom-nav svg { width:17px; height:17px; }
}
/* Installed apps have no browser toolbar. Their full-screen CSS viewport and
   native visualViewport measurements can disagree on Home Screen WebKit. */
@media (display-mode:standalone), (display-mode:fullscreen) {
  :root { --app-height:100vh; --app-top:0px; height:100vh; background:var(--nav); }
  body { background:var(--nav); }
  .app-shell { position:absolute; top:0; left:0; width:100%; max-width:none; height:var(--app-height); border-radius:0; box-shadow:none; padding-top:var(--safe-top); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
}
:root[data-display-mode="standalone"] { height:100vh; background:var(--nav); }
:root[data-display-mode="standalone"] body { background:var(--nav); }
:root[data-display-mode="standalone"] .app-shell { position:absolute; top:0; left:0; width:100%; max-width:none; height:var(--app-height); border-radius:0; box-shadow:none; padding-top:var(--safe-top); padding-left:env(safe-area-inset-left,0px); padding-right:env(safe-area-inset-right,0px); }
:root[data-ios-standalone="true"] .app-header { padding-top:30px; background:var(--surface); }
:root[data-ios-standalone="true"] #app-name { font-size:1.25rem; }
:root[data-display-mode="standalone"][data-keyboard="true"] { --safe-bottom:0px; }
@media (max-width:350px) {
  :root[data-ios-standalone="true"] .app-header { gap:2px; padding-left:12px; padding-right:12px; }
}

/* Keep the browser-only installation offer centered and easy to dismiss. */
.install-sheet { position:fixed; inset:0; margin:auto; width:min(360px,calc(100% - 32px)); padding:36px 26px 25px; text-align:center; }
.install-close { position:absolute; top:8px; right:8px; }
.install-icon { display:block; margin:0 auto 20px; border-radius:20px; box-shadow:0 8px 24px #0003; }
.install-sheet h2 { margin:0 0 10px; font-size:1.35rem; letter-spacing:-.025em; }
.install-sheet .sheet-description { margin:0 0 23px; }
.install-sheet .primary-button { min-width:150px; }
.install-sheet .fine-print { font-size:.75rem; margin-top:18px; }
.install-instructions { border:1px solid var(--accent-border); border-radius:12px; background:var(--accent-soft); padding:12px; color:var(--text); font-size:.875rem; line-height:1.6; margin:18px 0 0; }

.resume-playback{display:block;margin:2px auto;padding:9px 16px;border:1px solid var(--accent);border-radius:12px;color:var(--accent);background:var(--surface);font:inherit;font-size:13px;cursor:pointer;flex-shrink:0}.resume-playback[hidden]{display:none}.playback-details{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.7 system-ui,sans-serif;color:inherit}

/* Radio shares the player; the station list scrolls inside the app viewport. */
.bottom-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
.radio-view{overflow-y:auto;overscroll-behavior:contain;padding-top:19px}.radio-view>.section-heading,.radio-view>.filter-bar,.radio-view>.radio-connection,.radio-view>.radio-list,.radio-note{flex-shrink:0}
.radio-connection{display:flex;align-items:center;gap:10px;min-height:58px}.radio-connection p{flex:1;color:var(--muted);font-size:12px;line-height:1.5;margin:12px 0}.radio-list{display:flex;flex-direction:column;gap:10px}
.station-card{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:0 5px;border:1px solid var(--edge);border-radius:16px;padding:10px;background:var(--surface)}.station-card.current{border-color:var(--accent)}
.station-play{display:flex;align-items:center;gap:12px;min-width:0;padding:0;border:0;text-align:left;background:none;color:var(--text)}.station-art{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:13px;background:linear-gradient(145deg,var(--station-color),#171622);color:white}.station-art svg{width:27px;height:27px}.station-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.station-copy strong{font-size:14px;line-height:1.35}.station-copy small{font-size:12px;color:var(--muted)}
.radio-note{margin:16px 0 8px}.album-art.radio-art,.mini-art.radio-art{background-image:linear-gradient(145deg,var(--station-color),#171622)!important}.album-art.radio-art>svg{color:white;opacity:.85}button:disabled{cursor:default}

.install-sheet{max-height:calc(var(--app-height,100dvh) - 28px);overflow-y:auto;overscroll-behavior:contain;padding:30px 20px 20px}.install-icon{margin-bottom:12px}.install-sheet .sheet-description{margin-bottom:14px}.install-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}.install-theme{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border:1px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--text);padding:9px 3px;cursor:pointer}.install-theme img{border-radius:10px;max-width:100%;object-fit:contain}.install-theme span{font-size:10px;line-height:1.25;overflow-wrap:anywhere}.install-theme[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.install-theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.install-color-summary{font-size:12px;color:var(--muted);margin:10px 0 16px}.install-color-summary strong{color:var(--text)}

.radio-discovery{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:10px;margin-top:14px;flex-shrink:0}.radio-discovery label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;min-width:0}.radio-discovery select,.radio-discovery input{width:100%;min-width:0;padding:11px 9px;color:var(--text);background:var(--surface);border:1px solid var(--edge);border-radius:10px;font:inherit;font-size:13px}.radio-song-info{font-size:11px!important;color:var(--muted);margin:5px 0 0!important}.radio-song-info[hidden]{display:none}


.radio-discovery{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}.radio-field{display:flex;flex-direction:column;gap:8px;font-size:13px;margin:14px 0}.radio-field input{font:inherit;padding:12px;border-radius:10px;border:1px solid var(--edge);background:var(--surface);color:var(--text);width:100%}.radio-actions{display:flex;gap:8px;flex-wrap:wrap}.station-change{flex-shrink:0;padding:8px 10px}.station-play:disabled{opacity:1;cursor:default}.station-card .station-copy{min-width:0}.station-card .station-copy strong{overflow-wrap:anywhere}.radio-list{padding-bottom:16px}#radio-search-state:empty{display:none}

.station-card{grid-template-columns:minmax(0,1fr) 38px auto}.station-card.discovery{grid-template-columns:minmax(0,1fr) auto}.radio-view>.filter-bar{flex-wrap:wrap}.station-card .station-art{width:40px;height:40px}.station-card .station-play{gap:9px}
/* Playlists use imported audio without copying the library files. */
.playlists-sheet{max-height:90dvh;overflow:auto}.playlist-create{display:flex;gap:8px;align-items:flex-end;margin:12px 0;flex-wrap:wrap}.playlist-create label,.playlist-label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--muted);min-width:0}.playlist-create label{flex:1;min-width:130px}.playlist-label{margin:12px 0}.playlist-create input,.playlist-label input,.playlist-label select{width:100%;padding:10px;border:1px solid var(--line);border-radius:9px;font:inherit;color:var(--text);background:var(--surface)}.playlist-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.playlist-actions .primary-button{padding:10px 16px}.playlist-row-action{width:32px;height:38px;padding:3px;font-size:20px}.playlist-pick{cursor:pointer;gap:12px}.playlist-pick input{height:20px;width:20px;accent-color:var(--accent);flex-shrink:0}#playlist-track-list,#playlist-picker-list{max-height:35dvh;min-height:0;overflow-y:auto;overscroll-behavior:contain}.selection-toolbar{flex-wrap:wrap}.install-nudge{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 20px;background:var(--accent-soft);border-bottom:1px solid var(--accent-border);flex-shrink:0}.install-nudge[hidden]{display:none}.install-nudge button{border:0;background:none;color:var(--highlight);font-size:12px;text-align:left;min-height:32px}.install-nudge button:last-child{font-size:23px;width:32px;flex-shrink:0}
/* Desktop: navigation rail, persistent player, and a full browsing pane. */
@media (min-width:1000px){
 body{padding:20px}.app-shell,:root[data-display-mode="standalone"] .app-shell{position:relative;top:auto;left:auto;width:min(1500px,100%);height:calc(var(--app-height) - 40px);max-height:none;border-radius:22px;display:grid;grid-template-columns:164px minmax(0,1fr);grid-template-rows:82px auto minmax(0,1fr);box-shadow:0 20px 80px #0004}
 .app-header{grid-column:1/3;grid-row:1;padding:18px 28px;border-bottom:1px solid var(--edge)}.install-nudge{grid-column:1/3;grid-row:2}.app-shell main{grid-column:2;grid-row:3;display:grid;grid-template-columns:minmax(270px,.85fr) minmax(0,1.3fr);height:100%;overflow:hidden}.bottom-nav{grid-column:1;grid-row:3;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:20px 10px;gap:8px;border-top:0;border-right:1px solid var(--edge)}.bottom-nav button{flex:none;justify-content:flex-start;padding:14px 12px;min-height:52px;border-radius:10px}.bottom-nav button.active{background:var(--accent-soft)}.bottom-nav .active:after{display:none}
 #player-view{display:flex;grid-column:1;grid-row:1;padding:28px 24px 22px;border-right:1px solid var(--edge);overflow:auto}.player-view .artwork-wrap{flex:1;min-height:130px;max-height:430px;margin-bottom:25px}.player-view .art-frame{max-width:360px}.player-view .track-info h1{font-size:1.55rem}.player-view .transport{margin:14px 0}.player-view .secondary-controls{margin:8px 0}.player-view .art-badge{font-size:9px}
 #library-view,#radio-view,#search-view{grid-column:2;grid-row:1;padding:28px;min-width:0}.section-heading h1{font-size:2rem}#mini-player{display:none!important}.sheet{max-width:620px}.playlists-sheet{width:min(680px,90vw);max-width:680px}#playlist-track-list,#playlist-picker-list{max-height:40dvh}.header-heading #app-name{font-size:1.4rem}.radio-list{gap:12px}
}

.playlists-sheet .virtual-list{height:35dvh;flex:none}

/* Optional artwork presentation; the player layout and playback controls stay shared. */
.vinyl-player{position:relative;width:100%;height:100%;overflow:hidden;border:1px solid var(--edge);border-radius:12px;background:radial-gradient(ellipse at 18% 0%,#ffffff12,transparent 65%),linear-gradient(145deg,var(--raised),var(--surface-end));box-shadow:inset 0 1px 0 #ffffff12,0 12px 28px #0003;isolation:isolate}
.vinyl-platter{position:absolute;width:84%;height:84%;left:4%;top:8%;padding:2%;border-radius:50%;background:linear-gradient(135deg,#70747b,#202226 45%,#565b61);box-shadow:0 7px 15px #0008}
.vinyl-record{position:relative;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle at center,var(--vinyl-base,#141517) 0 1px,var(--vinyl-groove,#26272a) 1.2px 1.7px,var(--vinyl-dark,#111214) 2px 3px);box-shadow:inset 0 0 0 3px #101113,inset 0 0 0 5px #323438;animation:vinyl-spin 6s linear infinite;animation-play-state:paused}
.vinyl-record:before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 15deg,transparent,#ffffff17 35deg,transparent 65deg,transparent 170deg,#ffffff13 210deg,transparent 245deg);pointer-events:none}
.vinyl-label{position:absolute;inset:28%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5%;padding:10% 5%;border-radius:50%;background:var(--purple);color:#17131f;box-shadow:0 0 0 2px #0008,inset 0 0 0 4px #ffffff21;text-align:center;overflow:hidden}
.vinyl-album,.vinyl-song{position:absolute;left:8%;top:60%;max-height:30%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.18;width:84%;font-size:clamp(.5rem,2.7cqw,.8rem);font-weight:650}
.vinyl-album{top:14%;font-size:clamp(.45rem,2.2cqw,.65rem);font-weight:500}
.vinyl-spindle{position:absolute;left:46%;top:46%;display:block;width:8%;aspect-ratio:1;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#b6bac2 45%,#444952 70%);box-shadow:0 1px 3px #0009}
.vinyl-tonearm{position:absolute;right:6%;top:9%;width:12%;height:12%;border-radius:50%;background:radial-gradient(circle,#979ca4 0 20%,#363a40 23% 45%,#121417 48%);box-shadow:0 3px 6px #0008}
.vinyl-tonearm span{position:absolute;top:38%;left:42%;width:17%;height:420%;background:linear-gradient(90deg,#555b65,#d3d7de 48%,#717783);border-radius:5px;transform-origin:50% 3%;transform:rotate(-8deg);transition:transform .65s ease;box-shadow:2px 2px 3px #0006}
.vinyl-tonearm span:after{content:"";position:absolute;bottom:-3%;left:-65%;width:230%;height:20%;border-radius:3px;background:linear-gradient(90deg,#24282f,#525964);box-shadow:0 2px 3px #0008}
.vinyl-player.is-playing .vinyl-record{animation-play-state:running}
.vinyl-player.is-playing .vinyl-tonearm span{transform:rotate(24deg)}
.appearance-choice[aria-pressed=true]{border-color:var(--purple);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--purple)}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.vinyl-record{animation:none}.vinyl-tonearm span{transition:none}}

/* Share the current song's artwork URL; crop it inside the circular label. */
.vinyl-label{background-size:cover;background-position:center;background-repeat:no-repeat}
.vinyl-label.has-cover .vinyl-album,.vinyl-label.has-cover .vinyl-song{display:none}
.vinyl-label.demo-cover{background-image:url('./assets/reference.webp');background-size:322.15% 214.02%;background-position:50% 24.08%}

#search-view>#radio-search-results,#search-view>#radio-search-state,#search-view>#radio-search-empty{flex-shrink:0}
#search-view:has(#radio-search-results:not([hidden])){overflow-y:auto;overscroll-behavior:contain}

.vinyl-color-settings{margin-top:22px;padding-top:18px;border-top:1px solid var(--edge)}
.vinyl-color-settings h3{margin:0 0 12px;font-size:.9375rem;font-weight:550}
.vinyl-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vinyl-color-choice{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:10px 4px;border:1px solid var(--edge);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:.75rem;cursor:pointer}
.vinyl-color-swatch{width:30px;height:30px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff35,0 1px 4px #0005}
.vinyl-color-choice[aria-pressed=true]{border-color:var(--purple);box-shadow:inset 0 0 0 1px var(--purple);background:var(--accent-soft)}
.vinyl-color-choice:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vinyl-custom-color{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:.875rem}
.vinyl-custom-color input{width:60px;height:44px;border:1px solid var(--line);border-radius:8px;padding:4px;background:var(--surface);cursor:pointer}
/* Focused playback controls: device volume and an unobstructed record. */
.secondary-controls{justify-content:center;gap:30px}
.vinyl-platter{width:86%;height:86%;left:7%;top:7%}
.radio-screen .header-heading{flex-direction:row;align-items:center}
.radio-screen .header-heading #view-label{font-size:1.45rem;font-weight:650}
.radio-screen .app-header{padding-bottom:18px}
.radio-screen #radio-favorites-filter[aria-pressed=true]{color:var(--purple)}
.radio-screen #radio-favorites-filter[aria-pressed=true] svg,.radio-player-actions [aria-pressed=true] svg,#radio-list [aria-pressed=true] svg{fill:currentColor}
.radio-view{padding-left:0;padding-right:0;padding-top:0}
.station-count{margin:0;padding:0 24px 18px;color:var(--muted);font-size:.8rem;line-height:1.5}
#radio-list{gap:0;border-radius:0;overflow:hidden}
#radio-list .station-card{grid-template-columns:48px minmax(0,1fr) 44px;gap:2px;border:0;border-radius:0;padding:18px 16px;background:var(--station-tint);color:white;min-height:105px;box-shadow:none}
#radio-list .station-card.current{box-shadow:inset 4px 0 0 #ffffffa8}
#radio-list .station-play{padding:0 4px;min-height:60px;text-align:left;color:inherit}
#radio-list .station-copy strong{font-size:1.2rem;font-weight:550;line-height:1.3;color:white}
#radio-list .station-copy small{color:#ffffffe0;font-size:.8rem;line-height:1.5}
#radio-list .icon-button{color:white}
#radio-list .station-change{align-self:start;color:#ffffffe0;background:transparent;border:0;font-size:1.6rem;padding:0;min-width:44px;min-height:44px}
#radio-list .station-change:hover{background:#0002}
#radio-empty,.radio-note{margin:18px 24px}
.radio-player-view{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--broadcast-color,#a33464);color:white;padding:clamp(18px,4dvh,42px) 22px 0;overflow-y:auto;isolation:isolate}
.radio-live-heading{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.18em;opacity:.9;margin:8px 0 20px}
.live-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.radio-dial{position:relative;width:100%;min-height:130px;display:grid;place-items:center;flex:1}
.radio-wave{display:flex;align-items:center;gap:4px;position:absolute;inset:5% -12%;opacity:.16;pointer-events:none;z-index:-1}
.radio-wave span{height:var(--bar);flex:1;min-width:3px;background:white;border-radius:2px}
.radio-transport{display:flex;align-items:center;justify-content:center;gap:clamp(20px,8vw,65px);width:100%}
.radio-transport .icon-button{color:white;width:48px;height:48px}
.radio-transport .play-button{background:#ffffff14;color:white;border-color:#ffffff65;box-shadow:0 6px 24px #0001;width:82px;height:82px}
.radio-player-copy{margin:22px 0 0;max-width:620px}
.radio-player-copy h1{font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.15;margin:0 0 12px;overflow-wrap:anywhere}
.radio-player-copy p{margin:7px 0;color:#ffffffe0;line-height:1.5}
#radio-player-song{font-size:1.1rem;font-weight:650;margin-top:25px}
#radio-player-artist{font-size:.9rem}
.radio-player-view .radio-connection{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;width:100%;padding:18px 0 20px;margin:auto 0 0}
.radio-player-view #radio-status{color:#ffffffe0;font-size:.75rem;line-height:1.5;margin:0}
.radio-player-view #radio-retry{color:white;border-color:#ffffff70;background:#ffffff14}
.radio-player-actions{display:flex;align-items:center;justify-content:center;gap:64px;width:calc(100% + 44px);padding:14px 20px;background:#00000012;flex-shrink:0}
.radio-player-actions .icon-button{color:white;width:52px;height:52px}
.radio-player-actions svg{width:27px;height:27px}
.radio-player-screen .app-header{background:var(--surface)}
/* Lyrics use the full available screen, with the artwork softly behind the words. */
.lyrics-screen{position:fixed;inset:0;margin:0;width:100%;height:var(--app-height,100dvh);max-width:none;max-height:none;border:0;border-radius:0;padding:max(16px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));background:#17191f;color:#fff;overflow:hidden;isolation:isolate}
.lyrics-screen[open]{display:flex;flex-direction:column}
.lyrics-screen:before{content:"";position:absolute;inset:-40px;background-image:var(--lyrics-art,none);background-position:center;background-size:cover;filter:blur(38px);opacity:.36;z-index:-2}
.lyrics-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(#11151bd9,#11151b75 45%,#11151bd9);z-index:-1}
.lyrics-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding-bottom:20px;text-align:center}
.lyrics-heading>div{min-width:0}.lyrics-heading span{font-size:.65rem;letter-spacing:.16em;color:#ffffffa0}.lyrics-heading h2{margin:7px 0 0;font-size:.9rem;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:65vw}.lyrics-heading .icon-button{color:white}.lyrics-heading-spacer{width:44px;flex-shrink:0}
.lyrics-screen .lyrics-content{padding:26dvh 8px 22dvh;mask-image:linear-gradient(transparent,#000 14%,#000 84%,transparent);scrollbar-width:none;text-align:center}
.lyrics-screen .lyric-line{color:#ffffff55;font-size:clamp(1.15rem,4.7vw,1.7rem);font-weight:500;line-height:1.5;text-align:center;padding:15px 0;transition:color .35s,transform .35s}
.lyrics-screen .lyric-line.current{color:white;font-weight:700;transform:scale(1.06)}
.lyrics-screen .plain-lyrics{color:#ffffffcf;text-align:center}
.lyrics-screen .empty-state{color:#ffffffb8;padding:12px 0;text-align:center}
.lyrics-screen .empty-state strong{color:white}
.lyrics-screen #attach-lyrics{color:#ffffffa8;align-self:center;font-size:.75rem;padding:10px;flex-shrink:0}
.lyrics-footer{width:100%;max-width:900px;margin:0 auto;flex-shrink:0}
.lyrics-spectrum{position:relative;height:65px}.lyrics-spectrum canvas{display:block;width:100%;height:65px}.lyrics-spectrum input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.lyrics-spectrum:focus-within{outline:2px solid var(--purple);outline-offset:5px;border-radius:3px}
.lyrics-times{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.75rem;font-variant-numeric:tabular-nums}.lyrics-times .icon-button{color:white}
@media(min-width:1000px){
 .radio-screen main{display:flex;flex-direction:column}.radio-screen #radio-view,.radio-screen #radio-player-view,.radio-screen #search-view{width:100%;height:100%}
 .radio-screen #radio-view{padding:0}.radio-screen .station-count{padding:18px 28px}.radio-screen #radio-list .station-card{padding:22px 28px;grid-template-columns:52px minmax(0,1fr) 48px}.radio-screen #radio-list .station-copy strong{font-size:1.5rem}
 .radio-player-view{padding-left:60px;padding-right:60px}.radio-player-actions{width:calc(100% + 120px)}.radio-wave{inset:5% 5%}.radio-dial{max-width:700px}
 .lyrics-screen .lyrics-content{width:100%;max-width:900px;margin:0 auto;padding-top:28dvh;padding-bottom:28dvh}.lyrics-screen .lyric-line{font-size:2rem}
}
@media(prefers-reduced-motion:reduce){.lyrics-screen .lyric-line{transition:none}.lyrics-content{scroll-behavior:auto}}

@media(min-width:1000px){.library-with-radio main{display:block}.library-with-radio #library-view,.library-with-radio #search-view{height:100%;width:100%}}

.update-notice{position:fixed;z-index:70;top:calc(var(--app-top,0px) + max(12px,env(safe-area-inset-top,0px)));left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:490px;border:1px solid var(--accent-border);border-radius:16px;background:var(--sheet);box-shadow:0 10px 40px #0006;color:var(--text)}
.update-notice button{display:flex;align-items:center;gap:12px;width:100%;padding:15px;border:0;border-radius:inherit;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.update-notice button>svg{width:24px;height:24px;flex-shrink:0;color:var(--purple)}
.update-notice button>span{display:flex;flex:1;flex-direction:column;gap:5px}.update-notice strong{font-size:.9rem;font-weight:650}.update-notice small{font-size:.75rem;color:var(--muted);line-height:1.4}
.update-notice button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
#update-button.update-highlight{border-color:var(--purple);background:var(--accent-soft)}