/* ============ 主题层：t1 浅-极简(M3) · t2 浅-清新(默认) · t3 深-通透 · t4 深-沉浸 ============ */
body { transition: background-color .25s, color .25s; }
#sidebar, #player, .ctxmenu, .modal, .row, .card-cover, .search-box, .chip, .note-card { transition: background-color .25s, border-color .25s, color .25s; }

/* ---------- ① 浅-极简 · 白 × 靛蓝（工业感的干净，无描边卡片、无阴影堆叠） ---------- */
body[data-theme="t1"] {
  --paper: #fbfbfa; --card: #ffffff;
  --ink: #16181a; --ink-2: #55585c; --ink-3: #90949a;
  --hair: rgba(22, 24, 26, .07); --hair-2: rgba(22, 24, 26, .12); --hair-e: transparent;
  --teal: #1e4fd6; --teal-deep: #2c5ae0; --teal-wash: #eef2fd;
  --hover: #f2f2f0; --accent-soft: #eef2fd; --img-bg: #ededeb;
  --scr: #dcdcd8; --scr-h: #c3c3be; --wash: .985; --photo-sat: 0; --cs: light;
  --field: #f2f2f0; --r-sm: 7px; --r-md: 10px; --red: #b3261e;
}
/* 描边与阴影退场，层级交给留白与色差 */
body[data-theme="t1"] #sidebar, body[data-theme="t1"] #player { border: none; box-shadow: none; background: transparent; }
body[data-theme="t1"] #sidebar { background: #f6f6f4; }
body[data-theme="t1"] .search-box { background: var(--field); border: 1.5px solid transparent; box-shadow: none; transition: border-color .15s, background .15s; }
body[data-theme="t1"] .search-box:focus-within { border-color: var(--teal); background: var(--card); }
body[data-theme="t1"] .chip { background: none; border: none; color: var(--ink-2); padding: 6px 12px; position: relative; }
body[data-theme="t1"] .chip:hover { color: var(--ink); }
body[data-theme="t1"] .chip.active { background: none; color: var(--teal); font-weight: 600; }
body[data-theme="t1"] .chip.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--teal); border-radius: 2px; }
body[data-theme="t1"] .line-btn { border-bottom-color: var(--hair); background: none; }
body[data-theme="t1"] .side-btns .line-btn:first-child { border-top-color: var(--hair); }
body[data-theme="t1"] .guide, body[data-theme="t1"] .note-card, body[data-theme="t1"] .album-hero, body[data-theme="t1"] .ctxmenu, body[data-theme="t1"] .dd-menu { box-shadow: none; background: var(--card); border-color: var(--hair); }
body[data-theme="t1"] .ctxmenu { border-radius: 10px; box-shadow: 0 12px 32px -12px rgba(22,24,26,.22); }
body[data-theme="t1"] .dd-menu { border-radius: 10px; box-shadow: 0 12px 32px -12px rgba(22,24,26,.22); }
body[data-theme="t1"] .dd-btn { border: none; background: var(--card); box-shadow: inset 0 0 0 1px var(--hair-2); }
body[data-theme="t1"] .ctx-opt { padding: 8px 10px; }
body[data-theme="t1"] .ctx-opt.on { color: var(--teal-deep); background: var(--teal-wash); }
body[data-theme="t1"] .row { border-bottom-color: transparent; border-radius: 9px; padding: 6px 10px; }
body[data-theme="t1"] .row:hover { background: var(--hover); }
body[data-theme="t1"] .row.playing { background: var(--teal-wash); box-shadow: none; }
body[data-theme="t1"] .stab.active { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--teal); }
body[data-theme="t1"] .card-cover { border: none; border-radius: 9px; box-shadow: none; }
body[data-theme="t1"] .card:hover .card-cover { border-color: transparent; box-shadow: 0 1px 8px rgba(22,24,26,.16); }
body[data-theme="t1"] .play-btn { background: var(--teal); }
body[data-theme="t1"] .play-btn:hover { background: var(--teal-deep); }
body[data-theme="t1"] .icon-btn:hover { background: var(--hover); }
body[data-theme="t1"] #expandBtn { background: none; border: none; }
body[data-theme="t1"] .quality-badge { background: none; color: var(--teal-deep); border: 1px solid var(--hair-2); }
body[data-theme="t1"] .quality-badge:hover { background: var(--teal-wash); }
body[data-theme="t1"] .row-cover { border-radius: 7px; }
body[data-theme="t1"] .p-cover { border-radius: 6px; }
body[data-theme="t1"] .tag { background: var(--paper); border-color: var(--hair-2); }
body[data-theme="t1"] .tag.q { background: none; }
body[data-theme="t1"] .modal { border: none; box-shadow: 0 16px 40px -10px rgba(22,24,26,.3); }
body[data-theme="t1"] .note-card { background: var(--card); border-left: none; }
body[data-theme="t1"] .engine-hint, body[data-theme="t1"] .side-foot { color: var(--ink-3); }
body[data-theme="t1"]::-webkit-scrollbar-track,
body[data-theme="t1"] .guide-kbd kbd { background: var(--field); border-color: var(--hair); }
body[data-theme="t1"] #sidebar, body[data-theme="t1"] .list { scrollbar-color: var(--scr) transparent; }

