:root{--color-bg: #0f0e0c;--color-surface: #1a1814;--color-surface-light: #2a2620;--color-accent: #d4a574;--color-accent-dark: #9d7d54;--color-text: #f5f1ed;--color-text-secondary: #b8b0a8;--color-text-muted: #7a7268;--color-border: #3a3530;--font-display: "Playfair Display", serif;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--transition: all .3s cubic-bezier(.4, 0, .2, 1);--transition-fast: all .2s ease-out}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:14px;line-height:1.6;letter-spacing:.3px;display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{background:linear-gradient(135deg,#1a1814,#252019);border-bottom:2px solid var(--color-accent);padding:var(--spacing-sm) var(--spacing-md);flex-shrink:0;z-index:100;backdrop-filter:blur(10px);position:relative;overflow:hidden}.app-header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:.5}.header-content{max-width:1600px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-md)}.header-title{display:flex;flex-direction:column;gap:2px;align-items:flex-start}.app-title{font-family:var(--font-display);font-size:1.4rem;font-weight:800;letter-spacing:-.5px;color:var(--color-accent);position:relative}.app-title:after{content:"\266a";margin-left:8px;font-size:1.2rem;animation:samba-bounce 1.2s ease-in-out infinite}@keyframes samba-bounce{0%,to{transform:translateY(0) rotate(0);opacity:1}50%{transform:translateY(-4px) rotate(15deg);opacity:.8}}.app-subtitle{font-size:.75rem;color:var(--color-text-secondary);font-weight:400;letter-spacing:1.5px;text-transform:uppercase}.header-stats{display:flex;flex-direction:row;align-items:center;gap:6px;flex-shrink:0}.music-count,.header-stats span{font-size:.8rem;color:var(--color-accent);font-weight:600;letter-spacing:.5px;white-space:nowrap;background:#d4a5741a;padding:4px 12px;border-radius:20px;border:1px solid var(--color-accent)}.app-layout{display:flex;flex:1;overflow:hidden;gap:1px;background:var(--color-border)}.main-content{flex:1;background:var(--color-bg);display:flex;flex-direction:column;overflow:hidden;min-width:0}.tracks-panel{width:380px;background:var(--color-surface);border-left:1px solid var(--color-border);display:flex;flex-direction:column;flex-shrink:0;position:relative;transition:width .3s ease}.tracks-panel.hidden{width:0;border-left:none;overflow:hidden}.filters-section{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);flex-shrink:0;background:linear-gradient(180deg,rgba(212,165,116,.08) 0%,transparent 100%);display:flex;flex-direction:column;gap:var(--spacing-sm)}.search-input{width:100%;padding:8px 100px 8px 12px;background:var(--color-surface-light);border:1px solid var(--color-border);border-radius:4px;color:var(--color-text);font-family:var(--font-body);font-size:.85rem;transition:var(--transition-fast)}.search-input::placeholder{color:var(--color-text-muted)}.search-input:focus{outline:none;border-color:var(--color-accent);background:var(--color-bg);box-shadow:0 0 0 3px #d4a5741a}.search-group{display:flex;flex-direction:column;gap:4px}.search-wrapper{position:relative}.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:.8rem;line-height:1;padding:4px;display:none;border-radius:50%;transition:var(--transition-fast);align-items:center;justify-content:center}.search-clear.visible{display:flex}.search-clear:hover{color:var(--color-text);background:var(--color-surface-light)}.search-count{position:absolute;right:30px;top:50%;transform:translateY(-50%);font-size:.68rem;color:var(--color-text-muted);white-space:nowrap;pointer-events:none;display:none}.search-count.visible{display:block}.decade-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;width:100%;align-items:center;justify-content:center}.decade-btn{padding:6px 10px;background:var(--color-surface-light);border:1px solid var(--color-border);color:var(--color-text-secondary);border-radius:4px;font-size:.9375em;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.decade-btn:hover{background:var(--color-surface);border-color:var(--color-accent);color:var(--color-accent);transform:translateY(-2px)}.decade-btn.active{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);font-weight:600;box-shadow:0 6px 16px #d4a5744d}.decade-btn--globe{background:#1a2535;border-color:#2a4a7f;color:#7aadff;display:flex;align-items:center;justify-content:center;padding:6px 10px;text-decoration:none}.decade-btn--globe:hover{background:#1e2e45;border-color:#4a8adf;color:#a8ccff;transform:translateY(-2px)}.albums-grid{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}.albums-grid-inner{position:relative}.album-item{display:flex;flex-direction:column;gap:var(--spacing-sm);cursor:pointer;align-items:stretch;position:relative;contain:content}.album-item:hover .album-cover-thumb{box-shadow:0 16px 40px #d4a5744d,0 0 20px #d4a57426;transform:scale(1.04)}.album-item:hover .album-item-info{opacity:1}.album-item.active{animation:samba-pulse 1.5s ease-in-out infinite}@keyframes samba-pulse{0%,to{filter:drop-shadow(0 0 0 rgba(212,165,116,0))}50%{filter:drop-shadow(0 0 8px rgba(212,165,116,.2))}}.album-item.active .album-cover-thumb{box-shadow:0 0 0 3px var(--color-accent),0 16px 40px #d4a57466;transform:scale(1.06)}.album-item.active .album-item-title{color:var(--color-accent);font-weight:700}.album-cover-thumb{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--color-surface-light);box-shadow:0 4px 12px #00000080;transition:var(--transition)}.album-item-info{display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:0}.album-item-title{font-size:.8rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.album-item-meta{font-size:.7rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:var(--transition-fast)}.album-header{padding:var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;flex-direction:column;gap:var(--spacing-md);align-items:center;flex-shrink:0;overflow-y:auto;max-height:350px}.album-header.empty{display:none}.album-cover-large{width:160px;height:160px;object-fit:cover;border-radius:8px;background:var(--color-surface-light);box-shadow:0 8px 24px #00000080}.album-header-info{text-align:center;width:100%}.album-header-info h2{font-family:var(--font-display);font-size:1.4rem;margin-bottom:var(--spacing-xs);color:var(--color-text);line-height:1.3}.album-header-info p{font-size:.85rem;color:var(--color-text-secondary);margin-bottom:2px}.year-link{cursor:pointer}.year-link:hover{color:var(--color-accent);text-decoration:underline}.artist-link{cursor:pointer}.artist-link:hover{color:var(--color-accent);text-decoration:underline}.track-list{flex:1;overflow-y:auto;overflow-x:hidden;list-style:none;padding:0;margin:0}.track-item{display:flex;align-items:center;padding:7px 16px;border-bottom:1px solid var(--color-border);cursor:pointer;transition:var(--transition-fast);gap:var(--spacing-md);contain:content}.track-item:hover{background:var(--color-surface-light)}.track-item.playing{background:#d4a57426}.track-item.playing .track-num:before{content:"\25b6";color:var(--color-accent);margin-right:4px;font-size:.7rem}.track-num{color:var(--color-text-muted);font-size:.75rem;min-width:20px;text-align:right;font-variant-numeric:tabular-nums}.track-item.playing .track-num{color:var(--color-accent)}.track-details{flex:1;min-width:0}.track-title{font-size:.8rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;line-height:1.3}.track-item.playing .track-title{color:var(--color-accent);font-weight:500}.track-artist{font-size:.72rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.track-artist.artist-link{cursor:pointer}.track-artist.artist-link:hover{color:var(--color-accent);text-decoration:underline}.track-duration{color:var(--color-text-muted);font-size:.7rem;font-variant-numeric:tabular-nums;text-align:right;min-width:32px}.player-bar{background:var(--color-surface);border-top:2px solid var(--color-accent);padding:8px var(--spacing-lg);flex-shrink:0;z-index:200;backdrop-filter:blur(10px);position:relative}.player-bar:before{content:"";position:absolute;bottom:100%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);opacity:.3}.player-content{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 2fr minmax(0,1fr);gap:var(--spacing-lg);align-items:center}.now-playing-compact{display:flex;gap:var(--spacing-md);align-items:center;min-width:250px;flex-shrink:0}.player-cover{width:48px;height:48px;object-fit:cover;border-radius:4px;background:var(--color-surface-light);flex-shrink:0;display:block;border:1px solid var(--color-border)}.player-cover.placeholder{object-fit:contain;padding:4px;background:var(--color-surface)}.player-info{flex:1;min-width:0}.player-info h3{font-size:.9rem;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-weight:500}.player-info p{font-size:.75rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.player-controls{display:flex;flex-direction:column;gap:4px;align-items:center}.controls-buttons{display:flex;gap:4px;align-items:center;flex-shrink:0}.btn{background:none;border:none;color:var(--color-accent);font-size:1rem;cursor:pointer;padding:6px;transition:var(--transition-fast);border-radius:6px;display:flex;align-items:center;justify-content:center}.btn:hover{color:var(--color-text);background:var(--color-surface-light);transform:scale(1.1)}.btn:active{transform:scale(.95)}.btn-play{padding:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);color:var(--color-bg);border-radius:50%;width:36px;height:36px}.icon-play,.icon-pause{display:flex;pointer-events:none}.btn-play .icon-pause,.btn-play.playing .icon-play{display:none}.btn-play.playing .icon-pause{display:flex}.btn-play.loading .icon-play,.btn-play.loading .icon-pause{display:none}.btn-play.loading:after{content:"";width:14px;height:14px;border:2px solid rgba(0,0,0,.25);border-top-color:var(--color-bg);border-radius:50%;animation:spin .7s linear infinite;pointer-events:none}.overlay-btn-play.loading:after{width:20px;height:20px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes marquee-scroll{0%{transform:translate(0)}10%{transform:translate(0)}85%{transform:translate(var(--marquee-distance))}95%{transform:translate(var(--marquee-distance))}to{transform:translate(0)}}.marquee-active{overflow:hidden;text-overflow:clip}.marquee-active .marquee-inner{display:inline-block;white-space:nowrap;animation:marquee-scroll var(--marquee-duration, 12s) linear infinite;animation-delay:1.5s}@media(prefers-reduced-motion:reduce){.marquee-active .marquee-inner{animation:none}}.btn-play:hover{background:linear-gradient(135deg,var(--color-accent-dark) 0%,var(--color-accent) 100%);color:var(--color-bg);box-shadow:0 4px 16px #d4a5744d}.btn-play.playing{background:linear-gradient(135deg,var(--color-accent-dark) 0%,var(--color-accent) 100%)}.progress-container{width:100%;display:flex;align-items:center;gap:var(--spacing-sm)}.time{font-size:.8rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums;min-width:35px}.progress-bar{flex:1;height:4px;background:var(--color-border);border-radius:2px;cursor:pointer;position:relative;transition:height .1s ease}.progress-bar:before{content:"";position:absolute;inset:-12px 0}.progress-bar:hover{height:6px}.progress-fill{height:100%;background:var(--color-accent);border-radius:2px;width:0%;transition:width .1s linear;position:relative}.progress-fill:after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--color-accent);border-radius:50%;opacity:0;transition:opacity .15s,transform .15s;box-shadow:0 1px 4px #00000080}.progress-bar.has-progress .progress-fill:after{opacity:1}.progress-bar:hover .progress-fill:after{transform:translateY(-50%) scale(1.25)}.library-stats{display:flex;gap:var(--spacing-xs);align-items:center;justify-self:end;padding-left:var(--spacing-lg);border-left:1px solid var(--color-border)}.btn-extra{color:var(--color-text-muted);background:none;border:none;padding:6px;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.btn-extra:hover{color:var(--color-text)}.btn-extra.active{color:var(--color-accent)}.volume-control{display:flex;align-items:center;gap:6px;margin-left:4px;color:var(--color-text-muted)}.volume-slider{-webkit-appearance:none;appearance:none;width:80px;height:3px;border-radius:2px;background:var(--color-border);outline:none;cursor:pointer;accent-color:var(--color-accent)}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--color-accent);cursor:pointer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.grid-skeleton{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:24px;padding:24px;z-index:1;background:var(--color-bg);pointer-events:none;overflow:hidden}.skeleton-card{aspect-ratio:1;border-radius:8px;background:linear-gradient(90deg,var(--color-surface-light) 25%,var(--color-border) 50%,var(--color-surface-light) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite linear}.now-playing-overlay{display:none}audio{display:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@media(max-width:1024px){.tracks-panel{width:320px}.album-cover-large{width:140px;height:140px}.album-header{padding:var(--spacing-md)}.album-header-info h2{font-size:1.3rem}}.mobile-only,.mobile-track-drawer{display:none}@media(max-width:768px){.app-header{padding:0 var(--spacing-sm);height:44px;display:flex;align-items:center}.header-content{flex-direction:row;align-items:center;gap:0;width:100%}.header-title{flex-direction:row;align-items:center;gap:var(--spacing-xs)}.app-title{font-size:1.1rem}.app-subtitle{display:none}.header-stats{margin-left:auto;gap:4px}.music-count,.header-stats span{font-size:.68rem;padding:2px 7px}.music-count{display:none}.app-layout{flex-direction:column;gap:0;flex:1;overflow:hidden}.main-content{flex:1;height:auto;border-bottom:none;overflow:hidden}.tracks-panel{display:none!important}.player-bar{padding:10px var(--spacing-sm) 8px;flex-shrink:0}.player-content{grid-template-columns:1fr;gap:var(--spacing-xs);justify-items:center;padding:0;height:auto;align-items:center}.now-playing-compact{display:none}.player-controls{justify-content:center}.player-cover{width:40px;height:40px;flex-shrink:0}.player-info h3{font-size:.8rem}.player-info p{font-size:.7rem}.player-controls{flex-direction:column;gap:2px;width:100%;align-items:center;min-width:0}.controls-buttons{width:auto;justify-content:center;gap:4px}.btn{font-size:1rem;padding:6px}.library-stats{display:none}.decade-btn{padding:4px 8px;font-size:.78rem}.decade-buttons{gap:4px;margin-top:6px}.filters-section{padding:var(--spacing-xs) var(--spacing-sm);padding-bottom:6px;gap:0}.mobile-only{display:flex}#btn-tracklist{color:var(--color-accent);background:none;border:none;font-size:1.1rem;padding:6px 8px;border-radius:4px;cursor:pointer;line-height:1}.mobile-track-drawer{display:flex;flex-direction:column;max-height:0;overflow:hidden;transition:max-height .3s ease,border-top-color .3s ease;background:var(--color-surface);border-top:1px solid transparent}.mobile-track-drawer.open{border-top-color:var(--color-border)}.mobile-track-drawer.open{max-height:65dvh}.drawer-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--color-border);flex-shrink:0;background:var(--color-surface-light)}.drawer-cover{width:44px;height:44px;object-fit:cover;border-radius:4px;flex-shrink:0;background:var(--color-bg)}.drawer-album-info{flex:1;min-width:0}.drawer-album-title{font-size:.85rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-album-meta{font-size:.72rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer-close{background:none;border:none;color:var(--color-text-muted);font-size:1rem;cursor:pointer;padding:8px;border-radius:4px;flex-shrink:0;transition:var(--transition-fast);line-height:1}.drawer-close:hover{color:var(--color-text)}.drawer-track-list{list-style:none;padding:0;margin:0;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}.drawer-track-list .track-item{padding:10px var(--spacing-sm)}}@media(max-width:480px){.album-item-title{font-size:.68rem}.album-item-meta{font-size:.6rem}.decade-buttons{gap:4px}.decade-btn{padding:5px 8px;font-size:.78rem}.filters-section{padding:var(--spacing-xs) var(--spacing-sm);padding-bottom:6px;gap:0}}@media(max-width:768px){.now-playing-overlay{display:flex;flex-direction:column;align-items:center;position:fixed;inset:0;z-index:500;background:linear-gradient(180deg,#252019,#0f0e0c 60%);padding:env(safe-area-inset-top,0) 28px 32px;transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow:hidden}.now-playing-overlay.open{transform:translateY(0)}.overlay-header{width:100%;display:flex;justify-content:flex-start;padding:14px 0 6px;flex-shrink:0}.overlay-close{background:none;border:none;color:var(--color-text-secondary);font-size:1.4rem;cursor:pointer;padding:6px 8px;border-radius:6px;transition:var(--transition-fast);line-height:1}.overlay-close:hover{color:var(--color-text)}.overlay-cover{width:min(72vw,280px);height:min(72vw,280px);object-fit:cover;border-radius:12px;box-shadow:0 24px 64px #000000b3;margin:12px 0 24px;flex-shrink:0}.overlay-info{text-align:center;width:100%;margin-bottom:24px;flex-shrink:0}.overlay-track-title{font-size:1.1rem;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}.overlay-track-artist{font-size:.875rem;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overlay-progress-wrap{width:100%;margin-bottom:28px;flex-shrink:0}#overlay-progress-bar{height:4px;cursor:pointer}.overlay-times{display:flex;justify-content:space-between;margin-top:8px;font-size:.72rem;color:var(--color-text-muted);font-variant-numeric:tabular-nums}.overlay-controls{display:flex;gap:32px;align-items:center;justify-content:center;flex-shrink:0}.overlay-controls .btn-control{color:var(--color-text-secondary);font-size:1.4rem;padding:8px}.overlay-controls .btn-control:hover{color:var(--color-text)}.overlay-btn-play{width:60px;height:60px}.grid-skeleton{grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;padding:8px}}@media(max-width:480px){.grid-skeleton{grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;padding:6px}}