:root{--text:#c8cdd8;--text-h:#f4f6fa;--text-muted:#7a8296;--bg:#08090d;--bg-mid:#101218;--bg-accent:#1a1028;--surface:#ffffff0f;--surface-glass:#ffffff14;--border:#ffffff1a;--border-glow:#a855f759;--accent:#a855f7;--accent-blue:#6366f1;--accent-magenta:#ec4899;--gradient-neon:linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);--gradient-fill:linear-gradient(0deg, #6366f1, #a855f7, #ec4899);--success:#34d399;--danger:#f87171;--mono:ui-monospace, "SF Mono", Consolas, monospace;--shadow:0 8px 32px #00000073;--glass-blur:blur(20px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,-apple-system,SF Pro Display,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}body{background:var(--bg);background-image:radial-gradient(ellipse 80% 50% at 50% -10%, #6366f12e, transparent), radial-gradient(ellipse 60% 40% at 100% 50%, #ec48991a, transparent), linear-gradient(165deg, var(--bg) 0%, var(--bg-mid) 45%, var(--bg-accent) 100%);background-attachment:fixed;min-height:100svh;margin:0}#root{width:100%;max-width:430px;min-height:100svh;margin:0 auto}.host-mode-switch{gap:8px;width:100%;max-width:360px;margin-bottom:8px;display:flex}.host-mode-btn{border:1px solid var(--border);background:var(--surface-glass);min-height:44px;color:var(--text-muted);cursor:pointer;border-radius:12px;flex:1;font-size:.85rem;font-weight:600;transition:background .15s,color .15s,border-color .15s}.host-mode-btn.active{background:var(--gradient-neon);color:#fff;border-color:#0000}.crowdlight-controller{flex-direction:column;gap:10px;width:100%;max-width:360px;display:flex}.crowdlight-controller-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);text-align:center;margin:0;font-size:.8rem}.crowdlight-effect-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.crowdlight-effect-btn{letter-spacing:.06em;cursor:pointer;color:#fff;text-shadow:0 1px 2px #00000059;border:none;border-radius:12px;min-height:48px;font-size:.8rem;font-weight:700}.crowdlight-effect-btn:active{transform:scale(.97)}.crowdlight-effect-btn--red{background:#c62828}.crowdlight-effect-btn--green{background:#2e7d32}.crowdlight-effect-btn--blue{background:#1565c0}.crowdlight-effect-btn--white{color:#222;text-shadow:none;background:#f5f5f5}.crowdlight-effect-btn--flash{color:#333;text-shadow:none;background:linear-gradient(135deg,#fff9c4,#fff)}.crowdlight-effect-btn--flash.active{box-shadow:0 0 0 2px #ffffffa6}.crowdlight-effect-btn--flash-stop{color:#fff;background:#424242;border:1px solid #666}.crowdlight-flash-controls{flex-direction:column;gap:8px;display:flex}.crowdlight-bpm-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.crowdlight-bpm-input{width:100%}.crowdlight-flash-buttons{grid-template-columns:1fr 1fr;gap:8px;display:grid}.crowdlight-host-preview{border:1px solid var(--border);border-radius:12px;width:100%;height:56px;transition:background-color .1s}.crowdlight-host-preview--flash{background-color:#fff!important}.crowdlight-debug-panel{margin-top:12px}.crowdlight-retry-btn{z-index:102;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.crowdlight-controller .crowdlight-retry-btn{width:100%;position:static;transform:none}.crowdlight-client-offset-hint{bottom:calc(12px + env(safe-area-inset-bottom,0px));color:#ffffff73;pointer-events:none;font-size:.65rem;position:absolute;left:50%;transform:translate(-50%)}.crowdlight-effect-btn--blackout{background:#111;border:1px solid #333}.crowdlight-client{z-index:100;flex-direction:column;transition:background-color .12s;display:flex;position:fixed;inset:0}.crowdlight-client-status{top:calc(12px + env(safe-area-inset-top,0px));color:#ffffffd9;letter-spacing:.04em;pointer-events:none;background:#00000059;border-radius:999px;padding:6px 14px;font-size:.75rem;position:absolute;left:50%;transform:translate(-50%)}.crowdlight-client-leave{top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:101;position:absolute}.crowdlight-client--flash{background-color:#fff!important}.app-screen{width:100%;min-height:100svh}.product-shell{min-height:100dvh;padding:calc(16px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));box-sizing:border-box;flex-direction:column;align-items:center;display:flex}.glass-card{background:var(--surface-glass);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:20px}.product-title{text-align:center;width:100%;margin:0 0 8px}.product-brand{letter-spacing:.22em;color:var(--text-h);text-shadow:0 0 40px #a855f759;margin:0;font-size:clamp(1.35rem,5vw,1.65rem);font-weight:800}.product-tagline{color:var(--text-muted);letter-spacing:.02em;margin:10px 0 0;font-size:.95rem}.product-status-line{color:var(--text-muted);text-align:center;margin:8px 0 0;font-size:.9rem}.product-status-error{color:var(--danger)}.wake-lock-warning{color:var(--text-muted);text-align:center;background:#ffc85014;border:1px solid #ffc85059;border-radius:8px;margin:8px 16px 0;padding:8px 12px;font-size:.82rem;line-height:1.35}.background-audio-hint{color:var(--text-muted);text-align:center;background:#94a3b814;border:1px solid #94a3b840;border-radius:8px;margin:8px 16px 0;padding:8px 12px;font-size:.82rem;line-height:1.35}.background-audio-hint--compact{background:#94a3b80d;border-color:#94a3b826;width:100%;max-width:360px;margin:0;padding:6px 10px;font-size:.72rem;line-height:1.3}.host-auth-screen{min-height:calc(100svh - var(--safe-top) - var(--safe-bottom));flex:1;justify-content:center;align-items:center;padding:24px 16px;display:flex}.host-auth-card{text-align:center;width:min(100%,360px);padding:28px 24px}.host-auth-title{margin:0 0 4px;font-size:1.5rem;font-weight:700}.host-auth-subtitle{color:var(--text-muted);margin:0 0 20px;font-size:.9rem}.host-auth-form{text-align:left;flex-direction:column;gap:10px;display:flex}.host-auth-label{color:var(--text-muted);font-size:.85rem}.host-auth-input{border:1px solid var(--border);width:100%;color:var(--text-h);background:#0003;border-radius:8px;padding:10px 12px;font-size:1rem}.host-auth-error{color:var(--danger);margin:0;font-size:.85rem}.host-auth-submit{width:100%;margin-top:8px}.host-auth-toolbar{justify-content:flex-end;width:100%;max-width:480px;margin:0 auto;padding:8px 16px 0;display:flex}.btn-host-logout{color:var(--text-muted);border:1px solid var(--border);background:0 0;padding:6px 12px;font-size:.8rem}.qr-config-hint{color:var(--text-muted);text-align:center;margin:0;padding:16px 12px;font-size:.82rem;line-height:1.4}.guest-url-preview{color:var(--text-muted);word-break:break-all;text-align:center;margin:6px 0 0;font-size:.72rem}.scroll-hint{color:var(--text-muted);text-align:center;opacity:.7;margin:auto 0 0;padding-top:16px;font-size:.75rem}.guest-join-landing{width:100%;min-height:calc(100svh - 48px - var(--safe-top) - var(--safe-bottom));flex-direction:column;flex:1;display:flex}.join-landing-center{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;width:100%;padding:24px 0;display:flex}.btn-connect{letter-spacing:.18em;color:#fff;cursor:pointer;background:var(--gradient-neon);border:none;border-radius:28px;width:min(100%,320px);min-height:clamp(120px,28vh,200px);font-size:clamp(1.5rem,6vw,2rem);font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 1px #ffffff1f,0 12px 40px #a855f773,inset 0 1px #fff3}.btn-connect:active:not(:disabled){transform:scale(.97)}.btn-connect:disabled{opacity:.45;cursor:not-allowed}.room-status-card{text-align:center;width:100%;max-width:360px;margin-top:24px;padding:24px 20px}.room-status-message{color:var(--text-h);font-size:1rem}.join-error-card{text-align:center;width:min(100%,320px);padding:28px 20px}.join-error-title{color:var(--text-h);margin:0 0 8px;font-size:1.1rem;font-weight:600}.join-error-hint{color:var(--text-muted);margin:0 0 20px;font-size:.95rem}.btn-retry{width:100%;min-height:48px}.guest-thank-you-card{text-align:center;width:min(100%,360px);padding:32px 24px}.guest-thank-you-title{color:var(--text-h);margin:0 0 12px;font-size:1.35rem;font-weight:700}.guest-thank-you-text{color:var(--text-muted);margin:0 0 28px;font-size:1rem;line-height:1.5}.btn-instagram{margin-bottom:12px}.btn-rejoin{background:var(--surface-glass);width:100%;min-height:48px;color:var(--text-h);border:1px solid var(--border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);margin-bottom:10px}.btn-close-tab{width:100%;min-height:44px;color:var(--text-muted);background:0 0;border:none;font-size:.9rem}.guest-thank-you-dismissed{margin:0}.guest-speaker-ui{width:100%;max-width:420px;min-height:calc(100svh - 48px - var(--safe-top) - var(--safe-bottom));flex-direction:column;flex:1;align-items:center;gap:14px;margin:0 auto;padding:0 4px 24px;display:flex;position:relative}.guest-speaker-ui .product-title{width:100%;padding-right:52px}.leave-btn{z-index:10;width:44px;height:44px;-webkit-backdrop-filter:var(--glass-blur);color:var(--text-h);cursor:pointer;background:#0c0e14d9;border:1px solid #a855f759;border-radius:50%;justify-content:center;align-items:center;padding:0;font-size:1.65rem;font-weight:300;line-height:1;transition:transform .15s,background .15s,border-color .15s;display:flex;position:absolute;top:4px;right:0;box-shadow:0 4px 16px #00000059}.leave-btn:hover{border-color:#f8717173}.leave-btn span{margin-top:-2px}.leave-btn:active{background:#f8717126;transform:scale(.92)}.guest-live-status{letter-spacing:.04em;margin:0;font-size:.95rem}.guest-volume-row{align-items:center;gap:12px;width:100%;max-width:360px;padding:12px 16px;display:flex}.guest-volume-icon{color:var(--text-muted);flex-shrink:0;align-items:center;display:flex}.guest-volume-input{appearance:none;touch-action:none;background:#ffffff1a;border-radius:3px;flex:1;min-width:0;height:6px}.guest-volume-input::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 8px #00000059}.guest-volume-input::-moz-range-thumb{cursor:pointer;background:#fff;border:none;border-radius:50%;width:24px;height:24px;box-shadow:0 2px 8px #00000059}.guest-volume-pct{min-width:40px;color:var(--text-muted);text-align:right;flex-shrink:0;font-size:.85rem;font-weight:600}.guest-action-row{grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:360px;display:grid}.btn-guest-action{letter-spacing:.04em;text-align:center;border-radius:12px;min-height:52px;padding:10px 8px;font-size:.78rem;font-weight:700;line-height:1.2}.btn-guest-action.btn-resync{color:#7dd3fc;background:#38bdf826;border:1px solid #38bdf859}.btn-guest-action.btn-leave-session{color:#fca5a5;background:#f871711f;border:1px solid #f8717159}.btn-guest-action:disabled{opacity:.55;cursor:not-allowed}.audio-ring{justify-content:center;width:100%;padding:12px 0 8px;display:flex}.audio-ring-outer{justify-content:center;align-items:center;width:min(220px,58vw);height:min(220px,58vw);display:flex;position:relative}.audio-ring-glow{opacity:.6;background:radial-gradient(circle,#a855f740,#0000 70%);border-radius:50%;position:absolute;inset:-8%}.audio-ring--playing .audio-ring-glow{opacity:1;animation:1.2s ease-in-out infinite ring-glow-pulse}.audio-ring--connected .audio-ring-glow{opacity:.75;animation:3s ease-in-out infinite ring-glow-idle}.audio-ring--dim .audio-ring-glow{opacity:.2}.audio-ring-bars{border-radius:50%;position:absolute;inset:0}.audio-ring-bar{transform-origin:50% 110px;width:3px;height:14px;transform:rotate(calc(var(--bar-i) * 22.5deg));background:var(--gradient-neon);opacity:.35;border-radius:3px;margin-top:calc(-50% - 6px);margin-left:-1.5px;position:absolute;top:50%;left:50%}.audio-ring--playing .audio-ring-bar{animation:.8s ease-in-out infinite ring-bar-bounce;animation-delay:calc(var(--bar-i) * 50ms);opacity:.9}.audio-ring--connected .audio-ring-bar{opacity:.5;animation:2.5s ease-in-out infinite ring-bar-idle;animation-delay:calc(var(--bar-i) * 80ms)}.audio-ring--dim .audio-ring-bar{opacity:.15;animation:none}.audio-ring-inner{z-index:2;background:#08090dbf padding-box padding-box;border:2px solid #0000;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:72%;height:72%;display:flex;position:relative;box-shadow:inset 0 0 30px #6366f126,0 0 0 2px #a855f766}.audio-ring--playing .audio-ring-inner{box-shadow:inset 0 0 40px #a855f740,0 0 0 2px #ec489980,0 0 30px #a855f74d}.audio-ring--guest{padding:8px 0 4px}.audio-ring--guest .audio-ring-outer{width:min(280px,76vw);height:min(280px,76vw)}.audio-ring--guest .audio-ring-bar{transform-origin:50% 140px;height:16px;margin-top:calc(-50% - 8px)}.audio-ring-inner--track{text-align:center;gap:6px;padding:12px 16px}.guest-track-kicker{letter-spacing:.16em;color:var(--text-muted);font-size:.58rem;font-weight:700}.guest-track-title{color:var(--text-h);-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;font-size:.95rem;font-weight:700;line-height:1.25;display:-webkit-box;overflow:hidden}.guest-track-artist{color:var(--text-muted);font-size:.75rem;line-height:1.2}.audio-ring-label{letter-spacing:.14em;color:var(--text-h);text-align:center;font-size:.7rem;font-weight:700}.audio-ring-sublabel{letter-spacing:.2em;color:var(--text-muted);text-align:center;font-size:.55rem}.audio-ring-pulse{background:var(--success);width:8px;height:8px;box-shadow:0 0 10px var(--success);border-radius:50%;animation:1.5s ease-in-out infinite status-pulse;position:absolute;top:12px;right:22%}@keyframes ring-glow-pulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@keyframes ring-glow-idle{0%,to{opacity:.55}50%{opacity:.85}}@keyframes ring-bar-bounce{0%,to{opacity:.5;height:10px}50%{opacity:1;height:22px}}@keyframes ring-bar-idle{0%,to{opacity:.35;height:12px}50%{opacity:.65;height:16px}}@keyframes status-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.vertical-volume{flex-direction:column;align-items:center;gap:12px;display:flex}.vertical-volume-wrap{touch-action:manipulation;align-items:center;gap:12px;height:min(240px,32vh);display:flex}.vertical-volume-ticks{flex-direction:column-reverse;justify-content:space-between;height:100%;padding:4px 0;display:flex}.vertical-volume-tick{background:#fff3;border-radius:1px;width:8px;height:1px;display:block}.vertical-volume-track-shell{border:1px solid var(--border);background:#ffffff0f;border-radius:26px;width:52px;height:100%;position:relative;overflow:visible;box-shadow:inset 0 2px 12px #00000059}.vertical-volume-fill{background:var(--gradient-fill);opacity:.85;pointer-events:none;z-index:1;border-radius:0 0 24px 24px;transition:height 80ms;position:absolute;bottom:0;left:0;right:0;box-shadow:0 0 20px #a855f766}.vertical-volume-input{transform-origin:50%;opacity:.01;cursor:pointer;z-index:2;appearance:none;touch-action:none;-webkit-tap-highlight-color:transparent;width:min(240px,32vh);height:56px;margin:0;padding:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-90deg)}.vertical-volume-icon{color:var(--text-muted);opacity:.85}.vertical-volume-pct{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600}.track-card{align-items:center;gap:14px;width:100%;max-width:360px;margin-top:auto;padding:14px 16px;display:flex}.track-card-art{background:var(--gradient-neon);border-radius:12px;flex-shrink:0;width:52px;height:52px;position:relative;overflow:hidden}.track-card-art-glow{background:linear-gradient(135deg,#fff3,#0000);position:absolute;inset:0}.track-card-meta{text-align:left;min-width:0}.track-card-title{color:var(--text-h);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1rem;font-weight:600;overflow:hidden}.track-card-artist{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;margin:4px 0 0;font-size:.85rem;overflow:hidden}.playlist-controls{flex-direction:column;gap:10px;width:100%;max-width:360px;padding:14px 16px;display:flex}.playlist-now-playing,.playlist-up-next,.playlist-track-count{color:var(--text-h);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.9rem;overflow:hidden}.playlist-now-playing{font-weight:600}.playlist-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem;font-weight:500}.playlist-load-status,.playlist-change-notice,.playlist-preload-notice{color:var(--text-muted);margin:0;font-size:.82rem}.playlist-change-notice{color:var(--accent,#a78bfa)}.playlist-preload-notice{color:#e8b84a}.long-track-warning{color:#e8b84a;margin:0;font-size:.82rem;line-height:1.35}.playlist-select-row{flex-direction:column;gap:6px;display:flex}.playlist-select-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}.playlist-track-select{width:100%;color:var(--text-h);background:#00000040;border:1px solid #ffffff1f;border-radius:10px;padding:8px 10px;font-size:.9rem}.playlist-nav-row{flex-wrap:wrap;gap:8px;display:flex}.btn-playlist-nav,.btn-playlist-reload{flex:auto;min-width:0;padding:8px 10px;font-size:.78rem}.btn-playlist-reload{width:100%}.guest-track-load-status{margin-top:8px}.audio-channel-mode{align-items:center;gap:12px;width:100%;max-width:360px;padding:12px 16px;display:flex}.audio-channel-mode-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex-shrink:0;font-size:.78rem}.audio-channel-mode-select{min-width:0;color:var(--text-h);background:#00000040;border:1px solid #ffffff1f;border-radius:10px;flex:1;padding:8px 10px;font-size:.9rem}.guest-speaker-ui .audio-channel-mode{margin-top:0}.audio-channel-mode--compact{border-color:#ffffff14;padding:10px 14px}.host-product-body{flex-direction:column;flex:1;align-items:center;gap:14px;width:100%;display:flex}.qr-card{text-align:center;width:100%;max-width:360px;padding:20px}.qr-wrap{background:#fff;border-radius:16px;padding:12px;display:inline-flex;box-shadow:0 4px 20px #00000040}.qr-hint{color:var(--text-muted);margin:14px 0 6px;font-size:.9rem}.room-id-compact{font-family:var(--mono);letter-spacing:.12em;color:var(--text-muted);margin:0;font-size:.85rem}.host-stats-row{gap:10px;width:100%;max-width:360px;display:flex}.host-stat-pill{flex-direction:column;flex:1;align-items:center;gap:4px;padding:12px;display:flex}.host-stat-value{background:var(--gradient-neon);color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.75rem;font-weight:700;line-height:1}.host-stat-dot{background:var(--gradient-neon);border-radius:50%;width:12px;height:12px;box-shadow:0 0 12px #a855f799}.host-stat-label{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:.75rem}.host-volume-row{align-items:center;gap:12px;width:100%;max-width:360px;padding:14px 16px;display:flex}.host-volume-label{color:var(--text-muted);white-space:nowrap;font-size:.8rem}.host-volume-input{appearance:none;background:#ffffff1a;border-radius:3px;flex:1;height:6px}.host-volume-input::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 8px #00000059}.host-volume-pct{color:var(--text-muted);text-align:right;min-width:40px;font-size:.85rem;font-weight:600}.guest-master-gain-hint{opacity:.8;margin-top:-.35rem;font-size:.85rem}.audio-source-control{flex-direction:column;gap:10px;width:100%;max-width:360px;margin-bottom:8px;display:flex}.audio-source-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0;font-size:.8rem;font-weight:600}.audio-source-switch{flex-direction:column;gap:8px;display:flex}.audio-source-btn{border:1px solid var(--border);background:var(--surface-glass);min-height:44px;color:var(--text-muted);cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;gap:8px;padding:0 14px;font-size:.9rem;font-weight:600;transition:background .15s,color .15s,border-color .15s;display:flex}.audio-source-btn.active{background:var(--gradient-neon);color:#fff;border-color:#0000}.audio-source-btn.is-disabled{opacity:.72;cursor:not-allowed}.audio-source-soon{text-transform:uppercase;letter-spacing:.06em;opacity:.85;font-size:.72rem;font-weight:600}.audio-source-placeholder{margin:0}.audio-source-debug-note{color:var(--text-muted);opacity:.8;margin:0;font-size:.75rem}.host-controls{width:100%;max-width:360px}.controls{flex-wrap:wrap;justify-content:center;gap:10px;width:100%;display:flex}.btn{cursor:pointer;border:none;border-radius:14px;flex:90px;min-height:48px;padding:12px 16px;font-size:.95rem;font-weight:600;transition:transform .15s,opacity .15s}.btn:active:not(:disabled){transform:scale(.97)}.btn-primary,.btn-host-audio{background:var(--gradient-neon);color:#fff;width:100%;max-width:360px;min-height:52px;box-shadow:0 8px 24px #a855f759}.btn-play{background:var(--gradient-neon);color:#fff}.btn-pause{background:var(--surface-glass);color:var(--text-h);border:1px solid var(--border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.btn-stop{color:#fca5a5;background:#f8717133;border:1px solid #f8717159}.btn-sync-all,.btn-resync{color:#7dd3fc;background:#38bdf826;border:1px solid #38bdf859}.btn-sync-all:disabled,.btn-resync:disabled{opacity:.45;cursor:not-allowed}.guest-resync-btn{width:min(100%,280px);margin:8px auto 0}.btn-play:disabled{opacity:.45;cursor:not-allowed}.btn-sync-test{background:var(--surface-glass);width:100%;max-width:360px;color:var(--text);border:1px solid var(--border);margin-top:8px}.btn-sync-test:disabled{opacity:.5;cursor:not-allowed}.debug-section{padding:32px calc(20px + var(--safe-right)) calc(48px + var(--safe-bottom)) calc(20px + var(--safe-left));border-top:1px solid var(--border);background:#00000059;flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.debug-section-divider{text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);text-align:center;opacity:.6;margin:0 0 8px;font-size:.7rem}.collapsible-debug-section{gap:16px}.collapsible-debug-toggle{border:1px solid var(--border);width:100%;max-width:360px;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-align:left;background:#ffffff0a;border-radius:12px;padding:12px 16px;font-size:.8rem;font-weight:600}.collapsible-debug-body{flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}.debug-only-url{word-break:break-all;opacity:.5;font-size:.65rem}.sync-debug-panel,.guest-debug-panel,.drift-recorder-panel,.diagnostics-panel{border:1px solid var(--border);background:#ffffff0a;border-radius:12px;width:100%;max-width:360px;margin:0;padding:0;overflow:hidden}.sync-debug-toggle{width:100%;color:var(--text-muted);text-align:left;cursor:pointer;background:#ffffff0a;border:none;padding:12px 14px;font-size:.8rem;font-weight:600}.sync-debug-body{font-family:var(--mono);color:var(--text-muted);padding:0 14px 14px;font-size:.68rem;line-height:1.55}.sync-debug-body p{margin:4px 0}.diagnostics-title{color:var(--text);margin:0 0 10px;font-size:.85rem;font-weight:600}.guest-debug-panel,.drift-recorder-panel,.diagnostics-panel{padding:14px}.guest-debug-list{font-family:var(--mono);margin:0;padding:0;font-size:.68rem;list-style:none}.guest-debug-list li{color:var(--text-muted);border-bottom:1px solid #ffffff0d;justify-content:space-between;gap:12px;padding:5px 0;display:flex}.guest-debug-list li span:last-child{text-align:right;color:var(--text)}.guest-debug-error{color:var(--danger)!important}.diagnostics-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;display:grid}.diagnostics-stat{flex-direction:column;gap:2px;display:flex}.diagnostics-stat .label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.65rem}.diagnostics-stat .value{font-family:var(--mono);color:var(--text-h);font-size:.8rem}.diagnostics-list{font-family:var(--mono);margin:0;padding:0;font-size:.65rem;list-style:none}.diagnostics-list li{color:var(--text-muted);border-top:1px solid #ffffff0d;flex-wrap:wrap;gap:8px;padding:6px 0;display:flex}.guest-tag{color:var(--accent)}.hint{color:var(--text-muted);margin:8px 0 0;font-size:.7rem}.drift-recorder-actions{flex-direction:column;gap:8px;margin-top:12px;display:flex}.btn-drift-record{background:var(--gradient-neon);color:#fff}.btn-drift-export{background:var(--surface-glass);color:var(--text);border:1px solid var(--border)}.btn-drift-record:disabled,.btn-drift-export:disabled{opacity:.45;cursor:not-allowed}.label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 4px;font-size:.75rem}.host-delay-compensation{border-top:1px solid #ffffff14;margin-top:12px;padding-top:12px}.host-delay-compensation-title{letter-spacing:.08em;color:var(--text);margin:0 0 8px;font-size:.7rem;font-weight:600}.host-delay-compensation-labels{color:var(--text-muted);justify-content:space-between;margin-bottom:6px;font-size:.65rem;display:flex}.host-delay-compensation-slider{appearance:none;background:#ffffff1f;border-radius:3px;width:100%;height:6px}.host-delay-compensation-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #00000059}.host-delay-compensation-value{color:var(--text-muted);text-align:center;margin:8px 0 0;font-size:.7rem}.host-player-shell{align-items:stretch;width:100%;max-width:440px;margin:0 auto}.host-player-body{flex-direction:column;flex:1;gap:8px;width:100%;padding-bottom:8px;display:flex}.host-player-status{width:100%}.host-player-header{justify-content:space-between;align-items:center;gap:16px;width:100%;margin-bottom:8px;padding:0 2px;display:flex}.host-player-brand-row{align-items:center;gap:10px;min-width:0;display:flex}.host-brand-icon{background:linear-gradient(var(--gradient-neon), var(--gradient-neon)) 0 50% / 3px 70% no-repeat, linear-gradient(var(--gradient-neon), var(--gradient-neon)) 7px 35% / 3px 90% no-repeat, linear-gradient(var(--gradient-neon), var(--gradient-neon)) 14px 55% / 3px 60% no-repeat, linear-gradient(var(--gradient-neon), var(--gradient-neon)) 21px 25% / 3px 100% no-repeat;filter:drop-shadow(0 0 6px #a855f780);border-radius:2px;flex-shrink:0;width:22px;height:18px}.host-player-brand{letter-spacing:.14em;color:var(--text-h);text-shadow:0 0 32px #a855f74d;white-space:nowrap;margin:0;font-size:clamp(.95rem,3.8vw,1.15rem);font-weight:800}.host-header-logout{color:var(--text-muted);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff1a;border-radius:999px;flex-shrink:0;padding:7px 12px;font-size:.72rem;font-weight:600;transition:background .15s,color .15s}.host-header-logout:hover{color:var(--text-h);background:#ffffff1a}.host-qr-card{text-align:center;border-color:#a855f733;width:100%;padding:18px 16px 14px;box-shadow:0 0 40px #581c8726}.host-qr-wrap{background:#fff;border-radius:14px;padding:10px;display:inline-flex;box-shadow:0 4px 24px #0000004d}.host-qr-hint{color:var(--text-muted);margin:12px 0 6px;font-size:.88rem}.host-qr-url{color:#a855f7d9;word-break:break-all;margin:0 0 12px;font-size:.68rem;line-height:1.35}.host-qr-footer{border-top:1px solid #ffffff14;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding-top:10px;display:flex}.host-qr-guests{color:var(--text-muted);align-items:center;gap:6px;font-size:.78rem;display:inline-flex}.host-qr-guests-icon{opacity:.8;font-size:.85rem}.host-qr-sync-btn{color:var(--text-h);cursor:pointer;background:#a855f71f;border:1px solid #a855f773;border-radius:999px;padding:6px 12px;font-size:.75rem;font-weight:600;transition:background .15s}.host-qr-sync-btn:disabled{opacity:.45;cursor:not-allowed}.host-qr-sync-btn:not(:disabled):hover{background:#a855f738}.host-qr-room{font-family:var(--mono);letter-spacing:.06em;color:var(--text-muted);align-items:center;gap:6px;font-size:.72rem;display:inline-flex}.host-qr-copy-btn{color:var(--text-muted);cursor:pointer;background:#ffffff0f;border:none;border-radius:6px;padding:2px 6px;font-size:.7rem}.host-source-row{justify-content:space-between;align-items:center;gap:12px;width:100%;padding:10px 14px;display:flex}.host-source-row-label{color:var(--text-h);white-space:nowrap;align-items:center;gap:8px;font-size:.85rem;font-weight:600;display:inline-flex}.host-source-icon{color:#a855f7e6;font-size:1rem}.host-source-select{min-width:0;max-width:200px;color:var(--text-h);background:#00000040;border:1px solid #ffffff1f;border-radius:10px;flex:1;padding:8px 10px;font-size:.82rem;font-weight:600}.host-compact-player{flex-direction:column;gap:8px;width:100%;padding:14px 16px 12px;display:flex}.host-source-badge{letter-spacing:.1em;color:#ffffffe6;background:#a855f733;border:1px solid #a855f759;border-radius:6px;align-self:flex-start;padding:3px 8px;font-size:.62rem;font-weight:700}.host-compact-player-title{color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(1.05rem,4.2vw,1.25rem);font-weight:700;line-height:1.25;overflow:hidden}.host-now-playing-notice{color:#fbbf24;margin:0;font-size:.82rem}.host-now-playing-loading{margin:0;font-size:.85rem}.host-seek-block{width:100%;margin-top:2px}.host-progress-bar{background:#ffffff1a;border-radius:999px;width:100%;height:5px;margin-top:4px;position:relative}.host-progress-bar--seekable{cursor:pointer;touch-action:none;background:0 0;margin:-4px 0;padding:8px 0}.host-progress-bar--seekable:before{content:"";background:#ffffff1a;border-radius:999px;height:5px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.host-progress-bar.is-disabled{opacity:.5;cursor:not-allowed}.host-progress-fill{border-radius:inherit;background:var(--gradient-neon);pointer-events:none;height:5px;transition:width .2s linear;position:absolute;top:50%;left:0;transform:translateY(-50%)}.host-progress-bar--seekable .host-progress-fill{transition:none}.host-progress-thumb{pointer-events:none;background:#fff;border-radius:50%;width:12px;height:12px;margin-left:-6px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 1px 6px #00000059}.host-progress-times{width:100%;color:var(--text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:2px;font-size:.72rem;display:flex}.host-enable-audio{width:100%;margin-top:4px}.host-transport-controls{justify-content:center;align-items:center;gap:28px;margin-top:6px;display:flex}.host-transport-controls--compact .host-transport-btn{background:#ffffff0a;border-radius:50%;width:44px;height:44px;font-size:1.2rem}.host-transport-btn{color:var(--text-h);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:transform .12s,opacity .12s,background .12s;display:inline-flex}.host-transport-btn:disabled{opacity:.35;cursor:not-allowed}.host-transport-btn:not(:disabled):active{transform:scale(.94)}.host-compact-volume{border-top:1px solid #ffffff0f;align-items:center;gap:10px;margin-top:6px;padding-top:8px;display:flex}.host-compact-volume-icon{opacity:.8;font-size:.9rem}.host-compact-volume-input{appearance:none;background:#ffffff1f;border-radius:3px;flex:1;height:5px}.host-compact-volume-input::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 6px #00000059}.host-compact-volume-pct{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;min-width:38px;font-size:.78rem;font-weight:600}.host-player-body .radio-controls{width:100%;max-width:none;padding:12px 14px}.host-player-body .radio-controls .playlist-now-playing{margin-bottom:8px}.host-playlist-section{width:100%;padding:14px 12px 12px}.host-playlist-header{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;padding:0 4px;display:flex}.host-playlist-title{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0;font-size:.85rem}.host-playlist-count{color:var(--text-muted);font-size:.75rem}.host-playlist-empty{color:var(--text-muted);margin:0 4px 8px;font-size:.88rem}.host-playlist-list{flex-direction:column;gap:4px;max-height:min(42vh,320px);margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.host-playlist-item{border:1px solid #0000;border-radius:12px;grid-template-columns:20px 28px 1fr auto;align-items:center;gap:6px;padding:8px 6px;display:grid}.host-playlist-item.is-current{background:#a855f724;border-color:#a855f747}.host-playlist-item.is-next:not(.is-current){background:#ffffff08}.host-playlist-drag{color:#ffffff59;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;font-size:.9rem;line-height:1}.host-playlist-drag:active{cursor:grabbing}.host-playlist-item.is-dragging{opacity:.55}.host-playlist-item.is-drop-target{background:#a855f714;border-color:#a855f773}.host-playlist-num{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;font-size:.78rem}.host-playlist-track-btn{min-width:0;color:var(--text-h);text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;gap:2px;padding:0;display:flex}.host-playlist-track-title{text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;font-weight:600;overflow:hidden}.host-playlist-next-badge{text-transform:uppercase;letter-spacing:.08em;color:#a855f7e6;font-size:.62rem;font-weight:700}.host-playlist-duration{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:right;min-width:42px;font-size:.75rem}.host-playlist-eq{justify-content:flex-end;align-items:flex-end;gap:2px;min-width:42px;height:14px;display:inline-flex}.host-playlist-eq span{background:var(--gradient-neon);border-radius:2px;width:3px;animation:.9s ease-in-out infinite host-eq-bounce}.host-playlist-eq span:first-child{height:6px;animation-delay:0s}.host-playlist-eq span:nth-child(2){height:12px;animation-delay:.15s}.host-playlist-eq span:nth-child(3){height:8px;animation-delay:.3s}@keyframes host-eq-bounce{0%,to{transform:scaleY(.55)}50%{transform:scaleY(1)}}.host-playlist-order-status{text-align:center;margin:10px 4px 0;font-size:.72rem}.host-playlist-order-status.is-saving{color:#ffffff73}.host-playlist-order-status.is-saved{color:#86efacd9}.host-playlist-order-status.is-error{color:#f87171e6}.collapsible-debug-section{width:100%;max-width:440px;margin:0 auto}.collapsible-debug-section .host-mode-switch{margin-bottom:12px}@media (width<=380px){.host-player-header{gap:10px}.host-player-brand{letter-spacing:.1em;font-size:.9rem}.host-transport-controls{gap:20px}.host-playlist-item{grid-template-columns:16px 24px 1fr auto;gap:4px}.host-qr-footer{flex-direction:column;align-items:stretch}.host-qr-sync-btn{width:100%}}