:root{--bg-base:#121212;--bg-black:#000;--bg-surface:#181818;--bg-surface-hover:#282828;--bg-surface-active:#333;--bg-glass:#181818bf;--bg-glass-card:#ffffff0d;--spotify-green:#1db954;--spotify-green-hover:#1ed760;--spotify-green-active:#169c46;--text-base:#fff;--text-subdued:#b3b3b3;--text-muted:#727272;--border-subtle:#ffffff1a;--shadow-lg:0 8px 24px #00000080;--shadow-xl:0 16px 36px #000000b3;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:20px;--radius-full:9999px;--player-height:90px;--sidebar-width:240px;--mobile-nav-height:60px;--font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body,#root{background-color:var(--bg-black);width:100%;height:100%;color:var(--text-base);font-family:var(--font-family);-webkit-user-select:none;user-select:none;font-size:14px;overflow:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.app-container{grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr var(--player-height);background-color:var(--bg-black);gap:8px;width:100vw;height:100dvh;padding:8px 8px 0;display:grid}.main-view-container{background:linear-gradient(to bottom, #202020 0%, var(--bg-base) 300px);border-radius:var(--radius-md);flex-direction:column;grid-area:1/2/2/3;display:flex;position:relative;overflow:hidden}.content-scrollable{-webkit-overflow-scrolling:touch;flex:1;padding:20px 32px 60px;overflow-y:auto}.app-header{-webkit-backdrop-filter:blur(20px);z-index:20;background:#121212d9;justify-content:space-between;align-items:center;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.section-title{letter-spacing:-.02em;margin-bottom:16px;font-size:1.4rem;font-weight:800}.card-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;margin-bottom:32px;display:grid}.spotify-card{background-color:var(--bg-surface);border-radius:var(--radius-md);cursor:pointer;flex-direction:column;padding:14px;transition:background-color .3s,transform .2s;display:flex;position:relative}.spotify-card:hover{background-color:var(--bg-surface-hover)}.card-image-wrapper{aspect-ratio:1;border-radius:var(--radius-sm);width:100%;margin-bottom:10px;position:relative;overflow:hidden;box-shadow:0 8px 16px #0006}.card-image{object-fit:cover;width:100%;height:100%;transition:transform .3s}.spotify-card:hover .card-image{transform:scale(1.04)}.play-button-overlay{background-color:var(--spotify-green);opacity:0;color:#000;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .3s,transform .3s;display:flex;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 8px 16px #00000080}.spotify-card:hover .play-button-overlay{opacity:1;transform:translateY(0)}.card-title{white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:.9rem;font-weight:700;overflow:hidden}.card-subtitle{color:var(--text-subdued);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.song-table{border-collapse:collapse;width:100%;margin-top:12px}.song-table th{color:var(--text-subdued);text-transform:uppercase;letter-spacing:1px;text-align:left;border-bottom:1px solid var(--border-subtle);padding:8px 12px;font-size:.75rem;font-weight:600}.song-row{border-radius:var(--radius-sm);cursor:pointer;height:56px;transition:background-color .2s}.song-row:hover{background-color:#ffffff14}.song-row.active{background-color:#1db9541f}.song-row td{vertical-align:middle;padding:8px 12px}.song-row .track-title{color:var(--text-base);font-size:.9rem;font-weight:600}.song-row.active .track-title{color:var(--spotify-green);font-weight:700}.player-bar{background-color:var(--bg-black);border-top:1px solid var(--border-subtle);z-index:30;grid-area:2/1/3/3;grid-template-columns:30% 40% 30%;align-items:center;padding:0 16px;display:grid}.player-left{align-items:center;gap:12px;display:flex}.now-playing-thumb{border-radius:var(--radius-sm);object-fit:cover;width:52px;height:52px}.player-center{flex-direction:column;justify-self:center;align-items:center;gap:4px;width:100%;max-width:720px;display:flex}.player-controls{align-items:center;gap:16px;display:flex}.control-btn{color:var(--text-subdued);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;transition:color .2s,transform .15s;display:flex}.control-btn:hover{color:var(--text-base)}.control-btn.active{color:var(--spotify-green)}.btn-play-pause{background-color:var(--text-base);width:36px;height:36px;color:var(--bg-black);border-radius:50%}.progress-container{width:100%;color:var(--text-subdued);align-items:center;gap:8px;font-size:.75rem;display:flex}.range-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:2px;outline:none;width:100%;height:4px}.range-slider::-webkit-slider-thumb{appearance:none;background:var(--text-base);cursor:pointer;border-radius:50%;width:10px;height:10px}.player-right{color:var(--text-subdued);justify-content:flex-end;align-items:center;gap:12px;display:flex}.mobile-nav-bar{display:none}.modal-backdrop{-webkit-backdrop-filter:blur(12px);z-index:100;background-color:#000000d9;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal-card{background-color:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);width:100%;max-width:500px;box-shadow:var(--shadow-xl);flex-direction:column;gap:16px;padding:24px;display:flex}@media (width<=768px){.app-container{flex-direction:column;gap:0;width:100vw;height:100dvh;padding:0;display:flex}.sidebar-container{display:none!important}.main-view-container{border-radius:0;flex:1;overflow:hidden}.content-scrollable{padding:16px max(16px, env(safe-area-inset-right)) 140px max(16px, env(safe-area-inset-left))}.app-header{height:56px;padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:8px;overflow:auto hidden}.app-header::-webkit-scrollbar{display:none}.app-header>*{flex-shrink:0}.header-nav-arrows{display:none!important}.header-search-wrapper{max-width:120px!important}.btn-text{display:none}.app-header button{padding-left:12px!important;padding-right:12px!important}.detail-titel{overflow-wrap:anywhere;font-size:clamp(1.3rem,6vw,2.2rem)!important}.detail-cover{width:120px!important;height:120px!important}.song-row td{padding-top:8px;padding-bottom:8px;font-size:.9rem}}@media (width<=400px){.content-scrollable{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}.header-search-wrapper{max-width:92px!important}.player-bar{-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);z-index:90;background-color:#181818f2;justify-content:space-between;align-items:center;height:64px;padding:0 12px;display:flex;position:fixed;bottom:56px;left:8px;right:8px;box-shadow:0 8px 24px #0009}.player-center{width:auto;max-width:none}.player-center .progress-container,.player-right{display:none}.mobile-nav-bar{height:calc(56px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid var(--border-subtle);z-index:95;background-color:#121212fa;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.mobile-nav-btn{color:var(--text-subdued);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:4px;padding:6px 0;font-size:.7rem;font-weight:500;display:flex}.mobile-nav-btn.active{color:var(--text-base);font-weight:700}.song-table th:nth-child(3),.song-row td:nth-child(3){display:none}.card-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}}