:root{--bg-deep: #06060c;--bg-base: #0c0c18;--bg-surface: #141428;--bg-elevated: #1c1c38;--primary: #7c6cf0;--primary-light: #a78bfa;--primary-dark: #5b4cc4;--primary-glow: rgba(124, 108, 240, .5);--primary-subtle: rgba(124, 108, 240, .12);--accent: #22d3ee;--accent-glow: rgba(34, 211, 238, .4);--text-primary: #ffffff;--text-secondary: #a0a0c8;--text-muted: #5a5a80;--text-dim: #3a3a58;--error: #f43f5e;--error-glow: rgba(244, 63, 94, .3);--success: #10b981;--glass-bg: rgba(255, 255, 255, .06);--glass-border: rgba(255, 255, 255, .1);--glass-hover: rgba(255, 255, 255, .12);--font-stack: "Inter", "Segoe UI", "Arial Hebrew", "Noto Sans Hebrew", sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.25rem;--text-xl: 1.5rem;--text-2xl: 2rem;--text-3xl: 2.5rem;--text-4xl: 3.25rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-6: 24px;--space-8: 32px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-spring: cubic-bezier(.22, 1.2, .36, 1);--duration-fast: .15s;--duration-base: .3s;--duration-slow: .5s;--shadow-glow: 0 0 40px var(--primary-glow), 0 0 80px rgba(124, 108, 240, .2)}*{margin:0;padding:0;box-sizing:border-box}body{background:var(--bg-deep);color:var(--text-secondary);font-family:var(--font-stack);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-app-region:drag}.glass{background:var(--glass-bg);border:1px solid var(--glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.app-container{display:flex;flex-direction:column;height:100vh;padding:var(--space-4)}.display-page{display:flex;flex-direction:column;height:100vh;background:var(--bg-deep);position:relative;padding:var(--space-4);overflow:hidden}.room-badge{position:fixed;top:var(--space-3);left:var(--space-3);z-index:100;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-1) var(--space-3);display:flex;align-items:center;gap:var(--space-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.room-badge-label{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.room-badge-code{color:var(--text-primary);font-size:var(--text-base);font-weight:700;letter-spacing:3px}.connection-badge{position:fixed;top:var(--space-3);right:var(--space-3);z-index:100;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:all var(--duration-base) var(--ease-out)}.connection-badge.connected{border-color:#10b9814d;color:var(--success)}.connection-badge.disconnected{border-color:var(--error-glow);color:var(--error)}.connection-dot{width:8px;height:8px;border-radius:var(--radius-full);background:currentColor;flex-shrink:0}.connection-badge.disconnected .connection-dot{animation:pulse-dot 1.5s var(--ease-in-out) infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.3}}.logo-header{display:flex;justify-content:center;padding:var(--space-2) 0;flex-shrink:0;pointer-events:none;z-index:0}.app-logo{height:180px;width:auto;object-fit:contain}.display-track-info{text-align:center;padding:var(--space-3) var(--space-4);flex-shrink:0;-webkit-app-region:drag;animation:slide-in-track var(--duration-slow) var(--ease-out)}.display-track-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.display-track-artist{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-1)}@keyframes slide-in-track{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.track-info{text-align:center;padding:var(--space-3) 0;flex-shrink:0;-webkit-app-region:drag}.track-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-1)}.controls-bar{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-1) 0;flex-shrink:0;-webkit-app-region:no-drag}.sync-label{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;cursor:default;margin-right:var(--space-1)}.offset-display{color:var(--text-secondary);font-size:var(--text-xs);min-width:3em;text-align:center}.control-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.control-btn:hover{background:var(--glass-hover);color:var(--text-primary)}.control-btn.active{background:var(--primary);color:var(--text-primary);border-color:var(--primary)}.lyrics-container{flex:1;min-height:0;overflow-y:auto;position:relative;-webkit-app-region:no-drag;scroll-behavior:smooth;scrollbar-width:none}.lyrics-container::-webkit-scrollbar{display:none}.lyrics-container.entering{animation:lyrics-enter var(--duration-slow) var(--ease-out)}@keyframes lyrics-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.lyric-line{padding:12px 24px;font-size:clamp(1.45rem,1.5vw + .8rem,2rem);font-weight:500;line-height:1.6;text-align:center;transition:all var(--duration-slow) var(--ease-out);color:var(--text-dim);border-radius:var(--radius-md)}.lyric-line.clickable{cursor:pointer}.lyric-line.clickable:hover,.lyric-line.clickable:focus-visible{color:var(--text-primary);outline:none;background:linear-gradient(135deg,rgba(124,108,240,.1),transparent)}.lyric-line[dir=rtl]{text-align:center;direction:rtl}.lyric-line[dir=ltr]{text-align:center;direction:ltr}.lyric-line.active{color:var(--text-primary);font-size:clamp(1.8rem,1.8vw + .95rem,2.45rem);font-weight:700;text-shadow:0 0 30px var(--primary-glow);background:linear-gradient(135deg,rgba(124,108,240,.15),transparent);border-radius:var(--radius-md);transform:scale(1.02)}.lyric-line.upcoming{color:var(--text-secondary);opacity:.8}.lyric-line.past{color:var(--text-dim);opacity:.4;font-size:clamp(1.2rem,1.05vw + .72rem,1.6rem)}.no-lyrics{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);gap:var(--space-2)}.no-lyrics h2{font-size:var(--text-xl);margin-bottom:var(--space-2)}.no-lyrics p{font-size:var(--text-sm);color:var(--text-muted)}.plain-lyrics{flex:1;overflow-y:auto;padding:var(--space-4);font-size:var(--text-lg);line-height:1.8;color:var(--text-secondary);text-align:center;white-space:pre-wrap;scrollbar-width:thin;scrollbar-color:rgba(124,108,240,.55) rgba(255,255,255,.04)}.plain-lyrics::-webkit-scrollbar{width:12px}.plain-lyrics::-webkit-scrollbar-track{background:#ffffff0a;border-radius:999px}.plain-lyrics::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#a78bfaf2,#7c6cf0a6);border-radius:999px;border:3px solid rgba(12,12,24,.72)}.plain-lyrics::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#c4b5fdfa,#8b5cf6c7)}.plain-lyrics-source{font-size:var(--text-xs);opacity:.4;margin-bottom:var(--space-3);text-transform:uppercase;letter-spacing:1px}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-muted);font-size:var(--text-lg)}.loading:after{content:"";width:20px;height:20px;border:2px solid var(--text-muted);border-top-color:var(--primary);border-radius:50%;margin-left:10px;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.display-progress{height:3px;background:#ffffff0f;flex-shrink:0;overflow:hidden}.display-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width 1s linear;border-radius:0 2px 2px 0}.progress-bar{height:3px;background:#ffffff0f;flex-shrink:0}.progress-fill{height:100%;background:var(--primary);transition:width 1s linear}.waiting-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);color:var(--text-muted);position:relative}.waiting-state-title{font-size:var(--text-lg);color:var(--text-secondary)}.waiting-state-subtitle{font-size:var(--text-sm);opacity:.6}.waiting-state-code{color:var(--text-primary);letter-spacing:3px;font-weight:700}.waiting-notes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.waiting-note{position:absolute;font-size:var(--text-2xl);opacity:0;animation:float-note 6s var(--ease-out) infinite}.waiting-note:nth-child(1){left:15%;animation-delay:0s}.waiting-note:nth-child(2){left:40%;animation-delay:1.5s}.waiting-note:nth-child(3){left:65%;animation-delay:3s}.waiting-note:nth-child(4){left:85%;animation-delay:4.5s}@keyframes float-note{0%{opacity:0;transform:translateY(100%) rotate(0)}15%{opacity:.3}50%{opacity:.15}to{opacity:0;transform:translateY(-100vh) rotate(20deg)}}.btn-primary{background:var(--primary);color:var(--text-primary);border:none;border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:600;cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.btn-primary:hover{background:var(--primary-light);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--glass-bg);color:var(--text-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);font-size:var(--text-base);font-weight:500;cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.btn-secondary:hover{background:var(--glass-hover);color:var(--text-primary)}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.btn-ghost:hover{background:var(--glass-bg);color:var(--text-secondary)}.pin-btn{position:fixed;top:10px;right:10px;background:transparent;border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--accent);font-size:var(--text-base);padding:var(--space-1) var(--space-2);cursor:pointer;-webkit-app-region:no-drag;z-index:100;transition:border-color var(--duration-fast),opacity var(--duration-fast);opacity:.5;display:flex;align-items:center;justify-content:center}.pin-btn:hover{opacity:1}.pin-btn.active{border-color:var(--accent);color:var(--accent);opacity:1}.listen-btn{position:fixed;top:10px;right:10px;background:transparent;border:1px solid var(--glass-border);border-radius:var(--radius-full);color:var(--text-muted);font-size:var(--text-xs);padding:var(--space-1) var(--space-3);cursor:pointer;z-index:100;transition:all var(--duration-fast) var(--ease-out);display:flex;align-items:center;gap:var(--space-2);opacity:.7}.listen-btn:hover:not(:disabled){opacity:1;border-color:var(--text-muted)}.listen-btn.active{border-color:var(--accent);color:var(--accent);opacity:1}.listen-btn.error{border-color:var(--error);color:var(--error);opacity:1}.home-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:var(--bg-deep);gap:var(--space-8)}.home-logo{width:200px;height:auto;filter:drop-shadow(0 0 40px var(--primary-glow))}.room-code-input{background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary);font-size:var(--text-2xl);font-weight:700;letter-spacing:8px;text-align:center;padding:var(--space-4) var(--space-6);width:240px;outline:none;text-transform:uppercase;transition:border-color var(--duration-base) var(--ease-out)}.room-code-input:focus{border-color:var(--primary);box-shadow:0 0 20px var(--primary-subtle)}.room-code-input::placeholder{color:var(--text-dim);letter-spacing:4px;font-weight:400}.rejoin-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;align-items:center;gap:var(--space-3);cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.rejoin-card:hover{background:var(--glass-hover);border-color:var(--primary-subtle)}.remote-page{display:flex;flex-direction:column;height:100vh;background:var(--bg-base);padding:var(--space-4)}.mic-button{width:68px;height:68px;border-radius:var(--radius-full);background:var(--primary);border:none;color:var(--text-primary);font-size:var(--text-2xl);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration-base) var(--ease-out);box-shadow:0 0 30px var(--primary-glow)}.remote-control-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%}.remote-audio-stack{display:flex;min-width:0;align-items:center;justify-content:center}.mic-button:hover{transform:scale(1.05);box-shadow:var(--shadow-glow)}.mic-button:active{transform:scale(.95)}.mic-button.active{background:var(--error);box-shadow:0 0 30px var(--error-glow);animation:pulse-mic 2s var(--ease-in-out) infinite}@keyframes pulse-mic{0%,to{box-shadow:0 0 30px var(--error-glow)}50%{box-shadow:0 0 50px var(--error-glow),0 0 80px #f43f5e26}}.leave-btn{position:fixed;bottom:var(--space-3);right:var(--space-3);z-index:100}.home-tagline{text-align:center;color:var(--text-secondary)}.home-tagline h1{font-size:var(--text-2xl);color:var(--text-primary);font-weight:700}.home-tagline p{font-size:var(--text-sm);color:var(--text-muted);margin-top:var(--space-1)}.home-divider{color:var(--text-dim);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:2px}.join-section{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}.rejoin-label{color:var(--text-secondary);font-size:var(--text-sm)}.rejoin-actions{display:flex;gap:var(--space-2)}.home-error{color:var(--error);font-size:var(--text-sm);text-align:center}.mic-button.idle{background:var(--primary);box-shadow:0 0 30px var(--primary-glow)}.mic-button.recording{background:var(--accent);box-shadow:0 0 30px var(--accent-glow);animation:pulse-mic-recording 1.5s var(--ease-in-out) infinite}@keyframes pulse-mic-recording{0%,to{box-shadow:0 0 30px var(--accent-glow)}50%{box-shadow:0 0 50px var(--accent-glow),0 0 80px #22d3ee26}}.mic-button.recognizing{background:var(--primary-dark);box-shadow:0 0 20px var(--primary-glow);animation:pulse-mic-recognizing .8s var(--ease-in-out) infinite}@keyframes pulse-mic-recognizing{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.mic-button.error{background:var(--error);box-shadow:0 0 30px var(--error-glow)}.mic-status{text-align:center;color:var(--text-secondary);font-size:var(--text-sm);margin-top:8px;width:min(320px,100%)}.mic-level-meter{display:flex;align-items:flex-end;justify-content:flex-start;gap:5px;width:min(220px,100%);height:28px;margin-top:0}.mic-level-bar{width:8px;height:100%;border-radius:999px;transform-origin:center bottom;background:linear-gradient(180deg,#8ae4fff2,#7c6cf073);box-shadow:0 0 14px #22d3ee24;transition:transform .12s linear,opacity .12s linear}.mic-level-meter.active .mic-level-bar{box-shadow:0 0 16px #22d3ee3d}.recognizing-indicator{display:flex;align-items:center;justify-content:flex-start;gap:8px;height:18px;margin-top:0}.recognizing-dot{width:8px;height:8px;border-radius:999px;background:#8ae4ffe6;box-shadow:0 0 12px #22d3ee38;animation:recognizing-dot-pulse .9s ease-in-out infinite}.recognizing-dot:nth-child(2){animation-delay:.15s}.recognizing-dot:nth-child(3){animation-delay:.3s}@keyframes recognizing-dot-pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.now-playing-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-4);margin-top:var(--space-4);text-align:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.now-playing-title{font-size:var(--text-lg);font-weight:600;color:var(--text-primary)}.now-playing-artist{font-size:var(--text-sm);color:var(--text-secondary);margin-top:var(--space-1)}.now-playing-progress{height:3px;background:#ffffff0f;border-radius:2px;margin-top:var(--space-3);overflow:hidden}.now-playing-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width 1s linear;border-radius:2px}.remote-lyrics-stage{width:100%;max-width:560px;min-height:clamp(180px,28vh,300px);max-height:36vh;margin-top:var(--space-3);margin-left:0;margin-right:0;padding:0;background:transparent;border:0;box-shadow:none}.remote-lyrics-stage:before,.remote-lyrics-stage:after{display:none}.remote-lyrics-stage .lyrics-container,.remote-lyrics-stage .loading,.remote-lyrics-stage .no-lyrics,.remote-lyrics-stage .plain-lyrics{flex:1;min-height:0}.remote-lyrics-stage .lyrics-scroll{padding-top:var(--space-4);padding-bottom:var(--space-4)}.now-playing-time{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-2)}.save-spotify-btn{margin-top:var(--space-3);width:100%;padding:var(--space-2) var(--space-4);background:#1db954;color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;cursor:pointer;transition:background .12s ease,transform .12s ease,opacity .12s ease}.save-spotify-btn.compact{margin-top:0;width:auto;padding:var(--space-1) var(--space-3);font-size:var(--text-xs);white-space:nowrap}.save-spotify-btn:hover:not(:disabled){background:#1ed760}.save-spotify-btn:active:not(:disabled){transform:scale(.98)}.save-spotify-btn:disabled{cursor:default;opacity:.85}.save-spotify-btn.saving,.save-spotify-btn.opening{background:#1aa34a}.save-spotify-btn.saved,.save-spotify-btn.opened,.save-spotify-btn.fallback{background:#1db9542e;color:#1ed760;border:1px solid rgba(29,185,84,.45)}.save-spotify-btn.error{background:#dc50502e;color:#f88;border:1px solid rgba(220,80,80,.45)}.save-spotify-message{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-secondary);text-align:center}.save-spotify-message.error{color:#f88}.auth-pending{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg, #0a0a0f);color:var(--text-secondary);font-size:var(--text-sm)}.lyrics-scroll{padding:var(--space-8) 0;min-height:100%}.app-shell{width:100%;height:100dvh;min-height:100dvh;display:flex;align-items:center;justify-content:center;position:relative;padding:12px;background:linear-gradient(180deg,#ffffff08,#ffffff03),var(--bg-deep);overflow:hidden}.app-shell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--radius-xl) + 10px);border:2px solid rgba(255,255,255,.26);box-shadow:inset 0 0 0 1px #ffffff14,0 0 0 1px #ffffff0f,0 10px 30px #0000002e;pointer-events:none}.app-shell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--radius-xl) + 10px);pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 16%,transparent 84%,rgba(255,255,255,.03))}.app-frame{position:relative;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;padding:var(--space-3) var(--space-4) 0;background:var(--bg-surface);border:2px solid rgba(255,255,255,.18);border-radius:var(--radius-xl);box-shadow:0 24px 60px #00000073,0 0 0 1px #ffffff17 inset;overflow:hidden;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.app-frame:before{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 50% -10%,var(--primary-subtle) 0%,transparent 60%)}.app-frame>*{position:relative;z-index:1}.app-frame .app-logo{height:clamp(206px,33vh,500px);max-width:min(92vw,640px);width:auto;object-fit:contain;filter:drop-shadow(0 6px 16px var(--primary-glow));transition:height var(--duration-base) var(--ease-out)}.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex-shrink:0;padding-bottom:var(--space-1);z-index:30}.topbar-left{display:inline-flex;align-items:center;gap:var(--space-2)}.topbar-actions{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--space-2);flex-shrink:0;position:relative;z-index:31}.connection-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:var(--radius-full);background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);font-size:var(--text-xs);font-weight:500;letter-spacing:.02em;min-height:32px}.connection-pill .connection-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.connection-pill.connected{border-color:#10b98159;color:var(--success)}.connection-pill.disconnected{border-color:var(--error-glow);color:var(--error)}.connection-pill.disconnected .connection-dot{animation:pulse-dot 1.5s var(--ease-in-out) infinite}.room-pill{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px 12px;border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);min-height:32px}.room-pill-label{color:var(--text-muted);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em}.room-pill-code{color:var(--text-primary);font-size:var(--text-sm);font-weight:700;letter-spacing:3px}.sync-menu{position:relative;-webkit-app-region:no-drag;z-index:40}.sync-trigger{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);font-family:inherit;font-size:var(--text-xs);font-weight:500;padding:6px 12px;border-radius:var(--radius-full);cursor:pointer;transition:all var(--duration-base) var(--ease-out);min-height:32px;-webkit-app-region:no-drag}.sync-trigger:hover,.sync-trigger.open{background:var(--glass-hover);color:var(--text-primary);border-color:var(--primary-subtle)}.sync-trigger.tweaked{color:var(--primary-light);border-color:#a78bfa66}.sync-trigger svg{opacity:.85;flex-shrink:0;display:block;overflow:visible}.sync-trigger-label{text-transform:uppercase;letter-spacing:.06em;font-size:.65rem}.sync-trigger-offset{font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-secondary);padding-left:6px;border-left:1px solid var(--glass-border)}.sync-trigger.tweaked .sync-trigger-offset{color:var(--primary-light)}.sync-popover{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:0 18px 40px #00000080,0 0 0 1px #ffffff05 inset;z-index:200;animation:popover-in .18s var(--ease-out);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-app-region:no-drag}@keyframes popover-in{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.sync-popover-header{font-size:.62rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:10px;padding:0 2px}.sync-popover-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}.sync-popover-row-secondary{grid-template-columns:1fr 1fr}.sync-step-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);font-family:inherit;font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums;padding:10px 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);min-height:40px;-webkit-app-region:no-drag}.sync-step-btn:hover{background:var(--primary-subtle);border-color:#a78bfa66;color:var(--primary-light)}.sync-step-btn-wide{font-size:var(--text-sm)}.sync-popover-offset{min-width:56px;text-align:center;font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--primary-light)}.sync-reset-btn{display:block;width:100%;margin-top:6px;background:transparent;border:1px solid var(--glass-border);color:var(--text-muted);font-family:inherit;font-size:var(--text-xs);letter-spacing:.04em;padding:8px 0;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);-webkit-app-region:no-drag}.sync-reset-btn:hover:not(:disabled){color:var(--text-primary);background:var(--glass-bg)}.sync-reset-btn:disabled{opacity:.4;cursor:default}.lyrics-stage{flex:1;min-height:0;position:relative;margin:var(--space-2) calc(-1 * var(--space-1)) var(--space-2);padding:var(--space-1);border-radius:var(--radius-lg);background:#00000038;border:1px solid rgba(255,255,255,.04);overflow:hidden;display:flex;flex-direction:column}.lyrics-stage:before,.lyrics-stage:after{content:"";position:absolute;left:0;right:0;height:36px;pointer-events:none;z-index:2}.lyrics-stage:before{top:0;background:linear-gradient(to bottom,var(--bg-surface),transparent)}.lyrics-stage:after{bottom:0;background:linear-gradient(to top,var(--bg-surface),transparent)}.lyrics-stage.remote-lyrics-stage{margin-left:0;margin-right:0;padding:0;background:transparent;border:0;box-shadow:none}.lyrics-stage.remote-lyrics-stage:before,.lyrics-stage.remote-lyrics-stage:after{display:none}.leave-btn-inline{position:absolute;bottom:var(--space-3);right:var(--space-3);z-index:10}.display-leave-btn-top{flex-shrink:0}.remote-frame{align-items:stretch}.remote-stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4) 0 var(--space-6)}.remote-stage.has-track{justify-content:flex-start;gap:var(--space-2);padding:var(--space-2) 0 var(--space-4)}.remote-stage.has-track .mic-button{width:60px;height:60px;margin-top:0}.remote-stage.has-track .remote-control-row{width:min(340px,100%);gap:8px}.remote-stage.has-track .mic-status{font-size:.88rem}.remote-stage.has-track .now-playing-card{order:3;width:100%;max-width:540px;margin-top:var(--space-1);padding:14px 16px}.remote-stage.has-track .remote-lyrics-stage{order:2;width:100%;max-width:680px;flex:1;min-height:clamp(300px,42vh,560px);max-height:none;margin-top:var(--space-2)}@media(max-width:768px){.app-shell{padding:0;align-items:stretch;justify-content:stretch}.app-shell:before{display:none}.app-shell:after{display:none}.app-frame{border-radius:0;border:none;box-shadow:none;width:100vw;height:100dvh;min-height:100dvh;padding-top:calc(10px + env(safe-area-inset-top));padding-right:calc(12px + env(safe-area-inset-right));padding-bottom:calc(12px + env(safe-area-inset-bottom));padding-left:calc(12px + env(safe-area-inset-left))}.app-frame:before{border-radius:0}.app-topbar{gap:8px}.topbar-left{min-width:0;gap:6px;flex-wrap:wrap}.topbar-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}.connection-pill,.room-pill,.btn-ghost{min-height:28px;padding:4px 10px}.room-pill-code{letter-spacing:2px}.remote-frame .logo-header{padding:8px 0 4px}.display-frame .logo-header{padding:10px 0 6px}.display-frame .app-topbar{align-items:flex-start}.display-frame .topbar-left{flex:1}.display-frame .room-pill,.display-frame .connection-pill{max-width:100%}.display-frame .room-pill-code{letter-spacing:1.5px}.waiting-state{gap:10px;justify-content:center;padding:12px 0 8px;text-align:center}.waiting-state-title{font-size:1rem}.waiting-state-subtitle{font-size:.76rem;max-width:24ch;line-height:1.35}.waiting-notes{opacity:.6}.display-frame .leave-btn-inline{bottom:calc(10px + env(safe-area-inset-bottom));right:calc(12px + env(safe-area-inset-right))}.remote-stage{justify-content:space-evenly;padding:6px 0 0;gap:14px}.remote-stage.has-track{justify-content:flex-start;gap:10px;padding:4px 0 0}.remote-control-row{width:fit-content;max-width:100%;gap:8px}.remote-audio-stack{gap:0}.remote-stage.has-track .mic-button{width:56px;height:56px}.mic-status{max-width:none;font-size:.78rem;line-height:1.35;margin-top:0}.mic-level-meter{width:100%;height:22px;gap:4px}.mic-level-bar{width:6px}.recognizing-indicator{gap:7px;margin-top:6px}.recognizing-dot{width:7px;height:7px}.now-playing-card{width:100%;max-width:420px}.remote-lyrics-stage{max-width:420px;min-height:160px;max-height:30vh}.remote-stage.has-track .remote-lyrics-stage{max-width:420px;min-height:220px;max-height:34vh}}@media(max-height:600px){.app-frame{padding:var(--space-2) var(--space-3) 0}.logo-header{padding:var(--space-1) 0}.app-frame .app-logo{height:clamp(80px,18vh,160px)}}.home-frame{align-items:stretch;padding:clamp(10px,1.8vh,16px) clamp(12px,2vw,22px) clamp(12px,2vh,20px);overflow:hidden}.home-stage{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(6px,1vh,10px);padding:clamp(10px,1.6vh,18px) 0 0;width:100%;max-width:min(920px,100%);min-height:0;height:100%;margin:0 auto}.home-frame .logo-header{padding:0;justify-content:center}.session-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;padding:2px;border-radius:calc(var(--radius-lg) + 4px);background:#ffffff08;border:1px solid var(--glass-border);box-shadow:inset 0 1px #ffffff08;margin-bottom:clamp(2px,.8vh,8px);align-self:stretch}.session-tab{border:none;background:transparent;color:var(--text-muted);border-radius:var(--radius-md);padding:clamp(8px,1.4vh,10px) var(--space-3);font-size:clamp(.78rem,1vw + .3rem,.9rem);font-weight:600;cursor:pointer;transition:all var(--duration-base) var(--ease-out)}.session-tab.active{background:linear-gradient(180deg,#7c3aed52,#7c3aed24);color:var(--text-primary);box-shadow:0 8px 22px #7c3aed2e}.session-panel{width:100%;display:flex;flex-direction:column;flex:1;min-height:0;gap:clamp(8px,1.1vh,12px);padding:clamp(12px,1.9vh,16px);border-radius:20px;background:linear-gradient(180deg,#ffffff0a,#ffffff05);border:1px solid rgba(255,255,255,.08);box-shadow:0 22px 60px #06061447,inset 0 1px #ffffff0a;animation:session-panel-in .22s var(--ease-out)}.session-panel-wrap{flex:0 0 auto}@keyframes session-panel-in{0%{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.session-panel-header{display:flex;flex-direction:column;gap:4px;text-align:left}.session-panel-header-split{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}.session-panel-title{font-size:clamp(.86rem,.8vw + .45rem,.96rem);font-weight:700;color:var(--text-primary);flex-shrink:0}.session-panel-copy{font-size:clamp(.68rem,.9vw + .4rem,.76rem);color:var(--text-muted);line-height:1.35}.session-option-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:clamp(8px,1vh,12px);width:100%}.session-option-grid.compact{gap:var(--space-2)}.session-option{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:clamp(10px,1.5vh,13px) clamp(11px,1.6vw,14px);border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff08;color:var(--text-primary);text-align:left;cursor:pointer;transition:transform var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out)}.session-option:hover:not(:disabled){transform:translateY(-1px);border-color:#7c3aed59;background:#ffffff0d;box-shadow:0 16px 32px #0a0a1c47}.session-option:disabled{opacity:.6;cursor:wait}.session-option-primary{border-color:#22d3ee38;background:linear-gradient(180deg,#543bb557,#22d3ee14)}.session-option-inline{min-height:0}.session-option-head{display:inline-flex;align-items:center;gap:8px;margin-bottom:1px}.session-option-icon{width:clamp(28px,4.2vh,34px);height:clamp(28px,4.2vh,34px);display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid currentColor;flex-shrink:0}.session-option-icon.display{color:var(--accent);background:#22d3ee17}.session-option-icon.remote{color:#fda4af;background:#fda4af14}.session-option-label{font-size:clamp(8px,.9vh,10px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary)}.session-option-title{font-size:clamp(.84rem,.8vw + .5rem,1rem);font-weight:700;color:var(--text-primary);line-height:1.1}.session-option-copy{font-size:clamp(.66rem,.8vw + .4rem,.74rem);color:var(--text-muted);line-height:1.28;max-width:none}.session-option-action{margin-top:4px;font-size:clamp(.66rem,.7vw + .44rem,.76rem);font-weight:600;color:var(--text-primary)}.session-option-primary .session-option-action{color:var(--accent)}.join-section{--join-control-radius: 18px;--join-control-font: clamp(.8rem, .72vw + .48rem, .92rem);--join-control-height: 54px;--join-control-footer-height: 22px;--join-control-stack-height: calc(var(--join-control-height) + var(--join-control-footer-height));display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vh,12px);width:100%}.join-controls{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}.join-role-dropdown{position:relative;min-width:0}.join-code-combo{min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:var(--join-control-stack-height);border:2px solid var(--glass-border);border-radius:var(--join-control-radius);background:var(--glass-bg);overflow:hidden;transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.join-code-combo:focus-within{border-color:var(--primary);box-shadow:0 0 20px var(--primary-subtle)}.join-role-trigger{width:100%;min-width:0;min-height:var(--join-control-stack-height);background:var(--glass-bg);border:2px solid var(--glass-border);border-radius:var(--join-control-radius);color:var(--text-primary);font-family:inherit;font-size:var(--join-control-font);font-weight:600;line-height:1.2;padding:0 16px;outline:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:border-color var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),background var(--duration-base) var(--ease-out)}.join-role-trigger:hover,.join-role-trigger.open{background:#ffffff14}.join-role-trigger:focus-visible,.join-role-trigger.open{border-color:var(--primary);box-shadow:0 0 20px var(--primary-subtle)}.join-role-trigger svg{flex-shrink:0;color:var(--text-muted);transition:transform var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.join-role-trigger.open svg{transform:rotate(180deg);color:var(--primary-light)}.join-role-menu{position:absolute;top:calc(100% + 8px);left:0;right:0;display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:16px;background:#141428fa;border:1px solid rgba(124,58,237,.22);box-shadow:0 18px 40px #0506128c;z-index:20}.join-role-option{width:100%;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--text-secondary);font-family:inherit;font-size:.82rem;font-weight:600;text-align:left;padding:10px 12px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.join-role-option.active{color:var(--primary-light);border-color:#7c3aed29;background:#7c3aed14}.join-role-option:hover{background:#7c3aed29;border-color:#7c3aed47;color:var(--text-primary)}.join-section .room-code-input{width:100%;min-height:calc(var(--join-control-height) - 22px);font-size:var(--join-control-font);font-weight:600;letter-spacing:clamp(3px,.6vw,5px);padding:12px 16px 10px;background:transparent;border:none;border-radius:0;box-shadow:none}.join-section .room-code-input::placeholder{letter-spacing:clamp(2px,.5vw,4px)}.join-section .room-code-input:focus{border-color:transparent;box-shadow:none}.join-submit-btn{width:100%;min-width:0;min-height:var(--join-control-stack-height);border-radius:var(--join-control-radius);padding:0 22px;font-size:var(--join-control-font);white-space:nowrap}.join-last-room-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-top:1px solid rgba(255,255,255,.08);background:#ffffff08;color:var(--text-muted);font-family:inherit;font-size:clamp(.66rem,.42vw + .52rem,.72rem);font-weight:600;white-space:nowrap;min-height:var(--join-control-footer-height);padding:2px 12px;line-height:1;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out)}.join-last-room-btn:hover{background:#ffffff12;color:var(--text-primary)}.home-error{font-size:.74rem;color:var(--error);text-align:center;background:#f43f5e14;border:1px solid var(--error-glow);border-radius:var(--radius-md);padding:8px 10px;width:100%;max-width:min(920px,100%);align-self:center}@media(min-width:460px){.session-option-grid,.session-option-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-height:760px){.home-frame{padding:10px 14px 12px}.home-frame .app-logo{height:clamp(156px,26vh,320px)}.home-title{font-size:.94rem;max-width:16ch}.session-tab{padding:8px 10px;font-size:.76rem}.session-panel{gap:8px;padding:11px}.join-controls{gap:8px}.join-section{--join-control-height: 50px;--join-control-footer-height: 20px;--join-control-font: .76rem}.join-role-trigger{padding:0 12px}.join-role-option{font-size:.74rem;padding:9px 10px}.session-panel-copy,.session-option-copy{font-size:.64rem;line-height:1.2}.session-option{gap:3px;padding:9px 10px}.session-option-icon{width:24px;height:24px;border-radius:8px}.session-option-title{font-size:.84rem}.session-option-action,.join-section .room-code-input,.home-error,.rejoin-room-code{font-size:.68rem}.join-section{gap:8px}.join-section .room-code-input{padding:10px 12px 8px;letter-spacing:3px}.join-last-room-btn{padding:2px 10px;font-size:.68rem}}@media(max-width:480px){.home-frame{padding:var(--space-2) var(--space-3) var(--space-3)}.home-frame .app-logo{height:clamp(166px,27vh,300px)}.home-title{font-size:.92rem;max-width:14ch}.session-tab{padding:8px var(--space-2);font-size:.76rem}.session-panel{padding:11px}.session-option,.session-option-inline{min-height:auto}.session-option-title{font-size:.88rem}.session-option-copy,.session-panel-copy{font-size:.68rem}.join-section .room-code-input{letter-spacing:3px;padding:10px 12px}.join-controls{grid-template-columns:1fr}.join-code-combo.has-last-room{flex-direction:row;align-items:stretch;min-height:var(--join-control-height)}.join-role-trigger,.join-submit-btn{min-height:var(--join-control-height)}.join-code-combo.has-last-room .room-code-input{min-width:0;flex:1;min-height:0;padding:0 12px}.join-submit-btn,.join-code-combo,.join-last-room-btn{width:100%}.join-code-combo.has-last-room .join-last-room-btn{width:auto;flex-shrink:0;border-top:none;border-left:1px solid rgba(255,255,255,.08);padding:0 12px}}