/* =============================================================================
 *  Lyra · screen "now-playing" · 屏幕专属样式
 *  全部 scoped 于 [data-screen="now-playing"]，不与其它屏冲突。
 *  视觉语言承接 mockup A（Nocturne）：渐变 mesh 封面 + 呼吸流光、
 *  纪律化歌词排版（furigana、行距、active draw-underline）、mono 数字。
 * ========================================================================== */

/* —— 整屏纵向布局：上部固定（封面/元信息），中部歌词滚动，底部播放器 —— */
[data-screen="now-playing"] .np {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 4px 20px calc(16px + env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;   /* P3：预算溢出时裁掉,绝不让内容外溢盖到底部 tabbar 圆角 */
}

/* ------------------------------------------------------------------ 顶部行 */
[data-screen="now-playing"] .np-head {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
[data-screen="now-playing"] .np-head .now {
  font-size: 11px; letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--ink-dim);
}
/* 顶部 ambient 北极星条（极轻，非菜单）：诚实显"样本积累中"，校准后才显 ≈X% */
[data-screen="now-playing"] .np-northstar {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  background: var(--fill-soft); border: 1px solid var(--line);
  font-size: 12px; color: var(--ink-dim);
  transition: background .18s ease, border-color .18s ease;
}
[data-screen="now-playing"] .np-northstar:hover { background: var(--fill-hover); border-color: var(--line-strong); }
[data-screen="now-playing"] .np-northstar b { color: var(--ink); font-weight: 600; }
[data-screen="now-playing"] .np-northstar-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 8px var(--mint); opacity: .7;
}

/* ------------------------------------------- 环境流光（不占版面 / 顶部弥漫） */
/* 删去封面块后：内容统一抬到 z-index:1，流光垫在最底，仅作 Nocturne 氛围光，
 * 不再吃掉垂直版面 —— 把腾出的空间全部让给歌词。 */
[data-screen="now-playing"] .np > * { position: relative; z-index: 1; }
/* NP-LAYOUT：封面 hero 已成顶部视觉锚 → 环境光收敛为更弱的氛围底光（不与封面争视觉）。 */
[data-screen="now-playing"] .np-ambient {
  position: absolute; z-index: 0; pointer-events: none;
  inset: -6% -14% auto -14%; height: 240px;
  filter: blur(56px); opacity: .24;
  background: radial-gradient(52% 60% at 50% 0%, var(--coral), transparent 72%);
  animation: npAmbientBreathe 9s ease-in-out infinite;
}
/* 缓慢、克制的氛围呼吸（远比封面 glow 暗，不与歌词争视觉） */
@keyframes npAmbientBreathe {
  0%, 100% { opacity: .28; transform: scale(1); }
  50%      { opacity: .44; transform: scale(1.05); }
}

/* ------------------------------------------- NP-LAYOUT · 专辑封面 hero（v5 保真）
 * v5 screen-nowplaying：顶部真专辑封面 hero 卡（圆角、从封面 evoke 暖色、向控制带渐暗、
 * play 时微放大）。封面用 song.art（real.js coverBg 已是 CSS-ready 串：url(封面)+渐变兜底）。
 * 缺封面 → 纯渐变兜底（render 侧 GRAD0，令牌驱动），绝不黑块。
 * 高度自适应（aspect-ratio + max-height），矮屏收敛把空间让给歌词。 */
/* Round2 #3 重排：弃 32vh 大封面 hero —— 用户诉求「顶部一个栏位放歌名和封面,歌词才是主体」。
 * 封面收成 .np-meta 顶栏左侧的小缩略图(.np-cover-thumb),竖向空间全让给歌词滚动主体。
 * song.art 是 CSS-ready 背景串(url(封面)+渐变兜底,real.js 已保证);缺封面→纯渐变,绝不黑块。 */
