/* YIDIAN — a personal frequency. Native artwork, no remote assets. */
:root {
  color-scheme: light;
  --bg: #f4f3e9;
  --panel: #fffef8;
  --raised: #e9eadf;
  --text: #17211e;
  --muted: #737970;
  --accent: #d4f660;
  --accent-deep: #4b651d;
  --line: #17211e18;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button, a, input, select { -webkit-touch-callout: none; }
button { transition: background .18s ease, color .18s ease, opacity .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #5f7a20; outline-offset: 3px; }
button:disabled { opacity: .4; cursor: default; }
button:active { opacity: .75; }
input, select { color: var(--text); background: var(--panel); border: 1px solid #17211e26; border-radius: 12px; padding: 13px 14px; min-height: 48px; width: 100%; }
input::placeholder { color: #82877c; opacity: 1; }
input[type=checkbox] { appearance: none; width: 44px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 20px; background: #b6bbb0; flex-shrink: 0; position: relative; cursor: pointer; transition: background .18s; }
input[type=checkbox]::before { content: ""; position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #fffef8; box-shadow: 0 1px 3px #17211e26; transition: transform .18s; }
input[type=checkbox]:checked { background: var(--text); }
input[type=checkbox]:checked::before { transform: translateX(16px); background: var(--accent); }
select { appearance: auto; }
a { color: var(--accent-deep); }
h1, h2, h3, p { margin: 0; }
svg { height: 24px; width: 24px; display: block; flex-shrink: 0; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.app { max-width: 680px; margin: auto; }
.header { padding: calc(20px + var(--safe-top)) 22px 13px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0; text-align: left; min-height: 44px; }
.brand-mark { display: inline-block; width: 36px; height: 36px; background: var(--text); color: var(--accent); border-radius: 50%; position: relative; flex-shrink: 0; overflow: hidden; font-size: 0; }
.brand-mark::before { content: ""; position: absolute; width: 14px; height: 22px; top: 7px; left: 11px; border: 2px solid currentColor; border-radius: 50%; transform: rotate(38deg); }
.brand-mark::after { content: ""; position: absolute; inset: 15px; background: currentColor; border-radius: 50%; }
.brand-mark > span { position: absolute; inset: 4px; border: 1px solid #d4f66055; border-radius: 50%; }
.brand-name { display: flex; align-items: baseline; gap: 6px; font-size: 20px; letter-spacing: -.7px; font-weight: 800; line-height: 1.2; }
.brand-sub { font-size: 12px; letter-spacing: 1px; font-weight: 500; color: #566057; }
.brand-caption { display: block; font-size: 8px; font-weight: 750; letter-spacing: 2px; color: #70786d; margin-top: 4px; }
.icon-button { height: 44px; width: 44px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; }
.icon-button.active { color: var(--accent-deep); background: #d4f66044; }
#refreshButton { border: 1px solid var(--line); background: #fffef86b; }
#refreshButton svg { width: 20px; height: 20px; }
main { padding: 5px 22px calc(110px + var(--safe-bottom)); min-height: calc(100vh - 90px); }
.eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 750; color: #687261; }
.page-heading { margin: 13px 0 24px; }
.page-heading h1 { font-size: 34px; letter-spacing: -1.8px; line-height: 1.23; font-weight: 800; margin: 8px 0 10px; }
.page-heading p { color: var(--muted); font-size: 12px; line-height: 1.8; }
/* Signature radio card: a graphic record rather than a stock cover. */
.hero { position: relative; min-height: 216px; overflow: hidden; border-radius: 20px; background: var(--accent); color: var(--text); margin: 0 0 16px; isolation: isolate; }
.hero::after { content: "Y / 01"; position: absolute; bottom: 19px; right: 17px; font-size: 9px; font-weight: 750; letter-spacing: 2px; z-index: 2; color: #253815; }
.hero-text { width: 72%; position: relative; z-index: 2; padding: 20px; }
.station-topline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero .eyebrow { color: #3b501e; font-size: 9px; letter-spacing: 1.6px; }
.station-status { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #42552b; white-space: nowrap; }
.station-status::before { content: ""; display: block; width: 5px; height: 5px; background: #17211e; border-radius: 50%; }
.hero h2 { font-size: 28px; letter-spacing: -1.2px; line-height: 1.34; font-weight: 800; margin: 16px 0 8px; }
.hero p, .station-caption { font-size: 11px; line-height: 1.65; color: #465b2b; max-width: 190px; }
.hero-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.hero-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 15px; background: var(--text); color: #f8faed; border-radius: 30px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.hero-play svg { width: 16px; height: 16px; fill: currentColor; }
.station-random { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 9px; border: 1px solid #17211e3d; border-radius: 50%; background: #d4f660; }
.station-random svg { width: 19px; height: 19px; }
.station-random span { display: none; }
.hero-art { position: absolute; height: 188px; width: 188px; border-radius: 50%; right: -58px; top: 32px; background: repeating-radial-gradient(circle at center, #17211e 0px, #17211e 3px, #2c3530 4px, #17211e 5px); transform: rotate(-22deg); box-shadow: -10px 14px 18px #17211e14; z-index: 1; }
.hero-art::before { content: ""; position: absolute; inset: 60px; border-radius: 50%; background: #f4f3e9; }
.hero-art::after { content: ""; position: absolute; inset: 89px; border-radius: 50%; background: #17211e; }
.station-disc { position: absolute; inset: 13px; border-radius: 50%; border: 1px solid #f4f3e917; }
.station-orbit { position: absolute; inset: -13px; border: 1px solid #17211e30; border-radius: 50%; }
.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 0 0 24px; }
.quick-link { border: 1px solid var(--line); background: #fffef86e; border-radius: 13px; padding: 13px 11px; min-height: 78px; display: grid; grid-template-columns: 20px minmax(0,1fr); column-gap: 8px; row-gap: 3px; align-items: center; text-align: left; }
.quick-link > svg { width: 18px; height: 18px; grid-row: 1 / 3; color: #405039; }
.quick-link-label { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; }
.quick-link-count { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; }
.search-box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fffef8; padding: 0 14px; margin-bottom: 20px; }
.search-box > svg { color: #717b6b; width: 19px; height: 19px; }
.search-box input { border: 0; background: none; padding-left: 0; padding-right: 0; height: 50px; min-height: 50px; outline: none; min-width: 0; font-size: 13px; }
.search-box:focus-within { border-color: #748747; box-shadow: 0 0 0 3px #d4f66035; }
.search-box input:focus-visible { outline: none; }
.search-clear { margin-right: -10px; color: #67735b; }
.search-clear svg { width: 17px; height: 17px; }
.section-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 20px 0 9px; }
.section-row h2 { font-size: 18px; font-weight: 800; letter-spacing: -.6px; white-space: nowrap; }
.section-row h2 > small { color: #6d7667; font-size: 11px; font-weight: 500; margin-left: 7px; font-variant-numeric: tabular-nums; }
.text-button { color: #4d622e; font-size: 12px; min-height: 44px; padding: 8px 2px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
.text-button svg { width: 16px; height: 16px; }
.filter-row { display: flex; gap: 7px; overflow-x: auto; padding: 0 0 9px; margin-bottom: 3px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.chip { border-radius: 9px; padding: 10px 12px; white-space: nowrap; font-size: 11px; color: #73796e; min-height: 44px; background: #e8eadf; }
.chip.active { background: #17211e; color: #f4f3e9; font-weight: 650; }
.results-note { font-size: 11px; color: var(--muted); margin: 2px 0 10px; }
.track-list { margin-left: -7px; margin-right: -7px; }
.track { min-height: 78px; display: flex; align-items: center; gap: 8px; padding: 10px 0 10px 7px; border-radius: 13px; border-bottom: 1px solid #17211e08; }
.track.current { background: #e5ebd2; border-bottom-color: transparent; }
.track-play { padding: 0; display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-align: left; min-height: 54px; }
.cover { --label: #d4f660; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #26362e; flex-shrink: 0; color: var(--label); background-image: repeating-radial-gradient(circle at 52% 50%, #25352e 0px, #25352e 3px, #3c4a3f 4px, #25352e 5px); }
.cover::before { content: ""; position: absolute; width: 55%; height: 55%; border-radius: 50%; background: var(--label); }
.cover::after { content: ""; position: absolute; width: 77%; height: 77%; border: 1px solid #ffffff26; border-radius: 50%; }
.cover svg { position: relative; z-index: 1; height: 24%; width: 24%; color: #273528; stroke-width: 2; }
.cover.v1 { --label: #eabf9c; background-color: #4b3833; background-image: repeating-radial-gradient(circle at 52% 50%, #4b3833 0px, #4b3833 3px, #655146 4px, #4b3833 5px); }
.cover.v2 { --label: #c0c8f1; background-color: #323b56; background-image: repeating-radial-gradient(circle at 52% 50%, #323b56 0px, #323b56 3px, #4d5772 4px, #323b56 5px); }
.cover.v3 { --label: #ecc1cc; background-color: #593f4b; background-image: repeating-radial-gradient(circle at 52% 50%, #593f4b 0px, #593f4b 3px, #715562 4px, #593f4b 5px); }
.cover.v4 { --label: #b8ddd5; background-color: #284849; background-image: repeating-radial-gradient(circle at 52% 50%, #284849 0px, #284849 3px, #3c6461 4px, #284849 5px); }
.cover.v5 { --label: #e7d69d; background-color: #4b4936; background-image: repeating-radial-gradient(circle at 52% 50%, #4b4936 0px, #4b4936 3px, #64624c 4px, #4b4936 5px); }
.track-cover { width: 52px; height: 52px; border-radius: 12px; }
.track-info { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
.track-info strong { font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.track.current strong { color: #304820; }
.track-meta { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 5px; min-width: 0; }
.track-meta > span:first-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 170px; }
.track-meta svg { width: 12px; height: 12px; color: #5c7440; }
.track-duration { font-size: 10px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.track .icon-button { width: 44px; height: 44px; color: #68715f; }
.track .icon-button svg { width: 20px; }
.empty { padding: 36px 18px; text-align: center; border: 1px dashed #17211e26; border-radius: 16px; margin: 20px 0; background: #fffef84a; }
.empty > svg { width: 36px; height: 36px; color: #788f50; margin: 0 auto 16px; }
.empty h3 { font-size: 16px; margin-bottom: 8px; }
.empty p { font-size: 12px; color: var(--muted); line-height: 1.9; white-space: pre-line; }
.empty button { margin: 18px auto 0; }
.status-banner { background: #ebe9d8; color: #5e6045; border: 1px solid #d5d5b8; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 12px; display: flex; align-items: flex-start; gap: 9px; }
.status-banner svg { width: 18px; height: 18px; margin-top: 1px; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 650; }
.primary-button { background: var(--text); color: var(--accent); }
.secondary-button { background: var(--raised); color: var(--text); }
.primary-button svg, .secondary-button svg { width: 18px; height: 18px; }
/* A floating record dock sits above a quiet, labelled navigation rail. */
.mini-player { position: fixed; bottom: calc(84px + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 28px); max-width: 636px; background: #17211e; color: #f4f3e9; border-radius: 17px; z-index: 10; height: 74px; display: flex; align-items: center; padding: 10px 10px 11px 12px; box-shadow: 0 8px 24px #17211e26; overflow: hidden; }
.mini-main { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 0; text-align: left; min-height: 50px; }
.mini-cover { width: 46px; height: 46px; border-radius: 50%; outline: 1px solid #ffffff16; outline-offset: 3px; }
.mini-description { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mini-description strong { font-size: 12px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.mini-description > span { font-size: 10px; color: #b3beb0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#miniPlay { background: var(--accent); color: var(--text); width: 40px; height: 44px; margin-left: 8px; border-radius: 12px; }
#miniPlay svg { width: 19px; height: 19px; fill: currentColor; }
#miniNext { width: 40px; height: 44px; }
#miniNext svg { width: 20px; height: 20px; }
.mini-progress { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #ffffff0f; }
.mini-progress i { height: 100%; width: 0; background: var(--accent); display: block; }
.bottom-nav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 680px; display: flex; justify-content: space-around; background: #f4f3e9f5; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 9px 14px calc(10px + var(--safe-bottom)); border-top: 1px solid #17211e0d; z-index: 9; }
.bottom-nav button { display: flex; align-items: center; flex-direction: column; gap: 5px; color: #7a8173; font-size: 10px; font-weight: 600; width: 25%; padding: 3px 8px; min-height: 54px; border-radius: 13px; }
.bottom-nav button > span:first-child { padding: 5px 17px; border-radius: 10px; transition: background .2s; }
.bottom-nav button svg { width: 20px; height: 20px; }
.bottom-nav button[aria-current=page] { color: #17211e; }
.bottom-nav button[aria-current=page] > span:first-child { background: var(--accent); }
/* The listening room. Dark by intention, with every control in reach. */
.player-screen { --text: #f4f3e9; --muted: #a2af9f; --panel: #26332c; --raised: #303e34; --line: #f4f3e918; color-scheme: dark; position: fixed; inset: 0; z-index: 30; color: #f4f3e9; background: #17211e; overflow-y: auto; overscroll-behavior: contain; }
.player-screen::before { content: ""; position: fixed; pointer-events: none; top: -170px; left: 50%; transform: translateX(-50%); width: 540px; height: 540px; background: radial-gradient(circle, #546b3424, transparent 68%); }
.player-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: calc(14px + var(--safe-top)) 16px 10px; max-width: 520px; margin: auto; text-align: center; }
.player-header > .icon-button { border: 1px solid #ffffff16; }
.player-header p { font-size: 11px; color: #aeb9a7; margin-top: 4px; }
.player-header .eyebrow { font-size: 9px; letter-spacing: 2.5px; color: var(--accent); }
.player-body { position: relative; padding: 12px 28px calc(22px + var(--safe-bottom)); max-width: 460px; margin: auto; }
.art-frame { position: relative; margin: 0 auto 25px; max-width: 328px; width: 100%; aspect-ratio: 1; border-radius: 20px; }
.art-frame::before { content: ""; position: absolute; width: 90%; height: 90%; left: 5%; top: 5%; border: 1px solid #d4f66016; border-radius: 50%; }
.large-cover { position: absolute; top: 14%; left: 12%; height: 76%; width: 76%; border-radius: 50%; box-shadow: 0 14px 30px #0005, 0 0 0 10px #ffffff03, 0 0 0 11px #ffffff06; }
.large-cover::before { width: 36%; height: 36%; }
.large-cover::after { width: 91%; height: 91%; border-color: #ffffff16; }
.large-cover svg { width: 13%; height: 13%; opacity: .9; }
.art-badge { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8px; letter-spacing: 3px; color: #9aaa90; }
.player-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.player-title-row > div { min-width: 0; }
.player-title-row h1 { font-size: 24px; font-weight: 750; letter-spacing: -.8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.player-title-row p { color: #aab6a2; font-size: 13px; margin-top: 7px; }
.player-title-row .icon-button { color: #b5c0ae; border: 1px solid #ffffff12; }
.player-title-row .icon-button.active { color: var(--accent); background: #d4f66012; border-color: #d4f66030; }
.quality-row { display: flex; align-items: center; gap: 8px; margin: 15px 0 12px; font-size: 10px; color: #91a087; }
.quality-tag { border: 1px solid #d4f66038; border-radius: 4px; padding: 2px 5px; color: #c5df96; font-size: 9px; }
.seek-wrap input { padding: 0; border: 0; min-height: 32px; height: 32px; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.seek-wrap input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--accent) 0, var(--accent) var(--progress,0%), #ffffff1c var(--progress,0%), #ffffff1c 100%); }
.seek-wrap input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); margin-top: -4px; box-shadow: 0 0 0 4px #d4f66012; }
.seek-wrap input::-moz-range-track { height: 4px; background: #ffffff1c; border-radius: 4px; }
.seek-wrap input::-moz-range-progress { height: 4px; background: var(--accent); }
.seek-wrap input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); }
.time-row { display: flex; justify-content: space-between; font-size: 11px; font-variant-numeric: tabular-nums; color: #a3b095; }
.playback-controls { display: flex; align-items: center; justify-content: space-between; margin: 21px -5px 19px; }
.play-button { height: 76px; width: 76px; border-radius: 26px; background: var(--accent); color: #17211e; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 28px #d4f6600c; }
.play-button svg { width: 29px; height: 29px; fill: currentColor; }
.skip-control svg { width: 26px; height: 26px; fill: currentColor; }
.secondary-control { color: #a8b49e; }
.secondary-control.active { color: var(--accent); background: #d4f66012; }
.secondary-control svg { width: 20px; height: 20px; }
.player-tools { display: flex; justify-content: space-between; border-top: 1px solid #ffffff0e; padding-top: 18px; margin-top: 18px; }
.player-tools button { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; color: #a3b197; min-height: 48px; min-width: 54px; }
.player-tools svg { width: 20px; height: 20px; }
.player-tools button.active { color: var(--accent); }
/* Lyrics live in the same stage: no transport shift when switching views. */
.media-tabs { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 2px; padding: 3px; border: 1px solid #ffffff14; border-radius: 30px; background: #17211eeb; }
.media-tabs button { font-size: 11px; min-width: 62px; min-height: 40px; padding: 8px 14px; border-radius: 24px; color: #9eae94; }
.media-tabs button[aria-selected=true] { background: #d4f660; color: #17211e; font-weight: 700; }
.art-frame.lyrics-mode { background: #1c2922; width: 100%; height: min(328px, calc(100vw - 56px)); aspect-ratio: auto; border: 1px solid #ffffff0c; border-radius: 20px; }
.art-frame.lyrics-mode::before { display: none; }
.lyric-panel { height: 100%; position: relative; border-radius: inherit; overflow: hidden; }
.lyric-viewport { position: absolute; inset: 54px 12px 44px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; scroll-behavior: auto; outline-offset: -3px; mask-image: linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent); -webkit-mask-image: linear-gradient(transparent,#000 12px,#000 calc(100% - 12px),transparent); }
.lyric-viewport::-webkit-scrollbar { display: none; }
.lyric-lines { min-height: 100%; padding: 18px 0; text-align: center; }
.lyric-line { width: 100%; display: block; min-height: 46px; padding: 9px 6px; font-size: 16px; line-height: 1.55; text-align: center; color: #a0b098; transition: color .15s ease; font-weight: 500; white-space: pre-wrap; word-break: break-word; }
.lyric-line.active { color: var(--accent); font-weight: 750; }
.lyric-line:focus-visible { outline-offset: -3px; }
.lyric-plain { font-size: 14px; line-height: 2.1; color: #becab5; white-space: pre-wrap; word-break: break-word; padding: 8px 10px; margin: 0; }
.lyric-state { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 4px; color: #c8d4bd; font-size: 12px; }
.lyric-state p { color: #9eac95; font-size: 11px; max-width: 260px; }
.lyric-state svg { height: 24px; width: 24px; color: #d4f660; margin-bottom: 4px; }
.lyric-state button { min-height: 44px; font-size: 11px; padding: 8px 14px; color: var(--accent); border: 1px solid #d4f66033; border-radius: 24px; margin-top: 3px; }
.lyric-footer { position: absolute; left: 12px; right: 12px; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; min-height: 44px; color: #94a48a; }
.lyric-footer > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lyric-footer button { font-size: 10px; white-space: nowrap; min-height: 44px; padding: 8px 3px; color: #c7d5ba; flex-shrink: 0; }
.lyrics-follow { position: absolute; bottom: 46px; right: 10px; padding: 9px 12px; border: 1px solid #d4f66044; border-radius: 22px; background: #2b3e2bf5; box-shadow: 0 3px 16px #0003; font-size: 11px; color: var(--accent); min-height: 44px; }
.lyric-offset-value { text-align: center; padding: 10px 0 20px; color: #4b651d; font-size: 30px; font-weight: 750; font-variant-numeric: tabular-nums; }
.lyric-offset-help { color: var(--muted); font-size: 12px; line-height: 1.8; margin: 14px 0 8px; }
.lyric-source-detail { font-size: 12px; color: var(--muted); margin: 8px 0 14px; }
.lyric-state-only .lyric-lines { height: 100%; padding: 0; }
.lyric-panel[data-status=plain] .lyric-viewport { mask-image: none; -webkit-mask-image: none; }
.lyric-reference-label, .lyric-reference-provider { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lyric-reference-label { color: #d2d99e; font-size: 9px; line-height: 1.5; }
.lyric-reference-provider { font-size: 9px; line-height: 1.5; }
.lyric-reference-title { font-size: 18px; color: var(--text); margin: 6px 0 15px; line-height: 1.6; word-break: break-word; }
/* Utility views retain the whole player, with readable form hierarchy. */
.sheet-backdrop { position: fixed; inset: 0; background: #17211e99; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); z-index: 40; }
.sheet { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 680px; max-height: 88vh; background: #f4f3e9; color: #17211e; z-index: 41; border-radius: 24px 24px 0 0; padding: 10px 22px calc(24px + var(--safe-bottom)); overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 -20px 80px #17211e33; }
.sheet-handle { margin: 0 auto 10px; width: 32px; height: 4px; background: #17211e26; border-radius: 3px; }
.sheet > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.sheet h2 { font-size: 20px; font-weight: 750; letter-spacing: -.6px; min-width: 0; overflow-wrap: anywhere; }
.sheet #closeSheet { background: #e5e7da; }
.sheet .track { border-bottom: 1px solid var(--line); border-radius: 0; }
.sheet-option { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; min-height: 58px; border-bottom: 1px solid var(--line); font-size: 14px; padding: 13px 4px; }
.sheet-option svg { width: 20px; height: 20px; color: #6c775e; }
.sheet-option.active { color: #405d17; font-weight: 650; }
.sheet-option.active svg { color: #405d17; }
.sheet-option.danger { color: #a04f3d; }
.sheet-description { font-size: 12px; color: var(--muted); margin-bottom: 18px; line-height: 1.8; overflow-wrap: anywhere; }
.sheet-form { display: flex; flex-direction: column; gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 19px; }
.form-field label { font-size: 12px; font-weight: 600; color: #59634e; }
.form-field small { font-size: 11px; color: var(--muted); line-height: 1.8; }
.form-actions { display: flex; gap: 9px; }
.form-actions > * { flex: 1; min-width: 0; }
.form-section { background: #fffef8; border: 1px solid var(--line); padding: 21px 18px; border-radius: 17px; margin: 0 0 16px; }
.form-section h2 { font-size: 16px; font-weight: 750; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.form-section input:not([type=checkbox]), .form-section select { background: #f4f3e9; }
.form-section .primary-button { width: 100%; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 21px; min-height: 44px; cursor: pointer; }
.setting-row strong { font-size: 13px; display: block; font-weight: 650; }
.setting-row small { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.7; }
.setting-row:last-child { margin-bottom: 0; }
.setting-note { font-size: 11px; line-height: 1.9; color: var(--muted); margin-top: 15px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.stat-card { border-radius: 16px; padding: 17px 15px; background: #e5ebd2; min-width: 0; }
.stat-card:first-child { background: #17211e; color: #f4f3e9; }
.stat-card > span { font-size: 11px; color: #667359; }
.stat-card:first-child > span, .stat-card:first-child p { color: #aebb9e; }
.stat-card strong { display: block; font-size: 26px; font-weight: 750; letter-spacing: -1px; margin: 11px 0 5px; }
.stat-card:first-child strong { color: #d4f660; }
.stat-card p { font-size: 10px; line-height: 1.7; color: #768266; }
.cache-bar { height: 4px; border-radius: 3px; background: #17211e16; margin: 12px 0 6px; overflow: hidden; }
.cache-bar i { height: 100%; background: #637b3d; display: block; border-radius: inherit; }
.playlist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.playlist-card { text-align: left; background: #e4e9d5; border-radius: 16px; padding: 18px; min-height: 154px; position: relative; overflow: hidden; }
.playlist-card:nth-child(4n + 2) { background: #e7dcce; }
.playlist-card:nth-child(4n + 3) { background: #dbdfed; }
.playlist-card:nth-child(4n + 4) { background: #dde8e2; }
.playlist-card::after { content: ""; position: absolute; width: 100px; height: 100px; border: 1px solid #17211e13; border-radius: 50%; top: -40px; right: -25px; box-shadow: 0 0 0 12px #17211e05, 0 0 0 25px #17211e03; }
.playlist-card > svg { width: 27px; height: 27px; color: #52633e; margin-bottom: 26px; }
.playlist-card strong { font-size: 14px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.playlist-card small { font-size: 11px; color: #6f7a62; }
.download-row { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.download-row > div { flex: 1; min-width: 0; }
.download-row strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 13px; }
.download-row small { font-size: 11px; color: var(--muted); }
.download-row .cache-bar { margin: 8px 0; }
.download-row > .icon-button { width: 40px; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(172px + var(--safe-bottom)); max-width: calc(100vw - 40px); width: max-content; background: #17211e; color: #f4f3e9; border: 1px solid #ffffff18; border-radius: 14px; padding: 13px 18px; z-index: 60; box-shadow: 0 8px 30px #17211e26; font-size: 13px; line-height: 1.7; white-space: pre-line; text-align: center; }
.spinning svg { animation: spin 1s linear infinite; }
.queue-actions { display: flex; gap: 0; flex-shrink: 0; }
.queue-actions .icon-button { width: 38px; height: 44px; }
.queue-actions svg { width: 16px !important; }
.section-note { color: var(--muted); font-size: 12px; margin: 7px 0 18px; line-height: 1.9; }
.about-mark { display: flex; align-items: center; gap: 12px; }
.about-mark strong { font-size: 15px; }
.about-mark p { font-size: 11px; color: var(--muted); margin-top: 5px; }
.offline-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #708c46; margin-right: 4px; }
.badge-count { font-size: 10px; background: #17211e0a; padding: 3px 8px; border-radius: 7px; color: var(--muted); margin-left: 7px; }
.loading-shimmer { background: linear-gradient(90deg,#e8eadf,#fdfcf4,#e8eadf); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 12px; height: 62px; margin: 13px 0; }
.progress-state { color: #667e37 !important; }
.sort-select { width: auto; padding: 9px 2px; min-height: 44px; font-size: 11px; background: none; border: 0; color: var(--muted); max-width: 87px; }
.library-toolbar { display: flex; align-items: center; gap: 7px; }
.library-toolbar .text-button { min-height: 44px; font-size: 11px; }
.playing-dot { width: 7px; height: 7px; background: #5c7735; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 4px #6b8b3720; }
.small-label { font-size: 11px; color: var(--muted); margin-top: 7px; }
.danger-button { color: #a04f3d; }
.offline-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border-radius: 14px; background: #e5ebd2; margin-bottom: 18px; }
.offline-card p { font-size: 12px; color: #5a7142; }
.offline-card svg { color: #5a7142; width: 18px; height: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (min-width: 600px) {
  body { background: #e6e8dc; }
  .app { min-height: 100vh; background: var(--bg); box-shadow: 0 0 80px #17211e08; }
  .header { padding: calc(27px + var(--safe-top)) 32px 13px; }
  main { padding-left: 32px; padding-right: 32px; }
  .page-heading h1 { font-size: 42px; }
  .hero { min-height: 250px; }
  .hero-text { padding: 27px; }
  .hero h2 { font-size: 34px; }
  .hero-art { width: 240px; height: 240px; right: 12px; top: 26px; }
  .hero-art::before { inset: 78px; }
  .hero-art::after { inset: 114px; }
  .quick-link { padding: 16px; }
  .quick-link-label { font-size: 13px; }
  .track { min-height: 82px; }
  .track-cover { height: 56px; width: 56px; }
  .track-info strong { font-size: 14px; }
  .player-body { padding-top: 8px; }
}
@media (max-width: 350px) {
  .header { padding-left: 17px; padding-right: 17px; }
  main { padding-left: 17px; padding-right: 17px; }
  .page-heading h1 { font-size: 30px; }
  .hero-text { padding: 18px; width: 77%; }
  .hero h2 { font-size: 25px; }
  .hero-art { right: -76px; }
  .quick-link { grid-template-columns: 1fr; padding: 11px 10px; gap: 3px; }
  .quick-link > svg { grid-row: auto; margin-bottom: 4px; }
  .quick-link-label { font-size: 11px; }
  .quick-link-count { font-size: 10px; }
  .section-row h2 { font-size: 16px; }
  .library-toolbar { gap: 5px; }
  .library-toolbar .text-button { font-size: 10px; }
  .sort-select { font-size: 10px; max-width: 75px; }
  .track-play { gap: 9px; }
  .track-info strong { font-size: 12px; }
  .track-duration { display: none; }
  .track-cover { width: 47px; height: 47px; }
  .player-body { padding-left: 22px; padding-right: 22px; }
  .queue-actions .icon-button { width: 34px; }
  .sheet { padding-left: 17px; padding-right: 17px; }
  .form-actions { gap: 7px; }
  .form-actions > button { padding-left: 8px; padding-right: 8px; font-size: 12px; }
}
@media (max-height: 760px) {
  .player-header { padding-top: calc(10px + var(--safe-top)); padding-bottom: 6px; }
  .player-body { padding-top: 7px; }
  .art-frame { max-width: 264px; margin-bottom: 18px; }
  .art-frame.lyrics-mode { height: 264px; max-width: 328px; }
  .player-title-row h1 { font-size: 22px; }
  .quality-row { margin: 10px 0 8px; }
  .playback-controls { margin: 17px -5px; }
  .play-button { width: 68px; height: 68px; border-radius: 23px; }
  .player-tools { margin-top: 13px; padding-top: 14px; }
}
@media (max-height: 700px) {
  .player-header { padding: calc(6px + var(--safe-top)) 15px 6px; }
  .player-header p { font-size: 10px; margin-top: 2px; }
  .player-header .eyebrow { font-size: 8px; }
  .player-body { padding-top: 4px; padding-bottom: calc(14px + var(--safe-bottom)); }
  .art-frame { width: clamp(154px, calc(100vh - 390px), 230px); max-width: 230px; margin-bottom: 14px; }
  .art-frame.lyrics-mode { width: 100%; max-width: 328px; height: clamp(154px, calc(100vh - 390px), 230px); }
  .large-cover { top: 23%; left: 17%; width: 66%; height: 66%; }
  .art-badge { font-size: 7px; letter-spacing: 2px; bottom: -1px; }
  .player-title-row h1 { font-size: 20px; -webkit-line-clamp: 1; }
  .player-title-row p { margin-top: 5px; font-size: 12px; }
  .quality-row { margin: 8px 0 4px; }
  .playback-controls { margin: 12px -5px; }
  .play-button { width: 62px; height: 62px; border-radius: 21px; }
  .player-tools { margin-top: 12px; padding-top: 12px; }
  .player-tools button { min-height: 44px; gap: 6px; }
  .lyric-viewport { inset: 49px 8px 44px; }
  .lyric-line { font-size: 14px; min-height: 44px; padding: 10px 5px; }
  .lyric-lines { padding: 10px 0; }
  .lyric-state { font-size: 11px; gap: 4px; }
  .lyric-state p { font-size: 10px; }
  .lyric-state svg { display: none; }
  .lyric-plain { font-size: 12px; line-height: 1.9; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
}
/* Keep the music in view; the station is a useful shortcut, not a splash screen. */
.quick-link-copy { min-width: 0; }
.station-record-label { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; transform: translateY(-12px); font-size: 10px; font-weight: 800; color: #17211e; letter-spacing: 1px; z-index: 2; }
#main[data-page="library"] { padding-top: 0; }
#main[data-page="library"] .page-heading { margin: 4px 0 15px; }
#main[data-page="library"] .page-heading > .eyebrow { display: none; }
#main[data-page="library"] .page-heading h1 { font-size: 30px; margin: 2px 0 6px; line-height: 1.25; letter-spacing: -1.4px; }
#main[data-page="library"] .page-heading p { font-size: 11px; line-height: 1.6; }
#main[data-page="library"] .hero { min-height: 0; margin-bottom: 12px; border-radius: 17px; }
#main[data-page="library"] .hero-text { padding: 14px 18px; width: 77%; }
#main[data-page="library"] .hero h2 { font-size: 22px; line-height: 1.2; margin: 8px 0 4px; letter-spacing: -.8px; }
#main[data-page="library"] .station-caption { font-size: 10px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 195px; }
#main[data-page="library"] .hero-actions { margin-top: 11px; }
#main[data-page="library"] .hero-art { width: 160px; height: 160px; right: -35px; top: 17px; }
#main[data-page="library"] .hero-art::before { inset: 51px; }
#main[data-page="library"] .hero-art::after { inset: 76px; }
#main[data-page="library"] .hero::after { bottom: 12px; right: 12px; font-size: 8px; color: #819267; }
#main[data-page="library"] .quick-links { gap: 8px; margin-bottom: 16px; }
#main[data-page="library"] .quick-link { padding: 10px 9px; min-height: 59px; column-gap: 7px; border-radius: 11px; }
#main[data-page="library"] .quick-link-label { font-size: 11px; }
#main[data-page="library"] .quick-link-count { font-size: 10px; }
#main[data-page="library"] .search-box { margin-bottom: 10px; }
#main[data-page="library"] .search-box input { height: 48px; min-height: 48px; }
#main[data-page="library"] .section-row { margin-top: 10px; margin-bottom: 5px; }
#main[data-page="library"] .filter-row { padding-bottom: 5px; margin-bottom: 0; }
#main[data-page="library"] .results-note:empty { display: none; }
@media (max-width: 599px) {
  .header { padding-top: calc(13px + var(--safe-top)); padding-bottom: 9px; }
}
@media (max-width: 350px) {
  #main[data-page="library"] .page-heading { margin-bottom: 12px; }
  #main[data-page="library"] .page-heading h1 { font-size: 28px; }
  #main[data-page="library"] .hero-text { padding: 12px 14px; width: 81%; }
  #main[data-page="library"] .hero h2 { font-size: 21px; }
  #main[data-page="library"] .hero-art { right: -54px; }
  #main[data-page="library"] .station-caption { max-width: 172px; }
  #main[data-page="library"] .quick-link { grid-template-columns: 1fr; min-height: 56px; text-align: center; gap: 0; padding: 8px 4px; }
  #main[data-page="library"] .quick-link > svg { display: none; }
  #main[data-page="library"] .quick-links { margin-bottom: 13px; }
}
@media (min-width: 600px) {
  #main[data-page="library"] .page-heading h1 { font-size: 36px; }
  #main[data-page="library"] .hero-text { padding: 20px 24px; }
  #main[data-page="library"] .hero h2 { font-size: 28px; }
  #main[data-page="library"] .hero-art { width: 218px; height: 218px; top: 3px; right: 30px; }
  #main[data-page="library"] .hero-art::before { inset: 70px; }
  #main[data-page="library"] .hero-art::after { inset: 103px; }
}
/* Controls remain thumb-friendly even where the artwork is compact. */
#miniPlay, #miniNext, .download-row > .icon-button, .queue-actions .icon-button { width: 44px; min-width: 44px; }
.media-tabs button { min-height: 44px; }
.player-screen button:focus-visible, .player-screen input:focus-visible { outline-color: #d4f660; }

/* The account is a personal music passport; settings stay fully available below it. */
.account-card { margin: 0 0 25px; padding: 21px; background: #e9efdb; border: 1px solid #d8e1c9; border-radius: 22px; overflow: hidden; scroll-margin-top: 20px; }
.account-topline { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.account-topline .eyebrow { color: #6b795b; font-size: 8px; letter-spacing: 1.7px; }
.account-badge { flex-shrink: 0; color: #566548; font-size: 10px; border: 1px solid #c8d4b8; padding: 4px 8px; border-radius: 20px; }
.account-identity { display: flex; gap: 12px; align-items: center; margin-bottom: 19px; }
.account-avatar { flex-shrink: 0; display: flex; align-items: center; justify-content: center; height: 49px; width: 49px; border-radius: 17px; background: #17211e; color: #d4f660; font-size: 22px; font-weight: 700; }
.account-avatar svg { height: 23px; width: 23px; }
.account-copy { min-width: 0; }
.account-copy h2 { font-size: 19px; line-height: 1.4; letter-spacing: -.5px; overflow-wrap: anywhere; margin: 0 0 4px; }
.account-copy p { font-size: 10px; line-height: 1.8; color: #67765a; }
.account-sync-status { display: flex; gap: 9px; align-items: flex-start; border-top: 1px solid #ccdabd; padding-top: 16px; }
.account-status-icon { display: flex; flex-shrink: 0; color: #526740; padding-top: 2px; }
.account-status-icon svg { width: 15px; height: 15px; }
.account-sync-status strong { display: block; font-size: 12px; font-weight: 650; }
.account-sync-status p { font-size: 11px; line-height: 1.8; color: #65745b; margin: 4px 0 0; overflow-wrap: anywhere; }
.account-last-sync { font-size: 10px; line-height: 1.7; margin: 9px 0 0 24px; color: #78846f; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.account-actions:empty { display: none; }
.account-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 12px; padding: 9px 11px; font: inherit; font-size: 11px; }
.account-actions button svg { width: 15px; height: 15px; flex-shrink: 0; }
.account-sync-button { flex: 1; background: #17211e; color: #edf5dd; border: 1px solid #17211e; }
.account-switch-button { background: transparent; color: #5e6e51; border: 1px solid #c8d4b8; }
.account-import-button { flex-basis: 100%; background: #f5f7ed; color: #556844; border: 1px dashed #bacba5; }
.account-actions button:disabled { opacity: .5; cursor: default; }
.account-auth { margin-top: 16px; padding-top: 16px; border-top: 1px solid #ccdabd; }
.account-auth .form-field { margin-bottom: 13px; }
.account-auth input { background: #f7f9ef; border-color: #d4dfc6; }
.account-auth input[readonly] { background: #e1e8d5; color: #5d6b52; }
.account-auth .primary-button { width: 100%; margin-top: 1px; }
.account-auth-note { font-size: 10px; line-height: 1.9; color: #6d7b61; margin: 11px 0 0; }
.account-card[data-status="error"] .account-status-icon, .account-card[data-status="login_required"] .account-status-icon { color: #a3683f; }
.collection-account { display: flex; width: 100%; align-items: center; gap: 11px; border: 1px solid #dce3d2; border-radius: 14px; background: #edf1e2; color: #526345; padding: 13px 14px; margin: -3px 0 20px; text-align: left; font: inherit; }
.collection-account > svg { width: 19px; height: 19px; flex-shrink: 0; }
.collection-account > svg:last-child { width: 15px; height: 15px; }
.collection-account > span { min-width: 0; flex: 1; }
.collection-account strong { display: block; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.collection-account small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.7; color: #7c8870; }
@media (max-width: 350px) {
 .account-card { padding: 17px; border-radius: 18px; }
 .account-topline { gap: 6px; margin-bottom: 18px; }
 .account-topline .eyebrow { font-size: 7px; letter-spacing: 1px; }
 .account-copy h2 { font-size: 17px; }
 .account-identity { gap: 10px; }
 .account-avatar { width: 43px; height: 43px; border-radius: 14px; }
 .account-actions { gap: 6px; }
 .account-actions button { font-size: 10px; padding: 9px; }
}
.account-auth .primary-button:disabled { opacity: .6; cursor: default; }

/* Persistent record animation freezes on pause/buffering and survives progress updates. */
.large-cover,.mini-cover,.station-disc { animation: record-turn 16s linear infinite; animation-play-state: paused; }
.is-playing .large-cover,.is-playing .mini-cover,.is-playing .station-disc { animation-play-state: running; }
.large-cover { isolation: isolate; border: 1px solid #ffffff20; }
.large-cover::before { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 3px,#ffffff0b 4px 5px),conic-gradient(from 20deg,transparent,#ffffff22 35deg,transparent 65deg,transparent 180deg,#ffffff15 215deg,transparent 245deg); pointer-events:none; }
.large-cover::after { content:""; position:absolute; width:10%; height:10%; border-radius:50%; background:#17211e; border:5px solid #f4f3e9aa; box-shadow:0 0 0 13px #17211e29; left:45%; top:45%; }
.large-cover > svg { transform:translateY(-45%); opacity:.65; }
.mini-cover { border-radius:50%; }
@keyframes record-turn { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.auth-tabs { display:flex; gap:5px; padding:4px; background:#dce6cf; border-radius:12px; margin-bottom:17px; }
.auth-tabs button { flex:1; min-height:40px; border-radius:9px; font:inherit; font-size:12px; color:#65745b; }
.auth-tabs button.active { background:#f7f9ef; color:#17211e; box-shadow:0 2px 6px #17211e0d; }
.qq-login { display:block; width:100%; min-height:46px; background:#f7f9ef; border:1px solid #c7d6b8; border-radius:13px; margin-top:16px; font:inherit; font-size:13px; }
.qq-login:disabled { opacity:.5; cursor:not-allowed; }
.account-admin-link { display:block; color:#36572b; font-size:12px; margin-top:17px; }
.account-auth > .account-import-button { margin-top:15px; padding:12px; width:100%; border-radius:10px; font:inherit; font-size:11px; }
@media (prefers-reduced-motion:reduce) { .large-cover,.mini-cover,.station-disc { animation:none!important; } }

/* Reserve room only for controls that are actually visible. */
body.has-mini-player main { padding-bottom: calc(190px + var(--safe-bottom)); }
input:not([type=range]):not([type=checkbox]), textarea, select { scroll-margin-block: 24px; }
body.keyboard-open .sheet { bottom: var(--keyboard-inset, 0px); max-height: calc(var(--visible-height, 100vh) - 16px); }
@media (max-width: 999px) {
 body.keyboard-open .bottom-nav { display: none; }
 body.keyboard-open main { padding-bottom: 24px; }
 body.keyboard-open .toast { bottom: calc(var(--keyboard-inset, 0px) + 16px); }
}