:root{--color-black: #0a0a0a;--color-charcoal: #1a1a1a;--color-surface: #141414;--color-surface-2: #1e1e1e;--color-cream: #f5f0e6;--color-amber: #d4a045;--color-gold: #e8b84d;--color-text: #f5f0e6;--color-text-muted: #a69b8a;--color-border: rgba(212, 160, 69, .25)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:"Source Sans 3",system-ui,sans-serif;background:var(--color-black);color:var(--color-text)}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.enroll-screen{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:radial-gradient(ellipse at center,#1a1a1a,#0a0a0a)}.enroll-card{display:flex;flex-direction:column;align-items:center;max-width:480px;width:90%;padding:3rem 2.5rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 8px 40px #00000080,0 0 0 1px #d4a04514;text-align:center}.enroll-logo{width:100px;height:auto;margin-bottom:1.5rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.enroll-title{font-family:Oswald,sans-serif;font-size:1.8rem;font-weight:600;color:var(--color-cream);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.75rem}.enroll-subtitle{color:var(--color-text-muted);font-size:1rem;line-height:1.5;margin-bottom:1.25rem}.enroll-subtitle strong{color:var(--color-cream)}.enroll-code{font-size:clamp(2.5rem,8vw,3.5rem);font-weight:700;letter-spacing:.3em;color:var(--color-amber);background:#d4a04514;border:1px dashed var(--color-border);border-radius:12px;padding:.75rem 1.5rem;margin-bottom:1.25rem;font-family:Oswald,monospace;min-height:4rem;display:flex;align-items:center;justify-content:center}.enroll-hint{color:var(--color-text-muted);font-size:.88rem;margin-bottom:1rem}.enroll-hint a{color:var(--color-amber);text-decoration:none}.enroll-hint a:hover{text-decoration:underline}.enroll-hint strong{color:var(--color-cream)}.enroll-actions{margin-top:.5rem}.enroll-actions a{color:var(--color-text-muted);font-size:.85rem;text-decoration:none}.enroll-actions a:hover{color:var(--color-amber)}.player-screen{width:100%;height:100%;display:flex;flex-direction:column;background:linear-gradient(180deg,#111,#0a0a0a 40%,#0e0c08);overflow:hidden}.player-top{display:flex;align-items:center;gap:1rem;padding:1.25rem 1.5rem;border-bottom:1px solid var(--color-border);flex-shrink:0}.player-logo{width:36px;height:36px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}.player-playlist-name{font-family:Oswald,sans-serif;font-size:1.1rem;font-weight:500;color:var(--color-text-muted);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:.5rem;min-height:0}.now-playing-label{font-family:Oswald,sans-serif;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.15em;color:var(--color-amber);margin-bottom:.5rem}.track-title{font-family:Oswald,sans-serif;font-size:clamp(1.8rem,5vw,3.2rem);font-weight:700;color:var(--color-cream);text-align:center;line-height:1.15;max-width:80%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.track-artist{font-size:clamp(1rem,2.5vw,1.4rem);font-weight:400;color:var(--color-text-muted);text-align:center;margin-top:.25rem}.progress-bar{width:min(80%,600px);height:4px;background:#d4a04526;border-radius:2px;overflow:hidden;margin-top:1.5rem}.progress-fill{width:0%;height:100%;background:linear-gradient(90deg,var(--color-amber),var(--color-gold));border-radius:2px;transition:width .3s linear}.track-time{font-size:.8rem;color:var(--color-text-muted);margin-top:.5rem;font-variant-numeric:tabular-nums}.player-queue{flex-shrink:0;max-height:35vh;overflow-y:auto;padding:0 1.5rem 1rem;border-top:1px solid var(--color-border)}.queue-header{font-family:Oswald,sans-serif;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);padding:.75rem 0 .5rem}.queue-item{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.04);gap:1rem}.queue-item-next{border-left:3px solid var(--color-amber);padding-left:.75rem}.queue-name{font-size:.92rem;color:var(--color-cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.queue-artist{font-size:.82rem;color:var(--color-text-muted);white-space:nowrap;flex-shrink:0}.queue-more{font-size:.8rem;color:var(--color-text-muted);padding:.5rem 0;text-align:center}.player-bottom{flex-shrink:0;display:flex;justify-content:center;padding:.75rem 1.5rem;border-top:1px solid var(--color-border)}.leave-btn{background:none;border:1px solid rgba(255,255,255,.1);color:var(--color-text-muted);font-size:.78rem;padding:.4rem 1.2rem;border-radius:6px;cursor:pointer;transition:border-color .2s,color .2s}.leave-btn:hover{border-color:var(--color-amber);color:var(--color-amber)}.autoplay-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}.autoplay-btn{display:flex;flex-direction:column;align-items:center;gap:1rem;background:none;border:2px solid var(--color-amber);color:var(--color-amber);padding:2.5rem 3.5rem;border-radius:20px;cursor:pointer;transition:background .2s,transform .15s;font-family:Oswald,sans-serif;font-size:1.1rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}.autoplay-btn:hover{background:#d4a0451a}.autoplay-btn:active{transform:scale(.96)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (max-width: 600px){.enroll-card{padding:2rem 1.5rem}.player-center{padding:1.25rem}.player-queue{max-height:30vh;padding:0 1rem .75rem}}.player-queue::-webkit-scrollbar{width:4px}.player-queue::-webkit-scrollbar-track{background:transparent}.player-queue::-webkit-scrollbar-thumb{background:#d4a04533;border-radius:2px}