.preloader{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0a0f;display:flex;justify-content:center;align-items:center;z-index:9999;opacity:1;visibility:visible;transition:opacity 0.4s ease,visibility 0.4s ease;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif}
.preloader-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(100,180,255,0.08) 0,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(180,100,255,0.06) 0,transparent 50%);animation:bgShift 8s ease-in-out infinite}
@keyframes bgShift{0%,100%{opacity:1}
 50%{opacity:0.7}
}
.preloader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.preloader-center{text-align:center;padding:40px 30px;position:relative;z-index:10;max-width:360px}
.neon-line{display:flex;justify-content:center;gap:25px;margin-bottom:35px;height:3px}
.line-dot{width:3px;height:3px;background:#64b4ff;border-radius:50%;box-shadow:0 0 10px #64b4ff,0 0 25px #64b4ff,0 0 50px rgba(100,180,255,0.5);animation:dotPulse 1.5s ease-in-out infinite}
.line-dot:nth-child(2){animation-delay:0.2s;background:#80c1ff}
.line-dot:nth-child(3){animation-delay:0.4s;background:#b480ff}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:0.6;box-shadow:0 0 10px currentColor}
 50%{transform:scale(1.5);opacity:1;box-shadow:0 0 20px currentColor,0 0 40px currentColor}
}
.logo-neon{display:flex;justify-content:center;gap:2px;margin-bottom:12px;perspective:500px}
.logo-letter{display:inline-block;font-size:42px;font-weight:800;color:#ffffff;text-transform:uppercase;letter-spacing:-1px;animation:letterGlow 2.5s ease-in-out infinite;text-shadow:none;transform-origin:center bottom}
.k{color:#64b4ff;animation-delay:0s}
.o{color:#7ab8ff;animation-delay:0.05s}
.n{color:#8fbcff;animation-delay:0.1s}
.t{color:#a5c1ff;animation-delay:0.15s}
.r{color:#b480ff;animation-delay:0.2s}
.o2{color:#a5c1ff;animation-delay:0.25s}
.l{color:#8fbcff;animation-delay:0.3s}
.a{color:#7ab8ff;animation-delay:0.35s}
.r2{color:#64b4ff;animation-delay:0.4s}
@keyframes letterGlow{0%,100%{text-shadow:0 0 5px currentColor,0 0 15px currentColor;transform:translateY(0) scale(1)}
 50%{text-shadow:0 0 10px currentColor,0 0 25px currentColor,0 0 50px currentColor;transform:translateY(-2px) scale(1.02)}
}
.subtitle1{font-size:13px;color:#6b7280;letter-spacing:6px;text-transform:uppercase;margin:0 0 30px 0;font-weight:400;animation:subtitleFade 3s ease-in-out infinite}
@keyframes subtitleFade{0%,100%{opacity:0.6}
 50%{opacity:1}
}
.loader-minimal{position:relative;width:160px;height:2px;background:rgba(255,255,255,0.1);margin:0 auto 25px;border-radius:1px;overflow:hidden}
.loader-track{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(100,180,255,0.3) 50%,transparent 100%);animation:trackShine 2s linear infinite}
@keyframes trackShine{0%{transform:translateX(-100%)}
 100%{transform:translateX(100%)}
}
.loader-progress{position:absolute;top:0;left:0;height:100%;width:50%;background:linear-gradient(90deg,#64b4ff,#b480ff);border-radius:1px;animation:progressMove 1.8s ease-in-out infinite;box-shadow:0 0 15px rgba(100,180,255,0.6)}
@keyframes progressMove{0%{width:20%;left:0;opacity:0.7}
 50%{width:100%;left:0;opacity:1}
 100%{width:20%;left:100%;opacity:0.7}
}
.quote-minimal{padding:18px 24px;background:rgba(255,255,255,0.03);border:1px solid rgba(100,180,255,0.15);border-radius:12px;backdrop-filter:blur(10px)}
.quote-mark{display:block;font-size:24px;color:#64b4ff;line-height:1;margin-bottom:4px;opacity:0.7}
.quote-text{color:#d1d5db;font-size:13px;line-height:1.5;margin:0 0 8px 0;font-style:italic;min-height:38px;animation:quoteSlide 0.4s ease}
@keyframes quoteSlide{from{opacity:0;transform:translateY(8px)}
 to{opacity:1;transform:translateY(0)}
}
.quote-author{color:#64b4ff;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(100,180,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(100,180,255,0.03) 1px,transparent 1px);background-size:40px 40px;animation:gridMove 20s linear infinite;pointer-events:none}
@keyframes gridMove{0%{transform:perspective(500px) rotateX(60deg) translateY(0)}
 100%{transform:perspective(500px) rotateX(60deg) translateY(40px)}
}
.bg-orb{position:absolute;width:400px;height:400px;background:radial-gradient(circle,rgba(100,180,255,0.1) 0,transparent 70%);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:orbPulse 4s ease-in-out infinite;pointer-events:none}
@keyframes orbPulse{0%,100%{transform:translate(-50%,-50%) scale(0.9);opacity:0.5}
 50%{transform:translate(-50%,-50%) scale(1.1);opacity:0.8}
}
@media (max-width:480px){.logo-letter{font-size:34px}
 .subtitle{font-size:11px;letter-spacing:4px}
 .loader-minimal{width:140px}
 .quote-text{font-size:12px}
 .preloader-center{padding:30px 20px}
}
.scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease}
.scroll-reveal.revealed{opacity:1;transform:translateY(0)}
.cover-card,.track-card,.collection-card{opacity:0;transform:translateY(20px);animation:cardFadeIn 0.5s ease forwards}
@keyframes cardFadeIn{to{opacity:1;transform:translateY(0)}
}
.cover-card:nth-child(1){animation-delay:0.05s}
.cover-card:nth-child(2){animation-delay:0.1s}
.cover-card:nth-child(3){animation-delay:0.15s}
.cover-card:nth-child(4){animation-delay:0.2s}
.cover-card:nth-child(5){animation-delay:0.25s}
.cover-card:nth-child(6){animation-delay:0.3s}
.cover-card:nth-child(7){animation-delay:0.35s}
.cover-card:nth-child(8){animation-delay:0.4s}
.cover-card:nth-child(9){animation-delay:0.45s}
.cover-card:nth-child(10){animation-delay:0.5s}
.page-body .cover-card,.page-body .track-card,.page-body .collection-card{animation:cardFadeIn 0.5s ease forwards}
.header-title{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--cyan),var(--purple),var(--mint));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-0.5px}
.header-meta{display:inline-flex;align-items:center;gap:12px;margin-bottom:1.5rem;padding:6px 16px;border:1px solid rgba(100,200,255,0.2);border-radius:50px}
.page-header{background:var(--glass);border:1px solid var(--border);border-radius:22px;padding:26px 20px 22px;margin-bottom:30px;position:relative;overflow:hidden;animation:fadeUp .6s cubic-bezier(.34,1.4,.64,1) both}
.header-title span::after{content:'';position:absolute;bottom:5px;left:0;width:100%;height:8px;background:linear-gradient(135deg,#7c3aed,#0891b2,#db2777);opacity:0.3;border-radius:4px;z-index:-1 }
.stats-row{display:flex;flex-wrap:wrap;gap:0.8rem 1.2rem;animation:fadeIn 1s ease-out 0.4s both }
.update-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a0f 0,#1a1a2e 50%,#0f0f1a 100%);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.update-overlay.show{opacity:1;visibility:visible}
.update-bg-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.bg-gradient{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(0,255,136,0.03) 0,rgba(0,150,255,0.02) 50%,transparent 70%);animation:gradientRotate 20s linear infinite}
@keyframes gradientRotate{0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
.bg-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,255,136,0.3) 0,transparent 70%);animation:float 15s infinite ease-in-out}
.particle-1{width:80px;height:80px;top:10%;left:20%;animation-delay:0s}
.particle-2{width:100px;height:100px;top:70%;left:80%;animation-delay:-5s}
@keyframes float{0%,100%{transform:translateY(0) scale(1);opacity:0.3}
 50%{transform:translateY(-20px) scale(1.1);opacity:0.5}
}
.update-window{position:relative;border-radius:20px;padding:4px 30px;width:100%;max-width:480px;border:1px solid rgba(255,255,255,0.08);transform:scale(0.9) translateY(20px);transition:all 0.5s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.update-overlay.show .update-window{transform:scale(1) translateY(0)}
.update-header{text-align:center;margin:0 0 20px}
.update-logo{position:relative;width:60px;height:60px;margin:0 auto 15px;display:flex;align-items:center;justify-content:center}
.update-logo i{font-size:28px;color:#00ff88;animation:spinIcon 3s linear infinite}
@keyframes spinIcon{0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
@keyframes spin{to{transform:rotate(360deg)}
}
.logo-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid transparent;border-top-color:rgba(0,255,136,0.5);border-right-color:rgba(0,150,255,0.3);animation:ringSpin 3s linear infinite}
@keyframes ringSpin{0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
.update-header h2{font-size:22px;font-weight:700;color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,0.3);margin:0 0 5px}
.update-subtitle{font-size:13px;color:rgba(255,255,255,0.5);margin:0}
.update-version-compact{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;background:rgba(255,255,255,0.03);border-radius:12px;border:1px solid rgba(255,255,255,0.05);margin:0 0 20px}
.version-label{font-size:12px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.5px}
.version-old{font-size:16px;font-weight:600;color:rgba(255,255,255,0.5);text-decoration:line-through}
.version-arrow{font-size:14px;color:#00ff88;animation:pulseArrow 2s ease-in-out infinite}
@keyframes pulseArrow{0%,100%{transform:scale(1);opacity:1}
 50%{transform:scale(1.2);opacity:0.7}
}
.version-new{font-size:18px;font-weight:700;color:#00ff88;text-shadow:0 0 15px rgba(0,255,136,0.5)}
.update-changelog-section{background:rgba(255,255,255,0.02);border-radius:12px;border:1px solid rgba(255,255,255,0.05);margin:0 0 20px;overflow:hidden}
.changelog-header{display:flex;align-items:center;gap:8px;padding:12px 15px;background:rgba(0,255,136,0.05);border-bottom:1px solid rgba(255,255,255,0.05);font-size:14px;font-weight:600;color:#ffffff}
.changelog-header i{color:#00ff88}
.changelog-list{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto}
.changelog-list li{font-size:13px;color:rgba(255,255,255,0.7);padding:10px 15px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:flex-start;gap:10px}
.changelog-list li:last-child{border-bottom:none}
.changelog-list li::before{content:'✓';color:#00ff88;font-weight:700;flex-shrink:0}
.update-note-compact{display:flex;align-items:center;gap:10px;padding:12px 15px;background:rgba(255,193,7,0.05);border-radius:10px;border:1px solid rgba(255,193,7,0.2);margin:0 0 20px;font-size:12px;color:rgba(255,255,255,0.6)}
.update-note-compact i{font-size:16px;color:#ffc107;flex-shrink:0}
.update-actions{display:flex;justify-content:center}
.btn-update{display:flex;align-items:center;gap:10px;padding:14px 28px;background:linear-gradient(135deg,#00ff88 0,#0096ff 100%);border:none;border-radius:10px;color:#0a0a0f;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 15px rgba(0,255,136,0.3),0 0 30px rgba(0,255,136,0.1)}
.btn-update:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,255,136,0.4),0 0 40px rgba(0,255,136,0.2)}
.btn-update:active{transform:translateY(0)}
.btn-update i{font-size:16px;animation:spinIcon 2s linear infinite}
@media (max-width:520px){.update-window{padding:30px 20px;margin:20px;max-width:none}
 .update-header h2{font-size:20px}
 .update-version-compact{flex-wrap:wrap;gap:8px}
 .changelog-list{max-height:150px}
 .btn-update{width:100%;justify-content:center}
}
.init-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0a0a0f 0,#1a1a2e 50%,#0f0f1a 100%);display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.init-overlay.show{opacity:1;visibility:visible}
.init-bg-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.bg-gradient{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(0,255,136,0.03) 0,rgba(0,150,255,0.02) 50%,transparent 70%);animation:gradientRotate 20s linear infinite}
@keyframes gradientRotate{0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
.bg-particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,255,136,0.3) 0,transparent 70%);animation:float 15s infinite ease-in-out}
.particle-1{width:100px;height:100px;top:10%;left:20%;animation-delay:0s}
.particle-2{width:150px;height:150px;top:70%;left:80%;animation-delay:-5s}
.particle-3{width:80px;height:80px;top:40%;left:60%;animation-delay:-10s}
@keyframes float{0%,100%{transform:translateY(0) scale(1);opacity:0.3}
 50%{transform:translateY(-30px) scale(1.1);opacity:0.5}
}
.init-window{position:relative;border-radius:24px;padding:60px 50px;width:100%;max-width:520px;border:1px solid rgba(255,255,255,0.08);transform:scale(0.9) translateY(20px);transition:all 0.5s cubic-bezier(0.4,0,0.2,1);overflow:hidden}
.init-overlay.show .init-window{transform:scale(1) translateY(0)}
.init-logo{position:relative;width:120px;height:120px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center}
.logo-icon{position:relative;width:80px;height:80px;background:linear-gradient(135deg,#00ff88 0,#0096ff 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2;animation:logoPulse 2s ease-in-out infinite}
.logo-icon i{font-size:36px;color:#0a0a0f}
@keyframes logoPulse{0%,100%{transform:scale(1);box-shadow:0 0 40px rgba(0,255,136,0.4)}
 50%{transform:scale(1.05);box-shadow:0 0 60px rgba(0,255,136,0.6)}
}
.logo-ring{position:absolute;border-radius:50%;border:2px solid transparent;border-top-color:rgba(0,255,136,0.5);border-right-color:rgba(0,150,255,0.3);animation:ringSpin 3s linear infinite}
.ring-1{width:100px;height:100px;animation-duration:3s}
.ring-2{width:110px;height:110px;animation-duration:4s;animation-direction:reverse;border-top-color:rgba(0,150,255,0.4)}
.ring-3{width:120px;height:120px;animation-duration:5s;border-top-color:rgba(0,255,136,0.3)}
@keyframes ringSpin{0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
.logo-glow{position:absolute;width:100%;height:100%;background:radial-gradient(circle,rgba(0,255,136,0.2) 0,transparent 70%);border-radius:50%;animation:glowPulse 2s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:0.5;transform:scale(1)}
 50%{opacity:0.8;transform:scale(1.1)}
}
.init-title{text-align:center;margin:0 0 10px;font-size:28px;font-weight:700;color:#ffffff;text-shadow:0 2px 10px rgba(0,0,0,0.3);letter-spacing:0.5px}
.init-subtitle{text-align:center;margin:0 0 35px;font-size:14px;color:rgba(255,255,255,0.5);font-weight:400}
.init-progress-container{position:relative;margin:0 0 15px}
.init-progress-bar{position:relative;height:8px;background:rgba(255,255,255,0.08);border-radius:10px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,0.3)}
.init-progress-fill{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,#00ff88 0,#0096ff 50%,#00ff88 100%);border-radius:10px;transition:width 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 0 20px rgba(0,255,136,0.5),0 0 40px rgba(0,150,255,0.3);background-size:200% 100%;animation:progressShine 2s linear infinite}
@keyframes progressShine{0%{background-position:100% 0}
 100%{background-position:-100% 0}
}
.progress-shine{position:absolute;top:0;right:0;width:50px;height:100%;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,0.4) 50%,transparent 100%);animation:shineMove 1.5s ease-in-out infinite}
@keyframes shineMove{0%{transform:translateX(-100%)}
 100%{transform:translateX(200%)}
}
.init-progress-glow{position:absolute;top:-10px;right:0;width:100px;height:28px;background:radial-gradient(ellipse,rgba(0,255,136,0.3) 0,transparent 70%);opacity:0;transition:opacity 0.3s}
.init-progress-fill:not([style*="width:0"]) + .init-progress-glow{opacity:1}
.init-progress-text{position:absolute;right:0;top:-30px;font-size:13px;font-weight:600;color:#00ff88;text-shadow:0 0 10px rgba(0,255,136,0.5)}
.init-status-wrapper{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 35px}
.status-dot{width:8px;height:8px;background:#00ff88;border-radius:50%;animation:statusPulse 1.5s ease-in-out infinite;box-shadow:0 0 10px rgba(0,255,136,0.5)}
@keyframes statusPulse{0%,100%{transform:scale(1);opacity:1}
 50%{transform:scale(1.3);opacity:0.7}
}
.init-status{font-size:14px;color:rgba(255,255,255,0.7);font-weight:500;letter-spacing:0.3px}
.init-steps{display:flex;justify-content:space-between;position:relative;padding:0 10px}
.init-step{display:flex;flex-direction:column;align-items:center;position:relative;flex:1}
.step-indicator{position:relative;width:40px;height:40px;background:rgba(255,255,255,0.05);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);margin-bottom:10px}
.step-indicator i{font-size:14px;color:rgba(255,255,255,0.3);transition:all 0.3s}
.step-indicator .fa-check{position:absolute;opacity:0;transform:scale(0.5);color:#00ff88;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.init-step.completed .step-indicator{background:rgba(0,255,136,0.1);border-color:#00ff88;box-shadow:0 0 20px rgba(0,255,136,0.3)}
.init-step.completed .step-indicator .fa-circle{opacity:0}
.init-step.completed .step-indicator .fa-check{opacity:1;transform:scale(1)}
.init-step.active .step-indicator{background:rgba(0,255,136,0.15);border-color:#00ff88;box-shadow:0 0 20px rgba(0,255,136,0.4),0 0 40px rgba(0,255,136,0.2);animation:stepPulse 1.5s ease-in-out infinite}
@keyframes stepPulse{0%,100%{box-shadow:0 0 20px rgba(0,255,136,0.4)}
 50%{box-shadow:0 0 30px rgba(0,255,136,0.6)}
}
.step-label{font-size:11px;color:rgba(255,255,255,0.4);font-weight:500;text-transform:uppercase;letter-spacing:0.5px;transition:color 0.3s}
.init-step.completed .step-label,.init-step.active .step-label{color:#00ff88}
.step-line{position:absolute;top:20px;left:50%;width:100%;height:2px;background:rgba(255,255,255,0.08);z-index:-1}
.init-step:last-child .step-line{display:none}
.init-step.completed .step-line{background:linear-gradient(90deg,#00ff88 0,rgba(0,255,136,0.3) 100%)}
.init-decoration{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.corner{position:absolute;width:30px;height:30px;border:2px solid rgba(0,255,136,0.3)}
.corner-tl{top:15px;left:15px;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
.corner-tr{top:15px;right:15px;border-left:none;border-bottom:none;border-radius:0 10px 0 0}
.corner-bl{bottom:15px;left:15px;border-right:none;border-top:none;border-radius:0 0 0 10px}
.corner-br{bottom:15px;right:15px;border-left:none;border-top:none;border-radius:0 0 10px 0}
@media (max-width:600px){.init-window{padding:40px 25px;margin:20px}
 .init-logo{width:100px;height:100px;margin:0 auto 25px}
 .logo-icon{width:70px;height:70px}
 .logo-icon i{font-size:30px}
 .init-title{font-size:24px}
 .init-steps{gap:5px}
 .step-indicator{width:35px;height:35px}
 .step-label{font-size:10px}
}
.init-overlay.dark{background:linear-gradient(135deg,#000000 0,#0a0a0a 50%,#050505 100%)}
.init-overlay.dark .init-window{background:rgba(10,10,15,0.98);border-color:rgba(255,255,255,0.05)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
.mini-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden;transition:var(--transition-normal);position:relative}
.mini-card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--gradient-main);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--transition-fast);pointer-events:none}
.mini-card:hover{border-color:var(--accent-primary);background:var(--bg-card-hover);transform:translateY(-4px)}
.mini-card:hover::before{opacity:1}
.mini-card.active{border-color:var(--accent-success);background:rgba(34,197,94,0.08)}
.mini-card.active::before{opacity:1;background:linear-gradient(135deg,var(--accent-success),#10b981)}
.mini-card-inner{display:flex;padding:12px;gap:12px;align-items:center}
.mini-cover{position:relative;width:72px;height:72px;flex-shrink:0;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--border-color);background:linear-gradient(135deg,#1e1e2e,#2a2a4a)}
.mini-cover img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition-slow);display:block}
.mini-card:hover .mini-cover img{transform:scale(1.12)}
.mini-card:hover .play-overlay{opacity:1}
.mini-card:hover .play-overlay i{transform:scale(1)}
.mini-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mini-title{font-size:0.95rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.mini-meta{display:flex;gap:12px;font-size:0.72rem;color:var(--text-muted)}
.mini-meta i{color:var(--accent-primary);font-size:0.8rem}
.mini-actions{display:flex;align-items:center;gap:8px;margin-top:auto}
.mini-actions button{background:var(--bg-element);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:6px 10px;color:var(--text-secondary);font-size:0.8rem;cursor:pointer;transition:var(--transition-fast);display:inline-flex;align-items:center;gap:4px}
.mini-actions button:hover{background:rgba(168,85,247,0.15);border-color:var(--accent-primary);color:var(--accent-primary);transform:translateY(-1px)}
.mini-actions button:active{transform:scale(0.98)}
.scroll-reveal{opacity:0;transform:translateY(24px);transition:opacity 0.5s ease,transform 0.5s ease;will-change:transform,opacity}
.scroll-reveal.revealed{opacity:1;transform:translateY(0)}
.scroll-reveal:nth-child(1){transition-delay:0.05s}
.scroll-reveal:nth-child(2){transition-delay:0.1s}
.scroll-reveal:nth-child(3){transition-delay:0.15s}
.scroll-reveal:nth-child(4){transition-delay:0.2s}
.scroll-reveal:nth-child(5){transition-delay:0.25s}
.scroll-reveal:nth-child(6){transition-delay:0.3s}
.load-more-container{text-align:center;padding:30px 0 20px}
.load-counter{font-size:0.95rem;color:var(--text-muted);margin-bottom:18px}
.load-counter span{color:var(--accent-primary);font-weight:600}
.load-more-btn{background:var(--gradient-main);border:none;border-radius:var(--radius-full);padding:14px 48px;color:white;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;will-change:transform}
.load-more-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 0.5s ease}
.load-more-btn:hover{transform:translateY(-3px);background:var(--gradient-hover)}
.load-more-btn:hover::before{left:100%}
.load-more-btn:active{transform:translateY(-1px);transition-duration:0.1s}
.load-more-btn:disabled{background:var(--text-muted);cursor:not-allowed;transform:none;box-shadow:none;opacity:0.6}
.load-more-btn:disabled::before{display:none}
.load-more-btn i{font-size:1.1rem;transition:transform var(--transition-fast)}
.load-more-btn:hover i{transform:translateX(3px)}
.load-progress{width:100%;max-width:400px;height:4px;background:var(--border-color);border-radius:var(--radius-full);margin:20px auto 0;overflow:hidden;position:relative}
.load-progress::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}
 100%{transform:translateX(100%)}
}
.load-progress-bar{height:100%;width:0;background:var(--gradient-main);border-radius:inherit;transition:width 0.3s ease;position:relative}
.load-progress-bar::after{content:'';position:absolute;right:0;top:0;bottom:0;width:20px;background:radial-gradient(circle,rgba(255,255,255,0.6) 0,transparent 70%);opacity:0.6}
.mini-card:focus-within,.load-more-btn:focus{outline:2px solid var(--accent-primary);outline-offset:2px}
.mini-card{animation:fadeInUp 0.4s ease both}
.mini-card.active .mini-cover::after{content:'';position:absolute;inset:-2px;border:2px solid var(--accent-success);border-radius:inherit;animation:pulse 2s ease-in-out infinite;pointer-events:none}
.mini-grid{scrollbar-width:thin;scrollbar-color:var(--accent-primary) transparent}
.demo-player{position:fixed;bottom:-200px;left:80%;transform:translateX(-50%);width:90%;max-width:500px;background:linear-gradient(145deg,rgba(20,30,50,0.98),rgba(10,20,40,0.98));border:2px solid rgba(139,92,246,0.4);border-radius:20px;padding:16px;z-index:13030;transition:bottom 0.4s cubic-bezier(0.4,0,0.2,1)}
.demo-player.active{bottom:100px}
.demo-player-content{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.demo-player-cover{position:relative;width:70px;height:70px;border-radius:12px;overflow:hidden;border:2px solid rgba(139,92,246,0.4);flex-shrink:0}
.demo-player-cover img{width:100%;height:100%;object-fit:cover}
.demo-playing-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:3px;display:none}
.demo-player.playing .demo-playing-indicator{display:flex}
.demo-playing-indicator .eq-bar{width:4px;background:linear-gradient(to top,#10b981,#10b981);border-radius:2px;animation:eqBounce 0.6s ease-in-out infinite alternate}
.demo-playing-indicator .eq-bar:nth-child(1){height:12px;animation-delay:0s}
.demo-playing-indicator .eq-bar:nth-child(2){height:18px;animation-delay:0.2s}
.demo-playing-indicator .eq-bar:nth-child(3){height:14px;animation-delay:0.4s}
@keyframes eqBounce{from{height:8px}
 to{height:20px}
}
.demo-player-info{flex:1;min-width:0}
.demo-player-info h4{margin:0 0 4px 0;color:#fff;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-player-info p{margin:0;color:rgba(255,255,255,0.6);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-player-controls{display:flex;gap:8px;flex-shrink:0}
.demo-control-btn{width:40px;height:40px;background:rgba(139,92,246,0.2);border:1px solid rgba(139,92,246,0.4);border-radius:10px;color:#fff;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}
.demo-control-btn:hover{background:rgba(139,92,246,0.4);transform:scale(1.1)}
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.demo-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:16px;transition:all 0.3s ease}
.demo-item:hover{background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.4);transform:translateY(-4px)}
.demo-item.unlocked{border-color:rgba(16,185,129,0.4);background:rgba(16,185,129,0.05)}
.demo-icon{font-size:40px;margin-bottom:12px}
.demo-info h4{margin:0 0 8px 0;color:#fff;font-size:14px;font-weight:700}
.demo-info p{margin:0 0 12px 0;color:rgba(255,255,255,0.6);font-size:12px}
.demo-cost{display:flex;align-items:center;gap:6px;color:#fbbf24;font-size:13px;font-weight:700;margin-bottom:12px}
.demo-btn{width:100%;padding:10px;background:linear-gradient(135deg,rgba(139,92,246,0.2),rgba(139,92,246,0.1));border:1px solid rgba(139,92,246,0.4);border-radius:10px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.demo-btn:hover:not(:disabled){background:rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.6);transform:translateY(-2px)}
.demo-btn:disabled{opacity:0.5;cursor:not-allowed}
.demo-btn.unlocked{background:linear-gradient(135deg,rgba(16,185,129,0.2),rgba(16,185,129,0.1));border-color:rgba(16,185,129,0.4);color:#10b981}
.demo-btn.unlocked:hover{background:rgba(16,185,129,0.3);border-color:rgba(16,185,129,0.6)}
.easter-egg-btn{position:fixed;bottom:240px;left:25px;width:60px;height:60px;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);border:2px solid rgba(255,215,0,0.5);border-radius:50%;cursor:pointer;z-index:9996;display:flex;align-items:center;justify-content:center;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:visible}
.easter-egg-btn:hover{transform:scale(1.1) rotate(10deg);border-color:rgba(255,215,0,0.8)}
.egg-icon{font-size:28px;z-index:2}
.egg-count{position:absolute;font-size:10px;font-weight:700;padding:3px 6px;border-radius:8px;color:#fff}
.egg-count{top:-5px;right:-5px;background:linear-gradient(135deg,#ff6b35,#ff4757)}
@keyframes glowRotate{0%{transform:rotate(0deg) scale(1);opacity:0.5}
 50%{transform:rotate(180deg) scale(1.2);opacity:0.8}
 100%{transform:rotate(360deg) scale(1);opacity:0.5}
}
.easter-egg-inventory.show{opacity:1;visibility:visible}
.inventory-panel{background:linear-gradient(145deg,rgba(20,30,50,0.98),rgba(10,20,40,0.99));border:2px solid rgba(255,215,0,0.4);border-radius:24px;width:100%;max-width:900px;height:90vh;max-height:800px;overflow:hidden;transform:scale(0.9) translateY(20px);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column}
.easter-egg-inventory.show .inventory-panel{transform:scale(1) translateY(0)}
.inventory-header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:2px solid rgba(255,215,0,0.3);background:linear-gradient(90deg,rgba(255,215,0,0.1),transparent)}
.inventory-title{display:flex;align-items:center;gap:12px}
.title-text h3{margin:0;color:#ffd700;font-size:20px;font-weight:700}
.title-text p{margin:4px 0 0 0;color:rgba(255,255,255,0.6);font-size:13px}
.inventory-stats-mini{display:flex;gap:15px}
.mini-stat{display:flex;align-items:center;gap:6px;background:rgba(255,215,0,0.1);padding:6px 12px;border-radius:10px}
.mini-stat-icon{font-size:16px}
.mini-stat-value{color:#ffd700;font-weight:700;font-size:14px}
.inv-btn{width:40px;height:40px;background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.4);border-radius:12px;color:#ffd700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}
.inv-btn:hover{background:rgba(255,215,0,0.3);transform:translateY(-2px)}
.inventory-tabs{display:flex;gap:8px;padding:16px 24px;background:rgba(0,0,0,0.2);border-bottom:1px solid rgba(255,215,0,0.1)}
.inv-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.3s ease;font-size:13px;font-weight:600}
.inv-tab i{font-size:16px}
.inv-tab:hover{background:rgba(255,215,0,0.1);border-color:rgba(255,215,0,0.4);color:#fff}
.inv-tab.active{background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(245,158,11,0.15));border-color:rgba(255,215,0,0.6);color:#fff}
.tab-badge{position:absolute;top:35px;right:334px;background:linear-gradient(#f97316);color:#fff;font-size:10px;font-weight:700;border-radius:8px;min-width:20px;text-align:center}
.inventory-content{flex:1;overflow-y:auto;padding:2px 2px}
.tab-pane{display:none;flex:1;overflow-y:auto;padding:20px 24px}
.tab-pane.active{display:block}
.tab-header{margin-bottom:20px}
.tab-header h4{margin:0 0 8px 0;color:#ffd700;font-size:18px;font-weight:700}
.tab-desc{margin:0;color:rgba(255,255,255,0.6);font-size:13px}
.progress-container{display:flex;align-items:center;gap:12px;margin-top:12px}
.progress-bar{flex:1;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b);border-radius:4px;transition:width 0.5s ease}
.progress-text{color:#ffd700;font-size:12px;font-weight:700;min-width:40px;text-align:right}
.egg-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.egg-item{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.2);border-radius:14px;padding:16px;display:flex;gap:14px;transition:all 0.3s ease;animation:fadeInUp 0.4s ease forwards;opacity:0}
.egg-item:hover{background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.4);transform:translateY(-3px)}
.egg-item.new{border-color:rgba(255,107,53,0.6);background:rgba(255,107,53,0.1)}
.egg-icon-item{font-size:32px;flex-shrink:0}
.egg-info{flex:1}
.egg-track{color:#ffd700;font-size:13px;font-weight:600;margin-bottom:4px}
.egg-text{color:rgba(255,255,255,0.8);font-size:12px;line-height:1.5}
.egg-date{color:rgba(255,255,255,0.4);font-size:10px;margin-top:8px}
.egg-empty{grid-column:1 / -1;text-align:center;color:rgba(255,255,255,0.4);padding:60px 20px}
.egg-empty i{font-size:64px;color:rgba(255,215,0,0.3);margin-bottom:16px}
.egg-empty h4{margin:0;color:rgba(255,255,255,0.6);font-size:18px}
.egg-empty p{margin:0;color:rgba(255,255,255,0.3);font-size:14px}
.quests-list{display:flex;flex-direction:column;gap:20px}
.quest-category{margin-bottom:10px}
.category-title{color:#ffd700;font-size:1rem;font-weight:700;margin-bottom:12px;padding-left:8px;border-left:3px solid #ffd700}
.quest-category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.quest-item{background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.2);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all 0.3s ease}
.quest-item.completed{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.quest-item:hover{background:rgba(255,215,0,0.1);border-color:rgba(255,215,0,0.4);transform:translateY(-3px)}
.quest-item.completed{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.quest-item.claimed{opacity:0.6}
.quest-icon{font-size:24px;align-self:flex-start}
.quest-info{flex:1}
.quest-title{color:#fff;font-size:13px;font-weight:600;margin-bottom:6px}
.quest-desc{color:rgba(255,255,255,0.6);font-size:12px;margin-bottom:10px}
.quest-rewards{display:flex;gap:10px;margin-bottom:10px}
.reward-fragment{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600}
.reward-fragment{background:rgba(139,92,246,0.2);color:#a78bfa}
.quest-progress{display:flex;align-items:center;gap:10px}
.quest-progress{display:flex;align-items:center;gap:10px}
.quest-progress .progress-bar{flex:1;height:6px;background:rgba(255,215,0,0.15);border-radius:4px;overflow:hidden}
.quest-claim-btn{width:100%;padding:10px;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:10px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.quest-progress .progress-fill{height:100%;background:linear-gradient(90deg,#ffd700,#ffed4a);border-radius:4px;transition:width 0.5s ease}
.quest-claim-btn:hover{transform:translateY(-2px)}
.quest-progress .progress-text{color:#ffd700;font-size:11px;font-weight:700;min-width:40px;text-align:right}
.quest-claimed{display:block;width:100%;text-align:center;padding:10px;background:rgba(34,197,94,0.2);border-radius:10px;color:#10b981;font-size:12px;font-weight:600}
.shop-categories{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.shop-cat-btn{padding:8px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:rgba(255,255,255,0.6);cursor:pointer;transition:all 0.3s ease;font-size:13px}
.shop-cat-btn.active{background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.4);color:#ffd700}
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.demo-btn.unlocked{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.demo-btn:hover:not(:disabled){transform:translateY(-2px)}
.shop-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all 0.3s ease}
.shop-item.purchased{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.shop-item:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.shop-item-icon{font-size:28px}
.shop-item-info{flex:1}
.shop-item-name{color:#fff;font-size:14px;font-weight:600;margin-bottom:4px}
.shop-item-desc{color:rgba(255,255,255,0.6);font-size:12px;margin-bottom:8px}
.shop-item-price{color:#ffd700;font-size:12px;font-weight:600}
.shop-item-btn:hover:not(:disabled){transform:translateY(-2px)}
.shop-item-btn{width:100%;padding:10px;background:linear-gradient(135deg,#ffd700,#ffed4a);border:none;border-radius:10px;color:#000;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.shop-item-btn:disabled{opacity:0.5;cursor:not-allowed}
.demo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.demo-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all 0.3s ease}
.demo-item.unlocked{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.demo-icon{font-size:28px}
.demo-info{flex:1}
.demo-item:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.demo-item.locked{opacity:0.6}
.demo-cost{color:#ffd700;font-size:12px;font-weight:600}
.demo-btn{width:100%;padding:10px;background:linear-gradient(135deg,#ffd700,#ffed4a);border:none;border-radius:10px;color:#000;font-weight:600;cursor:pointer;transition:all 0.3s ease}
.demo-btn:disabled{opacity:0.5;cursor:not-allowed}
.letters-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.letter-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;transition:all 0.3s ease;cursor:pointer}
.letter-item:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.letter-btn:disabled{opacity:0.5;cursor:not-allowed}
.letter-item.unlocked{border-color:rgba(34,197,94,0.4);background:rgba(34,197,94,0.05)}
.letter-item.locked{opacity:0.6}
.letter-btn{background:linear-gradient(135deg,#8b5cf6,#06b6d4);border:none;color:white;padding:8px 16px;border-radius:8px;cursor:pointer}
.letter-icon{font-size:28px}
.letter-info{flex:1}
.letter-title{color:#fff;font-size:14px;font-weight:600;margin-bottom:4px}
.letter-date{color:rgba(255,255,255,0.6);font-size:13px;margin-bottom:20px}
.egg-notification{position:fixed;top:30px;right:30px;background:linear-gradient(135deg,rgba(26,26,46,0.98),rgba(22,33,62,0.98));border:2px solid rgba(255,215,0,0.5);border-radius:16px;padding:14px 20px;z-index:10002;opacity:0;transform:translateX(100px);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);pointer-events:none}
.egg-notification.show{opacity:1;transform:translateX(0)}
.notif-content{display:flex;align-items:center;gap:12px}
.notif-icon{font-size:24px}
.notif-text strong{display:block;color:#ffd700;font-size:14px;font-weight:600;margin-bottom:2px}
.notif-text span{color:rgba(255,255,255,0.8);font-size:12px}
.letter-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:10002;display:flex;justify-content:center;align-items:center}
.letter-modal-content{background:linear-gradient(145deg,rgba(20,30,50,0.98),rgba(10,20,40,0.99));border:2px solid rgba(255,215,0,0.4);border-radius:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;padding:30px;position:relative}
.shop-item-btn.owned{background:linear-gradient(135deg,#10b981,#059669);color:#fff}
.letter-modal-close{position:absolute;top:15px;right:15px;width:35px;height:35px;background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.4);border-radius:10px;color:#ffd700;cursor:pointer;transition:all 0.3s ease}
.letter-modal-close:hover{background:rgba(255,215,0,0.3);transform:rotate(90deg)}
.letter-modal-content h3{color:#ffd700;font-size:22px;font-weight:700;margin-bottom:10px}
.letter-date{color:rgba(255,255,255,0.4);font-size:11px}
.letter-body{color:rgba(255,255,255,0.8);font-size:14px;line-height:1.8}
@media (max-width:900px){.shop-grid{grid-template-columns:repeat(2,1fr)}
 .egg-list{grid-template-columns:1fr}
}
@media (max-width:600px){.easter-egg-btn{bottom:180px;left:15px;width:50px;height:50px}
 .egg-icon{font-size:24px}
 .inventory-panel{max-width:95%;height:95vh}
 .inventory-tabs{flex-wrap:wrap}
 .inv-tab{flex:1 1 calc(50% - 4px)}
 .shop-grid{grid-template-columns:1fr}
 .demo-grid{grid-template-columns:1fr}
}
html.dark{--bg:#04060e;--bg-gradient:linear-gradient(135deg,#0a0a12 0,#0f0f1a 50%,#0a0a12 100%);--glass:rgba(255,255,255,0.055);--glass-active:rgba(79,156,255,0.15);--glass-hover:rgba(255,255,255,0.092);--glass-border:rgba(255,255,255,0.14);--glass-border-hover:rgba(255,255,255,0.22);--glass-shadow:0 8px 32px rgba(0,0,0,0.45);--glass-glow:0 0 40px rgba(139,92,246,0.25);--void:#0a0f1c;--border-color:#2a2a3a;--gradient-main:linear-gradient(135deg,#a855f7,#6366f1);--radius-full:9999px;--card-bg:rgba(18,20,32,0.85);--card-border:rgba(139,92,246,0.25);--card-shadow:0 15px 40px rgba(0,0,0,0.5);--purple:#b388ff;--mint:#8cffc1;--text:#e8f0ff;--accent:#8b5cf6;--accent-light:#a78bfa;--accent2:#06b6d4;--accent3:#00f0d4;--accent-glow:rgba(139,92,246,0.5);--gradient-primary:linear-gradient(135deg,#8b5cf6 0,#06b6d4 50%,#ec4899 100%);--gradient-secondary:linear-gradient(135deg,#6366f1 0,#8b5cf6 100%);--gradient-hover:linear-gradient(135deg,#7c3aed 0,#0891b2 50%,#db2777 100%);--green:#22c55e;--green-glow:rgba(34,197,94,0.4);--yellow:#fbbf24;--red:#ef4444;--pink:#ec4899;--cyan:#06b6d4;--gold:#ca8a04;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--text-dim:#475569;--text1:rgba(255,255,255,0.95);--text2:rgba(255,255,255,0.55);--text3:rgba(255,255,255,0.30);--radius:24px;--radius-sm:14px;--radius-xs:6px;--r:24px;--r-sm:12px;--r-xs:6px;--border:rgba(255,255,255,0.10);--border-h:rgba(255,255,255,0.20);--border-act:rgba(79,156,255,0.52);--shadow:0 8px 32px rgba(0,0,0,0.45);--shadow-h:0 20px 60px rgba(0,0,0,0.55);--shadow-lg:0 25px 80px rgba(0,0,0,0.6);--drop-bg:rgba(6,10,20,0.97);--drop-border:rgba(79,156,255,0.14);--badge-bg:rgba(139,92,246,0.12);--badge-border:rgba(139,92,246,0.3);--modal-bg:rgba(10,10,15,0.98);--modal-border:rgba(139,92,246,0.4);--modal-shadow:0 40px 100px rgba(0,0,0,0.8);--badge-border:rgba(139,92,246,0.3);--progress-fill:linear-gradient(90deg,#8b5cf6,#06b6d4,#ec4899);--header-bg:rgba(18,20,32,0.95);--nav-bg:rgba(6,10,18,0.85);--nav-border:rgba(255,255,255,0.08);--vst-bg:#0d0d14;--vst-card:linear-gradient(145deg,#1a1a25,#15151f);--vst-card-border:rgba(99,102,241,0.3);--vst-text:#ffffff;--vst-text-muted:rgba(255,255,255,0.5);--vst-accent:linear-gradient(135deg,#6366f1,#8b5cf6);--vst-accent-glow:0 0 40px rgba(99,102,241,0.4);--vst-shadow:0 8px 32px rgba(0,0,0,0.4);--vst-success:#10b981;--vst-warning:#f59e0b;--auth-text:#ffffff;--auth-text-secondary:rgba(255,255,255,0.7);--auth-text-muted:rgba(255,255,255,0.4);--auth-input-bg:rgba(255,255,255,0.05);--auth-input-border:rgba(139,92,246,0.2);--auth-input-focus:rgba(139,92,246,0.5);--auth-btn-gradient:linear-gradient(135deg,#8b5cf6,#06b6d4);--auth-btn-hover:linear-gradient(135deg,#7c3aed,#0891b2);--auth-btn-shadow:0 8px 30px rgba(139,92,246,0.5);--transition:all 0.35s cubic-bezier(0.175,0.885,0.32,1.275);--transition-fast:all 0.2s cubic-bezier(0.4,0,0.2,1);--transition-slow:all 0.5s cubic-bezier(0.175,0.885,0.32,1.275);--text-1:#0f172a;--text-2:#334155;--text-3:#64748b;--glass-bg:rgba(25,25,35,0.85);--text-soft:#9ba4c7;--accent-soft:#a6b5ff;--badge-text:#c6d0ff;--img-border:rgba(255,255,255,0.1);--shadow-color:rgba(0,0,0,0.5);--dot-bg:#8a9cff;--overlay-bg:linear-gradient(0deg,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.2) 60%);--chip-bg:rgba(0,0,0,0.7);--body-bg:linear-gradient(135deg,#121624 0,#1b1f2c 100%);--progress-bg:rgba(138,156,255,0.2);--bg2:#0d1324;--nav-glass:rgba(7,11,20,0.75);--glass-h:rgba(255,255,255,0.09);--moon-color:#a8d4ff;--sun-color:#ffcc44;--text-1:rgba(255,255,255,0.95);--text-2:rgba(255,255,255,0.55);--gradient:linear-gradient(135deg,#8b5cf6,#06b6d4,#f472b6);--nav-bg:rgba(6,10,18,0.85);--header-bg:rgba(18,20,32,0.95);--nav-border:rgba(255,255,255,0.08);--bg-card:rgba(20,20,31,0.85);--bg-card-hover:rgba(25,25,38,0.92);--glass-active:rgba(79,156,255,0.15)}
html:not(.dark){--glass-bg:rgba(255,255,255,0.92);--cyan:#5cc9ff;--purple:#b388ff;--mint:#8cffc1;--text-soft:#64748b;--accent-soft:#8b5cf6;--badge-text:#4c1d95;--img-border:rgba(15,23,42,0.08);--shadow-color:rgba(15,23,42,0.15);--dot-bg:#7c3aed;--overlay-bg:linear-gradient(0deg,rgba(15,23,42,0.6) 0,rgba(15,23,42,0.1) 60%);--chip-bg:rgba(15,23,42,0.06);--body-bg:linear-gradient(135deg,#f0f2fe 0,#e6e9f2 100%);--progress-bg:rgba(124,58,237,0.15);--bg-card:rgba(255,255,255,0.92);--bg-filter:rgba(241,245,249,0.85);--gradient:linear-gradient(135deg,#7c3aed,#0891b2,#db2777);--text:#0f172a;--glow:0 0 40px rgba(124,58,237,0.25);--ease:cubic-bezier(0.23,1,0.32,1);--transition:all 0.35s var(--ease);--bg-card:rgba(25,25,35,0.85);--bg-filter:rgba(30,30,45,0.7);--gradient:linear-gradient(135deg,#8b5cf6,#06b6d4,#f472b6);--text:#ffffff;--glow:0 0 40px rgba(139,92,246,0.35);--ease:cubic-bezier(0.23,1,0.32,1);--transition:all 0.35s var(--ease);--bg:#f8fafc;--bg-gradient:linear-gradient(135deg,#f0f2fe 0,#e6e9f2 50%,#f0f2fe 100%);--glass:rgba(255,255,255,0.92);--glass-hover:rgba(255,255,255,0.98);--glass-border:rgba(124,58,237,0.2);--glass-border-hover:rgba(124,58,237,0.4);--glass-shadow:0 20px 60px rgba(15,23,42,0.12);--glass-glow:0 0 40px rgba(124,58,237,0.2);--card-bg:rgba(255,255,255,0.95);--card-border:rgba(139,92,246,0.2);--card-shadow:0 15px 40px rgba(15,23,42,0.12);--bg-primary:#0a0a12;--glass-bg:rgba(255,255,255,0.75);--glass-hover-bg:rgba(241,245,249,0.95);--glass-active:rgba(79,156,255,0.15);--bg-card:rgba(255,255,255,0.95);--bg-card-hover:rgba(255,255,255,0.98);--success:#22c55e;--danger:#ef4444;--border-hover:rgba(168,85,247,0.4);--shadow:0 15px 30px -10px rgba(0,0,0,0.5);--shadow-hover:0 20px 35px -10px rgba(168,85,247,0.3);--bg-primary:#f3f4f6;--bg-card:#ffffff;--bg-hover:#f9fafb;--border-hover:rgba(124,58,237,0.3);--shadow-hover:0 20px 35px -10px rgba(124,58,237,0.2);--auth-bg:linear-gradient(135deg,#f8fafc 0,#e2e8f0 50%,#cbd5e1 100%);--auth-card:rgba(255,255,255,0.95);--auth-border:rgba(124,58,237,0.2);--auth-shadow:0 25px 80px rgba(15,23,42,0.15);--auth-glow:0 0 60px rgba(124,58,237,0.3);--accent:#7c3aed;--accent-light:#9333ea;--accent-dark:#6d28d9;--accent2:#0891b2;--accent3:#16a34a;--accent-glow:rgba(124,58,237,0.4);--gradient-primary:linear-gradient(135deg,#7c3aed 0,#0891b2 50%,#db2777 100%);--gradient-secondary:linear-gradient(135deg,#6366f1 0,#7c3aed 100%);--gradient-hover:linear-gradient(135deg,#6d28d9 0,#0e7490 50%,#be185d 100%);--green:#16a34a;--yellow:#ca8a04;--red:#dc2626;--pink:#db2777;--cyan:#0891b2;--cyan11:#1E90FF;--cyan12:#000;--gold:#ca8a04;--text-primary:#0f172a;--text-secondary:#334155;--text-muted:#64748b;--text-dim:#94a3b8;--text1:#0f172a;--text2:#334155;--text3:#64748b;--gradient:linear-gradient(135deg,#8b5cf6,#06b6d4,#f472b6);--text-2:#334155;--text-1:#0f172a;--border:rgba(15,23,42,0.12);--border-h:rgba(15,23,42,0.25);--border-act:rgba(124,58,237,0.5);--shadow:0 8px 32px rgba(15,23,42,0.12);--shadow-h:0 20px 60px rgba(15,23,42,0.18);--shadow-lg:0 25px 80px rgba(15,23,42,0.2);--drop-bg:rgba(255,255,255,0.98);--drop-border:rgba(79,156,255,0.20);--drop-bg:rgba(255,255,255,0.98);--drop-border:rgba(79,156,255,0.20);--modal-bg:rgba(255,255,255,0.98);--modal-border:rgba(124,58,237,0.3);--modal-shadow:0 40px 100px rgba(15,23,42,0.3);--progress-track:rgba(124,58,237,0.15);--progress-fill:linear-gradient(90deg,#7c3aed,#0891b2,#db2777);--header-bg:rgba(255,255,255,0.95);--nav-bg:rgba(248,250,252,0.92);--nav-border:rgba(15,23,42,0.10);--vst-card:linear-gradient(145deg,#ffffff,#f1f5f9);--vst-card-border:rgba(79,70,229,0.2);--vst-text:#0f172a;--vst-text-muted:rgba(15,23,42,0.5);--vst-accent:linear-gradient(135deg,#4f46e5,#7c3aed);--vst-accent-glow:0 0 40px rgba(79,70,229,0.3);--vst-shadow:0 8px 32px rgba(0,0,0,0.08);--auth-bg:linear-gradient(135deg,#f8fafc 0,#e2e8f0 50%,#cbd5e1 100%);--auth-card:rgba(255,255,255,0.95);--auth-border:rgba(124,58,237,0.2);--auth-shadow:0 25px 80px rgba(15,23,42,0.15);--auth-glow:0 0 60px rgba(124,58,237,0.3);--auth-text:#0f172a;--auth-text-secondary:rgba(15,23,42,0.7);--auth-text-muted:rgba(15,23,42,0.4);--r:24px}
.form-group .checkbox{display:flex;align-items:center;gap:0.8rem;padding:1rem 1.2rem;background:rgba(255,255,255,0.03);border:1px solid rgba(139,92,246,0.2);border-radius:12px;cursor:pointer;transition:all 0.3s ease;user-select:none}
.form-group .checkbox:hover{background:rgba(139,92,246,0.08);border-color:rgba(139,92,246,0.4);transform:translateX(4px)}
.form-group .checkbox label{display:flex;align-items:center;gap:0.8rem;margin:0;cursor:pointer;color:var(--profile-text);font-size:0.9rem;font-weight:500}
.form-group .checkbox input[type="checkbox"]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:22px;height:22px;border:2px solid rgba(139,92,246,0.4);border-radius:6px;background:rgba(255,255,255,0.05);cursor:pointer;position:relative;transition:all 0.3s ease;flex-shrink:0}
.form-group .checkbox input[type="checkbox"]:hover{border-color:rgba(139,92,246,0.8);background:rgba(139,92,246,0.1)}
.form-group .checkbox input[type="checkbox"]:checked{background:linear-gradient(135deg,#8b5cf6,#06b6d4);border-color:transparent}
.form-group .checkbox input[type="checkbox"]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:white;font-size:14px;font-weight:700;animation:checkmarkPop 0.3s ease}
@keyframes checkmarkPop{0%{transform:translate(-50%,-50%) scale(0)}
 50%{transform:translate(-50%,-50%) scale(1.3)}
 100%{transform:translate(-50%,-50%) scale(1)}
}
.form-group .checkbox input[type="checkbox"]:focus{outline:none}
.form-group .checkbox label i{color:var(--profile-accent);font-size:1rem;transition:color 0.3s ease}
.form-group .checkbox:hover label i{color:#a78bfa}
.form-group .checkbox:has(input:checked){background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.5)}
.form-group .checkbox:has(input:checked) label{color:white;font-weight:600}
.form-group .checkbox input[type="checkbox"]:checked + span,.form-group .checkbox input[type="checkbox"]:checked ~ span{color:white;font-weight:600}
@media (max-width:600px){.form-group .checkbox{padding:0.8rem 1rem}
.form-group .checkbox input[type="checkbox"]{width:20px;height:20px}
.form-group .checkbox label{font-size:0.85rem}
}
.form-group .checkbox input[type="checkbox"]{margin-right:8px}
.form-group .checkbox.checked{background:rgba(139,92,246,0.1);border-color:rgba(139,92,246,0.5)}
.form-group .checkbox input[type="checkbox"]:disabled{opacity:0.5;cursor:not-allowed}
.form-group .checkbox input[type="checkbox"]:disabled + span{color:var(--profile-text-muted)}
.profile-header{background:linear-gradient(135deg,rgba(79,156,255,.15),rgba(181,111,255,.15));border:1px solid rgba(79,156,255,.3);border-radius:24px;padding:4px;margin-bottom:50px;position:relative;overflow:hidden}
.profile-header::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(79,156,255,.8),transparent)}
.profile-header::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 30%,rgba(79,156,255,.1),transparent 50%);pointer-events:none}
.avatar-section{position:relative}
.avatar-glow{position:absolute;inset:-20px;background:linear-gradient(135deg,#4f9cff,#b56fff);border-radius:20px;opacity:0.3;animation:pulse 3s ease-in-out infinite}
.avatar-ring{position:absolute;inset:0;border-radius:20px;border:2px solid;border-image:linear-gradient(135deg,#4f9cff,#b56fff,#00d4b8) 1;animation:rotate 8s linear infinite}
.avatar-img{width:220px;height:220px;border-radius:18px;overflow:hidden;border:2px solid rgba(79,156,255,.5);position:relative;z-index:2}
.avatar-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.avatar-img:hover img{transform:scale(1.1)}
.profile-info h1{font-family:'Syne',sans-serif;font-size:3.5rem;font-weight:800;background:linear-gradient(135deg,#fff,#4f9cff,#b56fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;line-height:1;letter-spacing:-.02em}
.badges{display:flex;gap:12px;margin-bottom:30px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:linear-gradient(135deg,rgba(79,156,255,.15),rgba(181,111,255,.15));border:1px solid rgba(79,156,255,.4);border-radius:50px;font-family:'Syne',sans-serif;font-size:.75rem;font-weight:700;color:#4f9cff;letter-spacing:.05em}
.badge i{font-size:.8rem}
.stat-item{background:linear-gradient(135deg,rgba(0,212,184,.1),rgba(79,156,255,.1));border:1px solid rgba(79,156,255,.2);border-radius:14px;padding:18px;text-align:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:pointer;position:relative;overflow:hidden}
.stat-item::before{content:'';position:absolute;top:0;left:-100%;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(79,156,255,.5),transparent);transition:left .5s}
.stat-item:hover{background:linear-gradient(135deg,rgba(0,212,184,.2),rgba(79,156,255,.2));border-color:rgba(79,156,255,.5);transform:translateY(-5px)}
.stat-item:hover::before{left:100%}
.tabs-container{background:linear-gradient(135deg,rgba(79,156,255,.1),rgba(181,111,255,.1));border:1px solid rgba(79,156,255,.2);border-radius:24px;overflow:hidden;margin-bottom:40px}
.tabs-header{display:flex;gap:0;padding:8px;background:rgba(10,14,26,.5);border-bottom:1px solid rgba(79,156,255,.15);position:relative}
.tab-btn{flex:1;padding:16px 24px;background:transparent;border:none;color:#8b9bbc;font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.tab-btn::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4f9cff,#b56fff);transform:scaleX(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tab-btn:hover{color:#4f9cff}
.tab-btn.active{color:#4f9cff}
.tab-btn.active::after{transform:scaleX(1)}
.tabs-content{padding:50px}
.tab-pane{display:none;animation:fadeIn .4s ease}
.tab-pane.active{display:block}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px;margin-bottom:40px}
.info-item{background:linear-gradient(135deg,rgba(79,156,255,.08),rgba(181,111,255,.08));border:1px solid rgba(79,156,255,.15);border-radius:16px;padding:28px;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.info-item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(79,156,255,.5),transparent)}
.info-item:hover{background:linear-gradient(135deg,rgba(79,156,255,.15),rgba(181,111,255,.15));border-color:rgba(79,156,255,.4);transform:translateY(-5px)}
.info-label{font-family:'Syne',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4a5880;display:flex;align-items:center;gap:6px;margin-bottom:12px}
.info-label i{background:linear-gradient(135deg,#4f9cff,#b56fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.info-value{font-family:'Syne',sans-serif;font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:8px}
.info-desc{font-size:.8rem;color:#8b9bbc;line-height:1.6}
.section{background:linear-gradient(135deg,rgba(79,156,255,.08),rgba(181,111,255,.08));border:1px solid rgba(79,156,255,.15);border-radius:16px;padding:40px;margin-bottom:30px;transition:all .3s}
.section:hover{background:linear-gradient(135deg,rgba(79,156,255,.15),rgba(181,111,255,.15));border-color:rgba(79,156,255,.3)}
.section-title{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.section-title i{background:linear-gradient(135deg,#4f9cff,#b56fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:1.2rem}
.section-text{font-size:.9rem;line-height:1.8;color:#8b9bbc}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-bottom:24px}
.form-group label{font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;margin-bottom:10px;color:#f0f4ff;letter-spacing:.02em}
.form-group input,.form-group textarea,.form-group select{padding:14px 16px;background:linear-gradient(135deg,rgba(79,156,255,.08),rgba(181,111,255,.08));border:1px solid rgba(79,156,255,.2);border-radius:12px;color:#f0f4ff;font-family:'DM Sans',sans-serif;font-size:.85rem;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.form-group input::placeholder,.form-group textarea::placeholder{color:#4a5880}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;background:linear-gradient(135deg,rgba(79,156,255,.15),rgba(181,111,255,.15));border-color:#4f9cff}
.form-group textarea{resize:vertical;min-height:100px}
.form-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(79,156,255,.2),transparent);margin:30px 0}
.checkbox-group{display:flex;align-items:center;gap:10px;padding:12px 0}
.checkbox-group input[type="checkbox"]{width:20px;height:20px;cursor:pointer;accent-color:#4f9cff}
.checkbox-group label{font-size:.85rem;color:#8b9bbc;margin:0;cursor:pointer}
.button-group{display:flex;gap:15px;margin-top:40px;flex-wrap:wrap}
.btn{padding:16px 32px;border:none;border-radius:12px;font-family:'Syne',sans-serif;font-size:.85rem;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:inline-flex;align-items:center;justify-content:center;gap:8px;position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 25%,rgba(255,255,255,.15) 50%,transparent 75%);transform:translateX(-100%);transition:transform .5s}
.btn:hover::before{transform:translateX(100%)}
 .btn:hover,.btn-submit:hover,.btn-primary:hover{transform:translateY(-3px) scale(1.02);background:var(--gradient-hover)}
.btn-danger{background:linear-gradient(135deg,rgba(255,0,110,.2),rgba(233,69,96,.2));border:1px solid rgba(233,69,96,.3);color:#ff006e}
.btn-danger:hover{background:linear-gradient(135deg,rgba(255,0,110,.3),rgba(233,69,96,.3))}
@media (max-width:768px){.container{padding:30px 14px}
 .profile-info h1{font-size:2.2rem}
 .avatar-img{width:180px;height:180px}
 .avatar-ring{inset:-15px}
 .avatar-glow{inset:-15px}
 .tabs-header{flex-wrap:wrap}
 .tab-btn{flex:1 1 auto;padding:12px 16px;font-size:.75rem}
 .tabs-content{padding:30px 20px}
 .section{padding:28px 20px}
 .info-grid{grid-template-columns:1fr}
 .form-grid{grid-template-columns:1fr}
 .button-group{flex-direction:column}
 .btn{width:100%}
}
@media (max-width:480px){.profile-header{padding:30px 20px}
 .profile-info h1{font-size:1.8rem}
 .avatar-img{width:140px;height:140px}
}
.btn-login{background:linear-gradient(135deg,rgba(79,156,255,.22),rgba(181,111,255,.14));border-color:rgba(79,156,255,.45);color:var(--accent)}
.btn-login:hover{background:linear-gradient(135deg,rgba(79,156,255,.36),rgba(181,111,255,.24));border-color:rgba(79,156,255,.65)}
.btn-cabinet{background:linear-gradient(135deg,rgba(0,240,212,.16),rgba(79,156,255,.12));border-color:rgba(0,240,212,.4);color:var(--green)}
.btn-cabinet:hover{background:linear-gradient(135deg,rgba(0,240,212,.28),rgba(79,156,255,.20));border-color:rgba(0,240,212,.65)}
.overlay{position:fixed;inset:0;z-index:9000;background:rgba(2,4,14,.75);background:rgba(20,20,35,0.95);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.overlay.open{opacity:1;pointer-events:all}
.modal-box{position:relative;width:100%;opacity:0;transition:transform .48s cubic-bezier(.34,1.38,.64,1),opacity .34s ease}
@keyframes breathe{0%,100%{opacity:0.6;transform:scale(1)}
 50%{opacity:1;transform:scale(1.06)}
}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rgbSpin{to{--ang:360deg}
}
.overlay.open .m-rgb{opacity:.72}
.m-glass{background:rgba(5,8,20,.91);border-radius:var(--r);border:1px solid rgba(255,255,255,.09);position:relative;z-index:1;overflow:hidden}
.m-glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none}
.m-close{position:absolute;top:14px;right:14px;z-index:20;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);color:var(--text2);font-size:.7rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.m-close:hover{background:rgba(255,94,125,.15);border-color:rgba(255,94,125,.4);color:var(--red)}
#loginOverlay .modal-box{max-width:400px;transform:scale(.84) translateY(36px)}
#loginOverlay.open .modal-box{opacity:1;transform:scale(1) translateY(0)}
.login-body{padding:36px 28px 28px}
.l-icon{width:66px;height:66px;border-radius:22px;background:linear-gradient(135deg,rgba(79,156,255,.26),rgba(181,111,255,.20));border:1px solid rgba(79,156,255,.40);display:flex;align-items:center;justify-content:center;font-size:1.55rem;color:var(--accent);margin:0 auto 22px;animation:iconFloat 3s ease-in-out infinite}
.l-title{font-family:'Unbounded',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:-.02em;text-align:center;margin-bottom:28px;background:linear-gradient(135deg,#fff 40%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lf{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lf-lbl{font-size:.68rem;font-weight:600;letter-spacing:.06em;color:var(--text2);display:flex;align-items:center;gap:6px;transition:color .2s}
.lf-lbl i{font-size:.62rem;color:var(--text3);transition:color .2s}
.lf:focus-within .lf-lbl,.lf:focus-within .lf-lbl i{color:var(--accent)}
.iw{position:relative}
.fi{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:.76rem;pointer-events:none;transition:color .25s}
.lf:focus-within .fi{color:var(--accent)}
.eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);font-size:.78rem;cursor:pointer;padding:4px;transition:color .2s;display:flex}
.eye:hover{color:var(--accent)}
input[type=text],input[type=password]{width:100%;background:rgba(0,0,0,.38);border:1px solid var(--border);border-radius:var(--rs);padding:12px 42px 12px 42px;font-family:'Manrope',sans-serif;font-size:.82rem;color:var(--t1);outline:none;appearance:none}
input::placeholder{color:var(--t3)}
input:focus{border-color:var(--border-act);background:rgba(79,156,255,.08)}
.remember{display:flex;align-items:center;gap:8px;margin-bottom:22px;cursor:pointer}
.remember input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.remember span{font-size:.74rem;color:var(--text2)}
.btn-enter{width:100%;padding:14px;border-radius:var(--rs);background:linear-gradient(135deg,rgba(79,156,255,.34),rgba(181,111,255,.24));border:1px solid rgba(79,156,255,.52);color:#fff;font-family:'Unbounded',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.07em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.btn-enter::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.17),transparent);transition:left .52s}
.btn-enter:hover::before{left:100%}
.btn-enter:hover{transform:translateY(-2px) scale(1.02);background:linear-gradient(135deg,rgba(79,156,255,.50),rgba(181,111,255,.36))}
.btn-enter:active{transform:scale(.97)}
.eico{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.btn-enter:hover .eico{transform:translateX(5px)}
.bot-links{display:flex;justify-content:space-between;gap:8px;margin-bottom:20px}
.bot-links a{font-size:.72rem;color:var(--text2);text-decoration:none;display:flex;align-items:center;gap:5px;transition:color .2s}
.bot-links a:hover{color:var(--accent)}
.soc-div{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.soc-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.soc-div span{font-size:.6rem;color:var(--text3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.soc-grid{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sbtn{width:46px;height:46px;border-radius:13px;background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.1rem;transition:all .26s cubic-bezier(.34,1.56,.64,1)}
.sbtn:hover{transform:translateY(-4px) scale(1.13)}
.sbtn.vk{color:#64b5f6}
 .sbtn.vk:hover{border-color:rgba(100,181,246,.55)}
.sbtn.ok{color:#ffb74d}
 .sbtn.ok:hover{border-color:rgba(255,183,77,.55)}
.sbtn.fb{color:#7a9fd8}
 .sbtn.fb:hover{border-color:rgba(122,159,216,.55)}
.sbtn.ml{color:#ff8a65}
 .sbtn.ml:hover{border-color:rgba(255,138,101,.55)}
.sbtn.gl{color:#ef5350}
 .sbtn.gl:hover{border-color:rgba(239,83,80,.55)}
.sbtn.ya{color:#ff7043}
 .sbtn.ya:hover{border-color:rgba(255,112,67,.55)}
#cabinetOverlay .modal-box{max-width:360px;transform:scale(.84) translateY(-30px)}
#cabinetOverlay.open .modal-box{opacity:1;transform:scale(1) translateY(0)}
.cab-head{padding:24px 22px 18px;background:linear-gradient(135deg,rgba(0,240,212,.07),rgba(79,156,255,.05));border-bottom:1px solid var(--border)}
.ava-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.ava-wrap{position:relative;flex-shrink:0}
.ava-img{width:60px;height:60px;border-radius:18px;object-fit:cover;display:block;border:2px solid rgba(0,240,212,.32)}
.ava-online{position:absolute;bottom:3px;right:3px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid rgba(5,8,20,.9);animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}
 50%{opacity:0.35}
}
.user-name{font-family:'Unbounded',sans-serif;font-size:.9rem;font-weight:700;color:var(--t1);margin-bottom:5px}
.user-status{display:flex;align-items:center;gap:5px;font-size:.66rem;color:var(--green);font-weight:600}
.sdot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.meta-row{display:flex;gap:8px;margin-bottom:16px}
.mchip{flex:1;background:rgba(0,0,0,.28);border:1px solid var(--border);border-radius:var(--rs);padding:9px 10px;display:flex;flex-direction:column;gap:2px;cursor:default;transition:border-color .2s,background .2s}
.mchip:hover{border-color:rgba(0,240,212,.32);background:rgba(0,240,212,.07)}
.mc-val{font-family:'Unbounded',sans-serif;font-size:.9rem;font-weight:700;color:var(--t1)}
.mc-key{font-size:.58rem;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.act-btns{display:flex;gap:8px}
.act-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:var(--rs);font-family:'Manrope',sans-serif;font-size:.73rem;font-weight:600;text-decoration:none;border:1px solid;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.act-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:left .45s}
.act-btn:hover{transform:translateY(-2px) scale(1.04)}
.abt-settings{background:rgba(79,156,255,.10);border-color:rgba(79,156,255,.35);color:var(--accent)}
.abt-admin{background:rgba(255,204,68,.09);border-color:rgba(255,204,68,.3);color:var(--yellow)}
.cab-menu{list-style:none;padding:8px}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:4px 4px}
.mitem{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rs);text-decoration:none;color:var(--text2);font-size:.78rem;font-weight:500;transition:all .2s ease;position:relative}
.mitem::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:0;border-radius:0 3px 3px 0;background:var(--green);transition:width .2s,opacity .2s;opacity:0}
.mitem:hover{background:rgba(0,240,212,.07);color:var(--t1);padding-left:18px}
.mitem:hover::before{width:3px;opacity:1}
.mico{width:30px;height:30px;border-radius:9px;flex-shrink:0;background:rgba(255,255,255,.04);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--text3);transition:all .2s}
.mitem:hover .mico{background:rgba(0,240,212,.14);border-color:rgba(0,240,212,.38);color:var(--green)}
.mitem.danger:hover{background:rgba(255,94,125,.07);color:var(--red)}
.mitem.danger:hover::before{background:var(--red)}
.mitem.danger:hover .mico{background:rgba(255,94,125,.12);border-color:rgba(255,94,125,.3);color:var(--red)}
.mitem.adm:hover{background:rgba(255,204,68,.07);color:var(--yellow)}
.mitem.adm:hover::before{background:var(--yellow)}
.mitem.adm:hover .mico{background:rgba(255,204,68,.12);border-color:rgba(255,204,68,.28);color:var(--yellow)}
.mbadge{margin-left:auto;font-family:'Unbounded',sans-serif;font-size:.52rem;font-weight:700;color:var(--green);background:rgba(0,240,212,.12);border:1px solid rgba(0,240,212,.3);border-radius:50px;padding:2px 7px}
.mitem:hover .mbadge{background:rgba(0,240,212,.22)}
.form-subtitle{text-align:center;color:var(--auth-text-secondary);font-size:0.95rem;margin-bottom:2rem;line-height:1.5}
.form-item{margin-bottom:1.5rem}
.form-item.clearfix::after{content:'';display:table;clear:both}
.form-item.imp{background:rgba(139,92,246,0.05);border:1px solid var(--auth-border);border-radius:16px;padding:1rem}
.form-item label{display:block;font-size:0.9rem;font-weight:600;color:var(--auth-text);margin-bottom:0.6rem}
.form-item label.name{color:var(--auth-text-secondary)}
.form-item input[type="text"]{width:100%;padding:0.9rem 1.2rem;background:var(--auth-input-bg);border:1px solid var(--auth-input-border);border-radius:12px;color:var(--auth-text);font-size:0.95rem;transition:all 0.3s ease;outline:none}
.form-item input[type="text"]::placeholder{color:var(--auth-text-muted)}
.form-item input[type="text"]:focus{border-color:var(--auth-input-focus);background:rgba(139,92,246,0.08)}
.form-secur{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.form-secur input{flex:1;min-width:150px}
.captcha-img{background:var(--auth-captcha-bg);border:1px solid var(--auth-captcha-border);border-radius:10px;padding:4px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}
.captcha-img img{border-radius:6px;cursor:pointer;transition:transform 0.3s ease}
.captcha-img img:hover{transform:scale(1.05)}
.captcha-img:hover{border-color:var(--auth-input-focus)}
.recaptcha-stub{display:flex;align-items:center;gap:0.8rem;padding:0.8rem 1.2rem;background:var(--auth-input-bg);border:2px solid var(--auth-input-border);border-radius:12px;cursor:pointer;transition:all 0.3s ease;user-select:none}
.recaptcha-stub:hover{border-color:var(--auth-input-focus);background:rgba(139,92,246,0.08)}
.recaptcha-stub.checked{border-color:#10b981;background:rgba(16,185,129,0.1)}
.recaptcha-checkbox{width:24px;height:24px;border:2px solid var(--auth-input-border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:transparent;transition:all 0.3s ease;flex-shrink:0}
.recaptcha-stub.checked .recaptcha-checkbox{background:#10b981;border-color:#10b981;color:white}
.recaptcha-label{font-size:0.9rem;color:var(--auth-text-secondary)}
.form-divider{display:flex;align-items:center;margin:1.5rem 0;color:var(--auth-text-muted);font-size:0.85rem}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:var(--auth-border)}
.form-divider span{padding:0 1rem}
.form-footer{text-align:center}
.form-footer a{color:var(--auth-text-secondary);text-decoration:none;font-size:0.9rem;transition:all 0.3s ease;display:inline-flex;align-items:center;gap:0.4rem}
.form-footer a:hover{color:var(--auth-text);transform:translateX(-3px)}
.form-footer a i{transition:transform 0.3s ease}
.form-footer a:hover i{transform:translateX(-3px)}
@keyframes inputGlow{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0)}
 50%{box-shadow:0 0 0 3px rgba(139,92,246,0.1)}
}
.form-item input:focus{animation:inputGlow 1.5s ease-in-out infinite}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.form-wrap{position:relative;z-index:1;width:100%;max-width:100%;background:var(--glass);border:1px solid var(--glass-border);background:rgba(20,20,35,0.85);box-shadow:0 0 30px rgba(0,0,0,0.3);border-radius:var(--radius);padding:36px 32px 32px;animation:fadeUp .6s ease both;transition:var(--transition)}
.form-wrap::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:var(--gradient-primary);border-radius:var(--radius) var(--radius) 0 0;pointer-events:none;opacity:.6}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}
 to{opacity:1;transform:translateY(0)}
}
.form-wrap h1{font-family:'Unbounded',sans-serif;font-size:1.25rem;font-weight:700;letter-spacing:-.01em;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.form-wrap h1::before{content:'';width:4px;height:22px;background:var(--gradient-primary);border-radius:4px;flex-shrink:0}
.full-text{background:var(--glass-hover);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:14px 16px;font-size:.78rem;color:var(--text-secondary);line-height:1.65;margin-bottom:28px;position:relative;overflow:hidden;transition:var(--transition)}
.full-text::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gradient-primary);border-radius:4px 0 0 4px}
.full-text b{color:var(--text-primary);font-weight:600}
.full-text a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--glass-border);transition:var(--transition)}
.full-text a:hover{color:var(--accent-light);border-color:var(--glass-border-hover)}
.form-section-label{width:100%;max-width:100%;font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin:24px 0 16px}
.form-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--glass-border),transparent)}
.form-item{margin-bottom:16px;animation:fadeUp .5s ease both}
.form-item:nth-child(1){animation-delay:.06s}
.form-item:nth-child(2){animation-delay:.10s}
.form-item:nth-child(3){animation-delay:.14s}
.form-item:nth-child(4){animation-delay:.18s}
.form-item:nth-child(5){animation-delay:.22s}
.form-item:nth-child(6){animation-delay:.26s}
label{display:block;font-size:.72rem;font-weight:600;color:var(--text-secondary);letter-spacing:.04em;margin-bottom:7px;transition:var(--transition)}
.form-item:focus-within label{color:var(--accent)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap .field-icon{position:absolute;left:14px;color:var(--text-muted);font-size:.78rem;pointer-events:none;transition:var(--transition)}
.form-item:focus-within .field-icon{color:var(--accent)}
input[type="text"],input[type="password"],input[type="email"],input[type="file"],textarea{background:var(--auth-input-bg);border:1px solid var(--auth-input-border);border-radius:var(--radius-sm);padding:12px 16px;color:var(--auth-text);font-family:'Manrope',sans-serif;font-size:0.9rem;transition:var(--transition);outline:none}
html:not(.dark) input[type="text"],html:not(.dark) input[type="password"],html:not(.dark) input[type="email"],html:not(.dark) textarea{background:rgba(15,23,42,.05)}
input[type="text"]::placeholder,input[type="password"]::placeholder,input[type="email"]::placeholder,textarea::placeholder{color:var(--auth-text-muted)}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{border-color:var(--auth-input-focus);background:rgba(139,92,246,0.08)}
.eye-btn{position:absolute;right:12px;background:none;border:none;color:var(--text-muted);font-size:.8rem;cursor:pointer;padding:4px;transition:var(--transition);display:flex}
.eye-btn:hover{color:var(--accent)}
.row > *{width:100%;max-width:100%}
.login-row{display:flex;gap:8px;align-items:stretch}
.login-row input[type="text"]{flex:1}
.form-textarea{margin-bottom:16px}
.form-textarea textarea{padding:12px 14px;resize:vertical;min-height:110px;border-radius:var(--radius-sm);line-height:1.6}
input[type="file"]{padding:10px 14px;cursor:pointer;color:var(--text-secondary)}
input[type="file"]::file-selector-button{background:var(--glass-hover);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--accent);font-family:'Manrope',sans-serif;font-size:.72rem;font-weight:600;padding:5px 12px;cursor:pointer;transition:var(--transition);margin-right:10px}
input[type="file"]::file-selector-button:hover{background:var(--glass-border-hover);border-color:var(--accent)}
.form-secur{display:flex;flex-direction:column;gap:10px}
.form-secur .question-text{font-size:.78rem;color:var(--text-secondary);background:var(--glass-hover);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 14px}
#result-registration{font-size:.75rem;min-height:6px;margin:-8px 0 12px;padding:0 2px;transition:var(--transition)}
.btn-check{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35) !important;color:var(--green) !important;padding:10px 16px;flex-shrink:0}
.btn-check:hover{border-color:var(--green) !important}
.form-submit{margin-top:24px}
 .imp label::after{content:' *';color:var(--accent);font-size:.65rem}
.form-item.imp{background:rgba(139,92,246,0.05);border:1px solid var(--auth-border);border-radius:16px;padding:1rem}
.form-item label{display:block;font-size:0.9rem;font-weight:600;color:var(--auth-text);margin-bottom:0.6rem}
.pw-strength{display:flex;gap:4px;margin-top:6px}
.pw-bar{flex:1;height:3px;border-radius:3px;background:var(--glass-border);transition:background .3s ease}
.pw-bar.weak{background:var(--red)}
.pw-bar.medium{background:var(--yellow)}
.pw-bar.strong{background:var(--green)}
.pw-hint{font-size:.62rem;color:var(--text-muted);margin-top:4px}
@media (max-width:600px){.form-wrap{padding:28px 22px 24px}
 .form-wrap h1{font-size:1.1rem}
 #themeLabel{width:44px;height:44px}
 #themeIcon{font-size:1.1rem}
}
.download-gallery{opacity:0}
.download-gallery.show{opacity:1;pointer-events:all;transform:translateY(0)}
.download-gallery:hover{transform:translateY(-3px)}
.download-gallery:hover{background:linear-gradient(135deg,#00ffff22,#00a8ff22);border-color:#00ffff;color:#00ffff;transform:translateY(-1px)}
.download-gallery{flex:1;padding:9px 14px;border-radius:9px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:0.8rem;font-weight:500;border:none;border-radius:10px;cursor:pointer;transition:all 0.2s;background:rgba(30,41,59,0.8);color:#e2e8f0;border:1px solid rgba(100,200,255,0.2)}
.header{background:linear-gradient(135deg,var(--glass),rgba(255,255,255,0.05));border:1px solid var(--border);border-radius:24px;padding:28px 32px;margin-bottom:35px;animation:slideDown 0.6s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes slideDown{from{opacity:0;transform:translateY(-30px)}
 to{opacity:1;transform:translateY(0)}
}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.count-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(135deg,rgba(92,201,255,0.15),rgba(179,136,255,0.1));border:1px solid rgba(92,201,255,0.3);border-radius:50px;font-size:14px;font-weight:700;color:var(--cyan)}
.search-box{position:relative;width:100%;max-width:400px}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--text-dim);pointer-events:none}
#searchInput{width:100%;padding:14px 20px 14px 50px;background:rgba(0,0,0,0.3);border:1px solid var(--border);border-radius:50px;font-family:'Poppins',sans-serif;font-size:15px;color:var(--text);outline:none;transition:all 0.3s}
#searchInput::placeholder{color:var(--text-dim)}
#searchInput:focus{border-color:var(--cyan);background:rgba(0,0,0,0.4)}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin-bottom:40px}
.cover-card{position:relative;border-radius:20px;overflow:hidden;background:var(--glass);border:1px solid var(--border);cursor:pointer;transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);opacity:0;transform:scale(0.9);animation:cardAppear 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards}
@keyframes cardAppear{to{opacity:1;transform:scale(1)}
}
.cover-card:hover{transform:translateY(-10px) scale(1.02);border-color:rgba(92,201,255,0.4)}
.cover-img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s,filter 0.4s;filter:brightness(0.85)}
.cover-card:hover .cover-img{transform:scale(1.1);filter:brightness(0.6)}
.cover-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,15,28,0.9) 100%);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity 0.3s}
.cover-card:hover .cover-overlay{opacity:1}
.cover-name{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,0.2);border-radius:50px;font-size:12px;font-weight:600;color:white;z-index:3;transition:all 0.3s ease}
.cover-card:hover .cover-name{transform:translateY(0)}
.cover-actions{display:flex;gap:8px;transform:translateY(15px);transition:transform 0.3s 0.05s}
.cover-card:hover .cover-actions{transform:translateY(0)}
.btn-download{flex:1;padding:9px 14px;border-radius:9px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:inline-flex;align-items:center;gap:5px;padding:6px 12px;font-size:0.8rem;font-weight:500;border:none;border-radius:10px;cursor:pointer;transition:all 0.2s;background:rgba(30,41,59,0.8);color:#e2e8f0;border:1px solid rgba(100,200,255,0.2)}
.btn-download:hover{background:linear-gradient(135deg,rgba(92,201,255,0.35),rgba(179,136,255,0.25));transform:translateY(-2px)}
.hidden{display:none !important}
.download-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,15,28,0.95);z-index:10000;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.3s}
.download-modal.show{opacity:1;pointer-events:all}
.download-content{background:linear-gradient(135deg,var(--glass),rgba(255,255,255,0.05));border:1px solid var(--border);border-radius:32px;padding:40px;max-width:500px;width:100%;transform:scale(0.9);transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);position:relative}
.download-modal.show .download-content{transform:scale(1)}
.modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,107,157,0.3);background:rgba(255,107,157,0.15);color:var(--pink);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.modal-close:hover{background:rgba(255,107,157,0.3);transform:rotate(90deg) scale(1.1)}
.download-steps{display:flex;flex-direction:column;gap:20px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{align-items:flex-start;gap:15px;padding:10px;background:rgba(0,0,0,0.2);border-radius:20px;border:1px solid transparent;transition:all 0.3s}
.step.active{border-color:rgba(92,201,255,0.4);background:rgba(92,201,255,0.08)}
.step.done{border-color:rgba(140,255,193,0.4);background:rgba(140,255,193,0.08)}
.step-icon{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;background:rgba(255,255,255,0.05);border:2px solid rgba(255,255,255,0.1);transition:all 0.3s}
.step.active .step-icon{background:linear-gradient(135deg,rgba(92,201,255,0.25),rgba(179,136,255,0.2));border-color:var(--cyan);animation:pulse 2s ease-in-out infinite}
.step.done .step-icon{background:linear-gradient(135deg,rgba(140,255,193,0.25),rgba(92,201,255,0.2));border-color:var(--mint)}
.step-content{flex:1}
.step-title{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--text)}
.step-desc{font-size:13px;color:var(--text-dim)}
.step.active .step-title{background:linear-gradient(135deg,var(--cyan),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.step.done .step-title{color:var(--mint)}
.preview-wrap{margin-top:25px;border-radius:20px;overflow:hidden;border:2px solid var(--border);background:rgba(0,0,0,0.3);opacity:0;transform:scale(0.9);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1)}
.preview-wrap.show{opacity:1;transform:scale(1)}
.preview-img{width:100%}
.download-btn.show{opacity:1;pointer-events:all;transform:translateY(0)}
.download-btn:hover{transform:translateY(-3px)}
@media (max-width:768px){.header{padding:20px}
 .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
 .download-content{padding:25px}
}
.vst-grid-new{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vst-card-new{background:var(--vst-card);border:1px solid var(--vst-card-border);border-radius:20px;overflow:hidden;transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);position:relative}
.vst-card-new::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--vst-accent);transform:scaleX(0);transition:transform 0.4s ease}
.vst-card-new:hover{transform:translateY(-8px);border-color:rgba(99,102,241,0.6)}
.vst-card-new:hover::before{transform:scaleX(1)}
.vst-visual-new{position:relative;height:160px;overflow:hidden}
.vst-img-new{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease}
.vst-title-new{font-size:22px;font-weight:700;color:var(--vst-text);margin-bottom:16px;line-height:1.4;display:-webkit-box;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vst-meta-new{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.vst-meta-item{background:rgba(99,102,241,0.1);border:1px solid var(--vst-card-border);border-radius:12px;padding:1px 8px;text-align:center;transition:all 0.3s ease}
.vst-meta-item:hover{background:rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.6);transform:translateY(-2px)}
.vst-meta-icon{font-size:18px;margin-bottom:6px;display:block}
.vst-meta-label{font-size:9px;color:var(--vst-text-muted);text-transform:uppercase;letter-spacing:0.5px;display:block;margin-bottom:4px}
.vst-meta-value{font-size:12px;font-weight:600;color:var(--vst-text);display:block}
.vst-download-new{width:100%;padding:14px;background:var(--vst-accent);border:none;border-radius:14px;color:white;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:10px}
.vst-download-new:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translateY(-3px)}
.vst-download-new i{transition:transform 0.3s ease}
.vst-download-new:hover i{transform:translateY(-2px)}
body.modal-open1{overflow:hidden;position:fixed;width:100%;height:100%}
body.modal-open{overflow:hidden}
.vst-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(99,102,241,0.1);border:1px solid var(--vst-card-border);color:var(--vst-text);cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center}
.vst-modal-close:hover{background:var(--vst-accent);border-color:transparent;transform:rotate(90deg)}
.vst-search-anim{width:40px;height:40px;margin:0 auto 20px;border-radius:50%;background:var(--vst-accent);display:flex;align-items:center;justify-content:center;font-size:32px;color:white;animation:vstPulse 2s ease-in-out infinite}
@keyframes vstPulse{0%,100%{transform:scale(1) rotate(0deg)}
 50%{transform:scale(1.1) rotate(180deg)}
}
.vst-modal-title{font-size:22px;font-weight:800;color:var(--vst-text);margin-bottom:8px;background:var(--vst-accent);background-clip:text;-webkit-text-fill-color:transparent;text-align:center}
.vst-modal-subtitle{font-size:13px;color:var(--vst-text-muted);text-align:center;margin-bottom:24px}
.vst-file-info{background:rgba(99,102,241,0.1);border:1px solid var(--vst-card-border);border-radius:16px;padding:10px;margin-bottom:24px}
.vst-info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--vst-card-border)}
.vst-info-row:last-child{border-bottom:none}
.vst-info-label{font-size:13px;color:var(--vst-text-muted)}
.vst-info-value{font-size:14px;font-weight:600;color:var(--vst-text)}
.vst-progress{margin-bottom:20px}
.vst-progress-track{height:10px;background:rgba(99,102,241,0.2);border-radius:10px;overflow:hidden;margin-bottom:12px}
.vst-progress-line{height:100%;width:0;background:var(--vst-accent);border-radius:10px;transition:width 0.4s ease;position:relative}
.vst-progress-line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:vstShimmer 1.5s ease-in-out infinite}
@keyframes vstShimmer{0%{transform:translateX(-100%)}
 100%{transform:translateX(100%)}
}
.vst-progress-text{display:block;text-align:center;font-size:18px;font-weight:700;background:var(--vst-accent);background-clip:text;-webkit-text-fill-color:transparent}
.vst-status{text-align:center;padding:14px;border-radius:12px;background:rgba(99,102,241,0.1);border:1px solid var(--vst-card-border);color:var(--vst-text-muted);font-size:14px;margin-bottom:20px;transition:all 0.3s ease}
.vst-status.ready{background:rgba(16,185,129,0.15);border-color:rgba(16,185,129,0.4);color:var(--vst-success)}
.vst-action-btn{width:100%;padding:16px;background:var(--vst-accent);border:none;border-radius:14px;color:white;font-size:16px;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:12px}
.vst-action-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.vst-action-btn:not(:disabled):hover{background:linear-gradient(135deg,#4f46e5,#7c3aed);transform:translateY(-3px)}
.vst-action-btn i{transition:transform 0.3s ease}
.vst-action-btn:not(:disabled):hover i{transform:translateY(-2px)}
@media (max-width:900px){.vst-grid-new{grid-template-columns:1fr}
}
@media (max-width:600px){.vst-wrapper{padding:40px 15px 30px}
 .vst-meta-new{grid-template-columns:repeat(3,1fr);gap:6px}
 .vst-modal-window{padding:24px}
}
.vst-modal-window{position:relative;width:100%;max-width:480px;background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:2px;padding:2.2rem;border:1px solid rgba(0,0,0,0.9);transform:scale(0.9) translateY(20px);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275)}
.vst-header{background:rgba(0,0,0,0.1);box-shadow:0 4px 20px rgba(0,0,0,0.15);border:1px solid var(--vst-card-border);border-radius:24px;padding:2rem 2.5rem;margin-bottom:2.5rem;max-width:1200px;margin-left:auto;margin-right:auto}
.vst-header-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.vst-header-left{display:flex;align-items:center;gap:1.2rem}
.vst-header-icon{width:60px;height:60px;border-radius:18px;background:var(--vst-accent);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:white}
.vst-header-text h1{font-size:2rem;font-weight:800;background:var(--vst-accent);background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.2rem}
.vst-header-text p{color:var(--vst-text-muted);font-size:0.9rem}
.vst-header-stats{display:flex;gap:0.8rem;flex-wrap:wrap}
.vst-stat-badge{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 1.2rem;background:rgba(99,102,241,0.1);background:var(--vst-accent);border-radius:50px;font-size:0.85rem;font-weight:600;color:var(--vst-text-secondary);transition:all 0.3s ease}
.vst-stat-badge:hover{transform:translateY(-2px);background:var(--vst-accent);color:white;border-color:transparent}
@media (max-width:768px){.vst-header{padding:1.5rem}
 .vst-header-content{flex-direction:column;text-align:center}
 .vst-header-left{flex-direction:column}
 .vst-header-text h1{font-size:1.7rem}
 .vst-header-stats{justify-content:center}
}
@media (max-width:480px){.vst-header-icon{width:54px;height:54px;font-size:1.4rem}
 .vst-header-text h1{font-size:1.5rem}
 .vst-stat-badge{padding:0.5rem 1rem;font-size:0.8rem}
}
.vst-type-badge{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(0,0,0,0.8);border:1px solid rgba(0,0,0,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.15);border-radius:50px;font-size:12px;font-weight:600;color:white;z-index:3;transition:all 0.3s ease}
.vst-type-badge i{font-size:14px}
.vst-type-badge:hover{background:var(--vst-accent);border-color:transparent;transform:translateY(-2px)}
@media (max-width:600px){.vst-type-badge{top:8px;left:8px;padding:5px 10px;font-size:11px}
 .vst-type-badge i{font-size:12px}
}
.vst-version-select{background:rgba(99,102,241,0.1);border:1px solid var(--vst-card-border);border-radius:16px;padding:16px;margin-bottom:20px}
.vst-select-label{font-size:13px;color:var(--vst-text-secondary);margin-bottom:12px;text-align:center}
.vst-version-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vst-version-option{background:var(--vst-card);border:2px solid var(--vst-card-border);border-radius:12px;padding:12px 8px;cursor:pointer;transition:all 0.3s ease;display:flex;flex-direction:column;align-items:center;gap:4px}
.vst-version-option:hover{border-color:var(--vst-accent);background:rgba(99,102,241,0.15);transform:translateY(-2px)}
.vst-version-option.selected{border-color:var(--vst-accent);background:rgba(99,102,241,0.2)}
.vst-ver-name{font-size:12px;font-weight:800;color:var(--accent);text-align:center}
.vst-ver-size{font-size:12px;font-weight:800;color:var(--accent)}
@media (max-width:600px){.vst-version-options{grid-template-columns:1fr}
}
.vst-version-option.unavailable{opacity:0.5;cursor:not-allowed;border-color:rgba(255,71,87,0.3);background:rgba(255,71,87,0.05)}
.vst-version-option.unavailable:hover{transform:none;border-color:rgba(255,71,87,0.3)}
.vst-ver-status{font-size:10px;color:#ff4757;margin-top:4px;display:block}
.vst-version-option.selected .vst-ver-status{color:#00ff88}
.vst-version-error{background:rgba(255,71,87,0.15);border:1px solid rgba(255,71,87,0.4);border-radius:12px;padding:12px 16px;margin-top:12px;color:#ff4757;font-size:13px;text-align:center;animation:errorShake 0.5s ease}
@keyframes errorShake{0%,100%{transform:translateX(0)}
 25%{transform:translateX(-5px)}
 75%{transform:translateX(5px)}
}
.g-card:hover{border-color:var(--glass-border-hover)}
.hero-card{padding:32px 30px 28px;background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(6,182,212,0.08),rgba(236,72,153,0.06));text-align:center;position:relative}
html:not(.dark) .hero-card{background:linear-gradient(135deg,rgba(124,58,237,0.08),rgba(8,145,178,0.06),rgba(219,39,119,0.04))}
.hero-card::before{background:linear-gradient(90deg,transparent,rgba(139,92,246,0.5),rgba(6,182,212,0.4),rgba(236,72,153,0.3),transparent)}
html:not(.dark) .hero-card::before{background:linear-gradient(90deg,transparent,rgba(124,58,237,0.4),rgba(8,145,178,0.35),rgba(219,39,119,0.25),transparent)}
 .hero-icon{width:64px;height:64px;border-radius:20px;background:var(--gradient-primary);display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:white;margin:0 auto 20px;animation:iconFloat 4s ease-in-out infinite;position:relative}
.hero-icon::after{content:'';position:absolute;inset:-5px;border-radius:22px;background:var(--gradient-primary);opacity:0.35;z-index:-1}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0deg)}
 25%{transform:translateY(-8px) rotate(3deg)}
 75%{transform:translateY(-8px) rotate(-3deg)}
}
.hero-title{font-family:'Unbounded',sans-serif;font-size:1.5rem;font-weight:800;letter-spacing:-0.02em;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px;text-shadow:0 4px 20px rgba(139,92,246,0.3)}
.guest-notice{display:flex;align-items:flex-start;gap:12px;background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.25);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:22px;animation:fadeUp 0.5s ease both 0.1s;transition:var(--transition)}
.guest-notice:hover{background:rgba(251,191,36,0.12);border-color:rgba(251,191,36,0.4)}
.guest-notice-icon{font-size:0.95rem;color:var(--yellow);margin-top:2px;flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.guest-notice p{font-size:0.78rem;color:var(--text-secondary);line-height:1.55}
.guest-notice p span{color:var(--yellow);font-weight:600}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media (max-width:520px){.form-row{grid-template-columns:1fr}
}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;animation:fadeUp 0.5s ease both}
.form-group:nth-child(1){animation-delay:0.05s}
.form-group:nth-child(2){animation-delay:0.1s}
.form-group:nth-child(3){animation-delay:0.15s}
.form-group:nth-child(4){animation-delay:0.2s}
.form-group:nth-child(5){animation-delay:0.25s}
.form-label{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;color:var(--text-muted);display:flex;align-items:center;gap:7px;transition:var(--transition);text-transform:uppercase}
.form-label i{font-size:0.7rem;color:var(--text-dim);transition:var(--transition)}
.form-group:focus-within .form-label{color:var(--accent-light)}
.form-group:focus-within .form-label i{color:var(--accent-light)}
.input-wrap{position:relative}
.field-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-dim);font-size:0.82rem;pointer-events:none;transition:var(--transition);z-index:2}
.form-group:focus-within .field-icon{color:var(--accent-light)}
input[type="text"],input[type="email"],textarea{width:100%;background:rgba(0,0,0,0.32);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:13px 16px 13px 44px;font-family:'Manrope',sans-serif;font-size:0.85rem;color:var(--text-primary);outline:none;transition:var(--transition);appearance:none}
input::placeholder,textarea::placeholder{color:var(--text-dim);opacity:0.8}
input:focus,textarea:focus{border-color:var(--accent);background:rgba(139,92,246,0.08)}
html:not(.dark) input:focus,html:not(.dark) textarea:focus{background:rgba(124,58,237,0.06)}
textarea{padding:14px 16px 14px 44px;resize:vertical;min-height:150px;border-radius:var(--radius-sm);line-height:1.7}
.textarea-wrap .field-icon{top:18px;transform:none}
input[type="file"]{padding:11px 16px;color:var(--text-secondary);cursor:pointer;font-size:0.8rem;background:rgba(0,0,0,0.28);border:1px dashed var(--glass-border);border-radius:var(--radius-sm);transition:var(--transition)}
html:not(.dark) input[type="file"]{background:rgba(15,23,42,0.04)}
input[type="file"]:hover{border-color:var(--accent);background:rgba(139,92,246,0.06)}
html:not(.dark) input[type="file"]:hover{background:rgba(124,58,237,0.05)}
input[type="file"]::file-selector-button{background:rgba(139,92,246,0.18);border:1px solid rgba(139,92,246,0.35);border-radius:10px;color:var(--accent-light);font-family:'Manrope',sans-serif;font-size:0.74rem;font-weight:600;padding:7px 15px;cursor:pointer;transition:var(--transition);margin-right:12px}
html:not(.dark) input[type="file"]::file-selector-button{background:rgba(124,58,237,0.12);border-color:rgba(124,58,237,0.3);color:var(--accent)}
input[type="file"]::file-selector-button:hover{background:rgba(139,92,246,0.32);transform:translateY(-1px)}
html:not(.dark) input[type="file"]::file-selector-button:hover{background:rgba(124,58,237,0.22)}
.warn-card{background:rgba(239,68,68,0.07);border:1px solid rgba(239,68,68,0.22);border-radius:var(--radius-sm);padding:16px 18px;display:flex;gap:13px;align-items:flex-start;margin-bottom:20px;animation:fadeUp 0.5s ease both 0.22s;transition:var(--transition)}
html:not(.dark) .warn-card{background:rgba(220,38,38,0.06);border-color:rgba(220,38,38,0.2)}
.warn-card:hover{background:rgba(239,68,68,0.1);border-color:rgba(239,68,68,0.35)}
html:not(.dark) .warn-card:hover{background:rgba(220,38,38,0.09);border-color:rgba(220,38,38,0.32)}
.warn-card::before{display:none}
.warn-icon{color:var(--red);font-size:0.95rem;flex-shrink:0;margin-top:2px;animation:shake 3s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0deg)}
 10%,30%,50%,70%,90%{transform:rotate(-3deg)}
 20%,40%,60%,80%{transform:rotate(3deg)}
}
.warn-title{font-family:'Unbounded',sans-serif;font-size:0.68rem;font-weight:800;letter-spacing:0.06em;color:var(--red);margin-bottom:6px;text-transform:uppercase}
.warn-text{font-size:0.76rem;color:var(--text-secondary);line-height:1.6}
.warn-text strong{color:var(--green);font-weight:600}
.form-divider{height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);margin:20px 0;position:relative}
.form-divider::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:1px;background:var(--gradient-primary);border-radius:2px}
 .btn::before,.btn-submit::before,.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.6s ease}
.btn:hover::before,.btn-submit:hover::before,.btn-primary:hover::before{left:100%}
.btn-submit:hover{transform:translateY(-4px) scale(1.02)}
.btn:active,.btn-submit:active,.btn-primary:active{transform:translateY(-1px) scale(0.98)}
.send-icon{transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);display:inline-block;font-size:0.95rem}
.btn-submit:hover .send-icon{transform:rotate(28deg) scale(1.18) translateY(-2px)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--bg);border-radius:12px}
@media (max-width:600px){.feedback-wrap{max-width:100%}
.hero-card{padding:24px 22px 26px}
.form-row{gap:12px}
input[type="text"],input[type="email"],textarea{padding:12px 14px 12px 42px;font-size:0.82rem}
.btn-submit{padding:14px 24px;font-size:0.75rem}
.hero-title{font-size:1.2rem}
.hero-desc{font-size:0.82rem}
.form-label{font-size:0.68rem}
input,textarea{font-size:0.8rem;padding:11px 13px 11px 40px}
}
.hidden{display:none !important}
.easter-egg-btn{position:fixed;bottom:180px;left:25px;width:55px;height:55px;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);border:2px solid rgba(255,215,0,0.5);border-radius:50%;cursor:pointer;z-index:9996;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}
.easter-egg-btn:hover{transform:scale(1.1) rotate(10deg)}
.easter-egg-btn.has-new{animation:eggPulse 1s ease-in-out infinite}
@keyframes eggPulse{0%,100%{box-shadow:0 0 20px rgba(255,215,0,0.4);transform:scale(1)}
 50%{box-shadow:0 0 50px rgba(255,215,0,0.8);transform:scale(1.05)}
}
.egg-icon{font-size:26px}
.egg-count{position:absolute;top:-5px;right:-5px;background:linear-gradient(135deg,#ff6b35,#ff4757);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:12px;min-width:22px;text-align:center;border:2px solid #fff;z-index:3}
@keyframes notificationBounce{0%{transform:translateX(-50%) scale(0.8) translateY(10px)}
 50%{transform:translateX(-50%) scale(1.05) translateY(-5px)}
 100%{transform:translateX(-50%) scale(1) translateY(0)}
}
@keyframes glowRotate{0%{transform:rotate(0deg) scale(1);opacity:0.5}
 50%{transform:rotate(180deg) scale(1.2);opacity:0.8}
 100%{transform:rotate(360deg) scale(1);opacity:0.5}
}
@keyframes glow{0%,100%{box-shadow:0 0 10px var(--green)}
 50%{box-shadow:0 0 25px var(--green)}
}
.vst-modal-new,.history-overlay,.easter-egg-inventory{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(0,0,0,0.92),rgba(0,0,0,0.97));border:1px solid rgba(0,0,0,1.55);z-index:10001;opacity:0;visibility:hidden;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;justify-content:center;align-items:center;padding:20px}
.vst-modal-new.active,.history-overlay.show,.easter-egg-inventory.show{opacity:1;visibility:visible;pointer-events:auto}
.vst-modal-new.active .vst-modal-window,.history-overlay.show .history-panel,.easter-egg-inventory.show .inventory-panel{transform:scale(1) translateY(0)}
.history-panel,.inventory-panel{background:linear-gradient(145deg,rgba(20,30,50,0.98),rgba(10,20,40,0.99));border:2px solid rgba(255,215,0,0.4);border-radius:24px;width:100%;max-width:750px;height:95vh;max-height:850px;overflow:hidden;transform:scale(0.9) translateY(20px);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column}
.inventory-header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:2px solid rgba(255,215,0,0.3);background:linear-gradient(90deg,rgba(255,215,0,0.1),transparent);flex-shrink:0}
.inventory-header{flex-shrink:0}
.inventory-title{display:flex;align-items:center;gap:12px}
.title-icon{font-size:32px;animation:eggBounce 2s ease-in-out infinite}
@keyframes eggBounce{0%,100%{transform:translateY(0) rotate(0deg)}
 50%{transform:translateY(-4px) rotate(4deg)}
}
.inventory-title h3{margin:0;color:#ffd700;font-size:24px;font-weight:700;background:linear-gradient(90deg,#ffd700,#ffed4a,#ffd700);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.inv-btn{width:40px;height:40px;background:rgba(255,215,0,0.15);border:1px solid rgba(255,215,0,0.4);border-radius:12px;color:#ffd700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:16px}
.inv-btn:hover{background:rgba(255,215,0,0.3);transform:translateY(-2px)}
.inv-btn.clear:hover{background:linear-gradient(135deg,#ff4757,#ff6b81);border-color:#ff4757;color:#fff}
.stat-item{display:flex;flex-direction:column;gap:4px}
.stat-value{color:#ffd700;font-size:22px;font-weight:700}
.egg-list{padding:20px 28px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(255,215,0,0.5) rgba(0,0,0,0.3)}
.egg-item{background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.2);border-radius:14px;padding:16px;display:flex;gap:14px;transition:all 0.3s ease;position:relative;overflow:hidden;min-height:130px;align-items:flex-start}
.egg-item:hover{background:rgba(255,215,0,0.15);border-color:rgba(255,215,0,0.4);transform:translateY(-3px)}
.egg-item.new{border-color:rgba(255,107,53,0.6);background:rgba(255,107,53,0.1)}
.egg-item.new::before{content:'NEW';position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#ff6b35,#ff4757);color:#fff;font-size:9px;font-weight:700;padding:3px 8px;border-radius:8px;animation:newPulse 1s ease-in-out infinite}
@keyframes newPulse{0%,100%{opacity:1}
 50%{opacity:0.7}
}
.egg-icon-item{font-size:32px;flex-shrink:0;width:45px;height:45px;min-width:45px;min-height:45px;display:flex;align-items:center;justify-content:center}
@keyframes eggRotate{0%,100%{transform:rotate(-5deg)}
 50%{transform:rotate(5deg)}
}
.egg-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;width:100%}
.egg-track{color:#ffd700;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.egg-text{color:rgba(255,255,255,0.8);font-size:12px;line-height:1.5;white-space:normal;word-break:break-word;overflow:hidden;display:-webkit-box;line-clamp:3;-webkit-box-orient:vertical}
.egg-date{color:rgba(255,255,255,0.4);font-size:10px;margin-top:auto}
.egg-empty{grid-column:1 / -1;text-align:center;color:rgba(255,255,255,0.4);padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.egg-empty i{font-size:64px;color:rgba(255,215,0,0.3);animation:eggFloat 3s ease-in-out infinite}
@keyframes eggFloat{0%,100%{transform:translateY(0)}
 50%{transform:translateY(-15px)}
}
.egg-empty h4{margin:0;color:rgba(255,255,255,0.6);font-size:18px}
.egg-empty p{margin:0;color:rgba(255,255,255,0.3);font-size:14px}
.progress-bar{flex:1;height:8px;background:rgba(255,215,0,0.15);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,#ffd700,#ffed4a);border-radius:4px;transition:width 0.5s ease}
.progress-text{color:#ffd700;font-size:12px;font-weight:700;min-width:40px;text-align:right}
.egg-notification{position:fixed;top:30px;right:30px;background:linear-gradient(135deg,rgba(26,26,46,0.98),rgba(22,33,62,0.98));border:2px solid rgba(255,215,0,0.5);border-radius:16px;padding:14px 20px;z-index:10002;opacity:0;transform:translateX(100px);transition:all 0.4s ease;pointer-events:none}
.egg-notification.show{opacity:1;transform:translateX(0)}
.notif-content{display:flex;align-items:center;gap:12px}
.notif-icon{font-size:24px;animation:notifBounce 0.5s ease-in-out}
@keyframes notifBounce{0%,100%{transform:scale(1)}
 50%{transform:scale(1.3)}
}
.notif-text strong{display:block;color:#ffd700;font-size:14px;font-weight:600}
.notif-text span{color:rgba(255,255,255,0.8);font-size:12px}
#pHistoryBtn{background:linear-gradient(135deg,rgba(0,255,0,0.2),rgba(0,255,255,0.2));border:1px solid rgba(0,255,0,0.3);color:var(--green);cursor:pointer;font-size:16px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.15)}
#pHistoryBtn:hover{background:linear-gradient(135deg,rgba(0,255,0,0.4),rgba(0,255,255,0.4));border-color:var(--green);color:#fff;transform:translateY(-2px)}
#pHistoryBtn:active{transform:translateY(0)}
.history-header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid rgba(0,255,0,0.2);background:linear-gradient(90deg,rgba(0,255,0,0.05),transparent)}
.history-title{display:flex;align-items:center;gap:12px}
.history-title i{font-size:24px;color:var(--green);animation:pulse 2s infinite}
.history-title h3{margin:0;color:#fff;font-size:22px;font-weight:700;background:linear-gradient(90deg,var(--green),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.history-header h3{margin:0;color:var(--green)}
.history-actions{display:flex;gap:10px}
.h-btn{background:rgba(0,255,0,0.1);border:1px solid rgba(0,255,0,0.3);color:var(--green);padding:10px 18px;border-radius:12px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.history-stats{display:flex;gap:20px;padding:16px 28px;background:rgba(0,255,0,0.03);border-bottom:1px solid rgba(0,255,0,0.1)}
.stat-item{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,0.7);font-size:14px}
.stat-item i{color:var(--green);font-size:18px}
#hLastTrack{color:var(--cyan);transition:all 0.3s ease}
.history-overlay.show #hLastTrack{animation:textGlow 2s ease-in-out}
.stat-item span{color:#fff;font-weight:700;font-size:16px}
@keyframes textGlow{0%,100%{text-shadow:none}
 50%{text-shadow:0 0 15px rgba(0,255,255,0.5)}
}
.stat-item small{color:rgba(255,255,255,0.4);font-size:12px}
.h-btn:hover{background:var(--green);color:#000;transform:translateY(-2px)}
.h-btn.close{padding:10px 14px}
.h-btn.clear:hover{background:linear-gradient(135deg,#ff4757,#ff6b81);border-color:#ff4757;color:#fff}
.history-list{padding:20px 24px;flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-content:start;max-height:55vh}
@media (max-width:1100px){.history-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:650px){.history-list{grid-template-columns:1fr}
}
.history-item{display:flex;flex-direction:column;align-items:center;padding:14px 10px;border-radius:14px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);position:relative;overflow:hidden;min-height:170px;text-align:center;animation:fadeInUp 0.4s ease forwards;opacity:0}
.history-item::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--green),var(--cyan));transform:scaleX(0);transition:transform 0.3s ease}
.history-item:hover{background:rgba(0,255,0,0.08);border-color:rgba(0,255,0,0.3);transform:translateY(-4px)}
.history-item:hover .h-play-btn{opacity:1;transform:translateY(0)}
.history-item:hover::before{transform:scaleX(1)}
.history-item.playing{background:linear-gradient(180deg,rgba(0,255,0,0.15),rgba(0,255,255,0.1));border-color:var(--green)}
.history-item.playing::before{transform:scaleX(1);animation:glow 2s infinite}
.h-img{width:70px;height:70px;border-radius:12px;object-fit:cover;flex-shrink:0;border:2px solid rgba(255,255,255,0.1);transition:all 0.3s ease;margin-bottom:10px}
.history-item:hover .h-img{transform:scale(1.08);border-color:var(--green)}
.history-item.playing .h-img{border-color:var(--green);animation:rotate 3s linear infinite}
@keyframes rotate{to{transform:rotate(360deg)}
}
.h-info{flex:1;display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;margin-bottom:8px}
.h-title{color:#fff;font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 0.3s ease;line-height:1.3;width:100%}
.history-item:hover .h-title{color:var(--green)}
.history-item.playing .h-title{color:var(--green);text-shadow:0 0 10px rgba(0,255,0,0.5)}
.h-album{color:rgba(255,255,255,0.45);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.h-meta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;flex-wrap:wrap;width:100%}
.h-time{color:var(--cyan);font-size:10px;display:flex;align-items:center;gap:4px;background:rgba(0,255,255,0.12);padding:3px 8px;border-radius:10px;border:1px solid rgba(0,255,255,0.25);white-space:nowrap;max-width:100%}
.h-time i{font-size:8px}
.h-number{color:rgba(255,255,255,0.35);font-size:9px;font-weight:700;background:rgba(255,255,255,0.05);padding:2px 6px;border-radius:8px;position:absolute;top:8px;left:8px}
.history-item.playing .h-number{color:var(--green);background:rgba(0,255,0,0.15)}
.h-play-btn{background:linear-gradient(135deg,var(--green),var(--cyan));border:none;color:#000;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:13px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transform:translateY(10px)}
.h-play-btn:hover{transform:scale(1.15) translateY(0)}
.h-play-btn:active{transform:scale(0.95) translateY(0)}
.history-item.playing .h-play-btn{background:linear-gradient(135deg,var(--cyan),var(--green));animation:pulse-btn 1.5s infinite;opacity:1;transform:translateY(0)}
@keyframes pulse-btn{0%,100%{box-shadow:0 0 20px rgba(0,255,0,0.5)}
 50%{box-shadow:0 0 35px rgba(0,255,0,0.8)}
}
.history-empty{grid-column:1 / -1;text-align:center;color:rgba(255,255,255,0.4);padding:60px 20px;display:flex;flex-direction:column;align-items:center;gap:16px}
.history-empty i{font-size:64px;color:rgba(0,255,0,0.3);animation:float 3s ease-in-out infinite}
@keyframes float{0%{transform:translateY(100vh) rotate(0deg);opacity:0}
 10%{opacity:0.4}
 90%{opacity:0.4}
 100%{transform:translateY(-100px) rotate(720deg);opacity:0}
}
.history-empty h4{margin:0;color:rgba(255,255,255,0.6);font-size:18px;font-weight:600}
.history-empty p{margin:0;color:rgba(255,255,255,0.3);font-size:14px}
.history-footer{padding:16px 28px;border-top:1px solid rgba(0,255,0,0.1);background:rgba(0,0,0,0.2)}
.scroll-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:rgba(255,255,255,0.3);font-size:12px}
.scroll-hint i{animation:bounce 1.5s infinite;color:var(--green)}
@keyframes bounce{0%,100%{transform:translateY(0)}
 50%{transform:translateY(5px)}
}
@media (max-width:900px){.history-list{grid-template-columns:repeat(2,1fr);gap:14px;padding:16px 20px}
 .history-item{min-height:160px;padding:14px 10px}
 .h-img{width:70px;height:70px;margin-bottom:10px}
 .h-title{font-size:12px}
 .h-play-btn{width:36px;height:36px}
}
@media (max-width:600px){.history-list{grid-template-columns:1fr;gap:12px;padding:14px 16px}
 .history-item{flex-direction:row;text-align:left;min-height:auto;padding:12px;gap:12px}
 .history-item::before{width:4px;height:100%;transform:scaleY(0)}
 .history-item:hover::before{transform:scaleY(1)}
 .h-img{width:56px;height:56px;margin-bottom:0;border-radius:10px}
 .h-info{flex:1;text-align:left}
 .h-meta{justify-content:flex-start;margin-top:6px}
 .h-play-btn{margin-top:0;opacity:1;transform:translateY(0);width:38px;height:38px}
 .history-panel{max-width:95%;max-height:90vh;border-radius:20px}
 .history-header{padding:18px 20px}
 .history-title h3{font-size:18px}
 .h-btn span{display:none}
 .h-btn{padding:10px 14px}
 .history-stats{padding:12px 20px;gap:15px}
 .stat-item{font-size:12px}
}
.history-list{max-height:55vh;overflow-y:auto;overflow-x:hidden}
.history-item{animation:fadeInUp 0.4s ease forwards;opacity:0}
.history-item:nth-child(1){animation-delay:0.05s}
.history-item:nth-child(2){animation-delay:0.08s}
.history-item:nth-child(3){animation-delay:0.11s}
.history-item:nth-child(4){animation-delay:0.14s}
.history-item:nth-child(5){animation-delay:0.17s}
.history-item:nth-child(6){animation-delay:0.20s}
.history-item:nth-child(n+7){animation-delay:0.23s}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
 to{opacity:1;transform:translateY(0)}
}
.collections-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.5rem;padding:1rem 0;max-width:900px;margin:0 auto}
.collection-card{position:relative}
.card-link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.card-image-wrapper{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#f1f5f9;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.collection-card:hover .card-image-wrapper{transform:translateY(-4px)}
.year-badge{position:absolute;top:12px;right:12px;padding:6px 14px;background:rgba(255,255,255,0.95);color:#0f172a;font-size:0.95rem;font-weight:700;border-radius:10px;z-index:2;transition:all 0.25s ease}
.collection-card:hover .year-badge{background:#0f172a;color:#fff;transform:scale(1.05)}
.card-image{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease}
.collection-card:hover .card-image{transform:scale(1.05)}
.card-overlay{position:absolute;inset:0;background:rgba(15,23,42,0.75);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.25s ease}
.collection-card:hover .card-overlay{opacity:1}
.card-button{padding:10px 24px;background:#fff;color:#0f172a;font-size:0.9rem;font-weight:600;border-radius:50px;letter-spacing:0.02em;transition:all 0.2s ease}
.card-button:hover{background:#0f172a;color:#fff;transform:scale(1.03)}
.collection-card:hover{color:#2563eb}
.collection-card{opacity:0;transform:translateY(12px);animation:cardFadeIn 0.4s ease forwards}
.collection-card:nth-child(1){animation-delay:0.05s}
.collection-card:nth-child(2){animation-delay:0.1s}
.collection-card:nth-child(3){animation-delay:0.15s}
.collection-card:nth-child(4){animation-delay:0.2s}
@keyframes cardFadeIn{to{opacity:1;transform:translateY(0)}
}
body.dark .card-image-wrapper{background:#1e293b}
body.dark .year-badge{background:rgba(30,41,59,0.95);color:#f1f5f9;border:1px solid rgba(255,255,255,0.2)}
body.dark .collection-card:hover .year-badge{background:#fff;color:#0f172a}
body.dark .collection-card:hover{color:#60a5fa}
body.dark .card-button{background:#1e293b;color:#f1f5f9;border:1px solid #334155}
body.dark .card-button:hover{background:#334155;color:#fff}
.track-card{animation:cardSlideUp 0.55s ease both;opacity:0;transform:translateY(28px)}
.track-card.visible{opacity:1;transform:translateY(0)}
.track-card:nth-child(1){animation-delay:0.05s}
.track-card:nth-child(2){animation-delay:0.1s}
.track-card:nth-child(3){animation-delay:0.15s}
.track-card:nth-child(4){animation-delay:0.2s}
.track-card:nth-child(5){animation-delay:0.25s}
.track-card:nth-child(6){animation-delay:0.3s}
.track-card::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(0,212,255,0.38),transparent);transform:rotate(45deg) translateX(-100%);transition:transform 0.6s ease;pointer-events:none}
.track-card:hover::after{transform:rotate(45deg) translateX(100%)}
.track-card1{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:all 0.3s}
.track-card1:hover{transform:translateY(-5px);border-color:var(--accent)}
.track-card1.active{border-color:var(--success)}
.track-card1-inner{display:flex;padding:20px;gap:20px}
.track-cover2{position:relative;width:140px;height:140px;flex-shrink:0;border-radius:18px;overflow:hidden;border:2px solid var(--border)}
.track-cover2 img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s}
.track-card1:hover .track-cover1 img{transform:scale(1.1)}
.play-overlay i{font-size:3rem;color:white}
.track-card1:hover .play-overlay{opacity:1}
.play-overlay:hover i{color:var(--accent)}
.note-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:8;overflow:hidden}
.note{position:absolute;color:var(--accent);font-size:1.2rem;opacity:0;animation:noteFloat 2s ease-out forwards}
.track-info1{flex:1;display:flex;flex-direction:column}
.track-header1{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.track-badge1{background:linear-gradient(135deg,var(--accent2),var(--accent-light));color:white;font-size:0.75rem;padding:4px 10px;border-radius:30px;text-transform:uppercase}
.track-badge2{background:linear-gradient(135deg,var(--green),var(--accent-light));color:white;font-size:0.75rem;padding:4px 10px;border-radius:30px;text-transform:uppercase}
.track-artist1{font-size:1.1rem;color:var(--accent-light);margin-bottom:1px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.track-meta1{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:15px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.track-actions1{display:flex;gap:10px;margin-top:5px}
.action-btn{flex:1;background:var(--bg-primary);border:1px solid var(--border);border-radius:40px;padding:10px 5px;color:var(--text-primary);font-size:0.9rem;cursor:pointer;transition:all 0.3s;display:flex;align-items:center;justify-content:center;gap:8px}
.action-btn i{font-size:1rem}
.like-btn i{font-size:1.1rem;transition:all 0.3s ease;color:var(--danger)}
.like-btn.liked i{animation:heartBeat 0.5s ease}
.like-count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Manrope',sans-serif;font-size:0.65rem;font-weight:700;color:#fff;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;opacity:1;transition:all 0.3s ease;pointer-events:none;z-index:2}
@keyframes countPulse{0%{transform:scale(1)}
 50%{transform:scale(1.2)}
 100%{transform:scale(1)}
}
.bass-boost-btn i{color:var(--success)}
.like-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg,rgba(233,69,96,0.18),rgba(233,69,96,0.06));border:1.5px solid rgba(233,69,96,0.45);border-radius:9px;color:var(--pink);cursor:pointer;transition:all 0.3s ease;min-width:80px}
.action-btn:hover{background:var(--bg-hover);border-color:var(--accent);transform:translateY(-2px)}
.like-btn.liked{background:linear-gradient(135deg,#ff4757,#ff6b81);border-color:#ff4757;color:rgba(255,255,255,0.5)}
.bass-boost-btn.active{background:var(--success);border-color:var(--success);color:white}
.bass-boost-btn.active i{color:white}
.bass-slider-row{display:flex;align-items:center;gap:10px;margin-top:0.75rem;padding-top:0.75rem;border-top:1px solid rgba(100,116,139,0.15)}
.bass-slider-row.show{display:flex;align-items:center;gap:15px}
.bass-slider-row input[type=range]{flex:1;height:5px;background:var(--border);border-radius:5px;appearance:none}
.bass-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:white;border-radius:50%;border:2px solid var(--success);cursor:pointer}
.bass-value{color:var(--success);font-size:0.9rem;font-weight:600}
.bass-eq-row{display:none;justify-content:center;align-items:flex-end;gap:4px;height:40px;padding:10px;background:var(--bg-primary);border-top:1px solid var(--border)}
.bass-eq-row.show{display:flex}
.bass-eq-bar{width:3px;background:linear-gradient(to top,#00ffff,#7dd3fc);border-radius:2px;animation:eq-bounce var(--d,0.4s) infinite ease-in-out alternate;opacity:0.85}
@keyframes eq-bounce{from{height:calc(var(--h) * 0.4);opacity:0.6}
 to{height:var(--h);opacity:1}
}
.bass-eq-bar.running{animation:eqAnim 0.6s infinite alternate}
@keyframes eqAnim{0%{height:4px}
 100%{height:28px}
}
@media (max-width:800px){.track-cover1{width:120px;height:120px}
}
@media (max-width:600px){.track-card1-inner{flex-direction:column;align-items:center;text-align:center}
 .track-cover1{width:180px;height:180px}
 .track-header1{justify-content:center}
 .track-meta1{justify-content:center}
 .btn-text{display:none}
 .action-btn{padding:12px 0}
 .action-btn i{font-size:1.3rem;margin:0}
 .stat-pill{width:100%;max-width:250px;justify-content:center}
}
.hero-content{z-index:2;text-align:center;background:linear-gradient(180deg,transparent 0,var(--bg-primary) 100%)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--bg-primary);border:1px solid var(--border);border-radius:50px;padding:8px 25px;margin-bottom:30px;animation:badgePulse 2s infinite}
.hero-badge i{color:var(--accent);font-size:1.2rem}
.hero-badge span{color:var(--text-secondary);font-size:0.95rem;font-weight:500}
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 var(--accent)}
 50%{box-shadow:0 0 20px 0 var(--accent)}
}
.hero-title{margin-bottom:40px}
.title-text{text-transform:uppercase}
.hero-stats{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.hero-stat{display:flex;align-items:center;gap:15px;background:var(--bg-primary);border:1px solid var(--border);border-radius:30px;padding:10px 25px;min-width:140px;transition:all 0.3s;position:relative;overflow:hidden}
.hero-stat::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);transition:left 0.5s;opacity:0.2}
.hero-stat:hover::before{left:100%}
.hero-stat:hover{transform:translateY(-5px);border-color:var(--accent)}
.stat-icon{width:45px;height:45px;background:var(--bg-card);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.stat-icon i{font-size:1.3rem;color:var(--accent)}
.stat-value{font-size:1.6rem;font-weight:700;color:var(--text-primary);line-height:1.2}
.hero-wave{position:absolute;bottom:0;left:0;width:100%;line-height:0;transform:rotate(180deg);opacity:0.1;color:var(--accent)}
.hero-wave svg{position:relative;display:block;width:calc(100% + 1.3px);height:80px}
@media (max-width:1000px){.title-text{font-size:1.8rem}
 .hero-stat{min-width:120px;padding:8px 20px}
 .stat-icon{width:40px;height:40px}
 .stat-value{font-size:1.4rem}
}
@media (max-width:800px){.hero-content{padding:40px 20px 30px}
 .title-text{font-size:1.5rem}
 .hero-stats{gap:15px}
 .hero-stat{width:calc(50% - 15px);justify-content:center}
}
@media (max-width:600px){.hero-badge{padding:5px 15px}
 .hero-badge i{font-size:1rem}
 .hero-badge span{font-size:0.8rem}
 .title-text{font-size:1.2rem;letter-spacing:2px}
 .hero-stats{flex-direction:column;align-items:center}
 .hero-stat{width:100%;max-width:280px}
}
.years-showcase{display:flex;justify-content:center;gap:30px;margin-bottom:70px;flex-wrap:wrap;position:relative;z-index:10}
.year-showcase-card{position:relative;width:182px;height:200px;border-radius:40px;overflow:hidden;text-decoration:none;border:2px solid var(--border);transition:all 0.5s cubic-bezier(0.34,1.56,0.64,1);display:block}
.year-showcase-card:hover{transform:translateY(-15px) scale(1.02);border-color:var(--accent)}
.showcase-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.8s ease;z-index:1}
.year-showcase-card:hover .showcase-image{transform:scale(1.15)}
.showcase-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(180deg,rgba(0,0,0,0.2) 0,rgba(0,0,0,0.8) 100%);z-index:2;transition:all 0.4s}
.year-showcase-card:hover .showcase-overlay{background:linear-gradient(180deg,rgba(0,0,0,0.3) 0,rgba(0,0,0,0.9) 100%)}
.showcase-content{position:absolute;bottom:0;left:0;width:100%;padding:30px 25px;z-index:3;text-align:left;transform:translateY(0);transition:transform 0.4s}
.year-showcase-card:hover .showcase-content{transform:translateY(-10px)}
.showcase-year{display:block;font-size:3.5rem;font-weight:900;color:white;line-height:1;margin-bottom:8px;text-shadow:0 5px 15px rgba(0,0,0,0.5);letter-spacing:2px}
.showcase-tracks{display:inline-block;font-size:1rem;color:rgba(255,255,255,0.9);background:rgba(0,0,0,0.4);padding:8px 20px;border-radius:50px;border:1px solid rgba(255,255,255,0.2);font-weight:500;letter-spacing:0.5px}
.year-showcase-card:hover{opacity:0.4}
@media (max-width:1000px){.year-showcase-card{width:240px;height:300px}
 .showcase-year{font-size:3rem}
}
@media (max-width:800px){.years-showcase{gap:20px}
 .year-showcase-card{width:200px;height:250px;border-radius:30px}
 .showcase-year{font-size:2.5rem}
 .showcase-tracks{font-size:0.9rem;padding:6px 15px}
 .showcase-content{padding:20px}
}
@media (max-width:600px){.years-showcase{gap:15px}
 .year-showcase-card{width:160px;height:200px;border-radius:25px}
 .showcase-year{font-size:2rem;margin-bottom:5px}
 .showcase-tracks{font-size:0.8rem;padding:5px 12px}
 .showcase-content{padding:15px}
}
@media (max-width:480px){.year-showcase-card{width:140px;height:180px;border-radius:20px}
 .showcase-year{font-size:1.6rem}
 .showcase-tracks{font-size:0.7rem;padding:4px 10px}
}
.header-eyebrow{font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:14px}
.mini-player.right{left:1144px}
.footer{position:relative;z-index:1;margin-top:auto}
.footer::before{content:'';display:block;height:1px;background:linear-gradient(90deg,transparent 0,rgba(79,156,255,.35) 30%,rgba(181,111,255,.3) 60%,transparent 100%);animation:borderShimmer 4s ease-in-out infinite alternate}
@keyframes borderShimmer{0%{opacity:.6}
 100%{opacity:1}
}
.footer-inner{background:rgba(0,0,0,0.35);padding:40px 24px 0}
.footer-row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--border)}
@media (max-width:700px){.footer-row{grid-template-columns:1fr;gap:28px}
}
.footer-brand .footer-logo-link{display:inline-block;margin-bottom:20px;transition:opacity .25s}
.footer-logo-link:hover{opacity:.8}
.footer-logo-link img{height:36px;width:auto;object-fit:contain;filter:brightness(1.05)}
.footer-logo-text{font-family:'Unbounded',sans-serif;font-size:1.2rem;font-weight:800;letter-spacing:.05em;background:linear-gradient(135deg,var(--text1) 40%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-platforms{display:flex;flex-direction:column;gap:8px}
.platform-link{display:inline-flex;align-items:center;opacity:.65;transition:opacity .25s,transform .25s;width:fit-content}
.platform-link:hover{opacity:1;transform:translateX(4px)}
.platform-link img{height:22px;width:auto;object-fit:contain;filter:brightness(1.1)}
.footer-col-title{font-family:'Unbounded',sans-serif;font-size:.65rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);display:flex;align-items:center;gap:8px;margin-bottom:16px}
.footer-col-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:4px}
.footer-links li a{display:inline-flex;align-items:center;gap:9px;padding:7px 10px 7px 0;font-size:.78rem;font-weight:500;color:var(--text2);text-decoration:none;border-radius:var(--r-sm);transition:color .2s ease,padding-left .2s ease;position:relative}
.footer-links li a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:background .2s,box-shadow .2s,transform .2s}
.footer-links li a:hover{color:var(--text1);padding-left:6px}
.footer-links li a:hover::before{background:var(--accent);transform:scale(1.4)}
.footer-links li a .link-icon{font-size:.72rem;color:var(--text3);transition:color .2s}
.footer-links li a:hover .link-icon{color:var(--accent)}
.footer-info-block{display:flex;flex-direction:column;gap:12px}
.footer-site-name{font-family:'Unbounded',sans-serif;font-size:.85rem;font-weight:700;background:linear-gradient(135deg,var(--text1) 50%,var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-copy{font-size:.72rem;color:var(--text2);line-height:1.6}
.footer-copy strong{color:var(--text1);font-weight:600}
.footer-upd{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(0,240,212,.08);border:1px solid rgba(0,240,212,.22);border-radius:50px;font-size:.62rem;font-weight:600;letter-spacing:.06em;color:var(--green);width:fit-content;animation:updPulse 3s ease-in-out infinite}
.footer-upd::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
@keyframes updPulse{0%,100%{box-shadow:0 0 0 rgba(0,240,212,0)}
 50%{box-shadow:0 0 14px rgba(0,240,212,0.2)}
}
.footer-bottom{max-width:1100px;margin:0 auto;padding:16px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom-left{font-size:.68rem;color:var(--text3);letter-spacing:.04em}
.footer-bottom-left span{color:var(--accent);font-weight:600}
.footer-socials{display:flex;gap:8px}
.footer-social-btn{width:34px;height:34px;border-radius:50%;background:var(--glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:.78rem;text-decoration:none;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.footer-social-btn::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(79,156,255,.25),transparent);opacity:0;transition:opacity .2s}
.footer-social-btn:hover{transform:translateY(-3px) scale(1.12);border-color:var(--border-h);color:var(--text1)}
.footer-social-btn:hover::before{opacity:1}
.footer-social-btn.tg:hover{border-color:rgba(41,182,246,.5);color:#29b6f6}
.footer-social-btn.vk:hover{border-color:rgba(100,181,246,.5);color:#64b5f6}
.footer-social-btn.mail:hover{border-color:rgba(255,183,77,.5);color:#ffb74d}
.footer-social-btn.wa:hover{border-color:rgba(102,187,106,.5);color:#66bb6a}
.player-hidden{opacity:0;pointer-events:none;transform:translateY(100px);transition:.3s ease}
.stat-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;border-radius:50px;font-family:'Unbounded',sans-serif;font-size:.58rem;font-weight:600;letter-spacing:.05em;border:1px solid;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.stat-pill:hover{transform:translateY(-3px)}
.sp-green{color:var(--green);border-color:rgba(0,240,212,.32);background:rgba(0,240,212,.06)}
.sp-yellow{color:var(--yellow);border-color:rgba(255,204,68,.35);background:rgba(255,204,68,.07);animation:ypulse 2.5s ease-in-out infinite}
.sp-yellow::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--yellow);;animation:blink 1.8s ease-in-out infinite}
.sp-yellow:hover{animation:none}
@keyframes ypulse{50%{box-shadow:0 0 16px rgba(255,204,68,0.2)}
}
.page{position:relative;z-index:1;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.g-card{background:var(--glass-bg);border:1px solid var(--glass-border);position:relative;overflow:hidden;animation:fadeUp .55s ease both}
.g-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);pointer-events:none;border-radius:20px}
.g-card:hover{background:var(--glass-hover-bg);border-color:rgba(255,255,255,.22);transition:all .3s ease}
.collection-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
@media (max-width:600px){.collection-grid{grid-template-columns:1fr 1fr}
 }
.coll-item{border-radius:20px;overflow:hidden;position:relative;aspect-ratio:1 / 1.1;cursor:pointer;animation:fadeUp .55s ease both}
.coll-item:nth-child(1){animation-delay:.05s}
.coll-item:nth-child(2){animation-delay:.12s}
.coll-item:nth-child(3){animation-delay:.19s}
.coll-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;filter:brightness(.75) saturate(1.2)}
.coll-item:hover img{transform:scale(1.07);filter:brightness(.85) saturate(1.4)}
.coll-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.78) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:18px 16px;gap:4px}
.coll-year{font-family:'Unbounded',sans-serif;font-size:.6rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.coll-title{font-family:'Unbounded',sans-serif;font-size:.92rem;font-weight:600;line-height:1.25;color:#fff}
.coll-arrow{position:absolute;top:14px;right:14px;width:32px;height:32px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:rgba(255,255,255,.7);opacity:0;transform:scale(.8);transition:all .3s cubic-bezier(.34,1.56,.64,1)}
.coll-item:hover .coll-arrow{opacity:1;transform:scale(1)}
.coll-border{position:absolute;inset:0;border-radius:var(--radius);border:1px solid rgba(255,255,255,.12);pointer-events:none;transition:border-color .3s}
.coll-item:hover .coll-border{border-color:rgba(79,156,255,.35)}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 rgba(79,156,255,0)}
 50%{box-shadow:0 0 18px rgba(79,156,255,.35)}
}
.tag{padding:3px 10px;border-radius:50px;font-size:.6rem;font-weight:600;letter-spacing:.05em;border:1px solid}
.software-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:500px){.software-grid{grid-template-columns:1fr}
 }
.sw-card{padding:20px;display:flex;gap:16px;align-items:flex-start;border-radius:20px;transition:all .3s ease;animation:fadeUp .5s ease both;cursor:default}
.sw-card:nth-child(1){animation-delay:.1s}
.sw-card:nth-child(2){animation-delay:.18s}
.sw-thumb{width:64px;height:64px;border-radius:14px;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center}
.sw-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sw-body{flex:1;min-width:0}
.dark .sw-badge{display:inline-block;padding:2px 10px;border-radius:50px;font-size:.6rem;font-weight:600;letter-spacing:.06em;margin-bottom:6px;background:rgba(79,156,255,.12);border:1px solid rgba(79,156,255,.3);color:#a8d4ff}
.sw-badge{display:inline-block;padding:2px 10px;border-radius:50px;font-size:.6rem;font-weight:600;letter-spacing:.06em;margin-bottom:6px;background:rgba(79,156,255,.12);border:1px solid rgba(79,156,255,.9);color:#000}
.sw-name{font-family:'Unbounded',sans-serif;font-size:.85rem;font-weight:600;color:var(--text-1);margin-bottom:4px}
.sw-desc{font-size:.75rem;color:var(--text-2);line-height:1.5;margin-bottom:14px}
.dark .sw-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:10px;background:linear-gradient(135deg,rgba(79,156,255,.25),rgba(181,111,255,.18));border:1px solid rgba(79,156,255,.4);color:#fff;font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.sw-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:10px;background:linear-gradient(135deg,rgba(79,156,255,.52),rgba(181,111,255,.76));border:1px solid rgba(79,156,255,.7);color:#000;font-family:'Unbounded',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,4);position:relative;overflow:hidden}
.sw-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .45s}
.sw-btn:hover::before{left:100%}
.sw-btn:hover{transform:translateY(-2px) scale(1.04)}
.tools-header{padding:18px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation-delay:.06s;border-radius:20px;background:linear-gradient(135deg,rgba(0,240,212,.06),rgba(79,156,255,.05))}
.tools-title{font-family:'Unbounded',sans-serif;font-size:1rem;font-weight:600;color:var(--text-1)}
.tools-chips{display:flex;gap:8px;flex-wrap:wrap}
.tools-chip{padding:4px 14px;border-radius:50px;font-size:.65rem;font-weight:600;letter-spacing:.05em;border:1px solid;transition:all .2s}
.dark .tools-chip{padding:4px 14px;border-radius:50px;font-size:.65rem;font-weight:600;letter-spacing:.05em;border:1px solid;transition:all .2s;background:linear-gradient(135deg,rgba(0,240,212,.06),rgba(79,156,255,.05))}
.dark .chip-srs{color:#00f0d4;border-color:rgba(0,240,212,.35);background:rgba(0,240,212,.08)}
.dark .chip-fl{color:#ffb74d;border-color:rgba(255,183,77,.35);background:rgba(255,183,77,.07)}
.dark .chip-info{color:#b56fff;border-color:rgba(181,111,255,.35);background:rgba(181,111,255,.07)}
.chip-srs{color:#00f0d4;border-color:rgba(0,240,212,.95);background:rgba(0,240,212,.08)}
.chip-fl{color:#ffb74d;border-color:rgba(255,183,77,.95);background:rgba(255,183,77,.07)}
.chip-info{color:#b56fff;border-color:rgba(181,111,255,.95);background:rgba(181,111,255,.07)}
 html:not(.dark) body::before{background:radial-gradient(ellipse at 15% 20%,rgba(124,58,237,0.08) 0,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(8,145,178,0.06) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(219,39,119,0.04) 0,transparent 60%)}
 body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse at 15% 20%,rgba(139,92,246,0.12) 0,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(6,182,212,0.1) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(244,114,182,0.06) 0,transparent 60%);animation:bgPulse 15s ease-in-out infinite}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");background-size:200px 200px;opacity:0.4;mix-blend-mode:overlay}
.container{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.collections-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:36px}
@media(max-width:900px){.collections-grid{grid-template-columns:repeat(2,1fr)}
}
.card-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,255,255,.85),rgba(233,69,96,.75));display:flex;align-items:center;justify-content:center;opacity:0;transition:all .4s}
.collection-card:hover .card-overlay{opacity:1}
.card-button{background:linear-gradient(135deg,#fff,#f5f5f5);color:var(--pink);padding:8px 22px;border-radius:25px;font-weight:800;font-size:.8rem;cursor:pointer;border:2px solid #fff;letter-spacing:1px;text-transform:uppercase;font-family:'Orbitron',sans-serif;transition:all .3s}
.card-button:hover{background:linear-gradient(135deg,var(--pink),#d63a50);color:#fff;transform:scale(1.1)}
@keyframes titleGlow{0%,100%{filter:drop-shadow(0 0 20px rgba(77,166,255,0.6));letter-spacing:12px}
 50%{filter:drop-shadow(0 0 35px rgba(77,166,255,1));letter-spacing:14px}
}
@keyframes borderShimmer{0%{opacity:0.6}
 100%{opacity:1}
}
.section-title{font-family:'Orbitron',sans-serif;font-size:1rem;letter-spacing:.3em;color:rgba(0,255,255,.6);text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:14px}
.section-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,255,255,.3),transparent)}
.tracks-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:900px){.tracks-grid{grid-template-columns:1fr}
}
body.modal-open1 .navbar{display:none}
body.modal-open1 .navbar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:opacity .3s ease,transform .3s ease}
body.modal-open .navbar{display:none}
body.modal-open .navbar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:opacity .3s ease,transform .3s ease}
.track-card{display:flex;flex-direction:row;height:215px;animation:cardSlide 0.6s cubic-bezier(0.4,0,0.2,1) forwards;opacity:0;position:relative}
.track-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00ffff,transparent);opacity:0;transition:opacity 0.3s}
@keyframes cardSlide{from{opacity:0;transform:translateY(28px)}
 to{opacity:1;transform:translateY(0)}
}
@keyframes cardSlideUp{to{opacity:1;transform:translateY(0)}
}
.track-card:nth-child(1){animation-delay:0.05s}
.track-card:nth-child(2){animation-delay:0.1s}
.track-card:nth-child(3){animation-delay:0.15s}
.track-card:nth-child(4){animation-delay:0.2s}
.track-card:nth-child(5){animation-delay:0.25s}
.track-card.active{border-color:rgba(0,255,0,0.6)}
.track-cover-wrapper{position:relative;width:210px;height:210px;overflow:hidden;background:linear-gradient(135deg,#0f3460,#1a5f7a);flex-shrink:0}
.track-cover-wrapper img{width:112%;height:100%;object-fit:fill}
.track-cover{width:100%;height:100%;object-fit:cover;transition:all 0.4s;display:block}
.track-cover{transform:scale(1.12)}
.track-card.active .track-cover{animation:coverPulse 1.8s ease-in-out infinite;filter:brightness(0.55) saturate(1.4)}
@keyframes coverPulse{0%,100%{box-shadow:inset 0 0 20px rgba(0,255,0,0.3)}
 50%{box-shadow:inset 0 0 50px rgba(0,255,0,0.6)}
 }
.play-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;opacity:0;transition:all 0.3s;cursor:pointer}
.track-card:hover .play-overlay{opacity:1;background:rgba(0,0,0,.55)}
.track-card.active .play-overlay{opacity:1;background:rgba(0,0,0,.4)}
.play-icon-wrap{transform:scale(0.9);transition:transform 0.2s}
.track-card.active .play-icon-wrap{opacity:0}
.play-button{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#00ffff,#00a8ff);display:flex;align-items:center;justify-content:center;color:#0a0e17;font-size:1.4rem;transition:all 0.2s}
.play-button:hover{transform:scale(1.08)}
@keyframes playPulse{0%,100%{transform:scale(1)}
 50%{transform:scale(1.1)}
}
.play-button{transform:scale(1.25);animation:none}
.playing-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:900;letter-spacing:0.2em;color:var(--green);animation:labelFloat 2.5s ease-in-out infinite;transition:opacity 0.2s;z-index:8;white-space:nowrap;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid rgba(0,255,255,0.3);opacity:0;color:#00ffff;background:rgba(0,255,255,0.15)}
.track-card.active .playing-label{opacity:1}
.playing-label11{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.15);color:#00ffff;font-size:0.7rem;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid rgba(0,255,255,0.3);opacity:0;transition:opacity 0.2s;z-index:8;white-space:nowrap}
@keyframes labelFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}
 50%{transform:translate(-50%,-54%) scale(1.05)}
}
.track-card.active .playing-label{opacity:1}
.track-card.active .playing-label11{opacity:1}
.notes-container{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
.note{position:absolute;font-size:22px;color:var(--cyan);animation:noteFloat 2.2s ease-out forwards}
@keyframes noteFloat{0%{opacity:1;transform:translate(0,0) rotate(0deg)}
 100%{opacity:0;transform:translate(var(--tx,40px),var(--ty,-60px)) rotate(20deg)}
}
.track-cover-wrapper.playing{border:3px solid var(--green);animation:coverGlow 1.5s ease-in-out infinite}
@keyframes coverGlow{0%,100%{box-shadow:0 0 20px rgba(0,255,0,0.5)}
 50%{box-shadow:0 0 50px rgba(0,255,0,0.9)}
}
.track-info{padding:16px 16px 14px;flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;overflow:hidden}
.track-header{display:flex;flex-direction:column;gap:6px}
.dark .track-album-badge{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:.1em;font-weight:700;gap:6px;font-size:0.75rem;color:#94a3b8;background:rgba(100,116,139,0.15);padding:3px 10px;border-radius:20px;border:1px solid rgba(100,116,139,0.2)}
.track-album-badge{font-family:'Orbitron',sans-serif;font-size:0.65rem;letter-spacing:0.1em;font-weight:700;color:var(--cyan12);text-transform:uppercase;background:linear-gradient(135deg,rgba(30,144,255,0.88),rgba(30,144,255,0.26));border:1.5px solid rgba(0,255,255,0.4);padding:3px 10px;border-radius:6px;width:fit-content;transition:all 0.3s}
.track-album-badge:hover{background:linear-gradient(135deg,rgba(0,255,255,.3),rgba(0,255,255,.12));border-color:rgba(0,255,255,0.7)}
.track-title{font-family:'Orbitron',sans-serif;font-size:0.88rem;font-weight:700;color:#fff;line-height:1.3;letter-spacing:0.04em}
.track-meta{display:flex;gap:10px;padding:10px 0;border-top:1.5px solid rgba(0,255,255,.18);border-bottom:1.5px solid rgba(0,255,255,.18)}
.meta-item{display:flex;flex-direction:column;font-size:0.75rem}
.dark .meta-label{color:#64748b;font-weight:500}
.meta-label{color:rgba(0,0,0,.75);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.dark .meta-data{color:#cbd5e1;font-weight:600;font-size:0.85rem}
.dark .meta-value{color:#cbd5e1;font-weight:600;font-size:0.85rem}
.meta-value{font-weight:800;color:var(--cyan11);font-size:.80rem;text-shadow:0 0 8px rgba(30,144,255,.5)}
.meta-data{font-weight:800;color:var(--cyan11);font-size:.80rem;text-shadow:0 0 8px rgba(30,144,255,.5)}
.track-actions{display:flex;gap:8px;align-items:stretch}
.track-actions .download-btn,.track-actions .bass-boost-btn,.track-actions{height:42px}
.track-actions .download-btn{display:flex;align-items:center;justify-content:center}
.download-btn{flex:1;padding:9px 14px;border-radius:9px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:5px;font-size:0.8rem;border-radius:10px;transition:all 0.2s;background:rgba(30,41,59,0.8);color:#e2e8f0;border:1px solid rgba(100,200,255,0.2)}
.download-btn:hover{background:linear-gradient(135deg,#00ffff22,#00a8ff22);border-color:#00ffff;color:#00ffff;transform:translateY(-1px)}
.bass-boost-btn{width:42px;height:42px;flex-shrink:0;background:linear-gradient(135deg,rgba(0,255,255,0.15),rgba(0,255,255,0.06));border:1.5px solid rgba(0,255,255,0.45);color:var(--cyan);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all 0.3s;position:relative;overflow:hidden}
.bass-boost-btn:hover{background:rgba(100,200,255,0.15);border-color:rgba(100,200,255,0.5);transform:translateY(-1px)}
.bass-boost-btn.active{background:linear-gradient(135deg,rgba(0,255,0,0.3),rgba(0,255,0,0.12));color:var(--green);border-color:var(--green);animation:btnPulse 0.7s ease-in-out infinite}
@keyframes btnPulse{0%,100%{transform:scale(1)}
 50%{transform:scale(1.1)}
}
.bass-slider-row{display:none;align-items:center;gap:8px;padding:4px 2px 0}
.bass-slider-row.show{display:flex}
.bass-slider-row input[type="range"]{appearance:none;flex:1;height:4px;border-radius:4px;outline:none;cursor:pointer;background:rgba(0,255,0,.15)}
.bass-slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--green);cursor:pointer}
.bass-db-val{font-family:'Orbitron',sans-serif;font-size:.55rem;color:var(--green);min-width:32px;text-align:right}
.like-btn:hover{background:linear-gradient(135deg,rgba(233,69,96,0.3),rgba(233,69,96,0.12));border-color:rgba(233,69,96,0.8);transform:translateY(-2px)}
@keyframes heartBeat{0%,100%{transform:scale(1)}
 25%{transform:scale(1.4)}
 50%{transform:scale(1.15)}
}
#bassOverlay{position:fixed;inset:0;pointer-events:none;z-index:9998}
#bassOverlay.burst{animation:bRipple .7s ease-out forwards}
@keyframes bRipple{0%{box-shadow:inset 0 0 0 0 rgba(0,255,0,0.45)}
 45%{box-shadow:inset 0 0 120px 40px rgba(0,255,0,0.2)}
 100%{box-shadow:inset 0 0 0 0 rgba(0,255,0,0)}
}
.mini-player{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(0px);width:420px;max-width:calc(100vw - 24px);background:rgba(20,20,35,0.95);border:2px solid rgba(0,255,255,0.3);border-radius:22px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;z-index:9999;overflow:hidden;transition:all 0.3s ease;will-change:transform}
.mini-player.minimized{padding:10px 14px;border-radius:18px;gap:1px}
.mini-player.minimized .player-controls,.mini-player.minimized .player-progress-wrap,.mini-player.minimized .player-time-row,.mini-player.minimized .player-bass-row,.mini-player.minimized .player-eq{max-height:0!important;opacity:0!important;overflow:hidden;margin:0!important;padding:0!important;pointer-events:none}
.mini-player .player-controls,.mini-player .player-progress-wrap,.mini-player .player-time-row,.mini-player .player-bass-row,.mini-player .player-eq{max-height:80px;opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease .05s,padding .4s,margin .4s}
#pageWaves{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
@keyframes pageWaveAnim{0%{transform:translate(-50%,-50%) scale(0.05);opacity:0.8}
 60%{opacity:0.3}
 100%{transform:translate(-50%,-50%) scale(1);opacity:0}
}
.player-top{display:flex;gap:12px;align-items:center}
.player-cover{width:52px;height:52px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#0f3460,#1a5f7a);border:2px solid rgba(0,255,255,0.4);flex-shrink:0;position:relative}
.player-cover img{width:100%;height:100%;object-fit:cover}
.player-cover.playing img{animation:coverSpin 4s linear infinite}
@keyframes coverSpin{to{transform:rotate(360deg)}
}
.player-cover.playing{border-radius:50%;border-color:rgba(0,255,0,.6)}
.player-info{flex:1;min-width:0}
.player-title{font-family:'Orbitron',sans-serif;font-size:.78rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.04em}
.player-album-tag{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.08em;background:rgba(0,0,0,0.18);color:var(--gold);padding:2px 7px;border-radius:5px;border:1px solid rgba(0,255,255,0.95);display:inline-block;margin:2px 0;text-transform:uppercase}
.dark .player-album-tag{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.08em;background:rgba(0,255,255,0.18);color:var(--cyan);padding:2px 7px;border-radius:5px;border:1px solid rgba(0,255,255,0.35);display:inline-block;margin:2px 0;text-transform:uppercase}
.player-artist{font-size:.65rem;color:rgba(255,255,255,0.5);text-transform:uppercase;letter-spacing:.04em}
.player-kontrolar{display:none;align-items:center;gap:5px;margin-top:2px;font-family:'Orbitron',sans-serif;font-size:.68rem;letter-spacing:.15em;color:var(--green)}
.mini-player.playing .player-kontrolar{display:flex}
.pk-dot{width:5px;height:5px;border-radius:50%;background:var(--green);animation:blink .7s infinite;flex-shrink:0}
.player-minimize{width:30px;height:30px;background:linear-gradient(135deg,rgba(233,69,96,0.18),rgba(233,69,96,0.06));border:1.5px solid rgba(233,69,96,0.45);color:var(--pink);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:0.9rem;transition:all 0.3s;flex-shrink:0}
.player-minimize:hover{background:linear-gradient(135deg,var(--pink),#d63a50);color:#fff;transform:rotate(180deg)}
.player-progress-wrap{width:100%;height:5px;background:rgba(0,255,255,.12);border-radius:3px;overflow:hidden;cursor:pointer}
.player-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green),var(--gold));border-radius:3px;transition:width .1s linear}
.player-time-row{display:flex;justify-content:space-between;font-family:'Orbitron',sans-serif;font-size:.55rem;color:rgba(0,255,255,.6);margin-top:-4px}
.player-controls{display:flex;gap:9px;justify-content:center;align-items:center}
.ctrl-btn{width:40px;height:40px;background:linear-gradient(135deg,rgba(0,255,255,.15),rgba(0,255,255,.06));border:1.5px solid rgba(0,255,255,.4);color:var(--cyan);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:all .3s}
.ctrl-btn:hover{background:linear-gradient(135deg,rgba(0,255,255,.28),rgba(0,255,255,.12));border-color:rgba(0,255,255,.8);transform:translateY(-2px)}
.ctrl-btn.play-pause{width:46px;height:46px;font-size:1.1rem;border-width:2px}
.player-bass-row{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 12px;border:1px solid rgba(0,255,255,.1)}
.player-bass-btn{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.12em;font-weight:700;padding:5px 12px;border-radius:8px;border:1.5px solid rgba(0,255,255,.35);background:rgba(0,255,255,.1);color:var(--cyan);cursor:pointer;transition:all .25s;white-space:nowrap}
.player-bass-btn:hover{border-color:var(--cyan);background:rgba(0,255,255,.2)}
.player-bass-btn.on{border-color:var(--green);background:rgba(0,255,0,.18);color:var(--green);animation:btnPulse .8s ease-in-out infinite}
.player-bass-slider{appearance:none;flex:1;height:4px;border-radius:4px;outline:none;cursor:pointer;background:rgba(0,255,0,.15)}
.player-bass-slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--green);cursor:pointer}
.player-bass-db{font-family:'Orbitron',sans-serif;font-size:.55rem;color:var(--green);min-width:36px;text-align:right}
.dl-overlay{position:fixed;inset:0;z-index:10000;background:rgba(20,20,35,0.95);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.dl-overlay.show{opacity:1;pointer-events:all}
.dl-modal{background:rgba(20,20,35,0.85);box-shadow:0 0 30px rgba(0,0,0,0.3);border:2px solid rgba(0,255,255,.25);border-radius:24px;padding:30px 26px 24px;width:min(340px,90vw);text-align:center;transform:scale(.88) translateY(24px);transition:transform .38s cubic-bezier(.34,1.56,.64,1)}
.dl-overlay.show .dl-modal{transform:scale(1) translateY(0)}
.dl-stage{width:140px;height:140px;margin:0 auto 18px;position:relative;display:flex;align-items:center;justify-content:center}
.dl-ring{position:absolute;border-radius:50%;animation:orbitSpin var(--od,6s) linear infinite}
.dl-ring:nth-child(1){width:138px;height:138px;border:1.5px dashed rgba(0,255,255,.2);--od:9s}
.dl-ring:nth-child(2){width:118px;height:118px;border:1.5px dashed rgba(0,255,0,.18);--od:6s;animation-direction:reverse}
.dl-ring:nth-child(3){width:100px;height:100px;border:1px dashed rgba(233,69,96,.15);--od:4s}
@keyframes orbitSpin{to{transform:rotate(360deg)}
}
.dl-disc{width:88px;height:88px;border-radius:50%;overflow:hidden;border:2px solid rgba(0,255,255,.5)}
.dl-disc img{width:100%;height:100%;object-fit:cover;display:block;animation:spin 3s linear infinite}
.dl-piece{position:absolute;font-size:1.15rem;opacity:0;z-index:3;animation:pFly var(--pd,.7s) var(--pdel,0s) ease-out forwards}
@keyframes pFly{0%{opacity:0;transform:translate(var(--px),var(--py)) scale(0.15) rotate(220deg)}
 60%{opacity:1}
 100%{opacity:0;transform:translate(0,0) scale(1) rotate(0deg)}
}
.dl-title{font-family:'Orbitron',sans-serif;font-size:1rem;letter-spacing:.2em;color:var(--cyan);margin-bottom:5px;font-weight:700}
.dl-track-name{font-family:'Rajdhani',sans-serif;font-size:.85rem;color:rgba(255,255,255,.8);margin-bottom:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl-status{font-family:'Orbitron',sans-serif;font-size:.58rem;letter-spacing:.1em;color:rgba(255,255,255,.4);height:15px;margin-bottom:10px;transition:color .3s}
.dl-status.ready{color:var(--green);text-shadow:0 0 10px rgba(0,255,0,.6)}
.dl-prog-wrap{width:100%;height:4px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-bottom:18px}
.dl-prog-fill{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--green));border-radius:4px;transition:width .1s}
.dl-btns{display:flex;gap:10px;justify-content:center}
.dl-cancel{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.1em;padding:10px 18px;border-radius:12px;border:1.5px solid rgba(255,255,255,.1);background:none;color:rgba(255,255,255,.4);cursor:pointer;transition:all .2s}
.dl-cancel:hover{border-color:rgba(255,255,255,.3);color:#fff}
.dl-go{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:.1em;padding:10px 24px;border-radius:12px;border:none;background:linear-gradient(120deg,#0a8a0a,var(--green));color:#000;cursor:pointer;font-weight:700;opacity:0;pointer-events:none;transform:scale(.85);transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.dl-go.show{opacity:1;pointer-events:all;transform:scale(1)}
.dl-go:hover{transform:scale(1.06)!important}
.bass-popup{position:fixed;top:50%;left:50%;z-index:10001;display:flex;flex-direction:column;align-items:center;gap:24px;animation:popupIn .5s cubic-bezier(.34,1.56,.64,1),popupOut .4s ease 4.6s forwards;pointer-events:none}
@keyframes popupIn{from{transform:translate(-50%,-50%) scale(0.2);opacity:0}
 to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes popupOut{to{transform:translate(-50%,-50%) scale(0.2);opacity:0}
}
.speaker-wave{position:relative;width:90px;height:90px;display:flex;align-items:center;justify-content:center}
.speaker-icon{font-size:55px;color:var(--green);text-shadow:0 0 50px rgba(255,255,0,1);z-index:2;animation:speakerPulse .8s ease-in-out infinite}
@keyframes speakerPulse{0%,100%{transform:scale(1)}
 50%{transform:scale(1.15)}
}
.wave{position:absolute;border-radius:50%;opacity:0;animation:waveOut .8s ease-out}
.wave:nth-child(1){width:100px;height:100px;border:2.5px solid var(--green)}
.wave:nth-child(2){width:150px;height:150px;border:2px solid rgba(0,255,0,.6);animation-delay:.2s}
.wave:nth-child(3){width:200px;height:200px;border:1.5px solid rgba(0,255,0,.3);animation-delay:.4s}
@keyframes waveOut{from{transform:scale(0.2);opacity:1}
 to{transform:scale(1.8);opacity:0}
}
.popup-text{background:linear-gradient(135deg,rgba(0,255,0,.92),rgba(0,200,200,.85));color:#000;padding:18px 36px;border-radius:14px;font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;border:2px solid rgba(0,255,255,.9)}
.bass-eq-row{display:none;align-items:flex-end;gap:3px;height:22px;padding:2px 0}
.bass-eq-row.show{display:flex}
.bass-eq-bar{width:4px;border-radius:3px;background:linear-gradient(to top,var(--green),rgba(0,255,0,.4));animation:eqBeat var(--d,.4s) ease-in-out infinite alternate;animation-play-state:paused}
.bass-eq-bar.running{animation-play-state:running}
@keyframes eqBeat{from{height:3px;opacity:0.5}
 to{height:var(--h,16px);opacity:1}
}
.player-eq{display:none;align-items:flex-end;gap:3px;height:24px}
.mini-player.bass-on .player-eq{display:flex}
.mini-player.bass-on.playing .player-eq .peq-bar{animation-play-state:running}
.peq-bar{width:4px;border-radius:3px;background:linear-gradient(to top,var(--green),var(--cyan));animation:eqBeat var(--d,.4s) ease-in-out infinite alternate;animation-play-state:paused}
audio{display:none}
h1{color:#fff;font-size:3rem;font-weight:300;line-height:1.5;text-transform:uppercase;white-space:nowrap;overflow:hidden;position:relative;width:650px;height:4.5rem}
h1 span.prefix{font-size:40px;margin-left:40px;position:relative;cursor:pointer;transition:color 0.3s ease}
h1 span.prefix:hover{color:#7c5ce0}
.wrap{background:rgba(0,0,0,0.01 );background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));border:1px solid rgba(255,255,255,0.15);box-shadow:0 8px 32px rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.18 );padding:30px}
.btn,.btn-submit,.btn-primary{position:relative;overflow:hidden;background:var(--gradient-primary);border:none;border-radius:var(--radius-sm);color:white;font-weight:700;cursor:pointer;transition:var(--transition)}
.button,.btn,button:not(.color-btn):not([class*=fr]):not(.search-btn):not([class*=owl-]),html input[type="button"],input[type="submit"]{display:inline-block;text-align:center;padding:0 20px;height:40px;line-height:40px;border-radius:20px;cursor:pointer;font-weight:400;box-shadow:none;font-size:15px}
.header-eyebrow span{display:flex;align-items:center;gap:6px}
.eyebrow-dot{width:4px;height:4px;border-radius:50%;background:var(--green);animation:blink 2s ease-in-out infinite}
.header-eyebrow::before,.header-eyebrow::after{content:'';flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(79,156,255,.5))}
h1{color:#fff;font-size:3rem;font-weight:300;line-height:1.5;text-transform:uppercase;white-space:nowrap;overflow:hidden;position:relative;width:650px;height:4.5rem}
h1 span.prefix{font-size:40px;margin-left:40px;position:relative;cursor:pointer;transition:color 0.3s ease}
h1 span.prefix:hover{color:#7c5ce0}
.dark .wrap{background:rgba(0,0,0,0.01 );background:rgba(20,20,35,0.85);box-shadow:0 0 30px rgba(0,0,0,0.3);border:1px solid rgba(255,255,255,0.18 );padding:30px}
.wrap{background:rgba(0,0,0,0.01 );border:1px solid rgba(255,255,255,0.18 );padding:30px}
.modal{position:fixed;top:0;left:0;z-index:1050;display:none;width:100%;height:100%;overflow:hidden;outline:0}
.modal-dialog{position:relative;width:auto;margin:0.5rem;pointer-events:none}
.modal.fade .modal-dialog{transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out,-webkit-transform 0.3s ease-out;-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}
@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}
}
.modal.show .modal-dialog{-webkit-transform:none;transform:none}
.modal-dialog-scrollable{display:-ms-flexbox;display:flex;max-height:calc(100% - 1rem)}
.modal-dialog-scrollable .modal-content{max-height:calc(100vh - 1rem);overflow:hidden}
.modal-dialog-scrollable .modal-header{-ms-flex-negative:0;flex-shrink:0}
.modal-dialog-scrollable .modal-body{overflow-y:auto}
.modal-content{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;pointer-events:auto;background-color:#fff;background-clip:padding-box;outline:0}
.modal-backdrop{position:fixed;top:0;left:0;z-index:1000;width:100vw;height:100vh;background-color:#000}
.modal-backdrop.fade{opacity:0}
.modal-backdrop.show{opacity:0.5}
.modal-header{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:justify;justify-content:space-between;padding:1rem 1rem;border-bottom:1px solid #f5f5f9;border-top-left-radius:0.3rem;border-top-right-radius:0.3rem}
.modal-header .close{padding:1rem 1rem;margin:-1rem -1rem -1rem auto}
.modal-body{position:relative;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}
.modal-body{max-height:calc(100vh - 200px);overflow-y:auto}
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}
html:not(.dark) .footer-inner{background:rgba(248,250,252,0.92)}
body{font-family:'Manrope',sans-serif;background:var(--bg);background-image:var(--bg-gradient);color:var(--text1);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;transition:background 0.5s,color 0.5s;overflow-x:hidden;min-height:100vh;flex-direction:column;justify-content:flex-end}
.page-wrapper{position:relative;z-index:1;max-width:1100px;width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:10px}
.widget{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:22px;position:relative;overflow:hidden;opacity:0;transform:translateY(16px);animation:slideUp 0.5s cubic-bezier(0.34,1.4,0.64,1) both;transition:var(--transition)}
.dark .widget{background:linear-gradient(135deg,rgba(139,92,246,0.15) 0,rgba(6,182,212,0.12) 50%,rgba(0,240,212,0.08) 100%);border-color:rgba(139,92,246,0.45);border-radius:20px;padding:22px;position:relative;overflow:hidden;opacity:0;transform:translateY(16px);animation:slideUp 0.5s cubic-bezier(0.34,1.4,0.64,1) both;transition:var(--transition)}
.widget.loaded{opacity:1;transform:translateY(0)}
.widget::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.6;pointer-events:none}
.widget:hover{background:var(--glass-hover);border-color:var(--glass-border-hover);transform:translateY(-3px)}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}
 to{opacity:1;transform:translateY(0)}
}
html.dark .widget-banner{background:linear-gradient(135deg,rgba(139,92,246,0.15) 0,rgba(6,182,212,0.12) 50%,rgba(0,240,212,0.08) 100%);border-color:rgba(139,92,246,0.45)}
.banner-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.banner-icon{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:white;animation:iconPulse 2.5s ease-in-out infinite}
.banner-text{flex:1;min-width:200px}
.banner-title{font-family:'Unbounded',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text1);margin-bottom:4px}
.banner-desc{font-size:0.82rem;color:var(--text2)}
.banner-badge{padding:6px 14px;background:rgba(0,184,148,0.15);border:1px solid rgba(0,184,148,0.4);border-radius:50px;font-family:'Unbounded',sans-serif;font-size:0.62rem;font-weight:600;letter-spacing:0.06em;color:var(--accent3);white-space:nowrap;animation:badgeGlow 2.8s ease-in-out infinite}
html.dark .banner-badge{background:rgba(0,240,212,0.12);border-color:rgba(0,240,212,0.45)}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 0 rgba(0,240,212,0)}
 50%{box-shadow:0 0 16px rgba(0,240,212,0.3)}
}
.widget-contacts .widget-header{display:flex;align-items:center;gap:8px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--glass-border)}
.widget-header i{font-size:1rem;color:var(--accent)}
.widget-header .title{font-family:'Unbounded',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--text3)}
.social-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.social-link{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--r-sm);color:var(--text2);font-size:0.78rem;font-weight:500;text-decoration:none;transition:var(--transition);position:relative;overflow:hidden}
.social-link::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,var(--accent),transparent);opacity:0;transition:opacity 0.2s}
.social-link:hover{background:var(--glass-hover);border-color:var(--glass-border-hover);color:var(--text1);transform:translateY(-2px)}
.social-link:hover::before{opacity:0.12}
.social-link i{font-size:1.1rem;transition:transform 0.2s}
.social-link:hover i{transform:scale(1.15)}
.social-link.tg{color:#29b6f6}
.social-link.tg:hover{border-color:rgba(41,182,246,0.5)}
.social-link.vk{color:#64b5f6}
.social-link.vk:hover{border-color:rgba(100,181,246,0.5)}
.social-link.mail{color:#ffb74d}
.social-link.mail:hover{border-color:rgba(255,183,77,0.5)}
.social-link.wa{color:#22c55e}
.social-link.wa:hover{border-color:rgba(34,197,94,0.5)}
.widget-feedback .widget-header{margin-bottom:16px}
.feedback-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.feedback-info{flex:1;min-width:180px}
.feedback-info .title{font-family:'Unbounded',sans-serif;font-size:0.92rem;font-weight:700;color:var(--text1);margin-bottom:6px}
.feedback-info .subtitle{font-size:0.78rem;color:var(--text2)}
.btn-widget{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(8,145,178,0.12));border:1px solid var(--glass-border);border-radius:var(--r-sm);color:var(--accent);font-family:'Manrope',sans-serif;font-size:0.78rem;font-weight:600;text-decoration:none;transition:var(--transition);position:relative;overflow:hidden;white-space:nowrap}
.btn-widget::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transition:left 0.4s}
.btn-widget:hover{background:linear-gradient(135deg,rgba(124,58,237,0.22),rgba(8,145,178,0.18));border-color:var(--glass-border-hover);transform:translateY(-2px)}
.btn-widget:hover::before{left:100%}
.widget-clock{text-align:center;padding:28px 20px}
.clock-display{display:flex;flex-direction:column;align-items:center;gap:10px}
#time{font-family:'Unbounded',sans-serif;font-size:2.4rem;font-weight:700;color:var(--text1);letter-spacing:0.03em;display:flex;align-items:center;gap:3px}
.time-dots{animation:blink 1s step-end infinite;color:var(--accent);font-size:1.8rem;line-height:1}
#date{font-family:'Manrope',sans-serif;font-size:0.82rem;color:var(--text2);font-weight:500;letter-spacing:0.04em}
.divider{grid-column:1 / -1;height:1px;background:linear-gradient(90deg,transparent 0,var(--glass-border) 25%,var(--accent) 50%,var(--glass-border) 75%,transparent 100%);margin:8px 0 4px;animation:shimmer 3s ease-in-out infinite}
::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:12px;border:3px solid var(--bg);transition:background 0.3s ease}
::-webkit-scrollbar-thumb:hover{background:var(--gradient-hover)}
::-webkit-scrollbar-corner{background:var(--bg)}
@media (max-width:768px){.page-wrapper{grid-template-columns:1fr;padding:16px}
.banner-content,.feedback-content{flex-direction:column;align-items:flex-start}
.social-grid{grid-template-columns:repeat(4,1fr)}
#time{font-size:2rem}
}
#themeRipple.expand{animation:ripIn .7s cubic-bezier(.22,1,.36,1) forwards}
#themeRipple.shrink{animation:ripOut .55s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ripIn{0%{transform:scale(0);opacity:0.95}
 100%{transform:scale(1);opacity:1}
}
@keyframes ripOut{0%{transform:scale(1);opacity:1}
 100%{transform:scale(0);opacity:0}
}
@keyframes starsTwinkle{0%,100%{opacity:var(--s-op,0.15)}
 50%{opacity:calc(var(--s-op,0.15) * 0.6)}
}
@keyframes drift{0%{transform:translate(0,0) scale(1)}
 50%{transform:translate(20px,-28px) scale(1.05)}
 100%{transform:translate(-14px,20px) scale(0.97)}
}
#themeStars{position:fixed;inset:0;z-index:99998;pointer-events:none;opacity:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.9) 0,transparent 100%),radial-gradient(1px 1px at 45% 9%,rgba(255,255,255,.8) 0,transparent 100%),radial-gradient(1.5px 1.5px at 73% 33%,rgba(255,255,255,.85) 0,transparent 100%),radial-gradient(1px 1px at 23% 63%,rgba(255,255,255,.7) 0,transparent 100%),radial-gradient(1.5px 1.5px at 88% 53%,rgba(255,255,255,.9) 0,transparent 100%),radial-gradient(1px 1px at 59% 79%,rgba(255,255,255,.75) 0,transparent 100%)}
#themeStars.flash{animation:starsBurst .9s ease forwards}
@keyframes starsBurst{0%{opacity:0}
 25%{opacity:1}
 100%{opacity:0}
}
.dark .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(0,0,0,0.9);border:1px solid rgba(0,0,0,0.9);border-bottom:1px solid var(--nav-border);transition:background 0.5s ease,border-color 0.5s ease}
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--nav-bg);background:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.9);border-bottom:1px solid var(--nav-border);transition:background 0.5s ease,border-color 0.5s ease}
.navbar::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 35%,var(--accent2) 65%,transparent);opacity:0.35;pointer-events:none}
.nav-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:11px 28px;max-width:1280px;margin:0 auto}
.nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent3),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:white;animation:iconPulse 2.5s ease-in-out infinite}
@keyframes iconPulse{0%,100%{transform:scale(1)}
 50%{transform:scale(1.08)}
}
.nav-logo:hover .logo-icon{transform:rotate(-8deg) scale(1.1)}
.logo-text-main{font-family:'Unbounded',sans-serif;font-size:0.82rem;font-weight:600;letter-spacing:0.09em;color:var(--text1)}
.dark .logo-text-main{font-family:'Unbounded',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.09em;color:var(--text1)}
.nav-search{max-width:440px;width:100%;justify-self:center}
.search-wrap{position:relative;display:flex;align-items:center}
.search-wrap input{width:100%;background:var(--glass);border:1px solid var(--border);border-radius:50px;padding:9px 44px 9px 20px;font-family:'Manrope',sans-serif;font-size:0.80rem;color:var(--text1);outline:none;background:rgba(20,20,35,0.85);transition:all 0.3s}
.search-wrap input::placeholder{color:var(--text3)}
.search-wrap input:focus{border-color:rgba(79,156,255,0.5)}
.search-wrap button{position:absolute;right:14px;background:none;border:none;color:var(--text3);font-size:0.80rem;cursor:pointer;transition:color 0.2s,transform 0.2s;display:flex}
.search-wrap button:hover{color:var(--accent);transform:scale(1.15)}
.nav-user{display:flex;align-items:center;gap:10px}
.theme-toggle{position:relative;width:56px;height:30px;cursor:pointer;flex-shrink:0}
.theme-toggle input{display:none}
.theme-track{position:absolute;inset:0;border-radius:50px;background:linear-gradient(135deg,#0a1628,#1a2a60);border:1px solid var(--border);overflow:hidden;transition:all 0.4s}
.theme-toggle input:checked ~ .theme-track{background:linear-gradient(135deg,#87ceeb,#e0f4ff)}
.theme-thumb{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;background:linear-gradient(135deg,#c8d8ff,#a8d4ff);transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),background 0.4s,box-shadow 0.4s;color:#1a3a8f}
.theme-toggle input:checked ~ .theme-track .theme-thumb{transform:translateX(26px);background:linear-gradient(135deg,#ffdb4d,#ffc107);color:#7a4500}
.btn-auth{display:inline-flex;align-items:center;gap:7px;padding:8px 18px;border-radius:20px;font-family:'Manrope',sans-serif;font-size:0.74rem;font-weight:700;border:1px solid;cursor:pointer;text-decoration:none;transition:all 0.28s cubic-bezier(0.34,1.56,0.64,1);position:relative;overflow:hidden;white-space:nowrap}
.btn-auth::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);transition:left 0.45s}
.btn-auth:hover::before{left:100%}
.btn-auth:hover{transform:translateY(-2px) scale(1.05)}
.btn-register{background:linear-gradient(135deg,rgba(79,156,255,0.22),rgba(181,111,255,0.16));border-color:rgba(79,156,255,0.4) !important;color:var(--text1) !important;border-radius:20px}
.btn-register{background:linear-gradient(135deg,rgba(0,0,0,.18),rgba(0,0,0,.14));border-color:rgba(0,0,0,.35) !important;color:var(--text1) !important}
.nav-menu-bar{border-top:1px solid var(--nav-border);max-width:1280px;margin:0 auto;padding:0 28px;overflow:visible;position:relative;z-index:100}
.nav-menu-scroll{overflow-y:visible;scrollbar-width:none}
.nav-menu-scroll::-webkit-scrollbar{display:none}
.nav-menu{display:flex;align-items:center;list-style:none;gap:3px;padding:5px 0;overflow:visible;min-width:max-content}
.menu-item{position:relative;flex-shrink:0}
.menu-item > a{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--r-sm);font-family:'Manrope',sans-serif;font-size:0.76rem;font-weight:600;color:var(--text2);text-decoration:none;white-space:nowrap;transition:var(--transition-fast);position:relative;background:rgba(65,105,225,0.10)}
.menu-item > a:hover{background:var(--glass-hover);color:var(--text1);transform:translateY(-2px)}
.menu-item > a.active{background:var(--glass-active);color:var(--text1)}
.menu-item:not(.menu-item-has-children) > a.active::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--accent)}
.menu-item > a .nav-icon{font-size:0.70rem;color:var(--accent);transition:color 0.2s;flex-shrink:0}
.menu-item > a:hover .nav-icon{color:var(--accent2)}
.nav-img{width:22px;height:22px;object-fit:cover;border-radius:6px;border:1px solid var(--border);flex-shrink:0;filter:brightness(0.85) saturate(1.1)}
.menu-item > a:hover .nav-img{transform:scale(1.18) rotate(-4deg);border-color:var(--accent);filter:brightness(1.1) saturate(1.3)}
.menu-item > a.active .nav-img{border-color:rgba(79,156,255,0.5);filter:brightness(1.05)}
.nav-badge1{font-family:'Unbounded',sans-serif;font-size:.75rem;font-weight:700;color:var(--accent3);background:rgba(0,240,212,.10);border:1px solid rgba(0,240,212,.12);border-radius:50px;padding:2px 7px;transition:all .3s;animation:badgePulse 1.6s infinite}
.nav-badge{font-family:'Unbounded',sans-serif;font-size:0.65rem;font-weight:700;color:var(--accent3);background:rgba(0,240,212,0.10);border:1px solid rgba(0,240,212,0.22);border-radius:50px;padding:2px 7px;transition:all 0.3s}
.menu-item > a:hover .nav-badge{background:rgba(0,240,212,0.18);border-color:rgba(0,240,212,0.40)}
.menu-item-has-children > a::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;font-size:0.48rem;color:var(--text3);margin-left:3px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1),color 0.22s;flex-shrink:0}
.menu-item-has-children:hover > a::after,.menu-item-has-children.open > a::after{transform:rotate(180deg);color:var(--accent)}
.dark .dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;border-radius:var(--r);background:rgba(0,0,0,0.95);border:1px solid rgba(0,0,0,0.95);list-style:none;padding:8px;opacity:0;pointer-events:none;transform:translateY(-6px) scale(0.97);transform-origin:top left;transition:opacity 0.22s cubic-bezier(0.34,1.56,0.64,1),transform 0.22s cubic-bezier(0.34,1.56,0.64,1);z-index:9999;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.12em;font-family:'Unbounded',sans-serif;max-height:500px;overflow-y:auto}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;border-radius:var(--r);background:rgba(255,255,255,0.9);border:1px solid rgba(255,255,255,0.9);list-style:none;padding:8px;opacity:0;pointer-events:none;transform:translateY(-6px) scale(0.97);transform-origin:top left;transition:opacity 0.22s cubic-bezier(0.34,1.56,0.64,1),transform 0.22s cubic-bezier(0.34,1.56,0.64,1);z-index:9999;font-size:0.58rem;text-transform:uppercase;letter-spacing:0.12em;font-family:'Unbounded',sans-serif;max-height:500px;overflow-y:auto}
.dropdown::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:var(--r) var(--r) 0 0;opacity:0.55}
.dropdown::after{content:'';position:absolute;top:-6px;left:22px;width:10px;height:10px;background:var(--drop-bg);border-left:1px solid var(--drop-border);border-top:1px solid var(--drop-border);transform:rotate(45deg);border-radius:2px 0 0 0}
.menu-item-has-children:hover > .dropdown,.menu-item-has-children.open > .dropdown{opacity:1;pointer-events:all;transform:translateY(0) scale(1)}
.drop-section{padding:8px 13px 4px;font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text3);font-family:'Unbounded',sans-serif}
.drop-sep{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:5px 6px}
.dropdown > li > a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-family:'Manrope',sans-serif;font-size:0.76rem;font-weight:600;color:var(--text2);text-decoration:none;transition:background 0.18s,color 0.18s,padding-left 0.22s;opacity:0;transform:translateX(-8px)}
.menu-item-has-children:hover > .dropdown > li > a,.menu-item-has-children.open > .dropdown > li > a{animation:dropIn 0.26s ease forwards}
.menu-item-has-children:hover > .dropdown > li:nth-child(1) > a,.menu-item-has-children.open > .dropdown > li:nth-child(1) > a{animation-delay:.02s}
.menu-item-has-children:hover > .dropdown > li:nth-child(2) > a,.menu-item-has-children.open > .dropdown > li:nth-child(2) > a{animation-delay:.04s}
.menu-item-has-children:hover > .dropdown > li:nth-child(3) > a,.menu-item-has-children.open > .dropdown > li:nth-child(3) > a{animation-delay:.07s}
.menu-item-has-children:hover > .dropdown > li:nth-child(4) > a,.menu-item-has-children.open > .dropdown > li:nth-child(4) > a{animation-delay:.10s}
.menu-item-has-children:hover > .dropdown > li:nth-child(5) > a,.menu-item-has-children.open > .dropdown > li:nth-child(5) > a{animation-delay:.13s}
.menu-item-has-children:hover > .dropdown > li:nth-child(6) > a,.menu-item-has-children.open > .dropdown > li:nth-child(6) > a{animation-delay:.16s}
.menu-item-has-children:hover > .dropdown > li:nth-child(7) > a,.menu-item-has-children.open > .dropdown > li:nth-child(7) > a{animation-delay:.19s}
.menu-item-has-children:hover > .dropdown > li:nth-child(8) > a,.menu-item-has-children.open > .dropdown > li:nth-child(8) > a{animation-delay:.22s}
.menu-item-has-children:hover > .dropdown > li:nth-child(9) > a,.menu-item-has-children.open > .dropdown > li:nth-child(9) > a{animation-delay:.25s}
.menu-item-has-children:hover > .dropdown > li:nth-child(10) > a,.menu-item-has-children.open > .dropdown > li:nth-child(10) > a{animation-delay:.28s}
.menu-item-has-children:hover > .dropdown > li:nth-child(11) > a,.menu-item-has-children.open > .dropdown > li:nth-child(11) > a{animation-delay:.31s}
@keyframes dropIn{from{opacity:0;transform:translateX(-8px)}
 to{opacity:1;transform:translateX(0)}
}
.dropdown > li > a:hover{background:var(--glass-hover);color:var(--text1);padding-left:18px}
.drop-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:var(--glass);border-radius:7px;font-size:14px;flex-shrink:0;transition:background 0.2s,transform 0.25s cubic-bezier(0.34,1.56,0.64,1)}
.dropdown > li > a:hover .drop-icon{background:rgba(79,156,255,0.15);transform:scale(1.1) rotate(-5deg)}
.drop-img{width:35px;height:35px;object-fit:cover;border-radius:8px;border:1px solid var(--border);flex-shrink:0}
.dropdown > li > a:hover .drop-img{transform:scale(1.12) rotate(-3deg);border-color:var(--accent);filter:brightness(1.1) saturate(1.3)}
.drop-label{flex:1}
.drop-label .drop-title{display:block;font-size:.76rem;font-weight:600}
.drop-label .drop-sub{display:block;font-size:.66rem;color:var(--text3);margin-top:1px;transition:color .18s}
.dropdown > li > a:hover .drop-label .drop-sub{color:var(--text2)}
@media (max-width:768px){.nav-top{padding:10px 16px;gap:10px}
.nav-menu-bar{padding:0 16px}
}
*{margin:0;padding:0;box-sizing:border-box}
html.dark body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 15% 20%,rgba(139,92,246,0.12) 0,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(6,182,212,0.1) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(244,114,182,0.06) 0,transparent 60%);animation:bgPulse 15s ease-in-out infinite;pointer-events:none;z-index:-2;transition:var(--transition)}
@keyframes iconDance{0%,100%{transform:rotate(-10deg) scale(1)}
 50%{transform:rotate(10deg) scale(1.1)}
}
.subtitle{color:var(--text-dim);font-size:1.3rem;font-weight:500;margin-top:5px;position:relative;display:inline-block;background:rgba(255,255,255,0.05);padding:8px 20px;border-radius:50px;border:1px solid rgba(255,255,255,0.05)}
.subtitle{color:var(--text-dim);font-size:1.3rem;font-weight:500;margin-top:5px;position:relative;display:inline-block;background:rgba(255,255,255,0.05);padding:8px 20px;border-radius:50px;border:1px solid rgba(255,255,255,0.05)}
.header-stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;animation:slideUp 0.8s var(--ease) 0.2s both;margin-bottom:25px}
@keyframes iconBounce{0%,100%{transform:scale(1)}
 50%{transform:scale(1.12)}
}
#themeRipple{position:fixed;border-radius:50%;pointer-events:none;z-index:9999;transform:scale(0);transition:transform 0.5s ease}
#themeStars{position:fixed;inset:0;z-index:99998;pointer-events:none;opacity:0;background-image:radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,0.9) 0,transparent 100%),radial-gradient(1px 1px at 45% 9%,rgba(255,255,255,0.8) 0,transparent 100%),radial-gradient(1.5px 1.5px at 73% 33%,rgba(255,255,255,0.85) 0,transparent 100%),radial-gradient(1px 1px at 23% 63%,rgba(255,255,255,0.7) 0,transparent 100%),radial-gradient(1.5px 1.5px at 88% 53%,rgba(255,255,255,0.9) 0,transparent 100%),radial-gradient(1px 1px at 59% 79%,rgba(255,255,255,0.75) 0,transparent 100%)}
#themeStars.flash{animation:starsBurst 0.9s ease forwards}
@keyframes starsFlash{0%{opacity:0}
 20%{opacity:1}
 100%{opacity:0}
}
.progress{position:absolute;top:15px;right:15px;width:56px;height:56px;z-index:3;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.3))}
.progress svg{transform:rotate(-90deg);width:100%;height:100%}
.progress-bg{fill:none;stroke:rgba(255,255,255,0.15);stroke-width:5}
html:not(.dark) .progress-bg{stroke:rgba(15,23,42,0.15)}
.progress-bar{fill:none;stroke:url(#grad);stroke-width:5;stroke-linecap:round;stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset 1.5s var(--ease)}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;font-weight:800;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.8);pointer-events:none}
html:not(.dark) .progress-text{color:#0f172a;text-shadow:none}
.card-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:14px;flex-grow:1}
html:not(.dark) .stat-item{background:rgba(15,23,42,0.04)}
.stat-item:hover{background:rgba(139,92,246,0.15);transform:translateY(-2px)}
.stat-value{display:block;font-size:1.1rem;font-weight:700;color:var(--text);margin-bottom:2px;background:var(--gradient);background-clip:text;-webkit-text-fill-color:transparent}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:var(--gradient);color:white;text-decoration:none;border-radius:50px;font-weight:600;font-size:0.95rem;transition:var(--transition);border:none;cursor:pointer;align-self:flex-start;position:relative;overflow:hidden}
.btn:hover::before{left:100%}
.btn::after{content:'→';transition:transform 0.3s}
.btn:hover::after{transform:translateX(4px)}
@media (max-width:700px){.cards-grid{grid-template-columns:1fr;max-width:400px}
.subtitle{font-size:1.1rem;padding:6px 16px}
.stat-value{font-size:1rem}
.btn{width:100%;justify-content:center}
#themeLabel{width:46px;height:46px}
#themeIcon{font-size:1.2rem}
}
*{margin:0;padding:0;box-sizing:border-box}
 html.dark body::before{background:radial-gradient(ellipse at 15% 20%,rgba(138,156,255,0.12) 0,transparent 50%),radial-gradient(ellipse at 85% 80%,rgba(103,232,249,0.08) 0,transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(244,114,182,0.06) 0,transparent 60%)}
@keyframes bgPulse{0%,100%{opacity:1}
 50%{opacity:0.85}
}
.header-dot{width:12px;height:12px;background:var(--dot-bg);border-radius:50% animationpulse 2s infinite }
.header-eyebrow{font-size:0.9rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-soft);font-weight:500 }
.stat-chip{display:inline-flex;align-items:center;gap:0.5rem;padding:0.6rem 1.5rem;background:var(--badge-bg);border:1px solid var(--glass-border);border-radius:40px;font-size:1rem;font-weight:500;color:var(--text-secondary);transition:transform 0.2s}
.stat-chip:hover{transform:translateY(-2px) }
.stat-chip i{font-size:1rem;color:var(--accent) }
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem }
.track-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:1.5rem;overflow:hidden;transition:opacity 0.6s ease,transform 0.6s ease;opacity:0;transform:translateY(25px);position:relative}
.track-card.visible{opacity:1;transform:translateY(0) }
.image-wrapper{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden }
.image-box{width:100%;height:100% }
.image-box img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.8s ease;border:3px solid var(--img-border)}
.image-overlay{position:absolute;bottom:0;left:0;right:0;padding:1.2rem 1rem 0.8rem;background:var(--overlay-bg);color:white;display:flex;justify-content:space-between;align-items:center;transform:translateY(100%);transition:transform 0.3s ease}
.image-overlay{transform:translateY(0) }
.overlay-stats{display:flex;gap:1rem }
.overlay-stat{display:flex;align-items:center;gap:0.4rem;font-size:0.8rem;font-weight:500;background:var(--chip-bg);padding:0.3rem 0.8rem;border-radius:30px;border:1px solid rgba(255,255,255,0.2) }
.overlay-stat i{font-size:0.7rem;color:rgba(255,255,255,0.9) }
.progress-circle{position:absolute;top:1rem;right:1rem;width:56px;height:56px;z-index:3;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.25))}
.progress-circle svg{transform:rotate(-90deg);width:100%;height:100%}
.progress-bg{fill:none;stroke:var(--progress-bg);stroke-width:4}
.progress-bar{fill:none;stroke:url(#progressGradient);stroke-width:4;stroke-linecap:round;stroke-dasharray:138;stroke-dashoffset:138;transition:stroke-dashoffset 1.5s ease}
.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--text-primary);text-align:center;line-height:1.1;pointer-events:none;background:var(--glass-bg);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--glass-border)}
html.dark .progress-text{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.5);background:rgba(25,25,35,0.9)}
.details{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:0.5rem }
.album-title{font-size:1.2rem;font-weight:700;line-height:1.3;color:var(--text-primary);letter-spacing:-0.01em;position:relative;display:inline-block;padding-bottom:2px }
.album-title::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:3px;background:linear-gradient(135deg,#7c3aed,#0891b2,#db2777);border-radius:2px;transition:width 0.3s ease }
.album-title::after{width:60px }
.details p{color:var(--text-soft);font-size:0.85rem;line-height:1.4;margin:0.2rem 0 0.3rem;display:flex;align-items:center;gap:0.5rem }
.details p i{color:var(--accent);font-size:0.8rem;width:16px }
.details .anim a{display:inline-block;background:linear-gradient(135deg,#7c3aed,#0891b2,#db2777);color:white;text-decoration:none;padding:0.5rem 1.2rem;border-radius:2rem;font-size:0.85rem;font-weight:600;transition:all 0.25s ease;border:none;margin-top:0.3rem;position:relative;overflow:hidden}
.details .anim a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);transition:left 0.5s ease}
.details .anim a:hover{transform:translateY(-2px)}
.details .anim a:hover::before{left:100%}
.details .anim a::after{transition:transform 0.3s}
.details .anim a:hover::after{transform:translateX(4px)}
@media (max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr) }
 }
@media (max-width:600px){.cards-grid{grid-template-columns:1fr }
#themeLabel{width:46px;height:46px }
#themeIcon{font-size:1.2rem }
.progress-circle{width:48px;height:48px }
.progress-text{font-size:9px;width:36px;height:36px }
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);background-image:var(--bg-gradient);color:var(--text1);min-height:100vh;transition:background 0.5s ease,color 0.5s ease;overflow-x:hidden;line-height:1.6}
.bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.btn-register{background:linear-gradient(135deg,rgba(79,156,255,.22),rgba(181,111,255,.16));border-color:rgba(79,156,255,.4) !important;color:var(--text1) !important}
.menu-item > a{display:flex;align-items:center;gap:7px;padding:9px 14px;border-radius:20px;font-family:'Manrope',sans-serif;font-size:.76rem;font-weight:500;color:var(--text2);text-decoration:none;white-space:nowrap;transition:all .22s ease;position:relative}
.dropdown li a{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:.76rem;font-weight:500;color:var(--text2);text-decoration:none;transition:background .18s ease,color .18s ease,padding-left .18s ease;opacity:0;transform:translateX(-6px);animation:none}
.sw-ring{position:absolute;bottom:0;left:0;border-radius:50%;border:2px solid var(--green);opacity:0;animation:swRing var(--d,1.4s) ease-out var(--del,0s) infinite}
.sw-ring:nth-child(1){width:28px;height:28px;margin:0 0 -14px -14px;--d:1.4s;--del:0s}
.sw-ring:nth-child(2){animation-delay:0.2s}
.sw-ring:nth-child(3){animation-delay:0.4s}
@keyframes swRing{0%{transform:scale(1);opacity:1}
 70%{transform:scale(4);opacity:0}
 100%{transform:scale(5);opacity:0}
}
.form-wrap{position:relative;z-index:1;width:100%;max-width:100%;background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:var(--radius);box-shadow:var(--glass-shadow),var(--glass-glow);padding:36px 32px 32px;animation:fadeUp .6s ease both;transition:var(--transition)}
.stat-item{text-align:center;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,0.03);transition:var(--transition);cursor:default}