/* ==========================================================================
   Aura Music · Redesign "Signal"  (独立样式表，替代 current-style.css)
   - 面向真实 DOM 的 class / id 编写，覆盖 JS 依赖的全部状态类
     (.active .open .hidden .show .unlocked .liked .playing .pressed …)
   - 字体沿用用户设置的 --font-custom / --font-lyrics
   - OLED：body.oled-pure-black 时所有底色为 #000，氛围背景关闭
   ========================================================================== */

/* ---------- 0. Tokens ---------- */
:root {
  --bg: #100f0e;
  --panel: #171615;
  --panel-2: #1e1d1b;
  --panel-3: #262422;
  --line: rgba(255, 250, 240, 0.08);
  --line-2: rgba(255, 250, 240, 0.14);
  --text: #f3efe8;
  --text-2: #a39d93;
  --text-3: #6b665e;
  --accent: #e8643c;
  --accent-hi: #ff7b52;
  --accent-soft: rgba(232, 100, 60, 0.14);
  --on-accent: #1a0c07;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .55);
  --side-w: 236px;
  --bar-h: 84px;
  --tab-h: 56px;
  --mini-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font-ui: var(--font-custom, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif);
  --font-lyrics: var(--font-custom, var(--font-ui));
  --lyrics-font-scale: 1;
  --lyrics-font-weight: 500;
}
body.oled-pure-black {
  --bg: #000;
  --panel: #000;
  --panel-2: #0b0b0b;
  --panel-3: #141414;
}

/* ---------- 1. Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
  -webkit-tap-highlight-color: transparent;
}
button, input, label { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
img { display: block; }
svg { flex-shrink: 0; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.eyebrow {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* 氛围背景：取封面色的柔和光，不喧宾夺主 */
.ambient-bg {
  position: fixed;
  inset: -10%;
  z-index: 0;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  filter: blur(var(--custom-bg-blur, 80px)) saturate(1.1);
  opacity: .28;
  pointer-events: none;
}
.ambient-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 70% 0%, transparent 0%, rgba(16, 15, 14, .55) 60%),
    rgba(16, 15, 14, var(--custom-overlay-darkness, .55));
}
body.oled-pure-black .ambient-bg,
body.oled-pure-black .ambient-overlay { display: none; }

/* ---------- 2. App shell (desktop: sidebar + content + console) ---------- */
.player-app {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--bar-h);
  grid-template-areas: "side main" "bar bar";
}
.app-header { grid-area: side; }
.app-body   { grid-area: main; position: relative; overflow: hidden; }
.player-bar { grid-area: bar; }

/* ---------- 3. Sidebar ---------- */
.app-header {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 16px 20px;
  border-right: 1px solid var(--line);
  background: rgba(16, 15, 14, .6);
  min-height: 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.brand-logo {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
}
.brand-logo svg { width: 16px; height: 16px; }
.brand-name { font-size: 17px; font-weight: 750; letter-spacing: -.02em; }
.brand-name span { font-weight: 450; color: var(--text-2); }

.header-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-tab {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 12px;
  border-radius: 10px;
  font-size: 14px; font-weight: 550;
  color: var(--text-2);
  text-align: left;
  transition: background .15s, color .15s;
}
.nav-tab svg { width: 17px; height: 17px; margin: 0 !important; vertical-align: 0 !important; opacity: .9; }
.nav-tab:hover { color: var(--text); background: rgba(255, 250, 240, .04); }
.nav-tab.active { color: var(--text); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); }
.nav-tab.active svg { color: var(--accent); opacity: 1; }

.header-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.import-menu-wrap { position: relative; flex: 1 1 100%; }
.import-btn-main, .vip-login-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 12px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 550;
  color: var(--text);
  background: var(--panel-2);
  transition: background .15s;
}
.import-btn-main:hover { background: var(--panel-3); }
.import-btn-main .chevron-arrow { margin-left: auto; color: var(--text-3); transition: transform .2s; }
.import-menu-wrap.open .chevron-arrow { transform: rotate(180deg); }
.vip-login-btn { flex: 1 1 100%; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.vip-login-btn svg { color: var(--text-3); }
.vip-login-btn.active { color: var(--text); }
.vip-login-btn.active svg { color: var(--accent); }
.vip-login-btn:hover { background: rgba(255, 250, 240, .04); }
.theme-icon-btn {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--text-2);
  transition: background .15s, color .15s;
}
.theme-icon-btn:hover { background: var(--panel-2); color: var(--text); }
.theme-icon-btn * { pointer-events: none; }
#navOledBtn.active { color: var(--accent); background: var(--accent-soft); }
.brand-menu-btn { display: contents; cursor: default; }
.nav-more-btn { display: none; }

.import-dropdown-card {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 8px);
  z-index: 50;
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-2);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  opacity: 0; pointer-events: none; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}
.import-menu-wrap.open .import-dropdown-card { opacity: 1; pointer-events: auto; transform: none; }
.import-option-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.import-option-item:hover { background: var(--panel-3); }
.option-icon-box { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-3); color: var(--text-2); }
.option-info { display: flex; flex-direction: column; min-width: 0; }
.option-name { font-size: 13px; font-weight: 600; }
.option-hint { font-size: 11.5px; color: var(--text-3); }
.option-split-line { height: 1px; margin: 4px 6px; background: var(--line); }