[data-screen="now-playing"] .np-cover-thumb {
  flex: none;
  width: 54px; height: 54px; border-radius: 12px;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 0 0 1px var(--hairline-strong), 0 10px 24px -12px color-mix(in srgb, var(--canvas, #000) 70%, transparent);
}
/* 浅色=羊皮纸：封面 sepia/bronze duotone（保留真封面但古旧印谱感） */
[data-theme="light"] [data-screen="now-playing"] .np-cover-thumb {
  filter: sepia(.28) saturate(.85) contrast(.96) brightness(1.02);
}

/* ----------------------------------------------------- 顶栏：小封面 + 歌名/罗马音 + 星座环 */
[data-screen="now-playing"] .np-meta {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  margin: 2px 2px 8px;
}
[data-screen="now-playing"] .np-meta-tx { flex: 1 1 auto; min-width: 0; }   /* min-width:0 → 长标题 ellipsis 不撑破栏 */
[data-screen="now-playing"] .np-title {
  font-family: var(--jp); font-weight: 700; font-size: 20px;
  line-height: 1.2; letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="now-playing"] .np-sub {
  color: var(--ink-dim); font-size: 13px; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="now-playing"] .np-sub .np-romaji {
  font-family: var(--mono);   /* DESIGN §2/§5: 罗马音转写用 Geist Mono，绝不衬线 */
  font-size: 14px; color: var(--ink); letter-spacing: .2px;
}

/* FE-6：本歌星座 chip（迷你真实星座 + 进度 N/M）→ 点去地图 */
[data-screen="now-playing"] .np-const-chip {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  background: var(--fill-soft);
  border: 1px solid var(--hairline);
  transition: background .18s ease, transform .12s ease;
}
[data-screen="now-playing"] .np-const-chip:hover { background: var(--fill-hover); }
[data-screen="now-playing"] .np-const-chip:active { transform: scale(.96); }
[data-screen="now-playing"] .np-const-lab {
  font-size: 12px; color: var(--ink-muted);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

/* --------------------------------------------------------- 歌词滚动区 */
/* 中部：可滚动；active 行被 JS 滚到视觉中心 */
[data-screen="now-playing"] .np-lyrics {
  flex: 1 1 0; min-height: 0;   /* P3：歌词是唯一弹性主体,吸收全部中部空间、自由滚动 */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding: 14px 2px;
  /* 顶/底渐隐遮罩：歌词进出时柔和淡出（mask 中 #000=按亮度"显示"，非可见颜色，故保留字面值） */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 80%, transparent 100%);
}
[data-screen="now-playing"] .np-lyrics::-webkit-scrollbar { width: 0; height: 0; }
/* 上下留白：让首行/末行也能滚到中心（封面 hero 占顶后歌词区变窄，留白收敛） */
[data-screen="now-playing"] .np-lyrics-pad { height: 14%; flex: none; }   /* P3：留白收敛(26%→14%),歌词内容占更多 */

[data-screen="now-playing"] .np-line {
  padding: 9px 0;
  transition: opacity .42s cubic-bezier(.2,.8,.2,1);
  cursor: pointer;
}
[data-screen="now-playing"] .np-line .jp {
  font-family: var(--jp); font-weight: 500; font-size: 18px;
  line-height: 1.6; letter-spacing: .3px;
  display: flex; flex-wrap: wrap; gap: 2px 7px;
  transition: font-size .42s cubic-bezier(.2,.8,.2,1);
}
[data-screen="now-playing"] .np-line .tr {
  color: var(--ink-faint); font-size: 13px; margin-top: 6px; letter-spacing: .2px;
  transition: color .42s ease;
}

/* 非当前行：压暗、缩小 */
[data-screen="now-playing"] .np-line.dim { opacity: .3; }
[data-screen="now-playing"] .np-line.dim .jp { font-size: 17px; }

/* 当前行：放大、提亮 */
[data-screen="now-playing"] .np-line.cur { opacity: 1; }
[data-screen="now-playing"] .np-line.cur .jp { font-size: 24px; font-weight: 700; line-height: 1.5; }
[data-screen="now-playing"] .np-line.cur .tr { color: var(--ink-dim); font-size: 14px; }

/* 已唱过（在当前行之前）：略暗于 dim，弱化但不消失 */
[data-screen="now-playing"] .np-line.past { opacity: .22; }

/* 单个 token */
[data-screen="now-playing"] .np-w { white-space: nowrap; }
/* 词与下划线按基线对齐（助词无下划线，仍齐平） */
[data-screen="now-playing"] .np-line .jp { align-items: baseline; }

/* word token：可点 + 双段下划线。inline-block 让下划线垫在词的正下方。
 * 文字色默认 --ink（C 骨静息态克制），仅在学/新词在「当前行」提亮，避免满屏彩字噪点。 */
[data-screen="now-playing"] .np-tok {
  position: relative; cursor: pointer; color: var(--ink);
  display: inline-block; vertical-align: baseline;
}
[data-screen="now-playing"] .np-line.cur .np-tok.learn { color: var(--amber); }
[data-screen="now-playing"] .np-line.cur .np-tok.alt   { color: var(--coral); }
/* FE-1 / DESIGN §5.1 / v5 .lyric.active .hot：活跃句的高亮 token = 唯一 accent（金）。 */
[data-screen="now-playing"] .np-line.cur .np-tok.hot,
[data-screen="now-playing"] .np-line.cur .np-tok.hot .rt-kana,
[data-screen="now-playing"] .np-line.cur .np-tok.hot .rt-roma { color: var(--accent); }
/* 助词：稍弱（功能词，非视觉焦点），但仍可点 */
[data-screen="now-playing"] .np-tok.particle { color: var(--ink-muted); }
[data-screen="now-playing"] .np-line.cur .np-tok.particle { color: var(--ink-dim); }

/* —— 双段下划线（护城河 moat）：左 by-sight(眼) / 右 by-ear(耳) ——
 * 弱显：静息态低调（首用解释见点词气泡 Task 9）。当前行 / 被点时增强。 */
[data-screen="now-playing"] .dualbar {
  display: flex; align-items: center; gap: 2px;
  height: 3px; margin-top: 3px;
  opacity: .3; transition: opacity .4s ease;
}
[data-screen="now-playing"] .seg { flex: 1; height: 2px; border-radius: 1px; }
[data-screen="now-playing"] .seg.s-known    { background: var(--mint); }
[data-screen="now-playing"] .seg.s-learning { background: var(--amber); }
[data-screen="now-playing"] .seg.s-new      { background: var(--grey); }
/* by-ear 落后：右段更暗更细（耳总落后于眼的视觉隐喻） */
[data-screen="now-playing"] .seg-ear.s-new      { height: 1px; opacity: .5; }
[data-screen="now-playing"] .seg-ear.s-learning { opacity: .82; }
/* 当前行：下划线更可见（仍克制，不与歌词争视觉） */
[data-screen="now-playing"] .np-line.cur .dualbar { opacity: .7; }
/* 被点词：下划线满显（点词后局部高亮，呼应首用解释） */
[data-screen="now-playing"] .np-tok.tapped .dualbar { opacity: 1; }

/* 词加入在学后的瞬时确认脉冲 */
@keyframes np-confirm {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--coral) 50%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
[data-screen="now-playing"] .np-tok.confirmed {
  border-radius: 4px; animation: np-confirm .7s ease-out;
}

/* --------------------------------------------------------------- 点词气泡 */
/* 弹窗标题里的读音（仅当读音 ≠ 词形时显示，避免重复） */
[data-screen="now-playing"] .pop-word .np-pop-read {
  font-family: var(--jp); font-size: 12px; font-weight: 500;
  color: var(--ink-dim); margin-left: 8px; letter-spacing: .3px;
}
/* FE-1：弹窗里的罗马音 = mono（DESIGN §2，绝不衬线） */
[data-screen="now-playing"] .pop-word .np-pop-roma {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  color: var(--ink-faint); margin-left: 7px; letter-spacing: 0;
}
/* 助词词性徽：低调金调（与实词词性徽区分），呼应「这是语法功能而非词义」 */
[data-screen="now-playing"] .pop-pos.particle {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 38%, transparent);
}

/* .pop 由 styles.css 提供；这里只定位（固定在歌词区下沿，左右贴边内缩） */
[data-screen="now-playing"] .np-pop-wrap {
  position: absolute; left: 14px; right: 14px; bottom: 8px; z-index: 30;
}
[data-screen="now-playing"] .np-pop-wrap .pop { width: 100%; }
[data-screen="now-playing"] .np-pop-wrap .pop-acts { flex-wrap: wrap; }

/* —— scaffold 气泡（预测-后揭示 Task 9）—— */
/* 双段下划线首用解释：首次点词讲清「上段=眼会读，下段=耳会听」 */
[data-screen="now-playing"] .np-pop-explain {
  font-size: 13px; color: var(--ink-dim); line-height: 1.55;
  padding: 8px 10px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--s-done) 6%, transparent); border: 1px solid color-mix(in srgb, var(--s-done) 18%, transparent); border-radius: 10px;
}
[data-screen="now-playing"] .np-pop-explain b { color: var(--ink); font-weight: 700; }
[data-screen="now-playing"] .seg-tip {
  display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  margin: 0 4px -1px 2px; vertical-align: middle;
}
[data-screen="now-playing"] .seg-tip.s-sight { background: var(--mint); }
[data-screen="now-playing"] .seg-tip.s-ear { background: var(--amber); opacity: .55; }

