/* Egshig 车载/电视 Web 版 —— 设计基准 1280×720，token 见 handoff README */
@font-face { font-family: 'MnUnicode'; src: url('fonts/NotoSansMongolianMenk.ttf'); font-display: swap; }
/* PUA 主字体。block 不用 swap:PUA 缺字体是满屏豆腐块,宁可先空着(同分享页约定) */
@font-face { font-family: 'OnonSonin'; src: url('fonts/OnonSoninSans.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'MenkGarqag'; src: url('fonts/MenkGarqag.ttf'); font-display: swap; }
@font-face { font-family: 'MenkScnin'; src: url('fonts/MenksoftScnin.ttf'); font-display: swap; }
@font-face { font-family: 'NumBlack'; src: url('fonts/Gilroy-Black.otf'); font-display: swap; }

:root {
  --bg-canvas:#000000; --bg-shell:#0B0C0C; --bg-card:#101212;
  --bg-ctl:#141616; --bg-ctl2:#181A1A;
  --line:#1A1C1C; --line2:#151717;
  --teal-deep:#0E8C89; --teal:#17BDB6; --teal-hi:#2ED6CE;
  --amber:#F5A623; --amber-ink:#1A1206;
  --live:#FF4946; --like:#FD0E64;
  --t1:#FFFFFF; --t2:#C9CECE; --t3:#B8BDBD; --t4:#8E9393; --t5:#9CA1A1;
  --t6:#6C7070; --t7:#5E6363; --rank:#4A4E4E; --rank2:#3C4040;
  /* 静态 UI 标签用 Unicode 蒙文；接口数据(PUA)用 Menksoft 字体 */
  --font-mn-ui: 'MnUnicode', sans-serif;
  --font-mn-data: 'OnonSonin', 'MenkGarqag', 'MenkScnin', sans-serif;
  --font-num: 'NumBlack', system-ui, sans-serif;
}

html, body { margin:0; padding:0; background:var(--bg-canvas); }
* { scrollbar-width:none; box-sizing:border-box; }
*::-webkit-scrollbar { width:0; height:0; display:none; }
button { font: inherit; }

#stage { width:100vw; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--bg-canvas); }
#root { position:relative; flex:none; transform-origin:center center; width:1280px; height:720px; overflow:hidden; background:var(--bg-canvas); color:var(--t1); font-family:var(--font-mn-ui); padding:12px; user-select:none; }
#frame { width:100%; height:100%; border-radius:26px; background:var(--bg-shell); border:1px solid var(--line); display:flex; overflow:hidden; }

/* 竖排蒙文 */
.vt { writing-mode:vertical-lr; text-orientation:sideways; word-break:keep-all; overflow-wrap:normal; padding-right:6px; line-height:1.25; overflow:hidden; }
.vt-data { font-family:var(--font-mn-data); }
.num { font-family:var(--font-num); }
.vt-cn { writing-mode:vertical-lr; text-orientation:upright; flex:none; letter-spacing:5px; line-height:1.2; overflow:hidden; max-height:100%; }
.mine-label .vt-cn { font-size:18px; max-width:44px; color:var(--teal); }
.rail-cn-main { font-size:15px; letter-spacing:1px; }

/* 左导航 */
#rail { width:104px; flex:none; border-right:1px solid var(--line2); display:flex; flex-direction:column; align-items:center; padding:16px 0 12px; gap:6px; }
#logo { width:52px; height:52px; flex:none; border-radius:15px; display:block; box-shadow:0 0 22px rgba(14,140,137,0.35); margin-bottom:2px; }
.rail-btn { width:76px; flex:1; min-height:0; border:none; padding:0; cursor:pointer; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; transition:background .15s,color .15s; background:transparent; color:#767B7B; }
.rail-btn.on { background:rgba(14,140,137,0.22); color:var(--teal-hi); }
.rail-btn .vt { padding-right:5px; font-size:20px; flex:none; max-height:74px; max-width:38px; }
.rail-btn svg { flex:none; }

#pane { flex:1; min-width:0; display:flex; flex-direction:column; padding:16px 22px 18px; }

/* 顶栏(含右侧紧凑播放条,08-26 设计:合并省 80px 给内容) */
#topbar { height:104px; flex:none; display:flex; align-items:center; gap:16px; }
#screen-name { max-height:100px; max-width:64px; color:var(--t1); }
#topbar .sp { flex:1; }
.round-btn { width:56px; height:56px; flex:none; border:none; border-radius:999px; background:#111313; color:var(--t3); display:flex; align-items:center; justify-content:center; cursor:pointer; }
#clock-wrap { display:flex; align-items:center; gap:9px; }
#dot { width:9px; height:9px; border-radius:999px; background:var(--teal); box-shadow:0 0 10px rgba(23,189,182,0.8); }
#clock { font-size:36px; font-weight:900; letter-spacing:.01em; line-height:1; }

.clock-col { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
#cal-solar { font-size:19px; font-weight:800; color:var(--t5); letter-spacing:.06em; line-height:1; }
.dl-btn { flex:none; display:flex; align-items:center; gap:9px; margin-left:10px; height:46px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:var(--bg-ctl); color:var(--t2); font-size:14px; cursor:pointer; }
.dl-btn:hover { color:var(--teal); border-color:var(--teal); }
.lang-btn { flex:none; display:flex; align-items:center; justify-content:center; margin-left:10px; height:46px; min-width:46px; padding:0 14px; border:1px solid var(--line); border-radius:999px; background:var(--bg-ctl); color:var(--t2); font-size:14px; cursor:pointer; }
.lang-btn .vt { max-height:40px; padding-right:0; }
.lang-btn:hover { color:var(--teal); border-color:var(--teal); }
.dl-panel { position:absolute; inset:0; z-index:95; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; }
.dl-box { position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:26px; padding:30px 34px 34px; }
.dl-title { font-size:20px; font-weight:700; color:var(--t1); }
.dl-sub { font-size:13px; color:var(--t7); margin:6px 0 20px; }
.dl-grid { display:grid; grid-template-columns:repeat(2, 224px); grid-auto-rows:172px; gap:14px; }
.dl-cell { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border-radius:18px; cursor:pointer; color:var(--t1); background:#141B1E; border:1px solid var(--line); }
.dl-cell svg { margin-bottom:4px; }
.dl-name { font-size:18px; font-weight:600; }
.dl-desc { font-size:12px; color:var(--t7); }
.dl-foot { font-size:12px; color:var(--t7); margin-top:18px; text-align:center; }
.dl-cell:nth-child(1), .dl-cell:nth-child(4) { background:#1A2326; }
.dl-cell:hover { border-color:var(--teal); color:var(--teal); }
.dl-cell svg { width:46px; height:46px; }
#mini { position:relative; flex:0 1 430px; min-width:0; height:104px; max-width:430px; border-radius:18px; background:var(--bg-card); border:1px solid var(--line); overflow:hidden; cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 14px; }
.mini-art { flex:none; border-radius:12px; width:76px; height:76px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.mini-art .vt { padding-right:0; font-size:40px; white-space:nowrap; line-height:1; }
.mini-title { color:var(--t1); max-height:78px; max-width:100px; }
.mini-singer { color:var(--t5); max-height:78px; max-width:40px; padding-right:5px; }
.mini-time { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.mini-time .cur { font-size:22px; font-weight:800; color:var(--amber); line-height:1; }
.mini-time .dur { font-size:14px; color:var(--t7); line-height:1; }
.mini-play { flex:none; border:none; border-radius:999px; background:var(--amber); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 24px rgba(245,166,35,0.4); width:64px; height:64px; }
.hero-track { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line); }
.hero-track > div { height:100%; background:var(--amber); }

main { flex:1; min-height:0; position:relative; margin-top:16px; }
.screen { position:absolute; inset:0; }

/* 首页 */
#scr-home { display:flex; flex-direction:column; overflow-y:auto; scrollbar-width:none; }
#scr-home::-webkit-scrollbar { display:none; }
.home-fold { height:100%; flex:none; display:flex; flex-direction:column; gap:16px; }
.home-footer { flex:none; margin-top:10px; padding:28px 40px 32px; border-top:1px solid var(--line); text-align:center; }
.hf-links { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; row-gap:8px; font-size:14px; color:var(--t2); margin-bottom:16px; }
.hf-a { cursor:pointer; padding:2px 18px; border-right:1px solid var(--line); white-space:nowrap; }
.hf-a:hover { color:var(--teal); }
.hf-mail { padding:2px 18px; white-space:nowrap; }
.hf-line { font-size:12px; line-height:2.1; color:#5A6466; }
.hf-b { cursor:pointer; }
.hf-b:hover { color:var(--teal); }
.row-flex { flex:1; min-height:0; display:flex; gap:16px; }
.row-label { max-height:100%; max-width:44px; color:var(--teal); flex:none; }
.shelf { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; display:flex; gap:14px; padding-bottom:8px; }
.song-card { width:172px; flex:none; position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:10px; cursor:pointer; }
.cover { flex:none; border-radius:14px; display:flex; align-items:center; justify-content:center; width:104px; height:104px; background-size:cover; background-position:center; }
.cover .vt { padding-right:0; font-size:56px; flex:none; white-space:nowrap; color:var(--t1); line-height:1; }
.song-card .cover-wrap { flex:none; position:relative; width:100%; }
.song-card .cover { width:100%; height:148px; }
.song-card .cover .vt { font-size:64px; }
.play-overlay { position:absolute; right:8px; bottom:8px; width:44px; height:44px; border-radius:999px; background:rgba(0,0,0,0.38); color:var(--t1); display:flex; align-items:center; justify-content:center; }
.song-card .txt { flex:1; min-height:0; display:flex; gap:10px; }
.song-card .title { max-height:100%; color:var(--t1); }
.song-card .singer { max-height:100%; max-width:40px; color:var(--t4); padding-right:5px; }
.song-card .dur { font-size:16px; color:var(--t7); position:absolute; right:12px; bottom:10px; }
.pl-row { height:150px; flex:none; display:flex; gap:16px; }
.pl-shelf { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; display:flex; gap:14px; }
.pl-card { width:252px; flex:none; border-radius:16px; padding:16px; display:flex; align-items:flex-start; gap:12px; cursor:pointer; background-size:cover; background-position:center; }
.pl-card .name { max-height:100%; color:var(--t1); }
.pl-card .count { font-size:17px; color:rgba(255,255,255,0.62); align-self:flex-end; margin-left:auto; }

/* 搜索 */
#scr-search { display:flex; flex-direction:column; gap:16px; }
.search-bar { height:76px; flex:none; border-radius:18px; background:var(--bg-card); border:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:0 22px; cursor:pointer; }
.search-bar svg.mag { color:var(--t6); flex:none; }
.search-bar .hint { font-size:19px; max-height:62px; color:var(--t6); }
.search-bar .sp { flex:1; }
.mic-btn { width:56px; height:56px; flex:none; border-radius:999px; background:var(--amber); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; }
.hot-grid { flex:1; min-width:0; overflow-y:auto; overflow-x:hidden; display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); grid-auto-rows:110px; gap:14px; align-content:start; padding-right:6px; }
.hot-row { border-radius:16px; background:var(--bg-card); border:1px solid var(--line); padding:0 14px; display:flex; align-items:center; gap:12px; cursor:pointer; }
.hot-row .rank { font-size:28px; font-weight:900; width:38px; flex:none; }
.hot-cover { width:78px; height:78px; border-radius:12px; }
.hot-cover .vt { font-size:36px; }
.hot-row .title { height:100px; max-width:92px; color:var(--t1); }
.hot-row .singer { height:100px; max-width:52px; color:var(--t4); padding-right:5px; }
.hot-row .sp { flex:1; }
.play-sm { width:52px; height:52px; flex:none; border-radius:999px; background:var(--bg-ctl2); color:var(--t1); display:flex; align-items:center; justify-content:center; }

/* 电台(08-27:正方形封面卡,台名在卡底不压图,点台不跳页原地出徽标) */
#scr-radio { overflow-y:auto; overflow-x:hidden; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; align-content:start; padding-right:6px; }
.radio-card { position:relative; min-height:330px; background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:10px; cursor:pointer; }
.radio-card .cover-wrap { flex:none; position:relative; width:100%; }
.radio-card .cover { width:100%; height:auto; aspect-ratio:1/1; }
.radio-card .cover .vt { font-size:48px; }
.radio-card .txt { flex:1; min-height:0; display:flex; gap:8px; }
.radio-card .name { max-height:100%; color:var(--t1); }
.radio-card .sub { max-height:100%; color:var(--t4); padding-right:4px; }

/* 我的 */
#scr-mine { overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:22px; padding-right:6px; }
.mine-sec { flex:none; display:flex; gap:16px; }
.mine-label { flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; }
.mine-label .vt { font-size:20px; max-width:44px; color:var(--teal); }
.mine-label .cnt { font-size:16px; color:var(--rank); }
.fav-shelf { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; display:flex; gap:14px; padding-bottom:8px; }
.fav-col { width:462px; flex:none; display:flex; flex-direction:column; gap:12px; }
.fav-row { height:104px; flex:none; background:var(--bg-card); border:1px solid var(--line); border-radius:16px; padding:0 18px; display:flex; align-items:center; gap:16px; cursor:pointer; }
.fav-row .cover { width:70px; height:70px; border-radius:13px; }
.fav-row .cover .vt { font-size:34px; }
.fav-row .title { height:94px; max-width:112px; color:var(--t1); }
.fav-row .singer { height:94px; max-width:76px; color:var(--t4); padding-right:5px; }
.fav-row .sp { flex:1; }
.fav-row .dur { font-size:17px; color:var(--t6); }
.play-md { width:58px; height:58px; flex:none; border-radius:999px; background:var(--bg-ctl2); color:var(--t1); display:flex; align-items:center; justify-content:center; }
/* 我的页歌单卡(08-26 重做:我建+收藏合并一行,封面上/文字下,文字不压图) */
.album-shelf { flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; display:flex; gap:14px; padding-bottom:8px; }
.album-card { width:172px; height:330px; flex:none; position:relative; background:var(--bg-card); border:1px solid var(--line); border-radius:18px; padding:12px; display:flex; flex-direction:column; gap:10px; cursor:pointer; }
.album-card .cover { width:100%; height:148px; }
.album-card .cover .vt { font-size:56px; }
.album-card .txt { flex:1; min-height:0; display:flex; gap:10px; }
.album-card .name { max-height:100%; color:var(--t1); }
.album-card .count { font-size:16px; color:var(--t7); position:absolute; right:12px; bottom:10px; }

/* 扫码登录(我的页未登录态) */
.login-card { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:48px; }
.qr-box { width:300px; height:300px; flex:none; background:#FFFFFF; border-radius:20px; display:flex; align-items:center; justify-content:center; }
.qr-box img, .qr-box canvas { display:block; }
.login-side { flex:none; display:flex; align-items:center; gap:20px; max-height:320px; }
.login-hint { color:var(--t2); }
/* 登录文案图(用户提供,已预处理为透明底浅色文字) */
.guide-text { height:330px; flex:none; display:block; }
.guide-thumb { width:260px; flex:none; border-radius:14px; border:1px solid var(--line); cursor:pointer; display:block; }
.guide-overlay { position:absolute; inset:0; z-index:90; background:rgba(0,0,0,0.88); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.guide-overlay img { max-width:92%; max-height:92%; border-radius:16px; }
.user-bar { align-items:center; gap:16px; height:76px; }
.user-avatar { width:56px; height:56px; flex:none; border-radius:999px; background-color:var(--bg-ctl2); background-size:cover; background-position:center; }
.user-avatar.big { width:96px; height:96px; }
.user-name { color:var(--t1); max-height:100%; }
.vip-badge { font-size:15px; font-weight:900; color:var(--amber-ink); background:var(--amber); border-radius:8px; padding:4px 8px; }
.logout-btn { border:none; border-radius:14px; background:var(--bg-ctl); color:var(--t4); padding:8px 12px; cursor:pointer; display:flex; align-items:center; }

/* 正在播放(08-26 设计:无顶栏,歌词占主区,队列右侧纵栏可开关) */
#scr-player { display:flex; flex-direction:column; gap:14px; }
.player-up { flex:1; min-height:0; display:flex; gap:16px; }
.lyrics-panel { flex:1; min-width:0; background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:24px 22px; display:flex; justify-content:flex-start; gap:24px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; }
.lyrics-panel::-webkit-scrollbar { display:none; }
.lyrics-panel.lyrics-h { display:block; overflow-y:auto; overflow-x:hidden; }
.lyrics-panel.lyrics-h .lrc-line { line-height:1.55; padding:7px 10px; transition:color .3s,font-size .3s,filter .45s,opacity .45s; }
.lyrics-panel .vt { flex:none; line-height:1.2; max-height:100%; transition:color .3s,font-size .3s,filter .45s,opacity .45s; }
/* 重建歌词 DOM 那一帧禁过渡:新行直接以最终字号出现,不整屏从小放大 */
.lyrics-panel.no-anim .vt, .lyrics-panel.no-anim .lrc-line { transition:none !important; }
.queue-side { flex:none; display:flex; gap:10px; }
.queue-col { width:300px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:10px; padding-right:4px; }
.q-row { height:112px; flex:none; border-radius:14px; padding:0 14px; display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--bg-card); border:1px solid var(--line); }
.q-row.cur { background:rgba(245,166,35,0.12); border-color:rgba(245,166,35,0.45); }
.q-row .n { font-size:16px; font-weight:800; color:var(--rank); width:26px; flex:none; }
.q-row .title { height:96px; max-width:120px; color:#E8ECEC; }
.q-row.cur .title { color:var(--amber); }
.q-row .singer { height:96px; max-width:52px; color:var(--t4); padding-right:4px; }
.q-row .sp { flex:1; }
.q-row .dur { font-size:15px; color:var(--t7); flex:none; }
.ctl-art { width:56px; height:56px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.ctl-art .vt { padding-right:0; font-size:26px; white-space:nowrap; line-height:1; }
.ctl-title { color:var(--t1); max-height:64px; max-width:56px; }
.ctl-singer { color:var(--t5); max-height:64px; max-width:32px; padding-right:4px; }
.play-big { flex:none; border:none; border-radius:999px; background:var(--amber); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 0 34px rgba(245,166,35,0.42); width:88px; height:88px; }
.q-toggle { width:66px; height:66px; border:none; border-radius:999px; background:var(--bg-ctl); color:var(--t2); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* 歌词全屏(09-02):只留歌词,控制条像影院播放器悬浮底部,3 秒无操作淡出 */
body.lyr-full #rail, body.lyr-full #topbar, body.lyr-full .queue-side { display:none; }
body.lyr-full main { margin-top:0; }
body.lyr-full .lyrics-panel { border:none; background:transparent; padding:36px 46px; }
body.lyr-full .ctl-row { position:absolute; left:14px; right:14px; bottom:10px; z-index:6; height:96px; padding:0 20px; background:rgba(16,18,18,0.92); border:1px solid var(--line); border-radius:24px; transition:opacity 0.35s; }
body.lyr-full.ctl-idle .ctl-row { opacity:0; pointer-events:none; }
body.lyr-full.ctl-idle * { cursor:none !important; }

/* 全屏歌词动画效果(09-02):✦ 按钮只在全屏出现,循环切换 */
.fx-btn { display:none; }
body.lyr-full .fx-btn { display:flex; }
#fx-toast { position:absolute; top:9%; left:50%; transform:translateX(-50%); z-index:9; display:flex; align-items:center; gap:12px; padding:12px 24px; border-radius:999px; background:rgba(16,18,18,0.92); border:1px solid var(--line); color:var(--t2); font-size:17px; opacity:0; pointer-events:none; transition:opacity .3s; }
#fx-toast.show { opacity:1; }
#fx-toast .fx-name { color:var(--teal-hi); }
/* 霓虹呼吸:当前行光晕呼吸 + 极光流动背景 */
.lyrics-panel .fx-glow-on { animation:fxBreath 2.2s ease-in-out infinite; }
@keyframes fxBreath {
  0%,100% { text-shadow:0 0 14px rgba(23,189,182,0.55), 0 0 42px rgba(23,189,182,0.25); }
  50% { text-shadow:0 0 26px rgba(46,214,206,0.95), 0 0 72px rgba(46,214,206,0.45); }
}
body.lyr-full .player-up { position:relative; z-index:1; }
body.lyr-full.fxbg-glow #scr-player::before { content:''; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:radial-gradient(40% 55% at 20% 30%, rgba(23,189,182,0.16), transparent 70%),
             radial-gradient(45% 60% at 80% 70%, rgba(245,166,35,0.12), transparent 70%),
             radial-gradient(35% 50% at 60% 15%, rgba(46,214,206,0.10), transparent 70%);
  filter:blur(30px); animation:fxAurora 14s ease-in-out infinite alternate; }
@keyframes fxAurora {
  from { transform:translate3d(-4%,-3%,0) scale(1); }
  to { transform:translate3d(4%,3%,0) scale(1.15); }
}
/* 卡拉OK填色:双层背景裁进文字,上层青色按 backgroundSize 揭开(js 每秒推进,1s linear 连成连续) */
.lyrics-panel .fx-kara-on { background-image:linear-gradient(var(--teal),var(--teal)), linear-gradient(#5A5F5F,#5A5F5F); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent !important; transition:background-size 1s linear,font-size .3s; }
/* 弹性跳动:换行瞬间过冲回弹 */
.lyrics-panel .fx-pop { animation:fxPop 0.55s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes fxPop {
  0% { transform:scale(0.92); }
  60% { transform:scale(1.1); }
  100% { transform:scale(1); }
}
.ctl-row { height:84px; flex:none; display:flex; align-items:center; gap:18px; }
.ctl-row .cur { font-size:21px; color:var(--t2); width:58px; }
.ctl-row .dur { font-size:21px; color:var(--t6); width:58px; }
.seek { flex:1; height:56px; display:flex; align-items:center; cursor:pointer; }
.seek .track { width:100%; height:7px; border-radius:999px; background:#1C1E1E; position:relative; }
.seek .fill { height:100%; border-radius:999px; background:var(--amber); }
.seek .knob { position:absolute; top:50%; width:20px; height:20px; border-radius:999px; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,0.6); }
.ctl-btns { display:flex; align-items:center; gap:16px; }
.like-btn { width:66px; height:66px; border:none; border-radius:999px; background:var(--bg-ctl); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t2); }
.like-btn.on { color:var(--like); }
.skip-btn { width:72px; height:72px; border:none; border-radius:999px; background:var(--bg-ctl); color:var(--t1); display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* 正在播放动画徽标(三根跳动的均衡条,暂停时定格) */
.eq-badge { display:flex; align-items:flex-end; gap:3px; height:18px; }
.rail-eq { display:flex; align-items:center; justify-content:center; width:28px; height:28px; }
.lyrics-panel .lyr-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; gap:28px; }
.lyr-empty .le-title { color:var(--t2); }
.lyr-empty .le-singer { color:var(--t7); }
.eq-badge i { width:4px; border-radius:2px; background:currentColor; height:6px; animation:eqbar 0.9s ease-in-out infinite; }
.eq-badge i:nth-child(2) { animation-delay:0.25s; }
.eq-badge i:nth-child(3) { animation-delay:0.5s; }
.eq-badge.paused i { animation-play-state:paused; }
@keyframes eqbar { 0%,100% { height:5px; } 50% { height:18px; } }
.play-overlay.on { background:rgba(245,166,35,0.88); color:var(--amber-ink); }
.play-sm.on, .play-md.on { background:var(--amber); color:var(--amber-ink); }
.st-play.on { background:rgba(245,166,35,0.88); color:var(--amber-ink); }
.pl-card { position:relative; }
.pl-eq { position:absolute; left:14px; bottom:12px; color:#FFFFFF; }
.album-eq { position:absolute; left:12px; bottom:10px; color:var(--amber); }

/* 充值会员面板(扫码支付,复用电脑版链路) */
/* 会员胶囊:VIP 金标+续费一体,整体可点开充值面板 */
.vip-pill { display:flex; align-items:stretch; flex:none; padding:0; border:1px solid rgba(245,166,35,0.45); border-radius:13px; overflow:hidden; background:transparent; cursor:pointer; }
.vip-pill .tag { background:linear-gradient(135deg,#FFD883,#F5A623); color:#1A1206; font-weight:900; font-size:15px; letter-spacing:.02em; padding:9px 13px; display:flex; align-items:center; }
.vip-pill .act { background:rgba(245,166,35,0.12); color:var(--amber); font-weight:700; font-size:15px; padding:9px 15px; display:flex; align-items:center; gap:5px; }
.vip-panel { position:absolute; inset:0; z-index:95; background:rgba(0,0,0,0.92); display:flex; align-items:center; justify-content:center; gap:44px; }
.vip-plans { display:flex; flex-direction:column; gap:14px; }
.vip-plan { width:360px; height:158px; border-radius:16px; border:2px solid var(--line); background:var(--bg-card); padding:14px 20px; cursor:pointer; display:flex; align-items:center; gap:18px; }
.vip-plan.sel { border-color:var(--amber); background:rgba(245,166,35,0.10); }
.vip-plan .ptxt { flex:1; min-width:0; height:100%; display:flex; gap:12px; }
.vip-plan .ptitle { color:var(--t1); max-height:100%; }
.vip-plan .psub { color:var(--t4); max-height:100%; }
.vip-plan .pinfo { flex:none; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; }
.vip-plan .price { font-size:30px; font-weight:900; color:var(--amber); line-height:1; }
.vip-plan .old { font-size:15px; color:var(--t6); text-decoration:line-through; }
.vip-plan .days { font-size:14px; color:var(--t4); }
.vip-qr-wrap { display:flex; flex-direction:column; align-items:center; gap:16px; }
.vip-qr-box { width:280px; height:280px; background:#FFFFFF; border-radius:18px; display:flex; align-items:center; justify-content:center; }
.vip-status { color:var(--teal); font-size:22px; font-weight:800; }
.vip-hint { color:var(--t4); font-size:15px; }
.vip-close { position:absolute; top:24px; right:28px; width:56px; height:56px; border:none; border-radius:999px; background:var(--bg-ctl); color:var(--t2); font-size:24px; cursor:pointer; }

/* 试听 60 秒截停提示(非会员 VIP 歌,与 App 一致) */
.trial-tip { position:absolute; inset:0; z-index:96; background:rgba(0,0,0,0.72); display:flex; align-items:center; justify-content:center; }
.tt-box { background:var(--bg-card); border:1px solid var(--line); border-radius:20px; padding:34px 44px; display:flex; align-items:center; gap:34px; }
.tt-mn { flex:none; max-height:280px; display:flex; }
.tt-mn-text { color:var(--t1); max-height:280px; }
.tt-right { display:flex; flex-direction:column; align-items:center; gap:16px; }
.tt-title { font-size:25px; font-weight:900; color:var(--t1); }
.tt-msg { font-size:16px; color:var(--t4); }
.tt-btns { display:flex; gap:14px; margin-top:6px; }
.tt-ok, .tt-no { display:flex; align-items:center; justify-content:center; gap:9px; min-height:86px; padding:10px 22px; border-radius:14px; cursor:pointer; }
.tt-ok { border:none; background:var(--amber); color:var(--amber-ink); font-weight:800; font-size:16px; }
.tt-ok .tt-btn-mn { color:var(--amber-ink); }
.tt-no { border:1px solid var(--line); background:transparent; color:var(--t4); font-size:16px; }
.tt-no .tt-btn-mn { color:var(--t4); }
.tt-btn-mn { max-height:64px; }

/* 轻提示 toast(试听提醒等,4 秒自动消失) */
.toast { position:absolute; left:50%; bottom:56px; transform:translateX(-50%); z-index:97; background:rgba(20,22,22,0.96); border:1px solid rgba(245,166,35,0.4); color:var(--t2); font-size:16px; font-weight:700; padding:13px 24px; border-radius:14px; animation:toastIn .25s ease-out; white-space:nowrap; }
@keyframes toastIn { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }

/* 字母搜索面板(App 首字母键盘同款:26 键 4 列×7 行,显示 PUA 字形出拉丁) */
.kb-panel { position:absolute; inset:0; z-index:94; background:rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; gap:44px; }
.kb-input-col { display:flex; flex-direction:column; align-items:center; gap:18px; }
.kb-input { width:96px; height:340px; border-radius:16px; background:var(--bg-card); border:1px solid var(--line); display:flex; justify-content:center; padding:14px 0; overflow:hidden; }
.kb-input .vt { color:var(--t1); max-height:100%; }
.kb-clear { width:72px; height:60px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--t4); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.kb-grid { display:grid; grid-template-rows:repeat(7, 74px); grid-auto-flow:column; gap:12px; }
.kb-key { width:74px; height:74px; border-radius:14px; border:1px solid var(--line); background:var(--bg-card); color:#4aa3ff; font-size:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; writing-mode:vertical-lr; text-orientation:sideways; }
.kb-key:active { background:rgba(74,163,255,0.15); }
.kb-go { width:74px; height:160px; border-radius:14px; border:none; background:var(--amber); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.kb-go .vt { color:var(--amber-ink); }
.kb-close { position:absolute; top:24px; right:28px; width:56px; height:56px; border:none; border-radius:999px; background:var(--bg-ctl); color:var(--t2); font-size:24px; cursor:pointer; }

/* 语音搜索浮层 */
.voice-panel { position:absolute; inset:0; z-index:96; background:rgba(0,0,0,0.9); display:flex; align-items:center; justify-content:center; }
.vp-box { display:flex; flex-direction:column; align-items:center; gap:20px; background:var(--bg-card); border:1px solid var(--line); border-radius:22px; padding:38px 64px; min-width:430px; }
.vp-mic { position:relative; width:96px; height:96px; border-radius:999px; background:var(--amber); color:var(--amber-ink); display:flex; align-items:center; justify-content:center; }
.vp-ring { position:absolute; inset:-9px; border-radius:999px; border:3px solid rgba(245,166,35,0.5); transform:scale(1); transition:transform .12s ease-out; }
.vp-text { min-height:170px; max-height:210px; display:flex; justify-content:center; }
.vp-text .vt { color:var(--t1); max-height:210px; }
.vp-hint { color:var(--t4); font-size:16px; min-height:20px; }

/* 登录协议同意行 + 协议阅读器 */
.login-card { flex-direction:column; gap:30px; }
.login-main { display:flex; align-items:center; justify-content:center; gap:44px; }
.qr-hold { position:relative; flex:none; }
.qr-mask { position:absolute; inset:0; border-radius:20px; background:rgba(10,11,11,0.93); display:flex; align-items:center; justify-content:center; color:var(--amber); font-size:18px; font-weight:700; }
.agree-row { display:flex; align-items:center; gap:8px; }
.agree-chk { width:34px; height:34px; flex:none; border:2px solid var(--line); border-radius:9px; background:transparent; color:var(--amber-ink); font-size:18px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.agree-chk.on { background:var(--amber); border-color:var(--amber); }
.agree-txt { color:var(--t4); font-size:15px; }
.agree-link { color:var(--teal); font-size:15px; cursor:pointer; }
.doc-viewer { position:absolute; inset:0; z-index:97; background:rgba(0,0,0,0.94); display:flex; align-items:center; justify-content:center; }
.doc-viewer iframe { width:82%; height:88%; border:none; border-radius:16px; background:#FFFFFF; }

/* 焦点框 */
#ring { position:absolute; top:0; left:0; width:0; height:0; opacity:0; pointer-events:none; z-index:80; border:3px solid var(--teal); box-shadow:0 0 0 5px rgba(23,189,182,0.16); transition:top .16s ease-out,left .16s ease-out,width .16s ease-out,height .16s ease-out,opacity .12s; }