:root{--bg:#0f0f0f;--surface:#1a1a1a;--surface2:#242424;--surface3:#2e2e2e;--border:#2e2e2e;--border-h:#444;--text:#f0f0f0;--text-muted:#888;--text-subtle:#555;--accent:#1db954;--accent-h:#1ed760;--accent-dim:#1db9541f;--danger:#e05c5c;--danger-dim:#e05c5c1a;--star-on:#f5c518;--radius-sm:6px;--radius:10px;--radius-lg:16px;--nav-h:58px;--shadow:0 4px 24px #0006;--shadow-sm:0 2px 8px #0000004d}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}img{max-width:100%;display:block}button{cursor:pointer;font:inherit}a{color:inherit;text-decoration:none}.spinner-wrap{flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:60vh;display:flex}.spinner{border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:36px;height:36px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.spinner-msg{color:var(--text-muted);font-size:.875rem}.navbar{z-index:100;height:var(--nav-h);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#0f0f0fd9;align-items:center;gap:1.5rem;padding:0 1.5rem;display:flex;position:sticky;top:0}.navbar-brand{color:var(--accent);letter-spacing:-.03em;flex-shrink:0;font-size:1.05rem;font-weight:800}.navbar-links{flex:1;gap:.2rem;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--text-muted);padding:.3rem .75rem;font-size:.875rem;transition:color .15s,background .15s}.nav-link:hover{color:var(--text);background:var(--surface2)}.nav-link.active{color:var(--text);font-weight:600}.navbar-user{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.navbar-name{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:.82rem;overflow:hidden}.btn-primary{background:var(--accent);color:#000;white-space:nowrap;border:none;border-radius:20px;padding:.45rem 1.1rem;font-size:.82rem;font-weight:700;transition:background .15s,opacity .15s,transform .1s}.btn-primary:hover:not(:disabled){background:var(--accent-h);transform:translateY(-1px)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius-sm);background:0 0;padding:.3rem .7rem;font-size:.8rem;transition:color .15s,border-color .15s,background .15s}.btn-ghost:hover{color:var(--text);border-color:var(--border-h);background:var(--surface2)}.btn-link{color:var(--accent);font-size:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-weight:500;transition:color .15s}.btn-link:hover{color:var(--accent-h)}.input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);outline:none;padding:.6rem .85rem;font-size:.9rem;transition:border-color .15s,background .15s}.input::placeholder{color:var(--text-subtle)}.input:focus{border-color:var(--accent);background:var(--surface3)}.login-page{background:radial-gradient(at 50% 0,#1db95412 0%,#0000 65%);justify-content:center;align-items:center;min-height:100vh;padding:2rem;display:flex}.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);text-align:center;width:100%;max-width:380px;box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:1rem;padding:2.75rem 2.25rem;display:flex}.login-logo{margin-bottom:.25rem;font-size:3rem;line-height:1}.login-title{letter-spacing:-.04em;font-size:1.65rem;font-weight:800}.login-subtitle{color:var(--text-muted);font-size:.875rem;line-height:1.6}.login-form{flex-direction:column;gap:.65rem;width:100%;margin-top:.5rem;display:flex}.login-field{flex-direction:column;gap:.3rem;display:flex}.login-field label{color:var(--text-muted);letter-spacing:.02em;font-size:.8rem;font-weight:600}.login-form .btn-primary{border-radius:var(--radius-sm);margin-top:.25rem;padding:.65rem;font-size:.9rem}.login-switch{color:var(--text-muted);margin-top:.25rem;font-size:.83rem}.form-error{color:var(--danger);text-align:left;background:var(--danger-dim);border-radius:var(--radius-sm);border:1px solid #e05c5c33;padding:.5rem .75rem;font-size:.82rem}.form-success{color:var(--accent);text-align:left;background:var(--accent-dim);border-radius:var(--radius-sm);border:1px solid #1db95433;padding:.5rem .75rem;font-size:.82rem}.page{max-width:1300px;margin:0 auto;padding:2rem 1.5rem 5rem}.dashboard-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.dashboard-stats{color:var(--text-muted);gap:1.5rem;font-size:.875rem;display:flex}.dashboard-stats strong{color:var(--text);font-weight:700}.track-search{max-width:520px;margin-bottom:1.75rem;position:relative}.track-search-input-wrap{align-items:center;display:flex;position:relative}.track-search-input{border-radius:var(--radius);padding-top:.7rem;padding-bottom:.7rem;padding-right:2.5rem;font-size:.925rem}.track-search-input:focus{box-shadow:0 0 0 3px #1db95426}.track-search-spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:16px;height:16px;animation:.7s linear infinite spin;position:absolute;right:.85rem}.search-dropdown{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:50;list-style:none;animation:.12s dropdown-in;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.search-result{border-bottom:1px solid var(--border);align-items:center;gap:.75rem;padding:.6rem .85rem;transition:background .1s;display:flex}.search-result:last-child{border-bottom:none}.search-result:hover{background:var(--surface2)}.search-result-art{object-fit:cover;background:var(--surface2);border-radius:4px;flex-shrink:0;width:40px;height:40px}.search-result-info{flex-direction:column;flex:1;gap:.1rem;min-width:0;display:flex}.search-result-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.search-result-artist{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;overflow:hidden}.search-result-add{flex-shrink:0;padding:.3rem .75rem;font-size:.78rem}.search-empty{color:var(--text-muted);text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem;font-size:.85rem;position:absolute;top:calc(100% + 6px);left:0;right:0}.track-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.1rem;display:grid}.track-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:default;flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;position:relative;overflow:hidden}.track-card:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 8px 24px #00000059}.track-art{aspect-ratio:1;background:var(--surface2);overflow:hidden}.track-art img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.track-card:hover .track-art img{transform:scale(1.04)}.track-art-placeholder{width:100%;height:100%;color:var(--text-subtle);justify-content:center;align-items:center;font-size:2.5rem;display:flex}.track-info{flex-direction:column;flex:1;gap:.15rem;padding:.7rem .75rem .75rem;display:flex}.track-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;line-height:1.3;overflow:hidden}.track-artist{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.track-album{color:var(--text-subtle);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.5rem;font-size:.75rem;overflow:hidden}.star-rating{gap:1px;margin-top:auto;display:flex}.star{color:var(--surface3);background:0 0;border:none;padding:1px;font-size:18px;line-height:1;transition:color .1s,transform .1s}.star:hover{transform:scale(1.2)}.star.filled{color:var(--star-on)}.page-title-row{align-items:baseline;gap:.85rem;margin-bottom:1.5rem;display:flex}.page-title{letter-spacing:-.02em;font-size:1.35rem;font-weight:800}.page-subtitle{color:var(--text-muted);font-size:.82rem}.ratings-list{flex-direction:column;gap:.6rem;display:flex}.rating-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);align-items:center;gap:1rem;padding:.7rem 1rem;transition:border-color .15s,background .15s;display:flex}.rating-row:hover{border-color:var(--border-h);background:var(--surface2)}.rating-score{text-align:center;flex-shrink:0;min-width:2.25rem}.rating-number{color:var(--star-on);letter-spacing:-.02em;font-size:1.4rem;font-weight:800;line-height:1}.rating-max{color:var(--text-subtle);font-size:.72rem}.rating-art{border-radius:var(--radius-sm);background:var(--surface2);flex-shrink:0;width:48px;height:48px;overflow:hidden}.rating-art img{object-fit:cover;width:100%;height:100%}.rating-info{flex:1;min-width:0}.rating-info .track-name{font-size:.9rem}.rating-info .track-artist{font-size:.8rem}.rating-info .track-album{margin-bottom:0;font-size:.75rem}.rating-stars{flex-shrink:0}.error-banner{background:var(--danger-dim);color:var(--danger);border-radius:var(--radius);border:1px solid #e05c5c40;margin-bottom:1.25rem;padding:.75rem 1rem;font-size:.875rem}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;gap:.4rem;padding:5rem 1rem;font-size:.925rem;display:flex}.empty-state strong{color:var(--text)}.rec-section{margin-bottom:2.5rem}.rec-section-title{letter-spacing:-.02em;margin-bottom:.2rem;font-size:1.1rem;font-weight:700}.rec-section-subtitle{color:var(--text-muted);margin-bottom:1rem;font-size:.82rem}.rec-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1.1rem;display:grid}.rec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;transition:border-color .2s,transform .2s,box-shadow .2s;display:flex;overflow:hidden}.rec-card:hover{border-color:var(--border-h);transform:translateY(-3px);box-shadow:0 8px 24px #00000059}.rec-art{aspect-ratio:1;background:var(--surface2);overflow:hidden}.rec-art img{object-fit:cover;width:100%;height:100%;transition:transform .3s}.rec-card:hover .rec-art img{transform:scale(1.04)}.rec-info{flex-direction:column;flex:1;gap:.15rem;padding:.7rem .75rem .75rem;display:flex}.rec-reason{color:var(--accent);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:.25rem;margin-bottom:.5rem;font-size:.72rem;line-height:1.4;display:-webkit-box;overflow:hidden}.rec-add{align-self:flex-start;margin-top:auto;padding:.3rem .8rem;font-size:.78rem}.rec-add--in-library{color:var(--text-muted);border:1px solid var(--border);cursor:default;opacity:.7;background:0 0}.rec-add--in-library:hover{color:var(--text-muted);background:0 0}.rec-end-msg{text-align:center;color:var(--text-muted);padding:1.5rem 0 .5rem;font-size:.82rem}.profile-section-sub{color:var(--text-subtle);margin-top:-.5rem;font-size:.78rem}.insight-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;display:grid}.insight-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.3rem;padding:1rem 1rem .9rem;transition:border-color .15s;display:flex}.insight-card:hover{border-color:var(--border-h)}.insight-emoji{margin-bottom:.1rem;font-size:1.4rem;line-height:1}.insight-title{color:var(--text);font-size:.875rem;font-weight:700}.insight-subtitle{color:var(--text-muted);font-size:.78rem;line-height:1.4}.activity-chart{align-items:flex-end;gap:.5rem;height:100px;padding-top:1.5rem;display:flex}.activity-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;gap:.3rem;height:100%;display:flex}.activity-bar{background:var(--accent);opacity:.85;border-radius:3px 3px 0 0;width:100%;min-height:2px;transition:opacity .15s}.activity-col:hover .activity-bar{opacity:1}.activity-count{color:var(--accent);font-size:.68rem;font-weight:700}.activity-month{color:var(--text-subtle);text-align:center;white-space:nowrap;font-size:.65rem}.track-remove{color:#fff;cursor:pointer;opacity:0;z-index:2;background:#0000008c;border:none;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:.65rem;line-height:1;transition:opacity .15s,background .15s;display:flex;position:absolute;top:.4rem;right:.4rem}.track-card:hover .track-remove,.track-card:focus-within .track-remove{opacity:1}.track-remove:hover{background:#dc2626d9}.track-art--playable{cursor:pointer;position:relative}.track-art-play{color:#fff;opacity:0;border-radius:inherit;background:#00000073;justify-content:center;align-items:center;font-size:1.4rem;transition:opacity .15s;display:flex;position:absolute;inset:0}.track-art--playable:hover .track-art-play,.track-art--playable:focus-visible .track-art-play{opacity:1}.track-art--playable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.spotify-player{z-index:200;height:80px;position:fixed;bottom:0;left:0;right:0}.spotify-player-iframe{border:none;width:100%;height:80px;display:block}.spotify-player-close{color:#fff;cursor:pointer;z-index:1;background:#00000080;border:none;border-radius:4px;padding:.2rem .45rem;font-size:.75rem;line-height:1;transition:background .15s;position:absolute;top:.35rem;right:.5rem}.spotify-player-close:hover{background:#000000bf}.profile-header{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.profile-avatar{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;font-size:1.1rem;font-weight:700;display:flex}.profile-email{color:var(--text);font-size:1rem;font-weight:600}.profile-since{color:var(--text-muted);margin-top:.15rem;font-size:.8rem}.profile-stats-grid{grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1.75rem;display:grid}.stat-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:.25rem;padding:1rem;display:flex}.stat-value{color:var(--text);font-size:1.5rem;font-weight:700;line-height:1}.stat-value--accent{color:var(--accent)}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:.72rem;font-weight:600}.profile-content{flex-direction:column;gap:1.5rem;display:flex}.profile-two-col{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}.profile-section{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:.9rem;padding:1.25rem 1.25rem 1rem;display:flex}.profile-section-title{text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted);margin:0;font-size:.82rem;font-weight:700}.genre-tags{flex-wrap:wrap;gap:.5rem;display:flex}.genre-tag{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);text-transform:capitalize;border-radius:999px;padding:.3rem .75rem;font-size:.8rem}.profile-list{flex-direction:column;gap:.5rem;display:flex}.profile-list-row{align-items:center;gap:.65rem;min-width:0;display:flex}.profile-list-rank{color:var(--text-subtle);text-align:right;flex-shrink:0;width:1.1rem;font-size:.75rem;font-weight:700}.profile-list-art{object-fit:cover;border-radius:4px;flex-shrink:0;width:36px;height:36px}.profile-list-art--empty{background:var(--surface);border:1px solid var(--border)}.profile-list-info{flex-direction:column;flex:1;gap:.1rem;min-width:0;display:flex}.profile-list-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;font-size:.875rem;font-weight:600;overflow:hidden}.profile-list-sub{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.75rem;overflow:hidden}.profile-list-meta{color:var(--text-muted);flex-shrink:0;margin-left:auto;font-size:.75rem}.profile-list-rating{color:var(--accent);flex-shrink:0;margin-left:auto;font-size:.8rem;font-weight:700}.rating-dist{flex-direction:column;gap:.45rem;display:flex}.rating-dist-row{align-items:center;gap:.6rem;display:flex}.rating-dist-label{color:var(--text-muted);flex-shrink:0;width:2.5rem;font-size:.78rem}.rating-dist-bar-track{background:var(--surface);border-radius:99px;flex:1;height:8px;overflow:hidden}.rating-dist-bar{background:var(--accent);border-radius:99px;min-width:2px;height:100%;transition:width .4s}.rating-dist-count{color:var(--text-muted);text-align:right;flex-shrink:0;width:1.5rem;font-size:.75rem}@media (width<=640px){.page{padding:1.25rem 1rem 4rem}.navbar-name{display:none}.track-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}.track-search{max-width:100%}.rating-row{gap:.65rem;padding:.6rem .75rem}.rating-art{width:42px;height:42px}.rating-stars{display:none}.profile-stats-grid{grid-template-columns:repeat(2,1fr)}.profile-two-col{grid-template-columns:1fr}.insight-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.track-grid{grid-template-columns:repeat(auto-fill,minmax(185px,1fr))}}