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; top: 0; right: 0; bottom: 0; left: 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: #16171b; --card: #1c1d22;
  --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: #16171b; --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: #16171b; }
body[data-theme="t4"] #bg { filter: none; background: #141519; }
body[data-theme="t4"].hasbg .bg-photo { opacity: 0 !important; }
#sparks { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0; transition: opacity .9s ease; }
body[data-theme="t4"] #sparks { opacity: 1; }
body[data-theme="t4"] .bg-photo { opacity: 0; }
body[data-theme="t4"] .bg-photo.show { opacity: var(--photomix, .3); }
body[data-theme="t4"] #main { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(22,23,27,.9), rgba(17,18,22,.86)); }
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: #131419; border-right: 1px solid var(--hair); }
body[data-theme="t4"] #player { background: rgba(22, 23, 27, .96); border-top-color: var(--hair); box-shadow: none; }
body[data-theme="t4"] .row.playing { color: var(--ink); }
body[data-theme="t3"] .row-play,
body[data-theme="t4"] .row-play { background: rgba(255, 255, 255, .14); color: var(--ink); }
body[data-theme="t3"] .row:hover .row-play,
body[data-theme="t4"] .row:hover .row-play,
body[data-theme="t3"] .row-play:hover,
body[data-theme="t4"] .row-play:hover { background: var(--teal); color: #0b0b0d; }
body[data-theme="t4"] .row.playing .row-play { background: var(--ink); color: #0b0b0d; }
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: #1c1d22; border: 1px solid var(--hair); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8); }
body[data-theme="t4"] .dd-menu { background: #1c1d22; 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: #1c1d22; 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"] #toasts .toast { background: #202127; 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; top: 0; right: 0; bottom: 0; left: 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); }
body[data-theme="t4"] .guide { padding: 30px 32px; }
body[data-theme="t4"] .note-card { border-color: rgba(255, 255, 255, .08); }
body[data-theme="t4"].hasbg .bg-photo.show { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { #sparks { display: none; } }
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); }