*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep: #0f0f1a;--bg-card: #1a1a2e;--bg-surface: #22223b;--accent: #a855f7;--accent-dim: #7c3aed;--accent-glow:#c084fc;--success: #22c55e;--warning: #f59e0b;--danger: #ef4444;--text: #f1f5f9;--text-muted: #94a3b8;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;font-size:16px}html,body,#root{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-deep);color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column}.app-shell{display:flex;flex-direction:column;min-height:100vh;max-width:480px;margin:0 auto;width:100%;padding:0 16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;text-decoration:none}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--accent-dim),var(--accent));color:#fff}.btn-primary:hover:not(:disabled){opacity:.9}.btn-secondary{background:var(--bg-surface);color:var(--text);border:1px solid rgba(168,85,247,.3)}.btn-secondary:hover:not(:disabled){background:var(--bg-card)}.btn-ghost{background:transparent;color:var(--text-muted);padding:8px 16px;font-size:.9rem}.btn-ghost:hover:not(:disabled){color:var(--text)}.btn-icon{width:72px;height:72px;border-radius:50%;padding:0;font-size:1.75rem}.btn-full{width:100%}.card{background:var(--bg-card);border-radius:var(--radius-lg);padding:24px;border:1px solid rgba(168,85,247,.15)}.home{display:flex;flex-direction:column;gap:24px;padding:32px 0}.home-hero{text-align:center;padding:32px 0 16px}.home-hero__icon{font-size:5rem;display:block;margin-bottom:16px;filter:drop-shadow(0 0 24px rgba(168,85,247,.6))}.home-hero__title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent-glow),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.home-hero__subtitle{color:var(--text-muted);font-size:1.05rem}.spotify-status{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid rgba(255,255,255,.08)}.spotify-status__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.spotify-status__dot--connected{background:var(--success);box-shadow:0 0 8px var(--success)}.spotify-status__dot--disconnected{background:var(--text-muted)}.spotify-status__dot--loading{background:var(--warning);animation:pulse 1s infinite}.spotify-status__text{flex:1;font-size:.9rem}.spotify-status__action{font-size:.85rem;color:var(--accent);cursor:pointer}.spotify-status__action:hover{text-decoration:underline}.instructions-section h2{font-size:1.1rem;font-weight:700;color:var(--accent-glow);margin-bottom:12px}.instructions-list{list-style:none;display:flex;flex-direction:column;gap:10px}.instructions-list li{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--text-muted);line-height:1.5}.instructions-list li .step-num{min-width:24px;height:24px;border-radius:50%;background:var(--accent-dim);color:#fff;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.qr-instructions code{background:var(--bg-surface);padding:2px 7px;border-radius:4px;font-size:.82rem;color:var(--accent-glow);word-break:break-all}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:var(--bg-card);border-radius:var(--radius-lg);padding:32px 28px;max-width:400px;width:100%;border:1px solid rgba(168,85,247,.3);text-align:center}.modal__icon{font-size:3rem;margin-bottom:16px}.modal__title{font-size:1.3rem;font-weight:700;margin-bottom:10px}.modal__body{color:var(--text-muted);font-size:.95rem;margin-bottom:24px;line-height:1.6}.modal__actions{display:flex;gap:12px;flex-direction:column}.scanner{display:flex;flex-direction:column;gap:16px;padding:20px 0}.scanner__header{display:flex;align-items:center;gap:12px}.scanner__title{font-size:1.4rem;font-weight:700}.scanner__hint{text-align:center;color:var(--text-muted);font-size:.9rem}.scanner__viewport{border-radius:var(--radius-lg);overflow:hidden;border:2px solid rgba(168,85,247,.4);min-height:300px;position:relative;background:#000}#qr-reader{border:none!important;padding:0!important;width:100%!important}#qr-reader video{width:100%!important}#qr-reader>div:first-child{display:none}#qr-reader__dashboard{background:var(--bg-card)!important;border-radius:0 0 var(--radius-lg) var(--radius-lg)!important}#qr-reader__dashboard_section_csr button{background:var(--accent)!important;border:none!important;border-radius:var(--radius-sm)!important;color:#fff!important;padding:8px 16px!important;font-size:.9rem!important;cursor:pointer!important}.scanner__permission-denied{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 16px;text-align:center}.scanner__permission-denied p{color:var(--text-muted);font-size:.95rem;line-height:1.6}.scanner__last-scan{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--bg-surface);border-radius:var(--radius-md);font-size:.85rem;color:var(--text-muted);border:1px solid rgba(255,255,255,.06);word-break:break-all}.player{display:flex;flex-direction:column;gap:24px;padding:24px 0}.player__header{display:flex;align-items:center;gap:12px}.player__title{font-size:1.4rem;font-weight:700}.wave-visualizer{position:relative;display:flex;align-items:center;justify-content:center;margin:0 auto}.viz-center-btn{position:absolute;border-radius:50%;background:linear-gradient(135deg,var(--accent-dim),var(--accent));border:none;color:#fff;font-size:1.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .1s,opacity .15s}.viz-center-btn:active{transform:scale(.95)}.viz-center-btn:disabled{opacity:.4;cursor:not-allowed}.viz-center-btn--done{background:linear-gradient(135deg,#16a34a,#22c55e)}.viz-check{font-size:2rem}.player__done-badge{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#22c55e26;border:1px solid var(--success);border-radius:var(--radius-md);color:var(--success);font-weight:600;font-size:.9rem}.player__error{color:var(--danger);text-align:center;font-size:.9rem;padding:12px;background:#ef44441a;border-radius:var(--radius-md)}.callback-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px;text-align:center}.callback-screen__icon{font-size:3.5rem}.callback-screen__title{font-size:1.5rem;font-weight:700}.callback-screen__body{color:var(--text-muted);max-width:320px}.spinner{width:40px;height:40px;border:3px solid rgba(168,85,247,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;color:var(--text-muted)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease both}