:root{--bg-primary: #0a0d13;--bg-secondary: #161b26;--bg-tertiary: #1e2330;--bg-quaternary: #262b3d;--bg-glass: rgba(30, 35, 48, 0.8);--bg-hover: rgba(99, 102, 241, 0.1);--text-primary: #f1f5f9;--text-secondary: #cbd5e0;--text-muted: #94a3b8;--text-accent: #6366f1;--accent-primary: #6366f1;--accent-primary-rgb: 99, 102, 241;--accent-secondary: #8b5cf6;--accent-secondary-rgb: 139, 92, 246;--accent-tertiary: #ec4899;--accent-success: #10b981;--accent-warning: #f59e0b;--accent-error: #ef4444;--border-subtle: rgba(99, 102, 241, 0.15);--border-medium: rgba(99, 102, 241, 0.3);--border-strong: rgba(99, 102, 241, 0.6);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);--shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.5);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 24px;--radius-full: 9999px;--spacing-xs: 0.25rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;--font-mono: 'JetBrains Mono', 'Fira Code', monospace;--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--z-toast: 1080}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);background-image:radial-gradient(circle at 20% 80%, rgba(99,102,241,0.03) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(139,92,246,0.03) 0%, transparent 50%),radial-gradient(circle at 40% 40%, rgba(236,72,153,0.02) 0%, transparent 50%);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-md);color:var(--text-primary)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}p{margin-bottom:var(--spacing-md);color:var(--text-secondary)}a{color:var(--accent-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--accent-secondary)}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}@media (min-width: 768px){.container{padding:0 var(--spacing-lg)}}@media (min-width: 1024px){.container{padding:0 var(--spacing-xl)}}.container-fluid{width:100%;padding:0 var(--spacing-md)}.grid{display:grid;gap:var(--spacing-md)}.grid.gap-sm{gap:var(--spacing-sm)}.grid.gap-lg{gap:var(--spacing-lg)}.grid.gap-xl{gap:var(--spacing-xl)}.grid.cols-1{grid-template-columns:1fr}.grid.cols-2{grid-template-columns:repeat(2, 1fr)}.grid.cols-3{grid-template-columns:repeat(3, 1fr)}.grid.cols-4{grid-template-columns:repeat(4, 1fr)}.grid.cols-5{grid-template-columns:repeat(5, 1fr)}.grid.cols-6{grid-template-columns:repeat(6, 1fr)}.grid.cols-auto{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}.grid.cols-auto-sm{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr))}.grid.cols-auto-lg{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}.flex{display:flex}.flex.flex-col{flex-direction:column}.flex.flex-wrap{flex-wrap:wrap}.flex.items-center{align-items:center}.flex.items-start{align-items:flex-start}.flex.items-end{align-items:flex-end}.flex.justify-center{justify-content:center}.flex.justify-between{justify-content:space-between}.flex.justify-around{justify-content:space-around}.flex.justify-end{justify-content:flex-end}.flex.gap-sm{gap:var(--spacing-sm)}.flex.gap-md{gap:var(--spacing-md)}.flex.gap-lg{gap:var(--spacing-lg)}.card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-lg);transition:all var(--transition-normal)}.card:hover{border-color:var(--border-medium);box-shadow:var(--shadow-glow);transform:translateY(-2px)}.card.card-sm{padding:var(--spacing-md)}.card.card-lg{padding:var(--spacing-xl)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:0.875rem;font-weight:500;text-decoration:none;cursor:pointer;transition:all var(--transition-fast);position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left var(--transition-slow)}.btn:hover::before{left:100%}.btn.btn-primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:white}.btn.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-glow)}.btn.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn.btn-secondary:hover{background:var(--bg-quaternary);border-color:var(--border-medium)}.btn.btn-ghost{background:transparent;color:var(--accent-primary);border:1px solid var(--accent-primary)}.btn.btn-ghost:hover{background:var(--bg-hover)}.btn.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-full)}.btn.btn-sm{padding:var(--spacing-xs) var(--spacing-md);font-size:0.75rem}.btn.btn-lg{padding:var(--spacing-md) var(--spacing-xl);font-size:1rem}.input{width:100%;padding:var(--spacing-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:0.875rem;transition:all var(--transition-fast)}.input::placeholder{color:var(--text-muted)}.input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}.input.input-sm{padding:var(--spacing-sm) var(--spacing-md);font-size:0.75rem}.input.input-lg{padding:var(--spacing-lg);font-size:1rem}.navbar{position:sticky;top:0;z-index:var(--z-sticky);background:var(--bg-glass);border-bottom:1px solid var(--border-subtle);padding:var(--spacing-md) 0}.navbar .navbar-brand{font-size:1.5rem;font-weight:700;color:var(--text-primary);text-decoration:none}.navbar .navbar-brand .brand-gradient{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar .navbar-nav{display:flex;gap:var(--spacing-lg);list-style:none;align-items:center}.navbar .navbar-nav li{position:relative}.navbar .navbar-nav .nav-link{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-secondary);text-decoration:none;font-weight:500;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);transition:all var(--transition-fast)}.navbar .navbar-nav .nav-link:hover,.navbar .navbar-nav .nav-link.active{color:var(--accent-primary);background:var(--bg-hover)}.navbar .navbar-nav .dropdown{position:relative}.navbar .navbar-nav .dropdown .dropdown-toggle{cursor:pointer}.navbar .navbar-nav .dropdown .dropdown-menu{position:absolute;top:100%;right:0;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);min-width:220px;padding:var(--spacing-md) 0;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all var(--transition-fast);z-index:var(--z-dropdown);list-style:none;box-shadow:var(--shadow-xl)}.navbar .navbar-nav .dropdown .dropdown-menu li{padding:0}.navbar .navbar-nav .dropdown .dropdown-menu li a{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-secondary);text-decoration:none;transition:all var(--transition-fast);font-size:0.95rem}.navbar .navbar-nav .dropdown .dropdown-menu li a i{font-size:20px;width:20px;flex-shrink:0}.navbar .navbar-nav .dropdown .dropdown-menu li a:hover,.navbar .navbar-nav .dropdown .dropdown-menu li a.active{color:var(--accent-primary);background:var(--bg-hover);transform:translateX(4px)}.navbar .navbar-nav .dropdown:hover .dropdown-menu,.navbar .navbar-nav .dropdown.active .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}.navbar .mobile-menu-btn{display:none;background:none;border:none;color:var(--text-primary);font-size:1.5rem;cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative;overflow:hidden}.navbar .mobile-menu-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(99,102,241,0.3);border-radius:50%;transform:translate(-50%, -50%);transition:width 0.6s ease, height 0.6s ease}.navbar .mobile-menu-btn:hover{background:var(--bg-hover);color:var(--accent-primary);transform:scale(1.05)}.navbar .mobile-menu-btn:active{transform:scale(0.95)}.navbar .mobile-menu-btn:active::after{width:40px;height:40px}.navbar .mobile-menu-btn.active{transform:rotate(90deg);color:var(--accent-primary)}.toast{position:fixed;top:var(--spacing-lg);right:var(--spacing-lg);z-index:var(--z-toast);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-primary);transform:translateX(100%);transition:transform var(--transition-normal)}.toast.show{transform:translateX(0)}.toast.toast-success{border-color:var(--accent-success);background:rgba(16,185,129,0.1)}.toast.toast-error{border-color:var(--accent-error);background:rgba(239,68,68,0.1)}.beatmap-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition-normal);position:relative}.beatmap-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-glow);border-color:var(--border-medium)}.beatmap-card .beatmap-image{position:relative;aspect-ratio:16/9;overflow:hidden}.beatmap-card .beatmap-image img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-normal)}.beatmap-card .beatmap-image:hover img{transform:scale(1.05)}.beatmap-card .beatmap-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top, rgba(10,13,19,0.8), transparent);pointer-events:none}.beatmap-card .beatmap-image .play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:60px;height:60px;background:var(--bg-glass);border:2px solid rgba(255,255,255,0.3);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;opacity:0;transition:all var(--transition-normal);cursor:pointer;user-select:none}.beatmap-card .beatmap-image .play-btn:hover{background:var(--accent-primary);border-color:var(--accent-primary);transform:translate(-50%, -50%) scale(1.1);box-shadow:var(--shadow-glow)}.beatmap-card .beatmap-image .play-btn i{color:white;font-size:2rem;pointer-events:none;line-height:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.beatmap-card .beatmap-image .play-btn .play{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.beatmap-card .beatmap-image .play-btn .stop{display:none;align-items:center;justify-content:center;width:100%;height:100%}.beatmap-card .beatmap-image .play-btn.playing .play{display:none}.beatmap-card .beatmap-image .play-btn.playing .stop{display:block}.beatmap-card .beatmap-image:hover .play-btn{opacity:1}.beatmap-card .beatmap-content{padding:var(--spacing-lg)}.beatmap-card .beatmap-content .beatmap-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs);transition:color var(--transition-fast)}.beatmap-card .beatmap-content .beatmap-title:hover{color:var(--accent-primary)}.beatmap-card .beatmap-content .beatmap-artist{color:var(--text-secondary);font-size:0.9rem;margin-bottom:var(--spacing-md)}.beatmap-card .beatmap-content .beatmap-meta{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center}.beatmap-card .beatmap-content .beatmap-meta .meta-item{display:flex;align-items:center;gap:var(--spacing-xs);font-size:0.8rem;color:var(--text-muted)}.beatmap-card .beatmap-content .beatmap-meta .meta-item.creator{background:rgba(99,102,241,0.1);color:var(--accent-primary);padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);border:1px solid rgba(99,102,241,0.2)}.beatmap-card .beatmap-content .difficulty-indicators{display:flex;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon{width:28px;height:28px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:transform var(--transition-fast);position:relative}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon::before{position:absolute;width:20px;height:20px;border-radius:var(--radius-full);z-index:-1}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon:hover{transform:scale(1.1)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.easy{color:#22c55e}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.easy::before{background:rgba(34,197,94,0.2)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.normal{color:#3b82f6}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.normal::before{background:rgba(59,130,246,0.2)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.hard{color:#fbbf24}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.hard::before{background:rgba(251,191,36,0.2)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.insane{color:#ef4444}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.insane::before{background:rgba(239,68,68,0.2)}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.expert{color:#9333ea}.beatmap-card .beatmap-content .difficulty-indicators .diff-icon.expert::before{background:rgba(147,51,234,0.2)}@media (max-width: 767px){.container{padding:0 var(--spacing-sm)}.grid.cols-auto{grid-template-columns:1fr}.navbar .navbar-nav{display:none}.navbar .mobile-menu-btn{display:block}.navbar .brand-gradient{display:none !important}.mobile-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);z-index:calc(var(--z-dropdown) - 1);opacity:0;visibility:hidden;transition:all 0.3s ease}.mobile-menu-overlay.show{opacity:1;visibility:visible}#mobile-menu{display:none;position:fixed;left:0;right:0;background:var(--bg-glass);border-top:1px solid var(--border-subtle);z-index:var(--z-dropdown);transform:translateY(-100%);opacity:0;transition:all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);overflow-y:auto;overflow-x:hidden;max-height:0}#mobile-menu::-webkit-scrollbar{width:4px}#mobile-menu::-webkit-scrollbar-track{background:transparent}#mobile-menu::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:2px}#mobile-menu::-webkit-scrollbar-thumb:hover{background:var(--border-medium)}#mobile-menu.show{display:block;transform:translateY(0);opacity:1;max-height:calc(100vh - var(--navbar-height, 70px) - 20px)}#mobile-menu ul{display:flex;flex-direction:column;padding:var(--spacing-lg);padding-bottom:calc(var(--spacing-lg) + var(--spacing-lg));gap:var(--spacing-sm);list-style:none;min-height:auto}#mobile-menu ul li{opacity:0;transform:translateX(-20px);transition:all 0.3s ease}#mobile-menu ul li a{display:block;padding:var(--spacing-md);color:var(--text-primary);text-decoration:none;border-radius:var(--radius-md);transition:all var(--transition-fast);position:relative;overflow:hidden}#mobile-menu ul li a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);transition:left 0.5s ease}#mobile-menu ul li a:hover{background:var(--bg-hover);color:var(--accent-primary);transform:translateX(5px);box-shadow:0 4px 15px rgba(99,102,241,0.2)}#mobile-menu ul li a:hover::before{left:100%}#mobile-menu ul li a:active{transform:translateX(5px) scale(0.98)}#mobile-menu.show ul li{opacity:1;transform:translateX(0)}#mobile-menu.show ul li:nth-child(1){transition-delay:.05s}#mobile-menu.show ul li:nth-child(2){transition-delay:.1s}#mobile-menu.show ul li:nth-child(3){transition-delay:.15s}#mobile-menu.show ul li:nth-child(4){transition-delay:.2s}#mobile-menu.show ul li:nth-child(5){transition-delay:.25s}#mobile-menu.show ul li:nth-child(6){transition-delay:.3s}#mobile-menu.show ul li:nth-child(7){transition-delay:.35s}#mobile-menu.show ul li:nth-child(8){transition-delay:.4s}#mobile-menu.show ul li:nth-child(9){transition-delay:.45s}#mobile-menu.show ul li:nth-child(10){transition-delay:.5s}.beatmap-card .beatmap-content{padding:var(--spacing-md)}}@media (min-width: 768px){#mobile-menu{display:none !important}.navbar .mobile-menu-btn{display:none !important}}@media (min-width: 768px) and (max-width: 1023px){.grid.cols-auto{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}}.hidden{display:none !important}.block{display:block !important}.inline{display:inline !important}.inline-block{display:inline-block !important}.relative{position:relative !important}.absolute{position:absolute !important}.fixed{position:fixed !important}.sticky{position:sticky !important}.modern-search-bar{position:relative;overflow:hidden}.modern-search-bar .container{position:relative}#search-nav{border-radius:0 !important}#search-nav *{border-radius:0 !important}.filter-progress-bar{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(0,0,0,0.1);overflow:hidden;transition:opacity 0.3s ease;z-index:10;border-radius:0}.filter-progress-bar.hidden{opacity:0;visibility:hidden}.filter-progress-bar:not(.hidden){opacity:1;visibility:visible}.filter-progress-fill{height:100%;width:0%;background:linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));transition:width 0.3s ease;opacity:0.8;box-shadow:0 0 8px rgba(var(--accent-primary-rgb), 0.3)}.filter-progress-bar[data-stage="request"] .filter-progress-fill{width:30%}.filter-progress-bar[data-stage="data"] .filter-progress-fill{width:60%}.filter-progress-bar[data-stage="render"] .filter-progress-fill{width:90%}.filter-progress-bar[data-stage="complete"] .filter-progress-fill{width:100%}.skeleton-card{background:var(--bg-glass);border-radius:var(--radius-xl);border:1px solid var(--border-subtle);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);overflow:hidden;position:relative;min-height:280px}.skeleton-card::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);background-size:200% 100%;animation:skeleton-shimmer-contained 1.5s infinite ease-in-out;z-index:1}.skeleton-header{display:flex;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);position:relative;z-index:2}.skeleton-image{width:80px;height:80px;background:rgba(255,255,255,0.1);border-radius:var(--radius-md);flex-shrink:0;position:relative;z-index:2}.skeleton-info{flex:1;display:flex;flex-direction:column;gap:var(--spacing-sm);position:relative;z-index:2}.skeleton-line{height:16px;background:rgba(255,255,255,0.1);border-radius:var(--radius-sm);position:relative;z-index:2}.skeleton-line.title{width:85%;height:20px}.skeleton-line.artist{width:65%}.skeleton-line.mapper{width:45%}.skeleton-meta{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);position:relative;z-index:2}.skeleton-difficulty{width:60px;height:32px;background:rgba(255,255,255,0.1);border-radius:var(--radius-sm);position:relative;z-index:2}@keyframes skeleton-shimmer-contained{0%{background-position:-200% 0}100%{background-position:200% 0}}.skeleton-container{position:absolute;top:0;left:0;right:0;z-index:10;background:rgba(255,255,255,0.95);padding:20px 0;border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:var(--spacing-lg)}@media (max-width: 768px){.skeleton-container{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:var(--spacing-md);padding:var(--spacing-md) 0}}.loading-state-loading{position:relative}.loading-state-loading .beatmap-card:not([data-skeleton]){transition:opacity 0.3s ease}.loading-state-skeleton-visible .beatmap-card:not([data-skeleton]){opacity:0.3}.skeleton-card[data-skeleton="search"]{animation:skeletonFadeIn 0.4s ease forwards}.skeleton-card[data-skeleton="infinite"]{animation:skeletonSlideUp 0.3s ease forwards}.skeleton-card .skeleton-content{padding:var(--spacing-md);position:relative;z-index:2}.skeleton-card .skeleton-title{height:18px;background:rgba(255,255,255,0.12);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);width:85%;position:relative;z-index:2}.skeleton-card .skeleton-artist{height:14px;background:rgba(255,255,255,0.08);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);width:60%;position:relative;z-index:2}.skeleton-card .skeleton-stats{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.skeleton-card .skeleton-stat{height:12px;background:rgba(255,255,255,0.08);border-radius:var(--radius-sm);flex:1;position:relative;z-index:2}@keyframes skeletonFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes skeletonSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-fade-in{opacity:0;transform:translateY(10px);transition:all 0.4s ease-out}.loading-fade-in.visible-smooth{opacity:1;transform:translateY(0)}.loading-fade-out{opacity:1;transform:translateY(0);transition:all 0.4s ease-out}.loading-fade-out.hidden-smooth{opacity:0;transform:translateY(-5px)}.content-fade-in{opacity:0;transform:translateY(15px);transition:all 0.5s ease-out}.content-fade-in.visible-smooth{opacity:1;transform:translateY(0)}#player{position:relative}#player-close-btn{position:absolute;top:12px;right:12px;padding:6px !important;min-width:auto !important;width:32px;height:32px;border-radius:50%;background:rgba(99,102,241,0.1) !important;border:1px solid rgba(99,102,241,0.2) !important;box-shadow:0 2px 8px rgba(0,0,0,0.2);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);cursor:pointer !important;z-index:100}#player-close-btn:hover{background:rgba(99,102,241,0.2) !important;border-color:rgba(99,102,241,0.4) !important;transform:translateY(-1px) scale(1.05);box-shadow:0 4px 12px rgba(99,102,241,0.3)}#player-close-btn .material-icons{font-size:16px;color:#f8fafc !important;text-shadow:0 1px 2px rgba(0,0,0,0.3)}#player-restore-btn{width:56px;height:56px;background:rgba(31,41,55,0.95);border:1px solid rgba(99,102,241,0.3);border-radius:50%;box-shadow:0 4px 20px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.05);cursor:pointer !important;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(0.8);user-select:none}#player-restore-btn.show{opacity:1;visibility:visible;transform:scale(1)}#player-restore-btn:hover{background:rgba(31,41,55,0.98);border-color:rgba(99,102,241,0.5);transform:scale(1.05);box-shadow:0 6px 25px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1)}#player-restore-btn .material-icons{color:#f8fafc;font-size:24px}@keyframes gentle-pulse{0%,100%{opacity:0.8;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.text-center{text-align:center !important}.text-left{text-align:left !important}.text-right{text-align:right !important}.text-primary{color:var(--text-primary) !important}.text-secondary{color:var(--text-secondary) !important}.text-muted{color:var(--text-muted) !important}.text-accent{color:var(--accent-primary) !important}.m-0{margin:0 !important}.mt-0{margin-top:0 !important}.mb-0{margin-bottom:0 !important}.p-0{padding:0 !important}.pt-0{padding-top:0 !important}.pb-0{padding-bottom:0 !important}.m-1{margin:.25rem !important}.mt-1{margin-top:.25rem !important}.mb-1{margin-bottom:.25rem !important}.ml-1{margin-left:.25rem !important}.mr-1{margin-right:.25rem !important}.p-1{padding:.25rem !important}.pt-1{padding-top:.25rem !important}.pb-1{padding-bottom:.25rem !important}.pl-1{padding-left:.25rem !important}.pr-1{padding-right:.25rem !important}.m-2{margin:.5rem !important}.mt-2{margin-top:.5rem !important}.mb-2{margin-bottom:.5rem !important}.ml-2{margin-left:.5rem !important}.mr-2{margin-right:.5rem !important}.p-2{padding:.5rem !important}.pt-2{padding-top:.5rem !important}.pb-2{padding-bottom:.5rem !important}.pl-2{padding-left:.5rem !important}.pr-2{padding-right:.5rem !important}.m-3{margin:.75rem !important}.mt-3{margin-top:.75rem !important}.mb-3{margin-bottom:.75rem !important}.ml-3{margin-left:.75rem !important}.mr-3{margin-right:.75rem !important}.p-3{padding:.75rem !important}.pt-3{padding-top:.75rem !important}.pb-3{padding-bottom:.75rem !important}.pl-3{padding-left:.75rem !important}.pr-3{padding-right:.75rem !important}.m-4{margin:1rem !important}.mt-4{margin-top:1rem !important}.mb-4{margin-bottom:1rem !important}.ml-4{margin-left:1rem !important}.mr-4{margin-right:1rem !important}.p-4{padding:1rem !important}.pt-4{padding-top:1rem !important}.pb-4{padding-bottom:1rem !important}.pl-4{padding-left:1rem !important}.pr-4{padding-right:1rem !important}.m-5{margin:1.25rem !important}.mt-5{margin-top:1.25rem !important}.mb-5{margin-bottom:1.25rem !important}.ml-5{margin-left:1.25rem !important}.mr-5{margin-right:1.25rem !important}.p-5{padding:1.25rem !important}.pt-5{padding-top:1.25rem !important}.pb-5{padding-bottom:1.25rem !important}.pl-5{padding-left:1.25rem !important}.pr-5{padding-right:1.25rem !important}.m-6{margin:1.5rem !important}.mt-6{margin-top:1.5rem !important}.mb-6{margin-bottom:1.5rem !important}.ml-6{margin-left:1.5rem !important}.mr-6{margin-right:1.5rem !important}.p-6{padding:1.5rem !important}.pt-6{padding-top:1.5rem !important}.pb-6{padding-bottom:1.5rem !important}.pl-6{padding-left:1.5rem !important}.pr-6{padding-right:1.5rem !important}.m-7{margin:1.75rem !important}.mt-7{margin-top:1.75rem !important}.mb-7{margin-bottom:1.75rem !important}.ml-7{margin-left:1.75rem !important}.mr-7{margin-right:1.75rem !important}.p-7{padding:1.75rem !important}.pt-7{padding-top:1.75rem !important}.pb-7{padding-bottom:1.75rem !important}.pl-7{padding-left:1.75rem !important}.pr-7{padding-right:1.75rem !important}.m-8{margin:2rem !important}.mt-8{margin-top:2rem !important}.mb-8{margin-bottom:2rem !important}.ml-8{margin-left:2rem !important}.mr-8{margin-right:2rem !important}.p-8{padding:2rem !important}.pt-8{padding-top:2rem !important}.pb-8{padding-bottom:2rem !important}.pl-8{padding-left:2rem !important}.pr-8{padding-right:2rem !important}.m-9{margin:2.25rem !important}.mt-9{margin-top:2.25rem !important}.mb-9{margin-bottom:2.25rem !important}.ml-9{margin-left:2.25rem !important}.mr-9{margin-right:2.25rem !important}.p-9{padding:2.25rem !important}.pt-9{padding-top:2.25rem !important}.pb-9{padding-bottom:2.25rem !important}.pl-9{padding-left:2.25rem !important}.pr-9{padding-right:2.25rem !important}.m-10{margin:2.5rem !important}.mt-10{margin-top:2.5rem !important}.mb-10{margin-bottom:2.5rem !important}.ml-10{margin-left:2.5rem !important}.mr-10{margin-right:2.5rem !important}.p-10{padding:2.5rem !important}.pt-10{padding-top:2.5rem !important}.pb-10{padding-bottom:2.5rem !important}.pl-10{padding-left:2.5rem !important}.pr-10{padding-right:2.5rem !important}.m-11{margin:2.75rem !important}.mt-11{margin-top:2.75rem !important}.mb-11{margin-bottom:2.75rem !important}.ml-11{margin-left:2.75rem !important}.mr-11{margin-right:2.75rem !important}.p-11{padding:2.75rem !important}.pt-11{padding-top:2.75rem !important}.pb-11{padding-bottom:2.75rem !important}.pl-11{padding-left:2.75rem !important}.pr-11{padding-right:2.75rem !important}.m-12{margin:3rem !important}.mt-12{margin-top:3rem !important}.mb-12{margin-bottom:3rem !important}.ml-12{margin-left:3rem !important}.mr-12{margin-right:3rem !important}.p-12{padding:3rem !important}.pt-12{padding-top:3rem !important}.pb-12{padding-bottom:3rem !important}.pl-12{padding-left:3rem !important}.pr-12{padding-right:3rem !important}.rounded-sm{border-radius:var(--radius-sm) !important}.rounded{border-radius:var(--radius-md) !important}.rounded-lg{border-radius:var(--radius-lg) !important}.rounded-xl{border-radius:var(--radius-xl) !important}.rounded-full{border-radius:var(--radius-full) !important}.enhanced-effects .beatmap-card:hover{transform:translateY(-12px) scale(1.02);box-shadow:var(--shadow-glow-strong)}.enhanced-effects .btn:hover{transform:translateY(-2px) scale(1.02)}.signup-container{margin-top:var(--spacing-xl)}.signup-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.signup-header{text-align:center;margin-bottom:var(--spacing-md);color:var(--text-primary)}.signup-description{text-align:center;color:var(--text-secondary);margin-bottom:var(--spacing-xl)}.signup-option{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);min-height:280px;text-align:center;padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);transition:all var(--transition-normal)}.signup-option:hover{border-color:var(--border-medium);transform:translateY(-4px);box-shadow:var(--shadow-glow)}.signup-option.regular{background:linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.1) 100%);border-color:rgba(99,102,241,0.3)}.signup-option.api{background:linear-gradient(135deg, rgba(255,152,0,0.1) 0%, rgba(251,146,60,0.1) 100%);border-color:rgba(255,152,0,0.3)}.signup-option-icon{font-size:4rem;margin-bottom:var(--spacing-md)}.signup-option.regular .signup-option-icon{color:var(--accent-primary)}.signup-option.api .signup-option-icon{color:#ff9800}.signup-option-title{margin-bottom:var(--spacing-md);font-weight:600}.signup-option.regular .signup-option-title{color:var(--accent-primary)}.signup-option.api .signup-option-title{color:#ff9800}.signup-option-description{margin-bottom:var(--spacing-xl);color:var(--text-secondary)}.signup-footer{text-align:center;margin-top:var(--spacing-xl)}.signup-footer p{color:var(--text-secondary)}.signup-footer a{color:var(--accent-primary)}.auth-container{margin-top:var(--spacing-xl)}.auth-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:500px;margin:0 auto}.form-registration-container{margin-top:var(--spacing-xl)}.form-registration-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:500px;margin:0 auto}.form-registration-header{text-align:center;margin-bottom:var(--spacing-lg)}.form-registration-title{color:var(--text-primary);margin-bottom:var(--spacing-md)}.form-registration-description{color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.input-field{margin-bottom:var(--spacing-lg);position:relative}.input-field i.material-icons{position:absolute;left:var(--spacing-md);top:50%;transform:translateY(-50%);color:var(--text-muted);z-index:1}.input-field input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) calc(var(--spacing-xl) + var(--spacing-lg));border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:0.875rem;transition:all var(--transition-fast)}.input-field input::placeholder{color:var(--text-muted)}.input-field input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}.input-field input:focus+label,.input-field input:valid+label{top:-8px;left:var(--spacing-md);font-size:0.75rem;color:var(--accent-primary);background:var(--bg-tertiary);padding:0 var(--spacing-xs)}.input-field label{position:absolute;left:calc(var(--spacing-xl) + var(--spacing-lg));top:50%;transform:translateY(-50%);color:var(--text-muted);transition:all var(--transition-fast);pointer-events:none;background:transparent}.form-registration-submit{text-align:center;margin-top:var(--spacing-lg)}.form-registration-links{text-align:center;margin-top:var(--spacing-lg)}.form-registration-links p{color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.form-registration-links a{color:var(--accent-primary)}.auth-header{text-align:center;margin-bottom:var(--spacing-xl)}.auth-title{color:var(--text-primary);font-size:1.5rem;font-weight:600;margin:0}.auth-form-group{margin-bottom:var(--spacing-lg)}.auth-form-group label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:var(--spacing-sm)}.auth-form-group input[type="text"],.auth-form-group input[type="email"],.auth-form-group input[type="password"]{width:100%;padding:var(--spacing-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:0.875rem;transition:all var(--transition-fast)}.auth-form-group input[type="text"]:focus,.auth-form-group input[type="email"]:focus,.auth-form-group input[type="password"]:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}.auth-form-group input.error{border-color:var(--accent-error);background:rgba(239,68,68,0.1)}.auth-form-group input.error:focus{border-color:var(--accent-error);box-shadow:0 0 0 3px rgba(239,68,68,0.1)}.auth-submit{width:100%;margin-bottom:var(--spacing-lg)}.auth-links{text-align:center}.auth-links p{color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.auth-links a{color:var(--accent-primary)}.auth-checkbox-group{margin-bottom:var(--spacing-lg)}.auth-checkbox-group label{display:flex;align-items:center;cursor:pointer;font-weight:normal;color:var(--text-secondary)}.auth-checkbox-group input[type="checkbox"]{margin-right:var(--spacing-sm)}.field-error{margin-top:var(--spacing-xs)}.field-error small{color:var(--accent-error);font-size:0.75rem;display:block}.api-request-container{margin-top:var(--spacing-xl)}.api-request-title{color:var(--text-primary);text-align:center;margin-bottom:var(--spacing-lg)}.notice-box{border-radius:var(--radius-md);padding:var(--spacing-md);margin:var(--spacing-md) 0}.notice-box.warning{background:rgba(239,68,68,0.15);border:1px solid rgba(239,68,68,0.4)}.notice-box.info{background:rgba(99,102,241,0.15);border:1px solid rgba(99,102,241,0.4)}.notice-box.success{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.4)}.notice-box.small{padding:var(--spacing-sm);font-size:0.8rem}.notice-box.small p{margin:0;font-size:inherit}.notice-box.small p:first-child{margin-bottom:calc(var(--spacing-xs) / 2)}.notice-box p{color:var(--text-primary);margin:0}.notice-box p:first-child{font-weight:600;margin-bottom:var(--spacing-xs)}.api-info-section{margin:var(--spacing-lg) 0}.api-info-section h5{color:var(--text-primary);margin-bottom:var(--spacing-md)}.info-cards{display:flex;flex-direction:column;gap:var(--spacing-md)}.info-card{border-radius:var(--radius-md);padding:var(--spacing-md);border:1px solid}.info-card.discord{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3)}.info-card.patreon{background:rgba(34,197,94,0.1);border-color:rgba(34,197,94,0.3)}.info-card h6{margin:0 0 var(--spacing-xs) 0;color:var(--text-primary)}.info-card p{margin:0;color:var(--text-secondary)}.api-back-link{text-align:center;margin-top:var(--spacing-xl)}.api-back-link a{color:var(--accent-primary)}.profile-container{margin-top:var(--spacing-xl)}.profile-card{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:700px;margin:0 auto}.profile-header{text-align:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-subtle)}.profile-title{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);color:var(--text-primary);font-size:1.75rem;font-weight:600;margin:0}.profile-section{margin-bottom:var(--spacing-2xl)}.profile-section:last-child{margin-bottom:0}.profile-section-title{color:var(--text-primary);font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle)}.profile-info-grid{display:grid;gap:var(--spacing-md)}.profile-info-item{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-fast)}.profile-info-item:hover{border-color:var(--border-medium);background:var(--bg-primary)}.profile-info-label{color:var(--text-secondary);font-weight:500;font-size:0.875rem}.profile-info-value{color:var(--text-primary);font-weight:600}.profile-api-section{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-top:var(--spacing-md)}.profile-api-key-container{position:relative;margin:var(--spacing-lg) 0}.profile-api-key-input{width:100%;padding:var(--spacing-md) var(--spacing-xl) var(--spacing-md) var(--spacing-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-secondary);color:var(--text-primary);font-family:var(--font-mono);font-size:0.875rem;transition:all var(--transition-fast)}.profile-api-key-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}.profile-copy-btn{position:absolute;right:var(--spacing-sm);top:50%;transform:translateY(-50%);background:var(--accent-primary);border:none;border-radius:var(--radius-sm);color:white;padding:var(--spacing-sm);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center}.profile-copy-btn:hover{background:var(--accent-secondary);transform:translateY(-50%) scale(1.05)}.profile-actions-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}.profile-action-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-weight:500;text-decoration:none;transition:all var(--transition-fast);cursor:pointer}.profile-action-btn.primary{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:white}.profile-action-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow)}.profile-action-btn.secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-subtle)}.profile-action-btn.secondary:hover{background:var(--bg-quaternary);border-color:var(--border-medium);transform:translateY(-1px)}.profile-action-btn.danger{background:linear-gradient(135deg, var(--accent-error), #dc2626);color:white}.profile-action-btn.danger:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(239,68,68,0.3)}.profile-no-api{text-align:center;padding:var(--spacing-xl);background:linear-gradient(135deg, rgba(255,152,0,0.1) 0%, rgba(251,146,60,0.1) 100%);border:1px solid rgba(255,152,0,0.3);border-radius:var(--radius-lg)}.profile-support-section{text-align:center;background:linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.1) 100%);border:1px solid rgba(99,102,241,0.3);border-radius:var(--radius-lg);padding:var(--spacing-xl)}.profile-support-icon{font-size:3rem;color:var(--accent-primary);margin-bottom:var(--spacing-md)}@media (max-width: 767px){.profile-actions-grid{grid-template-columns:1fr}.profile-card{margin:0 var(--spacing-md);padding:var(--spacing-lg)}}.audio-benefit-notification{animation:slideInFromRight 0.3s ease-out}@keyframes slideInFromRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.playlist-header{display:flex;align-items:flex-end;gap:var(--spacing-xl);padding:var(--spacing-2xl);margin-top:var(--spacing-xl);margin-bottom:var(--spacing-xl);background:linear-gradient(135deg, rgba(236,72,153,0.1) 0%, rgba(139,92,246,0.1) 50%, rgba(99,102,241,0.1) 100%);border-radius:var(--radius-xl)}.playlist-header .playlist-cover{width:200px;height:200px;background:linear-gradient(135deg, var(--accent-tertiary), var(--accent-secondary));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-xl);flex-shrink:0}.playlist-header .playlist-cover i{font-size:4rem;color:white}@media (max-width: 767px){.playlist-header .playlist-cover{width:120px;height:120px}.playlist-header .playlist-cover i{font-size:2.5rem}}.playlist-header .playlist-info{flex:1}.playlist-header .playlist-info .playlist-type{font-size:0.875rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.playlist-header .playlist-info .playlist-title{font-size:3rem;font-weight:900;margin:var(--spacing-sm) 0;color:var(--text-primary);line-height:1.1}@media (max-width: 767px){.playlist-header .playlist-info .playlist-title{font-size:2rem}}.playlist-header .playlist-info .playlist-meta{color:var(--text-secondary);font-weight:500;margin:0}@media (max-width: 767px){.playlist-header{flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-lg)}}.playlist-controls{display:flex;align-items:center;gap:var(--spacing-lg)}.playlist-controls .playlist-play-btn{box-shadow:var(--shadow-glow)}.playlist-tracks{background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:visible}.playlist-tracks .tracks-header{display:grid;grid-template-columns:60px 1fr 200px 100px 80px;gap:var(--spacing-md);padding:var(--spacing-md) var(--spacing-lg);background:var(--bg-secondary);border-bottom:1px solid var(--border-subtle);font-size:0.875rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px}@media (max-width: 767px){.playlist-tracks .tracks-header{grid-template-columns:40px 1fr 80px}.playlist-tracks .tracks-header .track-artist,.playlist-tracks .tracks-header .track-duration{display:none}}.playlist-tracks .track-item{display:grid;grid-template-columns:60px 1fr 200px 100px 80px;gap:var(--spacing-md);align-items:center;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-subtle);transition:all var(--transition-fast);position:relative}.playlist-tracks .track-item:hover{background:var(--bg-hover)}.playlist-tracks .track-item:hover .track-number{opacity:0}.playlist-tracks .track-item:hover .track-play-btn{opacity:1;transform:translate(-50%, -50%) scale(1)}.playlist-tracks .track-item:last-child{border-bottom:none}@media (max-width: 767px){.playlist-tracks .track-item{grid-template-columns:40px 1fr 80px}.playlist-tracks .track-item .track-artist,.playlist-tracks .track-item .track-duration{display:none}}.playlist-tracks .track-item .track-number-container{position:relative;display:flex;align-items:center;justify-content:center}.playlist-tracks .track-item .track-number-container .track-number{color:var(--text-muted);font-size:0.875rem;text-align:center;transition:opacity var(--transition-fast)}.playlist-tracks .track-item .track-number-container .track-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.8);background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:50%;color:var(--text-primary);cursor:pointer;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.08),0 0 8px rgba(99,102,241,0.05);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);opacity:0}.playlist-tracks .track-item .track-number-container .track-play-btn:hover{border-color:var(--border-medium, rgba(99,102,241,0.3));box-shadow:0 8px 24px rgba(0,0,0,0.12),0 0 16px rgba(99,102,241,0.15);color:var(--accent-primary);transform:translate(-50%, -50%) scale(1.05)}.playlist-tracks .track-item .track-number-container .track-play-btn:active{transform:translate(-50%, -50%) scale(0.95);box-shadow:0 2px 8px rgba(0,0,0,0.08),0 0 4px rgba(99,102,241,0.1)}.playlist-tracks .track-item .track-number-container .track-play-btn i{font-size:0.875rem;transition:all 0.2s ease}.playlist-tracks .track-item .track-number-container .track-play-btn .stop{display:none}.playlist-tracks .track-item .track-number-container .track-play-btn.playing{opacity:1;transform:translate(-50%, -50%) scale(1);background:var(--bg-glass);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 6px 20px rgba(0,0,0,0.1),0 0 12px rgba(99,102,241,0.2)}.playlist-tracks .track-item .track-number-container .track-play-btn.playing .play{display:none}.playlist-tracks .track-item .track-number-container .track-play-btn.playing .stop{display:flex;align-items:center;justify-content:center}.playlist-tracks .track-item .track-info{display:flex;align-items:center;gap:var(--spacing-md);min-width:0}.playlist-tracks .track-item .track-info .track-cover{position:relative;width:40px;height:40px;background-size:cover;background-position:center;border-radius:var(--radius-sm);flex-shrink:0}.playlist-tracks .track-item .track-info .track-details{min-width:0;flex:1}.playlist-tracks .track-item .track-info .track-details .track-title{color:var(--text-primary);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-tracks .track-item .track-info .track-details .track-subtitle{color:var(--text-secondary);font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-tracks .track-item .track-artist{color:var(--text-secondary);font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-tracks .track-item .track-duration{color:var(--text-muted);font-size:0.875rem;text-align:center}.playlist-tracks .track-item .track-actions{display:flex;align-items:center;gap:var(--spacing-sm)}.playlist-tracks .track-item .track-actions .track-action-btn{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:var(--spacing-xs);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.playlist-tracks .track-item .track-actions .track-action-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.playlist-tracks .track-item .track-actions .track-action-btn.liked{color:var(--accent-tertiary)}.playlist-tracks .track-item .track-actions .track-action-dropdown{position:relative}.playlist-tracks .track-item .track-actions .track-action-dropdown .track-dropdown-menu{position:absolute;top:100%;right:0;background:var(--bg-glass);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:180px;padding:var(--spacing-xs) 0;opacity:0;visibility:hidden;transform:translateY(-10px) scale(0.95);transition:all var(--transition-fast);z-index:var(--z-dropdown);box-shadow:var(--shadow-lg)}.playlist-tracks .track-item .track-actions .track-action-dropdown .track-dropdown-menu .dropdown-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);text-decoration:none;transition:all var(--transition-fast);font-size:0.875rem}.playlist-tracks .track-item .track-actions .track-action-dropdown .track-dropdown-menu .dropdown-item:hover{color:var(--text-primary);background:var(--bg-hover)}.playlist-tracks .track-item .track-actions .track-action-dropdown .track-dropdown-menu .dropdown-item i{font-size:16px;width:16px;flex-shrink:0}.playlist-tracks .track-item .track-actions .track-action-dropdown:hover .track-dropdown-menu,.playlist-tracks .track-item .track-actions .track-action-dropdown.active .track-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.beatmap-card .like-button,.gallery-item .like-button{position:absolute;top:var(--spacing-sm);left:var(--spacing-sm);background:rgba(0,0,0,0.8);border:none;border-radius:var(--radius-full);width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all var(--transition-normal)}.beatmap-card .like-button i,.gallery-item .like-button i{font-size:18px;color:var(--text-primary)}.beatmap-card .like-button:hover,.gallery-item .like-button:hover{background:rgba(0,0,0,0.9);transform:scale(1.15);box-shadow:0 4px 12px rgba(0,0,0,0.3)}.beatmap-card .like-button.liked i,.gallery-item .like-button.liked i{color:var(--accent-tertiary)}.beatmap-card .like-button.loading,.gallery-item .like-button.loading{opacity:0.6;cursor:not-allowed}.beatmap-card .like-button.loading:hover,.gallery-item .like-button.loading:hover{transform:none}.playlist-tracks .like-button,.track-action-btn.like-button{background:none !important;border:none !important;border-radius:var(--radius-sm) !important;width:auto !important;height:auto !important;position:static !important}.playlist-tracks .like-button:hover,.track-action-btn.like-button:hover{background:var(--bg-hover) !important;transform:none !important;box-shadow:none !important}.playlist-tracks .like-button i,.track-action-btn.like-button i{font-size:16px !important}.empty-playlist{background:var(--bg-glass);border:2px dashed var(--border-subtle);border-radius:var(--radius-xl)}.empty-playlist .empty-playlist-icon i{font-size:4rem;color:var(--text-muted)}@media (max-width: 767px){.playlist-controls{flex-direction:column;align-items:stretch;gap:var(--spacing-md)}.playlist-controls .btn{justify-content:center}}.section{padding:1.5rem 0}.section>.container{margin-bottom:4rem}