:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-tertiary: #1a1a2e;--bg-card: #16162a;--bg-card-hover: #1e1e38;--bg-glass: rgba(22, 22, 42, .7);--bg-player: rgba(10, 10, 15, .95);--text-primary: #ffffff;--text-secondary: #a0a0c0;--text-tertiary: #6e6e8e;--text-muted: #4a4a6a;--accent-primary: #7c3aed;--accent-secondary: #a855f7;--accent-gradient: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%);--accent-gradient-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--accent-glow: rgba(124, 58, 237, .4);--success: #10b981;--warning: #f59e0b;--error: #ef4444;--sidebar-width: 260px;--player-height: 90px;--header-height: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--shadow-glow: 0 0 40px var(--accent-glow);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}a{text-decoration:none;color:inherit}button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}ul,ol{list-style:none}img{display:block;max-width:100%}input{font-family:inherit;border:none;outline:none;background:none;color:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}.app-shell{display:grid;grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:1fr var(--player-height);height:100vh;width:100vw}.main-content{grid-column:2;grid-row:1;overflow-y:auto;overflow-x:hidden;background:var(--bg-primary);position:relative}.sidebar{grid-column:1;grid-row:1 / 3;background:var(--bg-secondary);border-right:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;padding:20px 0;z-index:100}.sidebar-logo{padding:0 24px 28px;display:flex;align-items:center;gap:12px}.sidebar-logo .logo-icon{width:40px;height:40px;background:var(--accent-gradient);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--shadow-glow)}.sidebar-logo h1{font-size:22px;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px}.sidebar-nav{flex:1;padding:0 12px}.sidebar-section-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);padding:20px 12px 8px}.nav-item{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:var(--radius-md);color:var(--text-secondary);font-size:14px;font-weight:500;transition:all var(--transition-fast);position:relative}.nav-item:hover{background:#7c3aed1a;color:var(--text-primary)}.nav-item.active{background:#7c3aed26;color:var(--accent-secondary)}.nav-item.active:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--accent-gradient);border-radius:var(--radius-full)}.nav-item svg{width:20px;height:20px;flex-shrink:0;opacity:.8}.nav-item.active svg{opacity:1}.content-header{position:sticky;top:0;z-index:50;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#0a0a0fcc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.03)}.search-container{position:relative;width:380px}.search-container input{width:100%;height:40px;padding:0 16px 0 42px;background:var(--bg-tertiary);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius-full);font-size:13px;color:var(--text-primary);transition:all var(--transition-fast)}.search-container input::placeholder{color:var(--text-muted)}.search-container input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px #7c3aed26}.search-container svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted)}.player-bar{grid-column:2;grid-row:2;background:var(--bg-player);border-top:1px solid rgba(255,255,255,.06);display:flex;align-items:center;padding:0 24px;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:100}.player-track-info{display:flex;align-items:center;gap:14px;width:280px;min-width:200px}.player-track-thumb{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;box-shadow:var(--shadow-sm)}.player-track-thumb.placeholder{background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;font-size:22px}.player-track-text h4{font-size:13px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.player-track-text p{font-size:11px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}.player-controls{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}.player-buttons{display:flex;align-items:center;gap:20px}.player-btn{display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition-fast)}.player-btn:hover{color:var(--text-primary);transform:scale(1.1)}.player-btn.play-btn{width:42px;height:42px;background:var(--accent-gradient);border-radius:50%;color:#fff;box-shadow:var(--shadow-glow)}.player-btn.play-btn:hover{transform:scale(1.08);box-shadow:0 0 50px var(--accent-glow)}.player-btn svg{width:18px;height:18px}.player-btn.play-btn svg{width:20px;height:20px}.player-progress{display:flex;align-items:center;gap:10px;width:100%;max-width:600px}.player-time{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:40px;text-align:center}.progress-bar-container{flex:1;height:4px;background:#ffffff14;border-radius:var(--radius-full);cursor:pointer;position:relative;overflow:hidden}.progress-bar-container:hover{height:6px}.progress-bar-fill{height:100%;background:var(--accent-gradient);border-radius:var(--radius-full);transition:width .1s linear}.player-volume{width:200px;display:flex;align-items:center;justify-content:flex-end;gap:10px}.volume-bar{width:100px;height:4px;background:#ffffff14;border-radius:var(--radius-full);cursor:pointer;overflow:hidden}.volume-bar-fill{height:100%;background:var(--text-secondary);border-radius:var(--radius-full)}.section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}.section-header h2{font-size:24px;font-weight:700;letter-spacing:-.3px}.section-header .see-all{font-size:13px;font-weight:500;color:var(--accent-secondary);transition:opacity var(--transition-fast)}.section-header .see-all:hover{opacity:.8}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:20px}.song-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:14px;cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.song-card:hover{background:var(--bg-card-hover);transform:translateY(-4px);box-shadow:var(--shadow-lg)}.song-card .card-image{width:100%;aspect-ratio:1;border-radius:var(--radius-md);object-fit:cover;background:var(--bg-tertiary);margin-bottom:12px;position:relative}.song-card .card-image-placeholder{width:100%;aspect-ratio:1;border-radius:var(--radius-md);background:var(--bg-tertiary);margin-bottom:12px;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--text-muted)}.song-card .play-overlay{position:absolute;bottom:20px;right:20px;width:44px;height:44px;background:var(--accent-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(8px);transition:all var(--transition-base);box-shadow:0 8px 24px #7c3aed80}.song-card:hover .play-overlay{opacity:1;transform:translateY(0)}.play-overlay svg{width:20px;height:20px;color:#fff;margin-left:2px}.song-card .favorite-overlay{position:absolute;top:10px;right:10px;width:32px;height:32px;background:#0a0a0f66;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.7;transition:all var(--transition-base);color:#fff;z-index:10}.song-card:hover .favorite-overlay,.song-card .favorite-overlay.active{opacity:1}.song-card .favorite-overlay:hover{background:#0a0a0fcc;transform:scale(1.1);color:var(--accent-secondary);opacity:1}.song-card .favorite-overlay.active:hover{color:var(--error)}.song-card .favorite-overlay svg{width:16px;height:16px}.song-card .card-title{font-size:14px;font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card .card-subtitle{font-size:12px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px}.artist-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base)}.artist-card:hover{background:var(--bg-card);transform:translateY(-4px)}.artist-card .artist-image{width:120px;height:120px;border-radius:50%;object-fit:cover;background:var(--bg-tertiary);box-shadow:var(--shadow-md);border:3px solid transparent;transition:border-color var(--transition-base)}.artist-card:hover .artist-image{border-color:var(--accent-primary)}.artist-card .artist-image-placeholder{width:120px;height:120px;border-radius:50%;background:var(--accent-gradient);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#fff;box-shadow:var(--shadow-md)}.artist-card .artist-name{font-size:14px;font-weight:600;text-align:center}.artist-card .artist-meta{font-size:12px;color:var(--text-tertiary)}.hero-section{position:relative;height:420px;overflow:hidden;margin:-1px -1px 0}.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}.hero-slide.active{opacity:1}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(40px) brightness(.4);transform:scale(1.2)}.hero-gradient{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--bg-primary) 95%)}.hero-content{position:absolute;bottom:50px;left:40px;z-index:10;display:flex;align-items:flex-end;gap:28px}.hero-content img{width:180px;height:180px;border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow-lg)}.hero-text{display:flex;flex-direction:column;gap:8px}.hero-text .hero-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--accent-secondary)}.hero-text h2{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.1}.hero-text p{font-size:15px;color:var(--text-secondary)}.hero-actions{display:flex;gap:12px;margin-top:8px}.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--accent-gradient);border-radius:var(--radius-full);font-size:14px;font-weight:600;color:#fff;transition:all var(--transition-fast);box-shadow:var(--shadow-glow)}.btn-primary:hover{transform:scale(1.04);box-shadow:0 0 50px var(--accent-glow)}.btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-full);font-size:14px;font-weight:600;color:var(--text-primary);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all var(--transition-fast)}.btn-secondary:hover{background:#ffffff24;border-color:#fff3}.hero-dots{position:absolute;bottom:20px;right:40px;display:flex;gap:8px;z-index:10}.hero-dot{width:8px;height:8px;border-radius:50%;background:#ffffff4d;cursor:pointer;transition:all var(--transition-fast)}.hero-dot.active{width:24px;border-radius:var(--radius-full);background:var(--accent-gradient)}.song-list{display:flex;flex-direction:column;gap:2px}.song-list-item{display:grid;grid-template-columns:40px 50px 1fr 1fr 80px 40px 60px;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.song-list-item:hover{background:#ffffff0a}.song-list-item.playing{background:#7c3aed1a}.song-list-item .track-num{font-size:14px;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums}.song-list-item .track-thumb{width:42px;height:42px;border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-tertiary)}.song-list-item .track-info h4{font-size:14px;font-weight:500}.song-list-item .track-info p{font-size:12px;color:var(--text-tertiary)}.song-list-item .track-album{font-size:13px;color:var(--text-tertiary)}.song-list-item .track-plays{font-size:13px;color:var(--text-tertiary);text-align:right;font-variant-numeric:tabular-nums}.song-list-item .list-favorite-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--text-muted);transition:all var(--transition-fast);opacity:.7}.song-list-item:hover .list-favorite-btn,.song-list-item .list-favorite-btn.active{opacity:1}.song-list-item .list-favorite-btn:hover{background:#ffffff1a;color:var(--accent-secondary);opacity:1}.song-list-item .list-favorite-btn.active:hover{color:var(--error)}.song-list-item .list-favorite-btn.active{color:var(--text-primary)}.song-list-item .list-favorite-btn svg{width:18px;height:18px}.song-list-item .track-duration{font-size:13px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums}.list-header{display:grid;grid-template-columns:40px 50px 1fr 1fr 80px 40px 60px;align-items:center;gap:12px;padding:8px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px}.list-header span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.page-content{padding:28px 32px 120px}.page-section{margin-bottom:44px}.horizontal-scroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.horizontal-scroll::-webkit-scrollbar{height:4px}.horizontal-scroll>*{flex-shrink:0;scroll-snap-align:start;width:175px}.detail-header{display:flex;align-items:flex-end;gap:28px;padding:40px 32px 32px;background:linear-gradient(to bottom,var(--bg-tertiary) 0%,var(--bg-primary) 100%)}.detail-cover{width:220px;height:220px;border-radius:var(--radius-lg);object-fit:cover;box-shadow:var(--shadow-lg)}.detail-info h1{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:8px}.detail-info .detail-meta{font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;margin-bottom:16px}.detail-info .detail-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--text-muted)}.skeleton{background:linear-gradient(90deg,var(--bg-tertiary) 25%,var(--bg-card-hover) 50%,var(--bg-tertiary) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted);text-align:center}.empty-state .empty-icon{font-size:48px;margin-bottom:16px;opacity:.5}.empty-state h3{font-size:18px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}.empty-state p{font-size:14px;max-width:300px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-in{animation:fadeInUp .4s ease forwards}@media(max-width:768px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.main-content,.player-bar{grid-column:1}.hero-section{height:320px}.hero-content{left:20px;bottom:30px}.hero-content img{width:120px;height:120px}.hero-text h2{font-size:28px}.page-content{padding:20px 16px 120px}.card-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.player-track-info{width:auto;min-width:140px}.player-volume{display:none}.song-list-item{grid-template-columns:30px 40px 1fr 60px}.song-list-item .track-album,.song-list-item .track-plays{display:none}.list-header{grid-template-columns:30px 40px 1fr 60px}.list-header span:nth-child(4),.list-header span:nth-child(5){display:none}}.charts-grid{display:flex;flex-direction:column;gap:4px}.chart-row{display:grid;grid-template-columns:48px 48px 1fr auto 36px;align-items:center;gap:16px;padding:10px 16px;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.chart-row:hover{background:#ffffff0a}.chart-rank{font-size:20px;font-weight:800;color:var(--text-muted);text-align:center;font-variant-numeric:tabular-nums;min-width:32px}.chart-rank.top3{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:24px}.chart-thumb{width:48px;height:48px;border-radius:6px;object-fit:cover}.chart-info{min-width:0}.chart-info h4{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-info p{font-size:12px;color:var(--text-tertiary);margin-top:2px}.chart-plays{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.chart-row .list-favorite-btn{opacity:.7}.chart-row:hover .list-favorite-btn,.chart-row .list-favorite-btn.active{opacity:1}.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.genre-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:24px 20px;min-height:120px;display:flex;align-items:flex-end;text-decoration:none;transition:transform var(--transition-fast),box-shadow var(--transition-fast);cursor:pointer}.genre-card:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 12px 32px #0006}.genre-card-bg{position:absolute;top:-10px;right:-10px;width:80px;height:80px;border-radius:50%;object-fit:cover;opacity:.3;transform:rotate(15deg)}.genre-card-content{position:relative;z-index:2}.genre-card-content h3{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px;text-shadow:0 1px 4px rgba(0,0,0,.3)}.genre-card-content span{font-size:12px;color:#fffc}.section-subtitle{font-size:13px;color:var(--text-muted);font-weight:400}@media(max-width:768px){.chart-row{grid-template-columns:36px 40px 1fr 36px;gap:10px;padding:8px 12px}.chart-plays{display:none}.chart-rank{font-size:16px}.chart-rank.top3{font-size:20px}.genre-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.genre-card{min-height:90px;padding:16px 14px}.genre-card-content h3{font-size:15px}}.podcast-card{width:280px}.podcast-card .card-image,.podcast-card .card-image-placeholder{border-radius:var(--radius-lg);aspect-ratio:16 / 9;object-fit:cover}.podcast-card .play-overlay{border-radius:var(--radius-lg);aspect-ratio:16 / 9}.podcast-card .card-title{margin-top:12px;font-size:15px;line-height:1.4;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.podcast-card .card-subtitle{font-size:13px;color:var(--accent)}.app-shell.admin-mode.svelte-12qhfyh{display:block;height:100vh;width:100vw;overflow:hidden}.main-content.full-width.svelte-12qhfyh{grid-column:1 / -1;grid-row:1 / -1;width:100%;height:100%}