:root{--bg:#09090f;--bg2:#12121c;--bg3:#1a1a2a;--bg4:#222236;--bdr:#2a2a40;--tx:#e8e8f0;--tx2:#8888a0;--tx3:#55556e;--ac:#7c5cfc;--ac2:#9b7fff;--acd:#7c5cfc1f;--gn:#34d399;--gnd:#34d3991f;--rd:#f87171;--rdd:#f871711f;--or:#fb923c;--bl:#60a5fa;--r:12px;--rs:8px}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--tx);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.5}a{color:var(--ac);text-decoration:none}.container{max-width:820px;margin:0 auto;padding:20px 16px 100px}.page-header{border-bottom:1px solid var(--bdr);flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px;padding-bottom:16px;display:flex}.page-header h1{font-size:20px;font-weight:700}.code{background:var(--acd);color:var(--ac);letter-spacing:2px;border-radius:6px;padding:4px 12px;font-family:SF Mono,monospace;font-size:13px;font-weight:700}.card{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:14px;padding:16px}.card-title{text-transform:uppercase;letter-spacing:.8px;color:var(--tx2);align-items:center;gap:6px;margin-bottom:12px;font-size:12px;font-weight:700;display:flex}.btn{border-radius:var(--rs);cursor:pointer;border:none;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--ac);color:#fff}.btn-primary:hover{background:var(--ac2)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.btn-secondary{background:var(--bg3);color:var(--tx);border:1px solid var(--bdr)}.btn-secondary:hover{border-color:var(--tx2)}.btn-sm{padding:6px 12px;font-size:12px}.btn-spotify{color:#fff;background:#1db954;border-radius:24px;padding:10px 20px;font-size:14px;font-weight:700}.btn-spotify:hover{background:#1ed760}.btn-vote{border:1px solid var(--bdr);background:var(--bg3);width:34px;height:34px;color:var(--tx3);cursor:pointer;border-radius:8px;padding:0;font-size:16px;transition:all .15s}.btn-vote.up:hover,.btn-vote.up.active{background:var(--gnd);color:var(--gn);border-color:var(--gn)}.btn-vote.down:hover,.btn-vote.down.active{background:var(--rdd);color:var(--rd);border-color:var(--rd)}.user-chip{background:var(--bg3);border:1px solid var(--bdr);cursor:pointer;border-radius:100px;align-items:center;gap:6px;padding:6px 14px;font-size:13px;transition:all .15s;display:inline-flex}.user-chip:hover,.user-chip.active{border-color:var(--ac);background:var(--acd);color:var(--ac)}.tag{background:var(--bg3);color:var(--tx2);border-radius:4px;padding:2px 7px;font-size:11px;display:inline-block}.tag.green{background:var(--gnd);color:var(--gn)}.tag.accent{background:var(--acd);color:var(--ac)}.input{background:var(--bg3);border:1px solid var(--bdr);border-radius:var(--rs);width:100%;color:var(--tx);outline:none;padding:10px 14px;font-family:inherit;font-size:14px;transition:border .15s}.input:focus{border-color:var(--ac)}.input::placeholder{color:var(--tx3)}.summary-box{background:var(--acd);border-radius:var(--r);border:1px solid #7c5cfc33;margin-bottom:14px;padding:14px 18px;font-size:14px;line-height:1.6}.track-row{border-radius:var(--rs);align-items:center;gap:12px;padding:10px 14px;transition:background .1s;display:flex}.track-row:hover{background:var(--bg3)}.track-rank{color:var(--tx3);text-align:center;flex-shrink:0;width:24px;font-size:13px;font-weight:700}.track-info{flex:1;min-width:0}.track-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.track-artist{color:var(--tx2);font-size:12px}.track-meta{flex-wrap:wrap;gap:6px;margin-top:3px;display:flex}.track-score{color:var(--ac);flex-shrink:0;font-family:monospace;font-size:12px;font-weight:600}.track-votes{flex-shrink:0;align-items:center;gap:6px;display:flex}.vote-count{text-align:center;min-width:20px;font-family:monospace;font-size:14px;font-weight:700}.vote-count.positive{color:var(--gn)}.vote-count.negative{color:var(--rd)}.vote-count.zero{color:var(--tx3)}.now-playing{background:var(--bg2);border-top:1px solid var(--bdr);z-index:100;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);align-items:center;gap:14px;padding:12px 20px;display:flex;position:fixed;bottom:0;left:0;right:0}.now-playing img{border-radius:6px;width:48px;height:48px}.now-playing .np-info{flex:1;min-width:0}.now-playing .np-name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.now-playing .np-artist{color:var(--tx2);font-size:12px}.now-playing .np-badge{background:var(--gn);color:#000;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:800;animation:2s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.search-drop{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r);z-index:50;max-height:340px;margin-top:-6px;position:absolute;top:100%;left:16px;right:16px;overflow-y:auto;box-shadow:0 12px 40px #0009}.search-item{border-bottom:1px solid var(--bdr);cursor:default;align-items:center;gap:10px;padding:10px 14px;transition:background .1s;display:flex}.search-item:hover{background:var(--bg3)}.search-item img{border-radius:4px;flex-shrink:0;width:40px;height:40px}.search-item .placeholder{background:var(--bg3);border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.cluster-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;display:grid}.cluster-card{background:var(--bg3);border-radius:var(--rs);padding:12px}.meter-row{align-items:center;gap:8px;margin-bottom:6px;display:flex}.meter-label{color:var(--tx2);text-overflow:ellipsis;white-space:nowrap;flex-shrink:0;width:80px;font-size:11px;overflow:hidden}.meter-bar{background:var(--bg3);border-radius:3px;flex:1;height:5px;overflow:hidden}.meter-fill{border-radius:3px;height:100%;transition:width .3s}.landing{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:85vh;padding:20px;display:flex}.landing h1{letter-spacing:-.5px;margin-bottom:6px;font-size:32px;font-weight:800}.landing .sub{color:var(--tx2);max-width:400px;margin-bottom:36px;font-size:15px}@media (max-width:640px){.container{padding:14px 12px 100px}.page-header{gap:8px;margin-bottom:16px}.page-header h1{font-size:18px}.track-row{gap:8px;padding:8px 10px}.track-score{display:none}.now-playing{gap:10px;padding:10px 14px}.now-playing img{width:40px;height:40px}.landing h1{font-size:26px}.cluster-grid{grid-template-columns:1fr}}