:root{--bg: #05070f;--card: #0c1222;--card-2: #111a30;--line: #1c2745;--text: #e9efff;--muted: #8b99bf;--faint: #5d6b91;--accent: #2f7bff;--accent-2: #7fb0ff;--ok: #3ddc97;--warn: #ffc857;--bad: #ff6b6b;--radius: 20px;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.45 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{min-height:100dvh;background:radial-gradient(900px 500px at 50% -120px,rgba(47,123,255,.22),transparent 70%),var(--bg);background-attachment:fixed}#app{padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}[hidden]{display:none!important}h1,h2,p{margin:0}h2{font-size:17px;font-weight:650;margin-bottom:6px}.muted{color:var(--muted);font-size:14.5px}.small{font-size:13px}.icon{display:inline-flex;width:18px;height:18px}.icon svg,button svg{width:100%;height:100%;fill:currentColor}button{font:inherit;color:inherit;border:0;cursor:pointer;border-radius:14px;padding:12px 18px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:transform .08s ease,background .15s ease,opacity .15s ease;touch-action:manipulation}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:default}button.primary{background:linear-gradient(180deg,#3b86ff,#2463e6);color:#fff;box-shadow:0 6px 20px #2f7bff59}button.secondary{background:var(--card-2);border:1px solid var(--line)}button.ghost{background:transparent;color:var(--muted)}button.small{min-height:36px;padding:6px 12px;font-size:14px}button.big{min-height:56px;font-size:17px;width:100%}button.round{width:48px;height:48px;padding:12px;border-radius:50%;background:var(--card-2);border:1px solid var(--line)}button.round.big{width:66px;height:66px;padding:19px;background:#fff;color:#0b1020}button.icon-only{width:40px;min-height:40px;padding:10px;background:transparent;color:var(--faint)}input[type=text]{width:100%;font:inherit;font-size:17px;color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:13px 14px;outline:none}input[type=text]:focus{border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}.row{display:flex;gap:10px;align-items:center;margin-top:12px}.row.wrap{flex-wrap:wrap}.stack{display:grid;gap:12px;margin-top:14px}.home{max-width:460px;margin:0 auto;padding-top:6vh}.hero{text-align:center;margin-bottom:26px}.logo{width:76px;height:76px;margin:0 auto 14px;padding:12px;border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 40px #2f7bff40}.hero h1{font-size:40px;letter-spacing:-.03em;font-weight:750}.tagline{color:var(--muted);margin-top:6px;font-size:17px}.home-card{padding:18px}.invite-line{text-align:center;color:var(--muted)}.invite-line b{font-family:var(--mono);color:var(--text);letter-spacing:.08em}.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:13px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.join-row{margin-top:0}.code-input{font-family:var(--mono)!important;letter-spacing:.15em;text-transform:uppercase}.steps{margin:26px 4px 0;padding-left:22px;color:var(--muted);display:grid;gap:10px;font-size:15px}.steps b{color:var(--text)}.fineprint{margin-top:20px;text-align:center;color:var(--faint);font-size:13px}.shake{animation:shake .4s}@keyframes shake{25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.room{max-width:1040px;margin:0 auto}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:14px}.brand{font-weight:750;letter-spacing:-.02em;font-size:19px;flex:1}.room-code{font-family:var(--mono);font-weight:700;letter-spacing:.1em;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:8px}.room-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0 2px 12px}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}.status-dot.ok{background:var(--ok);box-shadow:0 0 10px var(--ok)}.status-dot.bad{background:var(--bad)}.columns{display:grid;gap:14px}.col{display:grid;gap:14px;align-content:start}@media(min-width:900px){.columns{grid-template-columns:1.15fr 1fr}}.card{background:linear-gradient(180deg,var(--card),#0a0f1d);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.banner{border-radius:14px;padding:12px 14px;margin-bottom:14px;background:var(--card-2);border:1px solid var(--line);color:var(--muted)}.banner.error{border-color:#ff6b6b66;color:#ffc2c2;background:#ff6b6b14}.now-playing{position:relative;overflow:hidden;padding:22px 18px 18px}.np-title{font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:12px;overflow-wrap:anywhere}.np-sub{color:var(--muted);font-size:14.5px;margin-top:2px}.eq{display:flex;gap:4px;height:22px;align-items:flex-end}.eq i{width:5px;height:5px;border-radius:3px;background:var(--accent-2);opacity:.5}.now-playing.playing .eq i{opacity:1;animation:eq .9s ease-in-out infinite}.now-playing.playing .eq i:nth-child(2){animation-delay:-.3s}.now-playing.playing .eq i:nth-child(3){animation-delay:-.6s}.now-playing.playing .eq i:nth-child(4){animation-delay:-.15s}@keyframes eq{0%,to{height:5px}50%{height:22px}}.timeline{margin-top:14px}.times{display:flex;justify-content:space-between;color:var(--faint);font-size:12.5px;font-variant-numeric:tabular-nums}.transport{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:10px}.sync-line{margin-top:12px;color:var(--ok);font-size:14px}.tabs{display:flex;gap:4px;background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:4px;margin:8px 0 14px}.tabs button{flex:1;min-height:38px;padding:6px 8px;border-radius:10px;font-size:14px;color:var(--muted);background:transparent}.tabs button[aria-selected=true]{background:var(--accent);color:#fff}.queue{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:6px}.queue li{display:flex;align-items:center;background:var(--card-2);border:1px solid var(--line);border-radius:14px}.queue li.current{border-color:var(--accent);background:#2f7bff1f}.queue li.empty{padding:14px;color:var(--faint);justify-content:center}.queue .track{flex:1;min-width:0;background:transparent;justify-content:space-between;text-align:left;font-weight:500;gap:12px}.track-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-meta{color:var(--faint);font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}.members{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.members li{display:flex;align-items:center;gap:12px}.members li.empty{color:var(--faint);font-size:14px;padding:6px 0}.avatar{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:linear-gradient(135deg,#2b4b9b,#1a2a55)}.who{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}.who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who em{font-style:normal;font-size:12px;color:var(--accent-2)}.who small{width:100%;color:var(--faint);font-size:12.5px}.chip{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;white-space:nowrap;background:var(--card-2);color:var(--muted);font-variant-numeric:tabular-nums}.chip.ok{color:var(--ok);background:#3ddc971a}.chip.warn{color:var(--warn);background:#ffc8571a}.chip.bad{color:var(--bad);background:#ff6b6b1a}.invite{display:flex;gap:18px;align-items:center}.invite-qr{flex:none;background:#fff;border-radius:16px;padding:10px}.qr{display:block;width:150px!important;height:150px!important}.invite-body{min-width:0}@media(max-width:520px){.invite{flex-direction:column;text-align:center}.qr{width:210px!important;height:210px!important}.invite .row{justify-content:center}}.delay-row{display:flex;align-items:center;gap:10px;margin-top:14px}.delay-main{flex:1;text-align:center}.delay-value{display:block;font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.nudge{width:54px;background:var(--card-2);border:1px solid var(--line);font-variant-numeric:tabular-nums}.note{margin-top:10px;font-size:14px;color:var(--accent-2)}.volume{display:flex;align-items:center;gap:12px;margin-top:16px;color:var(--muted)}details{margin-top:14px;color:var(--muted);font-size:14px}summary{cursor:pointer;color:var(--faint)}.stats{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:10px 0 0}.stats dt{color:var(--faint)}.stats dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}.gate{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:24px;background:#05070fd1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.gate button{max-width:360px}#toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#fff;color:#0b1020;font-weight:600;padding:10px 16px;border-radius:999px;transition:opacity .2s,transform .2s;z-index:20;max-width:calc(100vw - 32px);text-align:center}#toast.visible{opacity:1;transform:translate(-50%)}