*{box-sizing:border-box}:root{color-scheme:dark;--bg: #0d0e12;--surface: #16181d;--surface-2: #1c1f26;--card: #1f222a;--border: #2a2f3a;--border-strong: #363c49;--fg: #f2f3f5;--muted: #8a91a0;--muted-2: #5f6672;--accent: #e62e2e;--accent-hover: #f53d3d;--ok: #43d17b;--warn: #f5c542;--radius: 12px;--radius-sm: 9px;--shadow: 0 8px 24px rgba(0, 0, 0, .45);--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}#app{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit}.results::-webkit-scrollbar,.queue-list::-webkit-scrollbar{width:8px}.results::-webkit-scrollbar-thumb,.queue-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:99px}.results::-webkit-scrollbar-track,.queue-list::-webkit-scrollbar-track{background:transparent}.topbar{position:relative;display:flex;align-items:center;gap:14px;padding:10px 18px;background:var(--surface);border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:8px;font-size:16px;letter-spacing:.2px;margin-right:6px}.logo-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--accent);color:#fff;box-shadow:0 2px 10px #e62e2e59}.brand svg{transform:translate(1px)}.room-meta{position:relative;display:flex;align-items:center;gap:10px}.room-code{font-size:14px;color:var(--muted);padding:5px 11px;border:1px solid var(--border);border-radius:99px;background:var(--bg)}.room-code b{color:var(--fg);font-weight:700;letter-spacing:.7px}.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;font-size:13px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:99px;cursor:pointer}.chip:hover{color:var(--fg);border-color:var(--border-strong)}.presence-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2px #43d17b2e}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.badge{font-size:13px;font-weight:600;padding:5px 12px;border-radius:99px}.badge.host{color:#fff;background:#e62e2e29;border:1px solid rgba(230,46,46,.5)}.badge.guest{color:var(--ok);background:#43d17b1a;border:1px solid rgba(67,209,123,.35)}.badge.ok{color:var(--ok)}.badge.lagging{color:var(--warn)}.popover{position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:220px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);padding:10px}.popover-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);padding:4px 6px 8px}.popover-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.popover-list li{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:8px;font-size:14px}.popover-list li:hover{background:var(--card)}.popover-list .p-avatar{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;background:var(--border-strong)}.popover-list .p-avatar.host-avatar{background:var(--accent)}.popover-list .p-name{flex:1}.popover-list .p-tag{font-size:11px;color:var(--muted)}.room{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:16px 20px 28px}.layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,30vw,420px);gap:16px;align-items:start}.stage{display:flex;flex-direction:column;gap:12px;min-width:0}.player-wrap{position:relative;aspect-ratio:16 / 9;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}#player,#player iframe{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-weight:600;background:#000000c7;z-index:5}.transport-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;min-width:0}.ctrl-group{display:flex;align-items:center;gap:6px;flex:none}.tbtn{width:38px;height:38px;flex:none;display:grid;place-items:center;background:transparent;color:var(--fg);border:1px solid transparent;border-radius:9px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}.tbtn:hover:not(:disabled){background:var(--card);border-color:var(--border)}.tbtn:disabled{opacity:.35;cursor:not-allowed}.tbtn-play{width:42px;height:42px;color:#fff;background:var(--accent);border-radius:50%;box-shadow:0 2px 12px #e62e2e66}.tbtn-play:hover:not(:disabled){background:var(--accent-hover);border-color:transparent}.ic-pause,.is-playing .ic-play{display:none}.is-playing .ic-pause{display:block}.rate{height:34px;padding:0 8px;font-size:13px;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:8px;cursor:pointer;outline:none}.rate:focus{border-color:var(--accent)}.volume{display:flex;align-items:center;gap:6px;flex:none}.ic-vol-off,.is-muted .ic-vol-on{display:none}.is-muted .ic-vol-off{display:block}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:99px;background:linear-gradient(to right,var(--accent) 0 var(--fill, 0%),var(--border-strong) var(--fill, 0%) 100%);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px #00000080;transition:transform .12s ease}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]:disabled{cursor:default;opacity:.65}#volume{width:82px}#scrub{flex:1;width:100%}.timeline{flex:1;display:flex;align-items:center;gap:10px;min-width:0}.time{flex:none;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);font-feature-settings:"tnum"}.ctrl-group-guest{gap:9px;min-width:0;flex:none;max-width:100%}.sync-line{flex:none;font-size:13px;color:var(--ok);font-weight:500;white-space:nowrap}.sync-line.lagging{color:var(--warn)}.guest-now{flex:none;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;font-size:14px;font-weight:600;color:var(--fg);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease}.btn:hover:not(:disabled){background:var(--card);border-color:var(--border-strong)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:var(--accent);border-color:var(--accent)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 18px #e62e2e59}.btn-ghost{background:transparent}.btn-sm{padding:6px 11px;font-size:13px}.message{position:fixed;top:68px;left:50%;transform:translate(-50%);z-index:60;max-width:min(560px,calc(100vw - 32px));padding:10px 16px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border-strong);box-shadow:var(--shadow);text-align:center;color:var(--fg);font-weight:600;font-size:14px}.message.error{color:#ffd9d9;border-color:var(--accent);background:#e62e2e29}.boot-msg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:var(--bg)}.boot-card{display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--muted)}.boot-card p{margin:0;font-weight:600}.boot-spinner{width:20px;height:20px;flex:none;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.boot-error{display:flex;align-items:flex-start;gap:14px;max-width:min(520px,calc(100vw - 40px))}.boot-error-icon{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;background:#e62e2e33;border:1px solid var(--accent);color:#ff9a9a;font-weight:800}.boot-error-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.boot-error-msg{color:#ffd9d9;margin:0}.boot-error-hint{margin:0;font-size:13px;color:var(--muted);font-weight:500}.sidebar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 108px);position:sticky;top:16px;overflow:hidden}.tabbar{display:flex;align-items:center;gap:4px;padding:8px 8px 6px;border-bottom:1px solid var(--border);background:var(--surface)}.tab{position:relative;padding:7px 12px;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:none;border-radius:8px;cursor:pointer;transition:color .15s ease,background .15s ease}.tab:hover{color:var(--fg);background:var(--card)}.tab.active{color:var(--fg);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-strong)}.tab-count{margin-left:2px;font-size:12px;font-weight:600;color:var(--accent)}.search-panel{display:flex;flex-direction:column;gap:10px;padding:12px;flex:1;min-height:0}.search-row{display:flex;gap:8px;flex:none}.search-row input{flex:1;min-width:0;height:40px;padding:0 13px;font-size:14px;color:var(--fg);background:var(--bg);border:1px solid var(--border);border-radius:9px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}.search-row input::placeholder{color:var(--muted-2)}.search-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #e62e2e26}.search-row input:disabled{opacity:.6}.search-status{flex:none;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.search-status .spinner{width:14px;height:14px;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-right:2px}.sv-item{position:relative;display:flex;gap:11px;padding:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease}.sv-item:hover{transform:translateY(-1px);border-color:var(--border-strong);box-shadow:0 6px 16px #00000059;background:#23262f}.sv-item.playing{border-color:#e62e2e99;background:#e62e2e0f}.sv-thumb-wrap{position:relative;flex:none;width:122px;aspect-ratio:16 / 9;border-radius:7px;overflow:hidden;background:#000}.sv-thumb{display:block;width:100%;height:100%;object-fit:cover}.sv-dur{position:absolute;right:4px;bottom:4px;padding:1px 5px;font-size:11px;font-weight:600;color:#fff;background:#000000c7;border-radius:4px;font-variant-numeric:tabular-nums}.sv-info{min-width:0;display:flex;flex-direction:column;gap:3px}.sv-title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sv-meta{color:var(--muted);font-size:12px;display:flex;flex-wrap:wrap;gap:3px 5px}.sv-meta .sep{color:var(--muted-2)}.sv-actions{position:absolute;right:8px;bottom:8px;display:flex;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease}.sv-item:hover .sv-actions,.sv-item:focus-within .sv-actions{opacity:1;transform:translateY(0)}.sv-action{padding:5px 10px;font-size:12px;font-weight:600;color:var(--fg);background:#14161aeb;border:1px solid var(--border-strong);border-radius:7px;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .12s ease,border-color .12s ease}.sv-action:hover{background:var(--accent);border-color:var(--accent);color:#fff}.sv-action.secondary:hover{background:var(--border-strong);border-color:var(--border-strong)}.sv-empty,.sv-error{color:var(--muted);font-size:13px;text-align:center;padding:26px 10px}.sv-error{color:var(--warn)}.queue-panel{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px;gap:10px}.queue-empty{margin:0;color:var(--muted);font-size:13px;text-align:center;padding:26px 12px}.queue-list{list-style:none;margin:0;padding:0;flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.queue-item{display:flex;align-items:center;gap:9px;padding:7px 8px;background:var(--card);border:1px solid var(--border);border-radius:9px;transition:transform .15s ease,border-color .15s ease,background .15s ease}.queue-item:hover{border-color:var(--border-strong);background:#20232b}.queue-item.queue-playing{border-color:#e62e2e80;background:#e62e2e0f}.queue-num{flex:none;width:20px;text-align:center;font-size:12px;font-weight:700;color:var(--muted-2)}.queue-title{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.queue-title:hover{color:var(--fg);text-decoration:underline}.queue-actions{display:flex;gap:2px;flex:none}.qact{width:26px;height:26px;display:grid;place-items:center;background:transparent;color:var(--muted);border:none;border-radius:6px;cursor:pointer;transition:background .12s ease,color .12s ease}.qact:hover:not(:disabled){background:var(--surface-2);color:var(--fg)}.qact:disabled{opacity:.3;cursor:not-allowed}@media(max-width:1080px){.layout{grid-template-columns:minmax(0,1fr) 320px}}@media(max-width:820px){.layout{grid-template-columns:1fr}.sidebar{position:static;max-height:65vh}.topbar{flex-wrap:wrap;row-gap:8px}.transport-bar{flex-wrap:wrap}.timeline{order:-1;flex-basis:100%}}@media(max-width:480px){.room-meta .room-code{display:none}.sv-thumb{width:108px}}[hidden]{display:none!important}