: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;
  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 { overflow-wrap:anywhere; }
.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; }
.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; gap:2px; }.volume-control input { width:82px; }.volume-control .icon-button { color:var(--purple); }
#volume::-webkit-slider-thumb { background:var(--purple); width:9px; height:9px; margin-top:-2.5px; border:0; }
#volume-system { font-size:.75rem; color:var(--muted); }
.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:1.25fr 1fr 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; }
.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; }
.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; }.mini-art.reference-art { background-size:322.15% 214.02%; background-position:50% 24.08%; }
.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; }
.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-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 { width:100%; height:var(--app-height); max-width:none; border-radius:0; box-shadow:none; padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .app-header { padding:16px 20px 12px; gap:8px; }.header-heading>span:last-child { font-size:1.13rem; }
  .view { padding:8px 28px 12px; }.track-info h1 { font-size:1.7rem; }.bottom-nav { padding-bottom:calc(10px + env(safe-area-inset-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 + env(safe-area-inset-bottom)); }.bottom-nav button { min-height:43px; }
}
@media (max-height:520px) and (max-width:1000px) {
  .app-shell { width:100%; height:var(--app-height); border-radius:0; box-shadow:none; padding-top:env(safe-area-inset-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 + env(safe-area-inset-bottom)); }.bottom-nav button { min-height:40px; }
  .section-heading { margin-bottom:12px; }.filter-bar { margin-bottom:8px; }.mini-player { padding:6px 18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:350px) and (min-height:521px) {
  .header-heading>span:last-child { font-size:1rem; white-space:nowrap; }
  .bottom-nav { grid-template-columns:1.45fr 1fr 1fr; }
  .bottom-nav button { font-size:.8125rem; gap:4px; }
  .bottom-nav button span { white-space:nowrap; }
  .bottom-nav svg { width:17px; height:17px; }
}