*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0a0f;--surface:#13131a;--surface-raised:#1c1c26;--border:#ffffff12;--accent:#1db954;--accent-dim:#1db95426;--text-primary:#f0f0f5;--text-secondary:#8888a0;--text-dim:#44445a;--font-display:"Syne", sans-serif;--font-body:"DM Sans", sans-serif}body{color:var(--text-primary);font-family:var(--font-body);background-color:#080808;min-height:100vh;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(circle,#313131 0%,#0000 70%);width:600px;height:600px;position:fixed;top:-200px;left:100px}.app{z-index:1;max-width:860px;margin:0 auto;padding:72px 24px 80px;animation:.6s both fadeUp;position:relative}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.app-header{margin-bottom:48px}.app-header h1{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-primary);font-size:2.6rem;font-weight:800;line-height:1}.app-header h1 span{color:var(--accent)}.app-header p{color:var(--text-secondary);margin-top:8px;font-size:.95rem;font-weight:300}.card{background:#0b0b0b;border:2px solid #1c1c1c;border-radius:20px;margin-bottom:20px;padding:28px}.card-label{font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);margin-bottom:20px;font-size:.7rem;font-weight:700}.now-playing-inner{align-items:center;gap:25px;display:flex}.album-art-wrap{flex-shrink:0;position:relative}.album-art{object-fit:cover;z-index:1;border-radius:10px;width:150px;height:150px;display:block;position:relative}.album-glow{filter:blur(20px);opacity:.5;z-index:0;background-position:50%;background-size:cover;border-radius:18px;position:absolute;inset:-8px}.playing-badge{align-items:center;gap:6px;margin-bottom:10px;display:flex}.eq-bars{align-items:flex-end;gap:2px;height:14px;display:flex}.eq-bars span{background:var(--accent);border-radius:2px;width:3px;animation:.8s ease-in-out infinite alternate eq;display:block}.eq-bars span:first-child{height:6px;animation-delay:0s}.eq-bars span:nth-child(2){height:12px;animation-delay:.2s}.eq-bars span:nth-child(3){height:8px;animation-delay:.1s}.eq-bars span:nth-child(4){height:14px;animation-delay:.3s}@keyframes eq{0%{transform:scaleY(.4)}to{transform:scaleY(1)}}.playing-badge-text{letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-size:1rem;font-weight:500}.track-name{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text-primary);margin-bottom:4px;font-size:1.4rem;font-weight:700;line-height:1.2}.artist-name{color:var(--text-secondary);margin-bottom:2px;font-size:.95rem}.album-name{color:var(--text-dim);margin-bottom:20px;font-size:.8rem}.progress-wrap{margin-top:auto}.progress-bar{background:#ffffff14;border-radius:4px;width:100%;height:3px;margin-bottom:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:4px;height:100%;transition:width 1s linear}.progress-times{color:var(--text-dim);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.72rem;display:flex}.not-playing-state{color:var(--text-secondary);align-items:center;gap:16px;display:flex}.not-playing-icon{background:var(--surface-raised);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.4rem;display:flex}.not-playing-state p{font-size:.95rem}.not-playing-state small{color:var(--text-dim);margin-top:2px;font-size:.8rem;display:block}.tracks-list{flex-direction:column;gap:5px;display:flex}.track-row{border-radius:12px;align-items:center;gap:15px;padding:10px 12px;transition:background .3s;animation:.5s both fadeUp;display:flex}.track-row:hover{background:#1f1f1f}.track-rank{font-family:var(--font-display);color:var(--text-dim);text-align:center;flex-shrink:0;width:22px;font-size:.75rem;font-weight:700}.track-row:first-child .track-rank{color:var(--accent)}.track-row:nth-child(2) .track-rank{color:#a8a8b8}.track-row:nth-child(3) .track-rank{color:#7a5c3a}.track-art{object-fit:cover;border-color:#13131a;border-radius:5px;flex-shrink:0;width:50px;height:50px}.track-info{flex:1;min-width:0}.track-info .track-name{font-size:1rem;font-weight:500;font-family:var(--font-body);white-space:nowrap;text-overflow:ellipsis;margin-bottom:2px;overflow:hidden}.track-info .artist-name{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.skeleton-card{border:1px solid var(--border);background:#0b0b0b;border-radius:20px;margin-bottom:20px;padding:28px}.skeleton-row{align-items:center;gap:24px;display:flex}.skeleton-art{background:var(--surface-raised);border-radius:12px;flex-shrink:0;width:140px;height:140px}.skeleton-lines{flex-direction:column;flex:1;gap:10px;display:flex}.skeleton-line{background:var(--surface-raised);border-radius:6px;height:12px;animation:1.4s ease-in-out infinite shimmer}.skeleton-track-row{align-items:center;gap:14px;padding:10px 12px;display:flex}.skeleton-track-art{background:var(--surface-raised);border-radius:8px;flex-shrink:0;width:44px;height:44px;animation:1.4s ease-in-out infinite shimmer}.skeleton-track-line{background:var(--surface-raised);border-radius:6px;height:10px;animation:1.4s ease-in-out infinite shimmer}@keyframes shimmer{0%{opacity:.4}50%{opacity:.8}to{opacity:.4}}.toggle-wrap{align-items:center;gap:14px;margin-bottom:20px;display:flex}.toggle-label{font-family:var(--font-display);letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);flex-shrink:0;font-size:.7rem;font-weight:700}.toggle-group{background:#0b0b0b;border:2px solid #1c1c1c;border-radius:12px;gap:4px;padding:4px;display:flex}.toggle-btn{font-family:var(--font-body);color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:6px 16px;font-size:.82rem;font-weight:500;transition:background .2s,color .2s}.toggle-btn:hover{color:var(--text-primary)}.toggle-btn.active{color:var(--accent);background:#1c1c1c}.range-sections{transition:opacity .2s}.range-sections.range-loading{opacity:.4;pointer-events:none}.artists-list{flex-direction:column;gap:5px;display:flex}.artist-row{border-radius:12px;align-items:center;gap:15px;padding:10px 12px;transition:background .3s;animation:.5s both fadeUp;display:flex}.artist-row:hover{background:#1f1f1f}.artist-img{object-fit:cover;border-radius:50%;flex-shrink:0;width:50px;height:50px}.artist-img-placeholder{background:#1c1c1c;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.2rem;display:flex}.artist-info{flex:1;min-width:0}.artist-name-main{font-size:1rem;font-weight:500;font-family:var(--font-body);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:5px;overflow:hidden}.genre-tags{flex-wrap:wrap;gap:6px;display:flex}.genre-tag{color:var(--text-secondary);letter-spacing:.03em;white-space:nowrap;background:#1c1c1c;border-radius:20px;padding:2px 8px;font-size:.68rem;font-weight:500}.artist-row:first-child .track-rank{color:var(--accent)}.artist-row:nth-child(2) .track-rank{color:#a8a8b8}.artist-row:nth-child(3) .track-rank{color:#7a5c3a}.navbar{z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#080808d9;border-bottom:1px solid #1c1c1c;position:fixed;top:0;left:0;right:0}.navbar-inner{align-items:center;gap:8px;max-width:860px;height:52px;margin:0 auto;padding:0 24px;display:flex}.nav-link{font-family:var(--font-body);color:var(--text-secondary);border-radius:8px;padding:6px 14px;font-size:.85rem;font-weight:500;text-decoration:none;transition:color .2s,background .2s}.nav-link:hover{color:var(--text-primary);background:#1c1c1c}.nav-link-active,.nav-link-active:hover{color:var(--accent);background:var(--accent-dim)}.open-spotify-btn{background:var(--accent);color:#000;letter-spacing:.03em;border-radius:20px;flex-shrink:0;align-items:center;margin-left:auto;padding:8px 18px;font-size:.82rem;font-weight:700;text-decoration:none;transition:opacity .2s,transform .2s;display:inline-flex}.open-spotify-btn:hover{opacity:.85;transform:scale(1.03)}