/* ---------- 4. Views ---------- */
.view-panel {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.view-panel.active { opacity: 1; visibility: visible; pointer-events: auto; }
.page {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 44px 48px 72px;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.page-title { font-size: 40px; font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.section-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.section-note { font-size: 13px; color: var(--text-3); }

/* ---------- 5. Now Playing ---------- */
#playerView .page { min-height: 100%; display: flex; align-items: center; }
.player-main-grid {
  --stage: clamp(280px, min(36vw, calc(100vh - var(--bar-h) - 160px)), 460px);
  width: 100%;
  display: grid;
  grid-template-columns: var(--stage) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.turntable-container { position: relative; width: var(--stage); aspect-ratio: 1; }
.style-centerpiece { width: 100%; height: 100%; align-items: center; justify-content: center; }
.mini-visualizer { display: none; }

/* 5.1 磁带形态：J 卡封面 + 卡带实物，封面为视觉主体 */
.cassette-wrapper { position: relative; }
.aura-jcard {
  position: absolute; inset: 0 12% 12% 0;
  border-radius: 6px; overflow: hidden;
  background: var(--panel-2);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}
.aura-jcard img { width: 100%; height: 100%; object-fit: cover; }
.aura-jcard::after { /* J 卡脊线 */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 10%;
  background: linear-gradient(90deg, rgba(0,0,0,.35), transparent);
}
.cassette-body {
  position: absolute; right: 0; bottom: 0; z-index: 1;
  width: 370px; height: 236px; padding: 14px;
  display: flex; flex-direction: column;
  transform-origin: right bottom;
  transform: scale(calc(var(--stage) / 640px * 1.15)) rotate(-3deg);
  background: #1b1a18;
  border: 1px solid rgba(255,250,240,.1);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.cassette-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2e2b27; }
.cassette-screw.top-left { top: 9px; left: 9px; } .cassette-screw.top-right { top: 9px; right: 9px; }
.cassette-screw.bottom-left { bottom: 9px; left: 9px; } .cassette-screw.bottom-right { bottom: 9px; right: 9px; }
.cassette-label { position: relative; padding: 8px 14px; margin-bottom: 10px; border-radius: 3px; background: #efe9de; color: #1b1a18; border-top: 3px solid var(--accent); }
.cassette-brand-row { display: flex; justify-content: space-between; align-items: center; }
.cassette-brand-name { font: 800 12px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .14em; }
.cassette-type { font-size: 9.5px; font-weight: 650; color: #6b665e; letter-spacing: .06em; }
.cassette-spec-sub { font: 700 10px/1.6 ui-monospace, Menlo, monospace; letter-spacing: .08em; }
.cassette-vintage-lines { display: grid; gap: 3px; margin-top: 4px; max-width: 240px; }
.cassette-line-rule { height: 1px; background: rgba(27,26,24,.2); }
.cassette-side-badge { position: absolute; right: 10px; bottom: 7px; padding: 2px 6px; border-radius: 2px; background: #1b1a18; color: #efe9de; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.cassette-window { position: relative; height: 84px; display: flex; align-items: center; justify-content: space-around; padding: 0 16px; border-radius: 6px; background: #0b0a09; overflow: hidden; }
.tape-ribbon-line { position: absolute; top: 36px; left: 35px; right: 35px; height: 12px; background: #2a2420; }
.tape-reel { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; }
.reel-tape-pack { position: absolute; inset: 0; border-radius: 50%; background: #2c2622; }
.reel-tape-pack.small-pack { inset: 7px; }
.reel-cog { position: relative; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #efe9de; display: grid; place-items: center; }
.cog-tooth { position: absolute; width: 6px; height: 6px; background: #6b665e; clip-path: polygon(50% 0, 0 100%, 100% 100%); }
.cog-tooth:nth-child(1) { transform: rotate(0) translateY(-9px); }
.cog-tooth:nth-child(2) { transform: rotate(120deg) translateY(-9px); }
.cog-tooth:nth-child(3) { transform: rotate(240deg) translateY(-9px); }
.cassette-wrapper.playing .reel-cog, .is-playing .reel-cog { animation: aura-spin 2.4s linear infinite; }
.cassette-counter-hud { z-index: 3; padding: 3px 9px; border-radius: 4px; background: #000; text-align: center; }
.hud-label { display: block; font-size: 8px; letter-spacing: .12em; color: var(--text-3); }
.hud-digits { font: 800 14px/1.2 ui-monospace, Menlo, monospace; color: var(--accent); }
.cassette-bottom-dock { height: 22px; margin-top: 10px; display: flex; align-items: center; justify-content: space-around; border-radius: 4px; background: #141311; }
.dock-hole { width: 8px; height: 8px; border-radius: 50%; background: #090807; }
.dock-head-groove { width: 64px; height: 9px; border-radius: 3px; background: #0b0a09; }
@keyframes aura-spin { to { transform: rotate(360deg); } }

/* 5.2 其他形态：都以封面为主体，去掉霓虹与玩具感 */
.vinyl-wrapper { position: relative; }
.vinyl-disc { position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #151412 0 30%, #0c0b0a 31% 100%); box-shadow: var(--shadow-lg); }
.vinyl-grooves { position: absolute; inset: 6%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); }
.vinyl-disc.playing { animation: aura-spin 20s linear infinite; }
.vinyl-center-cover { position: relative; width: 52%; height: 52%; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 6px #0c0b0a; }
.vinyl-center-cover img, .lp-poster-art img, .capsule-art-box img, .holo-core-art img { width: 100%; height: 100%; object-fit: cover; }
.tonearm { position: absolute; top: -4%; right: -2%; width: 16%; height: 40%; transform-origin: 50% 8%; transform: rotate(-28deg); transition: transform .6s; z-index: 3; pointer-events: none; }
.tonearm.playing { transform: rotate(-4deg); }
.tonearm-base { width: 60%; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; background: #3a3732; }
.tonearm-rod { width: 6%; height: 75%; margin: 0 auto; background: #8f8a81; }
.tonearm-head { width: 40%; height: 12%; margin: 0 auto; border-radius: 3px; background: #2b2926; }
.lp-sleeve-frame { position: relative; width: 100%; height: 100%; }
.lp-poster-art { position: relative; z-index: 2; width: 92%; height: 92%; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-lg); }
.lp-vinyl-protrude { position: absolute; right: 0; top: 6%; width: 80%; height: 80%; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 14%, #0c0b0a 15% 100%); }
.lp-sleeve-sheen { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%); }
.lp-sleeve-badge { position: absolute; left: 12px; top: 12px; padding: 3px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .1em; background: rgba(0,0,0,.6); }
.lp-sleeve-footer { position: absolute; left: 0; right: 8%; bottom: -26px; display: flex; justify-content: space-between; font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--text-3); }
.capsule-monolith-card { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.capsule-art-box { width: 86%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); }
.capsule-art-halo { display: none; }
.capsule-monolith-status { display: flex; align-items: center; gap: 8px; font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .1em; color: var(--text-3); }
.zen-live-dot, .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hologram-disc { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.holo-ring { position: absolute; border-radius: 50%; border: 1px solid var(--line-2); }
.holo-outer { inset: 0; } .holo-inner { inset: 8%; border-style: dashed; }
.holo-core-art { width: 64%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); }
.holo-refract-glare, .holo-particles { display: none; }

/* 5.3 信息区 */
.song-meta-panel { min-width: 0; display: flex; flex-direction: column; }
.song-meta-panel .eyebrow { margin-bottom: 18px; color: var(--accent); }
.song-meta-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.song-title-group { min-width: 0; }
.song-title {
  font-size: clamp(40px, 5vw, 68px); font-weight: 780; line-height: 1.02; letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.song-artist-wrap { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; cursor: pointer; color: var(--text-2); }
.song-artist { font-size: 19px; font-weight: 500; }
.song-artist-wrap:hover { color: var(--text); }
.meta-fav-btn {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: color .15s, background .15s;
}
.meta-fav-btn:hover { color: var(--text); background: rgba(255,250,240,.04); }
.meta-fav-btn.liked { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.meta-fav-btn.liked svg, .heart-btn.liked svg, .fav-row-heart-btn.liked svg { fill: currentColor; }
.audio-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 34px; }
.tag-pill {
  padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-2); background: rgba(255,250,240,.05);
}
#audioEqTag { cursor: pointer; }
#audioEqTag:hover { color: var(--text); background: rgba(255,250,240,.09); }
.compact-lyrics-box { display: flex; flex-direction: column; gap: 10px; padding-left: 18px; border-left: 2px solid var(--accent); cursor: pointer; }
.lyrics-line { font-size: 16px; line-height: 1.5; color: var(--text-3); min-height: 1.5em; overflow-wrap: anywhere; }
.lyrics-line.current { font-size: 22px; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.quick-eq-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 34px; }
.eq-btn { height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 550; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); transition: all .15s; }
.eq-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.eq-btn.active { color: var(--on-accent); background: var(--text); box-shadow: none; }

/* ---------- 6. Lyrics ---------- */
.lyrics-full-container { max-width: 860px; height: 100%; margin: 0 auto; padding: 28px 40px 0; display: flex; flex-direction: column; }
.lyrics-top-nav { display: flex; justify-content: space-between; align-items: center; }
.lyrics-close-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.lyrics-close-btn:hover { color: var(--text); }
.lyrics-tools-toggle-btn { display: none; }
.lyrics-track-info { text-align: center; margin: 18px 0 8px; }
.lyrics-track-info h2 { font-size: 28px; font-weight: 750; letter-spacing: -.03em; }
.lyrics-track-info p { margin-top: 4px; color: var(--text-2); cursor: pointer; }
.lyrics-quick-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.action-pill-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.action-pill-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.action-pill-btn.highlight { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.action-pill-btn.active { color: var(--text); background: var(--panel-3); }
.lyrics-offset-controller { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.offset-label { color: var(--text-3); margin-right: 4px; }
.offset-btn, .offset-btn-reset { height: 24px; padding: 0 7px; border-radius: 6px; font-size: 11.5px; color: var(--text-2); }
.offset-btn:hover, .offset-btn-reset:hover { color: var(--text); background: var(--panel-3); }
.offset-val { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 650; }
.lyrics-scroll-wrapper { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; padding: 30vh 0 40vh;
  mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 78%, transparent); scrollbar-width: none; }
.lyrics-content { display: flex; flex-direction: column; gap: 18px; }
.lyrics-row { position: relative; display: flex; justify-content: center; padding: 4px 96px; }
.lr-text { font-family: var(--font-lyrics); font-size: calc(24px * var(--lyrics-font-scale)); font-weight: var(--lyrics-font-weight); line-height: 1.45; text-align: center; color: var(--text-3); cursor: pointer; transition: color .25s, font-size .25s; }
.lyrics-row:hover .lr-text { color: var(--text-2); }
.lyrics-row.active .lr-text { color: var(--text); font-size: calc(32px * var(--lyrics-font-scale)); font-weight: calc(var(--lyrics-font-weight) + 200); }
.lr-pin-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; color: var(--text-2); background: var(--panel-2); opacity: 0; pointer-events: none; transition: opacity .15s; }
.lyrics-row:hover .lr-pin-btn { opacity: 1; pointer-events: auto; }
.lyrics-content.axis-left .lyrics-row { justify-content: flex-start; padding-left: 0; }
.lyrics-content.axis-left .lr-text { text-align: left; }

/* ---------- 7. Cloud Library ---------- */
.online-container { display: flex; flex-direction: column; gap: 44px; }
.online-header-bar { display: flex; gap: 10px; align-items: center; }
.online-search-box {
  flex: 1; min-width: 0; height: 52px;
  display: flex; align-items: center; gap: 12px;
  padding: 0 6px 0 18px; border-radius: 999px;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-3);
  transition: box-shadow .15s, background .15s;
}
.online-search-box:focus-within { background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 4px var(--accent-soft); }
.online-search-box input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: 15.5px; color: var(--text); }
.online-search-box input::placeholder { color: var(--text-3); }
.online-search-clear-btn { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-3); color: var(--text-2); }
.online-search-btn { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 650; background: var(--text); color: var(--bg); }
.online-search-btn:hover { background: #fff; }
.custom-sheet-btn { height: 52px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 550; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); white-space: nowrap; }
.custom-sheet-btn:hover { color: var(--text); background: rgba(255,250,240,.04); }

/* 榜单：方形抽象封面 + 下方文字，像唱片目录 */
.online-charts-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.chart-cube-card { display: flex; flex-direction: column; gap: 12px; cursor: pointer; min-width: 0; }
.cube-visual {
  position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: var(--panel-2) center / cover no-repeat;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s;
}
.cube-bg-new    { background-image: url(assets/covers/chart-new.svg); }
.cube-bg-hot    { background-image: url(assets/covers/chart-hot.svg); }
.cube-bg-surge  { background-image: url(assets/covers/chart-surge.svg); }
.cube-bg-origin { background-image: url(assets/covers/chart-origin.svg); }
.cube-bg-pop    { background-image: url(assets/covers/chart-pop.svg); }
.cube-bg-acg    { background-image: url(assets/covers/chart-acg.svg); }
.cube-bg-pure   { background-image: url(assets/covers/chart-pure.svg); }
.cube-icon { display: none; }
.cube-play-hint, .radio-card-play-btn {
  position: absolute; right: 10px; bottom: 10px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(6px);
  transition: opacity .18s, transform .18s;
}
.chart-cube-card:hover .cube-visual { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.chart-cube-card:hover .cube-play-hint, .chart-cube-card.active .cube-play-hint { opacity: 1; transform: none; }
.chart-cube-card.active .cube-visual { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), var(--shadow); }
.cube-info { min-width: 0; }
.cube-title { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.chart-cube-card.active .cube-title { color: var(--accent); }
.cube-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* 曲目区（由 app.js 渲染 .am-* 结构） */
.online-songs-container { min-height: 200px; }
.am-songs-section { display: flex; flex-direction: column; }
.am-section-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.am-section-title-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; }
.am-section-title { font-size: 22px; font-weight: 720; letter-spacing: -.025em; }
.am-section-chevron { color: var(--text-3); }
.am-back-to-chart-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.am-play-all-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--accent); color: var(--on-accent); }
.am-play-all-pill:hover { background: var(--accent-hi); }
.am-track-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.am-track-row:hover { background: var(--panel-2); }
.am-track-row:active { background: var(--panel-3); }
.am-track-row.playing .am-track-name { color: var(--accent); }
.am-track-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
.am-track-thumb { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--panel-3); flex-shrink: 0; }
.am-track-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.am-track-name { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-track-artist { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-track-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--text-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.am-more-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.am-more-btn:hover, .am-track-row:hover .am-more-btn { color: var(--text); }
.online-loading-spinner, .artist-loading-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 72px 0; font-size: 13px; color: var(--text-3); }
.spinner-ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: aura-spin .8s linear infinite; }
.artist-search-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; margin-bottom: 24px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.artist-search-card:hover { background: var(--panel-2); }
.asc-left { display: flex; align-items: center; gap: 14px; }
.asc-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.asc-name { font-size: 16px; font-weight: 700; }
.asc-tag { font-size: 12px; color: var(--accent); }
.asc-right { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-2); }

/* ---------- 8. Radio ---------- */
.radio-page-container { display: flex; flex-direction: column; gap: 52px; }
.radio-hero-banner { padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.radio-badge-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.radio-hero-title { margin: 16px 0 12px; font-size: clamp(34px, 4.4vw, 52px); font-weight: 780; line-height: 1.04; letter-spacing: -.04em; max-width: 14ch; }
.radio-hero-subtitle { max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.radio-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.radio-start-flow-btn, .rh-action-btn, .fav-play-all-btn, .artist-action-btn.primary {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 14px; font-weight: 650;
  background: var(--accent); color: var(--on-accent);
  transition: background .15s;
}
.radio-start-flow-btn:hover, .rh-action-btn:hover, .fav-play-all-btn:hover, .artist-action-btn.primary:hover { background: var(--accent-hi); }
.radio-heartbeat-btn, .fav-import-btn, .artist-action-btn.radio {
  display: inline-flex; align-items: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: 14px; font-weight: 550;
  color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2);
}
.radio-heartbeat-btn:hover, .fav-import-btn:hover, .artist-action-btn.radio:hover { background: rgba(255,250,240,.05); }
.radio-section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.radio-sec-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.radio-sec-icon { display: none; }
.radio-section-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.radio-section-tag { font-size: 13px; color: var(--text-3); }
.radio-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px 20px; }
.radio-card { display: flex; flex-direction: column; gap: 12px; cursor: pointer; min-width: 0; }
.radio-card-visual { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--panel-2) center / cover no-repeat; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.radio-card-visual.sad-bg  { background-image: url(assets/covers/radio-sad.svg); }
.radio-card-visual.rock-bg { background-image: url(assets/covers/radio-rock.svg); }
.radio-card-visual.kpop-bg { background-image: url(assets/covers/radio-kpop.svg); }
.radio-card-visual.rain-bg { background-image: url(assets/covers/radio-rain.svg); }
.radio-card-visual.lofi-bg { background-image: url(assets/covers/radio-lofi.svg); }
.radio-card-visual.western-bg, .radio-card-visual.cafe-bg { background-image: url(assets/covers/radio-west.svg); }
.radio-card-overlay, .radio-card-icon { display: none; }
.radio-card:hover .radio-card-visual { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.radio-card:hover .radio-card-play-btn, .radio-card-play-btn:focus-visible { opacity: 1; transform: none; }
.radio-card.active .radio-card-visual { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent), var(--shadow); }
.radio-card-name { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.radio-card-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.radio-card-badge { display: block; margin-top: 8px; font-size: 11.5px; color: var(--text-3); letter-spacing: .02em; }
.radio-heartbeat-card { display: flex; align-items: center; gap: 22px; padding: 20px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.rh-cover-wrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow); }
.rh-cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.rh-pulse-ring { display: none; }
.rh-info { flex: 1; min-width: 0; }
.rh-tag { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.rh-title { margin-top: 8px; font-size: 22px; font-weight: 720; letter-spacing: -.02em; }
.rh-desc { margin-top: 4px; font-size: 14px; color: var(--text-2); }

/* ---------- 9. Favorites ---------- */
.favorites-container { display: flex; flex-direction: column; }
.favorites-hero { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 36px; }
.fav-hero-cover { width: 216px; height: 216px; border-radius: 8px; background: url(assets/covers/liked.svg) center / cover; box-shadow: var(--shadow-lg); }
.fav-hero-cover svg { display: none; }
.fav-hero-info { min-width: 0; display: flex; flex-direction: column; }
.fav-hero-badge { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.fav-hero-title { margin: 10px 0 12px; font-size: clamp(36px, 5vw, 64px); font-weight: 780; line-height: 1.02; letter-spacing: -.045em; }
.fav-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-2); }
.fav-meta-dot { color: var(--text-3); }
.fav-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fav-tabs-bar { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.fav-tab-pill { padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--text-2); box-shadow: inset 0 -2px 0 transparent; }
.fav-tab-pill:hover { color: var(--text); }
.fav-tab-pill.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.aura-table-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 96px; gap: 14px; padding: 10px 10px; font-size: 11px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line); }
.aura-table-head span:last-child { text-align: right; padding-right: 44px; }
.favorites-songs-list { display: flex; flex-direction: column; padding-top: 6px; }
.fav-song-row { display: grid; grid-template-columns: 40px 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.fav-song-row:hover { background: var(--panel-2); }
.fav-song-idx { text-align: center; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fav-song-row.playing .fav-song-idx, .fav-song-row.playing .fav-song-title { color: var(--accent); }
.fav-song-cover { width: 46px; height: 46px; border-radius: 6px; object-fit: cover; background: var(--panel-3); }
.fav-song-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fav-song-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-song-artist { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-song-actions { display: flex; align-items: center; gap: 14px; }
.fav-song-time { width: 44px; text-align: right; font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.fav-row-heart-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text-3); }
.fav-row-heart-btn:hover { color: var(--text); }
.fav-row-heart-btn.liked { color: var(--accent); }
.fav-empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 0; text-align: center; color: var(--text-2); }
.fav-empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fav-empty-title { font-size: 17px; font-weight: 700; color: var(--text); }
.fav-empty-sub { font-size: 13px; max-width: 34ch; }

/* ---------- 10. Artist ---------- */
.artist-page-container { height: 100%; overflow-y: auto; }
.artist-nav-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 28px; background: rgba(16,15,14,.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.artist-back-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; font-size: 13px; color: var(--text-2); }
.artist-back-btn:hover { color: var(--text); background: var(--panel-2); }
.artist-nav-title { font-size: 14px; font-weight: 650; }
.artist-nav-spacer { width: 72px; }
.artist-hero-section { position: relative; min-height: 340px; display: flex; align-items: flex-end; padding: 48px; overflow: hidden; }
.artist-hero-bg { position: absolute; inset: 0; background: var(--panel) center 25% / cover no-repeat; }
.artist-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(16,15,14,.1), rgba(16,15,14,.65) 55%, var(--bg)); }
.artist-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1084px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.artist-hero-avatar-wrap { display: none; }
.artist-hero-tag { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--accent); }
.artist-hero-name { margin: 10px 0 8px; font-size: clamp(40px, 6vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.artist-hero-stats { font-size: 14px; color: var(--text-2); }
.artist-hero-actions { display: flex; align-items: center; gap: 10px; }
.artist-circle-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.artist-circle-btn:hover { color: var(--text); }
.artist-circle-btn.active { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.artist-body-content { max-width: 1180px; margin: 0 auto; padding: 32px 48px 80px; }
.artist-section-group { margin-bottom: 44px; }
.artist-sec-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.artist-sec-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.artist-sec-more-btn { font-size: 13px; font-weight: 600; color: var(--accent); }
.artist-latest-card { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.alc-artwork-wrap { width: 96px; height: 96px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.alc-artwork { width: 100%; height: 100%; object-fit: cover; }
.alc-details { flex: 1; min-width: 0; }
.alc-subtag { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
.alc-title { margin: 4px 0; font-size: 18px; font-weight: 700; }
.alc-meta { font-size: 13px; color: var(--text-2); }
.alc-play-btn, .as-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.artist-songs-list { display: flex; flex-direction: column; }
.artist-song-row { display: flex; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.artist-song-row:hover { background: var(--panel-2); }
.as-idx { width: 28px; text-align: center; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.as-cover-wrap { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.as-cover { width: 100%; height: 100%; object-fit: cover; }
.as-info { flex: 1; min-width: 0; }
.as-title { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-artist { font-size: 12.5px; color: var(--text-2); }
.as-actions { display: flex; gap: 6px; }
.as-btn { width: 32px; height: 32px; background: transparent; color: var(--text-2); }
.as-btn:hover { color: var(--text); background: var(--panel-3); }
.artist-albums-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.artist-album-card { width: 160px; flex-shrink: 0; scroll-snap-align: start; cursor: pointer; }
.aac-artwork-wrap { width: 160px; height: 160px; border-radius: 8px; overflow: hidden; margin-bottom: 10px; box-shadow: var(--shadow); }
.aac-artwork { width: 100%; height: 100%; object-fit: cover; }
.aac-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aac-meta { font-size: 12px; color: var(--text-3); }

/* ---------- 11. Visualizer ---------- */
.visualizer-container { position: relative; width: 100%; height: 100%; }
.full-visualizer-canvas { display: block; width: 100%; height: 100%; }
.visualizer-toolbar { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 12px; padding: 5px; border-radius: 999px; background: rgba(23,22,21,.85); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.viz-modes-group { display: flex; gap: 2px; }
.viz-mode-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); }
.viz-mode-btn.active { background: var(--text); color: var(--bg); }
.viz-status-badge { display: flex; align-items: center; gap: 8px; padding-right: 12px; font: 600 11px/1 ui-monospace, Menlo, monospace; color: var(--text-3); }
.viz-footer-info { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 24px; font-size: 12px; color: var(--text-3); pointer-events: none; }
.viz-info-item .val { margin-left: 6px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- 12. Console (player bar) ---------- */
.player-bar {
  position: relative; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 0 24px;
  background: rgba(16,15,14,.94); border-top: 1px solid var(--line);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mini-cover-wrap { width: 52px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0; cursor: pointer; background: var(--panel-2); }
.mini-cover-wrap img { width: 100%; height: 100%; object-fit: cover; }
.bar-track-info { min-width: 0; cursor: pointer; }
.bar-title { font-size: 14px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-artist { margin-top: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track-info:hover .bar-title { text-decoration: underline; text-underline-offset: 3px; }
.btn-icon, .heart-btn, .ctrl-btn-sub {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  color: var(--text-2); transition: color .15s, background .15s;
}
.btn-icon:hover, .ctrl-btn-sub:hover { color: var(--text); background: rgba(255,250,240,.06); }
.heart-btn.liked, .btn-icon.liked { color: var(--accent); }
.bar-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.bar-buttons { display: flex; align-items: center; gap: 14px; }
.ctrl-btn-play {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--text); color: var(--bg); transition: transform .12s, background .15s;
}
.ctrl-btn-play:hover { background: #fff; transform: scale(1.04); }
.ctrl-btn-play:active { transform: scale(.96); }
.ctrl-btn-sub.active, #modeBtn.active { color: var(--accent); }
.ctrl-btn-text { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 650; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); font-variant-numeric: tabular-nums; }
.ctrl-btn-text:hover { color: var(--text); }
.progress-container { width: 100%; display: flex; align-items: center; gap: 10px; }
.time-label { width: 40px; font-size: 11.5px; color: var(--text-3); text-align: center; font-variant-numeric: tabular-nums; }
.progress-bar-wrap { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,250,240,.12); cursor: pointer; }
.progress-bar-wrap::before { content: ""; position: absolute; inset: -8px 0; } /* 扩大命中区域 */
.progress-bg { display: none; }
.progress-buffer, .progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit; }
.progress-buffer { background: rgba(255,250,240,.12); }
.progress-fill { background: var(--accent); }
.progress-handle { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%) scale(0); transition: transform .12s; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.progress-bar-wrap:hover .progress-handle { transform: translate(-50%, -50%) scale(1); }
.hover-time-tooltip { position: absolute; bottom: 14px; padding: 3px 6px; border-radius: 4px; font-size: 11px; background: var(--panel-3); transform: translateX(-50%); opacity: 0; pointer-events: none; }
.progress-bar-wrap:hover .hover-time-tooltip { opacity: 1; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.volume-container { display: flex; align-items: center; gap: 6px; }
.volume-slider-wrap { position: relative; width: 96px; height: 4px; border-radius: 4px; background: rgba(255,250,240,.12); cursor: pointer; }
.volume-slider-wrap::before { content: ""; position: absolute; inset: -8px 0; }
.volume-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--text-2); }
.volume-handle { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%) scale(0); transition: transform .12s; }
.volume-slider-wrap:hover .volume-handle { transform: translate(-50%, -50%) scale(1); }
.volume-slider-wrap:hover .volume-fill { background: var(--accent); }
.desktop-pip-btn { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .desktop-pip-btn { display: grid; } }
.desktop-pip-btn.active, .pip-quick-btn.active, #pipLyricsBtn.active { color: var(--accent); }
.playlist-toggle-btn { position: relative; }
.playlist-badge { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 750; line-height: 16px; text-align: center; background: var(--accent); color: var(--on-accent); }

/* ---------- 13. Drawer & overlays (状态类与原站一致) ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.playlist-drawer {
  position: fixed; z-index: 41; top: 12px; right: 12px; bottom: calc(var(--bar-h) + 12px);
  width: 380px; max-width: calc(100vw - 24px);
  display: flex; flex-direction: column;
  border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility .3s;
}
.playlist-drawer.open { transform: none; visibility: visible; }
.drawer-drag-handle { display: none; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
.drawer-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.drawer-title svg { color: var(--text-3); }
.drawer-actions { display: flex; align-items: center; gap: 4px; }
.text-btn { height: 30px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; color: var(--text-2); }
.text-btn:hover { color: var(--text); background: var(--panel-2); }
.btn-icon-sm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
.btn-icon-sm:hover { color: var(--text); background: var(--panel-2); }
.playlist-items { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.playlist-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; }
.playlist-item:hover { background: var(--panel-2); }
.playlist-item.active { background: var(--panel-2); }
.playlist-item.active .pl-title { color: var(--accent); }
.pl-cover { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.pl-info { flex: 1; min-width: 0; }
.pl-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-artist { margin-top: 2px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-duration { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.drop-hint-box { margin: 8px 12px 14px; padding: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: 12.5px; color: var(--text-3); }
.drop-hint-box.dragover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }

.vinyl-context-menu-overlay, .modal-backdrop, .full-drop-overlay, .artist-bio-modal, .mobile-settings-overlay, .access-gate-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(8,8,7,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s;
}
.vinyl-context-menu-overlay.open, .modal-backdrop.active, .full-drop-overlay.active, .artist-bio-modal.active, .mobile-settings-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.access-gate-overlay { z-index: 200; opacity: 1; visibility: visible; pointer-events: auto; background: var(--bg); }
.access-gate-overlay.unlocked { opacity: 0; visibility: hidden; pointer-events: none; }
.vinyl-context-menu, .modal-card, .drop-modal-card, .artist-bio-card, .access-gate-card {
  width: 100%; max-width: 560px; max-height: 86vh; overflow: auto;
  border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
}
.vinyl-context-menu { max-width: 340px; padding: 10px; }
.vmenu-header { display: flex; align-items: center; gap: 12px; padding: 8px; }
.vmenu-cover { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; }
.vmenu-title { font-weight: 700; } .vmenu-artist { font-size: 12.5px; color: var(--text-2); }
.vmenu-divider { height: 1px; margin: 6px 8px; background: var(--line); }
.vmenu-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; font-size: 14px; text-align: left; }
.vmenu-item svg { color: var(--text-3); }
.vmenu-item:hover { background: var(--panel-2); }
.vmenu-item.liked svg { color: var(--accent); fill: var(--accent); }
.modal-header, .artist-bio-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.modal-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.modal-close { font-size: 26px; line-height: 1; color: var(--text-3); }
.modal-body, .artist-bio-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.search-input-box { display: flex; gap: 8px; }
.search-input-box input, .vip-cookie-box input, .url-input-row input, .input-with-action input, .gate-input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 10px; border: 0; outline: none;
  background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text);
}
.search-input-box input:focus, .vip-cookie-box input:focus, .url-input-row input:focus, .input-with-action input:focus, .gate-input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.primary-search-btn, .apply-action-btn, .vip-save-btn, .app-done-btn, .gate-submit-btn { height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 650; background: var(--accent); color: var(--on-accent); }
.vip-clear-btn, .app-reset-btn { height: 44px; padding: 0 16px; border-radius: 10px; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.search-result-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.search-result-item:hover { background: var(--panel-3); }
.sr-title { font-weight: 600; } .sr-meta { font-size: 12.5px; color: var(--text-2); }
.sr-badge { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel-3); color: var(--text-2); }
.sr-badge.synced { color: var(--accent); background: var(--accent-soft); }
.search-hint, .search-empty-state, .vfc-desc, .slider-subtext, .custom-sec-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.toast-tip { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 20px); z-index: 120; transform: translate(-50%, 12px); padding: 10px 18px; border-radius: 999px; font-size: 13.5px; background: var(--text); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast-tip.show { opacity: 1; transform: translate(-50%, 0); }
.switch-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-toggle .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--panel-3); cursor: pointer; transition: background .2s; }
.switch-toggle .slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.switch-toggle input:checked + .slider { background: var(--accent); }
.switch-toggle input:checked + .slider::before { transform: translateX(18px); }
.switch-toggle input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
#appearanceModal { display: flex; }
.app-tab-pane { display: none; } .app-tab-pane.active { display: block; }
.appearance-tabs { display: flex; gap: 4px; padding: 10px 20px 0; }
.app-tab-btn { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--text-2); }
.app-tab-btn.active { background: var(--text); color: var(--bg); }
.aura-style-card, .preset-card, .font-card, .bg-mode-chip, .chip-color-btn { border-radius: 12px; padding: 10px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.aura-style-card.active, .preset-card.active, .font-card.active, .bg-mode-chip.active { box-shadow: inset 0 0 0 2px var(--accent); }
.gate-brand-icon { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.access-gate-card { max-width: 380px; padding: 32px 24px; text-align: center; }
.gate-form { display: grid; gap: 12px; margin-top: 18px; }
.gate-input-wrapper { position: relative; display: flex; }
.gate-eye-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.gate-error-msg { min-height: 18px; font-size: 12.5px; color: var(--accent); }
.access-gate-card.shake { animation: aura-shake .35s; }
@keyframes aura-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mobile-settings-sheet { display: none; }

/* ---------- 14. Responsive ---------- */
.sr-only-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1440px) {
  .online-charts-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1439px) {
  .online-charts-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* 平板：侧栏收为图标栏，文字保留给读屏 */
@media (max-width: 1024px) and (min-width: 769px) {
  :root { --side-w: 76px; }
  .app-header { padding: 20px 12px; align-items: center; }
  .brand { padding: 0; }
  .brand-name, .nav-tab span, .import-btn-main span, .import-btn-main .chevron-arrow, .vip-login-btn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .header-nav { width: 100%; }
  .nav-tab { justify-content: center; padding: 0; height: 44px; font-size: 0; }
  .nav-tab svg { width: 19px; height: 19px; }
  .header-actions { flex-direction: column; align-items: center; }
  .import-menu-wrap, .vip-login-btn { flex: none; width: 44px; }
  .import-btn-main, .vip-login-btn { justify-content: center; padding: 0; }
  .import-dropdown-card { left: 0; right: auto; width: 260px; }
  .page { padding: 36px 32px 64px; }
}
@media (max-width: 900px) and (min-width: 769px) {
  .player-main-grid { grid-template-columns: 1fr; justify-items: center; --stage: min(60vw, 400px); }
  .song-meta-panel { width: 100%; max-width: 560px; }
}

/* =====================================================================
   手机（≤768px）· 独立设计，不是桌面缩放
   - 顶栏改为叠在内容上的透明栏（只有品牌标记与菜单），不再单独占一行
   - 底部：悬浮迷你播放卡 + 52px 标签栏；在“正在播放”页迷你卡展开为完整控制台
   - 所有可点控件 ≥ 44px；每个视图独立纵向滚动，短屏可滚到底
   ===================================================================== */
@media (max-width: 768px) {
  :root { --tab-h: 52px; --safe-t: env(safe-area-inset-top, 0px); --top-pad: calc(56px + var(--safe-t)); }

  .player-app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas: "main" "bar";
  }

  /* ---- 顶栏：叠加、渐隐，不占布局 ---- */
  .app-header {
    position: absolute; z-index: 20; top: 0; left: 0; right: 0;
    height: var(--top-pad); padding: var(--safe-t) 6px 0 16px;
    flex-direction: row; align-items: center; gap: 0;
    border: 0; pointer-events: none;
    background: linear-gradient(var(--bg) 45%, rgba(16, 15, 14, 0));
  }
  body.oled-pure-black .app-header { background: linear-gradient(#000 45%, rgba(0, 0, 0, 0)); }
  .header-actions, .header-nav, .brand-menu-btn { pointer-events: auto; }   /* .brand 容器本身不拦截点击 */
  .brand { padding: 0; }
  .brand-logo { width: 26px; height: 26px; border-radius: 7px; }
  .brand-logo svg { width: 14px; height: 14px; }
  .brand-name { font-size: 15px; }
  .header-actions { margin: 0 0 0 auto; flex-wrap: nowrap; }
  .header-actions { display: none; }
  /* Logo 菜单键：视觉 26px，点击区 44px，与页面左边距对齐 */
  .brand-menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; margin-left: -9px;
    border-radius: 12px; cursor: pointer; transition: background .15s;
  }
  .brand-menu-btn:active, .brand-menu-btn[aria-expanded="true"] { background: var(--panel-2); }
  .brand-menu-btn[aria-expanded="true"] .brand-logo { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 3.5px var(--accent); }
  .brand { gap: 0; }
  .brand-name { margin-left: 1px; }

  /* ---- 页面导航：收进右上角菜单（.header-nav.open 时展开） ---- */
  .header-nav {
    position: fixed; z-index: 60; top: calc(var(--top-pad) - 6px); left: 8px;
    width: min(260px, calc(100vw - 16px));
    flex-direction: column; gap: 2px; padding: 6px;
    border-radius: 16px; background: var(--panel-2);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line-2);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.97); transform-origin: top left;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .header-nav.open { opacity: 1; visibility: visible; transform: none; }
  .nav-tab, .nav-more-btn {
    display: flex; align-items: center; gap: 12px;
    height: 48px; padding: 0 12px; border-radius: 10px;
    font-size: 15px; font-weight: 600; color: var(--text-2); text-align: left;
  }
  .nav-tab svg, .nav-more-btn svg { width: 20px; height: 20px; }
  .nav-tab:hover, .nav-more-btn:hover { background: rgba(255, 250, 240, .05); color: var(--text); }
  .nav-tab.active { background: var(--panel-3); box-shadow: none; color: var(--text); }
  .nav-tab.active svg { color: var(--accent); }
  .nav-tab.active::after { content: ""; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .nav-tab-visualizer { display: none; }
  .nav-more-btn { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; font-size: 13.5px; font-weight: 550; color: var(--text-3); }


  /* ---- 页面通用 ---- */
  .page { padding: var(--top-pad) 16px 28px; }
  .page-head { margin-bottom: 0; }
  .page-title { font-size: 30px; letter-spacing: -.03em; }
  .online-container > .page-head, .radio-page-container > .page-head { margin-bottom: -12px; }
  .section-title { font-size: 18px; }
  .view-panel { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* ================= 迷你播放卡（非播放页） ================= */
  .player-bar {
    position: relative;
    display: flex; align-items: center; gap: 4px;
    height: 60px; margin: 0 8px calc(var(--safe-b) + 8px);
    padding: 0 4px 0 8px; border: 0; border-radius: 14px;
    background: var(--panel-2); box-shadow: 0 8px 24px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .bar-left { flex: 1; min-width: 0; gap: 10px; }
  .mini-cover-wrap { width: 44px; height: 44px; border-radius: 8px; }
  .bar-title { font-size: 14px; }
  .bar-artist { font-size: 12px; }
  .bar-left .heart-btn { display: none; }      /* 收藏在播放页与收藏页均可操作 */
  .bar-center { flex: none; gap: 0; }
  .bar-buttons { gap: 0; }
  #modeBtn, #prevBtn, #speedBtn { display: none; }
  .ctrl-btn-sub, .btn-icon { width: 44px; height: 44px; }
  .ctrl-btn-play { width: 44px; height: 44px; background: transparent; color: var(--text); }
  .ctrl-btn-play:hover { background: transparent; transform: none; }
  .progress-container { position: absolute; left: 14px; right: 14px; bottom: 3px; width: auto; gap: 0; }
  .progress-container .time-label, .progress-handle, .hover-time-tooltip { display: none; }
  .progress-bar-wrap { height: 2px; border-radius: 2px; }
  .progress-bar-wrap::before { inset: 0; }
  .volume-container, .desktop-pip-btn { display: none !important; }
  .bar-right { flex: none; gap: 0; }
  .playlist-badge { top: 4px; right: 4px; }

  /* ================= 播放页：迷你卡展开为控制台 ================= */
  body[data-active-view="player"] .player-bar {
    flex-direction: column; align-items: stretch; gap: 6px;
    height: auto; padding: 14px 12px 10px;
    background: var(--panel); border-radius: 18px;
  }
  body[data-active-view="player"] .bar-left { display: none; }
  body[data-active-view="player"] .bar-center { flex-direction: column-reverse; gap: 8px; }
  body[data-active-view="player"] .progress-container { position: static; width: 100%; gap: 10px; padding: 0 6px; }
  body[data-active-view="player"] .progress-container .time-label { display: block; width: 38px; font-size: 11px; }
  body[data-active-view="player"] .progress-bar-wrap { height: 4px; }
  body[data-active-view="player"] .progress-bar-wrap::before { inset: -14px 0; }
  body[data-active-view="player"] .progress-handle { display: block; transform: translate(-50%, -50%) scale(1); width: 14px; height: 14px; }
  body[data-active-view="player"] .bar-buttons { justify-content: space-between; padding-right: 48px; }
  body[data-active-view="player"] #modeBtn, body[data-active-view="player"] #prevBtn { display: grid; }
  body[data-active-view="player"] .ctrl-btn-play { width: 58px; height: 58px; background: var(--text); color: var(--bg); }
  body[data-active-view="player"] .bar-right { position: absolute; right: 12px; bottom: 17px; }

  /* ================= 正在播放 ================= */
  #playerView .page { display: block; padding-bottom: 24px; }
  .player-main-grid { grid-template-columns: 1fr; gap: 22px; justify-items: center; --stage: min(78vw, 42vh, 340px); }
  .turntable-container { width: var(--stage); }
  .aura-jcard { inset: 0; border-radius: 8px; }
  .cassette-wrapper .cassette-body { display: none; }        /* 小屏只保留 J 卡封面，避免实物叠压显得拥挤 */
  .vinyl-center-cover { width: 56%; height: 56%; }
  .lp-sleeve-footer { display: none; }
  .song-meta-panel { width: 100%; }
  .song-meta-panel .eyebrow { display: none; }
  .song-meta-header-row { align-items: center; gap: 12px; }
  .song-title { font-size: 28px; line-height: 1.12; letter-spacing: -.03em; }
  .song-artist-wrap { margin-top: 6px; min-height: 32px; }
  .song-artist { font-size: 15.5px; }
  .meta-fav-btn { width: 44px; height: 44px; }
  .audio-tags { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 16px -16px 20px; padding: 0 16px; scrollbar-width: none; }
  .tag-pill { flex-shrink: 0; padding: 6px 10px; font-size: 11px; }
  .compact-lyrics-box { gap: 6px; padding-left: 14px; }
  .lyrics-line { font-size: 14.5px; }
  .lyrics-line.current { font-size: 18px; }
  .quick-eq-bar { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 22px -16px 0; padding: 0 16px 2px; scrollbar-width: none; }
  .eq-btn { flex-shrink: 0; height: 36px; padding: 0 14px; }

  /* ================= 歌词 ================= */
  .lyrics-full-container { padding: var(--top-pad) 16px 0; }
  .lyrics-top-nav { margin-top: -6px; }
  .lyrics-close-btn { height: 40px; padding: 0 14px; }
  .lyrics-tools-toggle-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-2); }
  .lyrics-track-info { margin: 10px 0 4px; }
  .lyrics-track-info h2 { font-size: 22px; }
  .lyrics-quick-actions { display: none; }
  .lyrics-quick-actions.open { display: flex; }
  .action-pill-btn { height: 40px; padding: 0 14px; }
  .lyrics-offset-controller { height: 40px; flex-wrap: wrap; }
  .offset-btn, .offset-btn-reset { height: 32px; padding: 0 9px; }
  .lyrics-row { padding: 4px 8px; }
  .lr-text { font-size: calc(19px * var(--lyrics-font-scale)); }
  .lyrics-row.active .lr-text { font-size: calc(24px * var(--lyrics-font-scale)); }
  .lr-pin-btn { display: none; }

  /* ================= 云端乐库 ================= */
  .online-container { gap: 28px; }
  .online-header-bar { flex-wrap: nowrap; gap: 8px; }
  .online-search-box { height: 46px; padding: 0 5px 0 14px; gap: 10px; }
  .online-search-box input { font-size: 15px; }
  .online-search-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }
  .custom-sheet-btn { width: 46px; height: 46px; padding: 0; justify-content: center; flex-shrink: 0; }
  .custom-sheet-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .custom-sheet-btn svg { width: 18px; height: 18px; }
  .online-charts-grid {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px;
    gap: 12px; margin: 0 -16px; padding: 4px 16px 10px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none;
  }
  .chart-cube-card { scroll-snap-align: start; gap: 10px; }
  .chart-cube-card:hover .cube-visual { transform: none; }
  .cube-play-hint { opacity: 1; transform: none; width: 34px; height: 34px; right: 8px; bottom: 8px; }
  .cube-title { font-size: 14px; }
  .cube-desc { font-size: 12px; }
  .am-section-bar { align-items: center; padding-bottom: 12px; }
  .am-section-title { font-size: 19px; }
  .am-play-all-pill { height: 38px; padding: 0 14px; }
  .am-track-row { gap: 12px; padding: 6px 0 6px 2px; border-radius: 8px; }
  .am-track-thumb { width: 48px; height: 48px; }
  .am-track-name { font-size: 15px; }
  .am-more-btn { width: 44px; height: 44px; }
  .artist-search-card { padding: 12px; }

  /* ================= 电台：列表式卡片，便于单手浏览 ================= */
  .radio-page-container { gap: 36px; }
  .radio-hero-banner { padding-bottom: 24px; }
  .radio-hero-title { margin: 12px 0 10px; font-size: 27px; max-width: none; }
  .radio-hero-subtitle { font-size: 13.5px; }
  .radio-hero-actions { flex-wrap: nowrap; gap: 8px; margin-top: 20px; }
  .radio-hero-actions > button { flex: 1 1 0; min-width: 0; justify-content: center; height: 46px; padding: 0 10px; font-size: 13.5px; }
  .radio-hero-actions > button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .radio-section-header { flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; }
  .radio-section-title { font-size: 18px; }
  .radio-section-tag { font-size: 12px; }
  .radio-cards-grid { grid-template-columns: 1fr; gap: 2px; }
  .radio-card {
    display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px;
    padding: 8px; margin: 0 -8px; border-radius: 12px;
  }
  .radio-card:active { background: var(--panel-2); }
  .radio-card-visual { border-radius: 8px; box-shadow: none; }
  .radio-card:hover .radio-card-visual { transform: none; box-shadow: none; }
  .radio-card-play-btn {
    opacity: 1; transform: none; inset: 0; margin: auto;
    width: 36px; height: 36px; background: rgba(0, 0, 0, .5); color: #fff; box-shadow: none;
  }
  .radio-card-name { font-size: 15px; }
  .radio-card-desc { margin-top: 3px; font-size: 12.5px; line-height: 1.45; }
  .radio-card-badge { margin-top: 4px; font-size: 11px; }
  .radio-heartbeat-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .rh-cover-wrap { width: 64px; height: 64px; }
  .rh-title { margin-top: 4px; font-size: 18px; }
  .rh-desc { font-size: 13px; }
  .rh-action-btn { grid-column: 1 / -1; justify-content: center; height: 46px; }

  /* ================= 收藏 ================= */
  .favorites-hero { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; margin-bottom: 20px; }
  .fav-hero-cover { width: 104px; height: 104px; }
  .fav-hero-title { margin: 4px 0 6px; font-size: 26px; }
  .fav-hero-meta { font-size: 12.5px; gap: 4px 6px; }
  .fav-hero-actions { margin-top: 12px; gap: 8px; flex-wrap: nowrap; }
  .fav-play-all-btn { height: 40px; padding: 0 16px; font-size: 13.5px; }
  .fav-import-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .fav-import-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fav-tabs-bar { gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .fav-tab-pill { flex-shrink: 0; padding: 13px 0; white-space: nowrap; }
  .aura-table-head { display: none; }
  .fav-song-row { grid-template-columns: 18px 48px minmax(0, 1fr) 44px; gap: 12px; padding: 6px 0; }
  .fav-song-cover { width: 48px; height: 48px; }
  .fav-song-title { font-size: 15px; }
  .fav-song-actions { gap: 0; }
  .fav-song-time { display: none; }
  .fav-row-heart-btn { width: 44px; height: 44px; }

  /* ================= 艺人 ================= */
  .artist-nav-bar { height: calc(52px + var(--safe-t)); padding: var(--safe-t) 8px 0; }
  .artist-back-btn { height: 40px; }
  .artist-hero-section { min-height: 260px; padding: 24px 16px; }
  .artist-hero-content { flex-direction: column; align-items: flex-start; }
  .artist-body-content { padding: 20px 16px 40px; }

  /* ================= 抽屉 / 浮层 ================= */
  .playlist-drawer {
    top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    height: min(78vh, 620px); border-radius: 20px 20px 0 0; padding-bottom: var(--safe-b);
    transform: translateY(105%);
  }
  .drawer-drag-handle { display: block; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--line-2); }
  .drawer-header { padding: 10px 10px 10px 18px; }
  .text-btn { height: 40px; padding: 0 12px; }
  .btn-icon-sm { width: 44px; height: 44px; }
  .playlist-item { padding: 8px 6px; }
  .pl-cover { width: 46px; height: 46px; }
  .toast-tip { bottom: calc(var(--safe-b) + 84px); max-width: calc(100vw - 32px); }
  .vinyl-context-menu-overlay, .modal-backdrop { align-items: flex-end; padding: 0; }
  .vinyl-context-menu, .modal-card { max-width: none; border-radius: 20px 20px 0 0; padding-bottom: var(--safe-b); }
  .vmenu-item { min-height: 48px; }

  /* 移动设置面板（原站 .open 状态） */
  .mobile-settings-sheet {
    display: flex; flex-direction: column; gap: 12px;
    position: fixed; z-index: 101; left: 0; right: 0; bottom: 0;
    padding: 18px 16px calc(18px + var(--safe-b));
    border-radius: 20px 20px 0 0; background: var(--panel); box-shadow: var(--shadow-lg);
    transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-settings-sheet.open { transform: none; }
  .mobile-sheet-header { display: flex; justify-content: space-between; align-items: center; }
  .mobile-sheet-title { font-size: 16px; font-weight: 700; }
  .mobile-sheet-close-btn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); }
  .mobile-sheet-grid { display: grid; gap: 2px; }
  .mobile-sheet-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: 12px; text-align: left; }
  .mobile-sheet-item:active { background: var(--panel-2); }
  .m-sheet-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--text-2); }
  .m-sheet-name { display: block; font-size: 14.5px; font-weight: 600; }
  .m-sheet-desc { display: block; font-size: 12px; color: var(--text-3); }
}

/* iPhone SE / mini 等短屏：压缩封面与控制台，保证标题首屏可见 */
@media (max-width: 768px) and (max-height: 700px) {
  .player-main-grid { --stage: min(70vw, 36vh, 300px); gap: 16px; }
  .song-title { font-size: 25px; }
  .audio-tags { margin: 12px -16px 16px; }
  body[data-active-view="player"] .player-bar { padding: 10px 12px 6px; gap: 2px; }
  body[data-active-view="player"] .ctrl-btn-play { width: 52px; height: 52px; }
  body[data-active-view="player"] .bar-right { bottom: 10px; }
  .radio-hero-banner { padding-bottom: 20px; }
  .radio-hero-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 15. Fine-tuning ---------- */
.online-container > .page-head, .radio-page-container > .page-head { margin-bottom: -20px; }
.player-bar { grid-template-columns: minmax(180px, 1fr) minmax(0, 560px) minmax(150px, 1fr); }
/* 封面加载失败时不露出 alt 文字，保留底色占位 */
.fav-song-cover, .pl-cover, .am-track-thumb, .rh-cover-wrap img, .mini-cover-wrap img, .vmenu-cover { font-size: 0; color: transparent; background: var(--panel-3); }

/* =====================================================================
   16. 集成真实站点后的补充与修复（对应 release-audit.md 中的 P1/P2 项）
   ===================================================================== */

/* P1-4 形态显隐兜底：JS 写入内联 display 前，只显示当前主题（无主题 = 黑胶） */
.style-centerpiece { display: none; }
html:not([data-aura-theme]) #vinylWrapper, html[data-aura-theme="vinyl"] #vinylWrapper { display: block; }
html[data-aura-theme="cassette"] #cassetteWrapper,
html[data-aura-theme="poster"] #posterWrapper,
html[data-aura-theme="capsule"] #capsuleWrapper,
html[data-aura-theme="aurora"] #auroraWrapper { display: flex; }

/* 音效预设栏：与线上一致保持隐藏（是否露出需产品确认） */
.quick-eq-bar { display: none; }

/* P2-1 / P2-2 氛围背景：透明度可被 --custom-bg-opacity 覆盖；恢复缓慢漂移动画并尊重 .no-anim */
.ambient-bg { opacity: var(--custom-bg-opacity, .55); animation: aura-ambient 28s ease-in-out infinite alternate; }
.ambient-bg.no-anim { animation: none; }
@keyframes aura-ambient { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.06) translate(-1.5%, 1.5%); } }

/* P2-3 缺失的状态反馈 */
.vinyl-wrapper.pressed, .cassette-wrapper.pressed, .poster-wrapper.pressed, .capsule-wrapper.pressed, .aurora-wrapper.pressed { transform: scale(.96); transition: transform .2s; }
.poster-wrapper.playing .lp-vinyl-protrude { animation: aura-spin 18s linear infinite; }
.vc-status { font-size: 12px; color: var(--text-3); }
.vc-status.bound { color: #6fcf97; }
.sr-badge.plain { color: var(--text-3); }

/* 榜单小标题与网格的间距（容器 gap 较大） */
.online-container > .charts-head { margin-bottom: -28px; }

/* ---------- 外观面板 ---------- */
.appearance-modal-card { max-width: 680px; display: flex; flex-direction: column; overflow: hidden; }
.appearance-modal-body { flex: 1; min-height: 0; overflow-y: auto; }
.appearance-tabs { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.custom-sec-title { margin: 4px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--text); }
.custom-sec-desc { margin: -2px 0 12px; }
.aura-styles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.aura-style-card { position: relative; display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer; }
.aura-style-card:hover { background: var(--panel-3); }
.style-card-badge { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--accent); color: var(--on-accent); }
.style-card-preview { height: 72px; border-radius: 8px; display: grid; place-items: center; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.preview-disc { width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0 18%, #0c0b0a 19% 100%); }
.preview-cassette-mini { width: 64px; height: 40px; border-radius: 5px; background: #1b1a18; box-shadow: inset 0 0 0 1px var(--line-2); display: flex; align-items: center; justify-content: space-around; padding: 0 10px; }
.pcm-wheel { width: 12px; height: 12px; border-radius: 50%; background: #efe9de; }
.preview-poster-mini { position: relative; width: 56px; height: 44px; }
.ppm-cover { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 3px; background: var(--accent); z-index: 1; }
.ppm-disc { position: absolute; right: 0; top: 4px; width: 36px; height: 36px; border-radius: 50%; background: #0c0b0a; box-shadow: inset 0 0 0 1px var(--line-2); }
.preview-capsule-mini { width: 40px; height: 40px; border-radius: 8px; background: #000; box-shadow: inset 0 0 0 1px var(--text-2); }
.preview-aurora-mini { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 6px var(--panel), 0 0 0 7px var(--line); }
.style-card-info { display: flex; flex-direction: column; gap: 3px; }
.style-card-info strong { font-size: 13.5px; }
.style-card-info span { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.bg-mode-selector, .quick-chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bg-mode-chip, .chip-color-btn { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; }
.bg-subpane { margin-bottom: 14px; }
.preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.preset-card { display: flex; flex-direction: column; gap: 6px; align-items: stretch; font-size: 12px; cursor: pointer; }
.preset-preview { height: 46px; border-radius: 8px; }
.aurora-grad  { background: radial-gradient(circle at 25% 30%, #6b5bd2, transparent 60%), radial-gradient(circle at 75% 70%, #2a8aa0, transparent 60%), #0e0d10; }
.neon-grad    { background: radial-gradient(circle at 20% 40%, #c2405a, transparent 60%), radial-gradient(circle at 80% 60%, #6a49c9, transparent 60%), #0e0b12; }
.emerald-grad { background: radial-gradient(circle at 30% 25%, #2f9b73, transparent 60%), radial-gradient(circle at 70% 70%, #3a64b8, transparent 60%), #0b1210; }
.sunset-grad  { background: radial-gradient(circle at 25% 40%, #d0703a, transparent 60%), radial-gradient(circle at 75% 65%, #b8457e, transparent 60%), #130c0b; }
.album-dynamic-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.adc-icon { color: var(--accent); }
.adc-info strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.adc-info p { font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.custom-upload-box, .color-picker-box, .custom-font-input-box, .custom-slider-group { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 12px; }
.custom-file-upload-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; cursor: pointer; background: var(--panel-3); font-size: 13.5px; }
.or-divider { text-align: center; font-size: 11.5px; color: var(--text-3); }
.url-input-row, .input-with-action { display: flex; gap: 8px; }
.curated-wallpapers-header { margin: 4px 0 8px; font-size: 12.5px; color: var(--text-2); }
.curated-wallpapers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.curated-wall-item { position: relative; height: 64px; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--panel-3); box-shadow: inset 0 0 0 1px var(--line); }
.curated-wall-item img { width: 100%; height: 100%; object-fit: cover; }
.curated-wall-item.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.wall-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.color-picker-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); }
.color-picker-row input[type="color"] { width: 44px; height: 32px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.slider-item { display: flex; flex-direction: column; gap: 6px; }
.slider-label-row { display: flex; justify-content: space-between; font-size: 13px; }
.slider-item input[type="range"] { width: 100%; accent-color: var(--accent); }
.slider-item.toggle-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.font-presets-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.font-card { display: flex; flex-direction: column; gap: 4px; text-align: left; cursor: pointer; }
.font-sample { font-size: 16px; }
.font-name { font-size: 11.5px; color: var(--text-3); }
.font-input-field label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--text-2); }
.appearance-footer-actions { display: flex; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); }

/* ---------- VIP 面板 ---------- */
.vip-title svg { fill: var(--accent); }
.vip-feature-card, .vip-cookie-box, .vip-guide-box, .vip-status-card { padding: 14px; border-radius: 12px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.vfc-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vfc-title { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.vfc-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.vsc-main { display: flex; gap: 14px; align-items: center; }
.vsc-avatar-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.vsc-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--panel-3); font-size: 0; }
.vsc-vip-badge { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; background: var(--accent); color: var(--on-accent); }
.vsc-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.vsc-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vsc-nickname { font-size: 14.5px; font-weight: 700; color: var(--text); }
.vsc-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: var(--panel-3); }
.vsc-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vsc-expire-val, .vsc-remain-val { color: var(--text); font-variant-numeric: tabular-nums; }
.vsc-alert-banner { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; background: var(--accent-soft); color: var(--accent); }
.vsc-alert-banner.warning { background: rgba(230, 180, 60, .14); color: #e6b43c; }
.vc-label-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.vc-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vg-title { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 650; }
.vg-visual-steps { display: flex; flex-direction: column; gap: 8px; }
.v-step-item { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.v-num { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 800; background: var(--accent); color: var(--on-accent); }

/* ---------- 歌词搜索 / 拖放导入 ---------- */
.search-results-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.sr-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.full-drop-overlay { z-index: 150; }
.drop-modal-card { max-width: 420px; padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; border: 1px dashed var(--accent); }
.drop-icon-anim { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.format-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.format-chips span { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; background: var(--panel-3); color: var(--text-2); }

@media (max-width: 768px) {
  /* P1-1 艺人页返回键被 Logo 叠加顶栏遮挡：为 Logo 让出左侧空间 */
  .artist-nav-bar { padding-left: 60px; }
  .brand-name { pointer-events: none; }                       /* 品牌文字不可交互，不拦截下层控件 */
  body[data-active-view="artist"] .brand-name { opacity: 0; }  /* 艺人页只保留 Logo 菜单键，避免与“返回”重叠 */
  body[data-active-view="artist"] .app-header { background: none; }
  .online-container > .charts-head { margin-bottom: -16px; }
  .preset-grid, .curated-wallpapers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .font-presets-grid { grid-template-columns: 1fr; }
  .appearance-modal-card { max-height: 88vh; }
}



/* ==========================================================================
   AURA MASTER MOBILE PERFECTION v108.0 (控制栏 100% 贴底，彻底消灭底部空洞)
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --safe-t: env(safe-area-inset-top, 20px);
    --safe-b: env(safe-area-inset-bottom, 20px);
    --top-pad: calc(48px + var(--safe-t));
    --bar-fixed-h: calc(120px + var(--safe-b));
  }

  html, body {
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  /* 基础容器：满屏固定贴合 */
  .player-app {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    background: #000000 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* 顶栏：保留原版纯粹 AuraMusic 品牌，无箭头、无外框，触控即开菜单 */
  .app-header {
    position: absolute !important;
    z-index: 100 !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: var(--top-pad) !important;
    padding: var(--safe-t) 18px 0 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border: none !important;
    pointer-events: auto !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, transparent 100%) !important;
  }

  .brand {
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  .brand-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 6px !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .brand-menu-btn:active { opacity: 0.6 !important; }
  .brand-logo {
    width: 28px !important; height: 28px !important; border-radius: 8px !important;
    display: grid !important; place-items: center !important;
    background: var(--accent, #e5a93c) !important; color: #000 !important;
    flex-shrink: 0 !important;
  }
  .brand-logo svg { width: 16px !important; height: 16px !important; stroke: #000 !important; }
  .brand-name {
    font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
    color: #ffffff !important; pointer-events: none !important;
  }
  .brand-name::after { display: none !important; content: "" !important; }
  .header-actions { display: none !important; }

  /* 导航菜单抽屉 */
  .header-nav {
    position: fixed !important; z-index: 200 !important; top: calc(var(--top-pad) + 4px) !important; left: 14px !important;
    width: min(280px, calc(100vw - 28px)) !important;
    flex-direction: column !important; gap: 4px !important; padding: 8px !important;
    border-radius: 18px !important; background: #1a1917 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
  }
  .header-nav.open {
    opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important;
  }
  .nav-menu-backdrop {
    position: fixed !important; inset: 0 !important; z-index: 150 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
    transition: opacity .25s ease, visibility .25s !important;
  }
  .nav-menu-backdrop.open {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }

  /* 主视口容器 */
  .app-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  /* ================= 播放主页面：垂直充实饱满，留出底部控制栏高度 ================= */
  #playerView { height: 100% !important; }
  #playerView .page {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: calc(var(--top-pad) + 4px) !important;
    padding-bottom: var(--bar-fixed-h) !important; /* 预留底部控制栏高度 */
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .player-main-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 380px !important;
    flex: 1 1 auto !important;
    justify-content: space-evenly !important; /* 在顶栏与控制栏之间均匀呼吸展开 */
    margin: 0 auto !important;
    gap: 8px !important;
    min-height: 0 !important;
  }

  /* 核心封面 */
  .turntable-container {
    width: clamp(240px, min(76vw, 36vh), 320px) !important;
    height: clamp(240px, min(76vw, 36vh), 320px) !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  .capsule-monolith-card {
    width: 100% !important; height: 100% !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
  }
  .capsule-art-box {
    width: 100% !important; height: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  }
  .capsule-art-box img {
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }
  .capsule-monolith-status { display: none !important; }

  /* 歌曲信息与标签栏 */
  .song-meta-panel {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    flex-shrink: 0 !important;
    padding: 0 2px !important;
  }
  .song-meta-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  .song-title-group {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .song-title {
    font-size: clamp(20px, 5.2vw, 24px) !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    letter-spacing: -0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
  }
  .song-artist-wrap {
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .song-artist {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.65) !important;
  }
  .meta-fav-btn {
    width: 42px !important; height: 42px !important;
    display: grid !important; place-items: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    flex-shrink: 0 !important;
  }

  .audio-tags {
    display: flex !important;
    gap: 6px !important;
    margin: 2px 0 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .tag-pill {
    padding: 2px 8px !important;
    font-size: 10.5px !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    flex-shrink: 0 !important;
  }

  /* 伴随歌词：保持优雅干净的左侧强调条 */
  .compact-lyrics-box {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 8px 14px !important;
    min-height: 56px !important;
    border-left: 3px solid var(--accent, #e5a93c) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 0 10px 10px 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .lyrics-line {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .lyrics-line.current {
    font-size: 15px !important;
    font-weight: 650 !important;
    color: #ffffff !important;
  }
  .quick-eq-bar { display: none !important; }

  /* ================= 底部控制栏：100% 绝对贴合屏幕底边，消灭空洞 ================= */
  .player-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
  }

  /* 播放主页面控制台：透明渐变紧贴底边，播放按钮居中落在舒适触控区 */
  body[data-active-view="player"] .player-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 18px max(20px, env(safe-area-inset-bottom, 20px)) !important;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 25%, #000000 70%) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body[data-active-view="player"] .bar-left { display: none !important; }
  body[data-active-view="player"] .bar-center {
    width: 100% !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  body[data-active-view="player"] .progress-container {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 4px !important;
  }
  body[data-active-view="player"] .progress-container .time-label {
    display: block !important;
    width: 36px !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-align: center !important;
  }
  body[data-active-view="player"] .progress-bar-wrap {
    flex: 1 !important;
    height: 4px !important;
  }
  body[data-active-view="player"] .bar-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    width: 100% !important;
    padding: 0 4px !important;
  }
  body[data-active-view="player"] #modeBtn,
  body[data-active-view="player"] #prevBtn,
  body[data-active-view="player"] #nextBtn {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }
  body[data-active-view="player"] .ctrl-btn-play {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #000000 !important;
    display: grid !important;
    place-items: center !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.25) !important;
  }
  body[data-active-view="player"] .bar-right {
    position: static !important;
    display: flex !important;
    align-items: center !important;
  }
  body[data-active-view="player"] #playlistBtn {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    color: rgba(255, 255, 255, 0.75) !important;
  }

  /* 非播放页（电台/歌单/搜索/收藏）：紧紧贴合屏幕底边 */
  body:not([data-active-view="player"]) .player-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 6px 12px max(14px, env(safe-area-inset-bottom, 14px)) !important;
    height: auto !important;
    min-height: calc(56px + env(safe-area-inset-bottom, 14px)) !important;
    background: rgba(20, 19, 18, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6) !important;
  }
  body:not([data-active-view="player"]) .view-panel {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 14px)) !important;
  }
}


/* ==========================================================================
   iPhone 贴合补丁（基于线上 v108；仅手机 ≤768px，只修 v108 仍存在的问题，其余沿用 v108；平板/桌面不受影响）
   index.html 里的内联 <style id="aura-mobile-dock-master"> 位于本文件之后，
   因此选择器统一加 html / html body 前缀以提高优先级，确保补丁生效。
   1. 透明顶栏不拦截点击（艺人页“返回”键被挡）
   2. 标签行去掉多余左缩进，与歌名对齐
   3. 底部控制台两行网格：队列键回到控制行；预留高度与底部内边距跟随安全区
   4. 封面按可用高度放大，消除封面上下空白
   ========================================================================== */
@media (max-width: 768px) {
  html:root {
    --bar-fixed-h: calc(96px + max(20px, var(--safe-b))) !important;
    --iphone-meta-h: 204px;
    --iphone-stage: clamp(220px, min(calc(100vw - 44px), calc(100dvh - var(--top-pad) - var(--bar-fixed-h) - var(--iphone-meta-h)), 400px), 400px);
  }

  /* 1 */
  html body .app-header, html body .brand, html body .brand-name { pointer-events: none !important; }
  html body .brand-menu-btn, html body .header-nav.open, html body .header-nav.open * { pointer-events: auto !important; }

  /* 2 */
  html body .audio-tags { padding: 0 !important; }

  /* 4 */
  html body .turntable-container { width: var(--iphone-stage) !important; height: var(--iphone-stage) !important; }
  html body #playerView .player-main-grid { max-width: 420px !important; }

  /* 3 */
  html body[data-active-view="player"] .player-bar {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    row-gap: 8px !important; column-gap: 0 !important;
    padding: 10px 16px max(20px, var(--safe-b)) !important;
  }
  html body[data-active-view="player"] .bar-center,
  html body[data-active-view="player"] .bar-buttons,
  html body[data-active-view="player"] .bar-right { display: contents !important; }
  html body[data-active-view="player"] .progress-container { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  html body[data-active-view="player"] #modeBtn { grid-column: 1 !important; grid-row: 2 !important; justify-self: center !important; }
  html body[data-active-view="player"] #prevBtn { grid-column: 2 !important; grid-row: 2 !important; justify-self: center !important; }
  html body[data-active-view="player"] #playBtn { grid-column: 3 !important; grid-row: 2 !important; justify-self: center !important; }
  html body[data-active-view="player"] #nextBtn { grid-column: 4 !important; grid-row: 2 !important; justify-self: center !important; }
  html body[data-active-view="player"] #playlistToggleBtn {
    grid-column: 5 !important; grid-row: 2 !important; justify-self: center !important;
    position: relative !important; width: 44px !important; height: 44px !important;
    display: grid !important; place-items: center !important; color: rgba(255, 255, 255, .75) !important;
  }
  html body[data-active-view="player"] #speedBtn,
  html body[data-active-view="player"] .volume-container,
  html body[data-active-view="player"] .desktop-pip-btn { display: none !important; }
  html body[data-active-view="player"] .playlist-badge { top: 2px !important; right: 0 !important; }
}

@media (max-width: 768px) and (max-height: 700px) {
  html:root { --iphone-meta-h: 188px; }
}

/* iOS 26 主屏幕 Web App：页面不高于屏幕时，系统把视口缩短一个状态栏高度（WebKit 301108 / 301994），
   position:fixed 的底部控制栏随之上移，下方出现空白。仅手机 + 主屏幕模式：让文档至少与屏幕等高；
   min(100lvh, …) 封顶，视口正常或状态栏不透明（安全区顶部为 0）时与原样相同，不产生额外滚动。 */
@media (max-width: 768px) and (display-mode: standalone) {
  html:root { min-height: min(100lvh, calc(100% + env(safe-area-inset-top, 0px))) !important; }
}