#music-room { position:absolute; inset:0; z-index:49; overflow-y:auto; padding:18px 16px calc(var(--tab-h) + var(--safe-bottom) + 80px); background:var(--bg-grad); color:var(--text); -webkit-overflow-scrolling:touch; }
#music-room[hidden], #music-mini[hidden], #music-room [hidden] { display:none !important; }
.music-heading { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.music-heading h2 { flex:1; font:600 23px 'Noto Serif SC',serif; color:var(--accent-deep); }
.music-heading button, #music-room button, #music-mini button { cursor:pointer; font:inherit; border:1px solid var(--mint); color:var(--accent-deep); background:var(--card-solid); border-radius:22px; padding:8px 12px; min-height:42px; }
.music-card { max-width:560px; margin:0 auto 14px; padding:19px; border-radius:var(--radius); background:var(--card); border:var(--card-border); box-shadow:var(--shadow); }
.music-vinyl { width:148px; height:148px; margin:6px auto 18px; border-radius:50%; background:repeating-radial-gradient(circle at center,var(--accent-deep) 0 2px,var(--accent) 3px 6px,var(--accent-deep) 7px 8px); display:grid; place-items:center; box-shadow:0 8px 24px #0002; }
.music-vinyl::after { content:'♫'; display:grid; place-items:center; width:55px; height:55px; background:var(--card-solid); color:var(--accent-deep); border-radius:50%; font-size:25px; }
.music-vinyl.playing { animation:music-spin 6s linear infinite; }
@keyframes music-spin { to { transform:rotate(360deg); } }
.music-title { text-align:center; font:600 19px 'Noto Serif SC',serif; overflow-wrap:anywhere; }
.music-artist { text-align:center; margin:6px 0 16px; color:var(--text2); font-size:13px; }
.music-controls { display:flex; justify-content:center; align-items:center; gap:12px; margin:12px 0; }
#music-room .music-play { color:white; background:var(--accent); border-color:var(--accent); font-size:19px; min-width:58px; }
.music-scrub { display:flex; align-items:center; gap:9px; color:var(--text3); font-size:11px; font-variant-numeric:tabular-nums; }
.music-scrub input { flex:1; min-width:0; accent-color:var(--accent); }
.music-upload { display:grid; gap:10px; }
.music-upload input, .music-upload textarea { width:100%; min-width:0; padding:10px 12px; border-radius:12px; border:1px solid var(--mint); background:var(--card-solid); color:var(--text); font:inherit; font-size:14px; }
.music-upload label { font-size:13px; color:var(--text2); }
.music-upload small { color:var(--text3); font-size:11px; line-height:1.6; }
#music-room .music-primary { background:var(--accent); color:white; border-color:var(--accent); }
.music-section-title { margin:0 0 12px; font:600 16px 'Noto Serif SC',serif; }
.music-track { display:flex; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid var(--mint-light); }
#music-room .music-track-main { flex:1; min-width:0; border:0; background:none; text-align:left; overflow-wrap:anywhere; }
.music-track-main small { display:block; color:var(--text3); font-size:11px; margin-top:2px; }
.music-track.active .music-track-main { color:var(--accent-deep); font-weight:600; }
#music-room .music-track button:last-child { min-width:42px; }
.music-lyrics { height:140px; overflow-y:auto; text-align:center; color:var(--text2); line-height:2.2; white-space:pre-wrap; }
.music-lyric-line.active { color:var(--accent-deep); font-weight:600; font-size:17px; }
.music-edit { display:grid; gap:9px; margin-top:12px; }
.music-edit label { font-size:12px; color:var(--text2); }
.music-edit input, .music-edit textarea { width:100%; padding:10px; border:1px solid var(--mint); border-radius:12px; font:inherit; color:var(--text); background:var(--card-solid); }
.music-edit textarea { min-height:120px; resize:vertical; }
#music-status { min-height:18px; font-size:12px; color:var(--text2); margin:10px 0 0; }
.music-cloud-hint { color:var(--text2); font-size:13px; line-height:1.7; }
#music-online-status { min-height:18px; color:var(--text2); font-size:12px; }
#music-links { font-size:13px; color:var(--text3); }
#music-cloud-player { border-top:1px dashed var(--mint); padding-top:14px; margin-top:12px; }
#music-cloud-title { color:var(--accent-deep); font-size:14px; margin-bottom:8px; overflow-wrap:anywhere; }
#music-cloud-frame { display:block; width:100%; border:0; border-radius:12px; background:var(--card-solid); }
#music-cloud-original { display:inline-block; margin-top:10px; font-size:12px; color:var(--accent-deep); text-decoration:underline; }
#qqm-area { display:grid; gap:10px; }
#qqm-area textarea, #qqm-area input[type="search"] { box-sizing:border-box; width:100%; padding:10px 12px; border:1px solid var(--mint); border-radius:12px; background:var(--card-solid); color:var(--text); font:inherit; font-size:14px; }
#qqm-area label { font-size:13px; color:var(--text2); line-height:1.7; }
#qqm-area textarea { display:block; margin:6px 0; resize:vertical; }
#qqm-area small { display:block; margin-top:10px; line-height:1.65; color:var(--text3); font-size:11px; }
#qqm-login, #qqm-library { display:grid; gap:12px; }
#qqm-login details { padding:10px; border:1px dashed var(--mint); border-radius:14px; font-size:12px; color:var(--text2); }
#qqm-login details summary { cursor:pointer; }
#qqm-login details label { display:block; padding:10px 0; }
#qqm-qrcode { box-sizing:border-box; display:block; width:min(230px,80%); margin:4px auto; padding:10px; border-radius:18px; background:white; }
#qqm-area .qqm-remember { display:flex; align-items:center; gap:8px; }
.qqm-remember input { accent-color:var(--accent); }
.qqm-tools { display:flex; align-items:center; gap:8px; }
.qqm-tools span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; color:var(--accent-deep); }
.qqm-tools input { flex:1; min-width:0; }
.qqm-playlists { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
#music-room .qqm-playlists button { flex:none; font-size:12px; padding:7px 12px; }
#qqm-list-title { font-size:13px; color:var(--text2); margin:4px 0 0; }
.qqm-songs { max-height:320px; overflow:auto; display:grid; gap:7px; }
#music-room .qqm-song { display:block; text-align:left; width:100%; border-radius:12px; font-size:13px; min-height:45px; overflow-wrap:anywhere; }
#qqm-status { min-height:17px; font-size:12px; color:var(--accent-deep); margin:0; }
#music-mini { position:fixed; left:12px; right:12px; bottom:calc(var(--tab-h) + var(--safe-bottom) + 10px); z-index:805; max-width:520px; margin:auto; padding:8px 12px; border-radius:22px; background:var(--card-solid); box-shadow:0 6px 24px #0002; display:flex; align-items:center; gap:10px; color:var(--text); }
#music-mini-title { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
#music-mini button { padding:4px 8px; min-height:34px; }
@media (prefers-reduced-motion:reduce) { .music-vinyl.playing { animation:none; } }
.music-together { display:grid; gap:8px; }
.music-together label { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--accent-deep); }
.music-together input { accent-color:var(--accent); width:18px; height:18px; }
.music-together small { color:var(--text3); font-size:12px; line-height:1.65; }
#music-room summary { cursor:pointer; }
#music-room details[open] > summary { margin-bottom:12px; }
.music-queue { max-height:250px; overflow-y:auto; font-size:13px; }
#music-mode { display:block; margin:0 auto 12px; font-size:12px !important; }
#music-mini #music-mini-title { flex:1; min-width:0; padding:0; border:0; background:none; text-align:left; color:var(--text); }
#music-mini-progress { position:absolute; bottom:0; left:20px; width:calc(100% - 40px); height:3px; border:0; appearance:none; accent-color:var(--accent); }
#music-mini-progress::-webkit-progress-bar { background:var(--mint-light); }
#music-mini-progress::-webkit-progress-value { background:var(--accent); }
#music-mini-progress::-moz-progress-bar { background:var(--accent); }

/* Floating controls: start small, allow dragging, and keep hiding independent of audio. */
#music-mini { right:auto; bottom:auto; margin:0; box-sizing:border-box; gap:5px; padding:8px; }
#music-mini button { flex-shrink:0; }
#music-mini-bubble { display:none; }
#music-mini-drag, #music-mini-bubble { touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab !important; }
#music-mini #music-mini-drag { border:0; padding:2px; min-width:20px; color:var(--text3); }
#music-mini #music-mini-hide, #music-mini #music-mini-collapse { border:0; min-width:30px; padding:3px; }
#music-mini.compact { padding:0; height:52px; border-radius:50%; }
#music-mini.compact > :not(#music-mini-bubble) { display:none !important; }
#music-mini.compact #music-mini-bubble { display:block; width:52px; height:52px; border-radius:50%; font-size:24px; }
#music-float-restore { display:block; margin:0 auto 12px; font-size:12px !important; }