/* P1-10：释义流式占位 + "边到边长出"——点词即出骨架头，释义生成中先柔和脉冲占位，到达后逐块吐字。
   (P1-8 删猜测门后，旧 .np-pop-hint/.np-pop-reveal/.np-pop-affirm 预测-揭示样式已无引用，移除。) */
[data-screen="now-playing"] .pop-def.np-pop-pending {
  color: var(--ink-faint);
  animation: np-pending-pulse 1.1s ease-in-out infinite;
}
@keyframes np-pending-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
/* 流式吐字时末尾一道竖光标，吐完即隐（.streaming 由 streamDef 增减）。 */
[data-screen="now-playing"] .pop-def.streaming::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  margin-left: 1px; vertical-align: -2px;
  background: var(--ink-dim);
  animation: np-caret-blink .7s step-end infinite;
}
@keyframes np-caret-blink { 50% { opacity: 0; } }

/* 训练步 3-cap 满 → 「让耳虫接手」瞬时提示 */
[data-screen="now-playing"] .np-earworm {
  text-align: center; font-size: 12.5px; color: var(--amber);
  background: color-mix(in srgb, var(--coral) 10%, transparent); border: 1px solid color-mix(in srgb, var(--coral) 28%, transparent);
  border-radius: 10px; padding: 7px 10px; margin: 0 2px 10px;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .35s ease, max-height .35s ease;
}
[data-screen="now-playing"] .np-earworm.in { opacity: 1; max-height: 44px; }

