body.music-page { min-height:100%; height:auto; overflow:auto; padding:48px 18px 72px; background:#02070b radial-gradient(circle at 50% 0,#0d3048 0,transparent 48%); color:var(--ink); }
.overview-window { width:min(980px,100%); margin:auto; padding:3px; background:var(--silver); box-shadow:var(--out),0 18px 70px #000; font:12px/1.45 var(--font-ui); }
.overview-titlebar { height:29px; display:flex; align-items:center; gap:7px; padding:3px 4px 3px 6px; color:#fff; background:linear-gradient(90deg,var(--navy),var(--acc-dk) 60%,var(--acc)); }
.overview-titlebar h1 { flex:1; margin:0; font:12px var(--font-ui); }.overview-titlebar>a{display:grid;place-items:center;width:22px;height:20px;color:#000;background:var(--silver);box-shadow:var(--out);font:16px/1 sans-serif;text-decoration:none}.music-pixel-icon{color:var(--yellow);font-size:16px}.overview-menu{display:flex;gap:2px;padding:2px 2px 3px;border-bottom:1px solid var(--mid)}.overview-menu a{padding:3px 9px;color:var(--ink);text-decoration:none}.overview-menu a:hover,.overview-menu a.is-active{background:var(--acc-dk);color:#fff}
.profile-panel{position:relative;display:grid;grid-template-columns:92px minmax(150px,1fr) minmax(300px,420px);align-items:end;gap:16px;min-height:150px;padding:24px 30px 18px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.28) 0 1px,transparent 1px 3px),linear-gradient(#8b8d8f,#babcbf);border-bottom:3px solid var(--acc)}.profile-avatar{width:92px;height:92px;object-fit:cover;background:#000;box-shadow:0 0 0 2px #fff,3px 3px 0 var(--acc-dk)}.profile-copy h2{margin:0 0 3px;color:#fff;text-shadow:1px 1px #333;font:20px var(--font-big)}.profile-copy p{margin:0;color:#222}.profile-copy span{color:#444;font:10px var(--font-mono)}.profile-stats{display:flex;gap:22px;margin:0}.profile-stats div{min-width:72px}.profile-stats dt{color:#333;font-size:10px}.profile-stats dd{margin:1px 0 0;font:16px var(--font-big);color:#000}
.overview-body{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:18px;padding:24px;background:var(--paper);font-family:var(--font-text)}.section-block{margin-bottom:30px;scroll-margin-top:12px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:8px;border-bottom:1px solid #ddd}.section-heading h2,.side-box h2{margin:0 0 5px;font:15px var(--font-ui);color:#222}.section-heading label{display:flex;align-items:center;gap:6px;margin-bottom:4px;color:var(--ink-3);font:10px var(--font-ui)}.section-heading select{border:1px solid var(--mid);background:#fff;font:10px var(--font-ui);padding:2px 4px}
.now-row{display:grid;grid-template-columns:28px 56px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:68px;padding:5px 9px;color:var(--ink);text-decoration:none;background:#fff;box-shadow:var(--in)}.now-row:hover{background:#eefaff}.now-row.is-playing{background:#f1fff5;box-shadow:var(--in),inset 0 0 0 2px rgba(29,185,84,.22)}.now-section #now-state{display:flex;align-items:center;gap:5px;margin-bottom:5px;color:var(--ink-3);font:10px var(--font-ui)}.now-section.is-playing #now-state{color:#087a31;font-weight:700}.now-section.is-playing #now-state::before{content:"";width:7px;height:7px;background:#1db954;box-shadow:0 0 0 2px rgba(29,185,84,.2);animation:live-pulse 1.3s steps(2) infinite}.play-cell{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:22px;color:var(--acc-dk)}.play-cell::after{content:"▶"}.play-cell b{display:none;width:3px;background:#1db954}.now-row.is-playing .play-cell::after{display:none}.now-row.is-playing .play-cell b{display:block;animation:live-eq .55s steps(4) infinite alternate}.now-row.is-playing .play-cell b:nth-child(2){animation-duration:.38s}.now-row.is-playing .play-cell b:nth-child(3){animation-duration:.72s}.now-row.is-playing .play-cell b:nth-child(4){animation-duration:.46s}.square-cover{position:relative;display:block;aspect-ratio:1/1;background:#050505;overflow:hidden;box-shadow:0 0 0 1px #aaa}.square-cover img{display:block;width:100%;height:100%;object-fit:contain;background:#050505}.square-cover i{position:absolute;inset:0;display:grid;place-items:center;color:var(--acc);font:22px var(--font-big);font-style:normal}.square-cover img:not([hidden])+i{display:none}.now-copy{min-width:0}.now-copy strong,.now-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-copy strong{font-size:13px}.now-copy span,.now-row time{color:var(--ink-3);font-size:10px}.now-row time{text-align:right}.now-progress{height:4px;margin-top:6px;background:#d9e4df}.now-progress i{display:block;width:0;height:100%;background:#1db954}.now-row:not(.is-playing) .now-progress{display:none}
.profile-now{min-width:0}.profile-now .section-heading{border:0;margin:0}.profile-now .section-heading h2{color:#222;font-size:11px}.profile-now .now-row{grid-template-columns:22px 48px minmax(0,1fr) auto;min-height:58px}.profile-now .now-cover{width:48px}.profile-now .now-copy strong{font-size:11px}
.compact-profile{grid-template-columns:72px 1fr;min-height:112px;padding-top:18px}.compact-profile .profile-avatar{width:72px;height:72px}
@keyframes live-eq{0%{height:4px}100%{height:22px}}@keyframes live-pulse{50%{opacity:.35}}
.cover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}.cover-grid li{min-width:0;background:#101010}.cover-grid a{position:relative;display:block;color:#fff;text-decoration:none}.cover-grid .square-cover{width:100%;box-shadow:none}.cover-grid .tile-copy{position:absolute;z-index:2;inset:auto 0 0;padding:20px 7px 6px;background:linear-gradient(transparent,rgba(0,0,0,.9))}.cover-grid b,.cover-grid small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cover-grid b{font-size:11px}.cover-grid small{color:#d7d7d7;font-size:9px}.tile-rank{position:absolute;z-index:3;left:5px;top:5px;padding:1px 4px;background:var(--acc-dk);color:#fff;font:9px var(--font-ui)}
.track-list{margin:0;padding:0;list-style:none;box-shadow:var(--in)}.track-list li{display:grid;grid-template-columns:28px 36px minmax(0,1fr) minmax(80px,140px) 54px;align-items:center;gap:8px;min-height:44px;padding:4px 8px;border-bottom:1px solid #ececec}.track-list li:last-child{border:0}.track-list .square-cover{width:34px}.track-list .track-rank{color:var(--ink-3);text-align:center}.track-list b,.track-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-list small{color:var(--ink-3)}.track-bar{height:13px;background:#dff5fc}.track-bar i{display:block;height:100%;background:rgba(var(--acc-rgb),.38)}.track-count{text-align:right;color:var(--ink-3);font:10px var(--font-mono)}
.overview-side{min-width:0}.side-box{margin-bottom:14px;padding:8px;background:var(--silver);box-shadow:var(--out)}.side-box>h2{padding-bottom:5px;border-bottom:1px solid var(--mid)}.side-box button{display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:100%;padding:8px 4px;border:0;border-bottom:1px solid #aaa;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.side-box button:hover{background:#fff}.side-box button span{font-size:10px}.side-box button strong{color:var(--acc-dk)}.mini-chart{grid-column:1/-1;display:flex;align-items:end;gap:1px;height:22px}.mini-chart b{flex:1;min-width:1px;background:var(--acc);font-size:0}.facts-box dl{display:grid;grid-template-columns:1fr auto;gap:7px;margin:8px 2px}.facts-box dt{color:var(--ink-3)}.facts-box dd{margin:0;text-align:right}.spotify-profile{display:block;text-align:center;text-decoration:none}.overview-status{display:flex;gap:3px;margin-top:3px}.overview-status span{flex:1;padding:2px 6px;box-shadow:var(--field);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overview-status span:first-child{flex:2}
.stats-box .profile-stats{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 2px}.stats-box .profile-stats div{display:flex;justify-content:space-between;align-items:baseline}.stats-box .profile-stats dd{font-size:15px}

/* Reports */
.subpage-body{padding:24px;background:var(--paper);font-family:var(--font-text)}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:14px}.page-heading h2{margin:0;font:20px var(--font-big)}.page-heading p{margin:3px 0 0;color:var(--ink-3)}.report-periods{display:flex;gap:3px}.report-periods button,.period-step,.library-tabs button,.pager button{border:0;padding:5px 9px;background:var(--silver);box-shadow:var(--out);font:10px var(--font-ui);cursor:pointer}.report-periods button.is-active,.library-tabs button.is-active{background:var(--acc-dk);color:#fff;box-shadow:var(--in)}.report-range{display:flex;align-items:center;gap:8px;margin-bottom:10px}.report-range strong{flex:1;text-align:center;font:11px var(--font-mono)}.period-step:disabled,.pager button:disabled{color:#888;cursor:default}
.report-hero{display:grid;grid-template-columns:230px 1fr;gap:28px;min-height:170px;padding:24px;background:#ffd1d8;border-top:4px solid #111;box-shadow:var(--in)}.report-total{align-self:center}.report-total small,.report-total strong,.report-total span{display:block}.report-total small{margin-bottom:8px}.report-total strong{font:36px/1 var(--font-big)}.report-total span{margin-top:9px;font-weight:700}.comparison.is-up{color:#087a31}.comparison.is-down{color:#b21f38}.report-bars{display:flex;align-items:end;gap:2px;height:120px;border-bottom:1px solid #333}.bar-pair{display:flex;align-items:end;gap:1px;flex:1;min-width:1px;height:100%}.bar-pair i{flex:1;min-width:1px;background:#151515}.bar-pair b{flex:1;min-width:1px;background:rgba(178,31,56,.35)}
.report-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.report-card{min-width:0;background:#17191c;color:#fff;box-shadow:var(--out)}.report-card>header{display:flex;align-items:center;justify-content:space-between;padding:9px;background:var(--card-color)}.report-card>header h3{margin:0;color:#050505;font:13px var(--font-big)}.report-card>header strong{color:#050505;font:19px var(--font-big)}.report-card-feature{display:grid;grid-template-columns:84px minmax(0,1fr);gap:9px;align-items:center;padding:8px;border-bottom:1px solid #333}.report-card-feature .square-cover{width:84px}.report-card-feature b,.report-card-feature small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-card-feature small{color:#bbb}.report-card ol{margin:0;padding:5px 9px 9px;list-style:none}.report-card li{display:flex;gap:8px;padding:3px 0;color:#ccc}.report-card li span:first-child{color:#777}.report-card li b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eee}.report-card li small{white-space:nowrap}.report-card.artist{--card-color:#c679ff}.report-card.album{--card-color:#53e9bd}.report-card.track{--card-color:#52aefb}
.report-section-title{margin:30px 0 10px;padding-bottom:6px;border-bottom:3px double #777;font:15px var(--font-big)}.report-charts{display:grid;grid-template-columns:1fr 1fr;gap:20px}.report-chart-box h3{margin:0 0 8px;font:11px var(--font-ui)}.activity-panel{display:flex;align-items:end;gap:2px;height:130px;padding:12px;background:#17191c}.activity-panel i{flex:1;min-width:2px;background:var(--acc)}.metric-list{margin:0;padding:12px;background:#17191c;color:#fff;list-style:none}.metric-list li{display:flex;justify-content:space-between;padding:9px;border-bottom:1px solid #35383b}.metric-list li:last-child{border:0}.metric-list strong{font:14px var(--font-big)}.quick-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quick-facts div{padding:13px;background:#17191c;color:#fff;box-shadow:var(--out)}.quick-facts span,.quick-facts strong{display:block}.quick-facts span{color:#bbb}.quick-facts strong{margin-top:7px;font:17px var(--font-big)}

/* Library */
.library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:14px;border-bottom:1px solid var(--mid)}.library-tabs{display:flex;gap:2px}.library-toolbar label{display:flex;align-items:center;gap:6px;padding-bottom:5px;font:10px var(--font-ui)}.library-toolbar select{padding:3px;border:1px solid var(--mid);background:#fff;font:10px var(--font-ui)}.library-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px}.library-summary{display:flex;gap:18px;margin-bottom:10px}.library-summary div{padding-right:18px;border-right:1px solid #ccc}.library-summary span,.library-summary strong{display:block}.library-summary span{color:var(--ink-3);font-size:9px}.library-summary strong{font:15px var(--font-big)}.library-list{margin:0;padding:0;list-style:none;box-shadow:var(--in)}.library-list li{display:grid;grid-template-columns:28px 38px minmax(0,1fr) minmax(100px,160px) 70px;align-items:center;gap:8px;min-height:48px;padding:4px 8px;border-bottom:1px solid #e3e3e3}.library-list .square-cover{width:36px}.library-list .row-rank{color:#777;text-align:center}.library-list .row-copy{min-width:0}.library-list b,.library-list small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-list small,.library-list time{color:var(--ink-3);font-size:9px}.library-list .row-album{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-3)}.library-list .row-count{text-align:right;font:10px var(--font-mono)}.day-divider{grid-template-columns:1fr!important;min-height:28px!important;background:#d8d8d8;font:10px var(--font-ui);box-shadow:var(--in)}.pager{display:flex;align-items:center;justify-content:center;gap:10px;margin:15px 0}.library-side .side-box{margin-bottom:14px}.year-chart{display:flex;align-items:end;gap:5px;height:120px;margin:10px 4px 3px}.year-chart span{display:flex;flex:1;flex-direction:column;justify-content:end;align-items:center;height:100%;font:8px var(--font-ui)}.year-chart i{width:100%;min-height:2px;background:rgba(var(--acc-rgb),.55)}.year-chart b{margin-top:4px}.empty-state{padding:28px!important;text-align:center;color:var(--ink-3);grid-template-columns:1fr!important}

@media(max-width:760px){body.music-page{padding:12px 6px 44px}.profile-panel{grid-template-columns:72px 1fr;padding:18px 16px}.profile-avatar{width:72px;height:72px}.profile-now{grid-column:1/-1}.overview-body{grid-template-columns:1fr;padding:15px}.overview-side{display:grid;grid-template-columns:1fr 1fr;gap:10px}.spotify-profile{grid-column:1/-1}.cover-grid{grid-template-columns:repeat(2,1fr)}.overview-menu{overflow:auto}.overview-menu a{white-space:nowrap}.track-list li{grid-template-columns:24px 34px minmax(0,1fr) 45px}.track-bar{display:none}.overview-status span:last-child{display:none}.subpage-body{padding:15px}.page-heading{align-items:start;flex-direction:column}.report-hero{grid-template-columns:1fr;padding:18px}.report-bars{height:90px}.report-cards{grid-template-columns:1fr}.report-charts{grid-template-columns:1fr}.quick-facts{grid-template-columns:1fr}.library-layout{grid-template-columns:1fr}.library-side{grid-row:1}.library-list li{grid-template-columns:24px 34px minmax(0,1fr) 58px}.library-list .row-album{display:none}}
@media(max-width:430px){.profile-panel{grid-template-columns:58px 1fr;gap:10px}.profile-avatar{width:58px;height:58px}.profile-copy h2{font-size:15px}.profile-stats{gap:8px}.profile-stats div{min-width:0}.profile-stats dd{font-size:13px}.overview-side{display:block}.section-heading label{max-width:145px}.section-heading select{max-width:95px}.now-row{grid-template-columns:20px 48px minmax(0,1fr)}.now-row time{display:none}.report-periods{width:100%}.report-periods button{flex:1}.report-hero{gap:16px}.report-total strong{font-size:28px}.library-toolbar{align-items:stretch;flex-direction:column}.library-tabs{overflow:auto}.library-toolbar label{align-self:flex-end}.library-summary{gap:9px}.library-summary div{padding-right:9px}.library-list li{grid-template-columns:22px 32px minmax(0,1fr) 48px;padding:4px}.library-list .square-cover{width:30px}}
@media(prefers-reduced-motion:reduce){.play-cell b,.now-section.is-playing #now-state::before{animation:none!important}}