@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Space+Grotesk:wght@700&display=swap";@import "https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap";body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:default;background-color:#050505;height:100vh;margin:0;font-family:Inter,system-ui,sans-serif;overflow:hidden}#root{width:100%;height:100vh}:root{--bg-surface-hover:#ffffff0d;--bg-surface-active:#ffffff1a;--bg-surface-subtle:#ffffff05;--bg-surface-elevated:#ffffff08;--bg-overlay:#00000080;--bg-overlay-strong:#000c;--bg-overlay-toast:#1e1e23d9;--bg-dropdown:#121212b8;--border-subtle:var(--bg-surface-hover);--border-medium:#ffffff1a;--border-strong:#fff3;--border-divider:#ffffff14;--shadow-soft:0 8px 24px #0006;--shadow-dropdown:0 8px 32px #0009;--shadow-strong:0 40px 80px #000c;--accent-primary-alpha-10:#e326361a;--accent-primary-alpha-20:#e3263633;--accent-primary-alpha-70:#e32636b3;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-instant:80ms;--duration-fast:.16s;--duration-normal:.24s;--duration-slow:.4s}*{scrollbar-width:none;-ms-overflow-style:none;-webkit-tap-highlight-color:transparent}button,[role=button],a,.clickable{cursor:pointer}.draggable{cursor:grab}.draggable:active{cursor:grabbing}:disabled,.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;transform:none}:focus-visible{outline:2px solid var(--accent-primary-alpha-70);outline-offset:3px;border-radius:4px}:focus:not(:focus-visible){outline:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.fade-transition,.toast-enter,.backdrop,.modal-enter{transition-property:opacity!important;transition-duration:.16s!important}}.icon-button{position:relative}.icon-button:after{content:"";pointer-events:auto;z-index:1;width:44px;height:44px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}::-webkit-scrollbar{display:none}@keyframes enterUp{0%{opacity:0;transform:translateY(16px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes popIn{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.enter{animation:enterUp var(--duration-normal) var(--ease-spring) both}.content-exit{animation:exitDown .16s var(--ease-out) forwards}.content-enter{animation:enterUp .24s var(--duration-spring) both}@keyframes exitDown{to{opacity:0;transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--bg-surface-elevated) 25%, var(--border-divider) 50%, var(--bg-surface-elevated) 75%);animation:shimmer 1.6s var(--ease-out) infinite;border-radius:inherit;background-size:200% 100%}@keyframes dropdownEnter{0%{opacity:0;transform:scale(.95)translateY(-6px)}to{opacity:1;transform:scale(1)translateY(0)}}.dropdown{z-index:50;background:var(--bg-dropdown);-webkit-backdrop-filter:blur(20px)saturate(180%);border:1px solid var(--border-divider);min-width:140px;max-width:240px;box-shadow:0 8px 32px var(--shadow-dropdown);border-radius:12px;padding:6px;animation:.16s cubic-bezier(.34,1.56,.64,1) both dropdownEnter;position:absolute}.dropdown-item{height:40px;color:var(--text-primary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-out);border-radius:6px;align-items:center;gap:8px;padding:0 14px;font-size:.85rem;display:flex}.dropdown-item:hover,.dropdown-item:focus{background-color:var(--bg-surface-hover)}.dropdown-divider{background:var(--bg-surface-hover);height:1px;margin:4px 0}.dropdown-section-title{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.1em;padding:4px 14px;font-size:.7rem;font-weight:700}[data-tooltip]{position:relative}[data-tooltip]:hover{z-index:100000}[data-tooltip]:before,[data-tooltip]:after{visibility:hidden;opacity:0;transition:opacity .12s var(--ease-out), transform .12s var(--ease-out), visibility 0s linear .12s;pointer-events:none;z-index:99999;position:absolute}[data-tooltip]:after{content:attr(data-tooltip);background:var(--bg-overlay-toast);-webkit-backdrop-filter:blur(8px);color:#fff;white-space:nowrap;border-radius:8px;width:max-content;max-width:200px;height:auto;padding:4px 8px;font-size:12px;font-weight:400;line-height:1;top:auto;bottom:calc(100% + 12px);left:50%;transform:translate(-50%)translateY(4px)scale(.95)}[data-tooltip]:before{content:"";border:4px solid #0000;border-top-color:var(--bg-overlay-toast);margin-left:-4px;bottom:calc(100% + 8px);left:50%;transform:translateY(4px)}[data-tooltip]:hover:before,[data-tooltip]:hover:after{visibility:visible;opacity:1;transition:opacity .12s var(--ease-out) .4s, transform .12s var(--ease-out) .4s, visibility 0s linear .4s}[data-tooltip]:hover:after{transform:translate(-50%)translateY(0)scale(1)}[data-tooltip]:hover:before{transform:translateY(0)}[data-tooltip-align=right]:after{left:auto;right:0;transform:translate(0)translateY(4px)scale(.95)}[data-tooltip-align=right]:hover:after{transform:translate(0)translateY(0)scale(1)}[data-tooltip-align=right]:before{margin-left:0;left:auto;right:12px}[data-tooltip-align=left]:after{left:0;transform:translate(0)translateY(4px)scale(.95)}[data-tooltip-align=left]:hover:after{transform:translate(0)translateY(0)scale(1)}[data-tooltip-align=left]:before{margin-left:0;left:12px}@media (hover:none) and (pointer:coarse){[data-tooltip]:after,[data-tooltip]:before{display:none!important}}@keyframes backdropEnter{0%{opacity:0}to{opacity:1}}@keyframes modalEnter{0%{opacity:0;transform:scale(.94)translateY(8px)}to{opacity:1;transform:scale(1)translateY(0)}}.backdrop{animation:.2s cubic-bezier(.16,1,.3,1) both backdropEnter}.modal-enter{animation:.24s cubic-bezier(.34,1.56,.64,1) both modalEnter}.skeleton{background:linear-gradient(90deg, var(--bg-surface-elevated) 25%, var(--border-divider) 50%, var(--bg-surface-elevated) 75%);border-radius:inherit;pointer-events:none;background-size:200% 100%;animation:1.6s ease-in-out infinite shimmer}@keyframes spin{to{transform:rotate(360deg)}}.empty-state-card{background:var(--bg-surface-subtle);border:1px solid var(--bg-surface-hover);border-radius:24px;padding:40px}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}.app-container{background-color:var(--bg-main);height:100vh;color:var(--text-primary);flex-direction:row;display:flex;overflow:hidden}.theme-night-run{--bg-surface-hover:#ffffff0d;--bg-surface-active:var(--border-medium);--bg-surface-subtle:#ffffff05;--bg-surface-elevated:#ffffff08;--bg-overlay:#00000080;--bg-overlay-strong:#000c;--bg-overlay-toast:#1e1e23d9;--bg-dropdown:#121212b8;--border-subtle:var(--bg-surface-hover);--border-medium:var(--border-medium);--border-strong:#fff3;--border-divider:#ffffff14;--shadow-soft:0 8px 24px #0006;--shadow-dropdown:0 8px 32px #0009;--shadow-strong:0 40px 80px #000c;--accent-primary-alpha-10:#e326361a;--accent-primary-alpha-20:#e3263633;--bg-main:#050505;--bg-card:#121212;--bg-artwork:#1c1c1c;--bg-circle:#2a2a2a;--accent-primary:#e32636;--text-primary:#fff;--text-secondary:gray;--text-tertiary:#4a4a4a;--accent-warning:#f5a623}.top-nav{justify-content:space-between;align-items:center;padding:32px 40px;display:flex}.logout-btn{color:var(--text-secondary);border:1px solid var(--border-medium);cursor:pointer;background-color:#0000;border-radius:20px;padding:8px 16px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:400;transition:color .2s,border-color .2s}.logout-btn:hover{color:var(--text-primary);border-color:#fff3}.typo-logo{letter-spacing:.15em;color:var(--text-primary);align-items:center;gap:12px;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:700;display:flex}.logo-dot{color:var(--accent-primary)}.logo-icon{border-radius:6px;width:28px;height:28px}.login-logo .logo-icon{border-radius:8px;width:40px;height:40px}.content-wrapper{flex-grow:1;justify-content:center;align-items:center;padding:0 20px 60px;display:flex}.home-page-root{padding:40px}.home-hero{background-color:var(--bg-card);border:1px solid var(--bg-surface-hover);width:100%;box-shadow:0 40px 80px var(--bg-overlay-strong);border-radius:20px;align-items:center;gap:60px;margin-bottom:60px;padding:60px;display:flex;position:relative;overflow:hidden}.hero-spotlight{z-index:1;pointer-events:none;background:radial-gradient(circle,#e3263626 0%,#0000 70%);width:80%;height:200%;position:absolute;top:-50%;left:-20%}.hero-artwork-container{z-index:2;flex-shrink:0;position:relative}.hero-artwork{background-color:var(--bg-artwork);border:1px solid var(--border-medium);background-position:50%;background-size:cover;border-radius:16px;justify-content:center;align-items:center;width:320px;height:320px;display:flex;box-shadow:0 30px 60px #000000e6}.hero-content{z-index:2;flex-direction:column;flex-grow:1;justify-content:center;display:flex;position:relative}.hero-title{letter-spacing:-.02em;color:var(--text-primary);text-shadow:0 10px 30px var(--bg-overlay);-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;margin:0 0 8px;font-family:Space Grotesk,sans-serif;font-size:5.2rem;font-weight:700;line-height:1.1;display:-webkit-box;overflow:hidden}.hero-actions{align-items:center;gap:24px;display:flex}.primary-play-btn{background-color:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;display:flex;box-shadow:0 0 30px #e3263680,inset 0 0 10px #ffffff4d}.primary-play-btn:hover{background-color:#f02838;transform:scale(1.05);box-shadow:0 0 50px #e32636cc,inset 0 0 15px #ffffff80}.primary-play-btn:active{transform:scale(.95)}.carousel-section{margin-bottom:40px}.carousel-title{color:var(--text-primary);letter-spacing:-.02em;margin-bottom:16px;font-size:1.5rem;font-weight:700}.carousel-container{contain:layout style;align-items:center;margin:0 -40px;display:flex;position:relative;container:carousel/inline-size}.carousel-row{--cards-per-view:2}@container carousel (width>=500px){.carousel-row{--cards-per-view:3}}@container carousel (width>=700px){.carousel-row{--cards-per-view:4}}@container carousel (width>=900px){.carousel-row{--cards-per-view:5}}@container carousel (width>=1100px){.carousel-row{--cards-per-view:6}}@container carousel (width>=1300px){.carousel-row{--cards-per-view:7}}@container carousel (width>=1500px){.carousel-row{--cards-per-view:8}}@container carousel (width>=1700px){.carousel-row{--cards-per-view:9}}@container carousel (width>=1900px){.carousel-row{--cards-per-view:10}}.carousel-row{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;will-change:scroll-position;gap:20px;width:100%;padding-bottom:16px;padding-left:40px;padding-right:40px;scroll-padding-left:40px;scroll-padding-right:40px;display:flex;overflow-x:auto}.carousel-row:after{content:"";flex:0 0 20px}.carousel-row::-webkit-scrollbar{display:none}.carousel-row{-ms-overflow-style:none;scrollbar-width:none}.carousel-arrow{color:#fff;z-index:10;opacity:0;pointer-events:none;border:none;justify-content:center;align-items:center;width:40px;transition:opacity .3s,background .3s;display:flex;position:absolute;top:0;bottom:16px}.carousel-arrow svg{pointer-events:auto;cursor:pointer;box-sizing:border-box;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0009;border-radius:50%;width:40px;height:40px;padding:8px;transition:background .2s,transform .2s}.carousel-arrow svg:hover{background:#000000e6;transform:scale(1.1)}.carousel-container:hover .carousel-arrow,.carousel-arrow:hover{opacity:1}.carousel-arrow.left{background:linear-gradient(90deg,#121212e6 0%,#12121200 100%);border-top-right-radius:8px;border-bottom-right-radius:8px;left:0}.carousel-arrow.left:hover{background:linear-gradient(90deg,#121212 0%,#12121280 100%)}.carousel-arrow.right{background:linear-gradient(270deg,#121212e6 0%,#12121200 100%);border-top-left-radius:8px;border-bottom-left-radius:8px;right:0}.carousel-arrow.right:hover{background:linear-gradient(270deg,#121212 0%,#12121280 100%)}.carousel-card{width:calc((100cqw - 80px - ((var(--cards-per-view) - 1) * 20px)) / var(--cards-per-view));scroll-snap-align:start;cursor:pointer;flex-direction:column;flex:none;gap:12px;transition:transform .2s;display:flex;position:relative}.carousel-artwork{aspect-ratio:1;background-color:var(--bg-artwork);width:100%;height:auto;box-shadow:0 8px 24px var(--shadow-soft);background-position:50%;background-size:cover;border-radius:16px;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.carousel-play-overlay{background-color:var(--bg-overlay);opacity:0;color:#fff;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .2s;display:flex;position:absolute;top:0;left:0}.carousel-card:hover .carousel-play-overlay,.carousel-play-overlay.active{opacity:1}@keyframes audioWave{0%{transform:scaleY(.3)}25%{transform:scaleY(1)}50%{transform:scaleY(.4)}75%{transform:scaleY(.8)}to{transform:scaleY(.3)}}.playing-bars{justify-content:center;align-items:center;gap:4px;height:24px;display:flex}.playing-bars .bar{transform-origin:bottom;background-color:#fff;border-radius:4px;width:4px;height:20px;animation:1.2s ease-in-out infinite audioWave;box-shadow:0 0 10px #fff9}.playing-bars .bar:first-child{animation-duration:1.1s;animation-delay:0s}.playing-bars .bar:nth-child(2){animation-duration:1.3s;animation-delay:.2s}.playing-bars .bar:nth-child(3){animation-duration:1.2s;animation-delay:.4s}.carousel-info{flex-direction:column;gap:4px;width:100%;min-width:0;display:flex}.carousel-track-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.02em;font-size:.9rem;font-weight:400;overflow:hidden}.carousel-track-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.login-container{background-color:var(--bg-main);min-height:100vh;color:var(--text-primary);box-sizing:border-box;justify-content:center;align-items:center;padding:20px;display:flex}.login-card{background-color:var(--bg-card);box-sizing:border-box;width:100%;max-width:400px;box-shadow:0 20px 40px var(--bg-overlay-strong);border:1px solid var(--bg-surface-hover);text-align:center;border-radius:20px;flex-direction:column;align-items:center;padding:48px 40px;display:flex}.login-logo{justify-content:center;align-items:center;gap:16px;margin-bottom:8px;font-size:2rem;display:flex}.login-subtitle{color:var(--text-secondary);margin-top:0;margin-bottom:32px;font-size:.9rem}.login-error{color:var(--accent-primary);background-color:var(--accent-primary-alpha-10);box-sizing:border-box;border:1px solid var(--accent-primary-alpha-20);border-radius:8px;width:100%;margin-bottom:24px;padding:12px;font-size:.9rem}.email-login-form{flex-direction:column;gap:12px;width:100%;display:flex}.login-input{border:1px solid var(--border-medium);background-color:var(--bg-surface-subtle);width:100%;color:var(--text-primary);box-sizing:border-box;border-radius:12px;outline:none;padding:14px 20px;font-family:Inter,sans-serif;font-size:.95rem;transition:border-color .2s,background-color .2s}.login-input:focus{border-color:var(--text-secondary);background-color:var(--bg-surface-hover)}.email-btn{margin-top:8px}.login-btn{cursor:pointer;width:100%;transition:opacity var(--duration-fast) var(--ease-out), transform var(--duration-instant) var(--ease-out);border:none;border-radius:50px;justify-content:center;align-items:center;gap:12px;padding:14px 20px;font-family:Inter,sans-serif;font-size:1rem;font-weight:400;display:flex}.login-btn:hover{opacity:.9}.login-btn:active{transform:scale(.98)}.primary-btn{color:#000;background-color:#fff}.google-icon{width:20px;height:20px}.login-divider{background-color:var(--bg-surface-hover);justify-content:center;align-items:center;width:100%;height:1px;margin:24px 0;display:flex;position:relative}.login-divider span{background-color:var(--bg-card);color:var(--text-tertiary);padding:0 12px;font-size:.85rem;position:absolute}.guest-btn{color:var(--text-secondary);border:1px solid var(--border-medium);background-color:#0000}.guest-btn:hover{color:var(--text-primary);border-color:#fff3}.primary-btn,.guest-btn,.interactive,.danger-btn{transition:transform var(--duration-instant) var(--ease-out), background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)}.primary-btn:hover,.guest-btn:hover,.interactive:hover,.danger-btn:hover{transform:translateY(-1px);box-shadow:0 12px 40px #0009}.primary-btn:active,.guest-btn:active,.interactive:active,.danger-btn:active{transition-duration:60ms!important;transform:scale(.96)!important}.sidebar{box-sizing:border-box;background-color:var(--bg-card);border-right:1px solid var(--bg-surface-hover);flex-direction:column;flex-shrink:0;width:250px;height:100vh;padding:32px 20px 0;display:flex}.sidebar .nav-menu:last-of-type{margin-bottom:24px}.sidebar-logo{letter-spacing:.15em;color:var(--text-primary);align-items:center;gap:12px;margin-bottom:40px;padding-left:12px;font-family:Space Grotesk,sans-serif;font-size:1.5rem;font-weight:700;display:flex}.nav-menu{flex-direction:column;gap:8px;display:flex}.nav-item{cursor:pointer;color:var(--text-secondary);text-align:left;background:0 0;border:none;border-radius:12px;align-items:center;gap:12px;padding:12px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:400;transition:color .2s,background-color .2s;display:flex}.nav-item:hover{color:var(--text-primary);background-color:var(--bg-surface-elevated)}.nav-item.active{color:var(--accent-primary);background-color:#0000}.nav-item.locked{cursor:not-allowed;opacity:.5}.nav-item.locked:hover{color:var(--text-secondary);background-color:#0000}.main-content{box-sizing:border-box;backface-visibility:hidden;flex-direction:column;flex-grow:1;height:100vh;padding-bottom:80px;display:flex;overflow:clip auto}.vault-header{justify-content:space-between;align-items:center;margin-bottom:32px;display:flex}.vault-header h2{letter-spacing:-.02em;margin:0;font-size:2rem}.vault-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;padding-bottom:40px;display:grid}.track-list{flex-direction:column;gap:8px;display:flex}.track-info{flex-direction:column;gap:4px;width:100%;min-width:0;display:flex}.track-row{background-color:var(--bg-surface-subtle);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 16px;transition:background-color .2s;display:flex}.track-row:hover{background-color:var(--bg-surface-hover)}.track-row.active{border-left:4px solid var(--accent-primary);background-color:#e326360d}.track-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:24px;display:grid}.track-card{background-color:var(--bg-surface-subtle);cursor:pointer;border-radius:20px;flex-direction:column;gap:12px;min-width:0;padding:16px;transition:background-color .2s;display:flex;position:relative}.track-card:hover{background-color:var(--bg-surface-hover)}.carousel-card:after,.track-card:after{content:"";z-index:-1;background:0 0;height:12px;position:absolute;top:100%;left:0;right:0}.track-card.active{background-color:var(--accent-primary-alpha-10);border:1px solid var(--accent-primary-alpha-20)}.vault-container{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:40px 48px}.settings-container{width:100%;max-width:600px;margin:0 auto;padding:40px}.danger-zone{background-color:#e326360d;border:1px solid #e326364d;border-radius:12px;margin-top:40px;padding:24px}.danger-btn{background-color:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:24px;padding:12px 24px;font-family:Inter,sans-serif;font-weight:400;transition:opacity .2s}.danger-btn:hover{opacity:.9}.mini-player{-webkit-backdrop-filter:blur(24px)saturate(180%);backdrop-filter:blur(24px)saturate(180%);border-top:1px solid var(--bg-surface-hover);z-index:100;background-color:#050505d9;height:84px;display:flex;position:fixed;bottom:0;left:250px;right:0}.mini-player-content{flex-grow:1;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.mini-track-info{align-items:center;gap:14px;width:30%;min-width:180px;display:flex}.mini-artwork{background-color:var(--bg-artwork);width:48px;height:48px;box-shadow:0 4px 12px var(--bg-overlay);background-position:50%;background-size:cover;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.mini-track-text{flex-direction:column;justify-content:center;gap:4px;display:flex;overflow:hidden}.mini-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;letter-spacing:-.01em;font-family:Inter,sans-serif;font-size:.85rem;font-weight:400;overflow:hidden}.mini-artist{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-family:Inter,sans-serif;font-size:.75rem;overflow:hidden}.mini-center-column{flex-direction:column;justify-content:center;align-items:center;gap:8px;width:40%;max-width:722px;display:flex}.mini-controls{align-items:center;gap:24px;display:flex}.control-btn{cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;padding:0;display:flex}.secondary-btn{color:var(--text-secondary)}.secondary-btn:hover{color:#fff}.mini-play{color:#000;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:transform .2s,background-color .2s,box-shadow .2s;display:flex;box-shadow:0 4px 12px #0000004d}.mini-play:hover{box-shadow:0 6px 16px var(--bg-overlay);background-color:#f0f0f0;transform:scale(1.05)}.mini-play:active{transform:scale(.95)}.active-control{color:var(--accent-primary)!important;opacity:1!important}.active-control svg{filter:drop-shadow(0 0 8px #e3263666)}.mini-progress-wrapper{align-items:center;gap:8px;width:100%;display:flex}.mini-time{color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:center;min-width:40px;font-family:Inter,sans-serif;font-size:.7rem}.mini-progress-bar{background-color:var(--border-medium);cursor:pointer;border-radius:1px;flex-grow:1;height:2px;transition:height .1s;position:relative}.mini-progress-bar:hover{height:4px}.mini-progress-fill{background-color:#fff;border-radius:1px;height:100%}.mini-progress-bar:hover .mini-progress-fill{background-color:var(--accent-primary)}.mini-actions{justify-content:flex-end;align-items:center;width:30%;min-width:180px;display:flex}.mini-volume-bar{background-color:var(--border-medium);cursor:pointer;border-radius:1px;width:80px;height:2px;margin-left:8px;transition:height .1s}.mini-volume-bar:hover{height:4px}.mini-volume-fill{background-color:#fff;border-radius:1px;width:60%;height:100%}.mini-volume-bar:hover .mini-volume-fill{background-color:var(--accent-primary)}.player-view-container{justify-content:center;align-items:center;width:100%;max-width:100%;margin:0 auto;display:flex}.lyrics-side{flex-direction:column;width:100%;height:calc(100vh - 120px);display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 10% 90%,#0000);mask-image:linear-gradient(#0000,#000 10% 90%,#0000)}.lyrics-section{-ms-overflow-style:none;scrollbar-width:none;scroll-behavior:smooth;text-align:center;flex:1;padding:40px 20px;position:relative;overflow:hidden auto}.lyrics-section::-webkit-scrollbar{display:none}.lyrics-section{-ms-overflow-style:none;scrollbar-width:none}.lyric-line{color:#ffffff40;transform-origin:50%;filter:blur(2px);cursor:pointer;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;margin-bottom:24px;font-size:2.2rem;font-weight:700;line-height:1.3;transition:all .5s cubic-bezier(.4,0,.2,1)}.lyric-line:hover{color:#fff9}.lyric-line.active{color:#fff;filter:blur();transform:scale(1.08)}.lyric-loading{text-align:center;width:100%;min-height:60vh;color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;font-size:1.1rem;animation:1.5s infinite pulse;display:flex}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.progress-section{margin-bottom:22px}.progress-bar-wrap{cursor:pointer;background:#ffffff14;border-radius:3px;width:100%;height:6px;transition:height .15s;position:relative}.progress-bar-wrap:hover{height:8px}.progress-bar-fill{background:var(--accent-primary);width:0%;height:100%;transition:width .1s var(--ease-out);border-radius:3px;position:relative}.progress-bar-fill:after{content:"";background:var(--text-primary);border-radius:50%;width:14px;height:14px;transition:transform .2s;position:absolute;top:50%;right:-6px;transform:translateY(-50%)scale(0);box-shadow:0 0 10px #e3263680}.progress-bar-wrap:hover .progress-bar-fill:after{transform:translateY(-50%)scale(1)}.time-display{color:var(--text-secondary);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:8px;font-size:.75rem;font-weight:400;display:flex}.controls{justify-content:center;align-items:center;gap:16px;margin-bottom:18px;display:flex}.ctrl-btn{cursor:pointer;width:48px;height:48px;color:var(--text-secondary);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:1.2rem;transition:all .2s;display:flex;position:relative}.ctrl-btn:hover{color:var(--text-primary);background:#ffffff0f;transform:scale(1.1)}.ctrl-btn:active{transform:scale(.95)}.ctrl-btn.active{color:var(--accent-primary)}.ctrl-btn.play-btn{background:linear-gradient(135deg, var(--accent-primary), #ff4d4d);color:#fff;width:64px;height:64px;font-size:1.5rem;box-shadow:0 4px 24px #e3263666}.ctrl-btn.play-btn:hover{color:#fff;background:linear-gradient(135deg,#ff4d4d,#f66);transform:scale(1.15);box-shadow:0 6px 32px #e3263699}.hero-artwork,.carousel-artwork,.mini-artwork,.player-artwork,.artwork-circle{background-position:50%;background-repeat:no-repeat;background-size:cover}.welcome-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;height:100%;padding:40px;display:flex}.welcome-title{letter-spacing:-.04em;background:linear-gradient(135deg,#fff 0%,#a0a0a0 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:24px;font-size:5rem;font-weight:700;animation:.8s cubic-bezier(.16,1,.3,1) forwards slideUpFade}.welcome-subtitle{color:var(--text-secondary);opacity:0;max-width:600px;font-size:1.4rem;line-height:1.6;animation:.8s cubic-bezier(.16,1,.3,1) .1s forwards slideUpFade}.welcome-accent{color:var(--accent-primary);-webkit-text-fill-color:var(--accent-primary);font-weight:700}.welcome-icon{color:var(--accent-primary);opacity:0;margin-bottom:32px;animation:.8s cubic-bezier(.16,1,.3,1) forwards scaleUpFade}@keyframes scaleUpFade{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.primary-play-btn,.logout-btn,.ctrl-btn,.track-card,.carousel-card,.nav-item,.track-row,.login-btn,.danger-btn,.lyric-line,.secondary-btn,.mini-play{transition:transform var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.primary-play-btn:active,.ctrl-btn:active,.mini-play:active{transition-duration:60ms;transform:scale(.92)}:is(.logout-btn:active,.track-card:active:not(:has(button:active,.icon-button:active,.dropdown:active,.playlist-menu:active)),.nav-item:active:not(:has(button:active,.icon-button:active,.dropdown:active,.playlist-menu:active)),.track-row:active:not(:has(button:active,.icon-button:active,.dropdown:active,.playlist-menu:active)),.login-btn:active,.danger-btn:active,.lyric-line:active,.secondary-btn:active){transition-duration:60ms;transform:scale(.96)}.carousel-card:active:not(:has(button:active,.icon-button:active,.dropdown:active,.playlist-menu:active)) .carousel-artwork-wrapper{transition-duration:60ms;transform:scale(.96)}.slider-thumb{background:var(--accent-primary);opacity:0;pointer-events:none;border-radius:50%;width:12px;height:12px;margin-top:-6px;transition:transform .12s cubic-bezier(.34,1.56,.64,1),opacity .12s cubic-bezier(.16,1,.3,1);position:absolute;top:50%;right:-6px;transform:scale(.6);box-shadow:0 0 0 3px #e3263640}.mini-progress-bar:hover .slider-thumb,.mini-progress-bar.dragging .slider-thumb,.mini-volume-bar:hover .slider-thumb,.mini-volume-bar.dragging .slider-thumb{opacity:1;transform:scale(1)}.mini-progress-bar:active .slider-thumb,.mini-progress-bar.dragging .slider-thumb,.mini-volume-bar:active .slider-thumb,.mini-volume-bar.dragging .slider-thumb{transition-duration:60ms;transform:scale(1.3)}.mini-progress-fill,.mini-volume-fill{position:relative}.contextual-hero{background-color:var(--bg-card);box-sizing:border-box;border:1px solid #ffffff14;border-radius:24px;width:100%;height:320px;margin-bottom:48px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0009}.hero-blurred-bg{filter:blur(40px)brightness(.4);z-index:1;pointer-events:none;background-position:50%;background-size:cover;width:140%;height:140%;position:absolute;top:-20%;left:-20%}.fallback-bg{background:linear-gradient(135deg,#2a0808 0%,#0a0a0a 100%)}.hero-content{z-index:2;box-sizing:border-box;width:100%;height:100%;padding:40px 60px;position:relative}.hero-layout-playing,.hero-layout-resume{align-items:center;width:100%;height:100%;animation:.4s cubic-bezier(.2,.8,.2,1) forwards heroCrossfade;display:flex}.hero-layout-playing{gap:48px}.hero-layout-resume{justify-content:space-between}.mobile-resume{display:none!important}@keyframes heroCrossfade{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.hero-info-playing,.hero-text-resume{flex-direction:column;flex:1;justify-content:center;display:flex}.hero-greeting{color:var(--text-secondary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;font-family:Space Grotesk,sans-serif;font-size:1.1rem;font-weight:700}.hero-title-resume{letter-spacing:-.02em;margin:0 0 12px;font-size:2.8rem;font-weight:700}.hero-last-track{color:var(--text-secondary);margin:0 0 32px;font-size:1.1rem}.btn-resume{cursor:pointer;background-color:var(--accent-primary);color:#fff;border:none;border-radius:30px;align-self:flex-start;align-items:center;gap:12px;padding:14px 32px;font-size:1.1rem;font-weight:700;transition:transform .2s,box-shadow .2s;display:flex}.btn-resume:hover{transform:scale(1.05);box-shadow:0 10px 20px #e3263666}.hero-artwork-large{width:240px;height:240px;box-shadow:0 20px 40px var(--bg-overlay-strong);background-position:50%;background-size:cover;border-radius:16px;flex-shrink:0;transform:rotate(-1deg)}.hero-artwork-medium{background-position:50%;background-size:cover;border-radius:12px;flex-shrink:0;width:160px;height:160px;transform:rotate(3deg);box-shadow:0 10px 20px #0009}.hero-badge{color:var(--text-secondary);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px;font-family:Space Grotesk,sans-serif;font-size:.95rem;font-weight:700}.hero-title{letter-spacing:-.02em;color:var(--text-primary);text-shadow:none;margin:0 0 8px;font-family:Space Grotesk,sans-serif;font-size:3.5rem;font-weight:700;line-height:1.1}.hero-artist{color:var(--text-secondary);margin:0 0 24px;font-family:Inter,sans-serif;font-size:1.4rem;font-weight:400}.hero-pause-btn{background-color:var(--border-medium);color:#fff;cursor:pointer;border:1px solid #fff3;border-radius:24px;align-items:center;gap:8px;padding:14px 36px;font-family:Inter,sans-serif;font-size:1rem;font-weight:700;transition:background-color .2s,box-shadow .2s;display:flex}.hero-pause-btn:hover{background-color:#ffffff40;box-shadow:0 4px 12px #0003}.quick-access-row{gap:16px;margin-bottom:48px;display:flex}.quick-access-pill{background-color:var(--border-medium);color:#fff;cursor:pointer;border:1px solid #fff3;border-radius:24px;align-items:center;gap:12px;height:48px;padding:0 20px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:700;transition:background-color .2s,box-shadow .2s;display:flex}.quick-access-pill:hover{background-color:#ffffff40;box-shadow:0 4px 12px #0003}.carousel-artwork-wrapper{border-radius:16px;transition:transform .2s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.carousel-card{transition:opacity .2s}.carousel-card:hover{opacity:.95}.carousel-play-overlay{background-color:var(--shadow-soft)}.premium-play-btn{background-color:var(--accent-primary);color:#fff;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s cubic-bezier(.175,.885,.32,1.275);display:flex;transform:scale(.8);box-shadow:0 4px 12px #e3263680}.carousel-card:hover .premium-play-btn,.carousel-play-overlay.active .premium-play-btn{opacity:1;transform:scale(1)}.progress-bar-container{z-index:10;background-color:#fff3;height:4px;position:absolute;bottom:0;left:0;right:0}.progress-bar-fill{background-color:var(--accent-primary);height:100%;transition:width .1s linear}.rank-number{color:#fff;text-shadow:0 4px 8px var(--bg-overlay-strong);z-index:10;font-family:Space Grotesk,sans-serif;font-size:5rem;font-weight:700;line-height:1;position:absolute;bottom:-4px;left:4px}.heavy-rotation .carousel-artwork-wrapper{overflow:visible}.source-badge{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.05em;color:#fff;z-index:10;background-color:#000000b3;border-radius:4px;padding:4px 8px;font-size:.6rem;font-weight:700;position:absolute;top:8px;left:8px}.playlist-menu{width:160px}.playlist-menu button{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.playlists-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;display:grid}.playlist-grid-card{cursor:pointer;background-color:#0000;border:none;border-radius:0;flex-direction:column;gap:12px;padding:0;transition:opacity .2s;display:flex}.playlist-grid-card:hover{opacity:.9}.playlist-grid-card .track-context-btn{opacity:0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#00000080;transition:opacity .2s;position:absolute;top:8px;right:8px}.playlist-grid-card:hover .track-context-btn{opacity:1}.playlist-grid-card:active:not(:has(button:active,.icon-button:active)){transition-duration:60ms;transform:scale(.96)}.playlist-artwork{aspect-ratio:1;background-color:var(--bg-artwork);border-radius:8px;width:100%;overflow:hidden;box-shadow:0 4px 12px #0000004d}.playlist-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.95rem;font-weight:600;overflow:hidden}.add-to-playlist-btn{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;color:#fff;opacity:0;z-index:15;background:#0009;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex;position:absolute;top:8px;right:8px}.carousel-card:hover .add-to-playlist-btn{opacity:1}.add-to-playlist-btn:hover{background:#fff3;transform:scale(1.1)}.playlist-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;width:100vw;height:100vh;color:var(--text-primary);background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;top:0;left:0}.playlist-modal-card{-webkit-backdrop-filter:blur(24px)saturate(180%);background:#1c1c1cd9;border:1px solid #ffffff1f;border-radius:24px;flex-direction:column;align-items:center;gap:32px;width:90%;max-width:420px;padding:48px 40px;display:flex}.playlist-modal-title{letter-spacing:-.02em;color:var(--text-primary);text-align:center;margin:0;font-size:1.35rem;font-weight:700}.playlist-modal-input{color:var(--text-primary);letter-spacing:.01em;box-sizing:border-box;text-align:center;width:100%;transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);background:#ffffff0d;border:1px solid #ffffff40;border-radius:12px;outline:none;padding:16px 20px;font-size:1.05rem;font-weight:400}.playlist-modal-input:focus{background:#ffffff1a;border-color:#fff9}.playlist-modal-input::placeholder{color:var(--text-secondary);opacity:.6}.playlist-modal-actions{justify-content:center;align-items:center;gap:16px;width:100%;display:flex}.playlist-modal-btn-cancel{color:var(--text-secondary);cursor:pointer;transition:color var(--duration-fast) var(--ease-out);background:0 0;border:none;border-radius:12px;flex:1;padding:14px 24px;font-size:.95rem;font-weight:400}.playlist-modal-btn-cancel:hover{color:var(--text-primary)}.playlist-modal-btn-create{background:var(--accent-primary);color:#fff;box-shadow:0 8px 16px var(--accent-primary-alpha-20);border:none;border-radius:12px;flex:1;padding:14px 24px;font-size:1rem;font-weight:700;transition:all .2s}.playlist-modal-btn-create:hover{transform:translateY(-2px);box-shadow:0 12px 24px #e326364d}.playlist-modal-btn-create:active{transform:scale(.97)}.file-tree{flex-direction:column;gap:2px;display:flex}.file-tree-node{flex-direction:column;display:flex}.file-tree-item{cursor:pointer;color:var(--text-secondary);-webkit-user-select:none;user-select:none;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-family:Inter,sans-serif;font-size:.95rem;transition:all .2s;display:flex}.file-tree-item:hover{background-color:var(--bg-surface-hover);color:var(--text-primary)}.file-tree-item.active{color:var(--accent-primary)}.file-tree-chevron,.file-tree-icon{width:16px;height:16px;color:inherit;justify-content:center;align-items:center;display:flex}.file-tree-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.file-tree-children{border-left:1px solid var(--border-medium);flex-direction:column;gap:2px;margin-top:2px;margin-left:20px;padding-left:8px;display:flex}.file-tree-wrapper{grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.16,1,.3,1);display:grid}.file-tree-wrapper.open{grid-template-rows:1fr}.file-tree-inner{overflow:hidden}.track-card{cursor:pointer;flex-direction:column;min-width:0;display:flex;position:relative;background:0 0!important;border:none!important;border-radius:0!important;padding:0!important}.track-card:active{transition-duration:60ms;transform:scale(.97)}.track-card-artwork{aspect-ratio:1;object-fit:cover;background-color:#1c1c1c;border-radius:10px;width:100%;position:relative;overflow:hidden}.cloud-artwork-img{transition:filter .16s var(--ease-out)}.track-play-circle{background:var(--accent-primary,#e32636);color:#fff;opacity:0;z-index:2;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .2s cubic-bezier(.34,1.56,.64,1),transform .2s cubic-bezier(.34,1.56,.64,1);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.8)}.track-context-btn{cursor:pointer;color:#fff;opacity:0;width:28px;height:28px;transition:opacity .16s var(--ease-out), background-color .16s var(--ease-out);z-index:5;background:#0009;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:8px;right:8px}@media (hover:hover) and (pointer:fine){.track-card:hover .cloud-artwork-img{filter:brightness(.7)}.track-card:hover .track-play-circle{opacity:1;transform:translate(-50%,-50%)scale(1)}.track-card:hover .track-context-btn{opacity:1}.track-context-btn:hover{background:#fff3!important}}.track-play-overlay.active-playing{background:var(--bg-overlay);z-index:3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.track-play-overlay.active-playing .track-play-circle{display:none}@keyframes equalizerBar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.eq-bars{justify-content:center;align-items:center;gap:4px;height:24px;display:flex}.eq-bar{transform-origin:bottom;background-color:#fff;border-radius:4px;width:4px;height:20px}.eq-bar:first-child{animation:equalizerBar .8s var(--ease-out) infinite}.eq-bar:nth-child(2){animation:equalizerBar .8s var(--ease-out) infinite .2s}.eq-bar:nth-child(3){animation:equalizerBar .8s var(--ease-out) infinite .4s}.track-info{flex-direction:column;gap:3px;min-width:0;margin-top:10px;padding-bottom:16px;display:flex}.track-title{letter-spacing:-.01em;color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:700;overflow:hidden}.track-title.active-text{color:var(--accent-primary,#e32636)}.track-artist{color:var(--text-secondary);opacity:.5;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:400;overflow:hidden}.upload-panel{background:var(--surface,var(--bg-card));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:300;border:1px solid #ffffff14;border-radius:16px;width:380px;padding:20px;animation:.3s cubic-bezier(.34,1.56,.64,1) both panelSlideIn;position:fixed;bottom:172px;right:30px;box-shadow:0 24px 48px #0009}.upload-panel.closing{animation:panelFadeOut .2s var(--ease-out,ease-out) both}@keyframes panelSlideIn{0%{opacity:0;transform:translateY(16px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes panelFadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)}}.upload-panel-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.upload-panel-title{letter-spacing:-.01em;color:var(--text-primary);align-items:center;gap:8px;font-size:14px;font-weight:700;display:flex}.upload-panel-minimize{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:background-color .2s,color .2s;display:flex}.upload-panel-minimize:hover{background:var(--border-medium);color:var(--text-primary)}.upload-progress-row{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:13px;display:flex}.upload-progress-label{font-weight:500}.upload-progress-percent{color:var(--text-primary);font-weight:700}.upload-progress-track{background:#ffffff14;border-radius:9999px;height:3px;margin:8px 0 16px;overflow:hidden}.upload-progress-fill{background:var(--accent,var(--accent-primary));border-radius:9999px;height:100%;transition:width .4s cubic-bezier(.16,1,.3,1)}.upload-track-list{scrollbar-width:none;flex-direction:column;max-height:216px;display:flex;overflow-y:auto}.upload-track-list::-webkit-scrollbar{display:none}.upload-track-row{height:36px;transition:opacity .2s var(--ease-out,ease-out);animation:enterUp .16s var(--ease-spring,cubic-bezier(.175, .885, .32, 1.275)) both;align-items:center;gap:10px;display:flex}.upload-track-row--done{opacity:.45}.upload-track-row--active{opacity:1}.upload-track-row--queued{opacity:.3}.upload-track-row--error{opacity:.6}.upload-track-status{justify-content:center;align-items:center;width:16px;display:flex}.upload-track-title{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary);flex:1;font-size:13px;font-weight:700;overflow:hidden}.upload-track-artist{opacity:.5;white-space:nowrap;color:var(--text-secondary);font-size:12px;font-weight:400}.upload-track-dot{background:#fff3;border-radius:50%;width:6px;height:6px;margin:0 4px}.upload-spinner{border:2px solid #ffffff26;border-top-color:var(--accent,var(--accent-primary));border-radius:50%;width:14px;height:14px;animation:.7s linear infinite spin}.upload-panel.minimized{cursor:pointer;flex-direction:column;justify-content:center;height:52px;padding:12px 20px;display:flex;overflow:hidden}.upload-panel.minimized .upload-panel-header{margin-bottom:0}.upload-panel.minimized .upload-progress-track{border-radius:0;height:2px;margin:0;position:absolute;bottom:0;left:0;right:0}.upload-retry-link{color:var(--accent,var(--accent-primary));cursor:pointer;text-align:center;margin-top:8px;font-size:12px;font-weight:600;transition:opacity .2s}.upload-retry-link:hover{opacity:.8}.sidebar-profile-section{border-top:1px solid var(--bg-surface-hover);flex-shrink:0;align-items:center;height:84px;margin:0 -20px;padding:0 20px;display:flex}.user-profile-widget{align-items:center;gap:10px;padding:4px 12px;display:flex}.avatar-container{background:linear-gradient(135deg,#ffffff40,#ffffff05);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;padding:1px;display:flex;position:relative}.user-avatar{object-fit:cover;border:1px solid var(--bg-card);border-radius:50%;width:100%;height:100%}.user-info{flex-direction:column;flex-grow:1;display:flex;overflow:hidden}.user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-family:Inter,sans-serif;font-size:.9rem;font-weight:700;overflow:hidden}.user-status{color:var(--text-tertiary);white-space:nowrap;text-overflow:ellipsis;font-family:Inter,sans-serif;font-size:.75rem;overflow:hidden}.user-notifications{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:4px;transition:color .2s;display:flex;position:relative}.user-notifications:hover{color:var(--text-primary);background-color:var(--bg-surface-hover)}.notification-dot{border:1px solid var(--bg-card);background-color:#ff9800;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:4px}.bottom-nav,.mobile-home-header,.mobile-home-greeting-block,.home-filter-pills{display:none}.mobile-external-hero-title{display:none!important}@media (width<=640px){.sidebar{display:none!important}.app-container{flex-direction:column}.home-page-root{padding:0 20px!important}.main-content{padding-bottom:200px}.bottom-nav{-webkit-backdrop-filter:blur(30px)saturate(180%);z-index:300;background:#141414b3;border:1px solid #ffffff0f;border-top-color:#ffffff1f;border-radius:32px;justify-content:space-between;align-items:center;height:64px;padding:0 8px;display:flex;position:fixed;bottom:24px;left:20px;right:20px;box-shadow:0 12px 40px #0009,0 4px 12px #0006}.nav-item{color:var(--text-tertiary);z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:24px;justify-content:center;align-items:center;width:48px;height:48px;text-decoration:none;display:flex;position:relative}.nav-active-bg{background:var(--primary-color,#e32636);z-index:-1;border-radius:24px;position:absolute;inset:0}.nav-icon{z-index:2;justify-content:center;align-items:center;display:flex}.nav-item svg{width:24px;height:24px;transition:transform .2s cubic-bezier(.25,.46,.45,.94)}.nav-label{display:none!important}.mobile-home-header{z-index:10;justify-content:space-between;align-items:center;padding:60px 0 8px;display:flex;position:relative}.mobile-home-header:before{content:"";z-index:-1;pointer-events:none;filter:blur(30px);background:radial-gradient(circle at 10% 0,#e3263633 0%,#0000 60%),radial-gradient(circle at 90% 0,#00b4ff1a 0%,#0000 60%);height:350px;position:absolute;top:-40px;left:-40px;right:-40px}.header-left{align-items:center;gap:12px;display:flex}.user-avatar-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;width:46px;height:46px;padding:0;transition:transform .2s;position:relative;box-shadow:0 4px 16px #0006}.user-avatar-btn:active{transform:scale(.92)}.user-avatar-btn img{object-fit:cover;border:1px solid #ffffff1a;border-radius:50%;width:100%;height:100%}.header-right{align-items:center;gap:12px;display:flex}.header-icon-btn{color:#ffffffe6;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:0 0;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:background .2s,transform .15s;display:flex}.header-icon-btn svg{width:18px;height:18px}.header-icon-btn:active{background:#ffffff1a;transform:scale(.9)}.mobile-home-greeting-block{flex-direction:column;justify-content:flex-end;padding:16px 0 24px;display:flex}.greeting-sub{text-transform:uppercase;letter-spacing:.25em;color:#ffffff8c;margin-bottom:6px;font-size:.65rem;font-weight:600;display:none}.greeting-main{letter-spacing:-.04em;color:#fff;font-size:2.3rem;font-weight:800;line-height:1.1}.home-filter-pills{scrollbar-width:none;-ms-overflow-style:none;gap:10px;margin:0 -20px;padding:0 20px;display:flex;overflow-x:auto}.home-filter-pills::-webkit-scrollbar{display:none}.filter-pill{color:#ffffffa6;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;height:40px;padding:0 24px;font-family:Inter,sans-serif;font-size:14px;font-weight:600;transition:all .2s;display:flex}.filter-pill.active{background:var(--accent-primary);color:#fff;border-color:#0000}.filter-pill:not(.active):active{background:#ffffff1a;transform:scale(.94)}.mobile-external-hero-title{display:none}.contextual-hero{position:relative;border-radius:16px!important;height:auto!important;min-height:200px!important;margin-top:40px!important;margin-bottom:32px!important;overflow:hidden!important;box-shadow:0 16px 40px #0000004d!important}.contextual-hero:after{content:"";z-index:0;pointer-events:none;background:linear-gradient(90deg,#0006 0%,#0000001a 100%);position:absolute;inset:0}.hero-content{z-index:1;flex-direction:column;justify-content:center;display:flex;position:relative;box-sizing:border-box!important;min-height:200px!important;padding:24px 16px!important}.hero-layout-playing{flex-direction:row-reverse!important;align-items:center!important;gap:16px!important;padding:0!important;animation:none!important}.hero-artwork-large{border-radius:12px!important;flex-shrink:0!important;width:120px!important;height:120px!important;transform:none!important;box-shadow:0 12px 24px #0006!important}.hero-info-playing{flex:1!important;min-width:0!important}.hero-badge{letter-spacing:.2em!important;color:#fff9!important;margin-bottom:6px!important;font-size:.65rem!important;font-weight:700!important}.hero-title{letter-spacing:-.03em!important;white-space:nowrap!important;text-overflow:ellipsis!important;margin-bottom:4px!important;font-size:1.2rem!important;font-weight:800!important;overflow:hidden!important}.hero-artist{white-space:nowrap!important;text-overflow:ellipsis!important;color:#ffffffb3!important;margin-bottom:14px!important;font-size:.85rem!important;overflow:hidden!important}.hero-pause-btn{justify-content:center!important;width:100%!important;margin-top:4px!important;padding:10px 20px!important;font-size:.9rem!important;display:inline-flex!important}.desktop-resume{display:none!important}.mobile-resume{animation:none!important;display:flex!important}.mobile-external-hero-title{z-index:10;position:relative;letter-spacing:-.02em!important;margin-top:40px!important;margin-bottom:-24px!important;padding:0 4px!important;font-family:Space Grotesk,sans-serif!important;font-size:1.6rem!important;font-weight:800!important;line-height:1.2!important;display:block!important}.animated-title-text{animation:.4s cubic-bezier(.2,.8,.2,1) forwards heroCrossfade;display:inline-block}.btn-resume{margin-top:8px!important;padding:10px 24px!important;font-size:.9rem!important}}.hero-action-row{align-items:center;margin-top:auto;display:flex;gap:8px!important}.hero-action-play{background:var(--accent-primary);color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:0 4px 16px #e3263666;width:44px!important;height:44px!important}.hero-action-play:active{transform:scale(.9);box-shadow:0 2px 8px #e326364d}.hero-action-play svg{width:20px;height:20px;margin-left:2px}.hero-action-icon{color:#fffc;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:1px solid #ffffff26;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:background .15s,transform .15s;display:flex;width:36px!important;height:36px!important}.hero-action-icon:active{background:#ffffff1a;transform:scale(.9)}@media (width<=640px){.hero-artwork-medium{border-radius:16px!important;flex-shrink:0!important;width:110px!important;height:110px!important;transform:none!important;box-shadow:0 12px 32px #00000080!important}.carousel-container{margin:0!important;overflow:visible!important}.carousel-row{scroll-snap-type:none!important;flex-direction:column!important;gap:4px!important;padding:0!important;overflow:hidden!important}.carousel-card{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important}.add-to-playlist-btn,.track-context-btn,.carousel-row:after{display:none!important}.carousel-section{margin-bottom:36px!important}.carousel-arrow{display:none!important}.carousel-section>div:first-child{padding:0;justify-content:space-between!important;align-items:center!important;margin-bottom:8px!important;display:flex!important}.carousel-title{letter-spacing:-.01em!important;font-size:1.2rem!important;font-weight:700!important}.carousel-card{cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;width:100%!important;min-width:unset!important;max-width:unset!important;scroll-snap-align:unset!important;background:0 0!important;border-radius:14px!important;flex-direction:row!important;flex-shrink:0!important;align-items:center!important;gap:14px!important;padding:10px 12px!important;transition:background .15s!important;display:flex!important}.carousel-card:active{background:#ffffff0d!important}.carousel-artwork-wrapper{aspect-ratio:1!important;border-radius:14px!important;flex-shrink:0!important;width:64px!important;height:64px!important;position:relative!important;overflow:hidden!important}.carousel-artwork-wrapper .track-artwork-container{width:100%!important;height:100%!important;aspect-ratio:unset!important;border-radius:14px!important}.carousel-artwork{object-fit:cover!important;border-radius:14px!important;width:64px!important;height:64px!important}.carousel-info{flex-direction:column!important;flex:1!important;gap:3px!important;min-width:0!important;padding:0!important;display:flex!important}.carousel-track-title{white-space:nowrap!important;text-overflow:ellipsis!important;letter-spacing:-.01em!important;font-size:1.05rem!important;font-weight:700!important;line-height:1.3!important;overflow:hidden!important}.carousel-track-artist{color:#ffffff80!important;white-space:nowrap!important;text-overflow:ellipsis!important;font-size:.85rem!important;line-height:1.3!important;overflow:hidden!important}.carousel-play-overlay{display:none!important}.carousel-card:after{content:"";display:none}.rank-number{display:none!important}.active-progress-bar{border-radius:1px!important;height:2px!important;bottom:0!important;left:0!important;right:0!important}.carousel-card .skeleton{border-radius:8px!important}.playlists-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))!important;gap:14px!important;padding:0!important}.playlists-section{margin-top:36px!important}.playlists-section h2.carousel-title{margin-bottom:16px!important;padding:0!important}.mini-player{border:1px solid #ffffff0f!important;border-radius:20px!important;bottom:100px!important;left:8px!important;right:8px!important}.upload-panel{width:calc(100% - 32px)!important;bottom:200px!important;left:16px!important;right:16px!important}}@keyframes actionSheetIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes actionSheetBackdropIn{0%{opacity:0}to{opacity:1}}.mobile-action-sheet-backdrop{-webkit-backdrop-filter:blur(6px);z-index:9990;background:#00000080;position:fixed;inset:0}.mobile-action-sheet{touch-action:none;z-index:9991;padding:0 0 env(safe-area-inset-bottom,16px);background:#1c1c1e;border-radius:20px 20px 0 0;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.mobile-action-sheet-handle{background:#fff3;border-radius:2px;width:36px;height:4px;margin:12px auto 0}.mobile-action-sheet-track-header{border-bottom:1px solid #ffffff12;align-items:center;gap:12px;padding:16px 20px 12px;display:flex}.mobile-action-sheet-track-header .sheet-track-title{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.mobile-action-sheet-track-header .sheet-track-artist{color:#ffffff80;white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:.8rem;overflow:hidden}.mobile-action-sheet-btn{color:#fff;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-bottom:1px solid #ffffff0d;align-items:center;gap:16px;width:100%;padding:18px 24px;font-family:inherit;font-size:1.05rem;transition:background .12s;display:flex}.mobile-action-sheet-btn:last-child{border-bottom:none}.mobile-action-sheet-btn:active{background:#ffffff0f}.mobile-action-sheet-btn.destructive{color:#ff453a}.mobile-action-sheet-section-label{letter-spacing:.08em;color:#ffffff4d;text-transform:uppercase;padding:12px 24px 4px;font-size:.7rem;font-weight:700}.mobile-action-sheet-playlists{touch-action:pan-y;max-height:180px;overflow:hidden auto}.modal-overlay{background-color:var(--bg-overlay-strong);-webkit-backdrop-filter:blur(24px)saturate(180%);backdrop-filter:blur(24px)saturate(180%);z-index:1000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.metadata-modal{background:var(--bg-overlay-toast);width:90%;max-width:840px;animation:enterUp var(--duration-slow) var(--ease-spring) both;border:1px solid #ffffff0d;border-radius:24px;overflow:hidden;box-shadow:0 24px 48px #00000080,0 2px 8px #0000004d}.modal-header{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h2{letter-spacing:-.02em;color:var(--text-primary);margin:0;font-size:18px;font-weight:700}.modal-close-btn{opacity:.7;width:40px;height:40px;color:var(--text-primary,#fff);cursor:pointer;transition:all .16s var(--ease-out);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.modal-close-btn:hover{opacity:1;background:var(--border-medium)}.modal-close-btn:active{transform:scale(.92)}.metadata-form{flex-direction:column;display:flex}.modal-content-split{flex-direction:row;align-items:flex-start;gap:32px;padding:32px;display:flex}.artwork-section{flex-direction:column;align-items:center;display:flex}.artwork-dropzone{cursor:pointer;background:#0003;border:1px solid #ffffff26;border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:320px;height:320px;transition:all .2s;display:flex;position:relative;overflow:hidden}.artwork-dropzone.has-image{border:1px solid var(--border-medium);background:var(--surface-alt,transparent);border-radius:16px;overflow:hidden}.artwork-dropzone:hover:not(.has-image),.artwork-dropzone.dragging:not(.has-image){border-color:var(--accent-primary);background:rgba(var(--accent-primary-rgb), .05)}.dropzone-content{text-align:center;color:var(--text-secondary);flex-direction:column;align-items:center;padding:16px;font-size:.9rem;display:flex}.cover-preview{object-fit:cover;background:0 0;border:none;outline:none;width:100%;height:100%;display:block}.artwork-overlay{background:var(--bg-overlay);opacity:0;transition:opacity .16s var(--ease-out);color:#fff;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.artwork-dropzone:hover .artwork-overlay{opacity:1}.fields-section{flex-direction:column;gap:16px;width:100%;display:flex}.input-group{flex-direction:column;gap:4px;display:flex}.input-group label{color:var(--text-secondary,#fff9);pointer-events:none;transform-origin:0;margin:0;font-size:14px;font-weight:400;transition:all .2s;position:absolute;top:16px;left:16px}.input-wrapper{transition:all var(--duration-fast) var(--ease-out);background:#ffffff08;border:1px solid #ffffff14;border-radius:12px;align-items:center;width:100%;display:flex;position:relative}.input-wrapper:hover{background:#ffffff0f;border-color:#ffffff26}.input-wrapper:focus-within{border-color:var(--text-primary,#fff);background:#ffffff14}.input-wrapper input{width:100%;color:var(--text-primary);box-sizing:border-box;background:0 0;border:none;height:56px;padding:24px 16px 8px;font-family:inherit;font-size:16px}.input-wrapper input:focus{outline:none}.input-wrapper input:focus+label,.input-wrapper input:not(:placeholder-shown)+label{color:var(--text-primary,#fff);transform:translateY(-8px)scale(.85)}#meta-genre::placeholder,#meta-year::placeholder{opacity:0}.input-wrapper input{width:100%}.input-clear-btn{background:var(--border-medium);cursor:pointer;width:20px;height:20px;color:var(--text-secondary);border:none;border-radius:50%;justify-content:center;align-items:center;transition:background .2s,color .2s;display:flex;position:absolute;right:12px}.input-clear-btn:hover{color:var(--text-primary);background:#fff3}.input-row{gap:12px;display:flex}.input-group.half{flex:1}.modal-footer{border-top:1px solid var(--border-subtle);background:#0000001a;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.cancel-btn{color:var(--text-secondary,#fff9);cursor:pointer;transition:transform var(--duration-instant) var(--ease-out), color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);background:0 0;border:none;border-radius:24px;padding:10px 24px;font-size:14px;font-weight:600}.cancel-btn:hover{color:var(--text-primary,#fff);background:#ffffff0f}.cancel-btn:active{transform:scale(.94)}.save-btn{background:var(--accent,var(--accent-primary,#e50914));color:#fff;transition:transform var(--duration-instant) var(--ease-out), filter var(--duration-fast) var(--ease-out);cursor:pointer;border:none;border-radius:24px;padding:10px 32px;font-size:14px;font-weight:700}.save-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}.save-btn:active{transition-duration:60ms;transform:scale(.94)}.auto-fill-btn{color:var(--text-primary,#fff);cursor:pointer;background:0 0;border:1px solid #ffffff26;border-radius:24px;align-items:center;gap:8px;padding:10px 24px;font-size:14px;font-weight:500;transition:all .2s;display:flex}.auto-fill-btn:hover:not(:disabled){background:var(--border-medium);border-color:#ffffff40}.auto-fill-btn:disabled{opacity:.5;cursor:not-allowed}.auto-fill-btn.loading{animation:1.5s infinite pulse}.auto-fill-btn,.artwork-dropzone{transition:transform var(--duration-instant) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.auto-fill-btn:active:not(:disabled),.artwork-dropzone:active{transition-duration:60ms;transform:scale(.96)}@media (width<=480px){.modal-content-split{flex-direction:column;align-items:center}}.fields-section .input-group{opacity:0;animation:enterUp var(--duration-normal) var(--ease-spring) both}.fields-section .input-group:first-child{animation-delay:40ms}.fields-section .input-group:nth-child(2){animation-delay:80ms}.fields-section .input-group:nth-child(3){animation-delay:.12s}.fields-section .input-row{opacity:0;animation:enterUp var(--duration-normal) var(--ease-spring) both;animation-delay:.16s}.artwork-dropzone{opacity:0;animation:enterUp var(--duration-normal) var(--ease-spring) both;animation-delay:40ms}.toast-container{z-index:300;pointer-events:none;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:108px;left:calc(50% + 125px);transform:translate(-50%)}.toast-item{pointer-events:auto;background:var(--bg-overlay-toast);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 24px var(--shadow-soft);border:1px solid #ffffff14;border-radius:8px;align-items:center;gap:12px;width:max-content;max-width:400px;padding:12px 16px;display:flex}.toast-icon{justify-content:center;align-items:center;display:flex}.toast-message{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:400;overflow:hidden}.toast-retry-btn{color:var(--accent-primary);cursor:pointer;background:0 0;border:none;margin-left:8px;padding:0;font-size:.85rem;font-weight:500}.toast-retry-btn:hover{text-decoration:underline}.toast-enter{animation:toastEnter var(--duration-normal) var(--ease-spring) forwards}.toast-exit{animation:toastExit var(--duration-fast) var(--ease-out) forwards}@keyframes toastEnter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes toastExit{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-8px)}}.banner-container{z-index:200;flex-direction:column;display:flex;position:absolute;top:0;left:0;right:0}.banner{width:100%;height:40px;color:var(--text-primary);background:#ffffff0f;border-bottom:1px solid #ffffff14;justify-content:center;align-items:center;gap:12px;font-size:.9rem;font-weight:500;display:flex;transform:translateY(-100%)}.banner-enter{animation:bannerEnter .24s var(--ease-spring) forwards}.banner-exit{animation:bannerExit .16s var(--ease-out) forwards}@keyframes bannerEnter{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes bannerExit{0%{transform:translateY(0)}to{transform:translateY(-100%)}}.banner-cta{background:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:12px;padding:4px 12px;font-size:.8rem;font-weight:600}.banner-close{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;padding:4px;position:absolute;right:16px}.banner-close:hover{color:var(--text-primary)}.confirm-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.2s ease-out modalFadeIn;display:flex;position:fixed;top:0;left:0}.confirm-modal-content{background:var(--surface,var(--bg-card,#1e1e1e));border:1px solid #ffffff14;border-radius:16px;width:90%;max-width:420px;padding:32px;animation:.3s cubic-bezier(.16,1,.3,1) modalSlideUp;box-shadow:0 24px 48px #0009}.confirm-modal-title{color:var(--text-primary,#fff);margin:0 0 16px;font-size:1.25rem;font-weight:600}.confirm-modal-message{color:var(--text-secondary,#b3b3b3);margin:0 0 32px;font-size:.95rem;line-height:1.5}.confirm-modal-actions{justify-content:flex-end;gap:12px;display:flex}.confirm-btn-cancel{color:var(--text-primary,#fff);cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:999px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.confirm-btn-cancel:hover{background:#ffffff0d;border-color:#fff3}.confirm-btn-action{cursor:pointer;border:none;border-radius:999px;padding:10px 20px;font-size:.9rem;font-weight:600;transition:all .2s}.confirm-btn-action.destructive{color:#fff;background:#e32636}.confirm-btn-action.destructive:hover{background:#ff3b4b;box-shadow:0 0 15px #e3263666}.confirm-btn-action.primary{background:var(--text-primary,#fff);color:#000}.confirm-btn-action.primary:hover{transform:scale(1.02)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}