/* TLLNALF Music Archive — Apple Music 沉浸式风格 v1 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --fg: #fff;
  --fg-dim: rgba(255,255,255,.55);
  --fg-faint: rgba(255,255,255,.32);
  --glass: rgba(255,255,255,.08);
  --glass-border: rgba(255,255,255,.12);
  --accent: #fa2d48;
  --radius: 12px;
}
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #000;
  color: var(--fg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* ---- 动态背景 ---- */
.bg-blur {
  position: fixed; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(70px) saturate(1.4);
  transform: scale(1.1);
  transition: background-image .8s ease;
  z-index: 0;
}
.bg-dim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1;
}

.app { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }

/* ---- 顶栏 ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 20px 10px;
}
.brand { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: var(--fg-dim); }
.main-nav { display: flex; gap: 4px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; padding: 3px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-tab {
  border: none; background: transparent; color: var(--fg-dim);
  font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: all .25s;
}
.nav-tab.active { background: rgba(255,255,255,.92); color: #000; }
.topbar-right { width: 80px; }

/* ---- 播放主舞台 ---- */
.view { flex: 1; display: flex; flex-direction: column; }
.player-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 8px 28px calc(env(safe-area-inset-bottom, 0px) + 28px);
  max-width: 520px; width: 100%; margin: 0 auto;
}
.cover-wrap {
  width: min(72vw, 320px); aspect-ratio: 1; margin-top: 12px;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.4);
  animation: coverIn .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes coverIn { from { transform: scale(.94); opacity: 0; } }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.track-meta { text-align: center; margin-top: 22px; width: 100%; }
.track-meta h1 { font-size: 21px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-meta p { font-size: 16px; color: var(--accent); margin-top: 5px; font-weight: 500; }
.track-specs { font-size: 12px !important; color: rgba(255,255,255,.45) !important; font-weight: 400 !important; letter-spacing: .5px; margin-top: 6px !important; font-variant-numeric: tabular-nums; }

/* ---- 进度条 ---- */
.progress-zone { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 20px; }
.time { font-size: 11px; color: var(--fg-faint); font-variant-numeric: tabular-nums; min-width: 34px; }
.time:last-child { text-align: right; }
.progress-track {
  flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer;
  position: relative;
}
.progress-track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.18);
}
.progress-fill {
  position: absolute; left: 0; height: 5px; border-radius: 3px;
  background: var(--fg); width: 0%;
}
.progress-knob {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; left: 0%; transform: translateX(-50%) scale(0);
  transition: transform .15s; box-shadow: 0 1px 5px rgba(0,0,0,.4);
}
.progress-track:active .progress-knob { transform: translateX(-50%) scale(1); }