/* --------------------------------------------------------------- 播放器 */
[data-screen="now-playing"] .np-player { flex: 0 0 auto; margin-top: 10px; }   /* P3：播放器恒拿自身高度、不收缩,绝不被歌词/tabbar 吞 */

[data-screen="now-playing"] .np-audio-state {
  margin: 0 4px 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--fill-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--ink-muted);
  font-size: 12.5px;
  line-height: 1.35;
  text-align: center;
}

/* 进度行：时间(mono) — scrubber — 时间(mono) */
[data-screen="now-playing"] .np-scrub-row {
  display: flex; align-items: center; gap: 10px; margin: 0 2px 12px;
}
[data-screen="now-playing"] .np-time {
  font-size: 11px; color: var(--ink-faint); min-width: 34px;
}
[data-screen="now-playing"] .np-time.end { text-align: right; }

/* scrub：外层 padding 撑出 ≥ touch 命中区，内放 3px 轨道 */
[data-screen="now-playing"] .np-player .scrub {
  flex: 1; cursor: pointer;
  position: relative; height: auto; background: none;
  padding: 9px 0;
}
[data-screen="now-playing"] .np-player .scrub .scrub-track {
  position: relative; height: 3px; border-radius: 3px; background: var(--fill-line);
}
[data-screen="now-playing"] .np-player .scrub .scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--coral));
}

