:root{--bg:#0a0a10;--text:#f0f0f5;--accent:#6c5ce7;--green:#00b894;--green2:#55efc4;--blue:#0984e3;--blue2:#74b9ff;--gold:#fdcb6e}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,system-ui,"SF Pro Display","Inter",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;user-select:none}
::-webkit-scrollbar{width:0;height:0}
input,textarea{font-family:inherit;-webkit-appearance:none}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;background:none;color:inherit}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroFloat{0%,100%{transform:translateY(0px) rotate(0deg) scale(1)}30%{transform:translateY(-18px) rotate(6deg) scale(1.07)}70%{transform:translateY(-10px) rotate(-5deg) scale(1.04)}}
@keyframes goldPulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}
@keyframes cardShimmer{0%,100%{opacity:0;transform:translateX(-10%)}50%{opacity:1;transform:translateX(10%)}}
@keyframes adSlideIn{0%{transform:translateX(100%);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes adOrb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-8px) scale(1.15)}}
@keyframes adOrb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-10px,10px) scale(1.2)}}
@keyframes adOrb3{0%,100%{transform:translate(0,0) scale(1)}60%{transform:translate(8px,6px) scale(0.9)}}
.ad-slide{animation:adSlideIn .42s cubic-bezier(.22,1,.36,1) forwards}
.glow-input-gold{background:transparent;border:1px solid rgba(255,184,0,0.35);border-radius:12px;padding:13px 16px;color:#fff;font-size:14px;font-family:inherit;width:100%;outline:none;transition:all .4s ease;box-shadow:0 0 0 0 transparent;-webkit-appearance:none}
.glow-input-gold::placeholder{color:rgba(255,255,255,0.35)}
.glow-input-gold:focus{color:#fff;border-color:#FFB800;text-shadow:0 0 6px rgba(255,255,255,0.4);box-shadow:0 0 6px rgba(255,184,0,0.5),0 0 20px rgba(255,184,0,0.25),0 0 50px rgba(255,184,0,0.1)}
.glow-input-blue{background:transparent;border:1px solid rgba(90,200,250,0.3);border-radius:12px;padding:13px 16px;color:#fff;font-size:14px;font-family:inherit;width:100%;outline:none;transition:all .4s ease;box-shadow:0 0 0 0 transparent;-webkit-appearance:none}
.glow-input-blue::placeholder{color:rgba(255,255,255,0.35)}
.glow-input-blue:focus{color:#fff;border-color:#5AC8FA;text-shadow:0 0 6px rgba(255,255,255,0.4);box-shadow:0 0 6px rgba(0,140,255,0.5),0 0 20px rgba(0,140,255,0.25),0 0 50px rgba(0,140,255,0.1)}
@keyframes bluePulse{0%,100%{opacity:0.35;transform:scale(1)}50%{opacity:0.9;transform:scale(1.4)}}
@keyframes orbitA{0%{transform:rotate(0deg) translateX(52px) rotate(0deg) scale(1)}100%{transform:rotate(360deg) translateX(52px) rotate(-360deg) scale(1)}}
@keyframes orbitB{0%{transform:rotate(180deg) translateX(38px) rotate(-180deg) scale(1)}100%{transform:rotate(540deg) translateX(38px) rotate(-540deg) scale(1)}}
@keyframes orbitC{0%{transform:rotate(60deg) translateX(66px) rotate(-60deg) scale(1)}100%{transform:rotate(420deg) translateX(66px) rotate(-420deg) scale(1)}}
@keyframes ringPulse{0%,100%{opacity:0.12;transform:scale(1)}50%{opacity:0.22;transform:scale(1.06)}}
.animate-fade{animation:fadeIn .3s ease-out}
.animate-slide{animation:slideUp .4s ease-out}
@keyframes shine{0%{left:-100px}60%{left:100%}to{left:100%}}
.back-btn{display:block;position:relative;width:42px;height:42px;overflow:hidden;outline:none;background:transparent;cursor:pointer;border:0;flex-shrink:0}
.back-btn::before,.back-btn::after{content:"";position:absolute;border-radius:50%;inset:5px}
.back-btn::before{border:2.5px solid rgba(255,255,255,0.25);transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms,transform .5s cubic-bezier(.455,.03,.515,.955) 80ms}
.back-btn::after{border:2.5px solid #a29bfe;transform:scale(1.3);transition:opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94);opacity:0}
.back-btn:active::before{opacity:0;transform:scale(0.7);transition:opacity .4s cubic-bezier(.165,.84,.44,1),transform .5s cubic-bezier(.25,.46,.45,.94)}
.back-btn:active::after{opacity:1;transform:scale(1);transition:opacity .4s cubic-bezier(.77,0,.175,1) 80ms,transform .5s cubic-bezier(.455,.03,.515,.955) 80ms}
.back-btn-box{display:flex;position:absolute;top:0;left:0;transition:.4s}
.back-btn-elem{display:block;width:14px;height:14px;margin:14px 14px 0 14px;fill:rgba(255,255,255,0.7)}
.back-btn:active .back-btn-box{transform:translateX(-42px)}
.profile-shine-btn::before{content:"";position:absolute;width:80px;height:100%;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.7),rgba(255,255,255,0) 70%);top:0;left:-100px;opacity:.7;animation:shine 2s ease-out infinite}
.profile-shine-btn .profile-btn-icon{transition:transform .25s ease}
.profile-shine-btn:active .profile-btn-icon{transform:translateX(4px)}
@keyframes sparkle-rotate{to{transform:rotate(360deg)}}
@keyframes sparkle-path{0%,34%,71%,100%{transform:scale(1)}17%{transform:scale(var(--s1,1))}49%{transform:scale(var(--s2,1))}83%{transform:scale(var(--s3,1))}}
.spk-btn{--br:9999px;--tr:0.3s ease-in-out;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 0;width:100%;background:transparent;border:none;border-radius:var(--br);transform:scale(calc(1+(var(--active,0)*0.06)));transition:transform var(--tr)}
.spk-btn::before{content:"";position:absolute;inset:0;border-radius:var(--br);transition:all var(--tr);z-index:0}
.spk-btn::after{content:"";position:absolute;inset:0;border-radius:var(--br);opacity:var(--active,0);transition:opacity var(--tr);z-index:2}
.spk-btn:active{transform:scale(0.97)}
.spk-btn .dots_border{overflow:hidden;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 2px);height:calc(100% + 2px);background:transparent;border-radius:var(--br);z-index:-1}
.spk-btn .dots_border::before{content:"";position:absolute;top:30%;left:50%;transform-origin:center;transform:rotate(0deg);width:100%;height:2rem;mask:linear-gradient(transparent 0%,white 120%);animation:sparkle-rotate 2s linear infinite}
.spk-btn .sparkle{position:relative;z-index:10;width:22px;height:22px;flex-shrink:0}
.spk-btn .sparkle .path{transform-origin:center;--s1:1.2;--s2:1.2;--s3:1.2}
.spk-btn:active .sparkle .path{animation:sparkle-path 1.5s linear 0.2s infinite}
.spk-btn .spk-text{position:relative;z-index:10;font-size:14px;font-weight:700;background-clip:text;-webkit-background-clip:text;color:transparent}
.spk-gold::before{background:linear-gradient(135deg,#b8860b,#F9A825,#FFD740);box-shadow:inset 0 0.5px rgba(255,255,255,0.5),inset 0 -1px 2px rgba(0,0,0,0.4),0 6px 20px -4px rgba(249,168,37,0.5)}
.spk-gold::after{background:radial-gradient(at 51% 89%,#ffe082 0,transparent 50%),radial-gradient(at 100% 100%,#FFD740 0,transparent 50%),radial-gradient(at 22% 91%,#F9A825 0,transparent 50%);background-color:rgba(249,168,37,0.85)}
.spk-gold .dots_border::before{background:rgba(255,210,50,0.9)}
.spk-gold .sparkle .path{fill:#1a0e00;stroke:#1a0e00}
.spk-gold .spk-text{background-image:linear-gradient(90deg,#1a0e00 0%,rgba(26,14,0,0.7) 120%)}
.spk-blue::before{background:linear-gradient(135deg,#0050b0,#0072F5,#5AC8FA);box-shadow:inset 0 0.5px rgba(255,255,255,0.4),inset 0 -1px 2px rgba(0,0,0,0.4),0 6px 20px -4px rgba(0,114,245,0.55)}
.spk-blue::after{background:radial-gradient(at 51% 89%,#74b9ff 0,transparent 50%),radial-gradient(at 100% 100%,#5AC8FA 0,transparent 50%),radial-gradient(at 22% 91%,#0072F5 0,transparent 50%);background-color:rgba(0,114,245,0.85)}
.spk-blue .dots_border::before{background:rgba(90,200,250,0.9)}
.spk-blue .sparkle .path{fill:#fff;stroke:#fff}
.spk-blue .spk-text{background-image:linear-gradient(90deg,#fff 0%,rgba(255,255,255,0.8) 120%)}
.star-float{animation:heroFloat 4s cubic-bezier(.45,.05,.55,.95) infinite}
.star-glow-gold{animation:goldPulse 4s ease-in-out infinite}
.star-glow-blue{animation:bluePulse 4s ease-in-out infinite}

/* ══════ NOTIFICATION ══════ */
@keyframes notifIn{
  0%  {transform:translateY(-115%) scale(0.85) rotateX(8deg);opacity:0;filter:blur(6px)}
  55% {transform:translateY(7px)   scale(1.02) rotateX(0deg);opacity:1;filter:blur(0)}
  75% {transform:translateY(-2px)  scale(0.998)}
  100%{transform:translateY(0)    scale(1);opacity:1;filter:blur(0)}
}
@keyframes notifOut{
  0%  {transform:translateY(0) scale(1);opacity:1;filter:blur(0)}
  40% {transform:translateY(-30%) scale(0.95);opacity:0.5;filter:blur(2px)}
  100%{transform:translateY(-115%) scale(0.88);opacity:0;filter:blur(8px)}
}
@keyframes notifGlow{
  0%,100%{opacity:0.55;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
@keyframes notifSwipe{
  0%{transform:translateX(-120%) skewX(-8deg)} 100%{transform:translateX(260%) skewX(-8deg)}
}
@keyframes notifRingSpin{
  0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}
}
@keyframes notifParticle{
  0%{transform:translate(0,0) scale(1);opacity:0.8}
  100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}
}
@keyframes notifPulseRing{
  0%{transform:scale(1);opacity:0.6}
  100%{transform:scale(1.9);opacity:0}
}
@keyframes notifIconBob{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-2px) scale(1.05)}
}
@keyframes notifAmtPop{
  0%{transform:scale(0.7) translateY(4px);opacity:0}
  60%{transform:scale(1.06) translateY(-1px);opacity:1}
  100%{transform:scale(1) translateY(0);opacity:1}
}
.notif-enter{animation:notifIn  .62s cubic-bezier(.22,1,.36,1) forwards}
.notif-exit {animation:notifOut .45s cubic-bezier(.4,0,1,1)   forwards}
.notif-amt-pop{animation:notifAmtPop .5s cubic-bezier(.34,1.56,.64,1) 0.25s both}
.notif-icon-bob{animation:notifIconBob 2.5s ease-in-out 0.3s infinite}