: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;--akzent-gruen:#1db954;--akzent-gruen-hover:#1ed760;--akzent-gruen-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}.header-menu-mobile,.player-menu-mobile{display:none}.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}.musik-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}.musik-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}.musik-card:hover .card-image{transform:scale(1.04)}.play-button-overlay{background-color:var(--akzent-gruen);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}.musik-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(--akzent-gruen);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(--akzent-gruen)}.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));gap:8px}.app-header>:first-child{flex:auto;min-width:0}.header-nav-arrows{display:none!important}.header-search-wrapper{max-width:120px!important}.header-actions-desktop{display:none!important}.header-menu-mobile{flex-shrink:0;display:block}.app-header{justify-content:space-between;overflow:visible}.btn-text{display:none}.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 (height<=500px) and (orientation:landscape){.app-header{height:48px}.player-bar{height:64px;padding:0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))}.player-bar .volume-slider,.player-right .range-slider,.sidebar-container{display:none}.app-container{grid-template-columns:1fr}}@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}}@media (width<=768px){.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;gap:10px;height:64px;padding:0 12px;display:flex;position:fixed;bottom:56px;left:8px;right:8px;box-shadow:0 8px 24px #0009}.player-left{flex:auto;min-width:0;overflow:hidden}.player-left>div,.player-left span,.player-left a{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.now-playing-thumb{flex-shrink:0}.player-center{flex:none;width:auto;max-width:none}.player-center .progress-container{display:none}.player-controls{gap:2px}.player-controls .control-btn{width:auto;height:auto;padding:6px}.player-controls .btn-play-pause{width:40px;height:40px}.player-right{display:none}.player-menu-mobile{flex-shrink:0;display:flex}.player-bar{overflow:visible}.player-left .control-btn{display:none}}@media (width<=400px){.player-left{max-width:40%}.now-playing-thumb{width:40px!important;height:40px!important}.player-controls .control-btn{padding:4px}}@media (width<=768px){.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}}