:root{--primary: #6366f1;--primary-hover: #4f46e5;--background: #0f172a;--surface: #1e293b;--surface-hover: #334155;--text: #f1f5f9;--text-secondary: #94a3b8;--border: #334155;--error: #ef4444;--success: #22c55e}body{margin:0;background-color:var(--background);color:var(--text)}.visualizer-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(1200px 800px at 20% 30%,hsl(var(--vizHue, 220) 90% 18% / calc(var(--vizAlpha, .35))),transparent 70%),radial-gradient(900px 700px at 80% 70%,hsl(calc((var(--vizHue, 220) + 120)) 95% 20% / calc(var(--vizAlpha, .25))),transparent 70%),linear-gradient(180deg,hsl(var(--vizHue, 220) 60% 8%),hsl(calc(var(--vizHue, 220) + 40) 60% 6%));filter:blur(0px) saturate(120%);transition:opacity .3s ease;opacity:var(--vizOpacity, 1)}.app-container{font-family:Inter,system-ui,-apple-system,sans-serif;max-width:1200px;margin:0 auto;padding:2rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header h1{font-size:2rem;font-weight:700;margin:0;background:linear-gradient(to right,var(--primary),#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.connection-status{padding:.5rem 1rem;border-radius:9999px;font-size:.875rem;font-weight:500}.connection-status.connected{background-color:#22c55e1a;color:var(--success)}.connection-status.disconnected{background-color:#ef44441a;color:var(--error)}.player-section{background-color:var(--surface);border-radius:1rem;padding:1.5rem;margin-bottom:2rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.player-section h2{margin-top:0;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.video-container{position:relative;width:100%;border-radius:.5rem;overflow:hidden;margin-bottom:1.5rem}.track-info{margin-top:1rem}.track-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.track-time{color:var(--text-secondary);font-size:.875rem;display:flex;align-items:center;gap:.5rem}.no-track{color:var(--text-secondary);font-style:italic;text-align:center;padding:2rem}.controls{display:flex;gap:.75rem;margin-top:1rem}.button{background-color:var(--primary);color:#fff;border:none;padding:.625rem 1.25rem;border-radius:.5rem;font-weight:500;cursor:pointer;transition:background-color .2s}.button:hover{background-color:var(--primary-hover)}.button.secondary{background-color:var(--surface-hover)}.button.secondary:hover{background-color:var(--border)}.queue-section{background-color:var(--surface);border-radius:1rem;padding:1.5rem;margin-top:2rem}.queue-section h2{margin-top:0;margin-bottom:1rem;font-size:1.5rem;font-weight:600}.queue-list{list-style:none;padding:0;margin:0}.queue-item{padding:1rem;border-radius:.5rem;background-color:var(--background);margin-bottom:.75rem;transition:background-color .2s}.queue-item:hover{background-color:var(--surface-hover)}.queue-item .track-info{display:flex;flex-direction:column;gap:.25rem}.queue-item .track-title{font-weight:600;color:var(--text)}.queue-item .requester-name{font-size:.875rem;color:var(--text-secondary);font-style:italic}.enqueue-form{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.enqueue-form h3{margin-top:0;margin-bottom:1rem;font-size:1.25rem;font-weight:600}.input-group{display:flex;gap:.75rem;margin-bottom:1rem}.input{background-color:var(--background);border:1px solid var(--border);color:var(--text);padding:.625rem 1rem;border-radius:.5rem;font-size:.875rem;flex:1;transition:border-color .2s}.input:focus{outline:none;border-color:var(--primary)}.input::placeholder{color:var(--text-secondary)}.enqueue-content{display:flex;flex-direction:column;gap:.75rem}.video-title-preview{padding:.5rem;background-color:var(--background);border-radius:.5rem;font-size:.875rem;color:var(--text-secondary)}.debug-section{margin-top:2rem;padding:1.5rem;background-color:var(--surface);border-radius:1rem}.debug-section h3{margin-top:0;margin-bottom:1rem;font-size:1rem;font-weight:500;color:var(--text-secondary)}.debug-content{background-color:var(--background);padding:1rem;border-radius:.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;overflow-x:auto;color:var(--text-secondary)}