/* ============================================================
粤语歌谐音 · 可运行前端
配色取自解包出的 app-wxss.js 真实色板：
#121212 / rgba(255,255,255,.06) 底，主色紫 #a855f7，强调金 #f8d385
============================================================ */
:root {
/* 页面外壳（深色，与小程序深色主题一致；浅灰底在桌面宽屏下会在机身顶部形成亮雾） */
--page-bg: #0d0f16;
--page-line: #d8deea;
--page-text: #1f2430;
/* 小程序主题（深色，还原真实观感） */
--bg: #121212;
--card: rgba(255,255,255,.06);
--elev: #221839;
--card-2: rgba(255,255,255,.10);
--line: rgba(255,255,255,.14);
--text: #f2f2f5;
--text-2: #b9bfd2;
--muted: #7f879e;
--primary: #a855f7;
--primary-dim: #7c3aed;
--primary-soft: rgba(168, 85, 247, .16);
--gold: #f8d385;
--gold-soft: rgba(248, 211, 133, .14);
--green: #34d399;
--red: #f87171;
--radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
margin: 0;
height: 100%;
background: var(--page-bg);
color: var(--page-text);
font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
font-size: 14px;
/* iOS Safari 的 -webkit-text-size-adjust 默认为 auto，会在 iPhone 窄屏上自动放大小字号文本
（11px 的按钮文字被撑大 → 整个播放按钮被放大很多）。电脑切手机版复现不了，只有 iOS Safari 有此行为。 */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
/* 桌面端（尤其 Windows 125%/150% 显示缩放）文字发虚的改善：抗锯齿 + 关闭浏览器伪粗体插值 */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button, input, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
/* ---------------- 布局 ---------------- */
#shell {
display: flex;
gap: 22px;
align-items: flex-start;
justify-content: center;
padding: 22px;
min-height: 100%;
}
#phone {
position: relative;
width: 390px;
height: 844px;
flex: none;
/* 原版同款：顶部紫色径向渐变到底部近黑 */
background: radial-gradient(circle at top, #3a145f 0, #19092f 38%, #0b0415 100%);
color: var(--text);
border-radius: 34px;
border: 8px solid #1b1e26;
/* 去掉内侧白色高光（inset 3px rgba(255,255,255,.35)）——
它在桌面宽屏下会在机身顶部形成一圈白色雾化（用户反馈「桌面版顶部白色雾化没解决」）。 */
box-shadow: 0 26px 70px rgba(20, 24, 40, .34);
overflow: hidden;
display: flex;
flex-direction: column;
}
#statusbar {
flex: none;
height: 34px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
color: var(--text-2);
letter-spacing: .3px;
background: var(--bg);
}
.sb-right { display: flex; align-items: center; gap: 5px; }
.sb-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-2); opacity: .5; }
.sb-bat { margin-left: 4px; }
#navbar {
flex: none;
min-height: 46px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 8px;
background: var(--bg);
border-bottom: 1px solid var(--line);
}
#navbar.hidden { display: none; }
.nav-back, .nav-right {
flex: none;
min-width: 52px;
height: 32px;
border: 0;
background: transparent;
color: var(--text-2);
font-size: 13px;
display: flex;
align-items: center;
gap: 2px;
}
.nav-right { justify-content: flex-end; color: var(--primary); }
.nav-title {
flex: 1;
text-align: center;
font-size: 15px;
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#view {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 14px 20px;
outline: none;
scrollbar-width: thin;
}
/* 全屏页（自绘头部的 hideNav 页）：去掉左右内边距，内容铺满屏宽
（用户反馈「逐字页面左右没有全屏」） */
#view.full-bleed { padding-left: 0; padding-right: 0; }
#view.no-scroll { overflow: hidden; }
#view::-webkit-scrollbar { width: 4px; }
#view::-webkit-scrollbar-thumb { background: #333a52; border-radius: 2px; }
#tabbar {
flex: none;
height: 56px;
display: flex;
/* 始终占据 56px：tab 页显示、非 tab 页仅隐藏（visibility），
避免「进入详情/歌手页时 tabbar 消失 → 视图高度变化 → 页面跳一下」 */
visibility: hidden;
border-top: 1px solid var(--line);
background: #16171f;
}
#tabbar.show { visibility: visible; }
#tabbar .tab {
flex: 1;
border: 0;
background: transparent;
color: var(--muted);
font-size: 11px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
}
#tabbar .tab .tab-ico { width: 23px; height: 23px; object-fit: contain; }
#tabbar .tab.on { color: var(--gold); font-weight: 600; }
/* ---------------- 通用组件 ---------------- */
.sec { margin-bottom: 18px; }
.sec-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin: 0 2px 9px;
}
.sec-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sec-more { font-size: 12px; color: var(--muted); border: 0; background: transparent; }
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 13px;
box-shadow: 0 6px 18px rgba(0,0,0,.28);
}
.card + .card { margin-top: 10px; }
.card-tight { padding: 10px 12px; }
.row {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 2px;
border-bottom: 1px solid rgba(43, 48, 68, .7);
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 14px; color: var(--text); }
.row-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.row-arrow { color: var(--muted); font-size: 15px; flex: none; }
.row-key {
flex: none;
width: 30px;
height: 30px;
border-radius: 9px;
background: var(--primary-soft);
color: var(--primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.row-ico { width: 22px; height: 22px; flex: none; object-fit: contain; }
/* 内联图标：![]()
没有内在尺寸，必须显式指定，否则会撑破布局 */
.search-ico { width: 17px; height: 17px; flex: none; object-fit: contain; opacity: .6; }
.cover-ico { width: 26px; height: 26px; object-fit: contain; }
.avatar-img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
/* VIP 英雄卡：真实背景图 + logo */
.vip-hero { position: relative; border-radius: 14px; overflow: hidden; min-height: 150px; }
.vip-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vip-hero-mask { position: absolute; inset: 0; background: rgba(18,12,28,.46); }
.vip-hero-inner { position: relative; padding: 22px 17px; }
.vip-logo { width: 46px; height: 46px; margin-bottom: 9px; object-fit: contain; }
.vip-hero .chips { margin-top: 11px; }
.btn {
width: 100%;
height: 44px;
border: 0;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-dim));
color: #fff;
font-size: 15px;
font-weight: 600;
}
.btn:active { transform: translateY(1px); }
.btn.gold { background: linear-gradient(135deg, #f8d385, #e0a94b); color: #3a2a05; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text-2); }
.btn.sm { height: 34px; font-size: 13px; width: auto; padding: 0 15px; border-radius: 10px; }
.btn[disabled] { opacity: .45; }
.btn-row { display: flex; gap: 10px; }
.chip {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
border-radius: 7px;
font-size: 11px;
background: var(--card-2);
color: var(--text-2);
border: 1px solid var(--line);
}
.chip.gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(248, 211, 133, .3); }
.chip.purple { background: var(--primary-soft); color: var(--primary); border-color: rgba(168, 85, 247, .3); }
.chip.green { background: rgba(52, 211, 153, .14); color: var(--green); border-color: rgba(52, 211, 153, .28); }
.chip.gray { background: rgba(255,255,255,.08); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--card-2);
border-radius: 11px;
margin-bottom: 13px;
}
.tabs button {
flex: 1;
height: 32px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--muted);
font-size: 13px;
}
.tabs button.on { background: var(--primary); color: #fff; font-weight: 600; }
.tag-line {
display: inline-flex;
gap: 6px;
align-items: center;
font-size: 11px;
color: var(--muted);
margin-bottom: 8px;
}
.demo-chip {
background: rgba(248, 211, 133, .12);
border: 1px dashed rgba(248, 211, 133, .45);
color: var(--gold);
font-size: 10.5px;
padding: 2px 7px;
border-radius: 6px;
}
.progress {
height: 6px;
border-radius: 3px;
background: rgba(255,255,255,.08);
overflow: hidden;
margin-top: 8px;
}
.progress > i {
display: block;
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--primary), var(--gold));
transition: width .3s ease;
}
.metric { display: flex; gap: 8px; }
.metric > div {
flex: 1;
background: var(--card);
border: 1px solid var(--line);
border-radius: 11px;
padding: 10px 6px;
text-align: center;
}
.metric .m-num { font-size: 17px; font-weight: 700; color: var(--gold); }
.metric .m-lab { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.empty {
padding: 34px 18px;
text-align: center;
color: var(--muted);
font-size: 13px;
line-height: 1.7;
}
.empty .e-ico { font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; }
/* 空状态用图片时（原包图标），换成 ![]()
后 font-size 失效，需显式尺寸 */
img.e-ico { width: 34px; height: 34px; object-fit: contain; display: block; margin: 0 auto 8px; opacity: .5; font-size: 0; }
.input {
width: 100%;
height: 42px;
padding: 0 13px;
border-radius: 11px;
border: 1px solid var(--line);
background: var(--card);
color: var(--text);
outline: none;
}
.input:focus { border-color: var(--primary); }
.input::placeholder { color: #5c6379; }
textarea.input { height: 76px; padding: 10px 13px; resize: none; line-height: 1.6; }
.field { margin-bottom: 11px; }
.field-lab { font-size: 12px; color: var(--muted); margin: 0 2px 6px; display: block; }
.field-err { font-size: 11.5px; color: var(--red); margin: 6px 2px 0; min-height: 15px; }
/* 歌曲卡 */
.song {
display: flex;
gap: 11px;
align-items: center;
padding: 11px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 13px;
margin-bottom: 9px;
}
.song:active { border-color: var(--primary); }
.cover {
flex: none;
width: 46px;
height: 46px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
color: #2a1d05;
background: linear-gradient(135deg, var(--gold), #c9903a);
position: relative;
overflow: hidden;
}
.cover img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.cover i {
position: relative;
z-index: 0;
font-style: normal;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.cover.p { background: linear-gradient(135deg, var(--primary), #6d28d9); color: #fff; }
.song-main { flex: 1; min-width: 0; }
.song-t { font-size: 14.5px; font-weight: 600; }
.song-a { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.song-meta { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.song-act { flex: none; }
/* 首页歌手分区卡片（原版同款：专属背景图 + 渐变遮罩） */
.artist-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.artist-card { position: relative; display: block; width: 100%; height: 92px; padding: 0;
border: 0; border-radius: 12px; overflow: hidden; background: #2a2438; cursor: pointer;
text-align: left; }
.artist-card .artist-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
object-fit: cover; }
.artist-card .artist-mask { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 11px;
background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); }
.artist-card .artist-name { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.artist-card .artist-sub { display: block; font-size: 10.5px; color: rgba(255,255,255,.72); margin-top: 2px; }
/* 歌手专属色调（背景图未加载时的兜底底色，与原版 cssClass 对应） */
.card-beyond { background: linear-gradient(135deg, #4b5563, #1f2937); }
.card-chenhuixian { background: linear-gradient(135deg, #be185d, #7f1d1d); }
.card-eason { background: linear-gradient(135deg, #1d4ed8, #172554); }
.card-leslie { background: linear-gradient(135deg, #7c3aed, #4c1d95); }
.card-ekinjian { background: linear-gradient(135deg, #b45309, #7c2d12); }
.card-alan { background: linear-gradient(135deg, #0f766e, #134e4a); }
/* 韵母口型示范视频 */
.mouth-video { width: 100%; height: 200px; border-radius: 10px; background: #000; display: block; }
/* 头像选择（原版 boy/girl 单一头像库，无第二套预设） */
.pf-avatar-preview { width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(248, 211, 133, .55); background: rgba(255,255,255,.10); margin: 4px 0 2px; }
.pf-avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.avatar-opt { width: 42px; height: 42px; padding: 0; border: 2px solid transparent; border-radius: 50%;
overflow: hidden; background: rgba(255,255,255,.10); cursor: pointer; }
.avatar-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-opt.on { border-color: #f8d385; }
/* 歌词 */
.lyric-line {
display: flex;
gap: 9px;
align-items: flex-start;
padding: 11px 10px;
border-radius: 11px;
border: 1px solid transparent;
margin-bottom: 7px;
background: var(--card);
}
.lyric-line.on { border-color: var(--primary); background: rgba(168, 85, 247, .1); }
.lyric-line.locked { opacity: .5; }
.lyric-line .ln {
flex: none;
width: 24px;
height: 24px;
border-radius: 8px;
background: var(--card-2);
color: var(--muted);
font-size: 11px;
display: flex;
align-items: center;
justify-content: center;
}
.lyric-line .lb { flex: 1; min-width: 0; }
.lyric-line .lb .t1 { font-size: 15px; line-height: 1.5; letter-spacing: .5px; }
.lyric-line .lb .t2 { font-size: 11.5px; color: var(--primary); margin-top: 4px; letter-spacing: .4px; }
.lyric-line .lb .t3 { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.lyric-line .lr { flex: none; text-align: right; font-size: 10.5px; color: var(--muted); line-height: 1.6; }
.lyric-line .lr .done { color: var(--green); }
/* 字号由「显示设置」数值步进器（16–48）以内联 font-size 驱动，t1/t2/t3 同比例联动 */
/* 字体调整行内步进器（对齐原版 k-song-font-size-control） */
.k-song-options-row { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 9px; }
.k-song-font-size-control { display: flex; align-items: center; gap: 7px; }
.k-song-font-size-label { color: var(--muted); font-size: 11px; }
.k-song-font-size-stepper { display: flex; align-items: center; background: rgba(255,255,255,.06); border-radius: 15px; padding: 2px 6px; }
.k-song-stepper-btn { width: 24px; height: 24px; border: 0; background: transparent; color: var(--text); font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.k-song-stepper-btn.disabled { color: var(--muted); opacity: .4; pointer-events: none; }
.k-song-stepper-value { width: 28px; text-align: center; color: var(--text); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* 录音面板 */
.rec-panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 13px;
padding: 12px;
margin-bottom: 11px;
}
.rec-head { display: flex; align-items: center; justify-content: space-between; }
.rec-title { font-size: 13.5px; font-weight: 600; }
.rec-hint { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.6; }
.rec-btn {
width: 100%;
height: 46px;
margin-top: 10px;
border: 1px dashed rgba(168, 85, 247, .5);
border-radius: 12px;
background: var(--primary-soft);
color: var(--primary);
font-size: 14px;
font-weight: 600;
}
.rec-btn.recording {
background: rgba(248, 113, 113, .16);
border-color: var(--red);
color: var(--red);
border-style: solid;
}
.wave { display: flex; gap: 3px; align-items: flex-end; height: 18px; }
.wave i { width: 3px; background: var(--primary); border-radius: 2px; animation: wv .8s infinite ease-in-out; }
.wave i:nth-child(2) { animation-delay: .1s; }
.wave i:nth-child(3) { animation-delay: .2s; }
.wave i:nth-child(4) { animation-delay: .3s; }
.wave i:nth-child(5) { animation-delay: .4s; }
@keyframes wv { 0%,100% { height: 5px; } 50% { height: 18px; } }
/* ---------- 逐句跟练页：对齐原版 sentence-page 组件 ---------- */
/* 焦点卡顶栏：谐音开关 + 切换句子 / 编辑谐音 */
.prac-top-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.prac-switch-wrap { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.prac-switch { width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.14); border: 0; position: relative; cursor: pointer; transition: background .2s; flex: none; }
.prac-switch i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
.prac-switch.on { background: var(--primary); }
.prac-switch.on i { left: 20px; }
.prac-switch-label { color: var(--text-2); font-size: 12px; }
.prac-act { background: rgba(255,255,255,.07); border: 1px solid var(--line); color: var(--text-2); font-size: 12px; border-radius: 9px; padding: 6px 10px; cursor: pointer; }
.prac-act:active { background: var(--primary-soft); color: var(--primary); }
.prac-bottom-tools { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.prac-bottom-tools .btn { flex: none; }
/* 分区容器：先听一听 / 本句练习记录 */
.prac-sec { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 12px; margin-bottom: 11px; }
.prac-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.prac-sec-title { font-size: 13.5px; font-weight: 700; }
.prac-more { font-size: 11.5px; color: var(--primary); cursor: pointer; }
/* 先听一听双格（对齐原版 listen-grid，box-purple / box-orange） */
.listen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.listen-box { border-radius: 12px; padding: 11px; cursor: pointer; border: 1px solid transparent; transition: border-color .2s, background .2s; }
.listen-box.box-purple { background: rgba(168,85,247,.14); }
.listen-box.box-orange { background: rgba(248,211,133,.12); }
.listen-box.playing { border-color: var(--primary); }
.listen-box.playing.box-orange { border-color: var(--gold); }
.lb-head { display: flex; align-items: center; gap: 6px; }
.lb-ico { width: 18px; height: 18px; object-fit: contain; flex: none; }
.lb-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-swap { width: 16px; height: 16px; object-fit: contain; flex: none; opacity: .85; }
.lb-desc { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.lb-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); margin-top: 8px; overflow: hidden; }
.lb-bar > i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--primary); transition: width .15s linear; }
.box-orange .lb-bar > i { background: var(--gold); }
.lb-time { font-size: 10px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
/* 本句练习记录（对齐原版 records-grid：跟读紫 / 跟唱橙） */
.records-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rec-stat { background: rgba(255,255,255,.05); border-radius: 11px; padding: 10px; text-align: center; }
.rec-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rec-num.text-purple { color: var(--primary); }
.rec-num.text-orange { color: var(--gold); }
.rec-unit { font-size: 11px; color: var(--muted); margin-left: 3px; }
.rec-label { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }
/* 我的录音：播放进度行 */
.mine-bar-row { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mine-bar-row .lb-bar { flex: 1; margin-top: 0; }
.mine-bar-row .lb-time { flex: none; }
/* 打卡日历 */
.cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; margin-top: 10px; }
.cal button {
height: 36px;
border-radius: 9px;
border: 1px solid var(--line);
background: var(--card-2);
color: var(--muted);
font-size: 11px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
}
.cal button.read { border-color: rgba(168, 85, 247, .6); color: var(--primary); }
.cal button.sing { border-color: rgba(248, 211, 133, .7); color: var(--gold); background: var(--gold-soft); }
.cal button.both { border-color: var(--green); color: var(--green); background: rgba(52, 211, 153, .12); }
.cal button.cur { outline: 2px solid var(--primary); outline-offset: 1px; }
.cal button .c-no { font-size: 12px; font-weight: 600; }
.cal button .c-tag { font-size: 8.5px; }
/* 播放条 */
.player {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: var(--card-2);
border: 1px solid var(--line);
margin-bottom: 10px;
}
.player .p-ico {
flex: none;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--primary);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
overflow: hidden;
}
/* 播放/暂停图标：SVG 无固有宽高，移动端 Safari 会按 300×150 默认尺寸渲染，
撑成「巨大白色三角」。这里锁死尺寸并 object-fit，任何视口都不会变形放大。 */
.player .p-ico .p-glyph {
width: 16px;
height: 16px;
display: block;
flex: none;
object-fit: contain;
}
.player .p-main { flex: 1; min-width: 0; }
.player .p-t { font-size: 12.5px; }
.player .p-bar { height: 4px; border-radius: 2px; background: #333a52; margin-top: 6px; overflow: hidden; }
.player .p-bar > i { display: block; height: 100%; width: 0; background: var(--gold); }
.player .p-time { flex: none; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 歌词详情页主播放条：随页面滚动时固定在顶部，避免读歌词时播放控制跑掉 */
.lyrics-player { position: sticky; top: 0; z-index: 35; }
/* 遮罩 / 弹层 */
/* 弹层层级必须高于 learn-dock(60)，否则「更多」菜单等 sheet 被底栏盖住
（用户反馈「编辑谐音」点开看到被遮挡） */
#layer { position: absolute; inset: 0; pointer-events: none; z-index: 80; }
#layer.on { pointer-events: auto; }
.mask {
position: absolute;
inset: 0;
background: rgba(6, 7, 11, .72);
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0; } }
/* 显示设置等「非阻断」弹层：去掉全屏黑底遮罩，让歌词/设置效果在面板上方可见（对齐原版观感）；
仍保留点面板外区域关闭的能力（#layer.on 已开启 pointer-events）。 */
.mask-clear { background: transparent; }
.modal {
width: 100%;
max-width: 320px;
background: var(--elev);
border: 1px solid var(--line);
border-radius: 16px;
padding: 17px;
animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.modal h3 { margin: 0 0 8px; font-size: 16px; }
.modal p { margin: 0 0 13px; font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.modal-label { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 7px; }
.modal-input { width: 100%; box-sizing: border-box; padding: 10px 11px; border-radius: 9px;
border: 1px solid var(--line); background: #11131d; color: var(--text); font-size: 14px; outline: none; }
.modal-input:focus { border-color: #7c5cff; }
.sheet {
position: absolute;
left: 0; right: 0; bottom: 0;
/* 半透明毛玻璃（对齐原版观感）
注意：iOS Safari 只认 -webkit-backdrop-filter，两个前缀必须都写，
否则手机上完全没有模糊效果、只剩一层灰底。 */
background: rgba(34, 24, 57, .82); /* = --elev(#221839) 的半透明版，保证与深色主题同色系 */
backdrop-filter: blur(22px) saturate(160%);
-webkit-backdrop-filter: blur(22px) saturate(160%);
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-top: 1px solid rgba(255, 255, 255, .14);
/* 避让 iPhone 底部 Home 指示条（index.html 已开 viewport-fit=cover） */
padding: 15px 15px calc(20px + env(safe-area-inset-bottom));
animation: up .22s ease;
max-height: 78%;
overflow-y: auto;
}
@keyframes up { from { transform: translateY(100%); } }
.sheet h3 { margin: 0 0 4px; font-size: 15.5px; }
.sheet .s-sub { font-size: 12px; color: var(--muted); margin-bottom: 13px; }
/* ===== 显示设置（对齐原版：字体大小步进器 / 繁体开关 / 语速·音色分段 / 帮助 / 客服） ===== */
.settings-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; }
.settings-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; }
.settings-item-label { color: var(--text); font-size: 13px; font-weight: 600; }
.settings-item-desc { color: var(--muted); font-size: 11px; }
.settings-item-arrow { color: var(--muted); font-size: 17px; }
.settings-item-divider { height: 1px; background: var(--line); margin: 5px 0; }
.settings-item-btn { width: 100%; background: transparent; border: 0; padding: 11px 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.settings-item-btn:active { opacity: .7; }
.size-stepper { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.05); border-radius: 18px; padding: 2px; }
.stepper-btn { width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: var(--text); font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.stepper-btn:active { background: rgba(255,255,255,.16); }
.stepper-btn.disabled { opacity: .25; pointer-events: none; }
.stepper-value { min-width: 34px; text-align: center; color: var(--text); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.speed-selector { display: flex; gap: 3px; background: rgba(255,255,255,.07); border-radius: 11px; padding: 3px; }
.speed-pill { border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 11.5px; font-weight: 600; padding: 5px 11px; cursor: pointer; }
.speed-pill.active { background: var(--primary); color: #fff; box-shadow: 0 1px 4px rgba(168,85,247,.35); }
.ui-switch { flex: none; width: 40px; height: 23px; border-radius: 13px; border: 0; background: rgba(255,255,255,.14); position: relative; cursor: pointer; transition: background .18s ease; padding: 0; }
.ui-switch i { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
.ui-switch.on { background: #a855f7; }
.ui-switch.on i { transform: translateX(17px); }
/* 使用帮助（FAQ 折叠） */
.help-sheet-list { display: flex; flex-direction: column; gap: 8px; }
.help-sheet-item { background: rgba(168,85,247,.07); border: 1px solid rgba(168,85,247,.14); border-radius: 11px; padding: 12px 13px; cursor: pointer; }
.help-sheet-question-row { display: flex; align-items: center; gap: 9px; }
.help-sheet-num { flex: none; width: 19px; height: 19px; border-radius: 6px; background: rgba(168,85,247,.22); color: #c084fc; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.help-sheet-question { flex: 1; color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.45; }
.help-sheet-arrow { flex: none; width: 21px; height: 21px; border-radius: 6px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.help-sheet-item.open .help-sheet-arrow-icon { transform: rotate(180deg); }
.help-sheet-arrow-icon { transition: transform .18s ease; }
.help-sheet-answer { display: block; border-left: 2px solid #a855f7; color: var(--muted); font-size: 12px; line-height: 1.7; margin-top: 9px; padding-left: 9px; }
.toast {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
background: rgba(10, 12, 20, .94);
border: 1px solid var(--line);
color: var(--text);
font-size: 12.5px;
padding: 10px 16px;
border-radius: 11px;
max-width: 78%;
text-align: center;
line-height: 1.6;
animation: fade .15s ease;
}
/* ---------------- 窄屏：手机壳铺满 ---------------- */
@media (max-width: 1080px) {
#shell { padding: 0; gap: 0; }
#phone {
width: 100%;
height: 100vh;
height: 100dvh;
border: 0;
border-radius: 0;
box-shadow: none;
}
}
/* ============ 启动屏（按原包 components/splash-screen 还原） ============ */
#splash { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999;
background: #121212; opacity: 1; overflow: hidden;
transition: opacity .5s cubic-bezier(.25, 1, .5, 1); }
#splash.fade-out { opacity: 0; pointer-events: none; }
/* 开屏默认关闭；只有后台开启时 main.js 才会去掉 hidden 并显示 */
#splash[hidden] { display: none !important; }
#splash .splash-image { display: block; width: 100%; height: 100%; object-fit: cover; }
#splash-skip { position: absolute; top: 40px; right: 110px; height: 32px; line-height: 32px;
padding: 0 14px; border-radius: 100px; background: rgba(0,0,0,.5);
border: 1px solid hsla(0,0%,100%,.15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0,0,0,.15); color: hsla(0,0%,100%,.9);
font-size: 12px; font-weight: 500; text-align: center; box-sizing: border-box; cursor: pointer; }
#splash-skip:active { background: rgba(0,0,0,.7); border-color: hsla(0,0%,100%,.25); }
/* ============================================================
发现页 · 原版布局（search-header-row / recent-scroll /
hot-search-row / practice-grid 双列歌曲网格）
============================================================ */
.search-header-row { display: flex; align-items: center; gap: 10px; }
.search-header-row .search-bar {
flex: 1; display: flex; align-items: center; gap: 8px;
height: 42px; padding: 0 13px; border-radius: 21px;
/* 实色底：backdrop-filter 在 macOS Safari 上会把搜索框内的文字/图标渲糊
（用户反馈「苹果桌面端顶部模糊」的根源之一）。深色主题下实色与半透明观感一致。 */
background: #1e1733; border: 1px solid rgba(255,255,255,.12);
color: #7f879e; font-size: 13px; cursor: pointer;
}
.search-header-row .search-ico { width: 16px; height: 16px; opacity: .7; }
.redeem-entry-btn {
flex: none; height: 42px; padding: 0 16px; border-radius: 21px; border: 0;
background: linear-gradient(135deg, #a855f7, #7c3aed);
color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
box-shadow: 0 4px 14px rgba(168, 85, 247, .35);
}
.redeem-entry-btn:active { transform: scale(.96); }
/* 🎧 最近学习歌曲：横向滑动卡 */
.recent-scroll { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.recent-scroll::-webkit-scrollbar { display: none; }
.recent-card {
flex: none; width: 108px; padding: 0 0 9px; border-radius: 14px; overflow: hidden;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
color: inherit; text-align: left; cursor: pointer;
}
.recent-card-cover { position: relative; width: 100%; height: 96px; background: linear-gradient(135deg, #a855f7, #6d28d9); display: flex; align-items: center; justify-content: center; }
.recent-card-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recent-card-cover i { font-style: normal; font-size: 26px; font-weight: 700; color: rgba(255,255,255,.85); }
.recent-card-title { margin: 8px 10px 0; font-size: 13px; font-weight: 600; color: #f2f2f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-card-artist { margin: 3px 10px 0; font-size: 11px; color: #9aa1b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 🔥大家都在学 */
.hot-search-row { display: flex; align-items: center; gap: 8px; }
.hot-search-label { flex: none; font-size: 12.5px; font-weight: 600; color: #d9dce6; }
.fire-emoji { font-style: normal; }
.hot-search-list { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hot-search-list::-webkit-scrollbar { display: none; }
.hot-song-tag {
flex: none; padding: 6px 13px; border-radius: 15px; font-size: 12px; color: #d9dce6;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); cursor: pointer;
}
/* 粤拼标准发音 · 逐句练习：双列网格 */
.practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.practice-card {
border-radius: 16px; overflow: hidden; cursor: pointer;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
box-shadow: 0 6px 18px rgba(0,0,0,.25);
transition: transform .15s ease;
}
.practice-card:active { transform: scale(.97); }
.card-cover-wrap { position: relative; width: 100%; height: 118px; background: linear-gradient(135deg, #a855f7, #6d28d9); }
.card-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.card-cover-placeholder {
position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center;
font-size: 30px; font-weight: 700; color: rgba(255,255,255,.85);
}
.card-cover-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.card-fire-badge {
position: absolute; right: 8px; bottom: 8px; z-index: 3;
padding: 3px 9px; border-radius: 11px; font-size: 10.5px; font-weight: 600; color: #fff;
background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.card-fire-badge .fire-text { font-style: normal; }
.card-info-wrap { padding: 9px 10px 11px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-names { min-width: 0; }
.song-name { font-size: 14.5px; font-weight: 700; color: #f2f2f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist-name { margin-top: 2px; font-size: 11.5px; color: #9aa1b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-play-btn {
flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s ease;
}
.card-play-btn.is-playing { background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: transparent; }
.card-play-btn:active { transform: scale(.92); }
.card-bottom-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; }
.dedup-count-text { font-size: 11px; color: #9aa1b5; }
.practice-link { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; color: #c084fc; }
.practice-link-arrow { font-size: 13px; }
/* ============================================================
歌词练习页 · 原版结构（lyric-tip / karaoke-line / learn-dock）
============================================================ */
.lyric-tip {
display: flex; align-items: center; gap: 8px;
margin: 2px 2px 12px; padding: 9px 12px; border-radius: 12px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
color: #b9bfd2; font-size: 11.5px; line-height: 1.6;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lyric-tip-icon { flex: none; color: #c084fc; }
.karaoke-line {
position: relative; margin-bottom: 12px; padding: 12px 13px 13px; border-radius: 16px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
cursor: pointer; transition: border-color .15s ease;
}
/* 选中/播放句（对齐原版 is-selected：紫渐变底 + 紫边 + 光晕；
清唱模式下整句无框，改用「非当前句淡出 + 字底滑动线」，见 .karaoke-mode） */
.karaoke-line.on {
background: linear-gradient(135deg, rgba(88,39,128,.72), rgba(40,18,74,.92));
border-color: rgba(192,132,252,.92);
box-shadow: 0 0 0 1px rgba(192,132,252,.36), 0 6px 20px rgba(126,34,206,.28);
}
/* 字号由「显示设置」数值步进器（16–48）以内联 font-size 驱动，谐音/原字同比例联动 */
/* 窄屏（iPhone Safari）时允许换行，避免「第N句 + 三个按钮」一行挤爆被裁切 */
.line-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.sentence-badge {
flex: none; padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600;
color: #e9d5ff; background: rgba(168,85,247,.18); border: 1px solid rgba(168,85,247,.4);
}
.line-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.lyric-play-btn, .lyric-demo-btn, .lyric-more-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 4px;
/* 锁死高度与内边距：iOS Safari 的 text-size-adjust 会把 11px 小字自动放大，
不固定尺寸的话按钮在 iPhone 上会被撑高撑宽（表现为「播放键被放大」）。 */
height: 26px; line-height: 1; box-sizing: border-box;
padding: 0 10px; border-radius: 13px; font-size: 11px; font-weight: 500; cursor: pointer;
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
white-space: nowrap; flex: none;
color: #d9dce6; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
/* 播放/示范图标：1:1 对齐原版 —— 标准粤拼 = icon_speaker.svg（喇叭 32rpx），
演唱示范 = icon_music.png（音符 30rpx）。换算 390px 屏 ≈ 15px。
尺寸锁死，父级字号继承 / iOS 自动文本缩放都不会改变它。 */
.lyric-play-btn .glyph, .lyric-demo-btn .glyph {
display: block; flex: none;
width: 15px !important; height: 15px !important;
}
.lyric-play-btn:active, .lyric-demo-btn:active { transform: scale(.95); }
.lyric-play-btn.is-playing, .lyric-demo-btn.is-playing {
color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); border-color: transparent;
}
.lyric-more-btn { color: #9aa1b5; }
/* 「更多」菜单行：图标 + 文字（对齐原版 more-dropdown-item） */
.btn.m-row { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-start; width: 100%; }
.btn.m-row .m-ico { width: 15px; height: 15px; flex: none; }
/* ---------- 歌词详情页逐字块：1:1 对齐原版 detail.wxss ----------
原版三层结构（char-item 内，--font-size 由外层注入）：
.jyutping-text font-size:calc(var(--font-size)*.34);height:calc(*.45);居中
.original-char font-size:var(--font-size)（1em 全宽）→ 格子由汉字定宽
.homophone-text font-size:var(--font-size)（1em）
格子宽 = 1em（汉字全宽）→ 粤拼永远不超过字 → 整句间距整齐（用户反馈「粤拼超过字、间距乱」）。
播放中的字：粤拼+汉字变紫，汉字底部紫色滑动线 pronunciationUnderlineFill（原版同款动画）。 */
.karaoke-line .char-container {
display: flex; flex-wrap: wrap;
/* 间距跟随字号步进（原版 12rpx/20rpx ≈ 6px/10px @28px） */
column-gap: calc(var(--font-size, 28px) * .214);
row-gap: calc(var(--font-size, 28px) * .357);
justify-content: flex-start; width: 100%; margin: 6px 0 4px; position: relative;
}
.karaoke-line .char-container.fallback { display: block; }
.karaoke-line .char-item {
display: flex; flex-direction: column; align-items: center; position: relative;
/* 格子宽度由汉字定（1em + 微量呼吸），粤拼/谐音都不得超出 → 间距才整齐 */
width: calc(var(--font-size, 28px) * 1.04); flex: 0 0 auto;
padding: 0; border-radius: 6px; cursor: pointer; user-select: none;
}
.karaoke-line .char-item:active { background: rgba(168,85,247,.15); }
/* 播放中的字：粤拼 + 汉字变紫，汉字底部滑动线（原版 pronunciationUnderlineFill，0.65s 线性 0→100%） */
.karaoke-line .char-item.is-pronouncing .jyutping-text,
.karaoke-line .char-item.is-pronouncing .original-char { color: #c084fc; text-shadow: 0 0 12px rgba(192,132,252,.5); }
.karaoke-line .char-item.is-pronouncing .original-char::after {
content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
border-radius: 999px; background: linear-gradient(90deg, #a855f7, #f0abfc);
box-shadow: 0 0 8px rgba(232,121,249,.62);
animation: pronunciationUnderlineFill .65s linear forwards;
}
@keyframes pronunciationUnderlineFill { from { width: 0; } to { width: 100%; } }
.karaoke-line .char-item.space-char { width: calc(var(--font-size, 28px) * .5); }
/* 长粤拼（5 字母以上，如 soeng/kwong）缩档，保证不超出 1em 格子 */
.karaoke-line .char-item.jp-tight .jyutping-text { font-size: calc(var(--font-size, 28px) * .28); letter-spacing: -.4px; }
.karaoke-line .jyutping-text {
display: block; width: 100%; max-width: 100%; text-align: center;
font-size: calc(var(--font-size, 28px) * .34);
/* 固定行高（相对字号），粤拼行才能整齐、不与汉字/谐音错位 */
height: calc(var(--font-size, 28px) * .45); line-height: 1;
color: #c9a4ff; letter-spacing: 0; white-space: nowrap; overflow: hidden;
text-transform: lowercase;
}
.karaoke-line .jyutping-tone, .karaoke-line .jyutping-text sup {
font-size: .72em; vertical-align: super; color: #a855f7; margin-left: 1px;
}
.karaoke-line .original-char {
display: block; width: 100%; max-width: 100%; text-align: center; position: relative;
font-size: var(--font-size, 28px);
font-weight: 500; color: #f2f2f5; line-height: 1.15; margin-bottom: 6px;
}
.karaoke-line .homophone-row { display: flex; justify-content: center; width: 100%; }
.karaoke-line .homophone-text {
display: block; text-align: center; max-width: 100%;
font-size: var(--font-size, 28px);
font-weight: 700; color: #c084fc; line-height: 1.15;
}
.karaoke-line .homophone-text.locked-blur { filter: blur(5px); user-select: none; }
.karaoke-line .homophone-row .t3 { font-size: 10px; color: #34d399; }
/* 当前播放句：整句底部滑动进度线（原版 line-demo-progress：紫色底 + 紫粉渐变填充） */
.karaoke-line .line-play-progress {
position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px;
border-radius: 999px 999px 0 0; background: rgba(168,85,247,.12);
overflow: hidden; display: none; pointer-events: none;
}
.karaoke-line.playing .line-play-progress { display: block; }
.karaoke-line .line-play-progress i {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg, #a855f7, #f0abfc);
transition: width .25s linear;
}
/* 原版隐藏规则：.hide-homophone .homophone-row / .hide-jyutping .jyutping-text */
.hide-homophone .homophone-row, .hide-jyutping .jyutping-text { display: none !important; }
/* 清唱/跟唱模式（对齐原版 k-song-mode）：
封面卡隐藏；歌词居中、整句无框；跟唱播放时非当前句淡出缩小（原版 k-song-focus）；
**原版铁律**：k-song 模式隐藏每行操作按钮与句号（.line-actions/.sentence-meta
display:none）——用户反馈「设置是可以隐藏的，看下原版」；底栏 learn-dock 保持可见；
歌词区左右 padding 28rpx ≈ 14px（原版 .k-song-mode .lyric-area{padding:0 28rpx}）。 */
.karaoke-mode .card { display: none; }
.karaoke-mode .sec { margin-top: 8px; }
.karaoke-mode .lyric-area { margin-top: 8px; padding-top: 2px; padding-bottom: 130px; padding-left: 14px; padding-right: 14px; }
.karaoke-mode .lyric-tip { display: none; }
/* 原版：.k-song-mode .line-actions, .container.k-song-mode .sentence-meta{display:none}
（我们的 line-head = sentence-badge + line-actions，整块隐藏等价于两者都隐） */
.karaoke-mode .line-head { display: none; }
.karaoke-mode .karaoke-line {
background: transparent; border-color: transparent; box-shadow: none;
margin-bottom: 10px; padding: 10px 6px 12px;
}
.karaoke-mode .karaoke-line.on {
background: transparent; border-color: transparent; box-shadow: none;
}
/* 跟唱自动播放中：当前句全显，之后的句子半显，未播到的句子淡出（原版同款层次） */
.karaoke-mode.ks-focus .karaoke-line {
opacity: .15; transform: scale(.85);
transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.karaoke-mode.ks-focus .karaoke-line.on { opacity: 1; transform: none; }
.karaoke-mode.ks-focus .karaoke-line.on ~ .karaoke-line { opacity: .5; transform: scale(.9); }
/* 自动播放被浏览器拦截时显示的「开始跟唱」按钮（用户点一下即获得播放手势） */
.karaoke-kick {
position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.karaoke-kick.hide { display: none; }
.karaoke-kick-btn {
display: inline-flex; align-items: center; gap: 8px;
height: 48px; padding: 0 26px; border-radius: 24px; border: 0; cursor: pointer;
font-size: 15px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #a855f7, #7c3aed);
box-shadow: 0 10px 30px rgba(168,85,247,.45);
}
.karaoke-kick-btn:active { transform: scale(.96); }
.karaoke-kick-tip { font-size: 11.5px; color: #b9bfd2; }
/* 底部固定操作栏 learn-dock */
.learn-dock {
position: fixed; left: 50%; transform: translateX(-50%); bottom: 10px; z-index: 60;
width: min(94vw, 420px); padding: 10px 11px; border-radius: 18px;
background: rgba(20,12,34,.92); border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.learn-dock-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; row-gap: 8px; }
.learn-dock-toggles { display: flex; gap: 7px; flex-shrink: 0; }
.dock-toggle {
padding: 6px 14px; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer;
color: #b9bfd2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
}
.dock-toggle.on {
color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed);
border-color: transparent; box-shadow: 0 3px 10px rgba(168,85,247,.4);
}
.learn-dock-speed { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.learn-dock-speed-label { font-size: 11.5px; color: #9aa1b5; flex-shrink: 0; }
.learn-dock-speed-segmented { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); flex-shrink: 0; }
.learn-dock-speed-btn {
padding: 3px 10px; border-radius: 9px; font-size: 11.5px; border: 0; cursor: pointer;
color: #b9bfd2; background: transparent; white-space: nowrap;
}
.learn-dock-speed-btn.is-active { color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); }
.learn-dock-bottom-row { display: flex; gap: 8px; margin-top: 10px; }
.learn-dock-action-btn {
flex: 1; height: 40px; border-radius: 13px; font-size: 13px; font-weight: 600; cursor: pointer;
color: #e9d5ff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
}
.learn-dock-practice-btn {
color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed);
border-color: transparent; box-shadow: 0 4px 14px rgba(168,85,247,.35);
}
.play-continuous-btn.is-playing { color: #fff; background: rgba(52,211,153,.25); border-color: rgba(52,211,153,.4); }
.learn-dock-action-btn:active { transform: scale(.97); }
/* 发音指导弹层（长按单字） */
.pg-word-row { display: flex; align-items: baseline; gap: 10px; }
.pg-char { font-size: 34px; font-weight: 700; color: #f2f2f5; }
.pg-jyutping { font-size: 18px; color: #c084fc; }
.pg-video { width: 100%; max-width: 320px; border-radius: 12px; margin-top: 4px; background: rgba(0,0,0,.4); }
/* ============================================================
我的（user-center）—— 结构对齐原版：
hero 头图 + 浮动头像 + 昵称/SVIP/UID + 会员横幅
+ 学习进度入口卡 + 两组 cell（我的学习 / 服务与帮助）
============================================================ */
.hero-wrap { position: relative; }
.hero-image { width: 100%; height: 170px; display: block; object-fit: cover; }
.hero-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(11,4,21,.15) 0%, rgba(11,4,21,.55) 55%, #0b0415 100%); }
.profile-float { position: absolute; left: 18px; top: 120px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22);
box-shadow: 0 4px 12px rgba(0,0,0,.45); display: block; }
.edit-avatar-tag { position: absolute; right: -6px; bottom: 4px; background: linear-gradient(135deg,#a855f7,#7c3aed);
color: #fff; font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 10px; border: 0;
box-shadow: 0 2px 6px rgba(168,85,247,.45); }
.profile-panel { padding: 44px 18px 0; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name { font-size: 18px; font-weight: 700; color: #fff; }
.profile-vip-tag { background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; font-size: 9px;
font-weight: 700; padding: 3px 7px; border-radius: 4px; border: 0; }
.profile-vip-tag.is-vip { background: linear-gradient(135deg,#f5a623,#d48806); }
.profile-id-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.profile-id { font-size: 11px; color: #7f879e; }
.copy-tag { background: rgba(168,85,247,.15); border: 1px solid rgba(168,85,247,.2); border-radius: 4px;
color: #a855f7; font-size: 9px; padding: 2px 8px; }
.vip-banner { align-items: center; background: linear-gradient(135deg,rgba(88,28,135,.15),rgba(53,10,88,.25));
border: 1px solid rgba(168,85,247,.25); border-radius: 12px; box-shadow: 0 4px 12px rgba(124,58,237,.08);
display: flex; justify-content: space-between; margin: 24px 18px 0; padding: 13px 14px; cursor: pointer; }
.vip-banner.is-vip { background: linear-gradient(135deg,rgba(58,46,27,.9),rgba(38,28,14,.9));
border-color: rgba(255,215,0,.3); }
.vip-banner-left { align-items: center; display: flex; gap: 9px; flex: 1; min-width: 0; }
.vip-icon { font-size: 20px; }
.vip-text-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vip-title { color: #fff; font-size: 14px; font-weight: 700; }
.vip-subtitle { color: #a78bfa; font-size: 11px; }
.vip-banner.is-vip .vip-subtitle { color: #f8d385; }
.vip-banner-btn { background: linear-gradient(135deg,#f5a623,#d48806); color: #fff; font-size: 12px;
font-weight: 600; padding: 6px 14px; border-radius: 12px; flex: none; border: 0; }
.practice-progress-entry-card { align-items: center; background: rgba(99,85,246,.12);
border: 1px solid rgba(99,85,246,.25); border-radius: 12px; display: flex; justify-content: space-between;
margin: 12px 18px 0; padding: 13px 14px; cursor: pointer; }
.practice-progress-entry-card:active { transform: scale(.99); }
.entry-card-left { align-items: center; display: flex; gap: 10px; flex: 1; min-width: 0; }
.entry-card-icon { background: rgba(99,85,246,.25); border-radius: 50%; display: flex; align-items: center;
justify-content: center; width: 32px; height: 32px; flex: none; }
.entry-card-icon-img { width: 18px; height: 18px; }
.entry-card-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.entry-title-row { align-items: center; display: flex; gap: 7px; }
.entry-title { color: #fff; font-size: 14px; font-weight: 700; }
.entry-badge { background: rgba(99,85,246,.35); border: 1px solid rgba(196,181,253,.3); border-radius: 5px;
color: #ddd6fe; font-size: 10px; font-weight: 700; padding: 2px 7px; }
.entry-badge.new-badge { background: rgba(245,158,11,.25); border-color: rgba(253,230,138,.3); color: #fde68a; }
.entry-subtitle { color: #a78bfa; font-size: 11px; }
.entry-card-right { align-items: center; display: flex; }
.entry-arrow { color: #a78bfa; font-size: 17px; font-weight: 700; }
.cell-group-wrap { margin-top: 18px; padding: 0 18px; }
.cell-group-title { font-size: 13px; color: #9aa1b5; font-weight: 600; margin: 0 4px 9px; }
.cell-group { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,.2); overflow: hidden; }
.cell-item { align-items: center; border-bottom: 1px solid rgba(255,255,255,.05); display: flex;
justify-content: space-between; padding: 13px; width: 100%; background: transparent; border-left: 0;
border-right: 0; border-top: 0; text-align: left; color: inherit; }
.cell-item:last-child { border-bottom: 0; }
.cell-left { align-items: center; display: flex; gap: 9px; flex: 1; min-width: 0; }
.cell-icon { border-radius: 50%; display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; flex: none; background: rgba(168,85,247,.15); }
.cell-icon-img { width: 16px; height: 16px; }
.star-icon { background: rgba(245,158,11,.18); }
.history-icon { background: rgba(59,130,246,.18); }
.mic-icon { background: rgba(236,72,153,.18); }
.request-icon { background: rgba(168,85,247,.18); }
.bean-icon { background: rgba(251,191,36,.18); }
.mouth-icon { background: rgba(244,63,94,.18); }
.teach-icon { background: rgba(167,139,250,.18); }
.order-icon { background: rgba(129,140,248,.18); }
.redeem-icon { background: rgba(132,204,22,.18); }
.service-icon { background: rgba(45,212,191,.18); }
.help-icon { background: rgba(56,189,248,.18); }
.cell-title { font-size: 14px; color: #f2f2f5; }
.cell-right { align-items: center; display: flex; gap: 6px; flex: none; }
.cell-extra { font-size: 11.5px; color: #7f879e; }
.cell-arrow { color: #7f879e; font-size: 15px; }
.page-footer-space { height: 15px; }
/* ===== 练唱（learned）页：对齐小程序原版 learned 设计语言 ===== */
.lv-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; position: relative; background: #f8f9fd; }
.lv-header-card-wrap { background: linear-gradient(180deg, #2a1359, #351772 65%, #421d8d); box-sizing: border-box; flex-shrink: 0; position: relative; z-index: 5; padding: 16px 14px 24px; }
.lv-custom-nav-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.lv-back, .lv-back-placeholder, .lv-nav-right-placeholder { width: 30px; flex-shrink: 0; }
.lv-back { background: rgba(255,255,255,.15); border: 0; border-radius: 50%; height: 30px; width: 30px; color: #fff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lv-back:active { opacity: .7; }
.lv-back .icon-back-chevron { border-bottom: 2px solid #fff; border-left: 2px solid #fff; height: 9px; margin-left: 3px; transform: rotate(45deg); width: 9px; }
.nav-title-box { display: flex; flex-direction: column; align-items: center; }
/* .lv-page 的标题在 nav-title-box 内正常排布（不绝对定位），
否则会与副标题重叠（用户反馈「顶上的字重叠」） */
.lv-page .nav-title-text { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 1px; line-height: 1.2; position: static; left: auto; transform: none; }
.nav-subtitle-text { color: rgba(255,255,255,.7); font-size: 11px; margin-top: 1px; }
.header-banner-container { margin-top: 6px; }
.banner-card { background: #3a1d78; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.15); padding: 12px 13px; }
.banner-main-row { display: flex; align-items: center; gap: 9px; }
.banner-avatar-box { align-items: center; background-color: rgba(255,255,255,.15); border: 2px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 2px 7px rgba(0,0,0,.2); display: flex; flex-shrink: 0; height: 36px; justify-content: center; overflow: hidden; width: 36px; }
.banner-user-avatar { display: block; height: 100%; width: 100%; object-fit: cover; }
.banner-text-col { flex: 1; min-width: 0; }
.banner-main-title { color: #fff; display: block; font-size: 14px; font-weight: 700; }
.banner-sub-title { color: rgba(255,255,255,.8); display: block; font-size: 11px; line-height: 1.3; margin-top: 2px; }
.streak-title-row { align-items: center; display: flex; gap: 6px; }
.streak-title { color: #fff; font-size: 14px; font-weight: 700; }
.streak-badge { background: rgba(245,158,11,.25); border: 1px solid rgba(253,230,138,.4); border-radius: 10px; color: #fde68a; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 11px; font-weight: 700; padding: 1px 8px; }
.streak-subtitle { color: rgba(255,255,255,.75); display: block; font-size: 11px; margin-top: 2px; }
.banner-features-grid { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding-top: 9px; text-align: center; }
.feature-col { display: flex; flex-direction: column; }
.feature-label { color: rgba(255,255,255,.6); font-size: 10px; }
.feature-value { font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 12px; font-weight: 700; margin-top: 2px; }
.banner-stats-grid { border-top: 1px solid rgba(255,255,255,.12); display: grid; gap: 6px; grid-template-columns: repeat(4, 1fr); margin-top: 10px; padding-top: 9px; text-align: center; }
.stat-col { display: flex; flex-direction: column; }
.stat-label { color: rgba(255,255,255,.65); font-size: 10px; }
.stat-value { color: #fff; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 13px; font-weight: 700; margin-top: 2px; }
.font-mono { font-family: 'DIN Alternate', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.text-white { color: #fff; }
.text-green { color: #34d399; }
.text-amber { color: #fbbf24; }
.sticky-toolbar { background-color: #fff; border-bottom: 1px solid #eceef4; border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -2px 8px rgba(0,0,0,.04); flex-shrink: 0; margin-top: -12px; padding: 14px 14px 8px; position: relative; z-index: 10; }
.new-user-toolbar-row { display: flex; justify-content: space-between; align-items: center; }
.recommend-title-wrap { align-items: center; display: flex; gap: 6px; }
.pulse-dot { background-color: #6355f6; border-radius: 50%; box-shadow: 0 0 0 4px rgba(99,85,246,.2); height: 8px; width: 8px; }
.recommend-section-title { color: #1a1d2b; font-size: 14px; font-weight: 700; }
.recommend-tag { background-color: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 8px; color: #6355f6; font-size: 11px; font-weight: 600; padding: 1px 8px; }
.recommend-count-hint { color: #9ca3af; font-size: 11px; }
.learned-toolbar-box { display: flex; flex-direction: column; gap: 8px; }
.search-input-box { align-items: center; background-color: #f3f5fa; border-radius: 9px; display: flex; height: 34px; padding: 0 12px; position: relative; }
.icon-search { position: relative; width: 12px; height: 12px; border: 2px solid #9ca3af; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.icon-search::after { content: ''; position: absolute; background-color: #9ca3af; height: 2px; width: 5px; left: 9px; top: 9px; transform: rotate(45deg); }
.search-input { color: #1a1d2b; flex: 1; font-size: 13px; border: 0; background: transparent; outline: none; }
.search-input::placeholder { color: #9ca3af; font-size: 12px; }
.clear-search-btn { display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; }
.icon-close-flat { position: relative; height: 11px; width: 11px; display: block; }
.icon-close-flat::before, .icon-close-flat::after { content: ''; position: absolute; background-color: #9ca3af; border-radius: 1px; height: 1.5px; left: 1px; top: 5px; width: 9px; }
.icon-close-flat::before { transform: rotate(45deg); }
.icon-close-flat::after { transform: rotate(-45deg); }
.filter-tabs-row { align-items: center; display: flex; gap: 8px; overflow-x: auto; }
.filter-tab { align-items: center; background-color: #f3f5fa; border-radius: 14px; color: #4b5563; display: flex; font-size: 12px; font-weight: 500; gap: 4px; padding: 5px 12px; transition: all .2s; white-space: nowrap; cursor: pointer; }
.filter-tab.tab-active { background-color: #6355f6; box-shadow: 0 2px 6px rgba(99,85,246,.25); color: #fff; font-weight: 700; }
.tab-badge { font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 11px; opacity: .85; }
.song-list-scroll { box-sizing: border-box; flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; width: 100%; }
.song-card { background-color: #fff; border: 1px solid #eceef4; border-radius: 12px; box-shadow: 0 2px 8px rgba(26,29,43,.04); margin-bottom: 12px; padding: 14px; }
.card-header-row { align-items: flex-start; display: flex; gap: 9px; justify-content: space-between; margin-bottom: 10px; }
.card-left-info { align-items: center; display: flex; flex: 1; gap: 10px; min-width: 0; }
.singer-avatar-box { background-color: #f3f5fa; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); flex-shrink: 0; height: 40px; overflow: hidden; width: 40px; }
.singer-avatar-img { height: 100%; width: 100%; object-fit: cover; }
.singer-avatar-initial { align-items: center; background: linear-gradient(135deg, #7c3aed, #4c1d95); display: flex; height: 100%; justify-content: center; width: 100%; }
.initial-text { color: #fff; font-size: 16px; font-weight: 700; line-height: 1; }
.song-meta-box { flex: 1; min-width: 0; }
.title-with-tag { align-items: center; display: flex; gap: 6px; }
.song-card-title { color: #1a1d2b; display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-card-artist { color: #6b7280; display: block; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-time-row { align-items: center; display: flex; gap: 4px; margin-top: 3px; }
.time-text { color: #9ca3af; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 11px; }
.time-divider { color: #d1d5db; font-size: 11px; }
.status-badge-box { flex-shrink: 0; }
.badge { align-items: center; border-radius: 12px; box-sizing: border-box; display: inline-flex; font-size: 12px; font-weight: 500; justify-content: center; line-height: 1.2; padding: 2px 9px; }
.badge-mastered { background-color: #059669; border: 1px solid #047857; color: #fff; }
.badge-review { background-color: #fef3c7; border: 1px solid #fde68a; color: #d97706; }
.badge-progress { background-color: #ecfdf5; border: 1px solid rgba(16,185,129,.25); color: #059669; }
.heat-badge-box { align-items: center; background: linear-gradient(90deg, #fff7ed, #fef3c7); border: 1px solid rgba(251,146,60,.4); border-radius: 10px; display: flex; flex-shrink: 0; gap: 5px; padding: 2px 9px; }
.heat-text { color: #ea580c; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 11px; font-weight: 700; }
.starter-tag { background-color: #fffbeb; border: 1px solid #fde68a; border-radius: 5px; color: #b45309; font-size: 11px; font-weight: 600; padding: 1px 5px; }
.recommend-reason-bubble { background-color: #f8f9fd; border: 1px solid #f1f3f9; border-radius: 9px; margin-bottom: 10px; padding: 9px 11px; }
.reason-bubble-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 4px; }
.reason-header-left { align-items: center; display: flex; gap: 5px; }
.reason-header-title { color: #6355f6; font-size: 12px; font-weight: 700; }
.reason-difficulty { color: #9ca3af; font-size: 11px; }
.reason-content-text { color: #4b5563; display: block; font-size: 13px; line-height: 1.45; }
.card-progress-section { background-color: #f8f9fd; border: 1px solid #f1f3f9; border-radius: 9px; margin-bottom: 10px; padding: 9px 11px; }
.progress-info-row { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 6px; }
.progress-left-label { align-items: center; display: flex; gap: 5px; }
.progress-name { color: #4b5563; font-size: 12px; }
.progress-count { color: #1a1d2b; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 12px; font-weight: 700; }
.progress-percent-box { align-items: baseline; display: flex; }
.percent-num { color: #1a1d2b; font-size: 15px; font-weight: 800; }
.percent-symbol { color: #9ca3af; font-size: 11px; font-weight: 700; margin-left: 1px; }
.progress-track { background-color: rgba(209,213,219,.5); border-radius: 5px; height: 7px; overflow: hidden; width: 100%; }
.progress-fill { background: linear-gradient(90deg, #34d399, #059669); border-radius: 5px; box-shadow: 0 0 4px rgba(16,185,129,.3); height: 100%; transition: width .3s ease; }
.fill-mastered { background: linear-gradient(90deg, #10b981, #047857); }
.fill-high { background: linear-gradient(90deg, #34d399, #059669); }
.fill-normal { background: linear-gradient(90deg, #6ee7b7, #10b981); }
.last-lyric-row { align-items: center; border-top: 1px solid rgba(229,231,235,.6); display: flex; justify-content: space-between; margin-top: 8px; padding-top: 7px; }
.lyric-preview-box { align-items: center; display: flex; flex: 1; gap: 4px; margin-right: 7px; min-width: 0; }
.lyric-prefix { color: #6355f6; flex-shrink: 0; font-size: 12px; font-weight: 700; }
.lyric-content { color: #9ca3af; font-size: 12px; }
.record-link-btn { align-items: center; background-color: rgba(99,85,246,.08); border-radius: 6px; display: flex; flex-shrink: 0; gap: 1px; padding: 3px 7px; cursor: pointer; }
.link-text { color: #6355f6; font-size: 12px; font-weight: 600; }
.link-arrow { color: #6355f6; font-size: 13px; font-weight: 700; }
.card-bottom-actions { align-items: center; display: flex; gap: 9px; justify-content: space-between; padding-top: 2px; }
.starter-intro-tip { color: #9ca3af; font-size: 12px; }
.start-learning-btn { background-color: #6355f6; border-radius: 9px; box-shadow: 0 2px 6px rgba(99,85,246,.25); padding: 7px 18px; transition: opacity .2s; cursor: pointer; }
.start-learning-btn:active { opacity: .8; }
.saved-sing-count-box { align-items: center; display: flex; }
.saved-text { color: #9ca3af; font-size: 12px; }
.highlight-count { color: #1a1d2b; font-family: 'DIN Alternate', -apple-system, sans-serif; font-size: 13px; font-weight: 700; }
.action-btn-group { align-items: center; display: flex; gap: 8px; }
.listen-sing-btn { align-items: center; background-color: #f3f5fa; border-radius: 8px; display: flex; gap: 5px; padding: 7px 11px; transition: all .2s; cursor: pointer; }
.listen-sing-btn:active { background-color: #ede9fe; }
.btn-play-triangle { width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #6355f6; border-bottom: 5px solid transparent; }
.listen-sing-btn .btn-text { color: #374151; font-size: 12px; font-weight: 600; }
.sentence-practice-btn { align-items: center; border-radius: 8px; display: flex; justify-content: center; padding: 7px 14px; transition: all .2s; cursor: pointer; }
.sentence-practice-btn:active { opacity: .85; }
.sentence-practice-btn.btn-primary { background-color: #6355f6; box-shadow: 0 2px 6px rgba(99,85,246,.25); }
.sentence-practice-btn.btn-primary .btn-text { color: #fff; font-size: 12px; font-weight: 700; }
.sentence-practice-btn.btn-replay { background-color: #ecfdf5; border: 1px solid #a7f3d0; }
.sentence-practice-btn.btn-replay .btn-text { color: #059669; font-size: 12px; font-weight: 700; }
.btn-text { color: #fff; font-size: 12px; font-weight: 700; }
.empty-result-box { align-items: center; display: flex; flex-direction: column; justify-content: center; padding: 50px 20px; text-align: center; }
.empty-title { color: #1a1d2b; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.empty-desc-tip { color: #9ca3af; font-size: 12px; line-height: 1.5; margin-bottom: 16px; max-width: 280px; }
.empty-reset-btn { align-items: center; background-color: #6355f6; border-radius: 16px; box-shadow: 0 2px 8px rgba(99,85,246,.25); box-sizing: border-box; display: inline-flex; height: 34px; justify-content: center; padding: 0 22px; transition: opacity .2s; cursor: pointer; }
.empty-reset-btn:active { opacity: .85; }
.empty-reset-btn .btn-text { align-items: center; color: #fff; display: flex; font-size: 13px; font-weight: 600; justify-content: center; line-height: 1; }
.floating-continuous-player { align-items: center; animation: lvSlideUp .3s ease; backdrop-filter: blur(20px); background-color: rgba(15,23,42,.95); border: 1px solid rgba(51,65,85,.8); border-radius: 14px; bottom: 16px; box-shadow: 0 -4px 18px rgba(15,23,42,.35); display: flex; gap: 9px; justify-content: space-between; left: 12px; padding: 9px 12px; position: fixed; right: 12px; z-index: 70; }
@keyframes lvSlideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: translateY(0); } }
.player-left-info { align-items: center; display: flex; flex: 1; gap: 9px; min-width: 0; }
.player-avatar-box { background-color: #1e293b; border-radius: 9px; box-shadow: 0 1px 4px rgba(0,0,0,.2); flex-shrink: 0; height: 32px; overflow: hidden; width: 32px; }
.player-avatar-initial { align-items: center; background: linear-gradient(135deg, #7c3aed, #4c1d95); display: flex; height: 100%; justify-content: center; width: 100%; }
.player-avatar-initial .initial-text { color: #fff; font-size: 14px; font-weight: 700; }
.player-meta-box { flex: 1; min-width: 0; }
.player-title-row { align-items: center; display: flex; gap: 6px; }
.player-song-title { color: #fff; font-size: 13px; font-weight: 700; }
.player-index-badge { background-color: rgba(16,185,129,.2); border-radius: 4px; color: #6ee7b7; font-family: 'DIN Alternate', monospace; font-size: 10px; font-weight: 700; padding: 1px 5px; }
.player-lyric-text { color: #cbd5e1; display: block; font-size: 11px; margin-top: 2px; }
.wave-equalizer-box { align-items: flex-end; display: flex; flex-shrink: 0; gap: 3px; height: 18px; padding: 0 4px; }
.wave-bar { background-color: #34d399; border-radius: 3px; height: 5px; transition: height .2s; width: 3px; }
.wave-bar.bar-animated:nth-child(1) { animation: lvWave .9s ease-in-out infinite; }
.wave-bar.bar-animated:nth-child(2) { animation: lvWave .7s ease-in-out .2s infinite; }
.wave-bar.bar-animated:nth-child(3) { animation: lvWave 1.1s ease-in-out .4s infinite; }
.wave-bar.bar-animated:nth-child(4) { animation: lvWave .8s ease-in-out .3s infinite; }
@keyframes lvWave { 0%, 100% { height: 5px; } 50% { height: 16px; } }
.player-control-group { align-items: center; display: flex; flex-shrink: 0; gap: 6px; }
.control-circle-btn { align-items: center; border-radius: 50%; display: flex; justify-content: center; transition: transform .1s; cursor: pointer; }
.control-circle-btn:active { transform: scale(.92); }
.play-pause-btn { background-color: #fff; height: 30px; width: 30px; }
.icon-play-arrow { width: 0; height: 0; border-top: 5px solid transparent; border-left: 8px solid #0f172a; border-bottom: 5px solid transparent; margin-left: 2px; }
.icon-pause-bars { display: flex; height: 9px; justify-content: space-between; width: 8px; }
.icon-pause-bars::before, .icon-pause-bars::after { content: ''; background-color: #0f172a; border-radius: 1px; height: 100%; width: 2px; }
.close-btn { background-color: #1e293b; height: 26px; width: 26px; }
.icon-close-cross { position: relative; height: 9px; width: 9px; display: block; }
.icon-close-cross::before, .icon-close-cross::after { content: ''; background-color: #94a3b8; border-radius: 1px; height: 1.5px; left: 0; position: absolute; top: 4px; width: 9px; }
.icon-close-cross::before { transform: rotate(45deg); }
.icon-close-cross::after { transform: rotate(-45deg); }
.list-bottom-spacer { height: 80px; }
.list-bottom-spacer.compact { height: 24px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 全部歌曲页：头卡音乐图标 */
.list-hero-ico { background: linear-gradient(135deg, #7c3aed, #4c1d95); align-items: center; display: flex; justify-content: center; }
.list-hero-ico .hero-note { color: #fff; font-size: 18px; line-height: 1; }
/* 全部歌曲页：难度/歌手 模式切换 + 字母分组 */
.mode-switch { background-color: #f3f5fa; border-radius: 14px; display: flex; gap: 6px; padding: 4px; }
.mode-tab { border-radius: 12px; color: #4b5563; flex: 1; font-size: 13px; font-weight: 500; padding: 9px 0; text-align: center; transition: all .2s; cursor: pointer; }
.mode-tab.on { background-color: #fff; box-shadow: 0 2px 8px rgba(99,85,246,.18); color: #6355f6; font-weight: 700; }
.letter-group { margin-bottom: 6px; }
.letter-group-head { color: #6355f6; font-size: 13px; font-weight: 700; letter-spacing: 2px; padding: 14px 4px 8px; }
/* A→Z 拼音找歌：1:1 复刻原版左右双栏（尺寸 = 原版 rpx ÷2），深色主题同款配色 */
.azx {
position: relative; display: flex; flex-direction: column;
height: calc(100vh - 52px); overflow: hidden; width: 100%;
background: radial-gradient(circle at 50% 0, #2e1065 0, #0f0518 50%, #050208 100%);
color: #f3f4f6;
}
.azx-glow { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 300px; height: 300px;
background: radial-gradient(circle, rgba(147,51,234,.18) 0, rgba(147,51,234,0) 70%); pointer-events: none; }
.azx-body { position: relative; display: flex; flex: 1; min-height: 0; }
.azx-left { width: 105px; flex-shrink: 0; height: 100%; overflow-y: auto; background: rgba(255,255,255,.03); box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.azx-left::-webkit-scrollbar, .azx-right::-webkit-scrollbar { display: none; }
.azx-group-title { color: rgba(216,180,254,.45); font-size: 11px; font-weight: 600; letter-spacing: .5px; padding: 8px 12px 4px; }
.azx-group { }
.azx-letter { color: rgba(216,180,254,.45); font-size: 11px; font-weight: 600; letter-spacing: .5px; padding: 8px 12px 4px; }
.azx-artist { border-radius: 6px; margin: 0 5px; padding: 11px 10px; cursor: pointer; }
.azx-artist.is-active { background: rgba(147,51,234,.22); }
.azx-artist-name { color: #e5e7eb; display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azx-artist.is-active .azx-artist-name { color: #f0abfc; font-weight: 600; }
.azx-spacer { height: 60px; }
.azx-rail { width: 20px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0; box-sizing: border-box; }
.azx-rail-left { border-right: 1px solid rgba(255,255,255,.06); }
.azx-rail-key { width: 100%; min-height: 13px; flex: 1; display: flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; color: rgba(216,180,254,.5); cursor: pointer; }
.azx-rail-key:active { color: #f0abfc; font-weight: 700; }
.azx-right-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.azx-right-header { flex-shrink: 0; padding: 4px 12px 6px; color: rgba(216,180,254,.55); font-size: 12px; }
.azx-right { flex: 1; min-height: 0; overflow-y: auto; box-sizing: border-box; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.azx-song { display: flex; align-items: center; padding: 13px 8px 13px 12px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; }
.azx-song.bump { animation: azxBump .25s ease; }
@keyframes azxBump { 50% { transform: scale(1.02); } }
.azx-song-title { flex: 1; min-width: 0; color: #f3f4f6; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.azx-fav { width: 36px; height: 36px; flex-shrink: 0; margin-left: 4px; display: flex; align-items: center; justify-content: center;
background: none; border: 0; padding: 0; color: #fff; opacity: .55; cursor: pointer; }
.azx-fav.is-active { opacity: 1; color: #f472b6; }
.azx-tip { color: rgba(255,255,255,.35); font-size: 13px; padding: 30px 12px; text-align: center; }
.azx-bubble { position: fixed; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 12px;
background: rgba(147,51,234,.85); color: #fff; display: none; align-items: center; justify-content: center;
font-size: 28px; font-weight: 700; pointer-events: none; z-index: 60; left: 60px; }
.azx-bubble.show { display: flex; }
/* ---------- 登录 / 注册页 + 我的页登录态条 ---------- */
.auth-head { text-align: center; padding: 22px 18px 6px; }
.auth-logo {
display: block; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 18px;
object-fit: cover;
box-shadow: 0 6px 18px rgba(124, 58, 237, .32);
}
.auth-title { font-size: 19px; font-weight: 700; color: var(--text); }
.auth-sub { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.7; }
.auth-tip {
padding: 10px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6;
background: var(--gold-soft); border: 1px solid rgba(248, 211, 133, .28); color: var(--gold);
}
.seg {
display: flex; gap: 4px; padding: 4px; margin-bottom: 12px;
background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 12px;
}
.seg-item {
flex: 1; padding: 9px 0; border: 0; border-radius: 9px; background: transparent;
color: var(--text-2); font-size: 13px; cursor: pointer;
}
.seg-item.on { background: linear-gradient(135deg, var(--primary), var(--primary-dim)); color: #fff; font-weight: 600; }
.auth-msg { min-height: 18px; margin-top: 8px; font-size: 12px; color: var(--red); text-align: center; }
.auth-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.auth-row:last-of-type { border-bottom: 0; }
.auth-label { font-size: 12.5px; color: var(--muted); }
.auth-value { font-size: 12.5px; color: var(--text); font-weight: 500; }
.auth-foot { margin: 10px 0 4px; font-size: 11px; color: #6b7280; line-height: 1.8; text-align: center; }
/* ---------- 登录页全屏背景 + 玻璃卡片（v20） ----------
.auth-bg 为 absolute：#view 无 position，包含块落到 #phone（relative），
因此 inset:0 恰好铺满整个手机屏（含 navbar 区域），且不随 #view 滚动。 */
.auth-bg {
position: absolute; inset: 0; z-index: 0;
background: #0b0415 url('../assets/images/login-bg.jpg') center top / cover no-repeat;
}
/* 压暗渐变：保证上半部返回键可读、下半部表单可读。
顶部 scrim 略加强（.40→.55）：去掉头部 text-shadow 后，可读性由渐变承担，
同时避免为读清文字而加回扩散阴影（那正是「发糊」的来源）。 */
.auth-bg::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(11, 4, 21, .55) 0%, rgba(11, 4, 21, 0) 26%,
rgba(11, 4, 21, 0) 46%, rgba(11, 4, 21, .58) 72%, rgba(11, 4, 21, .90) 100%);
}
/* 内容层：压在背景之上；底部对齐让上方留白露出背景视觉 */
.auth-inner {
position: relative; z-index: 1;
min-height: 100%;
display: flex; flex-direction: column; justify-content: flex-end;
}
.auth-inner .auth-head {
padding: 14px 10px 18px;
position: relative;
text-align: center;
}
/* 头部后方压暗：用「线性实色渐变带」取代原来的径向柔雾。
径向 ellipse 的边缘是全透明渐变的雾场，文字压在上面在 macOS Safari 上显糊；
线性带上下边缘干净、标题底下是干净暗场，文字更锐利（用户多次反馈「桌面版顶部模糊」）。 */
.auth-inner .auth-head::before {
content: ""; position: absolute; inset: -12px -26px -8px;
background: linear-gradient(180deg, rgba(11, 4, 21, .88) 0%, rgba(11, 4, 21, .62) 72%, rgba(11, 4, 21, 0) 100%);
z-index: -1; pointer-events: none;
}
/* 去掉扩散 text-shadow：照片底上靠 1px 内的硬阴影只会发虚，可读性交给上面的实色 scrim */
.auth-inner .auth-title {
text-shadow: none;
font-size: 24px; font-weight: 800; letter-spacing: 3px;
background: linear-gradient(135deg, #f8d385 0%, #e0a94b 55%, #f5cf8a 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: #f8d385;
}
.auth-inner .auth-sub {
color: rgba(238, 240, 248, .92);
text-shadow: none;
margin-top: 7px; font-size: 12.5px; letter-spacing: 1px;
}
/* 卖点横排（「大气」感：三格等宽卡片，实色底不用 backdrop-filter，避免 macOS 发虚） */
.auth-perks {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
margin: 2px 0 14px;
}
.auth-perk {
display: flex; flex-direction: column; align-items: center; gap: 7px;
padding: 13px 6px 11px; border-radius: 14px;
background: #1c1230; border: 1px solid rgba(168, 85, 247, .28);
box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.auth-perk img { width: 22px; height: 22px; object-fit: contain; }
.auth-perk span { font-size: 11.5px; font-weight: 600; color: #e9e4f7; letter-spacing: .5px; }
.auth-perk:active { transform: scale(.97); }
.auth-inner .auth-foot { color: rgba(255, 255, 255, .55); margin-bottom: 0; }
/* 自绘返回键（hideNav 后无全局 navbar）；锚定 #phone，滚动时保持可见。
实色背景：backdrop-filter 在 macOS Safari 上会把按钮内的图标/文字渲糊
（用户反馈「苹果桌面端顶部模糊」的实因之一），用不透明底色 + 描边保持层次。 */
.auth-back {
position: absolute; top: 14px; left: 14px; z-index: 3;
width: 36px; height: 36px; padding: 0;
border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22);
background: rgba(17, 10, 30, .92);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.auth-back img { width: 18px; height: 18px; object-fit: contain; }
.auth-back:active { opacity: .7; }
/* 玻璃卡片：scoped 到 .auth-inner，不影响其他页面的 .card */
.auth-inner .card {
background: #1a1027;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 18px;
box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
padding: 16px 15px;
}
.auth-inner .card + .card { margin-top: 12px; }
.auth-inner .input {
height: 46px; border-radius: 12px;
background: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .14);
}
.auth-inner .input:focus { border-color: var(--primary); background: rgba(255, 255, 255, .09); }
.auth-inner .btn {
height: 46px; border-radius: 13px; font-size: 15.5px;
box-shadow: 0 8px 22px rgba(168, 85, 247, .38);
}
.auth-inner .seg { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .12); }
.auth-inner .auth-tip { background: rgba(248, 211, 133, .12); }
.acct-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; position: relative; z-index: 2; }
.acct-tag {
padding: 3px 9px; border-radius: 7px; font-size: 11px; color: var(--text-2);
background: rgba(255,255,255,.08); border: 1px solid var(--line);
}
.acct-tip { flex: 1; min-width: 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
.acct-btn {
padding: 4px 11px; border-radius: 7px; font-size: 11px; cursor: pointer;
background: var(--primary-soft); border: 1px solid rgba(168,85,247,.28); color: var(--primary);
}
.acct-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dim)); border-color: transparent; color: #fff; }
/* ============================================================
会员中心（pages/vip-center）—— 版式 1:1 还原原版 vip-center 分包
深紫金主题；.vipx 作用域避免与全局冲突；数值取自原包 WXSS
============================================================ */
.vipx { min-height: 100%; }
.vipx .nav-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 100; box-sizing: border-box; transition: background .3s; background: rgba(10,0,18,.95); }
.vipx .nav-content { display: flex; align-items: center; padding: 10px 16px; }
.vipx .back-btn { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; }
.vipx .icon-back { width: 12px; height: 12px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); display: block; }
.vipx .nav-brand { display: flex; align-items: center; gap: 8px; margin-left: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: all .3s; }
.vipx .nav-brand.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.vipx .nav-logo { width: 28px; height: 28px; border-radius: 6px; }
.vipx .nav-brand-text { display: grid; gap: 2px; font-size: 13px; font-weight: 900; line-height: 1.1; color: #fff; text-align: left; }
.vipx .nav-brand-text div:nth-child(2) { color: #b986ff; font-size: 9px; opacity: .8; }
.vipx .vx-container { background: radial-gradient(circle at 50% 20%, rgba(139,92,246,.15), transparent 400px), linear-gradient(180deg,#180928,#0f051c 50%,#080112); box-shadow: 0 0 72px rgba(80,15,128,.24); box-sizing: border-box; overflow: hidden; padding: 60px 16px 150px; position: relative; min-height: 100vh; }
.vipx .vx-container::before { background: radial-gradient(ellipse at center, rgba(155,64,255,.22), transparent 62%), linear-gradient(90deg, transparent, hsla(0,0%,100%,.12), transparent); content: ""; filter: blur(18px); height: 260px; left: -60px; opacity: .9; pointer-events: none; position: absolute; right: -60px; top: 128px; }
.vipx .vx-header, .vipx .privileges-tags, .vipx .tiers-wrap, .vipx .vx-section, .vipx .lifetime-card-wrap, .vipx .secondary-tiers-row { position: relative; z-index: 1; }
.vipx .vx-header { margin: 20px 0 20px; text-align: center; }
.vipx .main-title { font-size: 28px; font-weight: 900; letter-spacing: 1px; color: #fff; }
.vipx .highlight { color: #f8d385; display: inline-block; font-family: "Arial Black","Helvetica Neue",Arial,sans-serif; font-style: italic; font-weight: 900; margin-right: 4px; text-shadow: .8px 0 #f8d385,-.8px 0 #f8d385; }
.vipx .sub-title { color: hsla(0,0%,100%,.58); font-size: 14px; font-weight: 700; line-height: 1.62; margin-top: 14px; }
.vipx .privileges-tags { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); margin-bottom: 30px; }
.vipx .tag { align-items: center; background: hsla(0,0%,100%,.1); border-radius: 19px; color: hsla(0,0%,100%,.9); display: flex; font-size: 13px; font-weight: 700; gap: 5px; height: 35px; justify-content: center; min-width: 0; white-space: nowrap; }
.vipx .tag-icon { flex: 0 0 auto; height: 17px; width: 17px; }
/* —— 终身 SVIP 大卡 —— */
.vipx .lifetime-card-wrap { padding: 0 0 24px; }
.vipx .lifetime-card { background: linear-gradient(135deg,#ffe8b6,#d4a343 35%,#8a5f1c 66%,#ffe8b6); border-radius: 20px; box-shadow: 0 16px 45px rgba(212,163,67,.18),0 0 25px rgba(212,163,67,.12),0 6px 14px rgba(0,0,0,.4); box-sizing: border-box; overflow: hidden; padding: 1.5px; position: relative; transition: all .3s cubic-bezier(.165,.84,.44,1); cursor: pointer; }
.vipx .lifetime-card.active { box-shadow: 0 20px 50px hsla(41,89%,75%,.25),0 0 30px hsla(41,89%,75%,.18),0 8px 20px rgba(0,0,0,.5); transform: translateY(-2px); }
.vipx .lifetime-card-inner { background: linear-gradient(135deg,#1b0d2d,#0a0412); border-radius: 18px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; padding: 24px 22px; position: relative; width: 100%; }
.vipx .card-glow { background: radial-gradient(circle at 30% 30%, hsla(41,89%,75%,.15) 0, transparent 60%); height: 200%; left: -50%; top: -50%; width: 200%; pointer-events: none; position: absolute; z-index: 1; }
.vipx .card-shine { animation: vxShine 4.5s ease-in-out infinite; background: linear-gradient(90deg,transparent,hsla(41,89%,75%,.08),hsla(0,0%,100%,.22),hsla(41,89%,75%,.08),transparent); height: 100%; left: -150%; top: 0; transform: skewX(-25deg); width: 80%; pointer-events: none; position: absolute; z-index: 2; }
@keyframes vxShine { 0% { left: -150%; } 32% { left: 150%; } 100% { left: 150%; } }
.vipx .vx-card-header { align-items: center; display: flex; justify-content: flex-end; margin-bottom: 22px; min-height: 24px; }
.vipx .card-badge { align-items: center; background: hsla(41,89%,75%,.08); border: 1px solid hsla(41,89%,75%,.22); border-radius: 10px; color: #f8d385; display: flex; font-size: 11px; font-weight: 800; gap: 6px; letter-spacing: 1px; padding: 4px 10px; text-shadow: 0 0 4px hsla(41,89%,75%,.2); z-index: 5; }
.vipx .crown-emoji { font-size: 13px; }
.vipx .card-discount-tag { background: linear-gradient(90deg,#f8d385,#e5a93c); border-radius: 18px 0 18px 0; box-shadow: 2px 2px 8px rgba(0,0,0,.3); color: #553400; font-size: 11px; font-weight: 900; left: -1px; letter-spacing: .5px; padding: 5px 14px; position: absolute; top: -1px; z-index: 10; }
.vipx .vx-card-body { align-items: center; display: flex; justify-content: space-between; margin-bottom: 24px; z-index: 5; }
.vipx .card-info { flex: 1; }
.vipx .card-title { background: linear-gradient(135deg,#ffe8b6,#f8d385 50%,#d4a343); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 28px; font-weight: 950; letter-spacing: .5px; line-height: 1.2; margin-bottom: 8px; }
.vipx .card-subtitle { color: hsla(0,0%,100%,.65); font-size: 12px; letter-spacing: .5px; line-height: 1.4; margin-bottom: 14px; }
.vipx .card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vipx .card-tag-pill { background: hsla(41,89%,75%,.12); border: 1px solid hsla(41,89%,75%,.28); border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.15); color: #ffe8b6; font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 4px 10px; }
.vipx .card-price-area { margin-left: 16px; text-align: right; }
.vipx .card-price { align-items: baseline; background: linear-gradient(135deg,#ffe8b6,#f8d385 50%,#d4a343); -webkit-background-clip: text; background-clip: text; color: transparent; display: flex; font-weight: 900; justify-content: flex-end; line-height: 1; }
.vipx .card-price .symbol { font-size: 20px; font-weight: 800; margin-right: 2px; }
.vipx .card-price .price-num { font-size: 46px; }
.vipx .card-original-price { color: hsla(0,0%,100%,.45); font-size: 12px; letter-spacing: .5px; margin-top: 6px; text-decoration: line-through; }
.vipx .vx-card-footer { align-items: center; border-top: 1px solid hsla(0,0%,100%,.08); display: flex; justify-content: space-between; padding-top: 16px; z-index: 5; }
.vipx .purchase-ticker { flex: 1; display: flex; align-items: center; background: hsla(0,0%,100%,.05); border: 1px solid hsla(0,0%,100%,.08); border-radius: 18px; box-sizing: border-box; height: 32px; margin-right: 12px; padding: 0 4px; overflow: hidden; }
.vipx .ticker-tag { align-items: center; background: linear-gradient(135deg,#a24aff,#6a11cb); border-radius: 12px; box-shadow: 0 0 10px rgba(162,74,255,.3); color: #fff; flex-shrink: 0; display: flex; font-size: 11px; font-weight: 900; height: 22px; justify-content: center; margin-right: 10px; padding: 0 10px; }
.vipx .ticker-viewport { flex: 1; height: 100%; overflow: hidden; }
.vipx .ticker-track { animation: vxTicker 36s linear infinite; }
.vipx .ticker-item { height: 30px; display: flex; align-items: center; overflow: hidden; }
.vipx .footer-note { color: hsla(41,89%,75%,.85); font-size: 11px; letter-spacing: .5px; white-space: nowrap; }
@keyframes vxTicker { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.vipx .card-select-indicator { align-items: center; border: 2px solid #f8d385; border-radius: 50%; box-shadow: 0 0 8px hsla(41,89%,75%,.3); box-sizing: border-box; display: flex; height: 22px; justify-content: center; width: 22px; flex-shrink: 0; }
.vipx .select-dot { background: #f8d385; border-radius: 50%; height: 10px; width: 10px; }
/* —— 包年 + 月度双列 —— */
.vipx .secondary-tiers-row { gap: 10px; padding: 0 0 10px; display: flex; box-sizing: border-box; }
.vipx .sub-tier-card { background: hsla(0,0%,100%,.04); border: 1.5px solid hsla(0,0%,100%,.12); border-radius: 16px; flex: 1; flex-direction: column; padding: 14px 12px; position: relative; transition: all .25s ease; display: flex; box-sizing: border-box; cursor: pointer; min-width: 0; }
.vipx .sub-tier-card.active { background: rgba(212,163,67,.1); border-color: #d4a343; box-shadow: 0 6px 16px rgba(212,163,67,.12); }
.vipx .sub-tier-badge { background: linear-gradient(135deg,#ffe8b6,#d4a343); border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); color: #3d2200; font-size: 10px; font-weight: 700; left: 10px; letter-spacing: .5px; padding: 2px 7px; position: absolute; top: -9px; }
.vipx .sub-tier-top { align-items: center; display: flex; justify-content: space-between; width: 100%; }
.vipx .sub-tier-title { color: #f5e6c8; font-size: 15px; font-weight: 600; }
.vipx .sub-tier-check { border: 1.5px solid hsla(0,0%,100%,.3); border-radius: 50%; box-sizing: border-box; flex-shrink: 0; height: 18px; transition: all .2s ease; width: 18px; }
.vipx .sub-tier-card.active .sub-tier-check { background: #d4a343 radial-gradient(circle,#1a1a1a 32%,transparent 34%); border-color: #d4a343; }
.vipx .sub-tier-price { align-items: baseline; color: #f5c518; display: flex; margin-top: 8px; }
.vipx .sub-tier-symbol { font-size: 13px; font-weight: 600; }
.vipx .sub-tier-num { font-family: "DIN Alternate",-apple-system,sans-serif; font-size: 24px; font-weight: 800; margin-left: 2px; }
.vipx .sub-tier-unit { color: hsla(0,0%,100%,.5); font-size: 11px; margin-left: 3px; }
.vipx .sub-tier-sub { color: hsla(0,0%,100%,.45); font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* —— 体验 / 季度 tier 卡 —— */
.vipx .tiers-wrap { align-items: stretch; display: flex; gap: 8px; justify-content: center; margin-bottom: 30px; }
.vipx .tier-card { background: hsla(0,0%,100%,.05); border: 1px solid hsla(0,0%,100%,.1); border-radius: 12px; box-sizing: border-box; flex: 1; padding: 20px 0 0; position: relative; transition: all .3s; display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 0; }
.vipx .tier-card.active { background: hsla(41,89%,75%,.1); border-color: #f8d385; }
.vipx .tier-content { flex: 1; padding: 0 6px 12px; display: flex; flex-direction: column; align-items: center; }
.vipx .tier-save { align-items: center; background: hsla(0,0%,100%,.1); border-radius: 0 0 11px 11px; color: hsla(0,0%,100%,.6); display: flex; font-size: 11px; font-weight: 700; height: 24px; justify-content: center; margin-top: auto; width: 100%; }
.vipx .tier-card.active .tier-save { background: linear-gradient(90deg,#f8d385,#e5a93c); color: #553400; }
.vipx .tier-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; color: #fff; }
.vipx .tier-desc { color: hsla(0,0%,100%,.5); font-size: 10px; height: 14px; margin-bottom: 16px; text-align: center; }
.vipx .tier-price { color: #f8d385; font-size: 32px; font-weight: 700; margin-bottom: 8px; }
.vipx .tier-price .symbol { font-size: 16px; margin-right: 2px; }
.vipx .tier-unit { color: hsla(0,0%,100%,.4); font-size: 10px; line-height: 14px; }
.vipx .daily-price { color: #f8d385; font-size: 10px; font-weight: 700; line-height: 14px; margin-top: 4px; }
/* —— 通用 section（深紫圆角卡）—— */
.vipx .vx-section { background: rgba(24,9,37,.95); border-radius: 22px; box-shadow: inset 0 0 0 1px hsla(0,0%,100%,.035); margin-bottom: 16px; box-sizing: border-box; }
.vipx .section-header { margin-bottom: 18px; text-align: left; }
.vipx .section-title { color: #fff; font-size: 19px; font-weight: 900; }
/* —— 尊享特权 —— */
.vipx .privilege-section { padding: 24px 16px; }
.vipx .privilege-list { display: grid; gap: 20px 10px; grid-template-columns: repeat(3,1fr); }
.vipx .privilege-item { min-width: 0; text-align: center; }
.vipx .privilege-icon { align-items: center; background: hsla(0,0%,100%,.06); border-radius: 50%; display: flex; height: 52px; justify-content: center; margin: 0 auto 11px; width: 52px; }
.vipx .privilege-icon img { height: 29px; width: 29px; object-fit: contain; }
.vipx .p-title { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 6px; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vipx .p-desc { color: hsla(0,0%,100%,.39); font-size: 11px; display: block; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* —— intro 品牌区 —— */
.vipx .intro-section { border-radius: 0; box-shadow: none; margin: 0 -16px; padding: 0; background: transparent; overflow: hidden; }
.vipx .intro-hero { box-sizing: border-box; min-height: 534px; padding: 40px 20px 0; position: relative; background: transparent; overflow: hidden; border-bottom: none; }
.vipx .intro-hero::after { background: linear-gradient(180deg,transparent,rgba(24,9,40,.35) 28%,#0f051c); bottom: 0; content: ""; height: 230px; left: 0; right: 0; z-index: 3; pointer-events: none; position: absolute; }
.vipx .intro-note { font-weight: 900; line-height: 1; text-shadow: 0 0 18px currentColor; z-index: 1; pointer-events: none; position: absolute; }
.vipx .note-left { color: #b779ff; font-size: 28px; right: 166px; top: 224px; transform: rotate(-8deg); }
.vipx .note-right { color: #f8d385; font-size: 31px; right: 18px; top: 136px; transform: rotate(12deg); }
.vipx .intro-brand { align-items: center; color: #fff; display: flex; gap: 8px; margin-bottom: 16px; position: relative; z-index: 2; }
.vipx .intro-logo { border-radius: 7px; box-shadow: 0 0 10px rgba(187,91,255,.22); flex: 0 0 auto; height: 52px; width: 52px; }
.vipx .intro-brand-text { display: grid; font-size: 16px; font-weight: 900; gap: 5px; line-height: 1.05; }
.vipx .intro-brand-text div:nth-child(2) { color: #b986ff; opacity: .5; }
.vipx .intro-title { color: #fff; font-size: 36px; font-weight: 950; line-height: 1.14; max-width: 235px; position: relative; text-shadow: 0 0 12px hsla(0,0%,100%,.22),0 0 22px rgba(149,82,255,.34); z-index: 2; }
.vipx .intro-title-accent { color: #b986ff; text-shadow: 0 0 16px rgba(184,140,255,.64),0 3px 0 rgba(101,39,170,.5); }
.vipx .intro-path { align-items: center; background: linear-gradient(90deg,rgba(125,78,255,.98),rgba(184,115,255,.96)); border-radius: 999px; box-shadow: 0 0 0 1px rgba(213,170,255,.42),0 10px 26px rgba(128,80,255,.34); color: #fff; display: inline-flex; font-size: 16px; font-weight: 800; gap: 8px; margin-top: 24px; padding: 10px 18px; position: relative; white-space: nowrap; z-index: 4; }
.vipx .intro-portrait { background: radial-gradient(circle at 62% 36%, rgba(190,101,255,.42), transparent 115px); border-radius: 22px; filter: drop-shadow(0 0 28px rgba(184,101,255,.38)); height: 318px; opacity: .98; overflow: hidden; position: absolute; right: -12px; top: 108px; width: 204px; z-index: 1; }
.vipx .intro-portrait-img { left: 50%; position: absolute; top: 0; transform: translateX(-50%); width: 180px; }
.vipx .portrait-note { color: #c28cff; font-size: 23px; position: absolute; text-shadow: 0 0 14px rgba(194,140,255,.5); z-index: 1; }
.vipx .portrait-note-left { left: 8px; top: 74px; }
.vipx .portrait-note-right { color: #f8d385; right: 20px; top: 16px; }
.vipx .intro-features { display: grid; gap: 10px; grid-template-columns: repeat(4,1fr); margin: -204px 16px 20px; position: relative; z-index: 4; }
.vipx .intro-feature { background: linear-gradient(180deg,rgba(65,42,96,.74),rgba(30,16,52,.82)); border: 1px solid rgba(181,130,255,.38); border-radius: 18px; box-shadow: inset 0 0 22px rgba(139,82,255,.14),0 12px 26px rgba(0,0,0,.24); box-sizing: border-box; min-height: 138px; min-width: 0; padding: 14px 6px 13px; text-align: center; }
.vipx .feature-mark { align-items: center; background: radial-gradient(circle at 35% 20%, rgba(255,215,124,.18), transparent 22px) content-box, linear-gradient(135deg,#8c55ff,#4b2082) content-box, linear-gradient(135deg,#fff,#b47cff) border-box; border-radius: 50%; box-shadow: 0 0 22px rgba(150,79,255,.48); box-sizing: border-box; color: #fff; display: flex; font-size: 26px; font-weight: 900; height: 56px; justify-content: center; margin: 0 auto 14px; padding: 1px; width: 56px; }
.vipx .feature-title { color: #fff; display: block; font-size: 15px; font-weight: 900; margin-bottom: 6px; }
.vipx .feature-desc { color: hsla(0,0%,100%,.55); display: block; font-size: 10px; line-height: 1.5; }
/* —— 内测用户有话说 —— */
.vipx .story-section { box-sizing: border-box; overflow: hidden; padding: 27px 20px 22px; }
.vipx .story-line { background: linear-gradient(90deg,transparent,rgba(203,92,255,.8),transparent); height: 1px; left: 0; position: absolute; right: 0; top: 0; }
.vipx .story-head { margin: 0 4px 20px; text-align: center; }
.vipx .story-title { font-size: 25px; font-weight: 900; line-height: 1.18; text-shadow: 0 0 16px rgba(213,111,255,.35); color: #f1c1ff; }
.vipx .story-desc { color: hsla(0,0%,100%,.58); font-size: 13px; line-height: 1.6; margin-top: 10px; }
.vipx .review-list { display: grid; gap: 11px; }
.vipx .review-card { background: linear-gradient(145deg,hsla(0,0%,100%,.055),rgba(96,34,145,.1)); border: 1px solid rgba(178,72,255,.55); border-radius: 18px; box-shadow: inset 0 0 25px rgba(98,43,144,.18),0 0 16px rgba(135,53,210,.08); box-sizing: border-box; display: grid; gap: 13px; grid-template-columns: 52px 1fr; padding: 16px 14px 15px; position: relative; }
.vipx .review-card::after { color: rgba(162,74,255,.33); content: "”"; font-size: 54px; font-weight: 900; line-height: 1; position: absolute; right: 17px; top: 5px; }
.vipx .avatar { border: 2px solid rgba(214,111,255,.75); border-radius: 50%; box-shadow: 0 0 14px rgba(181,76,255,.34); box-sizing: border-box; height: 52px; overflow: hidden; width: 52px; object-fit: cover; }
.vipx .review-main { min-width: 0; }
.vipx .review-name { display: flex; align-items: center; font-size: 17px; font-weight: 900; gap: 8px; line-height: 1.2; margin-bottom: 8px; padding-right: 20px; color: #fff; }
.vipx .review-tag { background: rgba(155,82,255,.34); border-radius: 12px; color: #d9c1ff; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; height: 22px; max-width: 118px; padding: 0 10px; white-space: nowrap; }
.vipx .review-text { color: hsla(0,0%,100%,.82); font-size: 13px; line-height: 1.62; text-align: justify; }
.vipx .slogan { background: radial-gradient(circle at 92% 22%, rgba(255,214,124,.12), transparent 112px), linear-gradient(135deg,hsla(0,0%,100%,.08),rgba(117,42,171,.18)); border: 1px solid rgba(213,104,255,.62); border-radius: 18px; box-shadow: inset 0 0 24px rgba(202,92,255,.12),0 0 18px rgba(152,58,230,.12); font-size: 16px; font-weight: 800; line-height: 1.58; margin-top: 13px; overflow: hidden; padding: 18px 18px 18px 46px; position: relative; color: #fff; }
.vipx .slogan::before { color: #f8d385; content: "\266a"; font-size: 20px; left: 17px; line-height: 1; position: absolute; text-shadow: 0 0 14px rgba(255,215,124,.58); top: 17px; }
.vipx .slogan-strong { color: #f8d385; text-shadow: 0 0 12px rgba(255,215,124,.5); }
/* —— 会员条款 —— */
.vipx .terms-section { box-sizing: border-box; padding: 23px 20px 24px; }
.vipx .terms-title { color: #fff; font-size: 18px; font-weight: 900; margin-bottom: 14px; }
.vipx .terms-list { color: hsla(0,0%,100%,.64); display: grid; font-size: 12px; gap: 8px; line-height: 1.72; }
.vipx .terms-list > div { padding-left: 12px; position: relative; }
.vipx .terms-list > div::before { background: hsla(0,0%,100%,.46); border-radius: 50%; content: ""; height: 4px; left: 0; position: absolute; top: 9px; width: 4px; }
.vipx .terms-contact-btn { align-items: center; background: hsla(41,89%,75%,.1); border: 1px solid hsla(41,89%,75%,.46); border-radius: 999px; color: #fff; display: flex; font-size: 14px; font-weight: 800; gap: 7px; height: 46px; justify-content: center; margin: 18px -8px 0; padding: 0; width: calc(100% + 16px); cursor: pointer; }
.vipx .terms-contact-icon { flex: 0 0 auto; height: 18px; width: 18px; }
/* —— 底部固定支付条 —— */
.vipx .bottom-bar { background: #0a0514; bottom: 0; box-shadow: 0 -4px 16px rgba(0,0,0,.3); box-sizing: border-box; left: 0; padding: 14px 20px 14px; position: fixed; width: 100%; z-index: 9999; }
.vipx .pay-btn { align-items: center; background: linear-gradient(90deg,#fad98c,#e2a233); border-radius: 25px; border: 0; color: #553400; display: flex; font-size: 18px; font-weight: 700; height: 50px; justify-content: center; position: relative; width: 100%; cursor: pointer; }
.vipx .pay-symbol { font-size: 15px; margin-right: 2px; }
.vipx .expire-tag { align-items: center; background: linear-gradient(90deg,#fdf092,#f5d769); border-radius: 6px; border-bottom-right-radius: 0; box-shadow: 0 2px 4px rgba(0,0,0,.3); color: #333; display: flex; font-size: 11px; padding: 4px 8px; position: absolute; right: -8px; top: -16px; z-index: 10; }
.vipx .expire-icon { font-size: 12px; margin-right: 4px; }
.vipx .bottom-agreement { color: hsla(0,0%,100%,.38); font-size: 11px; line-height: 1.4; margin-top: 8px; text-align: center; }
.vipx .bottom-agreement-link { color: hsla(0,0%,100%,.58); cursor: pointer; }
/* —— 会员条款弹窗 —— */
.vipx .terms-modal-mask { align-items: center; background: rgba(0,0,0,.62); bottom: 0; box-sizing: border-box; display: flex; justify-content: center; left: 0; padding: 24px; position: fixed; right: 0; top: 0; z-index: 100000; }
.vipx .terms-modal-card { background: linear-gradient(180deg,rgba(34,12,52,.98),rgba(13,3,24,.98)); border: 1px solid rgba(213,170,255,.34); border-radius: 18px; box-shadow: 0 18px 48px rgba(0,0,0,.48),inset 0 0 24px rgba(154,80,255,.12); box-sizing: border-box; max-height: 76vh; padding: 20px 18px 18px; width: 100%; }
.vipx .terms-modal-head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.vipx .terms-modal-title { color: #fff; font-size: 18px; font-weight: 900; }
.vipx .terms-modal-close { align-items: center; background: hsla(0,0%,100%,.08); border: 0; border-radius: 50%; color: hsla(0,0%,100%,.72); display: flex; font-size: 24px; height: 32px; justify-content: center; line-height: 1; width: 32px; cursor: pointer; }
.vipx .terms-modal-body { max-height: 45vh; overflow-y: auto; }
.vipx .terms-modal-list { color: hsla(0,0%,100%,.72); display: grid; font-size: 13px; gap: 10px; line-height: 1.72; padding-right: 4px; }
.vipx .terms-modal-list > div { padding-left: 14px; position: relative; }
.vipx .terms-modal-list > div::before { background: rgba(216,189,255,.7); border-radius: 50%; content: ""; height: 4px; left: 0; position: absolute; top: 10px; width: 4px; }
.vipx .terms-item-index { color: #b986ff; font-weight: 700; margin-right: 2px; }
.vipx .terms-modal-confirm { background: linear-gradient(90deg,#fad98c,#e2a233); border: 0; border-radius: 999px; color: #553400; font-size: 15px; font-weight: 900; height: 44px; line-height: 44px; margin-top: 18px; padding: 0; width: 100%; cursor: pointer; }
/* —— 「添加到桌面」教程弹窗步骤 —— */
.pwa-steps { display: grid; gap: 14px; padding: 6px 2px 10px; }
.pwa-step { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; line-height: 1.65; color: #e8eaf2; }
.pwa-step i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #a24aff, #6a11cb); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.pwa-step b { color: #f8d385; font-weight: 800; }
.cell-icon.pwa-icon img { padding: 2px; box-sizing: border-box; }
/* ============================================================
练习页 dashboard / 练习记录 record —— 版式还原原版分包（rpx→px）
============================================================ */
/* —— dashboard —— */
.dashboard-page{background-color:#f8f9fd;box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100vh}
.header-card-wrap{background:linear-gradient(180deg,#2a1359,#3d1c82);box-sizing:border-box;-webkit-flex-shrink:0;flex-shrink:0;padding-bottom:24px;padding-left:16px;padding-right:16px}
.custom-nav-row{box-sizing:border-box;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:12px;position:relative;width:100%}
.custom-nav-row, .nav-back-btn{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.nav-back-btn{height:32px;-webkit-justify-content:flex-start;justify-content:flex-start;width:32px;z-index:10}
.nav-back-btn:active{opacity:.7}
.icon-back-chevron{border-bottom:2px solid #fff;border-left:2px solid #fff;height:9px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:9px}
/* 绝对定位居中只对 dashboard 的自绘导航行生效（该处标题需压在返回键之上）。
此前这条规则是全局的，泄漏到 .lv-page（歌曲列表 / 练唱页）的
.nav-title-box 内，导致标题与副标题完全重叠（用户反馈「顶上的字重叠」）。 */
.dashboard-page .nav-title-text{color:#fff;font-size:17px;font-weight:600;left:50%;letter-spacing:0.5px;pointer-events:none;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.nav-right-placeholder{height:32px;width:32px}
.song-info-card{background:transparent;border:none;border-radius:0;box-shadow:none;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:12px;overflow:visible;padding:0;position:relative}
.song-main-row{box-sizing:border-box;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;justify-content:space-between;width:100%}
.singer-avatar-box, .song-main-row{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.singer-avatar-box{background:#25124a;border:1px solid hsla(0,0%,100%,.2);border-radius:12px;-webkit-flex-shrink:0;flex-shrink:0;height:50px;-webkit-justify-content:center;justify-content:center;overflow:hidden;width:50px}
.singer-avatar{display:block;height:100%;width:100%}
.singer-avatar-initial{-webkit-align-items:center;align-items:center;background:linear-gradient(135deg,#7c3aed,#4c1d95);border-radius:12px;display:-webkit-flex;display:flex;height:100%;-webkit-justify-content:center;justify-content:center;width:100%}
.initial-text{color:#fff;font-size:22px;font-weight:700;line-height:1;text-shadow:0 1px 5px rgba(0,0,0,.4)}
.song-title-col{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:4px;-webkit-justify-content:center;justify-content:center;margin-left:10px;margin-right:6px;min-width:0}
.song-title{color:#fff;font-size:17px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-link-row{-webkit-align-items:center;align-items:center;-webkit-align-self:flex-start;align-self:flex-start;cursor:pointer;display:-webkit-inline-flex;display:inline-flex;gap:3px;padding:1px 0}
.artist-link-row:active{opacity:.7}
.artist-name-text{color:hsla(0,0%,100%,.85);font-size:12px;font-weight:500;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.artist-arrow{color:hsla(0,0%,100%,.7);font-size:13px;font-weight:700;line-height:1}
.header-action-group{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-shrink:0;flex-shrink:0;gap:7px}
.circle-btn{-webkit-align-items:center!important;align-items:center!important;background:hsla(0,0%,100%,.15)!important;border:1px solid hsla(0,0%,100%,.2)!important;border-radius:50%!important;box-sizing:border-box!important;display:-webkit-flex!important;display:flex!important;-webkit-flex-shrink:0!important;flex-shrink:0!important;height:32px!important;-webkit-justify-content:center!important;justify-content:center!important;line-height:1!important;margin:0!important;max-height:32px!important;max-width:32px!important;min-height:32px!important;min-width:32px!important;padding:0!important;width:32px!important}
.circle-btn::after{border:none!important}
.btn-share-reset{line-height:1!important}
.action-btn-img{display:block;height:16px;width:16px}
.acappella-btn{-webkit-align-items:center;align-items:center;background:linear-gradient(135deg,#9061f9,#7e3af2);border:1px solid hsla(0,0%,100%,.3);border-radius:15px;box-shadow:0 2px 7px rgba(126,58,242,.45);box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-flex-shrink:0;flex-shrink:0;gap:4px;height:30px;-webkit-justify-content:center;justify-content:center;padding:0 10px 0 8px;transition:all .2s ease}
.acappella-btn:active{opacity:.85;-webkit-transform:scale(.96);transform:scale(.96)}
.acappella-icon{display:block;-webkit-flex-shrink:0;flex-shrink:0;height:12px;width:12px}
.acappella-btn-text{color:#fff;font-size:12px;font-weight:600;letter-spacing:1px;line-height:1}
.progress-board{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:hsla(0,0%,100%,.12);border:1px solid hsla(0,0%,100%,.16);border-radius:12px;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:6px;padding:11px 12px}
.progress-stats-row{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between}
.progress-label{color:hsla(0,0%,100%,.85);font-size:12px}
.progress-num, .progress-percent{color:#fff;font-family:DIN Alternate,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700}
.progress-percent{font-size:14px}
.progress-bar-track{background:hsla(0,0%,100%,.2);border-radius:7px;height:7px;overflow:hidden;width:100%}
.progress-bar-fill{background:#fff;border-radius:7px;box-shadow:0 0 8px hsla(0,0%,100%,.5);height:100%;transition:width .4s ease}
.progress-bottom-row{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin-top:2px}
.encourage-text{color:hsla(0,0%,100%,.85);font-size:10px}
.full-lyrics-entry-link{-webkit-align-items:center;align-items:center;background:hsla(0,0%,100%,.18);border:1px solid hsla(0,0%,100%,.28);border-radius:10px;cursor:pointer;display:-webkit-inline-flex;display:inline-flex;gap:2px;padding:3px 9px;transition:all .2s ease}
.full-lyrics-entry-link:active{background:hsla(0,0%,100%,.26);opacity:.8;-webkit-transform:scale(.96);transform:scale(.96)}
.full-lyrics-text{color:#fff;font-size:11px;font-weight:500;line-height:1}
.link-arrow{color:#fff;font-size:12px;font-weight:700;line-height:1}
.filter-sticky-bar{background:#fff;border-bottom:1px solid #eceef4;border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -2px 6px rgba(0,0,0,.03);-webkit-flex-shrink:0;flex-shrink:0;-webkit-justify-content:space-between;justify-content:space-between;margin-top:-12px;padding:8px 16px 6px;position:relative;z-index:10}
.filter-sticky-bar, .filter-tabs-box{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.filter-tabs-box{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9px;gap:4px;padding:3px}
.tab-item{border-radius:7px;color:#6b7280;font-size:11px;padding:4px 9px;transition:all .2s ease}
.tab-item-active{background:#6355f6;box-shadow:0 2px 6px rgba(99,85,246,.35);color:#fff;font-weight:700}
.dedup-toggle-box{-webkit-align-items:center;align-items:center;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9px;display:-webkit-flex;display:flex;gap:5px;padding:5px 9px}
.dedup-label{color:#6b7280;font-size:11px}
.dedup-switch{background:#d1d5db;border-radius:16px;height:16px;position:relative;transition:background .2s ease;width:28px}
.switch-knob{background:#fff;border-radius:50%;height:12px;left:2px;position:absolute;top:2px;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;width:12px}
.switch-on{background:#6355f6}
.switch-on .switch-knob{-webkit-transform:translateX(12px);transform:translateX(12px)}
.sentence-list{box-sizing:border-box;-webkit-flex:1;flex:1;overflow-y:auto;padding:10px 16px}
.sentence-card{-webkit-align-items:center;align-items:center;background:#fff;border:1px solid #eceef4;border-radius:12px;box-shadow:0 2px 8px rgba(26,29,43,.04);box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:8px;padding:12px;transition:background .1s ease,border-color .1s ease,-webkit-transform .1s ease;transition:transform .1s ease,background .1s ease,border-color .1s ease;transition:transform .1s ease,background .1s ease,border-color .1s ease,-webkit-transform .1s ease}
.sentence-card:active{background:#f9fafb;border-color:#d1d5db;-webkit-transform:scale(.99);transform:scale(.99)}
.card-left{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:row;flex-direction:row;gap:11px;min-width:0}
.line-index-num{box-sizing:border-box;color:#d1d5db;display:block;-webkit-flex-shrink:0;flex-shrink:0;font-family:DIN Alternate,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:19px;font-style:italic;font-weight:800;letter-spacing:-0.5px;line-height:1;text-align:center;transition:color .2s ease;width:28px}
.num-practicing{color:#6355f6!important}
.card-text-col{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:0;-webkit-justify-content:center;justify-content:center;min-width:0}
.card-raw-text{color:#1a1d2b;display:block;font-size:14px;font-weight:700;letter-spacing:.25px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-practice-stats{color:#9ca3af;display:block;font-size:10px;line-height:1;margin-top:3px}
.num-highlight{color:#6b7280;font-family:DIN Alternate,monospace;font-weight:700}
.card-right{display:-webkit-flex;display:flex;-webkit-flex-direction:row;flex-direction:row;gap:8px;margin-left:6px}
.card-right, .status-tag{-webkit-align-items:center;align-items:center;-webkit-flex-shrink:0;flex-shrink:0}
.status-tag{border-radius:12px;box-sizing:border-box;display:-webkit-inline-flex;display:inline-flex;gap:3px;height:24px;-webkit-justify-content:center;justify-content:center;padding:0 8px 0 10px}
.status-tag-text{font-size:11px;font-weight:500}
.status-tag-text, .tag-arrow{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;line-height:1}
.tag-arrow{font-size:12px;font-weight:600;margin-top:-1px;opacity:.85}
.tag-practicing{background:#ecfdf5;border:1px solid rgba(16,185,129,.25);color:#059669}
.tag-unstarted{background:#f3f4f6;border:1px solid #e5e7eb;color:#9ca3af}
.empty-state{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px;-webkit-justify-content:center;justify-content:center;padding:40px 0}
.empty-icon{font-size:32px;opacity:.4}
.empty-text{color:#9ca3af;font-size:12px}
0%{opacity:.45}
50%{opacity:.85}
100%{opacity:.45}
0%{opacity:.45}
50%{opacity:.85}
100%{opacity:.45}
.skeleton-dark-pulse{background:hsla(0,0%,100%,.16)}
.skeleton-dark-pulse, .skeleton-light-pulse{-webkit-animation:skeletonPulse 1.4s ease-in-out infinite;animation:skeletonPulse 1.4s ease-in-out infinite}
.skeleton-light-pulse{background:#e8ebf2}
.avatar-skeleton-placeholder{border-radius:12px;height:100%;width:100%}
.title-skeleton-bar{border-radius:5px;height:19px;margin-bottom:6px;width:140px}
.artist-skeleton-bar{border-radius:4px;height:13px;width:80px}
.skeleton-board{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-justify-content:space-between;justify-content:space-between;min-height:70px}
.progress-skeleton-top{border-radius:4px;height:13px;width:45%}
.progress-skeleton-track{border-radius:3px;height:6px;margin:9px 0;width:100%}
.progress-skeleton-bottom{border-radius:3px;height:11px;width:65%}
.skeleton-list-container{background-color:#f8f9fd;box-sizing:border-box;-webkit-flex:1;flex:1;overflow:hidden;padding:0 16px}
.skeleton-filter-bar{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;padding:12px 0 8px}
.skeleton-filter-pills{border-radius:15px;height:30px;width:220px}
.skeleton-filter-switch{border-radius:13px;height:26px;width:60px}
.sentence-skeleton-card{-webkit-align-items:center;align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(15,23,42,.04);display:-webkit-flex;display:flex;gap:10px;margin-bottom:10px;padding:14px 12px}
.skeleton-num{border-radius:6px;-webkit-flex-shrink:0;flex-shrink:0;height:24px;width:24px}
.skeleton-lines{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:7px}
.skeleton-line-main{border-radius:4px;height:16px;width:72%}
.skeleton-line-sub{border-radius:3px;height:11px;width:42%}
.skeleton-status{border-radius:7px;-webkit-flex-shrink:0;flex-shrink:0;height:22px;width:52px}
/* —— record —— */
.record-page{background-color:#f8f9fd}
.record-page{box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;height:100vh}
.header-card-wrap{background:linear-gradient(180deg,#2a1359,#3d1c82);box-shadow:0 4px 16px rgba(42,19,89,.25);-webkit-flex-shrink:0;flex-shrink:0;padding-bottom:14px;padding-left:16px;padding-right:16px;position:relative;z-index:10}
.custom-nav-row{-webkit-justify-content:space-between;justify-content:space-between;margin-bottom:8px;position:relative}
.custom-nav-row, .nav-back-btn{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.nav-back-btn{background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.2);border-radius:50%;cursor:pointer;height:32px;-webkit-justify-content:center;justify-content:center;transition:all .2s ease;width:32px}
.nav-back-btn:active{background:hsla(0,0%,100%,.28);-webkit-transform:scale(.95);transform:scale(.95)}
.icon-back-chevron{border-bottom:2px solid #fff;border-left:2px solid #fff;height:8px;margin-left:3px;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:8px}
.nav-title-text{color:#fff;font-size:16px;font-weight:700;letter-spacing:0.5px}
.nav-right-placeholder{height:32px;width:32px}
.song-brief-card{-webkit-justify-content:space-between;justify-content:space-between;margin-top:4px}
.song-brief-card, .song-brief-left{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.song-brief-left{-webkit-flex:1;flex:1;gap:10px;min-width:0}
.singer-avatar-box{-webkit-align-items:center;align-items:center;background:hsla(0,0%,100%,.15);border:1px solid hsla(0,0%,100%,.25);border-radius:10px;display:-webkit-flex;display:flex;-webkit-flex-shrink:0;flex-shrink:0;height:42px;-webkit-justify-content:center;justify-content:center;overflow:hidden;width:42px}
.singer-avatar{height:100%;width:100%}
.singer-avatar-initial{-webkit-align-items:center;align-items:center;background:#6355f6;display:-webkit-flex;display:flex;height:100%;-webkit-justify-content:center;justify-content:center;width:100%}
.initial-text{color:#fff;font-size:18px;font-weight:700}
.avatar-skeleton{background:hsla(0,0%,100%,.2);height:100%;width:100%}
.song-info-col{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:2px;min-width:0}
.song-title-text{color:#fff;font-size:16px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-artist-text{color:hsla(0,0%,100%,.78);font-size:11px;line-height:1.2}
.stat-badge-col{-webkit-align-items:flex-end;align-items:flex-end;-webkit-flex-direction:column;flex-direction:column;-webkit-flex-shrink:0;flex-shrink:0;gap:1px}
.stat-badge-col, .stat-main-row{display:-webkit-flex;display:flex}
.stat-main-row{-webkit-align-items:baseline;align-items:baseline;gap:3px}
.stat-label{color:hsla(0,0%,100%,.82);font-size:11px}
.stat-count-highlight{color:#fcd34d;font-family:DIN Alternate,-apple-system,BlinkMacSystemFont,sans-serif;font-size:19px;font-weight:800;line-height:1}
.stat-total-text{color:hsla(0,0%,100%,.82);font-size:11px}
.stat-duration-text{color:hsla(0,0%,100%,.68);font-family:DIN Alternate,monospace;font-size:10px}
.record-scroll-body{box-sizing:border-box;display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:12px;overflow-y:auto;padding:12px 16px 16px}
.tab-switch-box{background:#fff;border:1px solid #eceef4;border-radius:14px;box-shadow:0 2px 8px rgba(26,29,43,.04);margin-bottom:10px;padding:4px}
.tab-btn, .tab-switch-box{display:-webkit-flex;display:flex;gap:5px}
.tab-btn{-webkit-align-items:center;align-items:center;border-radius:11px;color:#6b7280;cursor:pointer;-webkit-flex:1;flex:1;font-size:12px;font-weight:500;height:36px;-webkit-justify-content:center;justify-content:center;transition:all .25s ease}
.tab-btn:active{-webkit-transform:scale(.98);transform:scale(.98)}
.tab-btn-active{background:linear-gradient(135deg,#6c52ff,#5234ec);box-shadow:0 3px 10px rgba(108,82,255,.35);color:#fff!important;font-weight:700}
.tab-flat-icon{-webkit-filter:brightness(0) opacity(.45);filter:brightness(0) opacity(.45);-webkit-flex-shrink:0;flex-shrink:0;height:14px;transition:all .25s ease;width:14px}
.tab-btn-active .tab-flat-icon{-webkit-filter:none;filter:none;opacity:1}
.tab-badge{font-family:DIN Alternate,monospace;font-size:11px;opacity:.9}
.pill-tag-practicing{background-color:#ecfdf5!important;border:1px solid rgba(16,185,129,.25)!important;border-radius:9999px!important;color:#059669!important;font-weight:700!important}
.pill-tag-practicing, .pill-tag-unpracticed{box-sizing:border-box;transition:all .2s ease}
.pill-tag-unpracticed{background-color:#f3f4f6!important;border:1px solid #e5e7eb!important;border-radius:9999px!important;color:#9ca3af!important;font-weight:500!important}
0%{box-shadow:0 0 0 0 rgba(16,185,129,.6);-webkit-transform:scale(1.05);transform:scale(1.05)}
70%{box-shadow:0 0 0 8px rgba(16,185,129,0);-webkit-transform:scale(1.08);transform:scale(1.08)}
100%{box-shadow:0 0 0 0 rgba(16,185,129,0);-webkit-transform:scale(1.05);transform:scale(1.05)}
0%{box-shadow:0 0 0 0 rgba(16,185,129,.6);-webkit-transform:scale(1.05);transform:scale(1.05)}
70%{box-shadow:0 0 0 8px rgba(16,185,129,0);-webkit-transform:scale(1.08);transform:scale(1.08)}
100%{box-shadow:0 0 0 0 rgba(16,185,129,0);-webkit-transform:scale(1.05);transform:scale(1.05)}
.is-active-playing{-webkit-animation:pulseGreenAura 1.4s cubic-bezier(.4,0,.2,1) infinite;animation:pulseGreenAura 1.4s cubic-bezier(.4,0,.2,1) infinite;border-color:#059669!important;position:relative;z-index:5}
.calendar-card{background:#fff;border:1px solid #eceef4;border-radius:18px;box-shadow:0 3px 12px rgba(26,29,43,.05);-webkit-flex-direction:column;flex-direction:column;gap:10px;margin-bottom:12px;padding:15px 14px 12px}
.calendar-card, .calendar-header{display:-webkit-flex;display:flex}
.calendar-header{-webkit-align-items:center;align-items:center;border-bottom:1px solid #f3f4f6;-webkit-justify-content:space-between;justify-content:space-between;padding-bottom:8px}
.calendar-title-col{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:3px}
.calendar-title-box{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;gap:6px}
.title-green-dot{background:#059669;border-radius:50%;height:7px;width:7px}
.calendar-title-text{color:#1a1d2b;font-size:14px;font-weight:700}
.calendar-subhint-text{color:#9ca3af;font-size:10px;line-height:1.2;margin-left:13px}
.dedup-toggle-box{-webkit-align-items:center;align-items:center;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:9px;cursor:pointer;display:-webkit-flex;display:flex;gap:5px;padding:4px 8px;transition:all .2s ease}
.dedup-toggle-box:active{opacity:.85;-webkit-transform:scale(.97);transform:scale(.97)}
.dedup-label{color:#6b7280;font-size:11px;font-weight:500;line-height:1}
.dedup-switch{background:#d1d5db;border-radius:15px;height:15px;position:relative;transition:background .2s ease;width:27px}
.switch-knob{background:#fff;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15);height:11px;left:2px;position:absolute;top:2px;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease;width:11px}
.switch-on{background:#6355f6}
.switch-on .switch-knob{-webkit-transform:translateX(12px);transform:translateX(12px)}
/* 日历网格：6 列必须用 minmax(0,1fr)。
之前的 repeat(6,1fr) 中，1fr 的最小尺寸是内容的 min-content
（.pill-tag 宽 46px + button 默认内边距 ≈ 58px），6 列合计超出容器宽度，
导致日历项跑到视口外（实测 item right=452 超出屏宽 390）。
同时清掉 button 的默认内边距，并让 .pill-tag 宽度自适应。 */
.calendar-grid{display:grid;gap:10px 7px;grid-template-columns:repeat(6,minmax(0,1fr));padding:5px 0}
.calendar-item{cursor:pointer;-webkit-flex-direction:column;flex-direction:column;padding:0;border:0;background:transparent;min-width:0;overflow:visible}
.calendar-item, .pill-tag{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}
.pill-tag{font-family:DIN Alternate,-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px;height:28px;letter-spacing:0;width:100%;max-width:46px;min-width:0;box-sizing:border-box;padding:0 4px}
.pill-num-text{line-height:1}
.calendar-legend-row{border-top:1px solid #f3f4f6;-webkit-justify-content:space-between;justify-content:space-between;padding-top:8px}
.calendar-legend-row, .legend-left-group{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.legend-left-group{gap:12px}
.legend-item{gap:4px}
.legend-item, .legend-pill-sample{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.legend-pill-sample{border-radius:50%!important;height:16px;-webkit-justify-content:center;justify-content:center;width:16px}
.legend-check-icon{font-size:9px;line-height:1}
.legend-label-practiced{color:#059669;font-size:11px;font-weight:600}
.legend-label-unpracticed{color:#9ca3af;font-size:11px}
.current-tab-tip{color:#9ca3af;font-size:10px}
.now-playing-card{background:linear-gradient(135deg,rgba(236,253,245,.95),rgba(204,251,241,.9));border:1px solid rgba(16,185,129,.35);border-radius:18px;box-shadow:0 4px 14px rgba(16,185,129,.12);display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:8px;margin-bottom:12px;padding:14px 15px 12px;transition:all .3s ease}
.card-status-bar{-webkit-justify-content:space-between;justify-content:space-between}
.card-status-bar, .card-status-right{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.card-status-right{gap:8px}
.card-collapse-btn{-webkit-align-items:center;align-items:center;background:rgba(5,150,105,.12);border-radius:50%;cursor:pointer;display:-webkit-flex;display:flex;height:22px;-webkit-justify-content:center;justify-content:center;transition:all .2s ease;width:22px}
.card-collapse-btn:active{background:rgba(5,150,105,.24);-webkit-transform:scale(.92);transform:scale(.92)}
.collapse-icon-img{display:block;height:12px;width:12px}
.card-badge-group{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;gap:7px}
.card-sentence-badge{background:#059669;border-radius:9999px;color:#fff;font-family:DIN Alternate,sans-serif;font-size:11px;font-weight:700;line-height:1;padding:3px 9px}
.card-record-tag{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;font-size:10px;gap:3px;line-height:1;padding:3px 8px}
.record-tag-icon{font-size:11px}
.record-tag-name{font-weight:600}
.record-tag-duration{font-family:DIN Alternate,monospace;font-size:9px;opacity:.85}
.playing-waves-box{-webkit-align-items:flex-end;align-items:flex-end;display:-webkit-flex;display:flex;gap:2px;height:16px;opacity:0;transition:opacity .2s ease}
.waves-active{opacity:1!important}
.wave-bar{background:#059669;border-radius:2px;height:3px;width:3px}
.waves-active .bar-1{-webkit-animation:waveJump .8s ease-in-out infinite alternate;animation:waveJump .8s ease-in-out infinite alternate}
.waves-active .bar-2{-webkit-animation:waveJump .7s ease-in-out .2s infinite alternate;animation:waveJump .7s ease-in-out .2s infinite alternate}
.waves-active .bar-3{-webkit-animation:waveJump .9s ease-in-out .4s infinite alternate;animation:waveJump .9s ease-in-out .4s infinite alternate}
.waves-active .bar-4{-webkit-animation:waveJump .6s ease-in-out .1s infinite alternate;animation:waveJump .6s ease-in-out .1s infinite alternate}
0%{height:4px}
100%{height:15px}
0%{height:4px}
100%{height:15px}
.card-lyrics-body{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:4px;padding:3px 0}
.card-jyutping{color:#047857;font-family:DIN Alternate,monospace;font-size:12px;font-weight:600;letter-spacing:0.5px;line-height:1.25}
.card-raw-lyric{color:#1a1d2b;font-size:17px;font-weight:700;letter-spacing:0.5px;line-height:1.35}
.card-homophone{color:#4b5563;font-size:12px;line-height:1.25}
.card-footer-actions{border-top:1px solid rgba(16,185,129,.2);-webkit-justify-content:space-between;justify-content:space-between;padding-top:7px}
.card-action-btn, .card-footer-actions{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex}
.card-action-btn{color:#047857;cursor:pointer;font-size:12px;font-weight:700;gap:4px}
.card-action-btn:active{opacity:.75}
.action-icon{font-size:13px;line-height:1}
.card-action-link{-webkit-align-items:center;align-items:center;color:#6b7280;cursor:pointer;display:-webkit-flex;display:flex;font-size:11px;gap:2px}
.card-action-link:active{color:#1a1d2b}
.link-arrow{font-size:13px;font-weight:700;line-height:1}
.empty-bottom-placeholder{-webkit-flex-shrink:0;flex-shrink:0;height:220px;transition:height .25s ease}
.empty-bottom-placeholder.placeholder-compact{height:90px!important}
.bottom-floating-wrapper{bottom:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;left:0;pointer-events:none;position:fixed;right:0;z-index:100}
.bottom-play-bar, .collapsed-expand-bar, .floating-lyrics-card-box{pointer-events:auto}
.floating-lyrics-card-box{box-sizing:border-box;padding:0 12px 7px;-webkit-transform-origin:bottom center;transform-origin:bottom center;transition:all .3s cubic-bezier(.25,.8,.25,1)}
.floating-lyrics-card-box .now-playing-card{box-shadow:0 6px 18px rgba(16,185,129,.16),0 -2px 10px rgba(0,0,0,.04);margin-bottom:0}
.floating-lyrics-card-box.lyrics-card-collapsed{display:none}
.collapsed-expand-bar{-webkit-align-items:center;align-items:center;background:#ecfdf5;border:1px solid rgba(16,185,129,.35);border-radius:9999px;box-shadow:0 2px 8px rgba(16,185,129,.15);cursor:pointer;display:-webkit-flex;display:flex;gap:6px;margin:0 16px 6px auto;padding:4px 10px;transition:all .2s ease}
.collapsed-expand-bar:active{opacity:.85;-webkit-transform:scale(.96);transform:scale(.96)}
.expand-label{color:#059669;font-size:11px;font-weight:600;max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.expand-icon{color:#059669;font-size:13px;font-weight:700;line-height:1}
.bottom-play-bar{-webkit-align-items:center;align-items:center;background:#fff;border-top:1px solid #eceef4;box-shadow:0 -4px 14px rgba(26,29,43,.08);display:-webkit-flex;display:flex;gap:10px;-webkit-justify-content:space-between;justify-content:space-between;padding:10px 16px calc(10px + env(safe-area-inset-bottom, 10px))}
.play-status-col{display:-webkit-flex;display:flex;-webkit-flex:1;flex:1;-webkit-flex-direction:column;flex-direction:column;gap:2px;min-width:0}
.status-title-row{-webkit-align-items:center;align-items:center;display:-webkit-flex;display:flex;gap:6px}
.play-status-main{color:#1a1d2b;font-size:13px;font-weight:700}
.play-status-sub{color:#9ca3af;font-size:11px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.continuous-play-btn{-webkit-align-items:center;align-items:center;border-radius:12px;color:#fff;cursor:pointer;display:-webkit-flex;display:flex;-webkit-flex-shrink:0;flex-shrink:0;gap:6px;height:42px;-webkit-justify-content:center;justify-content:center;padding:0 18px;transition:all .25s ease}
.continuous-play-btn:active{opacity:.9;-webkit-transform:scale(.99);transform:scale(.99)}
.btn-pause, .btn-play{background:linear-gradient(135deg,#059669,#047857);box-shadow:0 4px 12px rgba(5,150,105,.35)}
.continuous-play-btn .btn-flat-icon{-webkit-flex-shrink:0;flex-shrink:0;height:16px;width:16px}
.btn-play-text{font-size:14px;font-weight:700;letter-spacing:.2.5px;line-height:1}
/* 页面根（浅色主题） */
.dashboard-page { background: #f8f9fd; color: #1a1d2b; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; height: auto; }
.record-page { background: #f8f9fd; color: #1a1d2b; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; height: auto; }
/* 浅色页面上的返回箭头/标题要用深色（.icon-back-chevron 的白色版是 dashboard 深色头专用） */
.record-page .icon-back-chevron { border-bottom-color: #1a1d2b; border-left-color: #1a1d2b; }
.record-page .nav-title-text { color: #1a1d2b; }
.dashboard-page .filter-sticky-bar { margin-top: -12px; }
.record-scroll-body { padding-bottom: 150px; }
.rec-bottom-space { flex-shrink: 0; height: 220px; transition: height .25s ease; }
.rec-bottom-space.placeholder-compact { height: 80px; }
.dashboard-page .sentence-list { padding-bottom: 30px; }
/* ============ iOS 添加到桌面(standalone)：内容避让状态栏（safe-area 修复顶部雾化/被压） ============ */
#navbar { padding-top: calc(6px + env(safe-area-inset-top)); }
.header-card-wrap { padding-top: env(safe-area-inset-top); }
.vipx .nav-bar { padding-top: env(safe-area-inset-top); }
/* ============ 单句精练页：1:1 对齐原版 sentence-page（浅色主题） ============ */
.sentence-page { background: #f8f9fd; color: #1a1d2b; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; }
.sentence-page .custom-header-wrap { background: #fff; box-sizing: border-box; flex-shrink: 0; width: 100%; position: relative; padding-top: env(safe-area-inset-top); }
/* 状态栏区域垫一条深紫，保证白字状态栏在白色头部上可读（浏览器内 env=0 时不可见） */
.sentence-page .custom-header-wrap::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: #2a1359; }
.sentence-page .custom-nav-row { align-items: center; display: flex; justify-content: space-between; position: relative; width: 100%; padding: 10px 16px; }
.sentence-page .nav-back-btn { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; height: 32px; justify-content: flex-start; width: 32px; z-index: 10; }
.sentence-page .nav-back-btn:active { opacity: .6; }
.sentence-page .icon-back-chevron { border-bottom: 2px solid #1a1d2b; border-left: 2px solid #1a1d2b; height: 10px; margin-left: 2px; transform: rotate(45deg); width: 10px; }
.sentence-page .nav-title-text { color: #1a1d2b; font-size: 17px; font-weight: 600; left: 50%; letter-spacing: .5px; pointer-events: none; position: absolute; transform: translateX(-50%); }
.sentence-page .nav-right-placeholder { height: 32px; width: 32px; }
.sentence-page .top-nav-bar { align-items: center; background: #fff; border-bottom: 1px solid #eceef4; display: flex; flex-shrink: 0; gap: 10px; justify-content: space-between; padding: 8px 16px; }
.sentence-page .sentence-index-badge { background: #ede9fe; border: 1px solid rgba(99,85,246,.25); border-radius: 6px; color: #6355f6; flex-shrink: 0; font-size: 13px; font-weight: 700; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.sentence-page .mini-progress-track { background: #e5e7eb; border-radius: 6px; flex: 1; height: 6px; overflow: hidden; }
.sentence-page .mini-progress-fill { background: #6355f6; border-radius: 6px; height: 100%; transition: width .3s ease; }
.sentence-page .settings-btn { align-items: center; background: transparent; border: 0; border-radius: 50%; cursor: pointer; display: flex; height: 36px; justify-content: center; margin: -8px -8px -8px 0; padding: 0; transition: all .2s ease; width: 36px; }
.sentence-page .settings-btn:active { background: rgba(99,85,246,.08); }
.sentence-page .settings-btn img { height: 22px; width: 22px; }
.sentence-page .main-content { box-sizing: border-box; flex: 1; overflow-y: auto; padding: 12px 16px calc(24px + env(safe-area-inset-bottom) + 76px); }
.sentence-page .practice-tips-marquee { align-items: center; box-sizing: border-box; display: flex; height: 22px; justify-content: center; margin-bottom: 8px; margin-top: -4px; overflow: hidden; width: 100%; }
.sentence-page .practice-tip-text { color: #8e8e93; font-size: 12px; line-height: 22px; max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.sentence-page .lyric-focus-card { background: #fff; border: 1.5px solid #6355f6; border-radius: 16px; box-shadow: 0 8px 20px rgba(99,85,246,.08); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; margin-bottom: 16px; padding: 16px 14px; text-align: center; }
.sentence-page .card-top-bar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 6px; width: 100%; }
.sentence-page .homophone-toggle-box { align-items: center; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; display: flex; gap: 5px; padding: 3px 7px; transition: all .2s ease; }
.sentence-page .homophone-toggle-box:active { background: #e5e7eb; }
.sentence-page .homophone-toggle-label { color: #6b7280; font-size: 10px; font-weight: 500; }
.sentence-page .homophone-toggle-box .prac-switch { background: #d1d5db; height: 18px; width: 32px; }
.sentence-page .homophone-toggle-box .prac-switch i { height: 14px; left: 2px; top: 2px; width: 14px; }
.sentence-page .homophone-toggle-box .prac-switch.on { background: #6355f6; }
.sentence-page .homophone-toggle-box .prac-switch.on i { left: 16px; }
.sentence-page .card-action-group { align-items: center; display: flex; gap: 12px; }
.sentence-page .card-icon-item { align-items: center; display: flex; flex-direction: column; gap: 2px; }
.sentence-page .card-icon-btn { background: #ede9fe; border: 0; border-radius: 50%; box-sizing: border-box; cursor: pointer; display: flex; height: 29px; justify-content: center; transition: all .2s ease; width: 29px; padding: 0; }
.sentence-page .card-icon-btn:active { background: #ddd6fe; transform: scale(.92); }
.sentence-page .card-icon-btn img { height: 16px; width: 16px; }
.sentence-page .card-icon-label { color: #6b7280; font-size: 10px; }
/* 逐句精练页逐字块：1:1 对齐原版 sentence/index.wxss
（汉字/谐音 1em 定格子，粤拼 .36em 不超字；播放中的字底部靛蓝滑动线） */
.sentence-page .char-container { align-items: flex-start; column-gap: calc(var(--fs, 28px) * .25); display: flex; flex-wrap: wrap; justify-content: center; padding: 12px 0; row-gap: calc(var(--fs, 28px) * .36); width: 100%; }
.sentence-page .char-container.no-homo .homophone-row { display: none; }
.sentence-page .char-item { align-items: center; cursor: pointer; display: flex; flex-direction: column; position: relative; width: calc(var(--fs, 28px) * 1.04); flex: 0 0 auto; }
.sentence-page .char-item:active .original-char { color: #6355f6; }
/* 播放中的字：粤拼+汉字变靛蓝，汉字底部滑动线（原版 pronunciationUnderlineFill） */
.sentence-page .char-item.is-pronouncing .jyutping-text,
.sentence-page .char-item.is-pronouncing .original-char { color: #6355f6; text-shadow: 0 0 12px rgba(99,85,246,.4); }
.sentence-page .char-item.is-pronouncing .original-char::after {
content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
border-radius: 999px; background: linear-gradient(90deg, #6355f6, #a5b4fc);
box-shadow: 0 0 8px rgba(99,85,246,.45);
animation: pronunciationUnderlineFill .55s linear forwards;
}
.sentence-page .char-item.space-char { width: calc(var(--fs, 28px) * .36); }
.sentence-page .char-item.jp-tight .jyutping-text { font-size: calc(var(--fs, 28px) * .3); letter-spacing: -.4px; }
.sentence-page .jyutping-text { color: #6355f6; font-size: calc(var(--fs, 28px) * .36); height: calc(var(--fs, 28px) * .45); line-height: 1; margin-bottom: 4px; text-align: center; text-transform: lowercase; max-width: 100%; overflow: hidden; white-space: nowrap; }
.sentence-page .jyutping-tone { font-size: .78em; vertical-align: super; }
.sentence-page .original-char { color: #1a1d2b; font-size: var(--fs, 28px); font-weight: 700; line-height: 1.15; margin-bottom: 4px; position: relative; max-width: 100%; }
.sentence-page .homophone-row { display: flex; justify-content: center; width: 100%; }
.sentence-page .homophone-text { color: #7c3aed; font-size: var(--fs, 28px); font-weight: 700; line-height: 1.15; max-width: 100%; }
.sentence-page .card-bottom-tools { align-items: center; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-between; margin-top: 6px; padding-top: 12px; width: 100%; }
.sentence-page .font-size-adjuster { align-items: center; background: #f3f4f6; border-radius: 7px; display: flex; gap: 5px; padding: 3px 8px; }
.sentence-page .tool-label { color: #6b7280; font-size: 10px; }
.sentence-page .adjust-btn { align-items: center; background: #fff; border: 0; border-radius: 50%; color: #6355f6; cursor: pointer; display: flex; font-size: 14px; font-weight: 700; height: 22px; justify-content: center; padding: 0; width: 22px; }
.sentence-page .font-size-val { color: #1a1d2b; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 18px; text-align: center; }
.sentence-page .stepper-group { align-items: center; display: flex; gap: 8px; }
.sentence-page .stepper-btn { background: #ede9fe; border: 0; border-radius: 9px; color: #6355f6; cursor: pointer; font-size: 12px; font-weight: 600; padding: 7px 12px; }
.sentence-page .stepper-btn:active { background: #ddd6fe; }
.sentence-page .section-container { margin-bottom: 14px; }
.sentence-page .section-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; padding: 0 2px; }
.sentence-page .section-title { color: #1a1d2b; font-size: 14px; font-weight: 700; }
.sentence-page .section-more-btn { align-items: center; color: #9ca3af; cursor: pointer; display: inline-flex; font-size: 12px; gap: 2px; padding: 2px 4px; transition: all .2s ease; }
.sentence-page .section-more-btn:active { opacity: .65; }
.sentence-page .section-more-arrow { color: #c4c8d4; }
.sentence-page .listen-grid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.sentence-page .listen-card { align-items: center; background: #fff; border: 1px solid #eceef4; border-radius: 12px; box-shadow: 0 2px 8px rgba(26,29,43,.04); box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; overflow: hidden; padding: 10px; position: relative; transition: all .2s ease; }
.sentence-page .listen-card:active { transform: scale(.98); }
.sentence-page .listen-card.card-purple.playing { border-color: #6355f6; }
.sentence-page .listen-card.card-orange.playing { border-color: #f70; }
.sentence-page .listen-icon-box { align-items: center; border-radius: 9px; display: flex; flex-shrink: 0; height: 32px; justify-content: center; width: 32px; }
.sentence-page .listen-icon-box.box-purple { background: #6355f6; }
.sentence-page .listen-icon-box.box-orange { background: #f70; }
.sentence-page .listen-flat-ico { height: 16px; width: 16px; }
.sentence-page .listen-card.playing .listen-flat-ico { display: none; }
.sentence-page .listen-card.playing .listen-icon-box::after { color: #fff; content: '❚❚'; font-size: 11px; letter-spacing: 1px; }
.sentence-page .listen-text-box { display: flex; flex: 1; flex-direction: column; gap: 2px; margin-left: 8px; min-width: 0; }
.sentence-page .listen-main-title { color: #1a1d2b; font-size: 13px; font-weight: 700; }
.sentence-page .listen-desc { color: #9ca3af; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sentence-page .arrow-icon { color: #c4c8d4; font-size: 14px; }
.sentence-page .playing-bar-std, .sentence-page .playing-bar-demo { background: #6355f6; bottom: 0; height: 2px; left: 0; position: absolute; right: auto; transition: width .15s linear; width: 0; }
.sentence-page .playing-bar-demo { background: #f70; }
.sentence-page .records-grid { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.sentence-page .record-stat-box { align-items: center; background: #fff; border: 1px solid #eceef4; border-radius: 10px; box-shadow: 0 2px 8px rgba(26,29,43,.04); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 10px 8px; text-align: center; }
.sentence-page .stat-num-row { align-items: baseline; display: flex; gap: 2px; margin-bottom: 3px; }
.sentence-page .stat-num { color: #1a1d2b; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.sentence-page .stat-num.text-purple { color: #6355f6; }
.sentence-page .stat-num.text-orange { color: #f70; }
.sentence-page .stat-unit { color: #9ca3af; font-size: 11px; }
.sentence-page .stat-label { color: #6b7280; font-size: 11px; }
.sentence-page .mine-tools { display: flex; gap: 8px; margin-top: 8px; }
.sentence-page .mine-tools button { background: #fff; border: 1px solid #e5e7eb; border-radius: 9px; color: #4b5563; cursor: pointer; flex: 1; font-size: 11.5px; padding: 7px 0; }
.sentence-page .mine-tools button:active { background: #f3f4f6; }
.sentence-page .bottom-action-bar { backdrop-filter: blur(10px); background: hsla(0,0%,100%,.95); border-top: 1px solid #eceef4; bottom: 0; box-sizing: border-box; display: flex; gap: 10px; left: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); position: fixed; right: 0; z-index: 50; }
.sentence-page .main-action-btn { align-items: center; border: 0; border-radius: 12px; box-sizing: border-box; cursor: pointer; display: flex; flex: 1; gap: 8px; justify-content: center; line-height: normal; min-width: 0; padding: 10px 0; }
.sentence-page .main-action-btn:active { opacity: .9; transform: scale(.99); }
.sentence-page .main-action-btn.recording { opacity: .95; }
.sentence-page .btn-read-primary { background: linear-gradient(135deg,#6c52ff,#5234ec); box-shadow: 0 4px 12px rgba(99,85,246,.35); color: #fff; }
.sentence-page .btn-sing-primary { background: linear-gradient(135deg,#ff8400,#ff5500); box-shadow: 0 4px 12px rgba(255,119,0,.35); color: #fff; }
.sentence-page .btn-flat-icon { flex-shrink: 0; height: 16px; width: 16px; }
.sentence-page .btn-col { align-items: flex-start; display: flex; flex-direction: column; }
.sentence-page .btn-text { font-size: 15px; font-weight: 700; }
.sentence-page .btn-sub { font-size: 10px; opacity: .85; }
.sentence-page .wave i { background: #fff; }
/* 设置面板（对齐原版 settings-sheet 内容区） */
.sent-settings { padding: 4px 0 8px; }
.sent-set-row { align-items: center; border-bottom: 1px solid #f3f4f6; display: flex; justify-content: space-between; padding: 12px 2px; }
.sent-set-row:last-child { border-bottom: 0; }
.sent-set-label { color: #1a1d2b; font-size: 14px; font-weight: 500; }
.sent-set-pills { display: flex; gap: 6px; }
.sent-pill { background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 14px; color: #6b7280; cursor: pointer; font-size: 12px; padding: 5px 12px; }
.sent-pill.on { background: #ede9fe; border-color: #6355f6; color: #6355f6; font-weight: 600; }
.sentence-page .stepper-btn { flex: none; white-space: nowrap; }
.sentence-page .font-size-adjuster { flex: none; }
/* 切换句子 picker（1:1 对齐原版 picker-panel：第 N 句 · 歌词 + 练习状态） */
.pk-head-row { align-items: center; display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 10px; }
.pk-dedup-label { color: #6b7280; font-size: 12px; font-weight: 500; }
.pk-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.pk-item { align-items: center; background: #fff; border: 1px solid #eceef4; border-radius: 12px; cursor: pointer; display: flex; gap: 10px; padding: 10px 12px; text-align: left; width: 100%; }
.pk-item:active { background: #f6f5ff; }
.pk-item.cur { border-color: #6355f6; background: #f6f5ff; }
.pk-no { color: #6355f6; flex: none; font-size: 12px; font-weight: 700; min-width: 52px; }
.pk-text { color: #1a1d2b; flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-st { border-radius: 999px; flex: none; font-size: 10px; padding: 2px 8px; }
.pk-st.st-done { background: rgba(5,150,105,.1); color: #059669; }
.pk-st.st-todo { background: #f3f4f6; color: #9ca3af; }
/* ============ 搜索页：1:1 对齐原版 search-page（深紫暗色） ============ */
.searchx { background: radial-gradient(circle at 50% 0, #2e1065 0, #0f0518 50%, #050208 100%); box-sizing: border-box; color: #f3f4f6; display: flex; flex-direction: column; min-height: 100vh; }
.searchx .sx-header { align-items: center; box-sizing: border-box; display: flex; flex-shrink: 0; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 8px 10px 12px; position: relative; }
.searchx .search-bar { align-items: center; background: hsla(0,0%,100%,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-sizing: border-box; display: flex; flex: 1; padding: 0 12px; border-radius: 10px; height: 40px; }
.searchx .search-ico { height: 16px; width: 16px; opacity: .5; flex: none; }
.searchx .search-input { background: transparent; border: 0; color: #fff; flex: 1; font-size: 14px; min-width: 0; outline: none; padding: 0 6px; }
.searchx .search-input::placeholder { color: hsla(0,0%,100%,.4); }
.searchx .clear-btn { align-items: center; background: hsla(0,0%,100%,.2); border: 0; border-radius: 50%; color: #fff; cursor: pointer; display: flex; flex: none; font-size: 12px; height: 20px; justify-content: center; margin-left: 6px; width: 20px; }
.searchx .cancel-btn { background: transparent; border: 0; color: hsla(0,0%,100%,.7); cursor: pointer; flex-shrink: 0; font-size: 14px; padding: 6px 4px; white-space: nowrap; }
.searchx .cancel-btn:active { color: #fff; }
.searchx .default-panel { flex: 1; width: 100%; }
.searchx .history-section { padding: 12px 16px 0; }
.searchx .section-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.searchx .section-title { color: hsla(0,0%,100%,.85); font-size: 14px; font-weight: 600; }
.searchx .sx-his-tools { align-items: center; display: flex; gap: 2px; }
.searchx .history-clear-btn { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; padding: 4px; }
.searchx .sx-trash { height: 14px; width: 14px; opacity: .45; }
.searchx .toggle-text { color: hsla(0,0%,100%,.4); font-size: 12px; }
.searchx .history-tags { display: flex; flex-wrap: wrap; gap: 8px; max-height: 70px; overflow: hidden; transition: max-height .3s ease; }
.searchx .history-tags.expanded { max-height: 260px; }
.searchx .history-tag { background: hsla(0,0%,100%,.1); border: 0; border-radius: 999px; color: hsla(0,0%,100%,.7); cursor: pointer; font-size: 12px; max-width: 150px; overflow: hidden; padding: 6px 12px; text-overflow: ellipsis; white-space: nowrap; }
.searchx .history-tag:active { background: hsla(0,0%,100%,.18); color: #fff; }
.searchx .hot-section { padding: 4px 12px 140px; }
.searchx .hot-tabs { align-items: center; display: flex; gap: 20px; margin-bottom: 10px; }
.searchx .hot-tab { background: transparent; border: 0; color: hsla(0,0%,100%,.4); cursor: pointer; font-size: 15px; font-weight: 500; padding: 6px 0; position: relative; transition: color .3s ease; }
.searchx .hot-tab.active { color: #e85d3a; font-weight: 700; }
.searchx .hot-tab.active::after { background: #e85d3a; border-radius: 2px; bottom: 0; content: ''; height: 3px; left: 50%; position: absolute; transform: translateX(-50%); width: 18px; }
.searchx .hot-list-card { background: hsla(0,0%,100%,.06); border: 1px solid hsla(0,0%,100%,.08); border-radius: 12px; padding: 4px 10px; }
.searchx .hot-item { align-items: center; cursor: pointer; display: flex; gap: 8px; padding: 9px 0; }
.searchx .hot-item:active { background: hsla(0,0%,100%,.04); border-radius: 6px; }
.searchx .hot-rank { color: hsla(0,0%,100%,.3); font-size: 15px; font-weight: 700; text-align: center; width: 24px; font-variant-numeric: tabular-nums; }
.searchx .hot-rank.top3 { color: #e85d3a; }
.searchx .hot-name-wrap { align-items: center; display: flex; flex: 1; gap: 5px; min-width: 0; }
.searchx .hot-name { color: hsla(0,0%,100%,.85); flex-shrink: 1; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchx .hot-artist { color: hsla(0,0%,100%,.35); flex: none; font-size: 11px; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchx .hot-badge { border-radius: 3px; flex: none; font-size: 10px; font-weight: 600; line-height: 1.2; padding: 2px 6px; }
.searchx .hot-badge.hot, .searchx .hot-badge.fav { background: rgba(232,93,58,.2); color: #e85d3a; }
.searchx .hot-empty { padding: 40px 0; text-align: center; }
.searchx .hot-empty-text { color: hsla(0,0%,100%,.25); font-size: 13px; }
.searchx .results-panel { flex: 1; width: 100%; }
.searchx .searching-box { align-items: center; display: flex; flex-direction: column; justify-content: center; padding: 50px 0; }
.searchx .loading-spinner { animation: sxspin 1s linear infinite; border: 2px solid hsla(0,0%,100%,.1); border-radius: 50%; border-top-color: #d8b4fe; height: 20px; width: 20px; }
@keyframes sxspin { to { transform: rotate(360deg); } }
.searchx .status-text { color: hsla(0,0%,100%,.4); font-size: 13px; margin-top: 10px; }
.searchx .result-list { padding-bottom: 120px; }
.searchx .result-item { align-items: center; border-bottom: 1px solid hsla(0,0%,100%,.05); cursor: pointer; display: flex; padding: 14px 16px; }
.searchx .result-item:last-child { border-bottom: none; }
.searchx .result-item:active { background: hsla(0,0%,100%,.05); }
.searchx .result-rank { color: hsla(0,0%,100%,.4); font-size: 16px; font-weight: 500; width: 28px; font-variant-numeric: tabular-nums; }
.searchx .result-info { display: flex; flex: 1; flex-direction: column; margin-left: 8px; min-width: 0; }
.searchx .result-title { color: #fff; font-size: 15px; font-weight: 500; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchx .result-artist { color: hsla(0,0%,100%,.45); font-size: 12px; }
.searchx .result-fav { align-items: center; background: transparent; border: 0; cursor: pointer; display: flex; flex: none; flex-direction: column; gap: 2px; padding: 2px 4px; }
.searchx .heart-icon-img { height: 16px; width: 16px; }
.searchx .favorite-text { color: hsla(0,0%,100%,.5); font-size: 11px; font-weight: 500; line-height: 1; }
.searchx .empty-result { align-items: center; display: flex; flex-direction: column; padding: 20px 16px 120px; }
.searchx .empty-text { color: hsla(0,0%,100%,.25); font-size: 14px; margin-bottom: 12px; }
.searchx .request-card { background: linear-gradient(180deg, rgba(54,31,94,.95), rgba(28,15,53,.98)); border: 1px solid hsla(0,0%,100%,.1); border-radius: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4); box-sizing: border-box; padding: 16px; text-align: left; width: 100%; }
.searchx .request-title { color: #d8b4fe; display: block; font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.searchx .request-desc { color: hsla(0,0%,100%,.8); display: block; font-size: 13px; line-height: 1.6; }
.searchx .request-form { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.searchx .request-input { background: hsla(0,0%,100%,.08); border: 1px solid hsla(0,0%,100%,.08); border-radius: 10px; box-sizing: border-box; color: #fff; font-size: 14px; min-height: 44px; outline: none; padding: 12px 14px; width: 100%; }
.searchx .request-success { background: rgba(34,197,94,.14); border-radius: 9px; color: #bbf7d0; font-size: 12px; padding: 10px 12px; }
.searchx .request-actions { align-items: center; display: flex; gap: 8px; margin-top: 3px; }
.searchx .request-submit-btn { align-items: center; background: linear-gradient(90deg, #a855f7, #7c3aed); border: 0; border-radius: 999px; color: #fff; cursor: pointer; display: flex; flex: 1; font-size: 13px; font-weight: 600; height: 40px; justify-content: center; }
.searchx .request-contact-btn { align-items: center; background: hsla(0,0%,100%,.08); border: 1px solid hsla(0,0%,100%,.14); border-radius: 999px; color: hsla(0,0%,100%,.86); cursor: pointer; display: flex; flex: none; font-size: 13px; font-weight: 600; height: 40px; justify-content: center; width: 88px; }
.searchx .request-contact-btn:active { background: hsla(0,0%,100%,.14); }
.sentence-page .stepper-btn { width: auto; height: auto; }
/* ==================== 清唱/跟唱 K 歌工作台（1:1 对齐原版 k-song-mode，2026-10-23） ====================
原版结构考古自 applet-src/chunk_0.appservice.js（Z ops 模板）+ chunk_0.webview.js（WXSS）：
.ks-stage（= .container.k-song-mode）> .lyric-area.ks-lyric > .karaoke-scroll > .karaoke-scroll-content
> .karaoke-line > .k-song-line-controls（左浮动喇叭+音符）
.k-song-pre-record-panel（开始前）/ .k-song-center-dock（开始后）/ .k-song-recording-actions（录完）
字号换算：原版 750rpx 设计 @390px 屏 ≈ 0.52px/rpx（60rpx≈31px、96rpx≈50px、28rpx≈15px）。 */
/* 舞台：撑满 #view（karaoke mount 时给 #view 加 full-bleed + no-scroll） */
.ks-stage { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; width: 100%; }
/* 歌词区：铺满 + 自滚动（原版 lyric-area > karaoke-scroll） */
.karaoke-mode .lyric-area.ks-lyric {
flex: 1; min-height: 0; overflow: hidden; position: relative;
margin: 0; padding: 0; background: transparent;
}
.karaoke-scroll { height: 100%; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.karaoke-scroll-content { box-sizing: border-box; padding: 70px 0 230px; width: 100%; }
/* 歌词行：清唱模式无框，左侧留出浮动控制位（原版 lyric-align-left：padding-left:96rpx≈50px） */
.karaoke-mode .ks-lyric .karaoke-line {
position: relative; background: transparent; border-color: transparent; box-shadow: none;
margin-bottom: 9px; padding: 9px 10px 11px 56px; align-items: flex-start;
transform-origin: left center;
}
/* —— 行左侧浮动控制（原版 k-song-line-controls：喇叭圆钮 + 音符圆钮） —— */
.k-song-line-controls {
position: absolute; left: 0; top: 0; bottom: 0; width: 46px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
pointer-events: none; z-index: 12;
}
.k-song-line-controls > * { pointer-events: auto; }
.k-song-line-speaker {
width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
background: rgba(255,255,255,.08); border: 1px solid rgba(233,213,255,.25);
display: flex; align-items: center; justify-content: center; position: relative;
}
.k-song-line-speaker:active { background: rgba(168,85,247,.22); }
.k-song-line-speaker.is-playing { background: rgba(168,85,247,.32); border-color: rgba(233,213,255,.6); }
.k-song-line-speaker.is-locked { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.45); overflow: visible; }
.k-song-line-speaker-lock { position: absolute; right: -7px; top: -7px; font-size: 11px; line-height: 1; }
.k-song-line-speaker-icon { width: 15px; height: 15px; }
.k-song-ctrl-row { display: flex; align-items: center; justify-content: center; }
.k-song-line-demo-icon { width: 15px; height: 15px; filter: brightness(0) invert(1); }
/* 播放中音符旋转（原版 kSongDemoSpin 1.8s linear infinite）；暂停时停转 */
.k-song-line-demo.is-playing .k-song-line-demo-icon { animation: kSongDemoSpin 1.8s linear infinite; }
.k-song-line-demo.is-paused .k-song-line-demo-icon { animation-play-state: paused; opacity: .55; }
@keyframes kSongDemoSpin { to { transform: rotate(360deg); } }
/* —— 前置面板（原版 k-song-pre-record-panel） —— */
.k-song-pre-record-panel {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
background: linear-gradient(0deg, #000 20%, rgba(0,0,0,.85) 60%, transparent);
box-sizing: border-box; display: flex; flex-direction: column; padding: 34px 20px 12px;
}
.k-song-pre-record-panel.hide { display: none; }
.k-song-options-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.k-song-font-size-control { display: flex; align-items: center; }
.k-song-font-size-label { color: rgba(255,255,255,.4); font-size: 14px; margin-right: 10px; }
.k-song-font-size-stepper { display: flex; align-items: center; background: rgba(255,255,255,.05); border-radius: 15px; padding: 2px 6px; }
.k-song-stepper-btn { width: 25px; height: 25px; border: 0; background: transparent; color: rgba(255,255,255,.8); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.k-song-stepper-value { width: 30px; text-align: center; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
.k-song-switch-group { display: flex; align-items: center; gap: 10px; }
.k-song-switch-btn { background: #a855f7; border: 1px solid transparent; border-radius: 20px; color: #fff; font-size: 14px; padding: 5px 15px; cursor: pointer; transition: all .2s; }
.k-song-switch-btn.is-off { background: transparent; border-color: #a855f7; color: #a855f7; }
.k-song-progress-row { display: flex; align-items: center; margin-bottom: 15px; }
.k-song-progress-track { flex: 1; height: 4px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; margin-right: 10px; }
.k-song-progress-track i { display: block; height: 100%; width: 0; background: rgba(255,255,255,.9); border-radius: 2px; transition: width .12s linear; }
.k-song-progress-text { color: rgba(255,255,255,.4); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; }
.k-song-start-btn-row { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; }
.k-song-cover-btn { flex: 1; height: 48px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 11px; color: #fff; font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; white-space: nowrap; }
.k-song-cover-btn:active { background: rgba(255,255,255,.15); }
.k-song-cover-btn.is-on { background: rgba(168,85,247,.22); border-color: rgba(168,85,247,.5); }
.k-song-cover-glyph { color: #e9d5ff; font-size: 18px; font-weight: 700; margin-right: 6px; }
.k-song-start-btn.primary { flex: 1; height: 48px; background: #a855f7; border: 0; border-radius: 11px; color: #fff; font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 7px 15px rgba(168,85,247,.28); }
.k-song-start-btn.primary:active { transform: scale(.97); }
.k-song-start-icon { width: 20px; height: 20px; margin-right: 8px; filter: brightness(0) invert(1); }
/* —— 底部工作台（原版 k-song-center-dock：左切换 + 中录音大钮 + 右重唱退出） —— */
.k-song-center-dock {
position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 30;
display: none; align-items: flex-end; box-sizing: border-box; padding: 10px 14px;
background: rgba(28,20,44,.72); border: 1px solid rgba(255,255,255,.06); border-radius: 18px;
box-shadow: 0 -4px 15px rgba(4,2,10,.35);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.k-song-center-dock.show { display: flex; }
.k-song-dock-side { flex: 1 1 0; display: flex; align-items: flex-end; justify-content: center; gap: 20px; }
.k-song-dock-side:first-child { justify-content: flex-start; }
.k-song-dock-side:last-child { justify-content: flex-end; }
.k-song-dock-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.k-song-dock-btn:active { opacity: .7; }
.k-song-dock-btn.is-off { opacity: .4; }
.k-song-dock-icon-wrap { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.k-song-dock-icon { width: 15px; height: 15px; }
.k-song-dock-glyph { color: #e9d5ff; font-size: 14px; font-weight: 700; line-height: 1; }
.k-song-dock-label { color: rgba(255,255,255,.7); font-size: 11px; font-weight: 500; }
.k-song-center-slot { display: flex; flex-direction: column; align-items: center; }
.k-song-center-btn {
width: 64px; height: 64px; border-radius: 50%; padding: 0; cursor: pointer;
border: 2px solid rgba(255,255,255,.14);
background: linear-gradient(150deg, #c084fc, #a855f7 55%, #ec4899);
box-shadow: 0 8px 20px rgba(168,85,247,.5), inset 0 1px 3px rgba(255,255,255,.3);
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.k-song-center-btn:active { transform: scale(.95); }
.k-song-center-btn.hide { display: none; }
.k-song-center-icon { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.k-song-center-label { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .5px; margin-top: 2px; white-space: nowrap; }
/* 工作录音条（原版 k-song-work-recorder） */
.k-song-work-recorder {
display: none; align-items: center; justify-content: space-between; gap: 10px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
padding: 8px 10px; margin-top: 8px; min-width: 190px; box-sizing: border-box;
}
.k-song-work-recorder.show { display: flex; }
.k-song-record-status { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.78); font-size: 13px; min-width: 0; font-variant-numeric: tabular-nums; }
.k-song-record-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.36); flex: 0 0 auto; }
.k-song-record-dot.recording { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.16); animation: ksRecPulse 1.2s ease-in-out infinite; }
@keyframes ksRecPulse { 50% { opacity: .45; } }
.k-song-record-btn { background: #fff; border: 0; border-radius: 6px; color: #161616; font-size: 13px; font-weight: 700; height: 30px; min-width: 58px; padding: 0 11px; cursor: pointer; flex: 0 0 auto; }
/* 录音停掉后的操作行（原版 k-song-recording-actions：试听/重唱/保存） */
.k-song-recording-actions { position: absolute; left: 10px; right: 10px; bottom: 100px; z-index: 31; display: none; gap: 8px; box-sizing: border-box; }
.k-song-recording-actions.show { display: flex; }
.k-song-recording-actions .k-song-record-btn { flex: 1; height: 44px; border-radius: 8px; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.k-song-recording-actions .play-record-btn { background: #a855f7; color: #fff; box-shadow: 0 7px 15px rgba(168,85,247,.24); }
.k-song-recording-actions .stop-btn { background: rgba(239,68,68,.18); border: 1px solid rgba(239,68,68,.55); color: #fff; }
/* 封面浮层（原版 coverPlayerVisible） */
.ks-cover-float {
position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 25;
display: none; flex-direction: column; align-items: center;
background: rgba(20,14,36,.92); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
padding: 14px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.ks-cover-float.show { display: flex; }
.ks-cover-float img { width: 110px; height: 110px; border-radius: 10px; object-fit: cover; }
.ks-cover-float > i { width: 110px; height: 110px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-style: normal; color: #fff; background: linear-gradient(135deg,#3a1d78,#7c3aed); }
.ks-cover-float-t { color: #fff; font-size: 15px; font-weight: 700; margin-top: 8px; }
.ks-cover-float-a { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 2px; }