*{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}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;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:#0c0c14}.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.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-footer{position:fixed;bottom:20px;color:#ffffff26;font-size:12px;z-index:1}.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}.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}.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}.discover-page{max-width:960px;animation:slideUp .4s ease-out}.discover-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.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}.search-input::placeholder{color:var(--text-tertiary)}.search-input:focus{outline:none;border-color:var(--accent)}.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-meta{padding:10px 16px 14px}.now-playing-album-label{font-size:12px;color:var(--text-tertiary);letter-spacing:.02em}.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}.rating-widget::-webkit-scrollbar{width:4px}.rating-widget::-webkit-scrollbar-track{background:transparent}.rating-widget::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}.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{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:6px;overflow:hidden}.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-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:0;padding:16px 0 4px;background:linear-gradient(to top,rgba(12,12,20,.9) 60%,transparent)}.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}.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}.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-footer{text-align:center;color:var(--text-tertiary);font-size:13px}.upgrade-footer p{margin-bottom:4px}.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)}.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:disabled{opacity:.3;cursor:not-allowed}.account-actions{padding-top:8px}.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:28px 20px 32px;border-radius:20px;width:94%}.login-logo-lockup{margin:-8px auto 20px}.login-features{gap:10px}.sidebar{width:100%;position:fixed;top:auto;bottom:0;left:0;right:0;height:56px;flex-direction:row;padding:4px 0;border-right:none;border-top:1px solid var(--border-glass);z-index:20;background:var(--bg-primary);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 2px;min-width:0;white-space:nowrap}.nav-icon{font-size:18px}html,body,#root{overflow-x:hidden}.main-content{margin-left:0;padding:12px 12px 70px;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-header-right{gap:8px}.xp-bar-widget{min-width:90px}.track-counter{padding:4px 10px;font-size:11px}.discover-search{flex-direction:column;gap:8px}.search-input{padding:10px 14px 10px 36px;font-size:14px}.search-btn{padding:10px 18px}.genre-filter-bar{gap:4px;margin-bottom:12px;flex-wrap:wrap;overflow:hidden}.genre-filter-chip{padding:4px 10px;font-size:11px}.discover-content{grid-template-columns:1fr;gap:12px;margin-bottom:16px}.now-playing-art{max-height:150px;object-fit:cover;aspect-ratio:auto;width:100%}.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}.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:column;gap:8px}.rating-actions button{width:100%}.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:28px 20px;border-radius:20px}.onboarding-single{max-height:80vh}.onboarding-title{font-size:1.3rem}.onboarding-chips{gap:6px}.onboarding-chip{padding:7px 14px;font-size:13px}.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}