/* 主控行 */
[data-screen="now-playing"] .np-controls {
  display: flex; align-items: center; justify-content: center; gap: 22px;
}
[data-screen="now-playing"] .np-ctrl {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--ink); cursor: pointer;
  padding: 4px 8px; border-radius: 12px;
  transition: color .18s ease, transform .12s ease;
}
[data-screen="now-playing"] .np-ctrl:active { transform: scale(.92); }
[data-screen="now-playing"] .np-ctrl-lab { font-size: 10px; color: var(--ink-dim); letter-spacing: 1px; line-height: 1; }
[data-screen="now-playing"] .np-ctrl:hover, [data-screen="now-playing"] .np-ctrl:hover .np-ctrl-lab { color: var(--amber); }
[data-screen="now-playing"] .np-ctrl:active { transform: scale(.9); }
[data-screen="now-playing"] .np-ctrl[aria-disabled="true"],
[data-screen="now-playing"] .np-loop[aria-disabled="true"] {
  opacity: .42; cursor: default; pointer-events: none;
}
[data-screen="now-playing"] .np-ctrl[aria-disabled="true"] .np-ctrl-lab { color: var(--ink-faint); }

/* 训练步 loop 按钮（A·B 单句循环），方形、amber */
[data-screen="now-playing"] .np-loop {
  position: relative;
  width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid var(--line-strong); color: var(--ink-dim);
  display: grid; place-items: center;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
[data-screen="now-playing"] .np-loop:active { transform: scale(.94); }
[data-screen="now-playing"] .np-loop .np-loop-lab {
  position: absolute; bottom: 4px; left: 0; right: 0; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;   /* 修复:8px 太小 */
}
[data-screen="now-playing"] .np-loop.on {
  color: var(--amber);
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--coral) 40%, transparent) inset;
}

/* 播放/暂停大圆按钮 */
[data-screen="now-playing"] .np-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(180deg, var(--amber-top), var(--amber)); color: var(--primary-ink);
  display: grid; place-items: center;
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--coral) 70%, transparent), 0 0 0 6px color-mix(in srgb, var(--coral) 8%, transparent);
  transition: transform .12s ease;
}
[data-screen="now-playing"] .np-play:active { transform: scale(.94); }

/* （已移除面向用户的「本曲训练步」计数 chip — FE-12；A·B 循环 3-listen cap 仍为内部逻辑） */

/* ——— FE-1：两枚三态循环键（注音 假名/ローマ字/无 · 翻译 整句/逐字/无）———
 * DESIGN §5.1：低调金边、非绿胶囊；当前态(非「无」)=金高亮(accent)。v5 .toggle/.toggle.on。 */
[data-screen="now-playing"] .np-toggles {
  display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}
