:root{--bg-base: #0d0f14;--bg-gradient-top: #161a23;--bg-gradient-bottom: #0b0d12;--surface: #1a1d27;--surface-2: #21252f;--surface-hover: #272c38;--border: #2c313d;--border-strong: #3a4150;--text: #eef1f6;--text-muted: #9aa2b1;--text-faint: #6b7280;--accent: #1db954;--accent-hover: #1ed760;--accent-press: #169c46;--accent-soft: rgba(29, 185, 84, .14);--accent-contrast: #07150c;--danger: #ff5c5c;--danger-soft: rgba(255, 92, 92, .12);--warn: #f5a623;--info: #4aa3ff;--radius-sm: 8px;--radius: 12px;--radius-lg: 18px;--shadow: 0 10px 30px rgba(0, 0, 0, .45);--shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);--font: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(1200px 600px at 80% -10%,rgba(29,185,84,.08),transparent 60%),linear-gradient(180deg,var(--bg-gradient-top),var(--bg-gradient-bottom));background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.5}h1,h2,h3{margin:0;font-weight:700;letter-spacing:.2px}h2{font-size:1.05rem;color:var(--text)}a{color:var(--accent-hover)}button{font-family:inherit;font-size:.92rem;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.5rem .95rem;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease,opacity .15s ease}button:hover{background:var(--surface-hover);border-color:var(--accent)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button[type=submit]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}button[type=submit]:hover{background:var(--accent-hover);border-color:var(--accent-hover)}input[type=text],input[type=password],input:not([type]),select{width:100%;font-family:inherit;font-size:.95rem;color:var(--text);background:var(--bg-base);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:.6rem .75rem}input::placeholder{color:var(--text-faint)}label{display:block;font-size:.82rem;color:var(--text-muted);margin-bottom:.3rem}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:999px;background:var(--border-strong);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 3px #1db95440}input[type=range]::-moz-range-thumb{width:15px;height:15px;border:2px solid #fff;border-radius:50%;background:var(--accent)}input[type=range]:disabled{opacity:.4}[role=alert]{color:var(--danger);font-size:.85rem;margin:.25rem 0 0}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.5rem;background:#0d0f14cc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.app-brand{display:flex;align-items:center;gap:.55rem;font-size:1.2rem}.app-brand:before{content:"🎧";font-size:1.35rem}.app-header-right{display:flex;align-items:center;gap:1rem}.app-header-right .login-indicator{display:flex;align-items:center;gap:.6rem}.conn-pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;padding:.3rem .7rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap}.conn-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.conn-connected{color:var(--accent-hover);background:var(--accent-soft);border-color:#1db95459}.conn-connecting,.conn-reconnecting{color:var(--warn)}.conn-failed,.conn-closed{color:var(--danger)}.auth-screen,.entry-screen{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:2rem 1.25rem}.room-lobby-list{width:100%;max-width:560px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.5rem}.room-lobby-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.room-lobby-header h2{margin:0}.room-lobby-empty{margin:0;color:var(--text-muted);text-align:center;padding:1.5rem 0}.room-lobby-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem;max-height:50vh;overflow-y:auto}.room-lobby-item{display:flex;align-items:center;gap:.75rem;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius);padding:.8rem 1rem}.room-lobby-item-main{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;min-width:0}.room-lobby-code{font-family:var(--mono, monospace);letter-spacing:.08em;font-size:1.05rem}.room-lobby-badge{font-size:.72rem;color:#0b1015;background:var(--accent, #5ad1a0);border-radius:999px;padding:.1rem .55rem}.room-lobby-owner{font-size:.85rem;color:var(--text-muted)}.room-lobby-item-meta{display:flex;flex-direction:column;gap:.15rem;margin-left:auto;text-align:right;font-size:.78rem;color:var(--text-muted);min-width:0}.room-lobby-now{max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-lobby-actions{display:flex;flex-shrink:0;gap:.4rem}.room-lobby-enter{flex-shrink:0}.room-lobby-delete{flex-shrink:0;background:transparent;border:1px solid var(--danger, #e0556b);color:var(--danger, #e0556b)}.room-lobby-delete:hover{background:var(--danger, #e0556b);color:#0b1015}section[aria-label=登录],section[aria-label=已登录]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem;width:100%;max-width:360px}section[aria-label=登录] form,section[aria-label=登录] form>div{display:flex;flex-direction:column;gap:.85rem}section[aria-label=登录] form{margin-top:1.1rem}section[aria-label=登录] form>div{gap:.3rem}.app-header-right section[aria-label=已登录]{background:transparent;border:none;box-shadow:none;padding:0;margin:0;max-width:none;flex-direction:row;align-items:center;gap:.6rem}.app-header-right section[aria-label=已登录] p{margin:0;font-size:.85rem;color:var(--text-muted)}.app-header-right section[aria-label=已登录] button{padding:.35rem .8rem;font-size:.82rem}section[aria-label=创建或加入房间],section[aria-label=房间信息]{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem;width:100%;max-width:420px;display:flex;flex-direction:column;gap:1.5rem}section[aria-label=创建或加入房间]>div,section[aria-label=创建或加入房间] form{display:flex;flex-direction:column;gap:.7rem}section[aria-label=创建或加入房间] h2{font-size:1rem;color:var(--text-muted);text-transform:none}#room-code-input{text-align:center;font-size:1.4rem;font-weight:700;letter-spacing:.4rem;padding:.75rem;text-transform:uppercase;font-variant-numeric:tabular-nums}#room-code-input::placeholder{font-size:.95rem;font-weight:500;letter-spacing:normal;text-transform:none}#room-code-input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}section[aria-label=创建或加入房间] form button[type=submit]{padding:.7rem;font-size:1rem}section[aria-label=创建或加入房间]>div>button{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);padding:.7rem;font-size:1rem}section[aria-label=创建或加入房间]>div>button:hover{background:var(--accent-hover)}section[aria-label=房间信息] [data-testid=room-code]{display:block;font-size:2.6rem;letter-spacing:.5rem;font-weight:800;color:var(--accent-hover);text-align:center;background:var(--bg-base);border:1px dashed var(--border-strong);border-radius:var(--radius);padding:1rem;font-variant-numeric:tabular-nums}section[aria-label=房间信息] [role=status]{color:var(--accent-hover);font-size:.85rem}[data-testid=room-error],[data-testid=room-code-hint]{background:var(--danger-soft);border:1px solid rgba(255,92,92,.35);border-radius:var(--radius-sm);padding:.55rem .75rem;color:var(--danger)}.room-view{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1.25rem;padding:1.5rem;max-width:1200px;width:100%;margin:0 auto;align-items:start}.room-main{display:flex;flex-direction:column;gap:1.25rem;min-width:0}.room-sidebar{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:80px}.player-panel,.queue-panel,.members-panel,.music-search-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.25rem}.player-panel{display:flex;flex-direction:column;gap:1rem;background:linear-gradient(135deg,#232a36,#191c25);border-color:var(--border-strong)}.player-panel .now-playing{font-size:1.25rem;font-weight:700}.player-panel .track-title.empty{color:var(--text-faint);font-weight:500}.transport-controls{display:flex;align-items:center;justify-content:center;gap:.75rem}.transport-controls button{min-width:88px}.transport-controls button[aria-pressed]{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);border-radius:999px;padding:.6rem 1.4rem;font-size:1rem}.transport-controls button[aria-pressed]:hover{background:var(--accent-hover)}.seek-control,.volume-control{display:flex;align-items:center;gap:.75rem}.seek-control input[type=range]{flex:1}.seek-control .position,.seek-control .duration{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:center}.volume-control{justify-content:flex-end}.volume-control label{margin:0}.volume-control input[type=range]{width:130px}.volume-control .volume-value{font-size:.8rem;color:var(--text-muted);min-width:40px;text-align:right}.queue-panel .queue-add{width:100%;margin:.75rem 0;text-align:left}.queue-empty,.members-empty,.no-results{color:var(--text-faint);font-size:.88rem;padding:.75rem 0;text-align:center}.queue-list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.35rem}.queue-item{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid transparent}.queue-item:hover{background:var(--surface-hover)}.queue-item.current{background:var(--accent-soft);border-color:#1db95459}.queue-item .track-index{width:1.5rem;color:var(--text-faint);font-variant-numeric:tabular-nums;text-align:right}.queue-item .track-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item .track-duration{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.queue-item .now-playing{font-size:.72rem;font-weight:700;color:var(--accent-hover);background:var(--bg-base);padding:.15rem .5rem;border-radius:999px}.queue-item .queue-remove{padding:.3rem .65rem;font-size:.8rem;background:transparent;border-color:var(--border);color:var(--text-muted)}.queue-item .queue-remove:hover{color:var(--danger);border-color:var(--danger);background:var(--danger-soft)}.members-list{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}.member{display:flex;align-items:center;gap:.6rem;padding:.5rem .65rem;border-radius:var(--radius-sm);background:var(--surface-2)}.member-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.member:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}.member-offline{opacity:.6}.member-offline:before{background:var(--text-faint)}.host-badge{font-size:.72rem;font-weight:700;color:var(--accent-contrast);background:var(--accent);padding:.12rem .5rem;border-radius:999px}.member-status{font-size:.78rem;color:var(--text-faint)}.music-search-panel{display:flex;flex-direction:column;gap:.9rem}.provider-selector{display:flex;align-items:center;gap:.6rem}.provider-selector label{margin:0;white-space:nowrap}.provider-selector select{width:auto;flex:1}.provider-status{font-size:.78rem;font-weight:600;color:var(--text-muted);padding:.25rem .6rem;border-radius:999px;background:var(--surface-2);white-space:nowrap}.authorize-prompt{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem;display:flex;flex-direction:column;gap:.6rem}.authorize-prompt p{margin:0;font-size:.88rem;color:var(--text-muted)}.authorize-prompt button{align-self:flex-start;background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}.search-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}.search-form label{width:100%}.search-form input[type=text]{flex:1;min-width:0}.search-form .keyword-error{width:100%}.search-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}.search-results li{display:flex;align-items:center;gap:.75rem;padding:.55rem .7rem;border-radius:var(--radius-sm);background:var(--surface-2)}.search-results li:hover{background:var(--surface-hover)}.search-results .track-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-results .track-duration{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums}@media(max-width:860px){.room-view{grid-template-columns:1fr;padding:1rem}.room-sidebar{position:static}.app-header{padding:.75rem 1rem}.app-brand{font-size:1.05rem}}@media(max-width:520px){.transport-controls{flex-wrap:wrap}.transport-controls button{min-width:0;flex:1}section[aria-label=房间信息] [data-testid=room-code]{font-size:2rem;letter-spacing:.35rem}}.form-hint{margin:0;font-size:.82rem;color:var(--text-faint)}.link-button{align-self:flex-start;margin-top:.9rem;background:none;border:none;padding:0;color:var(--accent-hover);font-weight:600}.link-button:hover{background:none;border:none;text-decoration:underline;color:var(--accent-hover)}section[aria-label=登录] [data-testid=login-error]{background:var(--danger-soft);border:1px solid rgba(255,92,92,.35);border-radius:var(--radius-sm);padding:.55rem .75rem;margin:0}.room-info-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(135deg,#20262f,#181b22);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem 1.25rem}.room-info-main{display:flex;align-items:center;gap:1.25rem;min-width:0}.room-code-block{display:flex;flex-direction:column;gap:.15rem}.room-code-label{font-size:.72rem;color:var(--text-faint);letter-spacing:.05rem}.room-code-value{font-size:1.6rem;font-weight:800;letter-spacing:.35rem;color:var(--accent-hover);font-variant-numeric:tabular-nums}.room-online{font-size:.85rem;font-weight:600;color:var(--text-muted);padding:.3rem .75rem;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);white-space:nowrap}.room-info-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}.room-info-actions button{padding:.45rem .85rem;font-size:.85rem}.room-info-actions .leave-room{background:transparent;border-color:#ff5c5c66;color:var(--danger)}.room-info-actions .leave-room:hover{background:var(--danger-soft);border-color:var(--danger)}.copied-hint{font-size:.8rem;color:var(--accent-hover)}.share-actions{display:flex;gap:.5rem}.share-link{font-size:.8rem;color:var(--text-muted);word-break:break-all;background:var(--bg-base);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .7rem;margin:0}.room-error-block{display:flex;flex-direction:column;gap:.5rem;background:var(--danger-soft);border:1px solid rgba(255,92,92,.35);border-radius:var(--radius-sm);padding:.75rem}.room-error-block [data-testid=room-error]{margin:0}.room-error-block button{align-self:flex-start}.reauth-hint{margin:0;font-size:.85rem;color:var(--text-muted)}.room-connecting{font-size:.85rem;color:var(--text-muted);text-align:center}button,.room-lobby-item,.queue-item,.member,.search-results li,.player-panel .now-playing{transform-origin:center}button{transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}.room-lobby-item,.queue-item,.member,.search-results li{transition:background-color .16s ease,border-color .16s ease}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.announcement-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:#06080cb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:announcement-fade .25s ease}@keyframes announcement-fade{0%{opacity:0}to{opacity:1}}.announcement-card{width:100%;max-width:520px;max-height:calc(100vh - 2.5rem);overflow-y:auto;display:flex;flex-direction:column;gap:1.1rem;padding:1.5rem 1.6rem;background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow);transform-origin:center}.announcement-head{display:flex;flex-direction:column;gap:.45rem}.announcement-badge{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-hover);background:var(--accent-soft);border:1px solid rgba(29,185,84,.35);border-radius:999px;padding:.2rem .65rem}.announcement-head h2{font-size:1.25rem}.announcement-meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-size:.88rem;color:var(--text-muted)}.announcement-meta strong{color:var(--text)}.announcement-version{font-size:.78rem;font-weight:600;color:var(--warn);background:#f5a6231f;border:1px solid rgba(245,166,35,.3);border-radius:999px;padding:.15rem .6rem}.announcement-body{display:flex;flex-direction:column;gap:1rem}.announcement-body section{display:flex;flex-direction:column;gap:.45rem}.announcement-body h3{margin:0;font-size:.95rem;color:var(--accent-hover)}.announcement-body ul,.announcement-body ol{margin:0;padding-left:1.25rem;display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;color:var(--text)}.announcement-body p{margin:0;font-size:.88rem;line-height:1.6;color:var(--text-muted)}.announcement-foot{display:flex;justify-content:flex-end}.announcement-foot button{width:100%;padding:.65rem 1rem;font-size:.95rem}