:root{--ink:#1c1917;--ink-muted:#57534e;--ink-tertiary:#a8a29e;--bg:#fafaf9;--surface:#f5f5f4;--rule:#e7e5e4;--rule-strong:#d6d3d1;--accent:#92400e;--accent-hover:#78350f;--accent-subtle:#fef3c7;--accent-surface:#fde68a;--accent-ink:#fff;--unplayed:#dc2626;--unplayed-subtle:#fee2e2;--font-xs:.75rem;--font-sm:.875rem;--font-base:1rem;--font-lg:1.125rem;--font-xl:1.25rem;--font-2xl:1.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--measure:60ch;scrollbar-color:var(--rule) transparent;caret-color:var(--accent);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--ink:#fafaf9;--ink-muted:#d6d3d1;--ink-tertiary:#a8a29e;--bg:#1c1917;--surface:#292524;--rule:#44403c;--rule-strong:#57534e;--accent:#fbbf24;--accent-hover:#fcd34d;--accent-subtle:#78350f;--accent-surface:#92400e;--accent-ink:#1c1917;--unplayed:#f87171;--unplayed-subtle:#7f1d1d}}*,:before,:after{box-sizing:border-box}html{overflow-x:clip}body{-webkit-font-smoothing:antialiased;color:var(--ink);background:var(--bg);margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}.screen{min-height:100vh}p{text-wrap:pretty}h1,h2,h3{text-wrap:balance}::selection{background:var(--accent);color:var(--accent-ink)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:var(--accent);text-underline-offset:.18em}.num{font-variant-numeric:tabular-nums}button,[role=button],summary,select,input[type=checkbox],input[type=radio]{min-height:44px}button{min-width:44px}input,select,textarea{font:inherit;font-size:max(1rem,16px)}img,video,canvas,svg{max-width:100%;height:auto}pre{overflow-x:auto}@media (width<=480px){.screen{padding-inline:1rem}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.app{flex-direction:column;min-height:100vh;display:flex}.main-content{width:100%;max-width:75rem;padding:var(--space-6) var(--space-4);flex:1;margin:0 auto}@media (width>=768px){.main-content{padding:var(--space-8) var(--space-6)}}.page-title{font-size:var(--font-2xl);color:var(--ink);font-weight:700;line-height:1.4}.btn-primary,.btn-secondary,.btn-icon,.btn-back,.filter-toggle{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--font-base);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-5);border:2px solid #0000;font-weight:600;display:inline-flex}@media (prefers-reduced-motion:no-preference){.btn-primary,.btn-secondary,.btn-icon,.btn-back,.filter-toggle{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}}.btn-primary{background-color:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn-primary:hover,.btn-primary:focus-visible{background-color:var(--accent-hover);border-color:var(--accent-hover)}.btn-secondary{color:var(--ink);border-color:var(--rule-strong);background-color:#0000}.btn-secondary:hover,.btn-secondary:focus-visible{border-color:var(--ink-muted);background-color:var(--surface)}.btn-icon{min-width:44px;padding:var(--space-3);color:var(--ink-muted);background-color:#0000;border-color:#0000}.btn-icon:hover,.btn-icon:focus-visible{color:var(--ink);background-color:var(--surface)}.btn-icon.btn-delete:hover,.btn-icon.btn-delete:focus-visible{color:var(--unplayed)}.btn-back{min-width:44px;padding:var(--space-2);color:var(--ink-muted);background-color:#0000;border-color:#0000}.btn-back:hover,.btn-back:focus-visible{color:var(--ink);background-color:var(--surface)}.filter-toggle{font-size:var(--font-sm);color:var(--ink);border-color:var(--rule-strong);background-color:#0000;font-weight:500}.filter-toggle:hover,.filter-toggle:focus-visible{border-color:var(--ink-muted);background-color:var(--surface)}.filter-toggle.active{background-color:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.filter-toggle.active:hover,.filter-toggle.active:focus-visible{background-color:var(--accent-hover);border-color:var(--accent-hover)}.album-list-container{gap:var(--space-8);flex-direction:column;display:flex}.list-header{gap:var(--space-6);flex-direction:column;display:flex}.header-top,.filter-bar{justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.collection-stats{align-items:center;gap:var(--space-6);font-size:var(--font-sm);color:var(--ink-muted);display:flex}.stat-item{align-items:center;gap:var(--space-2);display:flex}.stat-value{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}.unplayed-stat,.unplayed-stat .stat-value{color:var(--unplayed)}.unplayed-dot{background-color:var(--unplayed);border-radius:50%;width:8px;height:8px;display:inline-block}.albums-grid{gap:var(--space-4);grid-template-columns:1fr;display:grid}@media (width>=641px){.albums-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.albums-grid{gap:var(--space-5)}}.album-card{background-color:var(--bg);border:2px solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);gap:var(--space-4);flex-direction:column;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.album-card{transition:border-color .15s,box-shadow .15s,transform .15s}}.album-card:hover{border-color:var(--accent-surface);box-shadow:var(--shadow-md);transform:scale(1.01)}.album-card:focus-within{border-color:var(--accent)}.unplayed-indicator{top:var(--space-4);right:var(--space-4);position:absolute}.album-content{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.album-title{font-size:var(--font-lg);color:var(--ink);font-weight:600;line-height:1.4}.album-artist{font-size:var(--font-base);color:var(--ink);font-weight:400}.album-year{font-size:var(--font-xs);color:var(--ink-muted);background-color:var(--surface);padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums;width:fit-content;font-weight:500;display:inline-block}.album-actions{gap:var(--space-2);justify-content:flex-end;display:flex}.empty-state{text-align:center;padding:var(--space-12) var(--space-4);justify-content:center;align-items:center;gap:var(--space-6);flex-direction:column;display:flex}.empty-icon{opacity:.8;font-size:4rem;line-height:1}.empty-title{font-size:var(--font-xl);color:var(--ink);font-weight:600}.empty-description{font-size:var(--font-base);color:var(--ink-muted);max-width:32rem;line-height:1.6}.add-edit-container{max-width:42rem;margin:0 auto}.form-header{align-items:center;gap:var(--space-4);margin-bottom:var(--space-8);display:flex}.album-form{gap:var(--space-6);background-color:var(--bg);border:2px solid var(--rule);border-radius:var(--radius-lg);padding:var(--space-8);box-shadow:var(--shadow-sm);flex-direction:column;display:flex}@media (width<=640px){.album-form{padding:var(--space-6)}}.form-group{gap:var(--space-2);flex-direction:column;display:flex}.form-label{font-size:var(--font-sm);color:var(--ink);font-weight:500}.form-input{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:var(--font-base);color:var(--ink);background-color:var(--bg);border:2px solid var(--rule);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);width:100%;min-height:44px;font-weight:400}@media (prefers-reduced-motion:no-preference){.form-input{transition:border-color .15s,box-shadow .15s}}.form-input::placeholder{color:var(--ink-tertiary)}.form-input:hover:not(:disabled){border-color:var(--rule-strong)}.form-input:focus{border-color:var(--accent);outline:none}.form-input.error,.form-input.error:focus{border-color:var(--unplayed)}.error-message{font-size:var(--font-sm);color:var(--unplayed);font-weight:500}.error-banner{background-color:var(--unplayed-subtle);color:var(--unplayed);padding:var(--space-4);border-radius:var(--radius-md);border:2px solid var(--unplayed);font-size:var(--font-sm);font-weight:500}.checkbox-label{align-items:center;gap:var(--space-3);cursor:pointer;min-height:44px;padding:var(--space-2) 0;display:flex}.checkbox-input{opacity:0;width:0;height:0;position:absolute}.checkbox-custom{border:2px solid var(--rule-strong);border-radius:var(--radius-sm);background-color:var(--bg);flex-shrink:0;width:24px;height:24px;position:relative}@media (prefers-reduced-motion:no-preference){.checkbox-custom{transition:background-color .15s,border-color .15s}}.checkbox-input:checked+.checkbox-custom{background-color:var(--accent);border-color:var(--accent)}.checkbox-input:checked+.checkbox-custom:after{content:"";border:solid var(--accent-ink);border-width:0 2px 2px 0;width:6px;height:11px;position:absolute;top:3px;left:7px;transform:rotate(45deg)}.checkbox-input:focus-visible+.checkbox-custom{outline:2px solid var(--accent);outline-offset:2px}.checkbox-label:hover .checkbox-custom{border-color:var(--accent)}.checkbox-text{font-size:var(--font-base);color:var(--ink)}.form-actions{gap:var(--space-4);margin-top:var(--space-4);flex-wrap:wrap;justify-content:flex-end;display:flex}@media (width<=640px){.form-actions{flex-direction:column-reverse}.form-actions button{width:100%}}input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}@media (width<=480px){body,.container,[class*=container],section,header,footer,nav,main,article{padding-inline:max(1rem,16px)}}