[data-screen="now-playing"] .np-cyc {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--jp); font-size: 12px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-muted);
  background: none;
  box-shadow: inset 0 0 0 1px var(--hairline);   /* 低调金调发丝边（非绿胶囊、零落影） */
  border: none; border-radius: var(--rad-sm);
  padding: 0 13px; min-height: 44px;             /* 触控目标 ≥44px */
  cursor: pointer;
  transition: color .18s ease, box-shadow .18s ease, background .18s ease;
}
[data-screen="now-playing"] .np-cyc-k { color: var(--ink-subtle); }
[data-screen="now-playing"] .np-cyc-v { font-weight: 600; }
/* 当前态非「无」→ 金高亮（accent 边 + ink 字 + 微填充），呼应 v5 .toggle.on */
[data-screen="now-playing"] .np-cyc.on {
  color: var(--ink); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
}
[data-screen="now-playing"] .np-cyc.on .np-cyc-v { color: var(--accent); }

/* ——— 三态注音渲染（逐字 ruby：kana / roma / off）———
 * 每段 <ruby>base<rt class="rt-kana">…<rt class="rt-roma">…；模式类决定显哪个 rt。 */
[data-screen="now-playing"] .np .rt-kana,
[data-screen="now-playing"] .np .rt-roma { display: none; }
[data-screen="now-playing"] .np.furi-kana .rt-kana { display: revert; }
[data-screen="now-playing"] .np.furi-roma .rt-roma {
  display: revert;
  font-family: var(--mono);   /* DESIGN §2/§5.1：逐字罗马音用 Geist Mono，绝不衬线 */
  letter-spacing: 0;
}
/* furi-off：两个 rt 都隐（纯汉字/假名行）。无显式规则=默认 display:none。 */

/* ——— 三态翻译（整句 / 逐字 / 无）———
 * 整句=显 .tr 整行翻译；逐字=隐 .tr、显每 token 常驻小义 .np-tok-gloss；无=都不显。 */
[data-screen="now-playing"] .np-tok-gloss {
  display: none;
  font-family: var(--ui); font-size: 10.5px; font-weight: 400;
  color: var(--ink-muted); letter-spacing: .02em; line-height: 1.2;
  margin-top: 2px; text-align: center; white-space: normal; max-width: 8em;
}
[data-screen="now-playing"] .np.tr-perword .np-line .tr { display: none; }
[data-screen="now-playing"] .np.tr-perword .np-tok-gloss { display: block; }
[data-screen="now-playing"] .np.tr-off .np-line .tr { display: none; }
/* 逐字模式下 token 改纵向布局（词 / 小义 / 下划线 竖排居中） */
[data-screen="now-playing"] .np.tr-perword .np-tok {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: top;
}
/* 词本体（含按 mora 拆出的多枚兄弟 <ruby>）横排成「一行词」：column 布局下若不裹这层，
 * 每个假名 ruby 会各占一行（纯假名词如「わからない」逐字竖排炸开）。整句模式无害（inline span）。 */
[data-screen="now-playing"] .np-wordline { white-space: nowrap; }

/* （已移除底部脚注 .np-foot — UX-REVIEW + FE-12；不再有面向用户的训练步/裸听指标） */

@media (prefers-reduced-motion: reduce) {
  [data-screen="now-playing"] .np-lyrics { scroll-behavior: auto; }
  [data-screen="now-playing"] .np-ambient { animation: none; opacity: .24; }
  [data-screen="now-playing"] .dualbar,
  [data-screen="now-playing"] .np-line,
  [data-screen="now-playing"] .np-line .jp { transition: none; }
}

/* 矮屏（小手机）：环境光收敛，把空间继续让给歌词 */
@media (max-height: 720px) {
  [data-screen="now-playing"] .np-ambient { height: 220px; opacity: .28; }
}

