:root{--bg-base: #08090d;--bg-surface: #0f1118;--bg-surface-elevated: #161922;--bg-card: rgba(26, 29, 41, .7);--bg-card-hover: rgba(38, 43, 60, .85);--bg-glass: rgba(18, 20, 29, .75);--accent-primary: #10b981;--accent-primary-hover: #059669;--accent-glow: rgba(16, 185, 129, .35);--accent-cyan: #06b6d4;--accent-violet: #8b5cf6;--text-main: #f8fafc;--text-secondary: #94a3b8;--text-muted: #64748b;--border-subtle: rgba(255, 255, 255, .08);--border-focus: rgba(16, 185, 129, .45);--sidebar-width: 250px;--player-height: 90px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-full: 9999px;--font-heading: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--transition-fast: .18s cubic-bezier(.4, 0, .2, 1);--transition-normal: .28s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-base);color:var(--text-main);overflow:hidden;height:100vh;width:100vw;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,.font-heading{font-family:var(--font-heading);letter-spacing:-.02em}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff47}.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh;min-height:-webkit-fill-available;width:100vw;overflow:hidden;position:relative;background:radial-gradient(circle at 15% 15%,rgba(16,185,129,.07) 0%,transparent 45%),radial-gradient(circle at 85% 85%,rgba(139,92,246,.06) 0%,transparent 50%),var(--bg-base)}.app-main-area{display:flex;flex:1;overflow:hidden;position:relative}.sidebar{width:var(--sidebar-width);background:var(--bg-surface);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;padding:24px 16px;gap:28px;z-index:10;flex-shrink:0}.brand-header{display:flex;align-items:center;gap:12px;padding:0 8px}.brand-icon{width:36px;height:36px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent-primary),var(--accent-cyan));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 16px var(--accent-glow)}.brand-title{font-size:1.35rem;font-weight:800;background:linear-gradient(to right,#fff,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.nav-group{display:flex;flex-direction:column;gap:6px}.nav-group-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700;padding:0 12px 6px}.nav-item{display:flex;align-items:center;gap:14px;padding:10px 14px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.92rem;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all var(--transition-fast)}.nav-item:hover{color:var(--text-main);background:#ffffff0d}.nav-item.active{color:var(--accent-primary);background:#10b9811f;border-color:#10b98133}.nav-badge{margin-left:auto;font-size:.72rem;padding:2px 8px;background:var(--bg-surface-elevated);border-radius:var(--radius-full);color:var(--accent-cyan)}.content-wrapper{flex:1;overflow-y:auto;padding:32px 40px;display:flex;flex-direction:column;gap:36px}.top-nav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:8px}.search-bar-container{display:flex;align-items:center;gap:12px;background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-full);padding:10px 20px;width:100%;max-width:480px;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.search-bar-container:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 3px #10b9811f}.search-input{background:transparent;border:none;outline:none;color:var(--text-main);font-family:inherit;font-size:.95rem;width:100%}.search-input::placeholder{color:var(--text-muted)}.hero-banner{background:linear-gradient(135deg,#10b9812e,#0f172acc),url(https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?w=1600&auto=format&fit=crop);background-size:cover;background-position:center 30%;border-radius:var(--radius-lg);padding:44px;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px;position:relative;overflow:hidden;border:1px solid var(--border-subtle);box-shadow:0 12px 32px #00000059}.hero-tag{display:inline-flex;align-items:center;gap:6px;background:#10b98140;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#6ee7b7;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 12px;border-radius:var(--radius-full);margin-bottom:14px;width:fit-content;border:1px solid rgba(16,185,129,.35)}.hero-title{font-size:2.5rem;font-weight:800;margin-bottom:10px;line-height:1.1}.hero-subtitle{color:#cbd5e1;font-size:1.05rem;max-width:600px;line-height:1.5}.section-title{font-size:1.45rem;font-weight:700;margin-bottom:18px;display:flex;align-items:center;justify-content:space-between}.category-chips-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:18px;scrollbar-width:none}.category-chips-row::-webkit-scrollbar{display:none}.category-chip{padding:6px 14px;border-radius:var(--radius-full);background:#ffffff0f;border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.category-chip:hover{background:#ffffff1f;color:var(--text-main);border-color:#fff3}.category-chip.active{background:var(--accent-primary);border-color:var(--accent-primary);color:#08090d;font-weight:700;box-shadow:0 2px 10px var(--accent-glow)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}.music-card{background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:14px;cursor:pointer;transition:all var(--transition-normal);display:flex;flex-direction:column;position:relative}.music-card:hover{background:var(--bg-card-hover);transform:translateY(-4px);border-color:#ffffff29;box-shadow:0 12px 28px #00000073}.card-cover-wrapper{position:relative;width:100%;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:12px;background:#1e2230}.card-cover-img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.music-card:hover .card-cover-img{transform:scale(1.04)}.card-play-btn{position:absolute;bottom:10px;right:10px;width:44px;height:44px;border-radius:var(--radius-full);background:var(--accent-primary);color:#fff;border:none;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:all var(--transition-fast);cursor:pointer;box-shadow:0 4px 16px var(--accent-glow)}.music-card:hover .card-play-btn{opacity:1;transform:translateY(0)}.card-play-btn:hover{transform:scale(1.08);background:var(--accent-primary-hover)}.card-title{font-weight:700;font-size:.95rem;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-artist{color:var(--text-secondary);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-list{display:flex;flex-direction:column;gap:4px}.track-row{display:grid;grid-template-columns:40px minmax(180px,1fr) 180px 54px 110px;align-items:center;gap:12px;padding:8px 14px;border-radius:var(--radius-md);transition:background var(--transition-fast);cursor:pointer}.track-row:hover{background:#ffffff0d}.track-row.active{background:#10b9811a}.track-index{color:var(--text-muted);font-size:.88rem;font-weight:600;display:flex;align-items:center}.track-info{display:flex;align-items:center;gap:14px;overflow:hidden}.track-thumb{width:44px;height:44px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0;background:#1e2230}.track-text-block{overflow:hidden}.track-name{font-weight:600;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-main)}.track-row.active .track-name{color:var(--accent-primary)}.track-subtext{color:var(--text-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-album{color:var(--text-secondary);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-duration{color:var(--text-muted);font-size:.82rem;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.track-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:104px;flex-shrink:0}@media(max-width:900px){.track-row{grid-template-columns:36px minmax(140px,1fr) 50px 104px;gap:8px}.track-album{display:none}}@media(max-width:600px){.track-row{grid-template-columns:28px minmax(120px,1fr) 96px;padding:8px 10px;gap:6px}.track-duration{display:none}.track-actions{min-width:96px;gap:4px}}.action-icon-btn{background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;border-radius:var(--radius-full);transition:color var(--transition-fast),transform var(--transition-fast)}.action-icon-btn:hover{color:var(--text-main);transform:scale(1.1)}.action-icon-btn.liked{color:#ef4444}.action-icon-btn.downloaded{color:var(--accent-primary)}.sound-wave{display:flex;align-items:flex-end;gap:2px;height:16px;width:16px}.wave-bar{width:3px;background:var(--accent-primary);border-radius:1px;animation:wave-bounce 1s ease-in-out infinite alternate}.wave-bar:nth-child(1){height:40%;animation-delay:.1s}.wave-bar:nth-child(2){height:100%;animation-delay:.3s}.wave-bar:nth-child(3){height:60%;animation-delay:.2s}@keyframes wave-bounce{0%{height:25%}to{height:100%}}.player-bar{height:var(--player-height);background:var(--bg-surface);border-top:1px solid var(--border-subtle);display:grid;grid-template-columns:300px 1fr 300px;align-items:center;padding:0 28px;z-index:20;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.player-track-info{display:flex;align-items:center;gap:14px}.player-cover{width:56px;height:56px;border-radius:var(--radius-sm);object-fit:cover;box-shadow:0 4px 12px #0006}.player-meta{overflow:hidden}.player-title{font-weight:700;font-size:.95rem;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{color:var(--text-muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-center-controls{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:600px;margin:0 auto;width:100%}.control-buttons-row{display:flex;align-items:center;gap:20px}.ctrl-btn{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast),transform var(--transition-fast)}.ctrl-btn:hover{color:var(--text-main)}.ctrl-btn.active{color:var(--accent-primary)}.play-pause-btn{width:40px;height:40px;border-radius:var(--radius-full);background:#fff;color:#000;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 2px 10px #fff3;transition:transform var(--transition-fast),background var(--transition-fast)}.play-pause-btn:hover{transform:scale(1.06);background:#f1f5f9}.progress-row{display:flex;align-items:center;gap:10px;width:100%}.time-label{font-size:.75rem;color:var(--text-muted);min-width:36px;font-variant-numeric:tabular-nums}.scrubber-track{flex:1;height:4px;background:#ffffff26;border-radius:var(--radius-full);position:relative;cursor:pointer;transition:height var(--transition-fast)}.scrubber-track:hover{height:6px}.scrubber-buffered{position:absolute;top:0;left:0;height:100%;background:#ffffff40;border-radius:var(--radius-full)}.scrubber-progress{position:absolute;top:0;left:0;height:100%;background:var(--accent-primary);border-radius:var(--radius-full)}.scrubber-handle{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:var(--radius-full);background:#fff;box-shadow:0 2px 4px #0006;opacity:0;transition:opacity var(--transition-fast)}.scrubber-track:hover .scrubber-handle{opacity:1}.player-right-tools{display:flex;align-items:center;justify-content:flex-end;gap:16px}.volume-container{display:flex;align-items:center;gap:10px;width:130px}.volume-slider{flex:1;height:4px;background:#ffffff26;border-radius:var(--radius-full);cursor:pointer;position:relative}.volume-fill{height:100%;background:var(--text-secondary);border-radius:var(--radius-full);transition:background var(--transition-fast)}.volume-slider:hover .volume-fill{background:var(--accent-primary)}.badge-offline{display:inline-flex;align-items:center;gap:4px;background:#10b98126;color:#34d399;border:1px solid rgba(16,185,129,.3);padding:2px 8px;border-radius:var(--radius-full);font-size:.72rem;font-weight:700}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 20px;text-align:center;gap:16px}.empty-state-icon{width:64px;height:64px;border-radius:var(--radius-full);background:var(--bg-surface-elevated);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent-primary);border-radius:50%;animation:spin .8s linear infinite}.animate-spin{animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mobile-player-progress,.player-mobile-controls{display:none}.desktop-only-btn{display:inline-flex}@media(min-width:769px)and (max-width:1024px){.sidebar{width:76px;padding:16px 8px}.brand-title,.nav-item span,.nav-group-title,.nav-badge,.sidebar-playlist-section,.pwa-install-banner{display:none!important}.nav-item{justify-content:center;padding:12px}.player-bar{grid-template-columns:240px 1fr 180px;padding:0 16px}}.mobile-bottom-nav{display:none}.mobile-tab-dot{position:absolute;top:-2px;right:-3px;width:7px;height:7px;background:var(--accent-primary);border-radius:50%}@media(max-width:768px){.desktop-sidebar{display:none!important}.app-container{height:100dvh;min-height:-webkit-fill-available;width:100vw;overflow:hidden}.app-main-area{display:flex;flex-direction:column;width:100vw;height:100%;overflow:hidden;position:relative}.content-wrapper{flex:1!important;height:100%!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding:16px 12px calc(140px + env(safe-area-inset-bottom,0px)) 12px!important;gap:20px!important}.mobile-bottom-nav{display:flex!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;width:100vw!important;height:calc(58px + env(safe-area-inset-bottom,0px))!important;padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px)) 4px!important;background:#0c0e14f5!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border-top:1px solid rgba(255,255,255,.08)!important;border-right:none!important;justify-content:space-around!important;align-items:center!important;gap:0!important;z-index:1000!important;box-shadow:0 -4px 24px #0009!important}.mobile-tab-btn{background:transparent!important;border:none!important;outline:none!important;color:var(--text-muted)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:4px 6px!important;border-radius:8px!important;font-size:.66rem!important;flex:1!important;cursor:pointer!important;transition:color .15s ease,transform .15s ease!important;-webkit-user-select:none!important;user-select:none!important;-webkit-tap-highlight-color:transparent!important}.mobile-tab-btn span{font-size:.62rem!important;font-weight:600!important;line-height:1!important;letter-spacing:-.01em!important}.mobile-tab-btn.active{color:var(--accent-primary)!important}.mobile-tab-btn.active span{font-weight:700!important}.player-bar{position:fixed!important;bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;left:8px!important;right:8px!important;height:54px!important;border-radius:12px!important;background:#161922f5!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:0 10px 30px #000000b3!important;display:flex!important;justify-content:space-between!important;align-items:center!important;padding:0 10px!important;z-index:999!important;overflow:hidden!important}.player-bar-empty{display:none!important}.mobile-player-progress{display:block!important;position:absolute!important;top:0!important;left:0!important;height:3px!important;background:linear-gradient(90deg,var(--accent-primary),var(--accent-cyan))!important;border-radius:12px 12px 0 0!important;z-index:10!important;transition:width .1s linear!important}.player-mobile-controls{display:flex!important;align-items:center!important;gap:8px!important;flex-shrink:0!important}.player-controls,.player-right-tools,.desktop-only-btn{display:none!important}.player-track-info{flex:1!important;min-width:0!important;gap:10px!important}.player-cover{width:38px!important;height:38px!important;border-radius:6px!important;flex-shrink:0!important}.player-title{font-size:.84rem!important;max-width:calc(100vw - 150px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.player-artist{font-size:.7rem!important;max-width:calc(100vw - 150px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.cards-grid,.track-grid,.playlist-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.hero-banner{padding:20px 14px!important;min-height:auto!important;border-radius:var(--radius-md)!important}.hero-title{font-size:1.35rem!important}.hero-subtitle{font-size:.82rem!important}.search-bar-container{max-width:100%!important;padding:8px 14px!important}.top-nav-bar{margin-bottom:0!important}}