:root{--bg-main: #0c0d0e;--bg-card: #18191c;--bg-card-hover: #232529;--bg-elevated: #1e2024;--bg-player: rgba(18, 19, 22, .88);--brand-green: #1db954;--brand-green-hover: #1ed760;--brand-green-glow: rgba(29, 185, 84, .35);--text-primary: #ffffff;--text-secondary: #a7a7a7;--text-muted: #6a6a6a;--border-subtle: rgba(255, 255, 255, .08);--border-light: rgba(255, 255, 255, .15);--glass-bg: rgba(20, 21, 24, .75);--glass-border: rgba(255, 255, 255, .1);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .45);--sidebar-width: 250px;--player-height: 88px;--bottom-nav-height: 64px}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;background-color:var(--bg-main);color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}#root{width:100%;height:100%;display:flex;flex-direction:column}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff59}.app-container{display:flex;width:100%;height:100%;position:relative;overflow:hidden}.main-content-area{flex:1;display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 0%,#1e261f 0%,var(--bg-main) 60%)}.view-scroll-container{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;position:relative;height:100%;padding-bottom:2rem}.has-player .view-scroll-container{padding-bottom:calc(var(--player-height) + 1.5rem)}@media(max-width:768px){.view-scroll-container{padding-bottom:calc(var(--bottom-nav-height) + 1.5rem);scrollbar-gutter:auto}.has-player .view-scroll-container{padding-bottom:calc(var(--bottom-nav-height) + 80px)}}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}.btn-primary{background-color:var(--brand-green);color:#000;font-weight:700;font-size:.95rem;padding:.75rem 1.75rem;border-radius:9999px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 15px var(--brand-green-glow)}.btn-primary:hover{background-color:var(--brand-green-hover);transform:scale(1.04);box-shadow:0 6px 20px #1db95480}.btn-primary:active{transform:scale(.98)}.btn-secondary{background-color:#ffffff1a;color:var(--text-primary);font-weight:600;font-size:.9rem;padding:.6rem 1.25rem;border-radius:9999px;border:1px solid var(--border-subtle);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:all .2s ease}.btn-secondary:hover{background-color:#ffffff2e;border-color:var(--border-light);transform:translateY(-1px)}.btn-icon{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;transition:all .18s ease}.btn-icon:hover{color:var(--text-primary);background:#ffffff1a;transform:scale(1.1)}.btn-icon.active{color:var(--brand-green)}.recent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:2rem}@media(min-width:900px){.recent-grid{grid-template-columns:repeat(3,1fr);gap:.75rem}}.recent-card{display:flex;align-items:center;height:56px;background-color:#1e1e1e;border-radius:4px;overflow:hidden;cursor:pointer;transition:background-color .18s ease,transform .18s ease;position:relative}.recent-card:hover{background-color:#2a2a2a;transform:translateY(-1px)}.recent-card img{width:56px;height:56px;object-fit:cover;flex-shrink:0;background-color:#282828}.recent-card .recent-title{font-size:.82rem;font-weight:700;padding:0 .6rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;flex:1}.recent-card.is-playing .recent-title{color:var(--brand-green)}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem}@media(max-width:640px){.card-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}}.music-card{background:var(--bg-card);border-radius:12px;padding:1rem;transition:all .25s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;overflow:hidden;border:1px solid transparent}.music-card:hover{background:var(--bg-card-hover);transform:translateY(-4px);border-color:var(--border-subtle);box-shadow:0 10px 25px #00000080}.music-card .cover-wrapper{position:relative;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;margin-bottom:.75rem;box-shadow:0 4px 12px #0006}.music-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.music-card:hover img{transform:scale(1.05)}.music-card .play-overlay{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;background:var(--brand-green);color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #0009;opacity:0;transform:translateY(8px);transition:all .25s ease}.music-card:hover .play-overlay{opacity:1;transform:translateY(0)}.song-row{display:flex;align-items:center;padding:.6rem .85rem;border-radius:8px;gap:1rem;cursor:pointer;transition:all .18s ease}.song-row:hover{background:#ffffff14}.song-row.is-active{background:#1db9541f}.song-row.is-active .song-title{color:var(--brand-green)}.marquee-container{width:100%;overflow:hidden;white-space:nowrap;position:relative}.song-row:hover .marquee-text{display:inline-block;animation:marqueeScroll 6s ease-in-out infinite alternate}@keyframes marqueeScroll{0%,25%{transform:translate(0)}75%,to{transform:translate(calc(-100% + 240px))}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;transition:height .15s ease}input[type=range]:hover{height:6px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text-primary);cursor:pointer;transition:all .15s ease;box-shadow:0 0 8px #00000080;opacity:0}input[type=range]:hover::-webkit-slider-thumb{opacity:1;transform:scale(1.2);background:var(--brand-green)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin .85s linear infinite!important;transform-origin:center center}@keyframes pulse-live{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.6}to{transform:scale(1);opacity:1}}.live-indicator{width:8px;height:8px;border-radius:50%;background-color:var(--brand-green);animation:pulse-live 1.8s infinite}.hidden-mobile{display:flex!important}.visible-mobile{display:none!important}.desktop-only{display:flex!important}.mobile-only{display:none!important}.player-bar-container{position:fixed;bottom:0;left:0;right:0;height:var(--player-height);background-color:var(--bg-player);border-top:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;z-index:60;gap:1rem}@media(max-width:768px){.hidden-mobile{display:none!important}.visible-mobile{display:flex!important}.desktop-only{display:none!important}.mobile-only{display:flex!important}.has-player.app-container:after{content:"";position:fixed;bottom:0;left:0;right:0;height:140px;background:linear-gradient(to top,#0c0d0efa,#0c0d0ecc,#0c0d0e00);pointer-events:none;z-index:40}.player-bar-container{bottom:calc(var(--bottom-nav-height) + 6px)!important;left:8px!important;right:8px!important;height:56px!important;border-radius:12px!important;background-color:#16181cf0!important;backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;border:1px solid rgba(255,255,255,.12)!important;padding:0 .75rem!important;box-shadow:0 10px 30px #000000d9,0 0 20px #00000080!important;z-index:45!important}}.online-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:9999px;font-size:.75rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}@media(max-width:600px){.online-pill{padding:2px 7px;font-size:.68rem;gap:4px}}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:#fff3;border-radius:9999px;outline:none;cursor:pointer;transition:height .15s ease,background .15s ease}input[type=range]:hover{background:#ffffff59}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #000000bf,0 0 6px var(--brand-green);cursor:pointer;transition:transform .15s ease,background-color .15s ease}input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background:var(--brand-green)}input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 8px #000000bf,0 0 6px var(--brand-green);cursor:pointer}input[type=range]::-moz-range-progress{background-color:var(--brand-green);border-radius:9999px;height:6px}.mobile-scrubber{height:8px!important}.mobile-scrubber::-webkit-slider-thumb{width:20px!important;height:20px!important;background:#fff!important;border:2px solid var(--brand-green)!important;box-shadow:0 3px 12px #000000e6,0 0 10px var(--brand-green-glow)!important}