@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

*{scroll-behavior:smooth;user-select:none}
::selection{background:rgba(99,102,241,0.15);color:#4f46e5}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f1,#ec4899);border-radius:99px}

.nav-scrolled{background:rgba(255,255,255,0.88)!important;backdrop-filter:blur(20px) saturate(180%);box-shadow:0 1px 40px rgba(0,0,0,0.06)!important}

.gradient-border{position:relative;border-radius:1rem;background:#fff;z-index:1}
.gradient-border::before{content:'';position:absolute;inset:-2px;border-radius:calc(1rem + 2px);background:linear-gradient(135deg,#6366f1,#ec4899,#06b6d4,#6366f1);background-size:300% 300%;animation:borderDance 4s linear infinite;z-index:-1;opacity:0;transition:opacity .4s}
.gradient-border:hover::before{opacity:1}

.glass-card{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,0.8)}

.shimmer-text{background:linear-gradient(90deg,#6366f1 0%,#ec4899 25%,#06b6d4 50%,#ec4899 75%,#6366f1 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s linear infinite}

.particle{position:fixed;pointer-events:none;border-radius:50%;animation:particle linear infinite;opacity:0;z-index:1}

.floating-deco{position:absolute;pointer-events:none;opacity:0.15;animation:float 6s ease-in-out infinite}

.reveal{opacity:0;transform:translateY(30px);transition:all 0.7s cubic-bezier(0.25,0.46,0.45,0.94)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

.card-hover{transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94)}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(99,102,241,0.12),0 8px 20px rgba(0,0,0,0.06)}

.btn-anime{position:relative;overflow:hidden;transition:all 0.3s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn-anime::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.3);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s}
.btn-anime:active::after{width:300px;height:300px}

.tag-glow{position:relative}
.tag-glow::after{content:'';position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity 0.3s;filter:blur(8px)}
.tag-glow:hover::after{opacity:0.4}

.typing-cursor::after{content:'|';animation:blink 0.7s step-end infinite;color:#6366f1;font-weight:300}

.wave-divider{position:relative;width:100%;overflow:hidden;line-height:0}
.wave-divider svg{position:relative;display:block;width:calc(100% + 1.3px);height:60px}

.cover-shine{position:relative;overflow:hidden}
.cover-shine::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.15) 50%,transparent 70%);transform:rotate(45deg);transition:0.6s;opacity:0}
.cover-shine:hover::after{opacity:1;transform:rotate(45deg) translate(100%,100%)}

.progress-gradient{background:linear-gradient(90deg,#6366f1,#ec4899,#06b6d4);background-size:200% 100%;animation:shimmer 2s linear infinite}

@keyframes borderDance{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:0.6}}
@keyframes ripple{0%{transform:scale(0);opacity:1}100%{transform:scale(4);opacity:0}}
@keyframes blink{0%,100%{border-color:transparent}50%{border-color:#6366f1}}
@keyframes particle{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:0.8}90%{opacity:0.8}100%{transform:translateY(-10vh) rotate(720deg);opacity:0}}
@keyframes slideInRight{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{transform:scale(1.05)}70%{transform:scale(0.9)}100%{opacity:1;transform:scale(1)}}
@keyframes glow{0%{box-shadow:0 0 5px rgba(99,102,241,0.2)}100%{box-shadow:0 0 25px rgba(99,102,241,0.4),0 0 50px rgba(236,72,153,0.2)}}

.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.6) 0%,rgba(255,255,255,0.85) 100%)}

.content-bg{position:relative}
.content-bg::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;background-attachment:fixed;opacity:0.12}
.content-bg-video{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;object-fit:cover;opacity:0.08}

.wave-container{position:absolute;bottom:0;left:0;width:100%;overflow:hidden;line-height:0;pointer-events:none;height:100px}
.wave-container svg{position:absolute;bottom:0;width:200%;height:100px;will-change:transform}
.wave-back{left:-50%;animation:waveSweep1 18s ease-in-out infinite alternate}
.wave-mid{left:-40%;animation:waveSweep2 13s ease-in-out infinite alternate}
.wave-front{left:-30%;animation:waveSweep3 9s ease-in-out infinite alternate}
@keyframes waveSweep1{0%{transform:translateX(0)}100%{transform:translateX(15%)}}
@keyframes waveSweep2{0%{transform:translateX(0)}100%{transform:translateX(-12%)}}
@keyframes waveSweep3{0%{transform:translateX(0)}100%{transform:translateX(10%)}}

.danmaku-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:40}

.deco-wrap{position:relative;overflow:hidden}
.deco-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(40px)}
.deco-orb-1{width:180px;height:180px;background:rgba(99,102,241,0.08);animation:decoFloat 9s ease-in-out infinite}
.deco-orb-2{width:140px;height:140px;background:rgba(236,72,153,0.07);animation:decoFloatAlt 11s ease-in-out infinite}
.deco-orb-3{width:100px;height:100px;background:rgba(6,182,212,0.06);animation:decoFloat 13s ease-in-out infinite}
.deco-orb-4{width:200px;height:200px;background:rgba(99,102,241,0.05);animation:decoFloatAlt 15s ease-in-out infinite}
.deco-orb-5{width:120px;height:120px;background:rgba(236,72,153,0.06);animation:decoFloat 10s ease-in-out infinite}

.deco-star{position:absolute;pointer-events:none;color:rgba(99,102,241,0.15);animation:decoSpin 20s linear infinite;font-size:24px}
.deco-star-pink{color:rgba(236,72,153,0.15)}
.deco-star-cyan{color:rgba(6,182,212,0.12)}
.deco-star-lg{font-size:36px}
.deco-star-sm{font-size:16px}

.deco-ring{position:absolute;pointer-events:none;border-radius:50%;border:2px solid;animation:decoSpin 25s linear infinite}
.deco-ring-primary{border-color:rgba(99,102,241,0.1)}
.deco-ring-secondary{border-color:rgba(236,72,153,0.08)}
.deco-ring-cyan{border-color:rgba(6,182,212,0.08)}

.deco-float{animation:decoFloat 8s ease-in-out infinite}
.deco-float-alt{animation:decoFloatAlt 10s ease-in-out infinite}
.deco-float-slow{animation:decoFloat 14s ease-in-out infinite}
@keyframes decoFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-20px) rotate(10deg)}}
@keyframes decoFloatAlt{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(15px) rotate(-8deg)}}
@keyframes decoSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

.footer-deco{position:absolute;pointer-events:none}
.footer-orb-1{top:-40px;right:8%;width:200px;height:200px;background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(236,72,153,0.1));border-radius:50%;filter:blur(50px);animation:decoFloat 10s ease-in-out infinite}
.footer-orb-2{bottom:-30px;left:5%;width:160px;height:160px;background:linear-gradient(135deg,rgba(6,182,212,0.1),rgba(99,102,241,0.08));border-radius:50%;filter:blur(40px);animation:decoFloatAlt 12s ease-in-out infinite}
.footer-orb-3{top:30%;left:45%;width:100px;height:100px;background:linear-gradient(135deg,rgba(236,72,153,0.08),rgba(6,182,212,0.06));border-radius:50%;filter:blur(35px);animation:decoFloat 8s ease-in-out infinite}
.footer-star{position:absolute;pointer-events:none;animation:decoSpin 18s linear infinite}

.admin-sidebar{transition:width 0.3s}
.admin-sidebar .nav-item{transition:all 0.2s}
.admin-sidebar .nav-item:hover,.admin-sidebar .nav-item.active{background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(236,72,153,0.05));color:#6366f1}