/* ---------- ③ 深-通透 · 重构初版玻璃 ---------- */
body[data-theme="t3"] {
  --paper: #12151c; --card: rgba(255, 255, 255, .055);
  --ink: #eaedf4; --ink-2: rgba(234, 237, 244, .64); --ink-3: rgba(234, 237, 244, .4);
  --hair: rgba(255, 255, 255, .085); --hair-2: rgba(255, 255, 255, .17); --hair-e: rgba(255, 255, 255, .1);
  --teal: #52d8c0; --teal-deep: #8fe8d6; --teal-wash: rgba(82, 216, 192, .11);
  --hover: rgba(255, 255, 255, .075); --accent-soft: rgba(82, 216, 192, .17); --img-bg: rgba(255, 255, 255, .09);
  --scr: rgba(255, 255, 255, .16); --scr-h: rgba(255, 255, 255, .3);
  --wash: .62; --washbg: #0f1219; --photo-sat: .95; --cs: dark;
  --field: rgba(255, 255, 255, .07); --red: #ff8a76;
}
body[data-theme="t3"] #bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(46% 40% at 12% 0%, rgba(35, 120, 170, .14), transparent 60%), radial-gradient(42% 36% at 88% 10%, rgba(110, 70, 190, .14), transparent 60%), radial-gradient(50% 42% at 60% 108%, rgba(40, 150, 120, .12), transparent 62%); }
body[data-theme="t3"] #sidebar, body[data-theme="t3"] #player { background: rgba(15, 19, 27, .72); backdrop-filter: blur(34px) saturate(1.5); -webkit-backdrop-filter: blur(34px) saturate(1.5); }
/* 「通透」= 面板透、内容可读：主区铺一层暗色磨砂底，文字不再压在亮部背景上 */
body[data-theme="t3"] #main { background: linear-gradient(180deg, rgba(10, 13, 19, .5), rgba(10, 13, 19, .62)); }
body[data-theme="t3"] .search-tabs { border-bottom-color: var(--hair); }
body[data-theme="t3"] .row { border-bottom-color: transparent; }
body[data-theme="t3"] .row:hover { background: rgba(255, 255, 255, .085); border-radius: 8px; }
body[data-theme="t3"] .row-cover.noimg { filter: invert(1) opacity(.6); }
body[data-theme="t3"] .list { scrollbar-color: var(--scr) transparent; }
body[data-theme="t3"] .ctxmenu { background: rgba(20, 24, 32, .92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
body[data-theme="t3"] .modal { background: rgba(20, 24, 32, .94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body[data-theme="t3"] .modal-mask { background: rgba(6, 8, 12, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
body[data-theme="t3"] .chip.active { background: var(--teal); border-color: var(--teal); color: #06251e; }
body[data-theme="t3"] .album-hero img, body[data-theme="t3"] .p-cover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
body[data-theme="t3"] #player { box-shadow: 0 -1px 0 var(--hair); }
body[data-theme="t3"] .guide { background: rgba(255, 255, 255, .04); }
body[data-theme="t3"] .row-cover.noimg { filter: invert(1) opacity(.5); }
body[data-theme="t3"] .ctx-opt.on::after { color: var(--teal); }
body[data-theme="t3"] .toast { background: rgba(28, 32, 40, .95); }

/* ---------- ④ 深-沉浸 · 纯黑舞台，光只落在该亮的地方 ---------- */
body[data-theme="t4"] {
  --paper: #000000; --card: #0b0b0d;
  --ink: #f2f2ee; --ink-2: #97999b; --ink-3: #5a5c60;
  --hair: rgba(255, 255, 255, .06); --hair-2: rgba(255, 255, 255, .11); --hair-e: rgba(255, 255, 255, .06);
  --teal: #e6e2d6; --teal-deep: #ffffff; --teal-wash: rgba(255, 255, 255, .05);
  --hover: rgba(255, 255, 255, .05); --accent-soft: rgba(255, 255, 255, .08); --img-bg: rgba(255, 255, 255, .07);
  --scr: rgba(255, 255, 255, .13); --scr-h: rgba(255, 255, 255, .28);
  --wash: .8; --washbg: #000000; --photomix: .3; --photo-sat: .7; --cs: dark;
  --field: rgba(255, 255, 255, .05); --r-sm: 5px; --r-md: 7px; --red: #e88f77;
}
body[data-theme="t4"] { color-scheme: dark; background: #000; }
/* ---- 主题④ 深-沉浸 v2：纯黑 + 灰色浮光 ---- */
body[data-theme="t4"] #bg { filter: none; background: #000; }
body[data-theme="t4"].hasbg .bg-photo { opacity: 0 !important; }
#t4dust i { position: fixed; left: var(--l); top: var(--t); width: var(--s,2px); height: var(--s,2px);
  border-radius: 50%; background: radial-gradient(circle, rgba(232,234,232,.55), transparent 70%);
  opacity: 0; pointer-events: none; animation: floatdust var(--d) ease-in-out var(--dl) infinite; }
@keyframes floatdust {
  0% { opacity: 0; transform: translateY(0) scale(1); }
  10% { opacity: .34; } 45% { opacity: .8; } 65% { opacity: .2; }
  100% { opacity: 0; transform: translateY(-72px) scale(1.35); }
}
body[data-theme="t4"] .bg-photo { opacity: 0; }
body[data-theme="t4"] .bg-photo.show { opacity: var(--photomix, .3); }
body[data-theme="t4"] #main { background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(2,2,3,.88)); }
body[data-theme="t4"] .list, body[data-theme="t4"] .search-tabs { background: none; }
body[data-theme="t4"] .row:hover { background: rgba(255, 255, 255, .06); }
body[data-theme="t4"] #sidebar { background: #000; border-right: 1px solid var(--hair); }
body[data-theme="t4"] #player { background: rgba(6, 6, 7, .96); border-top-color: var(--hair); box-shadow: none; }

body[data-theme="t4"] .row.playing { color: var(--ink); }
body[data-theme="t4"] .card-cover { border-color: transparent; }
body[data-theme="t4"] .search-box { border-color: transparent; background: var(--field); }
body[data-theme="t4"] .search-box:focus-within { border-color: var(--teal); }
body[data-theme="t4"] .theme-btn,
body[data-theme="t4"] .chip { border-color: var(--hair); }
body[data-theme="t4"] .theme-btn:hover,
body[data-theme="t4"] .chip:hover { border-color: var(--hair-2); background: none; }
body[data-theme="t4"] .theme-btn.active,
body[data-theme="t4"] .chip.active { background: var(--ink); color: #0a0a0a; border-color: var(--ink); font-weight: 600; }
body[data-theme="t4"] .note-card { border-color: var(--hair); background: var(--card); border-left: none; }
body[data-theme="t4"] .ctxmenu { background: #101012; border: 1px solid var(--hair); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
body[data-theme="t4"] .dd-menu { background: #101012; border-color: var(--hair); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .85); }
body[data-theme="t4"] .ctx-opt:hover { background: var(--hover); }
body[data-theme="t4"] .ctx-opt.on { background: none; color: var(--teal); }
body[data-theme="t4"] .modal { background: #0b0b0d; border-color: var(--hair); }
body[data-theme="t4"] .modal-mask { background: rgba(0, 0, 0, .78); backdrop-filter: none; -webkit-backdrop-filter: none; }
body[data-theme="t4"] .card-cover { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .92); }
body[data-theme="t4"] .album-hero img { box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .9); }
body[data-theme="t4"] .album-hero img, body[data-theme="t4"] .p-cover { border-color: var(--hair); }
body[data-theme="t4"] #progressLine:hover #progressThumb { transform: translate(-50%, -50%) scale(1); }
body[data-theme="t4"] .imm-bg img { filter: blur(90px) brightness(.4) saturate(1.2); }
body[data-theme="t4"] .imm-scrim { background: radial-gradient(120% 90% at 25% 30%, rgba(0, 0, 0, .4), rgba(0, 0, 0, .76) 85%); }
body[data-theme="t4"] #toasts .toast { background: #17171a; border: 1px solid var(--hair); }
body[data-theme="t4"] .eq i { background: var(--teal); }
/* 浮光：一道扫过的细高光——只落在悬停封面与正在播放的行上 */
body[data-theme="t4"] .card-cover, body[data-theme="t4"] .row-cover { position: relative; }
body[data-theme="t4"] .card-cover, body[data-theme="t4"] .row.playing .row-cover { isolation: isolate; }
body[data-theme="t4"] .card:hover .card-cover::after,
body[data-theme="t4"] .row.playing .row-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.17) 50%, transparent 58%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: glimmer .9s ease-out;
}
body[data-theme="t4"] .row.playing .row-cover::after { animation: glimmer 3s ease-in-out .6s infinite; }
@keyframes glimmer { from { background-position: 165% 0; } to { background-position: -65% 0; } }
@media (prefers-reduced-motion: reduce) { body[data-theme="t4"] .card:hover .card-cover::after, body[data-theme="t4"] .row.playing .row-cover::after { animation: none; } }

/* —— 补充：深色系下收纳式下拉的可读性 —— */
body[data-theme="t3"] .dd-menu {
  background: rgba(16, 19, 27, .94);
  backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3);
  border-color: rgba(255, 255, 255, .16); color: var(--ink);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .82);
}
body[data-theme="t3"] .dd-btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: var(--ink); }
body[data-theme="t3"] .dd-btn:hover { border-color: rgba(255, 255, 255, .32); }
body[data-theme="t3"] .dd-opt.on { background: rgba(82, 216, 192, .18); }
body[data-theme="t3"] .dd-foot { color: rgba(255, 255, 255, .42); border-top-color: rgba(255, 255, 255, .1); }

body[data-theme="t4"] .dd-opt { color: var(--ink); }
body[data-theme="t4"] .dd-opt.on { background: var(--teal); color: #14151a; font-weight: 600; }
body[data-theme="t4"] .dd-opt.on .dd-lat { color: #14151a; }
body[data-theme="t4"] .dd-opt:hover { background: rgba(255, 255, 255, .07); }
body[data-theme="t4"] .dd-menu { border-color: rgba(255, 255, 255, .09); }
body[data-theme="t4"] .dd-btn { background: var(--field); border-color: transparent; color: var(--ink); }
body[data-theme="t4"] .dd-btn:hover { border-color: var(--hair-2); }
body[data-theme="t4"] .dd-btn[aria-expanded="true"] { border-color: var(--teal-deep); }
body[data-theme="t4"] .dd-label { color: rgba(255, 255, 255, .38); }
/* t4：歌词层级与引导卡呼吸感（走查补充） */
body[data-theme="t4"] .lrc-line { opacity: .58; filter: blur(.5px); }
body[data-theme="t4"] .lrc-line.active { color: #fff; opacity: 1; }
body[data-theme="t4"] .guide { padding: 30px 32px; }
body[data-theme="t4"] .note-card { border-color: rgba(255, 255, 255, .08); }


/* ---- 沉浸模式播放/暂停键：三主题统一的高可见样式 ---- */
#immPlay {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center; cursor: pointer; border: none;
  box-shadow: 0 10px 26px -6px rgba(0, 0, 0, .65), 0 0 0 1px var(--hair-2);
  transition: transform .14s, background .2s;
}
#immPlay:hover { transform: scale(1.06); }
#immPlay .ic { width: 24px; height: 24px; }
#immPlay .ic-pause { display: none; }
#immPlay.playing .ic-play { display: none; }
#immPlay.playing .ic-pause { display: block; }
body[data-theme="t1"] #immPlay { background: #1e4fd6; color: #fff; }
body[data-theme="t3"] #immPlay { background: var(--ink); color: #12151c; }
body[data-theme="t4"] #immPlay { background: #f2f2ee; color: #0a0b0c; box-shadow: 0 0 0 1px rgba(242,242,238,.18), 0 10px 30px -8px rgba(0,0,0,.8); }
body[data-theme="t4"].hasbg .bg-photo.show { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { #t4dust i { animation: none; display: none; } }

/* ---- 播放键前景修正：浅强调色底 + 深图标（t3/t4 白图在亮底上仅 1.3~1.7:1）---- */
body[data-theme="t3"] .play-btn { color: #06251d; }
body[data-theme="t4"] .play-btn { color: #0a0b0c; }
body[data-theme="t4"] #qualityPop .ctx-opt.on { color: var(--teal); }