*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary: #0c0c14;--bg-secondary: rgba(18, 18, 30, .85);--bg-glass: rgba(255, 255, 255, .04);--bg-glass-hover: rgba(255, 255, 255, .08);--bg-glass-strong: rgba(255, 255, 255, .06);--border-glass: rgba(255, 255, 255, .08);--text-primary: #f5f5f7;--text-secondary: rgba(255, 255, 255, .5);--text-tertiary: rgba(255, 255, 255, .3);--gradient: linear-gradient(135deg, #f472b6, #fb923c);--gradient-subtle: linear-gradient(135deg, rgba(244, 114, 182, .15), rgba(251, 146, 60, .15));--gradient-glow: linear-gradient(135deg, rgba(244, 114, 182, .3), rgba(251, 146, 60, .3));--accent: #f472b6;--accent-secondary: #fb923c;--spotify-green: #1DB954;--star-color: #fbbf24;--star-empty: rgba(255, 255, 255, .15);--success: #34d399;--danger: #f87171;--radius: 16px;--radius-sm: 10px;--radius-xs: 6px;--sidebar-width: 260px;--blur: blur(20px);--blur-strong: blur(40px)}html,body,#root{height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}html{--sat: env(safe-area-inset-top);--sab: env(safe-area-inset-bottom);--sal: env(safe-area-inset-left);--sar: env(safe-area-inset-right)}body:before{content:"";position:fixed;top:-30%;left:-20%;width:60%;height:60%;background:radial-gradient(circle,var(--glow-1, rgba(244, 114, 182, .08)) 0%,transparent 70%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;bottom:-30%;right:-20%;width:60%;height:60%;background:radial-gradient(circle,var(--glow-2, rgba(251, 146, 60, .06)) 0%,transparent 70%);pointer-events:none;z-index:0}.glass{background:var(--bg-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-glass)}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:40px auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.login-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#0c0c14;padding-top:var(--sat);padding-bottom:var(--sab)}.login-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;overflow:hidden}.login-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;animation:orbFloat 12s ease-in-out infinite}.orb-1{width:500px;height:500px;background:radial-gradient(circle,#f472b6,transparent 70%);top:-10%;left:-10%;animation-delay:0s}.orb-2{width:400px;height:400px;background:radial-gradient(circle,#fb923c,transparent 70%);bottom:-15%;right:-5%;animation-delay:-4s;animation-duration:15s}.orb-3{width:300px;height:300px;background:radial-gradient(circle,#a78bfa,transparent 70%);top:40%;right:20%;animation-delay:-8s;animation-duration:18s;opacity:.3}@keyframes orbFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-40px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.login-content{position:relative;z-index:1;text-align:center;padding:48px 52px 54px;background:#0c0c1480;backdrop-filter:var(--blur-strong);-webkit-backdrop-filter:var(--blur-strong);border-radius:28px;border:1px solid rgba(255,255,255,.08);max-width:560px;width:92%}.login-logo-lockup{width:min(380px,90%);margin:-8px auto 28px;overflow:hidden;filter:drop-shadow(0 0 42px rgba(244,114,182,.34))}.login-logo-img{width:100%;height:auto;margin:0 auto;display:block}.login-buttons{display:flex;flex-direction:column;gap:12px;align-items:center}.login-btn{display:block;width:100%;min-height:54px;padding:15px 24px;font-size:15px;font-weight:700;border:1px solid rgba(255,255,255,.18);border-radius:18px;cursor:pointer;color:#fff;letter-spacing:.01em;position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 1px #ffffff59,inset 0 -18px 28px #00000029,0 14px 32px #00000052;transition:transform .2s,box-shadow .2s,filter .2s,opacity .2s}.login-btn:before{content:"";position:absolute;inset:1px 1px auto;height:48%;border-radius:17px 17px 12px 12px;background:linear-gradient(180deg,#ffffff5c,#ffffff0a);pointer-events:none;z-index:-1}.login-btn:after{content:"";position:absolute;top:-35%;left:-18%;width:42%;height:140%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);transform:rotate(18deg);opacity:.7;pointer-events:none;transition:transform .35s ease}.login-btn:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.08) brightness(1.04);box-shadow:inset 0 1px #ffffff6b,inset 0 -18px 28px #00000024,0 18px 42px #0000006b}.login-btn:hover:not(:disabled):after{transform:translate(220%) rotate(18deg)}.login-btn:disabled{opacity:.55;cursor:not-allowed}.login-btn.google,.login-btn.apple-auth{border:2px solid transparent;background:linear-gradient(var(--bg-primary),var(--bg-primary)) padding-box,var(--gradient) border-box;color:var(--text-primary);font-weight:600;display:flex;align-items:center;justify-content:center;gap:12px}.login-btn.google:before,.login-btn.google:after,.login-btn.apple-auth:before,.login-btn.apple-auth:after{display:none}.login-btn.google:hover:not(:disabled),.login-btn.apple-auth:hover:not(:disabled){background:linear-gradient(#ffffff0a,#ffffff0a) padding-box,var(--gradient) border-box}.login-btn-icon{flex-shrink:0}.login-btn.spotify{background:linear-gradient(135deg,#22d36f,#1db954 46%,#0b8f40)}.login-btn.apple{background:linear-gradient(135deg,#ff6b70,#fc3c44 45%,#b91c24)}.login-btn.youtube{background:linear-gradient(135deg,#ff5d5d,red 46%,#a60000)}.login-features{display:flex;justify-content:center;gap:24px;margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06)}.login-feature{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#fff6}.login-feature span:first-child{font-size:20px}.privacy-link{background:none;border:none;color:#fff3;margin-top:24px;cursor:pointer;font-size:12px;transition:color .15s}.privacy-link:hover{color:#ffffff80}.login-divider{display:flex;align-items:center;gap:12px;margin:16px 0 12px;width:100%}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:#ffffff1f}.login-divider span{color:#ffffff4d;font-size:13px;text-transform:uppercase;letter-spacing:.05em}.login-btn.email-btn{background:var(--gradient);border:none;color:#fff;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.2);filter:brightness(.85) saturate(1.15)}.login-btn.email-btn:hover:not(:disabled){filter:brightness(.95) saturate(1.2)}.email-auth-form{display:flex;flex-direction:column;gap:10px;width:100%}.auth-input{padding:12px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#ffffff0f;color:var(--text-primary);font-size:14px;outline:none;transition:border-color .2s}.auth-input:focus{border-color:var(--accent)}.auth-input::placeholder{color:#ffffff4d}.auth-error{color:#f87171;font-size:13px;text-align:center}.login-btn.email-submit{background:var(--gradient);border:none}.login-btn.email-submit:disabled{opacity:.5;cursor:not-allowed}.auth-toggle{background:none;border:none;color:#fff6;font-size:13px;cursor:pointer;padding:4px;transition:color .2s}.auth-toggle:hover{color:#ffffffb3}.login-footer{position:fixed;bottom:20px;color:#ffffff26;font-size:12px;z-index:1}.login-footer-link{color:#ffffff40;text-decoration:none;transition:color .2s}.login-footer-link:hover{color:#ffffff80}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.modal-content{background:#141423f2;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:32px;max-width:560px;width:100%;max-height:80vh;overflow-y:auto;position:relative}.modal-content h2{margin-bottom:16px}.modal-content h3{margin-top:20px;margin-bottom:8px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-content p{color:var(--text-secondary);line-height:1.7;margin-bottom:8px;font-size:14px}.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:28px;cursor:pointer}.callback-page{min-height:100vh;display:flex;align-items:center;justify-content:center}.callback-card{text-align:center;padding:40px}.callback-card p{color:var(--text-secondary);margin-top:16px}.app-layout{display:flex;min-height:100vh;position:relative;z-index:1}.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);backdrop-filter:var(--blur-strong);-webkit-backdrop-filter:var(--blur-strong);border-right:1px solid var(--border-glass);display:flex;flex-direction:column;padding:28px 16px;position:fixed;top:0;left:0;bottom:0;z-index:10;overflow:hidden}.sidebar-logo-wrap{margin-bottom:36px;padding:0 6px}.nav-links{display:flex;flex-direction:column;gap:4px;flex:1}.nav-link{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);text-decoration:none;font-weight:500;font-size:14px;transition:all .2s}.nav-link:hover{background:var(--bg-glass-hover);color:var(--text-primary)}.nav-link.active{background:var(--gradient);color:#fff;box-shadow:0 4px 15px #f472b64d}.nav-icon{font-size:1.15rem}.nav-link.upgrade-nav:not(.active){color:var(--text-secondary)}.nav-link.upgrade-nav:not(.active):hover{color:var(--accent)}.sidebar-user{display:flex;align-items:center;gap:10px;padding:14px 12px;border-top:1px solid var(--border-glass);margin-top:16px;flex-wrap:wrap}.user-avatar{width:34px;height:34px;border-radius:50%;border:2px solid var(--border-glass)}.user-name{font-size:13px;color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logout-btn{background:none;border:none;color:var(--text-tertiary);font-size:12px;cursor:pointer;padding:4px 8px;border-radius:var(--radius-xs);transition:all .15s}.logout-btn:hover{color:var(--danger);background:#f871711a}.main-content{flex:1;margin-left:var(--sidebar-width);padding:36px 44px;min-height:100vh;position:relative;overflow-x:hidden}.main-content::-webkit-scrollbar{width:0;background:transparent}.main-content:has(.dj-room){overflow:hidden;height:100vh;padding-top:0;padding-bottom:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#00000026;border-radius:4px}::-webkit-scrollbar-thumb{background:var(--accent, rgba(255,255,255,.15));border-radius:4px;opacity:.6}::-webkit-scrollbar-thumb:hover{background:var(--accent, rgba(255,255,255,.25));opacity:.9}*{scrollbar-width:thin;scrollbar-color:var(--accent, rgba(255,255,255,.15)) rgba(0,0,0,.15)}.discover-page{max-width:960px;animation:slideUp .4s ease-out}.discover-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.logo-container{display:flex}.discover-title-area{display:flex;align-items:center;gap:10px}.discover-logo{display:none!important}.discover-header h2{font-size:2.25rem;font-weight:700;letter-spacing:-.02em}.track-counter{color:var(--text-secondary);font-size:13px;background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);padding:6px 16px;border-radius:20px}.save-feedback{background:var(--gradient);color:#fff;padding:10px 20px;border-radius:var(--radius-sm);margin-bottom:20px;font-weight:500;font-size:14px;animation:fadeIn .2s}.discover-search{display:flex;gap:10px;margin-bottom:20px}.search-input-wrapper{flex:1;position:relative}.search-input{width:100%;padding:12px 16px 12px 40px;background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;font-family:inherit;transition:border-color .2s;text-align:left}.search-input::placeholder{color:var(--text-tertiary);text-align:center}.search-input:focus{outline:none;border-color:var(--accent)}.search-input:focus::placeholder{text-align:left}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:14px;pointer-events:none}.search-btn{padding:12px 22px;background:var(--gradient);border:none;border-radius:var(--radius-sm);color:#fff;font-weight:600;font-size:14px;cursor:pointer;transition:opacity .15s,transform .15s}.search-btn:hover{opacity:.9;transform:translateY(-1px)}.search-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}.genre-filter-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px}.genre-filter-chip{padding:6px 14px;border:1px solid var(--border-glass);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.genre-filter-chip:hover{border-color:var(--accent);color:var(--text-primary)}.genre-filter-chip.active{background:var(--gradient);border-color:transparent;color:#fff}.discover-content{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:40px}.now-playing{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);overflow:hidden;transition:border-color .3s}.now-playing:hover{border-color:#f472b633}.now-playing-art{width:100%;aspect-ratio:1;object-fit:cover;display:block}.now-playing>.now-playing-info{padding:12px 16px 4px;max-width:100%}.now-playing .now-playing-title{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing .now-playing-artist{font-size:13px;color:var(--text-secondary);margin:0}.now-playing .now-playing-album{font-size:11px;color:var(--text-tertiary);margin:4px 0 0}.audio-preview-embed{padding:8px;border-top:1px solid var(--border-glass)}.rating-widget{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:24px;max-height:80vh;overflow-y:auto;scrollbar-width:none}.rating-widget::-webkit-scrollbar{display:none}.rating-quick-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.rating-quick-row .rating-row{flex:1;min-width:0}.btn-quick-next{display:none;background:var(--gradient);border:none;color:#fff;font-weight:600;font-size:13px;padding:8px 16px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:opacity .15s,transform .15s;flex-shrink:0}.btn-quick-next:hover{opacity:.9;transform:translateY(-1px)}.rating-row{display:flex;align-items:center;gap:12px;padding:8px 0}.rating-label{display:flex;align-items:center;gap:6px;min-width:110px}.rating-icon{font-size:1.1rem}.rating-name{font-size:14px;font-weight:500}.stars{display:flex;gap:2px}.star{background:none;border:none;font-size:24px;cursor:pointer;color:var(--star-empty);transition:color .1s,transform .15s;padding:2px}.star.filled{color:var(--star-color)}.star:hover{transform:scale(1.25)}.rating-desc-inline{font-size:11px;color:var(--text-tertiary)}.rating-categories{margin-top:12px;display:flex;flex-direction:column;gap:4px}.rating-category{border-radius:var(--radius-sm);overflow:hidden}.category-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-glass-hover);border:none;color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s}.category-toggle:hover{background:#ffffff1a}.category-toggle.open{border-radius:var(--radius-sm) var(--radius-sm) 0 0}.toggle-arrow{font-size:10px;color:var(--text-tertiary)}.category-dimensions{background:#ffffff05;padding:4px 10px;border-radius:0 0 var(--radius-sm) var(--radius-sm)}.category-dimensions .rating-row{padding:5px 0}.category-dimensions .star{font-size:20px}.tag-section{margin-top:16px}.tag-section-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.tag-grid{display:flex;flex-wrap:wrap;gap:6px}.tag-chip{padding:5px 12px;border:1px solid var(--border-glass);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.tag-chip:hover{border-color:var(--accent);color:var(--text-primary)}.tag-chip.selected{background:var(--gradient);border-color:transparent;color:#fff}.text-feedback{margin-top:16px;position:relative}.text-feedback textarea{width:100%;background:var(--bg-glass-hover);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:13px;padding:12px;resize:vertical;min-height:60px;transition:border-color .2s}.text-feedback textarea::placeholder{color:var(--text-tertiary)}.text-feedback textarea:focus{outline:none;border-color:var(--accent)}.char-count{position:absolute;bottom:8px;right:12px;font-size:11px;color:var(--text-tertiary)}.quick-actions{display:flex;gap:8px;margin-top:16px}.action-btn{flex:1;padding:9px;background:var(--bg-glass-hover);border:1px solid var(--border-glass);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s}.action-btn:hover{border-color:var(--accent);color:var(--text-primary);background:#f472b61a}.rating-actions{display:flex;gap:10px;margin-top:20px}.btn-skip,.btn-rate{flex:1;padding:12px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-skip{background:var(--bg-glass-hover);color:var(--text-secondary);border:1px solid var(--border-glass)}.btn-skip:hover{background:#ffffff1a;color:var(--text-primary)}.btn-rate{background:var(--gradient);color:#fff}.btn-rate:hover:not(:disabled){opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px #f472b64d}.btn-rate:disabled{opacity:.3;cursor:not-allowed;transform:none}.playlist-modal{max-height:70vh}.playlist-modal h3{margin-bottom:16px}.empty-playlists{color:var(--text-secondary);text-align:center;padding:20px}.playlist-list{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow-y:auto}.playlist-item{display:flex;align-items:center;gap:12px;padding:10px;background:none;border:none;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-primary);text-align:left;width:100%;transition:background .15s}.playlist-item:hover{background:var(--bg-glass-hover)}.playlist-thumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}.playlist-thumb.placeholder{background:var(--bg-glass-hover);display:flex;align-items:center;justify-content:center;color:var(--text-tertiary);font-size:18px}.playlist-item-info{display:flex;flex-direction:column}.playlist-item-name{font-size:14px;font-weight:500}.playlist-item-count{font-size:12px;color:var(--text-secondary)}.song-card{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .2s}.song-card:hover{background:var(--bg-glass-hover)}.song-art{width:48px;height:48px;border-radius:8px;object-fit:cover}.song-info{display:flex;flex-direction:column;overflow:hidden}.song-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-artist{font-size:12px;color:var(--text-secondary)}.has-preview{color:var(--accent);margin-left:auto;font-size:16px}.up-next h4{color:var(--text-tertiary);font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-bottom:12px}.up-next-list{display:flex;flex-direction:column;gap:2px}.dashboard-page{max-width:960px;animation:slideUp .4s ease-out}.dashboard-page h2{font-size:1.8rem;margin-bottom:32px;font-weight:700;letter-spacing:-.02em}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:36px}.stat-card{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:24px;text-align:center;transition:border-color .3s}.stat-card:hover{border-color:#f472b633}.stat-value{font-size:2.5rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}.stat-label{font-size:13px;color:var(--text-secondary);margin-top:4px}.dashboard-section{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:24px;margin-bottom:20px}.dashboard-section h3{margin-bottom:16px;font-weight:600}.section-subtitle{color:var(--text-secondary);font-size:13px;margin-top:-12px;margin-bottom:16px}.distribution-chart{display:flex;align-items:flex-end;gap:16px;height:120px;padding:0 20px}.dist-bar-container{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}.dist-bar{width:100%;max-width:60px;background:var(--gradient);border-radius:4px 4px 0 0;min-height:4px;transition:height .3s}.dist-label{font-size:12px;color:var(--text-secondary);margin-top:8px}.dist-count{font-size:11px;color:var(--text-tertiary)}.taste-profile{display:flex;flex-direction:column;gap:12px}.taste-bar-container{display:flex;align-items:center;gap:12px}.taste-label{min-width:110px;font-size:14px}.taste-bar{flex:1;height:6px;background:#ffffff0f;border-radius:3px;overflow:hidden}.taste-fill{height:100%;background:var(--gradient);border-radius:3px;transition:width .4s ease-out}.taste-value{font-size:14px;color:var(--text-secondary);min-width:30px;text-align:right}.top-rated-list{display:flex;flex-direction:column;gap:6px}.top-rated-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:var(--radius-sm);transition:background .15s}.top-rated-item:hover{background:var(--bg-glass-hover)}.top-rated-art{width:44px;height:44px;border-radius:8px}.top-rated-info{flex:1;display:flex;flex-direction:column}.top-rated-name{font-size:14px;font-weight:500}.top-rated-artist{font-size:12px;color:var(--text-secondary)}.top-rated-score{color:var(--star-color);font-weight:600}.top10-section{margin-bottom:32px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:16px;overflow:hidden}.top10-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;background:var(--gradient-subtle);border:none;cursor:pointer;color:var(--text-primary);font-size:inherit}.top10-header:hover{background:var(--gradient-glow)}.top10-header-left{display:flex;align-items:center;gap:10px}.top10-header-left h3{font-size:16px;font-weight:700;margin:0}.top10-trophy{font-size:20px}.top10-count{font-size:12px;color:var(--text-tertiary);background:var(--bg-glass);padding:2px 8px;border-radius:10px}.top10-list{padding:8px}.top10-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);transition:all .15s;cursor:grab;border:2px solid transparent}.top10-item:hover{background:var(--bg-glass-hover)}.top10-item.drag-over{border-color:var(--accent);background:var(--gradient-subtle)}.top10-item.dragging{opacity:.4}.top10-rank{font-size:14px;font-weight:800;min-width:28px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.top10-grip{color:var(--text-tertiary);font-size:16px;cursor:grab;-webkit-user-select:none;user-select:none;line-height:1}.top10-arrows{display:none}.top10-arrow{background:none;border:1px solid var(--border-glass);color:var(--text-secondary);font-size:9px;padding:2px 5px;border-radius:4px;cursor:pointer;line-height:1}.top10-arrow:disabled{opacity:.2;cursor:default}.top10-arrow:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}.top10-art{width:44px;height:44px;border-radius:8px;object-fit:cover}.top10-info{flex:1;display:flex;flex-direction:column;min-width:0}.top10-name{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top10-artist{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top10-score{color:var(--star-color);font-weight:600;font-size:14px}.top10-remove{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:4px;transition:all .15s;opacity:0}.top10-item:hover .top10-remove{opacity:1}.top10-remove:hover{color:var(--danger);background:#f871711a}.top10-empty{padding:32px 20px;text-align:center;color:var(--text-secondary);font-size:14px}.top10-empty-icon{font-size:32px;display:block;margin-bottom:8px}.top10-empty-hint{font-size:12px;color:var(--text-tertiary);margin-top:4px}.top10-add-btn{background:none;border:1px solid var(--border-glass);color:var(--text-secondary);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:6px;transition:all .15s;flex-shrink:0}.top10-add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--gradient-subtle)}.top10-badge{font-size:14px;flex-shrink:0}.rating-item-actions{display:flex;gap:8px;margin-top:8px;margin-bottom:4px}.ratings-page{max-width:960px;animation:slideUp .4s ease-out}.ratings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:16px}.ratings-header h2{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}.filter-tabs{display:flex;gap:6px}.filter-tab{padding:7px 16px;border:1px solid var(--border-glass);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s}.filter-tab:hover{border-color:var(--accent)}.filter-tab.active{background:var(--gradient);border-color:transparent;color:#fff}.ratings-list{display:flex;flex-direction:column;gap:8px}.rating-item{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.rating-item:hover{border-color:#f472b626}.rating-item-main{display:flex;align-items:center;gap:12px;padding:12px 16px}.rating-item-art{width:48px;height:48px;border-radius:8px}.rating-item-info{flex:1;display:flex;flex-direction:column}.rating-item-name{font-weight:500}.rating-item-artist{font-size:13px;color:var(--text-secondary)}.rating-item-score{color:var(--star-color);font-weight:600;font-size:1.1rem}.rating-item-details{padding:12px 16px 16px;border-top:1px solid var(--border-glass);margin-top:4px}.detail-row{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}.detail-row span:first-child{color:var(--text-secondary)}.detail-row span:last-child{color:var(--star-color);letter-spacing:2px}.rating-date{display:block;margin-top:8px;font-size:12px;color:var(--text-tertiary)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.discover-loading,.discover-error{text-align:center;padding:80px 20px}.discover-error h2{margin-bottom:12px}.discover-error p{color:var(--text-secondary);margin-bottom:20px}.genre-picker{max-width:640px;margin:0 auto;text-align:center;padding:40px 0;animation:slideUp .4s ease-out}.genre-picker h2{font-size:1.8rem;margin-bottom:8px;font-weight:700}.genre-subtitle{color:var(--text-secondary);margin-bottom:32px}.genre-grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:32px}.genre-chip{padding:10px 22px;border:1px solid var(--border-glass);border-radius:50px;background:var(--bg-glass);color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.genre-chip:hover{border-color:var(--accent);color:var(--text-primary)}.genre-chip.selected{background:var(--gradient);border-color:transparent;color:#fff;box-shadow:0 4px 15px #f472b64d}.genre-go{min-width:220px}.genre-go:disabled{opacity:.3;cursor:not-allowed}.btn-primary{padding:12px 28px;border:none;border-radius:var(--radius-sm);background:var(--gradient);color:#fff;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover:not(:disabled){opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px #f472b64d}.btn-secondary{padding:12px 28px;border:1px solid var(--border-glass);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{border-color:var(--accent);color:var(--text-primary)}.mini-player{padding:12px;margin:auto 0 8px;background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius-sm);animation:fadeIn .3s}.mini-player-track{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:10px}.mini-art{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}.mini-info{flex:1;overflow:hidden}.mini-name{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-artist{display:block;font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-embed{margin:8px 0;border-radius:8px;overflow:hidden;height:152px;position:relative}.mini-embed iframe{display:block;border:none;position:absolute;top:0;left:0;width:100%;height:152px}.mini-stars{display:flex;justify-content:center;gap:2px;margin-bottom:8px}.mini-star{background:none;border:none;font-size:18px;cursor:pointer;color:var(--star-empty);transition:color .1s,transform .12s;padding:1px}.mini-star.filled{color:var(--star-color)}.mini-star:hover{transform:scale(1.3)}.mini-actions{display:flex;gap:6px}.mini-btn{flex:1;padding:6px;background:var(--bg-glass-hover);border:1px solid var(--border-glass);border-radius:6px;color:var(--text-primary);font-size:14px;cursor:pointer;transition:all .15s;text-align:center}.mini-btn:hover{background:#ffffff1a}.mini-close:hover{background:#f8717126;color:var(--danger)}.mini-rate-btn{background:var(--gradient)!important;border-color:transparent!important;font-weight:600;font-size:12px}.mini-rate-btn:hover{filter:brightness(1.15)}.mini-rate-btn:disabled{opacity:.5;cursor:not-allowed}.mini-player-upgrade{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 0}.mini-upgrade-icon{font-size:16px}.mini-upgrade-text{font-size:11px;color:var(--text-secondary);line-height:1.3}.mini-player-upgrade:hover .mini-upgrade-text{color:var(--accent)}.skel{background:var(--bg-glass-hover);position:relative;overflow:hidden}.skel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.skel-text{border-radius:6px;height:16px}.skel-block{border-radius:12px;width:100%}.skel-pill{border-radius:20px;width:70px;height:30px}.onboarding-page{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#0c0c14}.onboarding-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.onboarding-card{position:relative;z-index:1;background:#0c0c1499;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid rgba(255,255,255,.08);border-radius:28px;padding:48px;max-width:580px;width:92%;text-align:center;animation:slideUp .4s ease-out}.onboarding-progress{display:flex;justify-content:center;gap:8px;margin-bottom:32px}.progress-dot{width:32px;height:4px;border-radius:2px;background:#ffffff1a;transition:background .3s}.progress-dot.active{background:linear-gradient(135deg,#f472b6,#fb923c)}.onboarding-title{font-size:1.6rem;font-weight:700;margin-bottom:6px;letter-spacing:-.02em;color:#f5f5f7}.onboarding-subtitle{color:#ffffff73;font-size:14px;margin-bottom:28px}.onboarding-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px}.onboarding-chip{padding:9px 18px;border:1px solid rgba(255,255,255,.1);border-radius:50px;background:#ffffff0a;color:#fff9;font-size:14px;cursor:pointer;transition:all .2s}.onboarding-chip:hover{border-color:#f472b6;color:#f5f5f7}.onboarding-chip.selected{background:linear-gradient(135deg,#f472b6,#fb923c);border-color:transparent;color:#fff;box-shadow:0 4px 12px #f472b64d}.onboarding-single{max-width:640px;max-height:85vh;overflow-y:auto;text-align:left;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.onboarding-single .onboarding-title,.onboarding-single .onboarding-subtitle{text-align:center}.onboarding-section{margin-bottom:24px}.onboarding-section-title{font-size:14px;font-weight:600;color:#ffffffb3;margin-bottom:10px;display:flex;align-items:center;gap:8px}.onboarding-required{font-size:11px;font-weight:500;color:#f472b6;background:#f472b61a;padding:2px 8px;border-radius:10px}.onboarding-optional{font-size:11px;font-weight:500;color:#ffffff4d;background:#ffffff0d;padding:2px 8px;border-radius:10px}.chip-emoji{font-size:15px}.onboarding-actions{display:flex;gap:12px;justify-content:center;margin-top:8px;position:sticky;bottom:-1px;padding:20px 0 8px;background:linear-gradient(to top,rgba(12,12,20,1) 50%,rgba(12,12,20,.95) 70%,transparent);z-index:5}.onboarding-next{min-width:220px}.onboarding-hint{text-align:center;color:#ffffff4d;font-size:12px;margin-top:8px}.history-page{max-width:960px;animation:slideUp .4s ease-out}.history-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:28px}.history-header h2{font-size:1.8rem;font-weight:700;letter-spacing:-.02em}.history-subtitle{color:var(--text-secondary);font-size:14px;margin-top:4px}.history-group{margin-bottom:24px}.history-date{font-size:12px;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;padding-left:4px}.history-list{display:flex;flex-direction:column;gap:4px}.history-item{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:var(--radius-sm);transition:background .15s}.history-item:hover{background:var(--bg-glass-hover)}.previewable-art-wrapper{position:relative;flex-shrink:0;z-index:1}.previewable-art-wrapper:has(.preview-embed-popup){z-index:200}.previewable-art{position:relative;cursor:pointer;border-radius:8px;overflow:hidden}.previewable-art img{width:100%;height:100%;object-fit:cover;display:block}.preview-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000080;color:#fff;opacity:0;transition:opacity .15s;border-radius:8px}.previewable-art:hover .preview-overlay,.previewable-art.playing .preview-overlay{opacity:1}.previewable-art.playing{box-shadow:0 0 0 2px var(--accent-primary)}.preview-embed-popup{position:absolute;top:calc(100% + 8px);left:0;z-index:100;background:var(--bg-card);border-radius:12px;box-shadow:0 8px 32px #0006;padding:6px;animation:preview-pop-in .15s ease}.preview-embed-popup iframe{border-radius:8px;display:block}.preview-embed-close{position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;border:none;background:var(--bg-glass);color:var(--text-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;z-index:1}.preview-embed-close:hover{background:var(--bg-glass-hover)}@keyframes preview-pop-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.history-art{width:44px;height:44px;border-radius:8px;object-fit:cover}.history-info{flex:1;display:flex;flex-direction:column}.history-name{font-size:14px;font-weight:500}.history-artist{font-size:12px;color:var(--text-secondary)}.history-time{font-size:12px;color:var(--text-tertiary)}.ad-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s}.ad-container{background:var(--bg-glass-strong);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:24px;padding:40px;max-width:440px;width:100%;text-align:center;position:relative}.ad-badge{position:absolute;top:16px;left:16px;font-size:10px;font-weight:700;color:var(--text-tertiary);background:#ffffff0f;padding:3px 8px;border-radius:4px;letter-spacing:.1em}.ad-promo h2{font-size:1.6rem;font-weight:700;margin-bottom:8px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ad-promo>p{color:var(--text-secondary);font-size:14px;margin-bottom:24px;line-height:1.5}.ad-promo-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px;text-align:left}.ad-feature{font-size:13px;color:var(--text-primary);padding:8px 12px;background:var(--bg-glass-hover);border-radius:var(--radius-xs)}.ad-pricing{margin-bottom:20px}.ad-price{font-size:2.2rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ad-period{font-size:14px;color:var(--text-secondary)}.ad-upgrade-btn{width:100%;padding:14px;background:var(--gradient);border:none;border-radius:50px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;margin-bottom:16px}.ad-upgrade-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 8px 25px #f472b64d}.ad-close{background:none;border:none;color:var(--text-tertiary);font-size:13px;cursor:pointer;padding:8px 16px;transition:color .15s}.ad-close:hover:not(:disabled){color:var(--text-secondary)}.ad-close:disabled{cursor:not-allowed}.web-banner-ad{position:relative;margin-bottom:16px;border-radius:10px;overflow:hidden;background:var(--bg-tertiary);min-height:90px;display:flex;align-items:center;justify-content:center}.web-banner-ad .ad-label{position:absolute;top:4px;right:8px;font-size:9px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.web-banner-ad .adsbygoogle{background:transparent}.welcome-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.welcome-popup{background:var(--bg-secondary);border:1px solid var(--border-glass);border-radius:20px;padding:36px 32px;max-width:420px;width:90%;text-align:center;position:relative;animation:slideUp .4s ease-out}.welcome-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--text-tertiary);font-size:24px;cursor:pointer;line-height:1}.welcome-close:hover{color:var(--text-primary)}.welcome-icon{font-size:48px;margin-bottom:12px}.welcome-popup h2{font-size:1.5rem;font-weight:700;margin-bottom:8px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.welcome-popup>p{color:var(--text-secondary);font-size:14px;margin-bottom:24px}.welcome-cta{border-top:1px solid var(--border-glass);padding-top:20px}.welcome-pro-pitch{color:var(--text-secondary);font-size:13px;margin-bottom:16px}.welcome-upgrade-btn{display:block;width:100%;padding:14px;background:var(--gradient);border:none;border-radius:12px;color:#fff;font-weight:600;font-size:15px;cursor:pointer;margin-bottom:10px;transition:opacity .2s,transform .2s}.welcome-upgrade-btn:hover{opacity:.9;transform:translateY(-1px)}.welcome-skip-btn{display:block;width:100%;padding:10px;background:none;border:none;color:var(--text-tertiary);font-size:13px;cursor:pointer}.welcome-skip-btn:hover{color:var(--text-secondary)}.connect-music-popup{max-width:420px}.connect-music-list{display:flex;flex-direction:column;gap:8px;margin:20px 0 16px;width:100%}.connect-music-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:var(--bg-glass);cursor:pointer;transition:background .15s,border-color .15s;text-align:left;color:var(--text-primary)}.connect-music-row:hover:not(:disabled){background:var(--bg-glass-hover);border-color:#ffffff26}.connect-music-row.coming-soon{opacity:.5;cursor:not-allowed}.connect-music-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.connect-music-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.connect-music-name{font-size:14px;font-weight:600}.connect-music-desc{font-size:11px;color:var(--text-tertiary)}.connect-music-action{font-size:13px;font-weight:600;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;flex-shrink:0}.connect-music-soon{font-size:11px;color:var(--text-tertiary);flex-shrink:0}.connect-music-hide{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-tertiary);cursor:pointer;margin:8px 0 12px}.connect-music-hide input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px}.upgrade-page{max-width:960px;animation:slideUp .4s ease-out}.upgrade-header{text-align:center;margin-bottom:40px}.upgrade-header h2{font-size:2rem;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}.upgrade-subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:24px}.billing-toggle{display:inline-flex;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:50px;padding:4px}.billing-btn{padding:10px 24px;border:none;border-radius:50px;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px}.billing-btn.active{background:var(--gradient);color:#fff}.save-badge{font-size:10px;font-weight:700;background:#34d39933;color:#34d399;padding:2px 8px;border-radius:10px}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}.plan-card{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:28px;position:relative;transition:all .3s}.plan-card:hover{border-color:#ffffff26;transform:translateY(-2px)}.plan-card.featured{border-color:var(--accent);box-shadow:0 0 30px #f472b61a}.plan-popular{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--gradient);color:#fff;font-size:11px;font-weight:700;padding:4px 16px;border-radius:20px;letter-spacing:.03em}.plan-header{text-align:center;margin-bottom:24px}.plan-header h3{font-size:1.2rem;margin-bottom:12px}.plan-price{display:flex;align-items:baseline;justify-content:center;gap:2px}.price-amount{font-size:2.4rem;font-weight:700}.price-period{font-size:14px;color:var(--text-secondary)}.plan-billed{font-size:12px;color:var(--text-tertiary);margin-top:4px}.plan-features{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}.plan-features li{font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:8px}.feature-icon{color:var(--text-tertiary);font-weight:600}.feature-icon.pro{color:var(--accent)}.plan-btn{width:100%;padding:12px;border:1px solid var(--border-glass);border-radius:50px;background:transparent;color:var(--text-secondary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.plan-btn:hover{border-color:var(--accent);color:var(--text-primary)}.plan-btn:disabled{opacity:.4;cursor:not-allowed}.pro-btn{background:var(--gradient);border:none;color:#fff}.pro-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px #f472b64d}.current-btn{background:var(--bg-glass-hover);border-color:transparent}.upgrade-error{background:#f871711a;border:1px solid rgba(248,113,113,.3);color:var(--danger);padding:12px 16px;border-radius:10px;font-size:14px;margin-bottom:20px;text-align:center}.manage-section{text-align:center;margin-top:24px}.manage-btn{background:var(--bg-tertiary);border:1px solid var(--border-glass);color:var(--text-secondary);padding:12px 28px;border-radius:10px;font-size:14px;cursor:pointer;transition:all .2s}.manage-btn:hover{border-color:var(--accent);color:var(--text-primary)}.manage-btn:disabled{opacity:.5;cursor:not-allowed}.upgrade-footer{text-align:center;color:var(--text-tertiary);font-size:13px}.upgrade-footer p{margin-bottom:4px}.restore-btn{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:8px 16px;text-decoration:underline;opacity:.8;transition:opacity .2s}.restore-btn:hover{opacity:1}.restore-btn:disabled{opacity:.4;cursor:not-allowed}.settings-page{max-width:720px;animation:slideUp .4s ease-out}.settings-page>h2{font-size:1.8rem;font-weight:700;letter-spacing:-.02em;margin-bottom:32px}.settings-section{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:var(--radius);padding:24px;margin-bottom:20px}.settings-section h3{font-size:1rem;font-weight:600;margin-bottom:4px}.section-hint{font-size:13px;color:var(--text-secondary);margin-bottom:20px}.profile-card{display:flex;align-items:center;gap:16px;padding:16px 0 0;flex-wrap:wrap}.profile-avatar{width:56px;height:56px;border-radius:50%;border:2px solid var(--border-glass);object-fit:cover}.profile-avatar-placeholder{width:56px;height:56px;border-radius:50%;border:2px solid var(--border-glass);background:var(--gradient);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0}.profile-info{flex:1;display:flex;flex-direction:column;gap:2px}.profile-name{font-weight:600;font-size:16px}.profile-email{font-size:13px;color:var(--text-secondary)}.profile-plan{font-size:11px;color:var(--accent);background:var(--gradient-subtle);padding:2px 10px;border-radius:10px;width:fit-content;margin-top:4px;font-weight:600}.btn-upgrade{padding:10px 22px;background:var(--gradient);border:none;border-radius:50px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.btn-upgrade:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px #f472b64d}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.theme-card{background:var(--bg-glass-hover);border:2px solid transparent;border-radius:var(--radius-sm);padding:14px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:8px}.theme-card:hover{border-color:var(--border-glass)}.theme-card.active{border-color:var(--accent);box-shadow:0 0 20px #f472b626}.theme-preview{width:100%;height:48px;border-radius:var(--radius-xs);overflow:hidden;display:flex;flex-direction:column}.theme-swatch{flex:1}.theme-accent-row{display:flex;height:10px}.theme-accent{flex:1}.theme-name{font-size:13px;font-weight:600;color:var(--text-primary)}.theme-desc{font-size:11px;color:var(--text-secondary)}.accounts-list{display:flex;flex-direction:column;gap:8px}.account-row{display:flex;align-items:center;gap:14px;padding:14px;background:var(--bg-glass-hover);border-radius:var(--radius-sm)}.account-icon{font-size:20px}.account-info{flex:1;display:flex;flex-direction:column}.account-name{font-size:14px;font-weight:500}.account-status{font-size:12px;color:var(--text-secondary)}.account-status.connected{color:var(--success)}.account-badge{font-size:11px;padding:4px 12px;border-radius:20px;font-weight:600}.account-badge.connected{background:#34d39926;color:var(--success)}.account-btn{padding:7px 18px;border:1px solid var(--border-glass);border-radius:20px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.account-btn:hover{border-color:var(--accent);color:var(--text-primary)}.account-btn.connect{border-color:var(--accent);color:var(--accent)}.account-btn.connect:hover{background:var(--gradient-subtle)}.account-btn.disconnect{border-color:#f8717166;color:#f87171;font-size:11px;padding:4px 10px}.account-btn.disconnect:hover{background:#f871711a}.account-actions-row{display:flex;align-items:center;gap:8px;flex-shrink:0}.account-btn:disabled{opacity:.3;cursor:not-allowed}.account-desc{font-size:11px;color:var(--text-tertiary)}.account-actions{padding-top:8px}.playback-source-toggle{display:flex;flex-direction:column;gap:8px}.source-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-primary);cursor:pointer;transition:all .2s;text-align:left}.source-btn:hover:not(:disabled){background:var(--bg-glass-hover)}.source-btn.active{border-color:var(--accent);background:#f472b614}.source-btn:disabled{opacity:.4;cursor:not-allowed}.source-icon{font-size:20px;flex-shrink:0}.source-label{display:flex;flex-direction:column}.source-name{font-size:14px;font-weight:600}.source-desc{font-size:12px;color:var(--text-secondary)}.track-search-source-toggle{display:flex;gap:4px;margin-bottom:8px}.search-source-btn{flex:1;padding:6px 8px;border-radius:var(--radius-xs);background:var(--bg-glass);border:1px solid var(--border-glass);color:var(--text-secondary);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.search-source-btn.active{background:var(--gradient-subtle);border-color:var(--accent);color:var(--text-primary)}.btn-danger{padding:10px 24px;border:1px solid rgba(248,113,113,.3);border-radius:var(--radius-sm);background:#f871711a;color:var(--danger);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}.btn-danger:hover{background:#f8717133}@media (max-width: 768px){body:before,body:after{display:none}.login-content{padding:24px 20px 28px;border-radius:20px;width:94%}.login-logo-lockup{margin:-8px auto 16px}.login-buttons{gap:8px}.login-btn{min-height:46px;padding:12px 20px;font-size:14px}.login-divider{margin:10px 0 8px}.login-features{gap:10px}.login-features span{font-size:12px}.sidebar{width:100%;position:fixed;top:auto;bottom:0;left:0;right:0;height:calc(60px + var(--sab));flex-direction:row;padding:6px 0 var(--sab);border-right:none;border-top:1px solid var(--border-glass);z-index:20;background:var(--bg-secondary);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden}.sidebar-logo-wrap,.sidebar-user{display:none}.mini-player{display:none!important}.nav-links{flex-direction:row;justify-content:space-around;width:100%;gap:0}.nav-link{flex-direction:column;gap:2px;font-size:9px;padding:6px 4px;min-width:0;white-space:nowrap;border-radius:8px;position:relative;color:var(--text-tertiary);background:none;box-shadow:none}.nav-link.active{background:var(--gradient-subtle);color:var(--accent);box-shadow:none}.nav-icon{font-size:20px}html,body,#root{overflow-x:hidden}.main-content{margin-left:0;padding:calc(12px + var(--sat)) 12px calc(70px + var(--sab));overflow-x:hidden}.discover-page{max-width:100%}.discover-header{margin-bottom:16px;flex-wrap:wrap;gap:8px}.discover-header h2{font-size:1.5rem}.discover-logo{display:flex!important}.discover-header-right{gap:8px}.xp-bar-widget{min-width:90px}.track-counter{padding:4px 10px;font-size:11px}.discover-search{flex-direction:row;gap:8px}.search-input{padding:10px 14px 10px 36px;font-size:14px}.search-btn{padding:10px 16px;font-size:13px;white-space:nowrap}.genre-filter-bar{gap:6px;margin-bottom:12px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}.genre-filter-bar::-webkit-scrollbar{display:none}.genre-filter-chip{padding:5px 12px;font-size:11px;flex-shrink:0}.discover-content{grid-template-columns:1fr;gap:12px;margin-bottom:16px}.now-playing-art{width:100%;aspect-ratio:1;object-fit:cover;max-height:none}.now-playing{overflow:hidden}.now-playing-meta{padding:6px 12px 8px}.audio-preview-embed{padding:6px}.audio-preview-embed iframe{height:80px!important;min-height:80px}.btn-quick-next{display:inline-block}.rating-widget{padding:16px;max-height:none}.rating-row{gap:6px}.rating-label{min-width:60px}.stars button{font-size:22px;padding:2px}.rating-desc-inline{display:none}.rating-actions{flex-direction:row;gap:8px}.rating-actions button{flex:1}.up-next{margin-bottom:20px}.dashboard-page{max-width:100%}.dashboard-page h2{font-size:1.5rem;margin-bottom:16px}.stats-grid{grid-template-columns:repeat(3,1fr);gap:8px}.stat-card{padding:12px 6px}.stat-value{font-size:1.3rem}.stat-label{font-size:10px}.dashboard-section{margin-bottom:20px}.dashboard-section h3{font-size:15px}.distribution-chart{gap:4px}.top-rated-item{padding:6px;gap:10px}.taste-bar-container{gap:6px}.taste-label{font-size:12px;min-width:80px}.ratings-page{max-width:100%}.ratings-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:16px}.ratings-header h2{font-size:1.5rem}.filter-tabs{width:100%}.filter-tab{flex:1;text-align:center;font-size:12px;padding:8px 6px}.rating-item-main{padding:10px 12px;gap:10px}.rating-item-name{font-size:13px}.rating-item-details{padding:0 12px 12px}.top10-add-btn{font-size:11px;padding:3px 6px}.top10-header{padding:12px 14px}.top10-item{padding:8px;gap:6px;cursor:default}.top10-rank{font-size:12px;min-width:22px}.top10-grip{display:none}.top10-arrows{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.top10-name{font-size:12px}.top10-artist{font-size:11px}.top10-art{width:36px!important;height:36px!important}.top10-remove{opacity:1;font-size:12px}.top10-score{font-size:12px}.history-page{max-width:100%}.history-header{flex-direction:column;align-items:flex-start;gap:8px}.achievements-page{max-width:100%}.achievements-header h2{font-size:1.5rem}.achievements-stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.ach-stat{padding:12px 4px;min-width:0;width:100%;box-sizing:border-box}.ach-stat-value{font-size:1.1rem}.ach-stat-label{font-size:8px;letter-spacing:.03em}.achievements-grid{grid-template-columns:repeat(2,1fr);gap:6px}.ach-card{padding:10px;gap:8px;flex-direction:column;align-items:flex-start;text-align:left}.ach-card-icon{font-size:22px}.ach-card-name{font-size:12px}.ach-card-desc{font-size:10px}.ach-card-check{position:absolute;top:6px;right:8px;font-size:14px;margin-left:0}.ach-card.unlocked,.ach-card.locked{position:relative}.achievements-xp-section{padding:14px 16px}.achievements-section-title{font-size:13px}.onboarding-card{padding:20px 16px;border-radius:20px}.onboarding-single{max-height:90vh}.onboarding-title{font-size:1.3rem}.onboarding-subtitle{font-size:13px;margin-bottom:12px}.onboarding-section{margin-bottom:16px}.onboarding-chips{gap:6px}.onboarding-chip{padding:6px 12px;font-size:12px}.settings-page{max-width:100%}.plans-grid{grid-template-columns:1fr}.achievement-toast{top:12px;right:12px;left:12px}.achievement-badge-row{padding:10px 14px}.achievement-icon{font-size:26px}.achievement-name{font-size:14px}.preview-embed-popup{position:fixed;top:auto;bottom:80px;left:12px;right:12px;z-index:200}.preview-embed-popup iframe{width:100%}}.confetti-canvas{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;pointer-events:none}.discover-header-right{display:flex;align-items:center;gap:16px}.xp-bar-widget{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:120px}.xp-level-row{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.xp-level{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.xp-streak{font-size:12px;color:var(--accent-secondary)}.xp-bar-track{width:100%;height:4px;background:var(--bg-glass);border-radius:2px;overflow:hidden}.xp-bar-fill{height:100%;background:var(--gradient);border-radius:2px;transition:width .6s ease}.xp-label{font-size:10px;color:var(--text-tertiary)}.achievement-toast{position:fixed;top:24px;right:24px;z-index:10000;display:flex;flex-direction:column;gap:8px;animation:toast-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes toast-in{0%{opacity:0;transform:translate(40px) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}.achievement-badge-row{display:flex;align-items:center;gap:12px;background:var(--bg-secondary);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--accent);border-radius:16px;padding:14px 20px;box-shadow:0 8px 32px color-mix(in srgb,var(--accent) 25%,transparent)}.level-up-row{border-color:var(--accent-secondary);box-shadow:0 8px 32px color-mix(in srgb,var(--accent-secondary) 30%,transparent)}.achievement-icon{font-size:32px;flex-shrink:0}.achievement-text{display:flex;flex-direction:column}.achievement-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.level-up-row .achievement-label{color:var(--accent-secondary)}.achievement-name{font-size:16px;font-weight:700;color:var(--text-primary)}.achievement-desc{font-size:12px;color:var(--text-secondary)}.xp-toast{background:var(--bg-secondary);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:12px;padding:8px 16px;font-size:14px;font-weight:700;color:var(--accent-secondary);text-align:center;animation:toast-in .3s ease}.achievements-page{max-width:960px;animation:slideUp .4s ease-out}.achievements-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.achievements-header h2{font-size:2rem;font-weight:700}.achievements-stats-bar{display:flex;gap:24px;margin-bottom:28px;flex-wrap:wrap}.ach-stat{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:14px;padding:14px 20px;min-width:100px}.ach-stat-value{font-size:1.5rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.ach-stat-label{font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}.achievements-xp-section{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:16px;padding:20px 24px;margin-bottom:28px}.achievements-xp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.achievements-xp-level{font-size:1.1rem;font-weight:700;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.achievements-xp-amount{font-size:13px;color:var(--text-secondary)}.achievements-xp-track{width:100%;height:10px;background:var(--bg-glass-hover);border-radius:5px;overflow:hidden}.achievements-xp-fill{height:100%;background:var(--gradient);border-radius:5px;transition:width .8s ease}.achievements-section{margin-bottom:32px}.achievements-section-title{font-size:15px;font-weight:600;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:8px}.achievements-section-count{font-size:12px;color:var(--text-tertiary);background:var(--bg-glass);padding:2px 8px;border-radius:10px}.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}.ach-card{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:14px;transition:all .2s}.ach-card.unlocked{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:var(--gradient-subtle)}.ach-card.locked{opacity:.45}.ach-card-icon{font-size:28px;flex-shrink:0}.ach-card.locked .ach-card-icon{filter:grayscale(1)}.ach-card-info{display:flex;flex-direction:column;gap:1px}.ach-card-name{font-size:14px;font-weight:600;color:var(--text-primary)}.ach-card-desc{font-size:12px;color:var(--text-secondary)}.ach-card-date{font-size:10px;color:var(--text-tertiary);margin-top:2px}.ach-card-check{margin-left:auto;color:var(--accent);font-size:18px;flex-shrink:0}.beta-badge{display:inline-block;padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--gradient);border-radius:20px;line-height:1.6;flex-shrink:0;animation:betaPulse 3s ease-in-out infinite}@keyframes betaPulse{0%,to{opacity:1}50%{opacity:.75}}.sidebar-beta{margin-left:6px;font-size:9px;padding:1px 6px;vertical-align:middle}.landing-page{min-height:100vh;background:var(--bg-primary);overflow-x:hidden;position:relative;z-index:0;isolation:isolate}.landing-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(120px)}.landing-orb-1{width:600px;height:600px;top:-100px;right:-100px;background:#f472b62e;animation:orbDrift1 12s ease-in-out infinite alternate}.landing-orb-2{width:500px;height:500px;bottom:10%;left:-80px;background:#fb923c24;animation:orbDrift2 15s ease-in-out infinite alternate}.landing-orb-3{width:400px;height:400px;top:50%;left:40%;background:#a855f71f;animation:orbDrift3 18s ease-in-out infinite alternate}@keyframes orbDrift1{0%{transform:translate(0) scale(1)}to{transform:translate(-80px,60px) scale(1.15)}}@keyframes orbDrift2{0%{transform:translate(0) scale(1)}to{transform:translate(60px,-40px) scale(1.1)}}@keyframes orbDrift3{0%{transform:translate(0) scale(1)}to{transform:translate(-40px,30px) scale(.9)}}.landing-notes-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;overflow:hidden}.landing-floating-note{position:absolute;bottom:-40px;font-size:24px;opacity:0;animation:floatUp linear infinite}@keyframes floatUp{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.2}90%{opacity:.2}to{transform:translateY(-110vh) rotate(360deg);opacity:0}}.landing-nav{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);background:#0c0c14bf;border-bottom:1px solid rgba(255,255,255,.06)}.landing-nav-right{display:flex;align-items:center;gap:12px}.landing-nav-btn{padding:10px 24px;border-radius:999px;border:2px solid transparent;background:linear-gradient(var(--bg-primary),var(--bg-primary)) padding-box,var(--gradient) border-box;color:var(--text-primary);font-weight:600;font-size:14px;cursor:pointer;transition:all .3s}.landing-nav-btn:hover{background:linear-gradient(#1e1e32,#1e1e32) padding-box,var(--gradient) border-box;transform:translateY(-1px);box-shadow:0 4px 16px #f472b633}.landing-hero{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:60px;max-width:1200px;margin:0 auto;padding:80px 32px 60px;min-height:80vh}.landing-hero-content{flex:1;max-width:560px}.hero-beta{margin-bottom:20px;font-size:11px;padding:4px 14px}.landing-headline{font-family:Righteous,cursive;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.15;color:var(--text-primary);margin-bottom:20px}.landing-headline-accent{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing-subheadline{font-size:1.1rem;line-height:1.7;color:var(--text-secondary);margin-bottom:36px}.landing-cta-row{display:flex;gap:14px;flex-wrap:wrap}.landing-cta-primary{padding:14px 36px;border-radius:999px;border:none;background:var(--gradient);color:#fff;font-weight:700;font-size:16px;cursor:pointer;transition:all .3s;box-shadow:0 4px 24px #f472b659}.landing-cta-primary:hover{transform:translateY(-2px);box-shadow:0 8px 36px #f472b680;filter:brightness(1.1)}.landing-cta-secondary{padding:14px 30px;border-radius:999px;border:2px solid transparent;background:linear-gradient(var(--bg-primary),var(--bg-primary)) padding-box,var(--gradient) border-box;color:var(--text-primary);font-weight:600;font-size:15px;cursor:pointer;transition:all .3s}.landing-cta-secondary:hover{background:linear-gradient(#1e1e32,#1e1e32) padding-box,var(--gradient) border-box;transform:translateY(-1px);box-shadow:0 4px 16px #f472b626}.landing-hero-visual{flex:0 0 360px}.landing-mockup{width:320px;height:420px;border-radius:24px;border:2px solid transparent;background:linear-gradient(var(--bg-secondary),var(--bg-secondary)) padding-box,var(--gradient) border-box;box-shadow:0 20px 60px #00000080,0 0 80px #f472b626;overflow:hidden;position:relative;animation:mockupFloat 5s ease-in-out infinite}@keyframes mockupFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.landing-mockup-screen{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:24px}.landing-visualizer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.landing-mockup-overlay{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px}.landing-mockup-art{width:160px;height:160px;border-radius:16px;overflow:hidden;border:2px solid transparent;background:linear-gradient(#141423,#141423) padding-box,var(--gradient) border-box;animation:artPulse 4s ease-in-out infinite}.landing-mockup-logo{width:100%;height:100%;object-fit:cover;border-radius:14px}@keyframes artPulse{0%,to{box-shadow:0 0 20px #f472b640}50%{box-shadow:0 0 40px #f472b680}}.landing-mockup-meta{display:flex;flex-direction:column;align-items:center;gap:8px}.landing-mockup-title-bar{width:140px;height:12px;border-radius:6px;background:#ffffff40}.landing-mockup-artist-bar{width:90px;height:8px;border-radius:4px;background:#ffffff1f}.landing-mockup-stars{display:flex;gap:6px}.landing-star{font-size:22px;color:var(--star-color);animation:starPop .5s ease forwards;opacity:0;transform:scale(0)}@keyframes starPop{0%{opacity:0;transform:scale(0) rotate(-20deg)}60%{transform:scale(1.3) rotate(5deg)}to{opacity:1;transform:scale(1) rotate(0)}}.landing-features{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:80px 32px}.landing-section-title{font-family:Righteous,cursive;font-size:clamp(1.8rem,3.5vw,2.6rem);text-align:center;margin-bottom:12px;color:var(--text-primary)}.landing-section-subtitle{text-align:center;color:var(--text-secondary);font-size:1.05rem;margin-bottom:48px}.landing-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}.landing-feature-card{border-radius:var(--radius);padding:28px 24px;text-align:center;transition:all .4s;opacity:0;transform:translateY(30px);border:2px solid transparent;background:linear-gradient(#12121ee6,#12121ee6) padding-box,linear-gradient(135deg,#f472b666,#fb923c66) border-box}.landing-features.visible .landing-feature-card{animation:fadeSlideUp .6s ease forwards}@keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}}.landing-feature-card:hover{transform:translateY(-6px);background:linear-gradient(#19192df2,#19192df2) padding-box,var(--gradient) border-box;box-shadow:0 10px 30px #f472b626}.landing-feature-icon{font-size:36px;display:block;margin-bottom:16px}.landing-feature-card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}.landing-feature-card p{font-size:.9rem;line-height:1.6;color:var(--text-secondary)}.landing-how{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:60px 32px 80px}.landing-steps{display:flex;gap:32px;justify-content:center;flex-wrap:wrap}.landing-step{flex:1;min-width:200px;max-width:260px;text-align:center;opacity:0;transform:translateY(30px);padding:24px 16px;border-radius:var(--radius);border:2px solid transparent;background:linear-gradient(#12121ed9,#12121ed9) padding-box,linear-gradient(135deg,#f472b64d,#fb923c4d) border-box;transition:all .3s}.landing-step:hover{background:linear-gradient(#19192df2,#19192df2) padding-box,var(--gradient) border-box;transform:translateY(-4px);box-shadow:0 8px 24px #f472b61f}.landing-how.visible .landing-step{animation:fadeSlideUp .6s ease forwards}.landing-step-num{width:52px;height:52px;border-radius:50%;background:var(--gradient);display:flex;align-items:center;justify-content:center;font-family:Righteous,cursive;font-size:1.4rem;color:#fff;margin:0 auto 16px;box-shadow:0 4px 20px #f472b659}.landing-step h3{font-size:1.15rem;font-weight:700;margin-bottom:8px;color:var(--text-primary)}.landing-step p{font-size:.9rem;line-height:1.6;color:var(--text-secondary)}.landing-bottom-cta{position:relative;z-index:1;text-align:center;padding:80px 32px;border-radius:var(--radius);border:2px solid transparent;background:linear-gradient(#12121ee6,#12121ee6) padding-box,var(--gradient) border-box;max-width:900px;margin:40px auto 0}.landing-bottom-cta h2{font-family:Righteous,cursive;font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:12px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.landing-bottom-cta p{color:var(--text-secondary);font-size:1.05rem;margin-bottom:28px}.landing-bottom-cta.visible h2,.landing-bottom-cta.visible p,.landing-bottom-cta.visible .landing-cta-primary{animation:fadeSlideUp .6s ease forwards}.landing-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:24px 32px;margin-top:40px;border-top:1px solid rgba(255,255,255,.06)}.landing-footer-links{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text-secondary)}.landing-footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .2s}.landing-footer-links a:hover{color:var(--text-primary)}.landing-footer-company{color:var(--text-secondary);text-decoration:none;transition:color .2s}.landing-footer-company:hover{color:var(--text-primary)}.landing-footer-sep{opacity:.3}@media (max-width: 768px){.landing-hero{flex-direction:column;text-align:center;padding:50px 20px 40px;gap:40px}.landing-hero-visual{flex:none}.landing-mockup{width:260px;height:340px;margin:0 auto}.landing-mockup-art{width:120px;height:120px}.landing-cta-row{justify-content:center}.landing-nav{padding:12px 16px}.landing-features,.landing-how{padding:50px 16px}.landing-footer{flex-direction:column;gap:12px;text-align:center}.landing-subheadline br{display:none}.landing-bottom-cta{margin:40px 16px 0;padding:50px 20px}.landing-orb-1{width:300px;height:300px}.landing-orb-2{width:250px;height:250px}.landing-orb-3{width:200px;height:200px}}} .dj-sessions-page{padding:24px;max-width:1200px;margin:0 auto}.dj-sessions-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:16px;flex-wrap:wrap}.dj-sessions-title{font-size:28px;font-weight:700;color:var(--text-primary);margin:0}.dj-sessions-subtitle{color:var(--text-secondary);margin:4px 0 0;font-size:14px}.create-session-trigger{background:var(--gradient);color:#fff;border:none;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.create-session-trigger:hover{transform:translateY(-2px);box-shadow:0 4px 20px #f472b64d}.dj-invite-section{margin-bottom:28px}.dj-invite-input-wrap{display:flex;gap:8px;max-width:360px}.dj-invite-input{flex:1;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:10px;padding:10px 14px;color:var(--text-primary);font-size:14px;font-family:monospace;letter-spacing:2px;text-transform:uppercase;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}.dj-invite-input::placeholder{letter-spacing:normal;text-transform:none;font-family:inherit;color:var(--text-tertiary, rgba(255,255,255,.3))}.dj-invite-input:focus{outline:none;border-color:var(--accent)}.dj-invite-btn{background:var(--bg-glass-hover);border:1px solid var(--border-glass);border-radius:10px;padding:10px 20px;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.dj-invite-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent)}.dj-invite-btn:disabled{opacity:.4;cursor:default}.dj-invite-error{color:#f87171;font-size:13px;margin-top:6px}.dj-sessions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.session-card{background:var(--bg-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:16px;padding:20px;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;gap:12px}.session-card:hover{background:var(--bg-glass-hover);border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 30px #0003}.session-card-header{display:flex;justify-content:space-between;align-items:center}.session-status-badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:3px 8px;border-radius:6px}.session-status-live{background:#ef444433;color:#f87171;animation:live-pulse 2s ease-in-out infinite}.session-status-lobby{background:#fbbf2433;color:#fbbf24}@keyframes live-pulse{0%,to{opacity:1}50%{opacity:.6}}.session-participant-count{font-size:13px;color:var(--text-secondary)}.session-card-name{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.session-card-host{display:flex;align-items:center;gap:8px}.session-host-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}.session-host-name{font-size:13px;color:var(--text-secondary)}.session-card-now-playing{display:flex;align-items:center;gap:10px;background:#ffffff08;padding:8px 10px;border-radius:8px}.session-card-track-art{width:36px;height:36px;border-radius:4px;object-fit:cover}.session-card-track-info{display:flex;flex-direction:column;min-width:0}.session-card-track-name{font-size:13px;font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-card-track-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.session-card-join-btn{background:var(--gradient);color:#fff;border:none;padding:10px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:auto}.session-card-join-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #f472b64d}.dj-sessions-loading,.dj-sessions-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;color:var(--text-secondary)}.dj-loading-pulse{width:40px;height:40px;border-radius:50%;background:var(--gradient);animation:dj-pulse 1.2s ease-in-out infinite;margin-bottom:16px}@keyframes dj-pulse{0%,to{transform:scale(.8);opacity:.4}50%{transform:scale(1.1);opacity:1}}.dj-empty-icon{font-size:48px;margin-bottom:12px}.dj-sessions-empty h3{color:var(--text-primary);margin:0 0 8px}.dj-sessions-empty p{margin:0 0 20px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.create-session-modal{background:var(--bg-secondary, rgba(18, 18, 30, .95));border:1px solid var(--border-glass);border-radius:20px;padding:32px;width:100%;max-width:440px;position:relative;-webkit-backdrop-filter:var(--blur-strong, blur(40px));backdrop-filter:var(--blur-strong, blur(40px))}.modal-close-btn{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px 8px;line-height:1}.modal-close-btn:hover{color:var(--text-primary)}.create-session-title{font-size:22px;font-weight:700;color:var(--text-primary);margin:0 0 24px}.create-session-field{margin-bottom:20px}.create-session-field label{display:block;font-size:13px;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.create-session-field input{width:100%;background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-size:15px;box-sizing:border-box}.create-session-field input:focus{outline:none;border-color:var(--accent)}.visibility-toggle{display:flex;gap:0;border-radius:10px;overflow:hidden;border:1px solid var(--border-glass);margin-bottom:8px}.visibility-btn{flex:1;background:var(--bg-glass);border:none;padding:10px;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.visibility-btn.active{background:var(--accent);color:#fff}.visibility-hint{font-size:12px;color:var(--text-tertiary, rgba(255,255,255,.35))}.create-session-limits{display:flex;gap:12px;margin-bottom:24px;padding:14px;background:#ffffff08;border-radius:10px}.limit-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.limit-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.limit-value{font-size:15px;font-weight:600;color:var(--text-primary)}.limit-plan{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.create-session-btn{width:100%;background:var(--gradient);color:#fff;border:none;padding:14px;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.create-session-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 20px #f472b64d}.create-session-btn:disabled{opacity:.5;cursor:default}.dj-room{display:flex;flex-direction:column;height:calc(100vh - 40px);padding:16px;gap:12px;overflow:hidden}.dj-room-loading,.dj-room-error,.dj-room-ended{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;color:var(--text-secondary);padding:20px}.dj-room-error h2,.dj-room-ended h2{color:var(--text-primary);margin:0 0 8px}.dj-ended-icon{font-size:48px;margin-bottom:12px}.dj-back-btn{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:10px;padding:10px 24px;color:var(--text-primary);font-size:14px;cursor:pointer;margin-top:16px;transition:all .2s}.dj-back-btn:hover{background:var(--bg-glass-hover);border-color:var(--accent)}.dj-room-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:14px;flex-shrink:0}.dj-room-info{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dj-room-name{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.dj-invite-code-display{font-size:12px;font-family:monospace;letter-spacing:2px;color:var(--accent);background:#f472b61a;padding:4px 10px;border-radius:6px;cursor:default}.dj-session-timer{font-size:12px;font-family:monospace;font-variant-numeric:tabular-nums;color:var(--text-tertiary, rgba(255,255,255,.35));background:#ffffff0a;padding:4px 10px;border-radius:6px}.dj-room-actions{display:flex;gap:8px}.dj-start-btn{background:var(--gradient);color:#fff;border:none;padding:8px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.dj-start-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px #f472b64d}.dj-end-btn{background:#ef444426;color:#f87171;border:1px solid rgba(239,68,68,.3);padding:8px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.dj-end-btn:hover{background:#ef444440}.dj-leave-btn{background:var(--bg-glass);border:1px solid var(--border-glass);padding:8px 16px;border-radius:10px;color:var(--text-secondary);font-size:14px;cursor:pointer;transition:all .2s}.dj-leave-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.dj-room-body{display:flex;gap:12px;flex:1;min-height:0}.dj-room-main{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.dj-room-stage-placeholder{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:16px;padding:40px}.dj-stage-message{color:var(--text-secondary);font-size:15px}.dj-room-sidebar{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}.dj-participants-panel{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:14px;padding:16px;flex:1;overflow-y:auto}.dj-participants-panel h3{font-size:14px;font-weight:600;color:var(--text-secondary);margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.dj-participants-list{display:flex;flex-direction:column;gap:8px}.dj-participant-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .15s}.dj-participant-item:hover{background:#ffffff08}.dj-participant-name{font-size:14px;color:var(--text-primary);display:flex;align-items:center;gap:6px}.dj-host-badge{font-size:10px;font-weight:700;text-transform:uppercase;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:.5px}.club-room{display:flex;gap:12px;flex:1;min-height:0}.club-room-main{flex:1;min-width:280px;max-width:55%;display:flex;flex-direction:column}.club-stage{flex:1;position:relative;background:var(--bg-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}.club-stage-glow{position:absolute;top:-40%;left:50%;transform:translate(-50%);width:80%;height:60%;background:radial-gradient(ellipse,var(--accent, #f472b6) 0%,transparent 70%);opacity:.07;pointer-events:none;z-index:0;animation:club-glow-pulse 4s ease-in-out infinite}@keyframes club-glow-pulse{0%,to{opacity:.07;transform:translate(-50%) scale(1)}50%{opacity:.12;transform:translate(-50%) scale(1.05)}}.club-now-playing{position:relative;z-index:1;padding:16px 20px 12px;display:flex;flex-direction:column;gap:10px}.club-now-playing-header{display:flex;align-items:center;justify-content:space-between}.club-np-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent, #f472b6)}.club-np-added{font-size:11px;color:var(--text-tertiary, rgba(255,255,255,.35))}.club-np-track{display:flex;align-items:center;gap:14px;padding:4px 0}.club-np-art-wrap{position:relative;flex-shrink:0}.club-np-art{width:56px;height:56px;border-radius:8px;object-fit:cover;display:block;box-shadow:0 4px 16px #0006}.club-np-art-placeholder{display:flex;align-items:center;justify-content:center;background:#ffffff0d;font-size:24px}.club-np-art-pulse{position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:10px;border:2px solid var(--accent, #f472b6);opacity:.5;animation:np-pulse 2s ease-in-out infinite;pointer-events:none}@keyframes np-pulse{0%,to{opacity:.3;transform:scale(1)}50%{opacity:.6;transform:scale(1.04)}}.club-np-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.club-np-name{font-size:16px;font-weight:600;color:var(--text-primary, #fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.club-np-artist{font-size:13px;color:var(--text-secondary, rgba(255,255,255,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.club-np-controls{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.club-np-play-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--accent, #f472b6);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;box-shadow:0 2px 12px #f472b659}.club-np-play-btn:hover{transform:scale(1.1);box-shadow:0 4px 20px #f472b680}.club-np-play-btn:active{transform:scale(.95)}.club-np-skip-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text-secondary, rgba(255,255,255,.6));font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.club-np-skip-btn:hover{background:#ffffff1f;color:#fff;border-color:#ffffff40}.club-np-progress{display:flex;flex-direction:column;gap:4px}.club-np-bar{position:relative;width:100%;height:4px;background:#ffffff14;border-radius:2px;overflow:visible}.club-np-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent, #f472b6),var(--accent-secondary, #c084fc));border-radius:2px;transition:width .5s linear}.club-np-bar-glow{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--accent, #f472b6);box-shadow:0 0 8px var(--accent, #f472b6);transform:translate(-50%);transition:left .5s linear;pointer-events:none}.club-np-times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-tertiary, rgba(255,255,255,.35));font-variant-numeric:tabular-nums}.club-stage-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px 16px;text-align:center;color:var(--text-secondary);z-index:1}.club-stage-icon{font-size:40px;margin-bottom:8px}.club-stage-empty p{margin:0 0 4px;font-size:15px}.club-stage-hint{font-size:13px;color:var(--text-tertiary, rgba(255,255,255,.3))}.club-participants-mini{display:flex;align-items:center;gap:8px}.club-participants-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px #22c55e80;animation:participant-pulse 2s ease-in-out infinite}@keyframes participant-pulse{0%,to{opacity:1}50%{opacity:.5}}.club-dance-floor-placeholder{flex:1;position:relative;min-height:200px;z-index:1}.club-floor-grid{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,var(--border-glass) 0px,var(--border-glass) 1px,transparent 1px,transparent 80px),repeating-linear-gradient(0deg,var(--border-glass) 0px,var(--border-glass) 1px,transparent 1px,transparent 80px);opacity:.15;pointer-events:none}.club-avatar-placeholder{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-50%);z-index:2}.club-avatar-blob{width:40px;height:40px;border-radius:50%;background:hsl(var(--avatar-hue, 280),70%,60%);box-shadow:0 0 16px hsla(var(--avatar-hue, 280),70%,60%,.4);animation:avatar-bounce-placeholder 1.5s ease-in-out infinite;animation-delay:var(--avatar-delay, 0s)}.club-avatar-host .club-avatar-blob{width:52px;height:52px;box-shadow:0 0 24px hsla(var(--avatar-hue, 280),70%,60%,.5)}.club-avatar-name{font-size:11px;color:var(--text-secondary);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;text-align:center}@keyframes avatar-bounce-placeholder{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.03)}}.club-room-side{flex:1;min-width:320px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.club-room-side::-webkit-scrollbar{display:none}.club-room-side .club-participants-mini{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:8px}.club-participants-mini h4{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary)}.session-chat{flex:1;display:flex;flex-direction:column;background:var(--bg-glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:14px;overflow:hidden;min-height:0}.session-chat-header{padding:12px 14px 8px;border-bottom:1px solid var(--border-glass);flex-shrink:0}.session-chat-header h3{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.session-chat-messages{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:6px;min-height:0}.session-chat-empty{color:var(--text-tertiary, rgba(255,255,255,.3));font-size:13px;text-align:center;margin-top:20px}.chat-message{font-size:13px;line-height:1.4;word-break:break-word}.chat-author{font-weight:600;color:var(--accent);margin-right:6px}.chat-text{color:var(--text-primary)}.chat-system{text-align:center;padding:4px 0}.chat-system-text{font-size:12px;color:var(--text-tertiary, rgba(255,255,255,.35));font-style:italic}.session-chat-input-wrap{display:flex;gap:6px;padding:10px;border-top:1px solid var(--border-glass);flex-shrink:0}.session-chat-input{flex:1;background:#ffffff0a;border:1px solid var(--border-glass);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px}.session-chat-input:focus{outline:none;border-color:var(--accent)}.session-chat-input::placeholder{color:var(--text-tertiary, rgba(255,255,255,.3))}.session-chat-send{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}.session-chat-send:hover:not(:disabled){opacity:.85}.session-chat-send:disabled{opacity:.4;cursor:default}.dj-avatar{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}.dj-avatar-svg{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--avatar-accent, #f472b6) 40%,transparent));transition:transform .3s}.dj-avatar-host .dj-avatar-svg{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--avatar-accent, #f472b6) 50%,transparent))}.avatar-dancing .dj-avatar-svg{animation:avatar-dance 1.4s ease-in-out infinite;animation-delay:var(--avatar-delay, 0s)}.avatar-idle .dj-avatar-svg{animation:avatar-sway 3s ease-in-out infinite;animation-delay:var(--avatar-delay, 0s)}@keyframes avatar-dance{0%,to{transform:translateY(0) scaleY(1) rotate(0)}25%{transform:translateY(-6px) scaleY(.96) rotate(-2deg)}50%{transform:translateY(-2px) scaleY(1.02) rotate(0)}75%{transform:translateY(-8px) scaleY(.94) rotate(2deg)}}@keyframes avatar-sway{0%,to{transform:rotate(0) translateY(0)}33%{transform:rotate(-1.5deg) translateY(-1px)}66%{transform:rotate(1.5deg) translateY(-1px)}}.dj-avatar-label{font-size:11px;color:var(--text-secondary);white-space:nowrap;max-width:80px;overflow:hidden;text-overflow:ellipsis;text-align:center}.dj-avatar-crown-badge{position:absolute;top:-6px;right:-6px;font-size:9px;font-weight:700;background:var(--gradient);color:#fff;padding:2px 5px;border-radius:4px;letter-spacing:.5px}.dance-floor{flex:1;position:relative;min-height:120px;z-index:1;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 0}.dance-floor-grid{position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(90deg,var(--border-glass) 0px,var(--border-glass) 1px,transparent 1px,transparent 80px),repeating-linear-gradient(0deg,var(--border-glass) 0px,var(--border-glass) 1px,transparent 1px,transparent 80px);opacity:.08;pointer-events:none}.dance-floor-spotlight{position:absolute;top:0;left:50%;transform:translate(-50%);width:50%;height:50%;background:radial-gradient(ellipse,var(--accent, #f472b6) 0%,transparent 70%);opacity:.06;pointer-events:none}.dance-floor-stage{display:flex;justify-content:center;padding:8px 0;position:relative;z-index:2}.dance-floor-crowd{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 20px;padding:8px 24px 12px;position:relative;z-index:2}.dance-floor-spot{transform:translate(var(--spot-offset-x, 0),var(--spot-offset-y, 0))}.dance-floor-empty-hint{z-index:2;text-align:center}.dance-floor-empty-hint p{color:var(--text-tertiary, rgba(255,255,255,.25));font-size:13px;white-space:nowrap}.club-viz{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}.club-viz-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.club-viz-css-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.club-viz-ambient{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 80%,var(--accent, #f472b6) 0%,transparent 50%),radial-gradient(ellipse at 80% 80%,var(--accent-secondary, #c084fc) 0%,transparent 50%);opacity:0;transition:opacity 2s ease}.club-viz-ambient.active{opacity:.06;animation:viz-ambient-pulse 4s ease-in-out infinite}@keyframes viz-ambient-pulse{0%,to{opacity:.04}50%{opacity:.08}}.avatar-customize-trigger{margin-left:auto;background:var(--bg-glass-hover);border:1px solid var(--border-glass);border-radius:8px;padding:5px 12px;color:var(--text-secondary);font-size:11px;cursor:pointer;transition:all .2s;white-space:nowrap}.avatar-customize-trigger:hover{color:var(--text-primary);border-color:var(--accent);background:#f472b61a}.avatar-customizer{background:var(--bg-secondary, rgba(18, 18, 30, .95));border:1px solid var(--border-glass);border-radius:20px;padding:28px;width:100%;max-width:460px;max-height:85vh;overflow-y:auto;position:relative;-webkit-backdrop-filter:var(--blur-strong, blur(40px));backdrop-filter:var(--blur-strong, blur(40px))}.avatar-customizer-title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 16px}.avatar-customizer-preview{display:flex;justify-content:center;padding:16px 0;margin-bottom:16px;background:#ffffff05;border-radius:12px}.avatar-customizer-section{margin-bottom:18px}.avatar-customizer-section label{display:block;font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.avatar-option-row{display:flex;gap:8px;flex-wrap:wrap}.avatar-shape-btn{background:var(--bg-glass);border:2px solid var(--border-glass);border-radius:10px;padding:6px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}.avatar-shape-btn.active{border-color:var(--accent);background:#f472b61a}.avatar-shape-btn:hover{border-color:var(--accent)}.avatar-color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.avatar-color-btn{width:100%;aspect-ratio:1;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:all .15s}.avatar-color-btn.active{border-color:#fff;transform:scale(1.15);box-shadow:0 0 8px #ffffff4d}.avatar-color-btn:hover{transform:scale(1.1)}.avatar-expr-btn,.avatar-acc-btn{background:var(--bg-glass);border:1px solid var(--border-glass);border-radius:8px;padding:6px 12px;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .15s;position:relative}.avatar-expr-btn.active,.avatar-acc-btn.active{border-color:var(--accent);color:var(--text-primary);background:#f472b61a}.avatar-expr-btn:hover,.avatar-acc-btn:hover:not(:disabled){border-color:var(--accent)}.avatar-acc-btn.locked{opacity:.45;cursor:not-allowed}.avatar-lock-icon{font-size:10px;margin-left:4px}.avatar-save-btn{width:100%;background:var(--gradient);color:#fff;border:none;padding:12px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;margin-top:8px}.avatar-save-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #f472b64d}.avatar-save-btn:disabled{opacity:.5;cursor:default}.now-playing-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;background:#0000004d;border-bottom:1px solid var(--border-glass);z-index:3;flex-shrink:0;animation:now-playing-glow 3s ease-in-out infinite}@keyframes now-playing-glow{0%,to{box-shadow:inset 0 -1px 20px #f472b60d}50%{box-shadow:inset 0 -1px 30px #f472b61a}}.now-playing-track{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}.dj-now-playing .now-playing-art{width:44px;height:44px;border-radius:6px;object-fit:cover;box-shadow:0 2px 8px #0000004d}.now-playing-info{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:180px}.now-playing-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing-progress-wrap{flex:1;display:flex;align-items:center;gap:8px;min-width:0}.now-playing-time{font-size:11px;color:var(--text-tertiary, rgba(255,255,255,.35));font-variant-numeric:tabular-nums;min-width:32px;text-align:center}.now-playing-progress-bar{flex:1;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.now-playing-progress-fill{height:100%;background:var(--gradient);border-radius:2px;transition:width 1s linear}.now-playing-controls{flex-shrink:0}.now-playing-skip{background:none;border:none;font-size:18px;cursor:pointer;padding:4px 8px;opacity:.6;transition:opacity .15s}.now-playing-skip:hover{opacity:1}.club-mini-sidebar{display:flex;flex-direction:column;gap:4px;padding:8px;margin:6px 0;background:var(--card-bg, rgba(30, 30, 30, .95));border-radius:10px;border:1px solid var(--border, rgba(255,255,255,.08));overflow:hidden}.club-mini-sidebar .club-mini-embed{width:100%;border-radius:6px;overflow:hidden;max-height:80px}.club-mini-sidebar .club-mini-embed iframe{border-radius:6px;display:block}.club-mini-sidebar.club-mini-compact{padding:6px;gap:3px;margin:4px 0}.club-mini-sidebar.club-mini-compact .club-mini-session{font-size:8px;letter-spacing:.6px}.club-mini-sidebar.club-mini-hidden{position:fixed;bottom:-200px;left:0;width:300px;height:100px;opacity:.01;pointer-events:none}.club-mini-sidebar.club-free-bar{border-color:var(--accent, rgba(244, 114, 182, .25))}.club-mini-info{display:flex;align-items:center;gap:6px;cursor:pointer;min-width:0;flex-shrink:1}.club-mini-info:hover .club-mini-session{color:var(--accent, #f472b6)}.club-mini-art{width:28px;height:28px;border-radius:4px;object-fit:cover;flex-shrink:0}.club-mini-details{display:flex;flex-direction:column;gap:1px;min-width:0}.club-mini-session{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--accent, #f472b6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}.club-mini-track{font-size:11px;color:var(--text-secondary, rgba(255,255,255,.6));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}.club-spotify-embed,.club-embed-container iframe{border-radius:8px;display:block}.club-mini-leave{flex-shrink:0;padding:4px 10px;border:1px solid rgba(255,100,100,.3);border-radius:5px;background:#ff64641a;color:#ff6b6b;font-size:10px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;text-align:center}.club-mini-leave:hover{background:#ff646440;border-color:#ff646480}.club-free-bar{gap:10px}.club-free-bar .club-mini-paused{color:var(--text-tertiary, rgba(255,255,255,.4));font-style:italic}.club-mini-rejoin{flex-shrink:0;padding:6px 14px;border:1px solid var(--accent, #f472b6);border-radius:6px;background:#f472b626;color:var(--accent, #f472b6);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.club-mini-rejoin:hover{background:#f472b64d}.club-mini-upgrade{flex-shrink:0;padding:6px 14px;border:1px solid rgba(255,200,50,.3);border-radius:6px;background:#ffc8321a;color:#ffc832;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}.club-mini-upgrade:hover{background:#ffc83240}.session-audio-engine{position:relative;width:100%;min-height:80px}.club-spotify-embed,.club-embed-container{border-radius:12px;overflow:hidden}.club-spotify-embed,.club-embed-container iframe{border-radius:12px;display:block}.club-spotify-iframe{border:none;border-radius:12px;display:block}.club-progress{display:flex;align-items:center;gap:10px;padding:10px 4px 4px}.club-progress-time{font-size:11px;font-weight:500;color:var(--text-secondary);min-width:32px;text-align:center;font-variant-numeric:tabular-nums}.club-progress-bar{flex:1;height:4px;background:#ffffff14;border-radius:2px;overflow:hidden;position:relative}.club-progress-fill{height:100%;border-radius:2px;background:var(--gradient, var(--accent, #f472b6));transition:width 1s linear;position:relative}.club-progress-fill:after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--accent, #f472b6);box-shadow:0 0 6px var(--accent, #f472b6)}.audio-engine-searching,.audio-engine-status{text-align:center;padding:6px 12px;color:var(--text-secondary);font-size:11px}.yt-persistent-player{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg-secondary);border-top:1px solid var(--border-glass);min-height:56px}.yt-player-loading{flex:1;text-align:center;color:var(--text-secondary);font-size:13px}.yt-player-play{width:36px;height:36px;border-radius:50%;background:var(--gradient);border:none;color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.yt-player-info{display:flex;flex-direction:column;min-width:0;flex-shrink:0;max-width:200px}.yt-player-name{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yt-player-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yt-player-progress{flex:1;display:flex;flex-direction:column;gap:2px}.yt-player-bar{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.yt-player-bar-fill{height:100%;background:var(--gradient);border-radius:2px;transition:width .4s linear}.yt-player-times{display:flex;justify-content:space-between;font-size:10px;color:var(--text-tertiary)}.yt-player-badge{font-size:10px;color:var(--text-tertiary);background:#ff00001a;padding:2px 6px;border-radius:4px;flex-shrink:0}.yt-mini-loading{text-align:center;color:var(--text-secondary);font-size:12px;padding:8px 0}.yt-mini-controls{display:flex;align-items:center;gap:8px;padding:6px 0}.yt-mini-play{width:32px;height:32px;border-radius:50%;background:var(--gradient);border:none;color:#fff;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.yt-mini-play:hover{opacity:.85}.yt-mini-progress{flex:1;display:flex;flex-direction:column;gap:4px}.yt-mini-bar{height:6px;background:#ffffff1f;border-radius:3px;overflow:hidden}.yt-mini-bar-fill{height:100%;background:var(--gradient);border-radius:3px;transition:width .4s linear}.yt-mini-times{display:flex;justify-content:space-between;font-size:11px;color:var(--text-secondary)}.yt-audio-preview{position:relative}.yt-preview-loading{text-align:center;color:var(--text-secondary);font-size:13px;padding:20px 0}.yt-preview-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border-radius:8px;margin-top:8px}.yt-preview-play{width:40px;height:40px;border-radius:50%;background:var(--gradient);border:none;color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}.yt-preview-play:hover{opacity:.85}.yt-preview-progress{flex:1;display:flex;flex-direction:column;gap:4px}.yt-preview-bar{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.yt-preview-bar-fill{height:100%;background:var(--gradient);border-radius:2px;transition:width .4s linear}.yt-preview-times{display:flex;justify-content:space-between;font-size:11px;color:var(--text-tertiary)}.yt-preview-badge{font-size:10px;color:var(--text-tertiary);background:#ff00001a;padding:2px 6px;border-radius:4px;flex-shrink:0}.track-search{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:12px;overflow:hidden;flex-shrink:0}.track-search-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;transition:background .15s}.track-search-header:hover{background:#ffffff05}.track-search-header h3{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.track-search-toggle{color:var(--text-secondary);font-size:16px;font-weight:600}.track-search-body{padding:0 12px 12px}.track-search-input{width:100%;background:#ffffff0a;border:1px solid var(--border-glass);border-radius:8px;padding:8px 10px;color:var(--text-primary);font-size:13px;margin-bottom:8px;box-sizing:border-box}.track-search-input:focus{outline:none;border-color:var(--accent)}.track-search-input::placeholder{color:var(--text-tertiary, rgba(255,255,255,.3))}.track-search-results{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.track-search-status{color:var(--text-tertiary, rgba(255,255,255,.3));font-size:12px;text-align:center;padding:12px 0;margin:0}.track-search-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;transition:background .15s}.track-search-item:hover{background:#ffffff08}.track-search-art{width:40px;height:40px;border-radius:6px;object-fit:cover;flex-shrink:0}.track-search-info{flex:1;min-width:0;display:flex;flex-direction:column}.track-search-name{font-size:12px;font-weight:500;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.track-search-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-add-btn{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:16px;font-weight:600;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}.track-add-btn:hover:not(:disabled){transform:scale(1.1)}.track-add-btn:disabled{opacity:.5}.session-queue{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:12px;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column}.session-queue-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--border-glass);flex-shrink:0}.session-queue-header h3{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.queue-skip-btn{background:#fbbf2426;color:#fbbf24;border:1px solid rgba(251,191,36,.3);padding:4px 12px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}.queue-skip-btn:hover{background:#fbbf2440}.session-queue-list{flex:1;overflow-y:auto;padding:6px}.session-queue-empty{color:var(--text-tertiary, rgba(255,255,255,.3));font-size:12px;text-align:center;padding:20px 10px;margin:0}.queue-item{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;transition:background .15s;position:relative}.queue-item:hover{background:#ffffff08}.queue-item-playing{background:#f472b614;border:1px solid rgba(244,114,182,.2)}.queue-item-art{width:36px;height:36px;border-radius:4px;object-fit:cover;flex-shrink:0}.queue-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.queue-item-name{font-size:12px;font-weight:500;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.queue-item-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item-added{font-size:10px;color:var(--text-tertiary, rgba(255,255,255,.25))}.queue-item-votes{display:flex;flex-direction:column;gap:2px;flex-shrink:0}.vote-btn{display:flex;align-items:center;gap:3px;background:none;border:1px solid transparent;border-radius:4px;padding:2px 6px;cursor:pointer;transition:all .15s;color:var(--text-tertiary, rgba(255,255,255,.3));font-size:10px}.vote-btn:hover{background:#ffffff0d}.vote-up.vote-active{color:#34d399;border-color:#34d3994d}.vote-down.vote-active{color:#f87171;border-color:#f871714d}.vote-arrow{font-size:8px}.vote-count{font-weight:600;min-width:8px;text-align:center}.queue-remove-btn{background:none;border:none;color:var(--text-tertiary, rgba(255,255,255,.25));font-size:16px;cursor:pointer;padding:2px 4px;transition:color .15s;flex-shrink:0;line-height:1}.queue-remove-btn:hover{color:#f87171}.session-history{background:var(--bg-glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--border-glass);border-radius:12px;overflow:hidden;flex-shrink:0}.session-history-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;transition:background .15s}.session-history-header:hover{background:#ffffff05}.session-history-header h3{margin:0;font-size:13px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.session-history-toggle{color:var(--text-secondary);font-size:16px;font-weight:600}.session-history-list{max-height:240px;overflow-y:auto;padding:6px}.session-history-empty{text-align:center;color:var(--text-tertiary, rgba(255,255,255,.3));font-size:12px;padding:12px;margin:0}.history-item{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:8px;opacity:.6}.history-item:hover{opacity:.8;background:#ffffff08}.history-item-art{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}.history-item-info{flex:1;display:flex;flex-direction:column;min-width:0}.history-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item-artist{font-size:11px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.dj-sessions-page{padding:12px}.dj-sessions-header{flex-direction:column;gap:12px}.dj-sessions-grid{grid-template-columns:1fr}.dj-sessions-title{font-size:22px}.dj-room{padding:6px;height:calc(100vh - 70px - var(--sab))}.dj-room-header{flex-direction:column;gap:6px;align-items:stretch;padding:8px 10px}.dj-room-header h2{font-size:16px}.dj-room-actions{justify-content:flex-end;gap:6px}.dj-room-actions button{font-size:12px;padding:6px 10px}.club-room{flex-direction:column;gap:6px}.club-room-main{min-height:0}.club-room-side{width:100%;flex:none;max-height:240px}.club-now-playing{padding:10px 12px 8px}.club-now-playing-title{font-size:14px}.club-now-playing-artist{font-size:12px}.dance-floor{min-height:80px;padding:10px}.avatar-wrapper{transform:scale(.8)}.club-side-tabs button{font-size:12px;padding:8px 12px}.session-queue{padding:8px}.queue-item{padding:8px;gap:8px}.queue-item-name{font-size:13px}.queue-item-artist{font-size:11px}.session-chat,.chat-input-row{padding:8px}.chat-input{font-size:13px;padding:8px 10px}.track-search{padding:8px}.track-search input{font-size:14px;padding:10px 12px}.track-search-results{max-height:200px}.session-audio-engine{min-height:60px}.club-embed-container iframe{max-height:60px}.avatar-customizer{max-width:100%;padding:16px;border-radius:16px}.avatar-color-grid{grid-template-columns:repeat(8,1fr)}.avatar-customizer h3{font-size:18px}.yt-mini-controls{gap:10px;padding:8px 0}.yt-mini-play{width:36px;height:36px;font-size:15px}.yt-mini-bar{height:8px;border-radius:4px}.yt-mini-bar-fill{border-radius:4px}.yt-mini-times{font-size:12px}.yt-mini-progress{gap:5px}.now-playing>.now-playing-info{padding:8px 4px 4px}.now-playing .now-playing-title{font-size:16px}.now-playing .now-playing-artist{font-size:13px}.now-playing .now-playing-album{font-size:11px}.club-mini-player{display:none!important}.session-card{padding:14px}.session-card-name{font-size:15px}.session-card-host{font-size:12px}.settings-section{padding:16px}.settings-section h3{font-size:16px}.club-visualizer canvas{height:40px}}