/* Edition 04: luminous atmosphere, readable controls, independent lyric scrolling. */
:root{--bg:#f7f8fa;--surface:#fff;--stage:#eef1f3;--ink:#21262b;--muted:#7a838d;--line:#e6eaed;--accent:#138a77;--soft:#e4f3ed;--gold:#a77735;color-scheme:light}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}button,input,textarea,select{font:inherit;box-sizing:border-box}button{cursor:pointer;color:inherit}.back{color:var(--ink);text-decoration:none}.back:hover{color:var(--accent)}
[data-theme="dark"] { --bg:#0d1220; --surface:#141c2a; --stage:#111b2b; --ink:#e6edf2; --muted:#9aa9bb; --line:#263245; --soft:#183536; --accent:#8ee4c8; --gold:#f2ce7c; }
body[data-accent="gold"] { --accent:#b18430; --soft:#f4ead4; }
body[data-accent="violet"] { --accent:#865cc6; --soft:#eee6f7; }
[data-theme="dark"] body[data-accent="gold"] { --accent:#f2ce7c; --soft:#362e22; }
[data-theme="dark"] body[data-accent="violet"] { --accent:#c4acfc; --soft:#2c2442; }
.ambient-scene { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.ambient-scene::before { content:""; position:absolute; inset:-20%; background:radial-gradient(ellipse at 85% 25%,#537f8220,transparent 45%),radial-gradient(ellipse at 55% 90%,#7371b714,transparent 50%); }
.ambient-scene i { position:absolute; border:1px solid #658eb51c; border-radius:50%; width:120px; height:120px; top:20%; right:12%; animation:ambient-drift 24s ease-in-out infinite alternate; }
.ambient-scene i:nth-child(2) { width:180px;height:180px;top:65%;right:31%;animation-delay:-7s; }
.ambient-scene i:nth-child(3) { width:60px;height:60px;top:40%;right:3%;border-radius:8px;transform:rotate(25deg);animation-delay:-12s; }
.ambient-scene i:nth-child(4) { width:9px;height:9px;top:15%;right:29%;background:#f4d57a55;box-shadow:0 0 30px #f4d57a44; }
.ambient-scene i:nth-child(5) { width:50px;height:50px;top:85%;right:8%;border-radius:8px;animation-delay:-5s; }
.ambient-scene i:nth-child(6) { width:4px;height:4px;top:63%;right:17%;background:#bddfff77; }
body[data-scene="plain"] .ambient-scene { display:none; }
body[data-scene="fume"] .ambient-scene::before { filter:blur(35px);background:radial-gradient(ellipse at 70% 40%,#9f6aaa2b,transparent 45%),radial-gradient(ellipse at 95% 65%,#479ba92e,transparent 50%);animation:ambient-drift 18s ease-in-out infinite alternate; }
.app { position:relative;z-index:1;background:transparent; }
.workspace,.main-grid { background:transparent; }
.sidebar { background:color-mix(in srgb,var(--surface) 88%,transparent); }
.stage { position:relative;background:color-mix(in srgb,var(--stage) 65%,transparent); }
.topbar { background:color-mix(in srgb,var(--bg) 85%,transparent); }
.player { background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(22px); }
.catalog-intro { margin-top:8px;font-size:12px;color:var(--muted); }
.eyebrow { font-size:9px;letter-spacing:1.6px; }
.brand-symbol { box-shadow:0 5px 24px #00000012; }
.account-pill { display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:30px;padding:7px 12px;font-size:11px;max-width:150px; }
.account-pill span:last-child { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.account-pill svg { width:15px;height:15px; }
.account-pill:hover { border-color:var(--accent);color:var(--accent);background:var(--soft); }
.searchbar { border-radius:12px;box-shadow:0 5px 22px #00000006;transition:box-shadow .25s,border-color .25s; }
.searchbar:focus-within { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent); }
.search-submit { border-radius:8px; }
.source-tabs { background:color-mix(in srgb,var(--surface) 55%,transparent);padding:3px;border-radius:9px; }
.source-tab { border-radius:6px; }
.source-tab.active { box-shadow:0 2px 8px #00000008; }
.quality-description { color:var(--muted);font-size:10px;padding:8px 0 0; }
.filters { border-bottom:0;padding-bottom:0; }
.list-toolbar { border-top:1px solid var(--line);margin-top:15px; }
.cover-wrap { position:relative;display:block;overflow:hidden;flex-shrink:0;background:var(--line);isolation:isolate; }
.cover-wrap .song-art-fallback { position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,var(--soft),var(--line)); }
.cover-image { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s,transform .4s; }
.cover-image.loaded { opacity:1; }
.song:hover .cover-image { transform:scale(1.08); }
.song { position:relative;animation:row-reveal .3s both;animation-delay:calc(var(--row,0)*18ms); }
.song.playing { box-shadow:inset 2px 0 var(--accent); }
.song-main:hover .song-name { color:var(--accent); }
.song.playing .song-index { font-weight:700; }
.song-actions .icon-btn.active svg { animation:like-pop .35s ease-out; }
.record { transition:box-shadow .5s;border:1px solid color-mix(in srgb,var(--line) 80%,transparent); }
.is-playing .record { box-shadow:0 18px 45px #0002,0 0 25px color-mix(in srgb,var(--accent) 9%,transparent); }
.stage-actions { display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:2px; }
.stage-actions .text-btn { font-size:10px;gap:4px;padding:7px 6px; }
.stage-actions b { font-size:10px;font-weight:500; }
.text-btn.active { color:var(--accent);background:var(--soft); }
.stage-tools { flex-wrap:wrap;gap:8px; }
.lyric-body { mask-image:linear-gradient(transparent,#000 6%,#000 90%,transparent); }
.lyric-line { position:relative;transform-origin:left center; }
body[data-scene="lumi"] .lyric-line.active { color:var(--gold);text-shadow:0 0 25px color-mix(in srgb,var(--gold) 30%,transparent); }
body[data-scene="fume"] .lyric-line:not(.active) { filter:blur(.35px); }
body[data-scene="fume"] .lyric-line.active { color:var(--accent);text-shadow:0 0 28px color-mix(in srgb,var(--accent) 28%,transparent); }
body[data-scene="tilt"] .lyric-line.active { transform:perspective(650px) rotateY(-6deg) rotateZ(-1deg);color:var(--accent); }
.lyric-line.active { animation:lyric-arrive .55s ease-out; }
.focus-mode .stage { background:color-mix(in srgb,var(--bg) 45%,transparent); }
.focus-mode .stage-head .eyebrow { color:var(--accent); }
.focus-mode .lyric-line { font-family:Georgia,"Songti SC","Microsoft YaHei",serif;font-size:calc(var(--lyric-size) + 14px);line-height:1.65; }
.focus-mode .artwork { box-shadow:0 35px 80px #0002;border-radius:12px; }
.focus-mode .stage-meta h2 { font-weight:600;font-size:30px; }
.focus-mode .source-badge { font-size:10px;letter-spacing:1px; }
.is-playing .live-indicator::before { content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--accent);animation:signal-pulse 1.8s ease-in-out infinite; }
.play-btn { transition:transform .18s,box-shadow .25s; }
.play-btn:hover { box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent);transform:scale(1.04); }
.play-btn:active { transform:scale(.91)!important; }
.click-ring { position:fixed;width:40px;height:40px;margin:-20px;z-index:9999;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;animation:click-ring .45s ease-out forwards; }
dialog { border-radius:18px;scrollbar-width:thin;scrollbar-color:var(--line) transparent; }
dialog[open] { animation:dialog-enter .24s ease-out; }
dialog::backdrop { animation:backdrop-enter .2s ease-out; }
[aria-busy="true"] { cursor:wait!important;opacity:.6; }
[aria-busy="true"]::after { content:"";width:11px;height:11px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:turn .75s linear infinite;margin-left:6px; }
.toast { border:1px solid color-mix(in srgb,var(--surface) 15%,transparent);animation:toast-enter .25s ease-out; }
.settings-section { color:var(--accent);font-size:10px;letter-spacing:.7px;padding:18px 0 3px;font-weight:500; }
.settings-section:first-child { padding-top:0; }
.setting-row { gap:10px; }
.setting-row select { max-width:55%; }
.queue-item .cover-wrap { width:32px;height:32px; }
.auth-dialog { width:780px; }
.auth-tabs { display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:9px;margin:20px 0; }
.auth-tabs button { flex:1;padding:9px;border-radius:6px;font-size:12px;color:var(--muted); }
.auth-tabs button.active { background:var(--surface);color:var(--accent);box-shadow:0 2px 8px #0001; }
.auth-field { display:grid;gap:8px;margin:16px 0;color:var(--muted);font-size:12px; }
.auth-field input,.comment-form textarea { padding:12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;width:100%; }
.auth-submit { width:100%;min-height:42px; }
.auth-logout { display:block;width:100%;margin-top:20px;border:1px solid var(--line);padding:12px; }
.comments-dialog { width:620px; }
.comments-dialog .dialog-head h2 { font-size:20px; }
.comments-dialog .dialog-head small { display:block;margin-top:5px;font-size:12px;overflow-wrap:anywhere; }
.community-toolbar { display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:10px; }
.community-toolbar label { color:var(--muted);font-size:11px; }
.comment-form textarea { min-height:96px;resize:vertical;line-height:1.7; }
.comment-form>div { display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px; }
#commentHint { color:var(--muted);font-size:11px; }
.comment-card { display:flex;gap:12px;padding:18px 0;border-top:1px solid var(--line);animation:row-reveal .25s ease-out; }
.comment-card.pinned { background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent);padding-left:10px;padding-right:10px;border-radius:9px; }
.pinned-label { color:var(--gold);font-size:10px;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);border-radius:4px;padding:2px 5px;margin-right:7px; }
.comment-avatar { flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--soft);font-size:12px; }
.comment-content { flex:1;min-width:0; }
.comment-head { display:flex;justify-content:space-between;gap:12px;align-items:baseline; }
.comment-head strong { font-size:12px;font-weight:600;overflow-wrap:anywhere; }
.comment-user { color:var(--accent);font-size:12px;font-weight:600;padding:0;text-align:left; }
.comment-head time { flex-shrink:0;color:var(--muted);font-size:10px; }
.comment-text { padding:9px 0;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere; }
.comment-actions { display:flex;gap:8px; }
.comment-actions .text-btn { padding:4px 7px; }
body[data-density="compact"] .song { min-height:51px;padding-top:6px;padding-bottom:6px; }
body[data-density="compact"] .song-art { width:32px;height:32px; }
@keyframes ambient-drift { to { translate:20px -30px;rotate:12deg; } }
@keyframes row-reveal { from { opacity:0;translate:0 7px; } to { opacity:1;translate:0 0; } }
@keyframes like-pop { 50% { transform:scale(1.25); } }
@keyframes lyric-arrive { from { opacity:.35;translate:0 5px; } to { opacity:1;translate:0 0; } }
@keyframes signal-pulse { 50% { opacity:.3;box-shadow:0 0 9px var(--accent); } }
@keyframes click-ring { from { transform:scale(.3);opacity:.7; } to { transform:scale(1.6);opacity:0; } }
@keyframes dialog-enter { from { opacity:0;translate:0 12px;scale:.98; } to { opacity:1;translate:0 0;scale:1; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }
@keyframes toast-enter { from { opacity:0;translate:0 10px; } to { opacity:1;translate:0 0; } }
@media (max-width:1100px) { .stage-actions { gap:0; }.stage-actions .text-btn { padding:5px 4px; }.stage-tools { gap:3px; } }
@media (max-width:850px) {
  .sidebar { grid-template-columns:minmax(0,1fr) auto auto;gap:7px; }
  #communityNav { grid-column:3;grid-row:1;width:auto;font-size:10px;gap:5px; }
  #mvNav { font-size:10px;gap:5px; }
  .sidebar nav { grid-column:1/-1; }
  .sidebar .brand h1 { font-size:16px; }
  .topbar { padding:0 14px; }
  .top-actions { gap:3px; }
  .account-pill { padding:6px 8px;max-width:112px;font-size:10px; }
  .account-pill svg { width:13px;height:13px; }
  .breadcrumb { font-size:10px; }.breadcrumb>span { padding:0 5px; }
  .top-actions .icon-btn { width:31px;height:33px; }
  .catalog-intro { margin-top:5px;font-size:11px; }
  .catalog { padding-top:18px; }
  .source-tabs { gap:0; }.source-tab { font-size:10px;padding:6px 7px; }
  .filter-row { gap:6px; }.filter-label { flex-basis:24px; }
  .table-heading,.song { grid-template-columns:20px minmax(0,1fr) 30px 94px;gap:6px; }
  .focus-mode .stage { padding:12px 20px; }
  .focus-mode .stage-song { padding:10px 0;gap:14px; }
  .focus-mode .artwork { width:72px;height:72px;flex-basis:72px; }
  .focus-mode .stage-meta h2 { font-size:20px; }
  .focus-mode .lyric-line { font-size:calc(var(--lyric-size) + 2px);line-height:1.7; }
  .focus-mode .stage-tools { flex:0 0 auto;padding:6px 0; }
  .stage-actions .text-btn { font-size:10px;padding:6px 4px; }
  .segmented button { padding:6px 8px; }
  .queue-item { gap:5px; }.queue-item>.icon-btn { width:27px; }.queue-item>.song-index { width:16px; }
}
@media(max-width:380px) {
  .sidebar { padding-left:12px;padding-right:12px; }
  .sidebar .brand h1 { font-size:14px; }.brand-symbol { width:26px;height:26px; }
  #mvNav>span:last-child { display:none; }
  .breadcrumb { display:none; }.topbar { justify-content:flex-end; }
  .table-heading,.song { grid-template-columns:18px minmax(0,1fr) 0 87px;gap:5px; }.song-time,.table-heading>span:nth-child(3) { visibility:hidden; }
  .song-actions .icon-btn { width:28px; }
  .comments-dialog { padding:16px; }
  .comment-head { flex-wrap:wrap;gap:3px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important; }.click-ring { display:none; } }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation:none!important;transition:none!important; }

.mobile-actions{display:none}
@media(max-width:850px){
  html,body{max-width:100%;overflow-x:hidden}
  .main-grid{overflow:hidden}
  .catalog{overflow-x:hidden;overflow-y:auto;padding-left:12px;padding-right:12px;padding-bottom:145px}
  .section-heading{align-items:flex-start;gap:4px}.section-heading h2{font-size:23px}.count-label{padding-top:9px;font-size:10px}
  .searchbar{height:46px}.search-tools{min-height:30px;margin-bottom:8px}
  .filters{gap:8px}.filter-row:first-child{display:block}.filter-row:first-child .filter-label{display:block;margin-bottom:5px}.source-tabs{display:flex;overflow-x:auto;max-width:100%;scrollbar-width:none;white-space:nowrap}.source-tabs::-webkit-scrollbar{display:none}
  .filter-row:nth-child(2){display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px}.filter-row:nth-child(2) .source-note{grid-column:2;font-size:9px}.filter-row:nth-child(2) select{width:100%}
  .quality-description{padding:5px 0 2px;font-size:9px}
  .mobile-actions{display:flex;gap:5px;overflow-x:auto;padding:9px 0 4px;border-bottom:1px solid var(--line);scrollbar-width:none}.mobile-actions::-webkit-scrollbar{display:none}.mobile-actions .text-btn{flex:0 0 auto;border:1px solid var(--line);background:var(--surface);padding:7px 10px;font-size:10px}.mobile-actions .text-btn:active{background:var(--soft)}
  .list-toolbar{margin-top:8px;padding-top:10px}.toolbar-actions .text-btn{font-size:10px}.table-heading{grid-template-columns:20px minmax(0,1fr) 40px;gap:6px;padding-left:4px;padding-right:4px}.table-heading>span:nth-child(4){display:none}.song{grid-template-columns:20px minmax(0,1fr) 40px;gap:6px;padding:9px 4px;min-height:61px}.song-actions{display:none}.song-main{gap:8px}.song-name{font-size:12px}.song-meta{font-size:9px;margin-top:2px}.song-art,.song-art-fallback{width:36px;height:36px}.song-time{font-size:9px;text-align:right}.catalog-empty{padding:35px 8px}
  .topbar{min-width:0}.top-actions{min-width:0}.account-pill{max-width:98px}.top-actions .icon-btn{flex:0 0 30px}
}
@media(max-width:380px){.catalog{padding-left:10px;padding-right:10px}.account-pill{max-width:82px}.account-pill span:last-child{display:none}.table-heading{grid-template-columns:18px minmax(0,1fr) 34px}.song{grid-template-columns:18px minmax(0,1fr) 34px}.song-art,.song-art-fallback{width:32px;height:32px}.song-main{gap:6px}.song-name{font-size:11px}.song-meta{max-width:calc(100vw - 120px)}.mobile-actions .text-btn{padding:6px 8px}.controls .icon-btn{width:29px}}