/* ---- 播放控制 ---- */
.controls { display: flex; align-items: center; gap: 38px; margin-top: 14px; }
.ctl-btn {
  border: none; background: transparent; cursor: pointer; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s, opacity .12s;
}
.ctl-btn:active { transform: scale(.88); opacity: .7; }
.ctl-btn svg { width: 38px; height: 38px; fill: #fff; }
.ctl-btn.play svg { width: 64px; height: 64px; }

/* ---- 副控制 ---- */
.sub-controls { display: flex; gap: 12px; margin-top: 22px; }
.pill-btn {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--fg-dim); font-size: 13px; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: all .2s;
}
.pill-btn:active { transform: scale(.94); }
.pill-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- 播放列表抽屉 ---- */
.drawer-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.drawer-mask.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: rgba(28,28,30,.92); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-radius: 18px 18px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translateY(105%); transition: transform .38s cubic-bezier(.32,.72,.28,1);
  max-height: 70vh; display: flex; flex-direction: column;
}
.drawer.show { transform: translateY(0); }
.drawer-handle { width: 38px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 6px auto 14px; }
.drawer h2 { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.queue-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.queue-kicker{font-size:10px;letter-spacing:.16em;color:var(--fg-faint)}
.queue-head h2{margin:3px 0;font-size:22px}
.queue-count{margin:0;color:var(--fg-dim);font-size:12px}
.queue-close{width:40px;height:40px;border:1px solid var(--glass-border);border-radius:50%;background:var(--glass);color:#fff;font-size:17px;cursor:pointer}
.queue-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:14px 0 12px}
.queue-search,.queue-sort{display:flex;align-items:center;gap:8px;min-height:42px;padding:0 12px;border:1px solid var(--glass-border);border-radius:12px;background:rgba(255,255,255,.055);color:var(--fg-dim)}
.queue-search input,.queue-sort select{min-width:0;border:0;outline:0;background:transparent;color:#fff;font:inherit}
.queue-search input{width:100%}.queue-search input::placeholder{color:var(--fg-faint)}
.queue-sort{font-size:12px}.queue-sort select{max-width:115px;cursor:pointer}.queue-sort option{background:#202124;color:#fff}
.queue-list{min-height:0;overscroll-behavior:contain}
.queue-empty,.history-empty{margin:10px 0;padding:16px;border:1px solid var(--glass-border);border-radius:12px;color:var(--fg-dim);font-size:13px;line-height:1.6}
.history-empty{padding:8px 0;border:0}
.queue-list { overflow-y: auto; display: flex; flex-direction: column; }
.queue-item {
  display: flex; align-items: center; gap: 13px; padding: 9px 6px;
  border-radius: 10px; cursor: pointer; transition: background .15s;
  border: none; background: transparent; color: #fff; text-align: left; width: 100%;
}
.queue-item:active { background: rgba(255,255,255,.08); }
.queue-item.current { background: rgba(255,255,255,.07); }
.queue-item img { width: 48px; height: 48px; border-radius: 7px; object-fit: cover; }
.queue-item .q-meta { flex: 1; min-width: 0; }
.queue-item .q-title { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-item .q-artist { font-size: 13px; color: var(--fg-dim); margin-top: 2px; }
.queue-item .q-playing { color: var(--accent); font-size: 15px; }

/* ---- 全屏歌词 ---- */
.lyrics-full {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
}
.lyrics-full-bg { position: absolute; inset: 0; background: rgba(0,0,0,.88); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.lyrics-close {
  position: relative; z-index: 2; align-self: flex-end;
  margin: calc(env(safe-area-inset-top, 0px) + 16px) 20px 0;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--glass); color: #fff; font-size: 15px; cursor: pointer;
}
.lyrics-full-tools {
  position: relative; z-index: 2; display: flex; gap: 8px; justify-content: center;
  padding: 10px;
}
.lyrics-full-tools button {
  border: 1px solid var(--glass-border); background: var(--glass); color: var(--fg-dim);
  font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer;
}
.lyrics-scroll {
  position: relative; z-index: 2; flex: 1; overflow-y: auto;
  padding: 10px 32px 60px; text-align: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.lyrics-scroll .lyr-line { margin: 22px 0; cursor: pointer; }
.lyrics-scroll .lyr-en {
  font-size: var(--lyr-size, 19px); font-weight: 700; line-height: 1.5;
  color: rgba(255,255,255,.28); transition: color .3s;
}
.lyrics-scroll .lyr-line.active .lyr-en { color: #fff; }
.lyrics-scroll .lyr-word.sung { color: #fff; }
.lyrics-scroll .lyr-line.active .lyr-word:not(.sung) { color: rgba(255,255,255,.45); }
.lyrics-scroll .lyr-zh { font-size: 14px; color: var(--fg-faint); margin-top: 6px; font-weight: 400; }
.lyrics-scroll .lyr-line.active .lyr-zh { color: var(--fg-dim); }
.lyrics-status { position: relative; z-index: 2; text-align: center; font-size: 12px; color: var(--fg-faint); padding: 12px; }

/* ---- 心情墙 ---- */
.wall-stage { max-width: 620px; width: 100%; margin: 0 auto; padding: 10px 22px 60px; }
.wall-title { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.wall-desc { font-size: 14px; color: var(--fg-dim); margin: 8px 0 20px; }
.wall-form {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px;
  padding: 16px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  margin-bottom: 22px;
}
.wall-form textarea, .wall-form input[type=text] {
  width: 100%; background: rgba(0,0,0,.25); border: 1px solid var(--glass-border);
  border-radius: 10px; color: #fff; font-size: 15px; padding: 11px 13px; outline: none;
  font-family: inherit; resize: vertical;
}
.wall-form textarea:focus, .wall-form input:focus { border-color: var(--accent); }
.wall-form input[type=text] { margin-top: 10px; }
.wall-form-row { display: flex; gap: 10px; margin-top: 10px; }
.wall-form-row input { flex: 1; margin-top: 0; }
.wall-form button {
  border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 700;
  padding: 0 26px; border-radius: 10px; cursor: pointer; transition: transform .12s;
}
.wall-form button:active { transform: scale(.95); }
.wall-list { display: flex; flex-direction: column; gap: 12px; }
.wall-card {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px;
  padding: 15px 17px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  animation: cardIn .4s ease;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } }
.wall-card .w-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wall-card .w-name { font-size: 14px; font-weight: 700; color: var(--accent); }
.wall-card .w-date { font-size: 12px; color: var(--fg-faint); }
.w-del {
  border: none; background: transparent; color: var(--fg-faint);
  font-size: 13px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  transition: all .15s; vertical-align: baseline;
}
.w-del:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
.wall-card .w-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.wall-card .w-body { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.88); white-space: pre-wrap; word-break: break-word; }

@media (min-width: 700px) {
  .cover-wrap { width: 320px; }
  .player-stage { justify-content: center; }
}

/* V1.3 incremental additions: keep the original cover-led color and glass system. */
.topbar-right { width: auto; min-width: 80px; display:flex; justify-content:flex-end; }
.curation-open { color:#fff; padding:8px 15px; }
.vinyl-toggle { margin-top:10px; border:1px solid var(--glass-border); color:var(--fg-dim); background:var(--glass); border-radius:999px; padding:6px 12px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.cover-wrap.is-vinyl { position:relative; border-radius:50%; overflow:hidden; background:repeating-radial-gradient(circle, #171719 0 2px, #252528 3px 4px, #111113 5px 7px); box-shadow:0 24px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.cover-wrap.is-vinyl::before { content:""; position:absolute; inset:0; border-radius:50%; background:repeating-radial-gradient(circle, transparent 0 8px, rgba(255,255,255,.10) 9px, transparent 10px 14px); z-index:1; pointer-events:none; }
.cover-wrap.is-vinyl img { position:absolute; width:68%; height:68%; left:16%; top:16%; border-radius:50%; z-index:2; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.cover-wrap.is-vinyl.is-spinning { animation:vinylSpin 5s linear infinite; }
@keyframes vinylSpin { to { transform:rotate(360deg); } }
.pick-card { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; margin-top:14px; padding:13px 15px; border:1px solid var(--glass-border); border-radius:14px; background:rgba(255,255,255,.07); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.pick-kicker,.collection-kicker { color:var(--fg-faint); letter-spacing:1.5px; font-size:9px; font-weight:800; }
.pick-card h2 { font-size:14px; margin-top:3px; }
.pick-card p { color:var(--fg-dim); font-size:12px; margin-top:4px; }
.pick-card button,.request-form button { flex:none; border:1px solid var(--glass-border); border-radius:999px; background:rgba(255,255,255,.12); color:#fff; padding:9px 13px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; }
.curation-mask { position:fixed; inset:0; z-index:58; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .22s; }
.curation-mask.show { opacity:1; pointer-events:auto; }
.curation-drawer { position:fixed; z-index:59; top:0; right:0; bottom:0; width:min(460px,92vw); padding:calc(env(safe-area-inset-top,0px) + 20px) 20px calc(env(safe-area-inset-bottom,0px) + 22px); overflow-y:auto; background:rgba(25,25,28,.95); border-left:1px solid var(--glass-border); backdrop-filter:blur(30px); -webkit-backdrop-filter:blur(30px); transform:translateX(105%); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.curation-drawer.show { transform:translateX(0); }
.curation-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.curation-head h2 { font-size:24px; margin-top:3px; }
.curation-close { width:36px; height:36px; border:1px solid var(--glass-border); border-radius:50%; color:#fff; background:var(--glass); cursor:pointer; }
.collection-card { padding:15px; margin:12px 0; border:1px solid var(--glass-border); border-radius:16px; background:rgba(255,255,255,.055); }
.collection-copy h3 { font-size:16px; margin-top:5px; }
.collection-copy p { color:var(--fg-dim); font-size:13px; line-height:1.5; margin-top:5px; }
.collection-tracks { display:grid; gap:6px; margin-top:12px; }
.collection-track { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; border:0; border-radius:9px; padding:9px 10px; text-align:left; color:#fff; background:rgba(255,255,255,.055); cursor:pointer; }
.collection-track:hover,.collection-track:focus-visible { background:rgba(255,255,255,.12); }
.collection-track span:last-child { color:var(--fg-faint); font-size:11px; flex:none; }
.request-form { display:grid; gap:7px; margin-top:12px; }
.request-form label { font-size:12px; color:var(--fg-dim); }
.request-form label span { color:var(--fg-faint); margin-left:5px; }
.request-form input { width:100%; min-width:0; padding:11px 12px; border:1px solid var(--glass-border); border-radius:9px; outline:none; background:rgba(0,0,0,.24); color:#fff; font-family:inherit; font-size:14px; }
.request-form input:focus { border-color:rgba(255,255,255,.45); }
.request-form button { justify-self:start; margin-top:5px; }
.request-form #requestStatus { min-height:1.3em; color:var(--fg-dim); font-size:12px; }
body.curation-open { overflow:hidden; }
@media (min-width:701px) {
  .drawer{top:0;right:0;bottom:0;left:auto;width:min(480px,42vw);max-height:none;padding:26px 24px 24px;border-left:1px solid var(--glass-border);border-radius:18px 0 0 18px;transform:translateX(105%)}
  .drawer.show{transform:translateX(0)}
  .drawer-handle{display:none}
}
@media (max-width:700px) {
  .topbar { gap:5px; padding-left:12px; padding-right:12px; }
  .brand { letter-spacing:1.1px; font-size:9px; white-space:nowrap; }
  .nav-tab { padding:7px 9px; font-size:12px; }
  .topbar-right { min-width:auto; }
  .curation-open { padding:7px 10px; font-size:12px; }
  .player-stage { padding-left:20px; padding-right:20px; }
  .queue-tools{grid-template-columns:minmax(0,1fr) auto;gap:7px}.queue-sort{padding:0 8px}.queue-sort select{max-width:90px;font-size:12px}
  .pick-card { padding:11px 12px; }
  .pick-card button { padding:8px 10px; font-size:11px; }
  .curation-drawer { top:auto; left:0; right:0; bottom:0; width:100%; max-height:min(88vh,820px); border-left:0; border-top:1px solid var(--glass-border); border-radius:20px 20px 0 0; transform:translateY(105%); }
  .curation-drawer.show { transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce) {
  .cover-wrap.is-vinyl.is-spinning { animation:none; }
  .curation-mask,.curation-drawer { transition:none; }
}

/* V1.4 preview: compact shortcuts and quieter reading controls. */
.curation-shortcuts{display:flex;gap:8px;width:100%;overflow-x:auto;justify-content:center;padding:12px 2px 3px;scrollbar-width:none}
.curation-shortcuts::-webkit-scrollbar{display:none}
.curation-shortcuts button{flex:0 0 auto;min-height:44px;padding:8px 15px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass);color:rgba(255,255,255,.84);font:inherit;font-size:12px;cursor:pointer}
.curation-shortcuts button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lyrics-full-bg{background:rgba(12,11,18,.82)}
.lyrics-full-tools button{min-height:40px;color:rgba(255,255,255,.82)}
.lyrics-scroll{padding-left:clamp(24px,8vw,120px);padding-right:clamp(24px,8vw,120px)}
.lyrics-scroll .lyr-line{margin:26px auto;max-width:780px}
.lyrics-scroll .lyr-en{line-height:1.65}
.lyrics-scroll .lyr-zh{line-height:1.6}
.controls .ctl-btn{border-radius:50%;transition:background .18s,transform .18s}
.controls .ctl-btn:focus-visible,.lyrics-full-tools button:focus-visible,.lyrics-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:375px){.curation-shortcuts{justify-content:flex-start}.curation-shortcuts button{padding-inline:12px}}

/* Desktop landscape listening-room layout. */
.home-favorites{display:none}
@media (min-width:900px) and (orientation:landscape){
 .topbar{width:min(100%,1000px);margin:0 auto;padding:22px 20px}
 .player-stage{display:grid;grid-template-columns:minmax(300px,420px) minmax(300px,1fr);grid-template-areas:"cover meta" "cover progress" "cover controls" "vinyl subcontrols" "shortcuts shortcuts" "favorites pick" "status status";column-gap:clamp(40px,8vw,110px);row-gap:14px;align-content:start;align-items:center;max-width:1000px;padding:32px 20px 72px}
 .player-stage .cover-wrap{grid-area:cover;width:100%;max-width:420px;margin:0;justify-self:center}
 .player-stage .vinyl-toggle{grid-area:vinyl;justify-self:center;margin:0}
 .player-stage .track-meta{grid-area:meta;text-align:left;margin:0;align-self:end}
 .player-stage .track-meta h1{font-size:clamp(26px,3vw,40px);white-space:normal}
 .player-stage .progress-zone{grid-area:progress;margin:0}
 .player-stage .controls{grid-area:controls;margin:0;justify-content:center;align-self:start}
 .player-stage .sub-controls{grid-area:subcontrols;margin:0;justify-content:center}
 .player-stage .curation-shortcuts{grid-area:shortcuts;justify-content:stretch;border-top:1px solid var(--glass-border);padding:24px 0 8px;margin-top:16px}
 .player-stage .curation-shortcuts button{flex:1}
 .player-stage .home-favorites{grid-area:favorites;display:block;align-self:stretch;padding:16px;border:1px solid var(--glass-border);border-radius:16px;background:var(--glass)}
 .home-favorites h2{font-size:14px}.home-favorites .collection-tracks{margin-top:10px}
 .player-stage .pick-card{grid-area:pick;align-self:stretch;margin:0;flex-wrap:wrap}
 .player-stage #playbackStatus{grid-area:status}
}

/* Wider screens: let the listening room breathe without excessive margins. */
@media (min-width:1200px) and (orientation:landscape){
 .topbar{width:min(88vw,1280px)}
 .player-stage{width:min(88vw,1280px);max-width:1280px;grid-template-columns:minmax(350px,500px) minmax(350px,1fr);column-gap:clamp(48px,6vw,110px)}
 .player-stage .cover-wrap{max-width:500px}
 .home-favorites h2{font-size:16px}
 .home-favorites .collection-track{padding:11px 12px}
 .pick-card h2{font-size:16px}
}

/* Mobile V1.4: player first, three direct entrances, then the independent pick. */
@media (max-width:700px){
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:calc(env(safe-area-inset-top,0px) + 14px) 20px 8px}
 .topbar .brand{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .topbar .main-nav{justify-self:end}
 .topbar-right{grid-column:1 / -1;justify-self:end}
 .player-stage{padding-left:20px;padding-right:20px}
 .player-stage .curation-shortcuts{order:1;display:flex;justify-content:stretch;gap:6px;padding:16px 0 2px;margin-top:8px;border-top:1px solid var(--glass-border);overflow-x:auto}
 .player-stage .curation-shortcuts button{display:flex;flex:1 0 88px;min-width:0;min-height:58px;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:8px 5px;white-space:nowrap}
 .curation-shortcuts button::before{font-size:16px;line-height:1;color:rgba(230,220,250,.78)}
 .curation-shortcuts button[data-curation-section="essentialsCard"]::before{content:"◇"}
 .curation-shortcuts button[data-curation-section="requestCard"]::before{content:"✦"}
 .curation-shortcuts button[data-curation-section="midnightCard"]::before{content:"☾"}
 .player-stage .pick-card{order:2;margin-top:16px}
 .player-stage #playbackStatus{order:3}
 .player-stage #player{order:4}
 .curation-drawer{max-height:min(78vh,820px);max-height:min(78dvh,820px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 22px)}
 .curation-close{width:44px;height:44px;flex:none}
}
@media (max-width:360px){.topbar{padding-left:14px;padding-right:14px}.player-stage{padding-left:16px;padding-right:16px}.topbar .nav-tab{padding-left:8px;padding-right:8px}}

/* V1.5 desktop-only visual pass; all controls retain their existing handlers. */
@media (min-width:1024px) and (orientation:landscape){
 .bg-blur{filter:blur(70px) saturate(1.05) brightness(.78)}
 .bg-dim{background:rgba(0,0,0,.64)}
 .topbar{width:min(calc(100% - 64px),1280px);padding:22px 0}
 .brand{font-size:12px;color:rgba(255,255,255,.78)}
 .main-nav{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}
 .player-stage{width:min(calc(100% - 64px),1280px);max-width:1280px;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);column-gap:clamp(32px,4vw,72px);row-gap:16px;padding:30px 0 72px}
 .player-stage .cover-wrap{max-width:460px;justify-self:start}
 .player-stage .track-meta h1{font-size:clamp(30px,2.8vw,44px);line-height:1.12;letter-spacing:-.025em}
 .player-stage .track-meta p{font-size:17px}
 .player-stage .track-meta .track-specs{color:rgba(255,255,255,.42)!important}
 .controls .ctl-btn{min-width:48px;min-height:48px}
 .controls .ctl-btn.play{width:68px;height:68px;background:rgba(255,255,255,.9);color:#141414}
 .controls .ctl-btn.play svg{width:40px;height:40px;fill:currentColor}
 .sub-controls .pill-btn,.vinyl-toggle{background:transparent;border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.68)}
 .player-stage .curation-shortcuts{gap:12px;padding-top:24px}
 .player-stage .curation-shortcuts button{min-width:0;min-height:88px;padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;border-radius:14px;text-align:left;font-size:15px;font-weight:650;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1);transition:background .16s,transform .16s,border-color .16s}
 .curation-shortcuts button::before{font-size:10px;letter-spacing:.14em;color:rgba(255,255,255,.48);font-weight:700}
 .curation-shortcuts button[data-curation-section="essentialsCard"]::before{content:"ESSENTIALS"}
 .curation-shortcuts button[data-curation-section="requestCard"]::before{content:"SONG REQUEST"}
 .curation-shortcuts button[data-curation-section="midnightCard"]::before{content:"AFTER MIDNIGHT"}
 .curation-shortcuts button:hover,.curation-shortcuts button:focus-visible{background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
 .player-stage .home-favorites,.player-stage .pick-card{padding:22px;border-radius:16px;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.045)}
 .home-favorites h2{font-size:16px;letter-spacing:.02em}
 .home-favorites .collection-tracks{gap:0;margin-top:12px}
 .home-favorites .collection-track{min-height:46px;padding:10px 4px;border-radius:0;border-top:1px solid rgba(255,255,255,.08);background:transparent;font-size:14px}
 .home-favorites .collection-track span:last-child{font-size:12px;color:rgba(255,255,255,.58)}
 .home-favorites .collection-track:hover,.home-favorites .collection-track:focus-visible{background:rgba(255,255,255,.06)}
 .player-stage .pick-card{align-content:center;align-items:center;gap:18px}
 .pick-card .pick-kicker{font-size:10px;color:rgba(255,255,255,.5)}
 .pick-card h2{font-size:20px;line-height:1.3}
 .pick-card p{font-size:13px;line-height:1.6;color:rgba(255,255,255,.65)}
 .pick-card button{min-height:44px;border-radius:12px;background:rgba(255,255,255,.1)}
 .curation-shortcuts button:focus-visible,.home-favorites .collection-track:focus-visible,.pick-card button:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:3px}
}
@media (min-width:1024px) and (orientation:landscape) and (prefers-reduced-motion:reduce){
 .curation-shortcuts button{transition:none}
 .curation-shortcuts button:hover,.curation-shortcuts button:focus-visible{transform:none}
}

/* V1.5 isolated lyrics redesign; scoped to the existing overlay. */
.lyrics-full{z-index:10001}
.lyrics-full-bg{background:rgba(5,9,11,.87);backdrop-filter:none;-webkit-backdrop-filter:none}
.lyrics-top,.lyrics-bottom,.lyrics-layout{position:relative;z-index:2}
.lyrics-top{display:flex;align-items:center;gap:14px;width:min(calc(100% - 64px),1220px);margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 20px) 0 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.lyrics-full .lyrics-close{flex:none;align-self:auto;margin:0;width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.12);font-size:22px}
.lyrics-heading{min-width:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.lyrics-heading strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyrics-heading span,.lyrics-top-label{color:rgba(255,255,255,.55);font-size:12px}
.lyrics-top-label{margin-left:auto;white-space:nowrap;letter-spacing:.08em}
.lyrics-layout{flex:1;min-height:0;width:min(calc(100% - 64px),1220px);margin:0 auto;display:grid;grid-template-columns:minmax(230px,.8fr) minmax(0,1.4fr)}
.lyrics-info{min-width:0;padding:clamp(24px,5vw,65px) clamp(20px,4vw,54px) 20px 0;border-right:1px solid rgba(255,255,255,.1);overflow:auto}
.lyrics-info>img{display:block;width:min(100%,300px);aspect-ratio:1;object-fit:cover;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.38)}
.lyrics-info-copy{margin-top:25px}.lyrics-eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;color:rgba(255,255,255,.48)}
.lyrics-info h2{font-size:clamp(24px,2.4vw,36px);line-height:1.15;margin-top:9px;overflow-wrap:anywhere}
.lyrics-info p{color:rgba(255,255,255,.63);font-size:14px;line-height:1.55;margin-top:7px}
.lyrics-credits{margin-top:24px;font-size:12px;color:rgba(255,255,255,.72)}
.lyrics-credits summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.lyrics-credits summary::before{content:"+";font-size:18px}.lyrics-credits[open] summary::before{content:"−"}
.lyrics-credits p{font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.lyrics-full .lyrics-scroll{padding:clamp(20px,4vw,48px) clamp(20px,4vw,54px) 80px;text-align:left;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.lyrics-scroll .lyr-line{max-width:none;margin:0 0 32px;outline-offset:6px}
.lyrics-scroll .lyr-line.is-credit{display:none}
.lyrics-scroll .lyr-en{font-size:clamp(18px,calc(var(--lyr-size,15px) + 7px),32px);line-height:1.4;color:rgba(255,255,255,.34)}
.lyrics-scroll .lyr-line.is-neighbor .lyr-en{color:rgba(255,255,255,.62)}
.lyrics-scroll .lyr-line.active .lyr-en,.lyrics-scroll .lyr-word.sung{color:#fff}
.lyrics-scroll .lyr-line.active .lyr-word:not(.sung){color:rgba(255,255,255,.7)}
.lyrics-scroll .lyr-zh{font-size:clamp(13px,calc(var(--lyr-size,15px) + 1px),20px);line-height:1.6;color:rgba(255,255,255,.4);margin-top:8px}
.lyrics-scroll .lyr-line.is-neighbor .lyr-zh{color:rgba(255,255,255,.56)}
.lyrics-scroll .lyr-line.active .lyr-zh{color:rgba(255,255,255,.8)}
.lyrics-scroll .lyr-line:focus-visible,.lyrics-credits summary:focus-visible{outline:2px solid #fff}
.lyrics-bottom{width:min(calc(100% - 64px),1220px);margin:0 auto;padding:10px 0 calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:space-between;gap:12px}
.lyrics-full .lyrics-status{padding:0;text-align:left;color:rgba(255,255,255,.55);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lyrics-full .lyrics-full-tools{padding:0;justify-content:flex-end;flex-wrap:wrap}
.lyrics-full .lyrics-full-tools button{min-height:44px;min-width:44px}
@media(max-width:700px){
 .lyrics-top,.lyrics-layout,.lyrics-bottom{width:calc(100% - 32px)}
 .lyrics-top{padding-top:calc(env(safe-area-inset-top,0px) + 12px);padding-bottom:10px}
 .lyrics-top-label{font-size:10px}
 .lyrics-layout{display:flex;flex-direction:column}
 .lyrics-info{display:flex;align-items:center;gap:12px;flex:none;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 0;max-height:35%;overflow:auto}
 .lyrics-info>img{width:54px;height:54px;border-radius:10px;flex:none}
 .lyrics-info-copy{margin:0;min-width:0;flex:1}.lyrics-info h2{font-size:17px;margin-top:3px}.lyrics-info p{font-size:12px;margin-top:3px}.lyrics-eyebrow{display:none}
 .lyrics-credits{margin-top:2px}.lyrics-credits summary{min-height:36px}
 .lyrics-full .lyrics-scroll{padding:26px 4px 60px}
 .lyrics-scroll .lyr-en{font-size:clamp(18px,calc(var(--lyr-size,15px) + 4px),26px)}
 .lyrics-scroll .lyr-line{margin-bottom:26px}
 .lyrics-bottom{align-items:flex-end}.lyrics-full .lyrics-status{font-size:10px;flex:1}
 .lyrics-full .lyrics-full-tools{gap:4px}.lyrics-full .lyrics-full-tools button{padding:6px;min-width:44px}
}
@media(max-width:360px){.lyrics-top,.lyrics-layout,.lyrics-bottom{width:calc(100% - 24px)}.lyrics-bottom{flex-wrap:wrap}.lyrics-full .lyrics-status{flex-basis:100%}.lyrics-full .lyrics-full-tools{width:100%;justify-content:space-between}.lyrics-full .lyrics-full-tools button{min-width:44px;font-size:11px}.lyrics-top-label{display:none}}
@media(prefers-reduced-motion:reduce){.lyrics-scroll .lyr-en{transition:none}}

/* Isolate lyric text from the homepage while retaining a subtle tinted backdrop. */
.lyrics-full-bg{background:radial-gradient(ellipse at 20% 15%,#1c3031 0%,#101b1d 38%,#080f10 100%)}

/* Local immersive prototype */
#vinylToggle{display:none!important}.lyrics-full-bg{background:radial-gradient(ellipse at 20% 12%,rgb(var(--immersive-color,50 70 75)/.92) 0%,rgb(var(--immersive-color,50 70 75)/.45) 48%,#111720 100%),#111720;transition:background .5s}
.lyrics-top{border:0;padding-bottom:4px}.lyrics-top-label{display:none}.lyrics-layout{width:min(calc(100% - 96px),1250px);grid-template-columns:minmax(260px,.95fr) minmax(0,1.25fr);gap:6vw;align-items:center}.lyrics-info{border:0;padding:24px 0;overflow:auto}.lyrics-info img{width:min(100%,390px);max-height:45vh;object-fit:cover}.lyrics-info h2{font-size:clamp(25px,3vw,36px);margin:15px 0 3px}.lyrics-info-copy p{font-size:20px}.lyrics-full .lyrics-scroll{height:100%;padding:35px 0 70px}.lyrics-scroll .lyr-en{font-size:clamp(20px,2vw,29px)}.lyrics-scroll .lyr-zh{font-size:clamp(15px,1.3vw,20px)}.immersive-footer{z-index:2;position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:25px;align-items:center;padding:14px max(24px,calc((100% - 1250px)/2));border-top:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.12)}.immersive-progress{display:flex;align-items:center;gap:12px;font-size:12px;white-space:nowrap}.immersive-progress input{width:100%;accent-color:#fff}.immersive-controls{display:flex;gap:20px}.immersive-controls button,.immersive-settings summary{background:none;border:0;color:white;font-size:22px;cursor:pointer;padding:8px;list-style:none}.immersive-settings{justify-self:end;position:relative}.immersive-settings-panel{position:absolute;right:0;bottom:52px;background:#202629;padding:14px;border-radius:12px;min-width:250px}.immersive-settings .lyrics-status{margin:0 0 10px}.immersive-settings .lyrics-full-tools{display:flex;gap:5px}.immersive-settings button{min-width:40px;min-height:40px}
@media(max-width:700px){.lyrics-layout{width:calc(100% - 32px);gap:0;display:flex}.lyrics-info{width:100%;max-height:unset;display:flex;padding:8px 0 12px}.lyrics-info img{width:75px;height:75px;flex:none}.lyrics-info h2{font-size:20px;margin:0}.lyrics-info-copy p{font-size:14px}.lyrics-full .lyrics-scroll{width:100%;flex:1;height:auto;padding:24px 4px 40px}.immersive-footer{padding:10px 16px;grid-template-columns:1fr auto;gap:6px}.immersive-progress{grid-column:1/-1}.immersive-controls{justify-self:center;grid-column:1/-1}.immersive-settings{position:absolute;right:16px;bottom:12px}.immersive-settings-panel{bottom:45px}.lyrics-top{width:calc(100% - 32px)}}