:root{color-scheme:dark;--bg:#10131c;--panel:#1a1e2a;--panel-2:#202535;--panel-3:#242a3a;--text:#f3f3f7;--muted:#949bab;--line:#35394a;--accent:#f8bc86;--accent2:#ed91ad;--shadow:0 20px 70px #060a1238;--radius:13px}
:root.light{color-scheme:light;--bg:#f6f4f1;--panel:#fff;--panel-2:#f6f2f0;--panel-3:#ece6e1;--text:#282636;--muted:#777987;--line:#e4e1e0;--accent:#a44864;--accent2:#ac5776;--shadow:0 20px 70px #30304412}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}button:disabled{opacity:.4;cursor:default}.hidden{display:none!important}.shell{max-width:1216px;margin:auto;padding:0 30px}.topbar{height:91px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{text-decoration:none;letter-spacing:.18em;font-weight:850;font-size:15px;display:flex;align-items:center;gap:0}.brand-light{font-weight:400;opacity:.78}.brand-logo{display:inline-grid;place-items:center;width:35px;height:35px;background:var(--accent);border-radius:50%;color:var(--bg);font-size:27px;margin-right:15px;letter-spacing:0}.header-right{display:flex;gap:22px;align-items:center}.header-note{color:var(--muted);font-size:12px}.theme-button{width:35px;height:35px;border:1px solid var(--line);background:var(--panel);border-radius:9px;color:var(--text);font-size:19px}.hero{min-height:350px;display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}.hero-text{z-index:1;max-width:730px;padding:53px 0 45px}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.17em;color:var(--accent);display:flex;align-items:center;gap:8px}.eyebrow-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:100%}.hero h1{font-size:clamp(35px,4.5vw,59px);line-height:1.095;letter-spacing:-.045em;margin:18px 0 20px;font-weight:780}.hero h1 em{font-style:normal;color:var(--accent)}.hero p{font-size:15px;max-width:570px;color:var(--muted);margin:0}.hero p strong{color:var(--text);font-weight:580}.account{display:flex;align-items:center;gap:13px;font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-top:28px}.account-name{color:var(--text);letter-spacing:0;font-size:13px;font-weight:700}.vinyl-wrap{position:absolute;right:-100px;top:20px;opacity:.65;filter:drop-shadow(-25px 15px 30px #090c1570)}.vinyl{height:360px;width:360px;border-radius:50%;background:repeating-radial-gradient(circle at center,#252739 0,#1b2030 1px,#131722 2px,#111623 5px,#151823 7px);border:2px solid #353444;display:grid;place-items:center;box-shadow:inset 0 0 5px 8px #0006}.vinyl-label{width:112px;height:112px;border-radius:100%;background:radial-gradient(circle at center,#ec91aa 0%,#de738e 65%,#c05b74 66%,#c05b74 75%,#af4868 100%);display:grid;place-items:center;box-shadow:0 0 0 1px #232436}.vinyl-hole{width:12px;height:12px;background:#161927;border:3px solid #c98ca2;border-radius:50%}.sync-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 15px;box-shadow:var(--shadow)}.sync-header{display:flex;gap:14px;align-items:center}.sync-icon{width:44px;height:44px;background:var(--panel-3);color:var(--accent);border-radius:11px;display:grid;place-items:center;font-size:27px;flex-shrink:0}.sync-copy{flex:1;min-width:0}.sync-title{font-weight:800;font-size:15px}.sync-subtitle{color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}.sync-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.button{padding:10px 16px;border-radius:8px;font-size:12px;font-weight:750;border:1px solid var(--line);white-space:nowrap;transition:filter .15s}.button:not(:disabled):hover{filter:brightness(1.1)}.button-primary{background:var(--accent);border-color:transparent;color:#18151b}.button-outline{background:transparent;color:var(--text)}.sync-foot{display:flex;gap:20px;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:16px}.progress-wrap{height:5px;background:var(--panel-3);border-radius:99px;overflow:hidden;margin-top:19px}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .3s}.content-area{padding:70px 0 65px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.eyebrow.secondary{color:var(--muted)}.section-head h2{font-size:32px;letter-spacing:-.045em;line-height:1;margin:12px 0 0}.section-stop{color:var(--accent)}.tab-switch{padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:9px;display:flex}.tab{padding:8px 20px;border:0;background:none;color:var(--muted);border-radius:6px;font-size:12px;font-weight:750}.tab.active{background:var(--panel-3);color:var(--text);box-shadow:0 1px 3px #0709142a}.stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}.stat-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:23px 24px}.stat-label{font-size:10px;letter-spacing:.12em;font-weight:800;color:var(--muted);display:block}.stat-value{font-size:38px;font-weight:780;letter-spacing:-.055em;display:block;margin:7px 0 0;line-height:1.3}.stat-foot{color:var(--muted);font-size:11px}.chart-section{margin-top:36px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 21px}.chart-head,.ranking-title{display:flex;align-items:start;justify-content:space-between;gap:15px}.chart-head h3,.ranking-title h3{margin:0;font-size:18px;letter-spacing:-.03em}.chart-head p,.ranking-title p{margin:3px 0 0;color:var(--muted);font-size:12px}.text-button{font-size:11px;border:0;background:none;color:var(--accent);font-weight:750}.chart{height:235px;display:flex;gap:9px;align-items:flex-end;padding-top:28px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.bar-col{min-width:39px;flex:1;max-width:90px;display:flex;flex-direction:column;align-items:stretch;justify-content:end;gap:9px;height:100%;color:var(--muted);font-size:11px;text-align:center}.bar-outer{height:calc(100% - 23px);display:flex;align-items:flex-end;justify-content:center}.bar{width:100%;min-height:3px;max-width:47px;border:0;border-radius:5px 5px 1px 1px;background:linear-gradient(to top,var(--accent2),var(--accent));opacity:.65;transition:opacity .15s,filter .15s;position:relative}.bar:hover,.bar.selected{opacity:1;filter:brightness(1.1)}.bar:focus-visible{outline:3px solid var(--accent)}.bar:after{content:attr(data-plays);display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 7px;border-radius:4px;background:var(--panel-3);color:var(--text);font-size:11px;white-space:nowrap;z-index:5}.bar:hover:after,.bar:focus-visible:after{display:block}.chart-caption{font-size:10px;letter-spacing:.05em;color:var(--muted);margin-top:19px;text-align:right}.chart-empty{margin:auto;color:var(--muted);font-size:13px}.rankings{margin-top:41px}.export-link{text-decoration:none;font-size:12px;font-weight:700;color:var(--accent)}.filters{display:grid;grid-template-columns:220px 1fr;gap:14px;margin-top:25px}.field label{display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em;margin:0 0 8px}.field select,.field input{background:var(--panel);color:var(--text);border:1px solid var(--line);padding:13px 15px;border-radius:8px;width:100%;outline:none}.field input:focus,.field select:focus{border-color:var(--accent)}.field input::placeholder{color:var(--muted)}.list-head{padding:23px 12px 12px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.1em}.results{border-top:1px solid var(--line)}.item{min-height:82px;padding:14px 12px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.rank{width:23px;flex-shrink:0;color:var(--muted);font-size:12px;text-align:right}.cover{width:51px;height:51px;flex-shrink:0;border-radius:5px;background:var(--panel-3);object-fit:cover;display:grid;place-items:center;color:var(--muted);font-size:20px;border:1px solid var(--line)}.item-detail{flex:1;min-width:0}.item-title{font-weight:770;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-title a{text-decoration:none}.item-title a:hover{text-decoration:underline;text-decoration-color:var(--accent)}.item-artist{color:var(--muted);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.year-pill{font-weight:700;color:var(--accent);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font-size:11px;min-width:57px;text-align:center}.year-pill.unknown{color:var(--muted)}.edit-year{border:0;background:none;color:var(--muted);font-size:13px;padding:5px;line-height:1}.edit-year:hover{color:var(--accent)}.item-plays{font-size:15px;font-weight:760;text-align:right;width:78px;flex-shrink:0}.item-plays small{display:block;font-size:10px;font-weight:400;color:var(--muted)}.empty{padding:60px 20px;color:var(--muted);text-align:center}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:26px}.pagination #pageInfo{font-size:12px;color:var(--muted)}.footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);padding:23px 0 32px;font-size:11px;color:var(--muted)}.footer strong{font-weight:600;color:var(--text)}.dotsep{color:var(--accent)}.toast{position:fixed;bottom:26px;right:26px;z-index:20;padding:14px 20px;background:var(--panel-3);border:1px solid var(--accent);border-radius:10px;box-shadow:var(--shadow);max-width:min(450px,90vw);font-size:13px}
@media(max-width:800px){.vinyl-wrap{opacity:.17;right:-150px}.hero-text{max-width:100%}.stat-card{padding:17px}.stat-value{font-size:30px}.sync-header{flex-wrap:wrap}.sync-copy{flex-basis:calc(100% - 63px)}.sync-actions{width:100%;justify-content:start}.chart{gap:7px}.bar-col{min-width:32px}}
@media(max-width:550px){.shell{padding:0 16px}.topbar{height:70px}.header-note{display:none}.hero{min-height:295px}.hero-text{padding:36px 0}.hero h1{font-size:37px}.hero p{font-size:13px}.vinyl-wrap{right:-220px}.content-area{padding-top:43px}.section-head h2{font-size:26px}.tab{padding:8px 11px}.stat-grid{grid-template-columns:1fr 1fr;gap:9px}.stat-card:last-child{grid-column:1/-1}.stat-card{padding:16px}.stat-value{font-size:28px}.chart-section{padding:17px}.chart{height:205px}.filters{grid-template-columns:1fr}.item{gap:8px;padding:12px 2px}.cover{width:42px;height:42px}.rank{width:18px}.item-title{font-size:13px}.item-artist{font-size:11px}.year-pill{min-width:48px;padding:4px;font-size:10px}.edit-year{padding:2px}.item-plays{width:49px;font-size:13px}.item-plays small{font-size:9px}.pagination{gap:10px}.pagination .button{padding:9px 10px}.sync-foot{flex-wrap:wrap}.footer{display:block}.footer span{display:block;margin-bottom:8px}}

/* User selection — public Last.fm profiles (API key is not tied to a username). */
.account-form{margin-top:26px;max-width:475px}
.account-form>label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--muted);margin-bottom:9px}
.account-controls{display:flex;gap:8px;align-items:stretch;position:relative;z-index:2}
.account-controls input{min-width:0;flex:1;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:11px 13px;outline:none;font:inherit;font-size:13px}
.account-controls input:focus{border-color:var(--accent)}
.account-controls .button{flex-shrink:0}
.account-viewing{font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-top:12px}
.account-name{color:var(--text);font-size:13px;font-weight:800;letter-spacing:0}
@media(max-width:550px){.account-controls{flex-wrap:wrap}.account-controls input{flex-basis:100%}.account-controls .button{flex-basis:100%}}