/* 矮视口：压缩上下 chrome，把可视高度还给当前歌词与底部切换钮。 */
@media (max-height: 560px) {
  [data-screen="now-playing"] .np {
    padding: 2px 14px calc(8px + env(safe-area-inset-bottom));
  }
  [data-screen="now-playing"] .np-head {
    margin-bottom: 4px;
  }
  [data-screen="now-playing"] .np-northstar {
    min-height: 30px; padding: 0 9px; font-size: 11px;
  }
  [data-screen="now-playing"] .np-meta {
    gap: 9px; margin: 0 2px 4px;
  }
  [data-screen="now-playing"] .np-cover-thumb {
    width: 42px; height: 42px; border-radius: 10px;
  }
  [data-screen="now-playing"] .np-title {
    font-size: 17px;
  }
  [data-screen="now-playing"] .np-sub {
    font-size: 12px; margin-top: 1px;
  }
  [data-screen="now-playing"] .np-const-chip {
    padding: 3px 8px 3px 5px;
  }
  [data-screen="now-playing"] .np-lyrics {
    padding: 6px 2px;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 88%, transparent 100%);
  }
  [data-screen="now-playing"] .np-lyrics-pad { height: 8%; }
  [data-screen="now-playing"] .np-line {
    padding: 5px 0;
  }
  [data-screen="now-playing"] .np-line .jp {
    font-size: 16px; line-height: 1.45;
  }
  [data-screen="now-playing"] .np-line.dim .jp {
    font-size: 15px;
  }
  [data-screen="now-playing"] .np-line.cur .jp {
    font-size: 21px; line-height: 1.42;
  }
  [data-screen="now-playing"] .np-line .tr {
    margin-top: 3px;
  }
  [data-screen="now-playing"] .np-line.cur .tr {
    font-size: 12.5px;
  }
  [data-screen="now-playing"] .np-player {
    margin-top: 4px;
  }
  [data-screen="now-playing"] .np-scrub-row {
    gap: 8px; margin: 0 2px 6px;
  }
  [data-screen="now-playing"] .np-player .scrub {
    padding: 6px 0;
  }
  [data-screen="now-playing"] .np-controls {
    gap: 14px;
  }
  [data-screen="now-playing"] .np-loop {
    width: 40px; height: 40px; border-radius: 12px;
  }
  [data-screen="now-playing"] .np-play {
    width: 54px; height: 54px;
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--coral) 70%, transparent), 0 0 0 4px color-mix(in srgb, var(--coral) 8%, transparent);
  }
  [data-screen="now-playing"] .np-ctrl {
    padding: 2px 6px;
  }
  [data-screen="now-playing"] .np-toggles {
    margin-top: 7px; gap: 6px;
  }
  [data-screen="now-playing"] .np-cyc {
    min-height: 36px; padding: 0 10px; font-size: 11.5px;
  }
}

[data-screen="now-playing"] .np-hint {
  flex: none; margin: 0 2px 10px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  font-size: 12.5px; color: var(--ink-dim); line-height: 1.45;
  opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
[data-screen="now-playing"] .np-hint.in { opacity: 1; transform: none; }
[data-screen="now-playing"] .np-hint b { color: var(--ink); font-weight: 600; }
[data-screen="now-playing"] .np-hint-i {
  flex: none; width: 18px; height: 18px; border-radius: 99px;
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic; font-size: 12px;
  color: var(--coral); border: 1px solid color-mix(in srgb, var(--s-new) 50%, transparent);
}
[data-screen="now-playing"] .np-hint-tx { flex: 1; }
[data-screen="now-playing"] .np-hint-x {
  flex: none; width: 26px; height: 26px; border-radius: 99px;
  background: none; border: none; color: var(--ink-dim);
  font-size: 16px; cursor: pointer; line-height: 1;
}
[data-screen="now-playing"] .np-hint-x:hover { background: var(--fill-hover); color: var(--ink); }


/* 听完浮现的「下一首」卡：max-height 展开淡入，不抢歌词；Nocturne 面板风 */
[data-screen="now-playing"] .np-next-card {
  flex: none; margin: 0 2px 8px; position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 11px 13px;
  opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px);
  transition: opacity .4s ease, max-height .45s cubic-bezier(.2,.8,.2,1), transform .4s ease;
}
[data-screen="now-playing"] .np-next-card.in { opacity: 1; max-height: 140px; transform: none; }
[data-screen="now-playing"] .np-next-k {
  font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--coral); margin-bottom: 6px;
}
[data-screen="now-playing"] .np-next-row { display: flex; align-items: center; gap: 12px; }
[data-screen="now-playing"] .np-next-info { flex: 1; min-width: 0; }
[data-screen="now-playing"] .np-next-title {
  font-family: var(--jp); font-weight: 700; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="now-playing"] .np-next-sub {
  font-size: 12px; color: var(--ink-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-screen="now-playing"] .np-next-go {
  flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(180deg, var(--amber), var(--coral)); color: var(--primary-ink);
  display: grid; place-items: center;
}
[data-screen="now-playing"] .np-next-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer; line-height: 1;
}
[data-screen="now-playing"] .np-next-x:hover { color: var(--ink); }

