:root{--bg-primary:#0a0c10;--bg-secondary:#141822;--bg-panel:#1b2130;--bg-panel-hover:#232a3d;--accent-green:#0f6;--accent-green-glow:#00ff6659;--accent-green-dim:#00b347;--text-primary:#f0f4f8;--text-secondary:#8a99ad;--text-muted:#536275;--border-color:#2e384e;--border-focus:#4b5a7d;--danger-color:#f36;--warning-color:#fc0;--font-sans:"Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.4, 0, .2, 1);--shadow-lg:0 10px 25px -5px #00000080, 0 8px 10px -6px #00000080;--glass-bg:#141822cc;--glass-border:#ffffff0d}*{box-sizing:border-box}html,body{background-color:var(--bg-primary);height:100%;margin:0;padding:0;overflow:hidden}body{color:var(--text-primary);font-family:var(--font-sans);flex-direction:column;display:flex}#app{flex-direction:column;width:100%;height:100%;display:flex}.app-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);z-index:10;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex}.logo{letter-spacing:2px;color:var(--text-primary);font-size:1.5rem;font-weight:800}.logo .glow-text{color:var(--accent-green);text-shadow:0 0 10px var(--accent-green-glow)}.device-status{gap:1rem;display:flex}.status-badge{background-color:var(--bg-primary);border:1px solid var(--border-color);transition:var(--transition-normal);border-radius:20px;align-items:center;gap:.5rem;padding:.4rem .8rem;font-size:.85rem;font-weight:600;display:flex}.status-badge .dot{background-color:var(--text-muted);border-radius:50%;width:8px;height:8px;display:inline-block}.status-badge.connected{border-color:var(--accent-green);color:var(--accent-green)}.status-badge.connected .dot{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-badge.disconnected .dot{background-color:var(--danger-color);box-shadow:0 0 8px var(--danger-color)}.app-layout{background-color:var(--bg-primary);flex:1;grid-template-columns:320px 1fr;height:100%;display:grid;overflow:hidden}.panel{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;display:flex;overflow:hidden}.panel:last-child{border-right:none;border-left:1px solid var(--border-color)}.panel-header{border-bottom:1px solid var(--border-color);background-color:#14182266;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;display:flex}.panel-header h2{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);font-size:1.1rem;font-weight:600}.panel-body{flex-direction:column;flex:1;gap:1.5rem;padding:1.5rem;display:flex;overflow-y:auto}.count-badge{background-color:var(--border-color);color:var(--text-secondary);border-radius:10px;padding:.2rem .5rem;font-size:.75rem}.song-list-container{flex-direction:column;flex:1;min-height:0;display:flex}.song-list-header{color:var(--text-muted);text-transform:uppercase;justify-content:space-between;align-items:center;margin-bottom:.8rem;font-size:.85rem;font-weight:600;display:flex}.song-list{flex-direction:column;flex:1;gap:.4rem;padding-right:4px;list-style:none;display:flex;overflow-y:auto}.song-list li{background-color:var(--bg-panel);cursor:pointer;transition:var(--transition-fast);border:1px solid #0000;border-radius:8px;padding:.8rem 1rem;font-weight:500}.song-list li:hover{background-color:var(--bg-panel-hover);border-color:var(--border-focus)}.song-list li.active{border-color:var(--accent-green);color:var(--accent-green);text-shadow:0 0 5px #0f63;background-color:#00ff6614}.song-list li.divider-item{text-align:center;font-weight:700;font-family:var(--font-display);letter-spacing:1px;color:orange!important;background-color:#ffa5000a!important;border:1px dashed #ffa50040!important}.song-list li.divider-item:hover{background-color:#ffa50014!important;border-color:orange!important}.empty-list-msg{color:var(--text-muted);text-align:center;font-style:italic;cursor:default!important;background:0 0!important;border:none!important;padding:2rem 0!important}.form-group{flex-direction:column;gap:.5rem;display:flex}.form-group label{color:var(--text-muted);text-transform:uppercase;font-size:.85rem;font-weight:600}.custom-select-wrapper{position:relative}select{background-color:var(--bg-panel);border:1px solid var(--border-color);width:100%;color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;appearance:none;transition:var(--transition-fast);border-radius:8px;outline:none;padding:.75rem 1rem;font-size:.95rem}.text-input{background-color:var(--bg-primary);border:1px solid var(--border-color);width:100%;color:var(--text-primary);font-family:var(--font-sans);transition:var(--transition-fast);border-radius:8px;outline:none;padding:.75rem 1rem;font-size:.95rem}select:focus,.text-input:focus{border-color:var(--accent-green);box-shadow:0 0 0 2px var(--accent-green-glow)}.custom-select-wrapper:after{content:"▼";color:var(--text-secondary);pointer-events:none;font-size:.75rem;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.viewer-panel{background-color:var(--bg-primary);flex:1}.viewer-panel .panel-header{justify-content:space-between;align-items:center;display:flex}.viewer-panel h2{color:var(--text-primary);text-transform:none;letter-spacing:0;font-size:1.4rem;font-weight:700}.active-song-meta{color:var(--text-secondary);gap:1.2rem;font-size:.9rem;font-weight:500;display:flex}.song-preview-body{background-color:#05070a;flex-direction:column;padding:0;position:relative;display:flex!important;overflow:hidden!important}.song-display{font-family:var(--font-mono);white-space:pre;flex:1;min-height:0;padding:2.5rem;font-size:1.15rem;line-height:2;overflow-y:auto}.song-line{flex-direction:column;min-height:2.4rem;margin-bottom:1.2rem;display:flex}.chord-row{color:var(--accent-green);text-shadow:0 0 8px #00ff6626;height:1.2rem;font-weight:700;line-height:1.2}.lyric-row{color:var(--text-primary);line-height:1.2}.preview-placeholder{color:var(--text-muted);text-align:center;white-space:normal;padding:1rem}.mobile-song-select-wrapper{display:none}::-webkit-scrollbar{display:none!important}*{-ms-overflow-style:none!important;scrollbar-width:none!important}.sync-section{background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:12px;flex-direction:column;gap:1rem;padding:1.2rem;display:flex}.section-desc{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.section-desc code{background-color:var(--bg-primary);color:var(--accent-green);border-radius:4px;padding:.1rem .4rem}.account-info{border-bottom:1px solid var(--border-color);justify-content:space-between;padding-bottom:.8rem;font-size:.9rem;display:flex}.account-info strong{color:var(--accent-green)}.btn{font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-fast);border:none;border-radius:8px;justify-content:center;align-items:center;gap:.6rem;padding:.8rem 1.2rem;font-size:.95rem;font-weight:600;display:flex}.btn-block{width:100%}.btn-primary{color:#fff;background-color:#0066f5}.btn-primary:hover{background-color:#2080ff;box-shadow:0 0 12px #0066f566}.btn-success{background-color:var(--accent-green-dim);color:#000}.btn-success:hover{background-color:var(--accent-green);box-shadow:0 0 15px var(--accent-green-glow)}.btn-outline{border:1px solid var(--border-color);color:var(--text-secondary);background-color:#0000}.btn-outline:hover{border-color:var(--text-secondary);color:var(--text-primary)}.mt-2{margin-top:.5rem}.spinner{border:2px solid #0000001a;border-top-color:#000;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.debug-console{flex-direction:column;flex:1;min-height:200px;display:flex}.debug-console h3{color:var(--text-muted);text-transform:uppercase;margin-bottom:.5rem;font-size:.8rem;font-weight:600}.log-output{border:1px solid var(--border-color);font-family:var(--font-mono);color:#a0aec0;background-color:#05070a;border-radius:8px;flex-direction:column;flex:1;gap:.3rem;max-height:300px;padding:.8rem;font-size:.75rem;display:flex;overflow-y:auto}.log-output div{word-break:break-all;line-height:1.4}.viewer-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;min-height:48px;padding:.6rem 1rem;display:flex}.viewer-header h2{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;text-align:center;flex:1;margin:0;font-size:1.15rem;font-weight:700;overflow:hidden}.menu-toggle-btn{cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.4rem;display:none}.menu-toggle-btn:hover{background-color:#ffffff0d}.menu-toggle-btn svg{width:20px;height:20px;fill:var(--text-secondary)}.device-status-badge{align-items:center;gap:.5rem;display:flex}.status-dot{background-color:var(--danger-color);width:8px;height:8px;box-shadow:0 0 6px var(--danger-color);border-radius:50%;display:inline-block}.status-dot.connected{background-color:var(--accent-green);box-shadow:0 0 6px var(--accent-green)}.close-drawer-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast);background:0 0;border:none;padding:0 .4rem;font-size:1.5rem;line-height:1;display:none}.close-drawer-btn:hover{color:var(--danger-color)}.drawer-scroll-body{flex-direction:column;flex:1;gap:1rem;min-height:0;padding:1rem;display:flex;overflow-y:auto}.drawer-section{background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;flex-direction:column;gap:.6rem;padding:.8rem;display:flex}.drawer-section h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border-color);margin:0;padding-bottom:.3rem;font-size:.75rem;font-weight:700}.sync-section-compact{flex-direction:column;gap:.5rem;display:flex}.sync-btn-row{gap:.5rem;display:flex}.btn-sm{padding:.5rem .8rem;font-size:.8rem}.viewer-footer{background-color:var(--bg-secondary);border-top:1px solid var(--border-color);flex-direction:column;justify-content:center;min-height:48px;padding:.4rem 1rem;display:flex;position:relative}.footer-progress-wrapper{background-color:#ffffff0d;width:100%;height:3px;position:absolute;top:0;left:0}.footer-progress-fill{background-color:var(--accent-green);width:0%;height:100%;transition:width .1s linear}.footer-layout{justify-content:space-between;align-items:center;gap:.8rem;width:100%;display:flex}.footer-left-compact{align-items:center;gap:.6rem;width:200px;display:flex;overflow:hidden}.menu-toggle-btn-compact{background:var(--bg-panel);border:1px solid var(--border-color);cursor:pointer;width:32px;height:32px;transition:all var(--transition-fast);border-radius:6px;justify-content:center;align-items:center;display:none}.menu-toggle-btn-compact:hover{background-color:var(--bg-panel-hover);border-color:var(--border-focus)}.menu-toggle-btn-compact svg{width:16px;height:16px;fill:var(--text-secondary)}.menu-toggle-btn-compact:hover svg{fill:var(--accent-green)}.footer-clock-playing{flex-direction:column;gap:.05rem;display:flex;overflow:hidden}.footer-clock-row{align-items:center;gap:.4rem;display:flex}.footer-clock{font-family:var(--font-sans);color:var(--text-primary);font-size:.95rem;font-weight:700;line-height:1.1}.footer-now-playing{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;line-height:1.1;overflow:hidden}.footer-now-playing strong{color:var(--accent-green);font-weight:600}.playback-controls-compact{justify-content:center;align-items:center;gap:.5rem;display:flex}.compact-btn{background:var(--bg-panel);border:1px solid var(--border-color);cursor:pointer;width:30px;height:30px;transition:all var(--transition-fast);border-radius:50%;justify-content:center;align-items:center;display:flex}.compact-btn svg{width:13px;height:13px;fill:var(--text-secondary)}.compact-btn:hover{background-color:var(--bg-panel-hover);border-color:var(--border-focus)}.compact-btn:hover svg{fill:var(--text-primary)}.compact-btn.play-btn{background-color:var(--accent-green);border:none;width:36px;height:36px;box-shadow:0 0 8px #0f63}.compact-btn.play-btn svg{fill:#000;width:16px;height:16px}.footer-right{text-align:right;width:180px;overflow:hidden}.footer-up-next{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;line-height:1.1;overflow:hidden}.footer-up-next strong{color:var(--text-primary);font-weight:600}@media (width<=1024px){.app-layout{height:100%;display:block;position:relative;overflow:hidden}.panel.list-panel{z-index:1000;width:320px;height:100%;box-shadow:var(--shadow-lg);background-color:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.panel.list-panel.open{transform:translate(0)}.panel-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:1rem;display:flex}.panel-header h2{color:var(--text-primary);font-size:1.1rem;display:block}.close-drawer-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;font-size:1.5rem;display:flex}.drawer-scroll-body{flex-direction:column;gap:1.2rem;padding:1.2rem;display:flex;overflow-y:auto}.drawer-section{background-color:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;flex-direction:column;gap:.8rem;padding:1rem;display:flex}.drawer-section h3{color:var(--text-secondary);text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:.4rem;font-size:.8rem;display:block}.section-desc{color:var(--text-muted);font-size:.85rem;display:block}.account-info{justify-content:space-between;font-size:.85rem;display:flex}.song-list-header{justify-content:space-between;align-items:center;display:flex}ul#song-list{flex-direction:column;gap:.4rem;max-height:250px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.mobile-song-select-wrapper{display:none}.menu-toggle-btn-compact{display:flex}.viewer-panel{width:100%;height:100%}}@media (width<=1024px) and (height<=480px){.panel.list-panel{transform:translateY(-100%);border-bottom:1px solid var(--border-color)!important;border-right:none!important;flex-direction:row!important;justify-content:space-between!important;height:48px!important;padding:0 .6rem!important;bottom:auto!important}.panel.list-panel.open{transform:translate(0)!important}.panel-header{display:contents!important}.panel-header h2{display:none!important}.close-drawer-btn{background:var(--bg-panel)!important;border:1px solid var(--border-color)!important;border-radius:6px!important;order:99!important;width:30px!important;height:30px!important;margin-left:auto!important;padding:0!important;font-size:1.1rem!important}.drawer-scroll-body{flex-direction:row!important;gap:.6rem!important;margin:0!important;padding:0!important;overflow:visible!important}.drawer-section{height:auto!important;box-shadow:none!important;background:0 0!important;border:none!important;flex-direction:row!important;gap:.4rem!important;margin:0!important;padding:0!important}.drawer-section h3,.section-desc,.account-info,ul#song-list,.song-list-header{display:none!important}.mobile-song-select-wrapper{display:block!important}.drawer-scroll-body select{width:130px!important;height:30px!important;padding:.35rem 1.6rem .35rem .5rem!important;font-size:.8rem!important}.sync-section-compact{flex-direction:row!important;gap:.4rem!important;display:flex!important}.sync-btn-row{display:flex!important}.drawer-scroll-body button{height:30px!important;padding:0 .6rem!important;font-size:.8rem!important}}@media (width<=600px){.footer-left,.footer-right{width:100px}.footer-clock{font-size:.85rem}.footer-now-playing,.footer-up-next{font-size:.7rem}.song-display{padding:.6rem;font-size:1.05rem}}@media (height<=480px){.viewer-header{min-height:38px;padding:.2rem .8rem}.viewer-header h2{font-size:1rem}.menu-toggle-btn-compact svg{width:18px;height:18px}.viewer-footer{min-height:38px;padding:.2rem .8rem}.compact-btn{width:26px;height:26px}.compact-btn svg{width:11px;height:11px}.compact-btn.play-btn{width:32px;height:32px}.compact-btn.play-btn svg{width:13px;height:13px}.footer-left,.footer-right{width:150px}.song-display{padding:.5rem .8rem;font-size:.95rem;line-height:1.4}.song-line{min-height:1.6rem;margin-bottom:.4rem}}@media (height<=320px){.viewer-header{display:none!important}.viewer-footer{min-height:32px;padding:.15rem .5rem}.song-display{padding:.4rem .6rem;font-size:.9rem;line-height:1.3}}.virtual-glasses-hud{border:2px solid var(--accent-green);z-index:9999;width:320px;font-family:var(--font-sans);background-color:#000;border-radius:12px;padding:1rem;position:fixed;top:20px;right:20px;box-shadow:0 0 20px #00ff6640}.virtual-glasses-hud .hud-header{color:var(--accent-green);text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid #0f63;margin-bottom:.8rem;padding-bottom:.3rem;font-size:.75rem;font-weight:700}.virtual-glasses-hud .hud-content{font-family:var(--font-mono), monospace;letter-spacing:-.05em;color:var(--accent-green);white-space:pre;min-height:80px;margin:0;font-size:.95rem;line-height:1.4}@media (width<=1024px){.virtual-glasses-hud{display:none!important}}.song-list li.requested-song{border-left:3px solid var(--warning-color);background-color:#ffcc000d}.song-list li.requested-song:hover{background-color:#ffcc001a}.requested-badge{background-color:var(--warning-color);color:#000;float:right;text-transform:uppercase;border-radius:4px;margin-top:2px;padding:.1rem .3rem;font-size:.65rem;font-weight:800}.audience-body{background-color:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);padding:1rem;display:block;overflow-y:auto!important}.audience-container{max-width:600px;margin:0 auto;padding-bottom:3rem}.audience-header{text-align:center;margin-bottom:1.5rem;padding:1.5rem 0}.audience-header h1{color:var(--text-primary);margin:0;font-size:1.8rem;font-weight:800}.audience-header h1 span{color:var(--accent-green);text-shadow:0 0 10px var(--accent-green-glow)}.audience-sub{color:var(--text-secondary);margin:.4rem 0 0;font-size:.95rem}.live-status-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);border-radius:12px;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding:1.2rem;display:flex}.status-block{flex:1}.status-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:.3rem;font-size:.75rem;font-weight:600;display:block}.status-value{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.1rem;font-weight:700;overflow:hidden}.status-divider{background-color:var(--border-color);align-self:stretch;width:1px}.section-title{text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin:0 0 .8rem;font-size:1rem;font-weight:700}.queue-section,.catalog-section{margin-bottom:2rem}.queue-list-wrapper{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.audience-queue-list{margin:0;padding:0;list-style:none}.audience-queue-list li{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:.9rem 1.2rem;font-size:.95rem;display:flex}.audience-queue-list li:last-child{border-bottom:none}.audience-queue-list li.playing{border-left:3px solid var(--accent-green);background-color:#00ff660d;font-weight:600}.audience-queue-list li.playing .song-name{color:var(--accent-green)}.audience-queue-list li.completed{opacity:.4}.queue-placeholder{color:var(--text-muted);text-align:center;padding:2rem!important}.request-badge{color:var(--warning-color);border:1px solid var(--warning-color);background-color:#ffcc0026;border-radius:20px;padding:.15rem .4rem;font-size:.7rem;font-weight:600}.catalog-header-row{justify-content:space-between;align-items:center;margin-bottom:.8rem;display:flex}.catalog-header-row .section-title{margin-bottom:0}.search-input{background-color:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-sans);width:180px;transition:var(--transition-fast);border-radius:8px;outline:none;padding:.4rem .8rem;font-size:.85rem}.search-input:focus{border-color:var(--border-focus)}.catalog-grid-wrapper{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:1rem}.catalog-grid{grid-template-columns:1fr;gap:.8rem;display:grid}@media (width>=480px){.catalog-grid{grid-template-columns:1fr 1fr}}.catalog-card{background-color:var(--bg-panel);border:1px solid var(--border-color);transition:var(--transition-fast);border-radius:8px;justify-content:space-between;align-items:center;padding:.8rem;display:flex}.catalog-card:hover{background-color:var(--bg-panel-hover);border-color:var(--border-focus)}.card-title{text-overflow:ellipsis;white-space:nowrap;flex:1;margin-right:.5rem;font-size:.9rem;font-weight:600;overflow:hidden}.request-btn{background-color:var(--accent-green);color:#000;font-family:var(--font-sans);cursor:pointer;transition:var(--transition-fast);border:none;border-radius:6px;outline:none;padding:.35rem .8rem;font-size:.8rem;font-weight:700}.request-btn:hover:not(:disabled){background-color:var(--accent-green-dim);transform:translateY(-1px)}.request-btn:disabled{background-color:var(--border-color);color:var(--text-muted);cursor:not-allowed}.catalog-placeholder{color:var(--text-muted);text-align:center;grid-column:1/-1;padding:2rem 0}.toast{background-color:var(--bg-panel);border:1px solid var(--border-focus);color:var(--text-primary);box-shadow:var(--shadow-lg);z-index:10000;pointer-events:none;border-radius:30px;padding:.8rem 1.5rem;font-size:.9rem;font-weight:600;transition:opacity .3s;position:fixed;bottom:2rem;left:50%;transform:translate(-50%)}.toast.hidden{opacity:0}