:root{color-scheme:dark;--bg: #0e0f14;--surface: #171923;--surface-2: #1f2230;--border: rgba(255, 255, 255, .08);--ink: #eceef6;--muted: #9aa0b5;--acc: #6d5cff;--acc-soft: rgba(109, 92, 255, .16);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;padding:0;min-height:100%;background:radial-gradient(1200px 600px at 80% -10%,#1b1d33 0%,var(--bg) 55%) fixed;color:var(--ink)}#app{max-width:1080px;margin:0 auto;padding-bottom:calc(var(--dock-h, 118px) + 24px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 8px 8px}.brand{display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.brand h1{margin:0;font-size:1.35rem;letter-spacing:.02em;font-weight:800;display:flex;align-items:center}.dot{color:var(--acc);transition:color .3s ease,text-shadow .3s ease}.logo-mark{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:block;overflow:visible;box-shadow:0 4px 12px #4f46e547;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.brand:hover .logo-mark{transform:scale(1.08) rotate(-2deg);box-shadow:0 6px 20px #6d5cff8c}.logo-mark .logo-bg-classic{opacity:1;transition:opacity .4s ease}.logo-mark .logo-bg-ai{opacity:0;transition:opacity .4s ease}.logo-mark .logo-ai-sparkle{opacity:0;transform:scale(.3) rotate(-20deg);transform-origin:25.5px 5.5px;transition:opacity .3s ease,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.logo-mark .logo-classic-dot{opacity:1;transition:opacity .3s ease}.logo-mark .logo-ai-dot{opacity:0;transition:opacity .3s ease}.logo-mark.is-ai-active{box-shadow:0 0 16px #d946ef73,0 4px 14px #6366f166}.logo-mark.is-ai-active .logo-bg-classic{opacity:0}.logo-mark.is-ai-active .logo-bg-ai{opacity:1}.logo-mark.is-ai-active .logo-classic-dot{opacity:0}.logo-mark.is-ai-active .logo-ai-dot{opacity:1;filter:drop-shadow(0 0 2px #f472b6)}.logo-mark.is-ai-active .logo-ai-sparkle{opacity:1;transform:scale(1) rotate(0);animation:aiSparkleFloat 3.2s infinite ease-in-out}.brand.is-ai-active .dot{color:#d946ef;text-shadow:0 0 8px rgba(217,70,239,.6)}.logo-mark.is-ai-thinking{animation:aiThinkingPulse 1.2s infinite ease-in-out}.logo-mark.is-ai-thinking .logo-bar-1{animation:logoBarWave .8s infinite ease-in-out .1s}.logo-mark.is-ai-thinking .logo-bar-2{animation:logoBarWave .8s infinite ease-in-out .3s}.logo-mark.is-ai-thinking .logo-bar-3{animation:logoBarWave .8s infinite ease-in-out .2s}@keyframes aiSparkleFloat{0%,to{transform:scale(1) rotate(0);filter:drop-shadow(0 0 3px rgba(56,189,248,.6))}50%{transform:scale(1.18) rotate(12deg);filter:drop-shadow(0 0 6px rgba(56,189,248,.9))}}@keyframes aiThinkingPulse{0%,to{box-shadow:0 0 16px #d946ef73,0 4px 14px #6366f166}50%{box-shadow:0 0 24px #d946efcc,0 4px 18px #38bdf899;transform:scale(1.04)}}@keyframes logoBarWave{0%,to{transform:scaleY(1);transform-origin:16px 21px}50%{transform:scaleY(1.35);transform-origin:16px 21px}}.top-right{display:flex;align-items:center;gap:8px}.remote-icon-symbol,.party-icon-symbol{font-size:.95rem;line-height:1}.tab-row{display:flex;gap:6px;background:var(--surface);padding:4px;border-radius:12px;border:1px solid var(--border)}.tab-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);padding:8px 14px;border-radius:9px;cursor:pointer;font-size:.95rem}.tab-btn:hover{color:var(--ink)}.tab-btn.is-active{background:var(--acc-soft);color:var(--ink)}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--ink);width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:1.1rem}.icon-btn:hover{border-color:var(--acc)}.chip{background:var(--surface-2);border:1px solid var(--border);padding:4px 10px;border-radius:999px;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.8rem}.panel{animation:rise .25s ease}.panel[hidden]{display:none}@keyframes rise{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.search-bar{display:flex;gap:10px;margin:8px 0 14px}.search-bar input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:12px 14px;border-radius:12px;outline:none;font-size:1rem}.search-bar input:focus{border-color:var(--acc)}.primary-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:var(--acc);color:#fff;font-weight:600;padding:12px 18px;border-radius:12px;cursor:pointer}.primary-btn:hover{filter:brightness(1.08)}.primary-btn:disabled{opacity:.5;cursor:default}.secondary-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);font-weight:500;padding:10px 16px;border-radius:12px;cursor:pointer;transition:all .15s ease}.secondary-btn:hover{background:var(--surface-3, rgba(255, 255, 255, .1));border-color:var(--acc)}.status-hint{margin:4px 0 10px}.center-note{text-align:center;padding:26px 0}.muted{color:var(--muted)}.small{font-size:.85rem}.tiny{font-size:.78rem}.song-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px}.result-item{display:grid;grid-template-columns:52px 1fr auto auto;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 12px}.result-item:hover{border-color:var(--acc)}.res-thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;background:var(--surface-2)}.res-body{overflow:hidden}.res-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res-sub{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.res-add{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:9px;padding:8px 12px;cursor:pointer;font-weight:600}.res-add:hover{background:var(--acc);border-color:var(--acc)}.res-actions{display:flex;gap:6px;align-items:center}.res-next{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:9px;padding:6px 10px;cursor:pointer;font-size:1.05rem;line-height:1}.res-next:hover{background:var(--acc);border-color:var(--acc)}.res-clock{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}.queue-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}.queue-head h2{font-size:1.1rem;margin:0}.queue-actions{display:flex;align-items:center;gap:8px}.ai-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--acc);background:var(--acc-soft);color:var(--ink);font-weight:600;padding:6px 14px;border-radius:999px;cursor:pointer;font-size:.85rem;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.ai-btn:hover{background:var(--acc);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #6d5cff4d}.ai-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.queue-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.q-item{display:grid;grid-template-columns:22px 24px 46px minmax(0,1fr) auto auto auto;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:6px 10px;min-width:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}.q-item.current{border-color:var(--acc);background:var(--acc-soft)}.q-handle{cursor:grab;color:var(--muted);touch-action:none;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;width:22px;height:100%;font-size:1.15rem;transition:color .15s ease,transform .15s ease}.q-handle:hover{color:var(--acc)}.q-handle:active{cursor:grabbing;color:var(--acc);transform:scale(1.15)}.q-order{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;font-size:.85rem}.q-thumb{width:46px;height:46px;border-radius:7px;object-fit:cover;background:var(--surface-2);flex-shrink:0;display:block}.q-body{min-width:0;overflow:hidden}.q-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-sub{color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.q-reorder-group{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;flex-shrink:0}.q-move-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);font-size:.7rem;line-height:1;padding:3px 5px;min-width:22px;min-height:18px;cursor:pointer;border-radius:4px;transition:all .12s ease;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center}.q-move-btn:hover:not(:disabled){color:var(--acc);background:var(--surface-2)}.q-move-btn:active:not(:disabled){transform:scale(.9);color:#fff;background:var(--acc)}.q-move-btn:disabled{opacity:.15;cursor:default;pointer-events:none}.mini-act{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;padding:4px;flex-shrink:0}.mini-act:hover{color:var(--ink)}.mini-del:hover{color:#ff6b6b}.q-current-badge{color:var(--acc);font-size:.8rem}.dragging-source{opacity:.35;border-style:dashed!important}.is-touch-dragging{opacity:.92;background:var(--surface-2)!important;border-color:var(--acc)!important;box-shadow:0 8px 24px #00000073,0 0 14px #6d5cff66!important;transform:scale(1.02);z-index:20;position:relative}.touch-drag-over{outline:2px dashed var(--acc)!important;outline-offset:-2px;background:#6d5cff1a!important}.dock{position:fixed;inset-inline:0;bottom:0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0f1016db;border-top:1px solid var(--border);display:grid;grid-template-columns:minmax(220px,1fr) minmax(320px,2fr) minmax(120px,1fr);gap:16px;align-items:center;padding:12px clamp(12px,4vw,40px);--dock-h: 118px}.now-card{display:flex;align-items:center;gap:12px;min-width:0}.thumb{width:58px;height:58px;border-radius:10px;object-fit:cover;background:var(--surface-2)}.now-meta{min-width:0}.transport{display:flex;flex-direction:column;gap:6px}.controls{display:flex;align-items:center;justify-content:center;gap:14px}.ctrl{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;color:var(--ink);font-size:1.3rem;cursor:pointer}.big-ctrl{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;width:46px;height:46px;border-radius:50%;font-size:1.1rem;cursor:pointer;background:var(--acc);color:#fff}.big-ctrl:hover{filter:brightness(1.1)}.seekrow{display:flex;align-items:center;gap:10px}.seekrow input[type=range]{flex:1;accent-color:var(--acc);cursor:pointer}.clock{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.8rem;min-width:34px;text-align:center}.endtime-row{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.01em;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-box{display:flex;align-items:center;justify-content:flex-end;gap:14px}.buffer-state{font-size:.78rem;color:var(--muted);transition:color .25s ease,opacity .25s ease;white-space:nowrap}.buffer-state.ok{color:#4ade80;font-weight:600;text-shadow:0 0 8px rgba(74,222,128,.35)}.buffer-state.loading{color:#fbbf24;font-weight:500;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.small-link{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:.8rem;font-weight:500;padding:5px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;transition:all .15s ease}.small-link:hover{color:#ef4444;border-color:#ef444466;background:#ef44441a}.small-link:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.vol-control{display:flex;align-items:center;gap:8px;background:var(--surface-2);padding:4px 10px;border-radius:999px;border:1px solid var(--border)}.vol-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background:transparent;cursor:pointer;font-size:1rem;padding:0;display:grid;place-items:center;line-height:1}.vol-slider{width:80px;height:4px;accent-color:var(--acc);cursor:pointer}@media (max-width: 820px){.vol-slider{width:55px}}.marquee-wrap{overflow:hidden;white-space:nowrap}.marquee{display:inline-block}@media (pointer: coarse){.q-handle{touch-action:none}}.modal{border:0;background:transparent;padding:0;max-width:460px;width:92vw}.modal::backdrop{background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.sheet{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.sheet-head h2{margin:0;font-size:1.1rem}.field-group legend,fieldset legend{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}.stack-field{display:grid;gap:6px;padding:8px 0}.stack-field input{background:var(--surface-2);border:1px solid var(--border);color:var(--ink);padding:9px 11px;border-radius:9px;outline:none}.stack-field input:disabled{opacity:.5}.setting-hint{display:block;color:var(--muted);font-size:.75rem;margin-top:2px;line-height:1.3}.ai-block{margin-top:8px;border-top:1px solid var(--border);padding-top:10px}.ai-block summary{cursor:pointer;font-weight:600}.sheet-foot{display:flex;justify-content:flex-end;margin-top:14px}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%) translateY(-8px);background:var(--surface-2);color:var(--ink);border:1px solid var(--acc);padding:8px 18px;border-radius:999px;font-weight:500;font-size:.9rem;box-shadow:0 8px 24px #0006;pointer-events:none;z-index:9999;opacity:0;transition:opacity .2s ease,transform .2s ease}.toast.visible{opacity:1;transform:translate(-50%) translateY(0)}@media (max-width: 720px){.topbar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand actions" "tabs tabs";row-gap:12px;column-gap:10px;padding:12px 8px 6px}.brand{grid-area:brand;align-self:center}.top-right{grid-area:actions;align-self:center;display:flex;align-items:center;gap:6px}.tab-row{grid-area:tabs;width:100%;display:flex}.tab-btn{flex:1;text-align:center;padding:8px 4px;font-size:.9rem}.icon-btn-text{padding:6px 10px;font-size:.82rem;gap:5px}.icon-btn{width:36px;height:36px}.dock{grid-template-columns:1fr;row-gap:8px;--dock-h: 210px}.side-box{justify-content:center}.result-item{grid-template-columns:46px 1fr auto}.res-clock{display:none}.q-item{grid-template-columns:22px 40px minmax(0,1fr) auto auto auto}.q-order{display:none}}@media (max-width: 520px){#new-party-btn-label{display:none}}@media (max-width: 440px){.brand h1{font-size:1.2rem}.logo-mark{width:30px;height:30px}.icon-btn-text{padding:6px 8px;font-size:.78rem;gap:4px}}@media (max-width: 380px){#remote-btn-label{display:none}.icon-btn-text{padding:6px 9px}}.badge-dot{display:inline-block;background:var(--acc);color:#fff;font-size:.7rem;font-weight:700;padding:1px 6px;border-radius:999px;margin-left:4px;vertical-align:middle}.history-row{grid-template-columns:54px 46px minmax(0,1fr) auto!important}.history-row .hist-time{font-size:.8rem;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;background:var(--surface-2);padding:2px 6px;border-radius:6px;text-align:center}@media (max-width: 720px){.history-row{grid-template-columns:48px 40px 1fr auto!important}}.icon-btn-text{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border);color:var(--fg);font-size:.85rem;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer;transition:all .15s ease}.icon-btn-text:hover{background:var(--surface-3, rgba(255, 255, 255, .1));border-color:var(--acc)}.status-indicator{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;transition:background-color .25s ease,box-shadow .25s ease,transform .25s ease}.status-indicator.status-green{background:#10b981;box-shadow:0 0 6px #10b981,0 0 12px #10b98199;animation:pulseIndicator 2s infinite ease-in-out}.status-indicator.status-blue{background:#3b82f6;box-shadow:0 0 6px #3b82f6,0 0 10px #3b82f666}.status-indicator.status-red{background:#ef4444;box-shadow:0 0 6px #ef4444}.status-indicator.status-orange{background:#f97316;box-shadow:0 0 6px #f97316,0 0 12px #f9731699;animation:pulseIndicator 2s infinite ease-in-out}@keyframes pulseIndicator{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.remote-section{display:flex;flex-direction:column;gap:8px}.remote-section h4{margin:0;font-size:.95rem;color:var(--fg)}.code-copy-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);padding:8px 12px;border-radius:8px;border:1px solid var(--border)}.code-box{display:flex;align-items:center;gap:8px}.code-box code{font-family:monospace;font-size:1.1rem;font-weight:700;color:var(--acc);letter-spacing:1px}.peer-status{display:flex;align-items:center;gap:6px;margin-top:2px}.status-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 6px #10b981}.status-dot.idle{background:var(--muted);box-shadow:none}.remote-input-group{display:flex;flex-direction:column;gap:10px}.remote-btn-row{display:flex;gap:8px}.danger-btn{background:#dc2626;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-weight:600;cursor:pointer}.danger-btn:hover{background:#b91c1c}.remote-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);padding:10px 14px;border-radius:8px;border:1px solid var(--border)}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--surface-3, #334155);transition:.25s ease;border-radius:24px;border:1px solid var(--border)}.toggle-slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:#fff;transition:.25s ease;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#3b82f6;border-color:#60a5fa}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.remote-host-config{display:flex;flex-direction:column;gap:10px;margin-top:4px;transition:opacity .2s ease}.remote-host-config.is-disabled{opacity:.4;pointer-events:none}.remote-devices-container{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px}.remote-devices-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.badge-chip{background:var(--surface-1);color:var(--fg);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:10px;border:1px solid var(--border)}.connected-devices-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.connected-devices-list li{display:flex;align-items:center;gap:8px;background:var(--surface-1);padding:6px 10px;border-radius:6px;font-size:.85rem;border:1px solid var(--border)}.connected-devices-list li code{font-family:monospace;font-weight:600;color:#10b981;background:#10b9811a;padding:2px 6px;border-radius:4px}.connected-devices-list li.empty-devices{color:var(--muted);font-style:italic;justify-content:center;background:transparent;border:none}.remote-qr-container{margin-top:4px}.qr-card{display:flex;flex-direction:column;align-items:center;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:16px;gap:10px;animation:fadeIn .2s ease}.qr-svg-wrapper{background:#fff;padding:10px;border-radius:8px;box-shadow:0 4px 16px #0000004d;display:flex;align-items:center;justify-content:center}.qr-svg-wrapper svg{display:block;width:180px;height:180px}.qr-hint{text-align:center;margin:0;max-width:280px}.qr-url-row{display:flex;align-items:center;gap:6px;width:100%;max-width:320px}.qr-url-input{flex:1;background:var(--surface-1);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:.75rem;font-family:monospace;color:var(--muted);outline:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}