/* —— 富化等待态（首播 ~10s+ 解析假名/翻译）：让真用户知道在加载、别戳进虚空以为坏了 —— */
[data-screen="now-playing"] .np-enriching {
  position: sticky; top: 6px; z-index: 4;
  align-self: center;
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 auto 10px; padding: 9px 16px;
  background: color-mix(in srgb, var(--surface-2) 82%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--ink-dim); font-size: 13.5px; letter-spacing: .02em;
  box-shadow: var(--shadow-soft);
}
[data-screen="now-playing"] .np-enriching i { color: var(--ink-faint); font-style: normal; font-size: 12px; margin-left: 4px; }
/* P1.3：非日文歌的诚实提示（无旋转，琥珀点缀；区别于"解析中"）*/
[data-screen="now-playing"] .np-no-ja {
  max-width: 88%; text-align: center; line-height: 1.45;
  color: var(--ink); border-color: color-mix(in srgb, var(--coral) 30%, transparent);
  background: color-mix(in srgb, var(--coral) 8%, transparent);
}
[data-screen="now-playing"] .np-enriching-spin {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--coral) 25%, transparent); border-top-color: var(--amber);
  animation: npEnrichSpin .8s linear infinite;
}
@keyframes npEnrichSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-screen="now-playing"] .np-enriching-spin { animation: none; }
}

/* —— P1 真实进度条（first-listen 才显；缓存歌 track 直出富化、不显本条）—— */
[data-screen="now-playing"] .np-enrich-prog {
  flex-direction: column; align-items: stretch; gap: 8px;
  min-width: 240px; max-width: 86%; border-radius: 16px; padding: 11px 16px 12px;
}
[data-screen="now-playing"] .np-enrich-head {
  display: flex; align-items: center; gap: 9px;
}
[data-screen="now-playing"] .np-enrich-tx { flex: 1 1 auto; }
[data-screen="now-playing"] .np-enrich-pct {
  flex: 0 0 auto; color: var(--ink-faint); font-size: 12px; letter-spacing: .04em;
}
[data-screen="now-playing"] .np-enrich-bar {
  height: 4px; border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}
[data-screen="now-playing"] .np-enrich-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--amber) 70%, var(--accent)), var(--accent));
  transition: width .35s ease;
}
@media (prefers-reduced-motion: reduce) {
  [data-screen="now-playing"] .np-enrich-fill { transition: none; }
}

/* Round2/P1: 「本次聚焦」面板样式已随面板移除(v5 听屏无 focus 面板)。 */


/* 竖排瞬态加固：富化后歌词区整体重建（renderLine 列表）+ 当前行滚动定位的中间 reflow 帧里，
 * 行/翻译宽度会瞬间坍缩、中文翻译挤成一列竖排闪现（暂停即消失，稳定后行宽恢复 376px）。
 * 锁 .jp/.tr 最小宽：任何 reflow 帧都横排不竖（窄屏正常时 14em 远小于行宽，不影响排版）。 */
[data-screen="now-playing"] .np-line .jp,
[data-screen="now-playing"] .np-line .tr { min-width: 14em; }