.admin-entry { display:flex;align-items:center;gap:6px;font-size:11px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;white-space:nowrap;color:var(--accent); }
.member-locked{opacity:.5;cursor:pointer}.member-locked::after{content:'登录';font-size:9px;color:var(--muted)}.quality-switching #actualQuality{animation:studio-breathe 1.4s ease-in-out infinite}.quality-switching #qualitySelect{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
body,.sidebar,.stage,.topbar,.player,.catalog,dialog,.studio-section,.studio-preview,.song,.account-pill,.download-card { transition:background-color .55s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease; }
body[data-accent="rose"]{--accent:#bd5277;--soft:#f6e7ed}body[data-accent="ocean"]{--accent:#267ba8;--soft:#e3f0f6}body[data-accent="sunset"]{--accent:#bb6b30;--soft:#f8eddf}body[data-accent="mono"]{--accent:#52636b;--soft:#e8edef}
[data-theme="dark"] body[data-accent="rose"]{--accent:#f2a4c1;--soft:#38212f}[data-theme="dark"] body[data-accent="ocean"]{--accent:#91d5ed;--soft:#1a3243}[data-theme="dark"] body[data-accent="sunset"]{--accent:#efbd8b;--soft:#3c2e26}[data-theme="dark"] body[data-accent="mono"]{--accent:#c8d3db;--soft:#2a323a}
.social-nav .nav-item{text-decoration:none}.sidebar{overflow-y:auto}.secondary-label{margin-top:16px}.sidebar .brand{margin-bottom:24px}
.song { position:relative;isolation:isolate;overflow:hidden; }.song.playing { background:color-mix(in srgb,var(--soft) 35%,transparent); }.song.playing::before { content:'';position:absolute;inset:0 auto 0 0;width:var(--played,0%);background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 25%,transparent));border-right:1px solid color-mix(in srgb,var(--accent) 65%,transparent);z-index:-1;transition:width .35s linear; }.song.playing .song-time { color:var(--accent);font-size:9px;white-space:normal;line-height:1.5; }.song-time{min-width:0}
@media(max-width:850px){.sidebar{overflow:visible}.social-nav{display:flex;grid-column:1/-1;overflow-x:auto;gap:5px;scrollbar-width:none}.social-nav .nav-item{flex:0 0 auto;width:auto;min-height:32px;padding:6px 8px;margin:0;font-size:10px;gap:5px}.social-nav .nav-item svg{width:13px;height:13px}.sidebar .brand{margin-bottom:0}.song.playing .song-time{font-size:8px}.sidebar{padding-bottom:8px}.app{grid-template-rows:minmax(0,1fr) 104px}}
.admin-entry svg { width:15px;height:15px; }.admin-entry:hover { background:var(--soft);border-color:var(--accent); }
.main-grid,.catalog,.stage{min-width:0}.catalog{overflow-x:hidden}.song-main,.song-text{min-width:0}.song-name,.song-meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-actions{min-width:0}.comment-card{transition:background .2s,transform .2s}.comment-card:hover{background:color-mix(in srgb,var(--soft) 45%,transparent);border-radius:12px;padding-left:12px;padding-right:12px;transform:translateY(-1px)}.comment-actions .text-btn{border-radius:999px}.comment-actions .text-btn.active{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}.guest-composer textarea{cursor:pointer;opacity:.82}.comments-status{min-height:20px}
.download-card { --progress:0%;display:flex;align-items:center;gap:16px;margin:18px 0 8px;padding:18px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:18px;background:linear-gradient(120deg,var(--surface),color-mix(in srgb,var(--soft) 50%,var(--surface)));transition:border-color .3s,background .3s; }
.download-orbit { --progress:0%;flex:0 0 58px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--accent) var(--progress),var(--line) 0); }
.download-orbit:before { content:'';position:absolute;inset:3px;background:var(--surface);border-radius:50%; }.download-orbit span { position:relative;font-size:13px;font-variant-numeric:tabular-nums;color:var(--accent); }
.download-card[data-state="resolve"] .download-orbit:after { content:'';position:absolute;inset:-4px;border:1px solid transparent;border-top-color:var(--accent);border-radius:50%;animation:turn 1.2s linear infinite; }
.download-copy { flex:1;min-width:0; }.download-heading { display:flex;gap:10px;align-items:center;justify-content:space-between; }.download-heading strong { font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.download-badge { font-size:9px;color:var(--accent);border:1px solid var(--line);border-radius:6px;padding:2px 6px;white-space:nowrap; }
.download-card .cache-status { font-size:10px;padding:6px 0;line-height:1.6; }.download-details { display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:9px;font-variant-numeric:tabular-nums; }
.download-card .cache-progress { appearance:none;border:0;border-radius:6px;height:5px;background:var(--line);overflow:hidden;width:100%;margin:5px 0 8px; }.cache-progress::-webkit-progress-bar{background:var(--line)}.cache-progress::-webkit-progress-value { background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:6px;transition:width .3s; }.cache-progress::-moz-progress-bar{background:var(--accent)}
.download-card[data-state="resolve"] .cache-progress { background:linear-gradient(90deg,var(--line),var(--accent),var(--line));background-size:220% 100%;animation:cache-flow 1.5s linear infinite; }.download-card[data-state="ready"] { border-color:var(--accent); }.download-card[data-state="error"] { border-color:#c66b78; }
.network-hint { display:flex;gap:8px;align-items:center;flex-wrap:wrap;border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);border-radius:12px;padding:12px;font-size:11px;color:var(--gold); }.network-hint span { flex:1;min-width:150px; }
.settings-dialog { width:760px;padding:28px;border-radius:22px; }.settings-dialog .dialog-head h2 { font-size:24px; }.studio-preview { display:flex;align-items:center;gap:25px;min-height:180px;border:1px solid var(--line);border-radius:18px;padding:26px;background:radial-gradient(ellipse at top left,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface) 75%);overflow:hidden;position:relative; }
.preview-disc { flex:0 0 105px;height:105px;border-radius:50%;background:repeating-radial-gradient(#182e2a 0 2px,#2b4540 3px 4px);display:grid;place-items:center;box-shadow:0 15px 25px #0003; }.preview-disc span { display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--surface);width:40px;height:40px;font-size:12px; }.preview-words { min-width:0;flex:1; }.preview-words p { margin:12px 0 7px;line-height:1.6;overflow-wrap:anywhere;transition:font-size .12s; }.preview-words small { font-size:10px;color:var(--muted); }.preview-bars { display:flex;gap:4px;height:24px;align-items:center;margin-top:12px; }.preview-bars i { width:3px;height:12px;border-radius:3px;background:var(--accent);animation:studio-wave 1.2s ease-in-out infinite;animation-delay:calc(var(--i)*-0.12s); }
.studio-preview[data-animation="vinyl"] .preview-disc { animation:turn 16s linear infinite; }.studio-preview[data-animation="cover"] .preview-disc { animation:studio-breathe 4s ease-in-out infinite; }.studio-preview[data-animation="off"] * { animation:none; }.studio-preview[data-scene="fume"] { background:radial-gradient(ellipse at bottom right,#865cc640,var(--surface)); }.studio-preview[data-scene="plain"] { background:var(--surface); }.studio-preview[data-scene="tilt"] .preview-disc { transform:rotate(-20deg); }
.settings-body { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px; }.studio-section { min-width:0;padding:16px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 85%,var(--bg)); }.settings-section { padding:0 0 10px;font-size:11px; }.setting-row { flex-wrap:wrap;gap:10px;padding:14px 0; }.setting-row>span,.setting-row>label { font-size:11px;color:var(--muted); }.studio-choices-row { display:block; }.studio-choices { display:flex;flex-wrap:wrap;gap:6px;margin-top:9px; }.studio-choices button { padding:8px 10px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:11px;transition:transform .2s,background .2s,border-color .2s; }.studio-choices button:hover { border-color:var(--accent); }.studio-choices button.selected { color:var(--accent);background:var(--soft);border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); }.setting-row input[type=range] { width:100%;order:2;flex:1 0 100%;accent-color:var(--accent); }.setting-row output { color:var(--accent);font-variant-numeric:tabular-nums;font-size:12px; }.setting-row select { border-radius:8px; }.studio-footnote { font-size:10px;color:var(--muted);text-align:center;padding:18px 0 0; }
.queue-dialog { border-radius:20px;width:560px; }.queue-explainer { color:var(--muted);font-size:11px;line-height:1.8;margin-bottom:12px; }.queue-item { padding:13px 8px;border-radius:10px; }.queue-item.playing { background:var(--soft); }.queue-toolbar { padding:10px 0; }.diagnostics-dialog { width:520px;border-radius:20px; }.diagnostics-dialog>p { font-size:12px;color:var(--muted);line-height:1.8; }#diagnosticResults { padding-left:22px; }#diagnosticResults li { margin:18px 0; }#diagnosticResults p { color:var(--muted);font-size:12px;margin-top:7px; }.check-good::marker{color:var(--accent)}.check-warn::marker{color:var(--gold)}
.comments-dialog { width:700px;border-radius:22px;padding:26px; }.comment-section-label { display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:20px;font-size:11px;color:var(--muted); }.comment-card { padding:22px 0; }.comment-avatar { overflow:hidden;width:40px;height:40px;flex-basis:40px;position:relative; }.comment-avatar img { width:100%;height:100%;position:absolute;object-fit:cover; }.comment-text { line-height:1.9; }.comment-head { justify-content:flex-start; }.comment-head time { margin-left:auto; }.comment-card.pinned { padding:18px 12px;background:linear-gradient(100deg,var(--soft),transparent); }.comment-divider { padding:20px 0 4px;font-size:14px;font-weight:650; }.comments-dialog .comment-form textarea { background:var(--bg);min-height:90px;border-radius:13px; }.song .song-actions .queue-add { color:var(--accent); }
@keyframes studio-wave {50%{height:24px;opacity:.4}}@keyframes studio-breathe {50%{scale:1.045}}@keyframes cache-flow {to{background-position:-220% 0}}
@media(max-width:850px){.top-actions{gap:3px}.admin-entry{padding:6px;font-size:10px}.admin-entry svg{display:none}.song{grid-template-columns:18px minmax(0,1fr) 32px 32px}.song-actions{display:flex!important;width:32px}.song-actions>.icon-btn{display:none}.song-actions>.queue-add{display:inline-grid;width:32px;height:36px}.table-heading{grid-template-columns:18px minmax(0,1fr) 32px 32px}.song-time{visibility:visible}.download-card{padding:12px;gap:10px}.download-orbit{width:48px;height:48px;flex-basis:48px}.download-heading strong{font-size:12px}.download-badge{max-width:78px;overflow:hidden;text-overflow:ellipsis}.settings-body{grid-template-columns:1fr}.settings-dialog{padding:18px}.studio-preview{gap:16px;padding:18px}.preview-disc{flex-basis:76px;height:76px}.comments-dialog{padding:18px}.comment-head{flex-wrap:wrap}.comment-head time{font-size:9px}.comment-section-label{font-size:10px}.queue-item{gap:5px}.diagnostic-entry{font-size:10px}}
@media(max-width:380px){.topbar{padding:0 8px}.top-actions .icon-btn{width:27px;flex-basis:27px}.admin-entry{font-size:9px}.download-orbit{width:40px;height:40px;flex-basis:40px}.download-orbit span{font-size:10px}.download-heading{gap:5px}.preview-disc{display:none}.download-details{flex-wrap:wrap}.comments-dialog .dialog-head h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.preview-bars i,.preview-disc,.download-orbit:after,.cache-progress{animation:none!important}}
@media(max-width:850px){.app{grid-template-rows:auto minmax(0,1fr) 112px}.sidebar{align-content:start;grid-auto-rows:auto;gap:5px;padding-top:10px}.sidebar #appNav{grid-row:2}.sidebar .social-nav{grid-row:3;max-width:100%}.sidebar #appNav .nav-item{min-height:32px}.focus-mode .app{grid-template-rows:minmax(0,1fr) 112px}.download-card{margin-top:10px}.catalog{padding-bottom:20px}}

/* Comments keep stable card geometry and native scrolling during interaction. */
.comments-dialog{width:720px;max-width:calc(100vw - 24px);background:linear-gradient(145deg,color-mix(in srgb,var(--soft) 32%,var(--surface)),var(--surface) 45%);overscroll-behavior:contain;scrollbar-gutter:stable}
.comments-dialog .dialog-head{align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--line)}
.comments-dialog .dialog-head h2{font-size:25px;letter-spacing:-.5px}.comments-dialog .dialog-head small{margin-top:9px;color:var(--muted);font-weight:400;letter-spacing:0}
.community-toolbar{margin-top:18px}.community-toolbar label{display:flex;align-items:center;gap:8px}.community-toolbar select{border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:var(--surface);color:var(--ink)}
.comment-form{padding:15px;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--surface) 85%,transparent)}
.comments-dialog .comment-form textarea{border:0;background:transparent;padding:4px;min-height:78px;max-height:240px;box-shadow:none}.comment-form:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)}
.comment-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.comment-form .primary-btn{flex-shrink:0;border-radius:999px;padding:10px 18px;font-size:12px}
.comments-list{padding:0;margin:0;list-style:none}.comment-card,.comment-card:hover{padding:20px 10px;transform:none;border-radius:12px}.comment-card.pinned{border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));margin-top:12px;padding:18px 12px}
.comment-head{align-items:center;gap:8px}.comment-user{overflow-wrap:anywhere}.comment-head time{white-space:nowrap}.comment-text{margin:0}.comment-actions{justify-content:flex-end}.comment-actions .text-btn{min-height:34px;min-width:46px;gap:7px;padding:6px 12px}.comment-actions .text-btn.active svg{animation:like-pop .3s ease-out}
.comment-divider{display:flex;align-items:center;gap:10px}.comment-divider:after{content:'';height:1px;flex:1;background:var(--line)}
#commentsStatus{min-height:24px;font-size:11px;color:var(--muted)}#commentsEmpty{padding:32px 18px;border:1px dashed var(--line);border-radius:16px}#songPlayCount{display:inline-flex;padding:4px 8px;margin:0 0 8px;border-radius:999px;background:var(--soft);color:var(--accent)}#songPlayCount[hidden]{display:none}
@media(min-width:851px){.main-grid{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)}.table-heading,.song{grid-template-columns:22px minmax(0,1fr) 58px 124px;gap:7px}.song-actions{width:124px}.song-actions .icon-btn{flex:0 0 30px}.song-actions .mv-row{display:grid}.catalog{padding-left:20px;padding-right:20px}.table-heading>span:nth-child(4){display:block}}
@media(min-width:851px) and (max-width:1100px){.table-heading,.song{grid-template-columns:18px minmax(0,1fr) 46px;gap:6px}.song-actions{grid-column:2/-1;justify-self:end}.table-heading>span:nth-child(4){display:none}.song{row-gap:3px}.catalog{padding-left:14px;padding-right:14px}}
@media(max-width:600px){.comments-dialog{padding:18px 14px;border-radius:20px}.comments-dialog .dialog-head h2{font-size:21px}.comment-form{padding:12px}.comment-form>div{flex-wrap:wrap;gap:8px}#commentHint{flex:1;min-width:130px}.comment-card{gap:9px}.comment-avatar{width:34px;height:34px;flex-basis:34px}.comment-head time{margin-left:0;flex-basis:100%}.comment-section-label>span:last-child{display:none}}