:root{
  --navy:#061437;
  --black:#02030a;

  --pink:#ff4fc3;
  --pink2:#ff9ad8;
  --cyan:#39e6ff;
  --gold:#ffd27d;

  --text:#f7f2ff;
  --muted:#d1c3f0;

  --shadow: 0 22px 70px rgba(0,0,0,.55);
  --ring: 0 0 0 2px rgba(255,79,195,.22), 0 0 34px rgba(57,230,255,.14);
  --radius: 18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 18% -10%, rgba(255,79,195,.16), transparent 60%),
    radial-gradient(900px 520px at 88% 8%, rgba(57,230,255,.14), transparent 60%),
    radial-gradient(900px 520px at 55% 110%, rgba(255,210,125,.10), transparent 62%),
    linear-gradient(160deg, var(--navy), var(--black) 55%, #02030a);
  min-height:100vh;
  overflow-x:hidden;
}

.container{width:min(1100px, 92vw); margin:0 auto; padding:24px 0 90px;}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.pad{padding:20px}

.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:7px 12px; border-radius:999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}

.btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:999px;
  padding:11px 15px;
  font-weight:900;
  color:var(--text);
  background: rgba(255,79,195,.10);
  border:1px solid rgba(255,79,195,.30);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover{transform: translateY(-1px); filter:brightness(1.05)}
.btn:active{transform: translateY(1px) scale(.99)}

.btn.primary{
  background: linear-gradient(90deg, rgba(255,79,195,.20), rgba(57,230,255,.16));
  box-shadow: var(--ring), 0 10px 26px rgba(0,0,0,.25);
}
.btn.ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
}

input{
  width:100%;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  outline:none;
}
input:focus{box-shadow: var(--ring)}
input::placeholder{ color: rgba(209,195,240,.65); }

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr;} }

footer{margin-top:24px; color:rgba(246,241,255,.55); font-size:13px; text-align:center;}

.nav{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(3,6,15,.86), rgba(3,6,15,.35));
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav-inner{
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:12px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:900;}
.dot{
  width:12px;height:12px;border-radius:50%;
  background: linear-gradient(180deg, var(--pink), var(--pink2));
  box-shadow: 0 0 18px rgba(255,154,216,.55);
}
.navlinks{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.navlinks a{
  color:var(--muted);
  font-weight:900;
  font-size:14px;
  padding:8px 10px;
  border-radius:999px;
  text-decoration:none;
}
.navlinks a:hover{color:var(--text); background:rgba(255,255,255,.06)}

.toast{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:22px;
  z-index:90;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding:10px 14px;
  border-radius:999px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  font-weight:900;
  max-width:min(560px,92vw);
  text-align:center;
  opacity:0;
  transition:opacity .2s ease;
}
.modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.65);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:80;
  padding:18px;
}
.modal.show{display:flex}
.modal-card{
  width:min(760px, 96vw);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(12,18,40,.92), rgba(0,0,0,.86));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
  padding:18px;
}
.modal-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px;}
.x{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding:8px 12px;
  cursor:pointer;
  color: var(--text);
  font-weight:900;
}



.hero{
  border-radius: 26px;
  padding: 22px;
  background:
    radial-gradient(800px 420px at 18% 10%, rgba(255,210,125,.14), transparent 60%),
    radial-gradient(700px 420px at 86% 10%, rgba(255,79,195,.12), transparent 60%),
    radial-gradient(700px 420px at 60% 120%, rgba(57,230,255,.10), transparent 65%),
    linear-gradient(160deg, rgba(6,20,55,.85), rgba(0,0,0,.55));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.nameGlow{
  background: linear-gradient(90deg, rgba(255,210,125,.95), rgba(57,230,255,.92), rgba(255,154,216,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.subline{ color: rgba(247,242,255,.82); line-height:1.75; max-width: 72ch; }



.gateWrap{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding:18px; z-index:100;
  background: radial-gradient(900px 520px at 18% -10%, rgba(255,79,195,.22), transparent 60%),
              radial-gradient(900px 520px at 88% 8%, rgba(57,230,255,.18), transparent 60%),
              radial-gradient(900px 520px at 55% 110%, rgba(255,210,125,.12), transparent 62%),
              linear-gradient(160deg, rgba(6,20,55,.98), rgba(0,0,0,.94));
}
.gate-card{ width:min(560px,96vw); border-radius:24px; background:rgba(0,0,0,.35); backdrop-filter:blur(12px); }



#sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nav, .container, #gate, .modal, .toast{ position: relative; z-index: 2; }

#sky .moon{
  position:absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  left: 6%;
  top: 6%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(57,230,255,.10), transparent 60%),
    radial-gradient(circle at 45% 70%, rgba(255,79,195,.10), transparent 62%);
  box-shadow: 0 0 60px rgba(255,255,255,.08);
  opacity:.95;
}

#sky .stars, #sky .shooting-stars, #sky .float-layer{ position:absolute; inset:0; }


#sky .star{
  position:absolute;
  opacity: var(--o, .85);
  transform: rotate(var(--r, 0deg));
  animation: twinkle calc(var(--tw, 4) * 1s) ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(255,255,255, calc(var(--g, .35))));
}


#sky .star.star5{
  width: var(--s, 16px);
  height: var(--s, 16px);
  background: var(--c, rgba(255,255,255,.95));
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}


#sky .star.tiny5{
  width: var(--s, 10px);
  height: var(--s, 10px);
  background: var(--c, rgba(255,255,255,.95));
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}


#sky .star.spark4{
  width: var(--s, 12px);
  height: var(--s, 12px);
}
#sky .star.spark4::before,
#sky .star.spark4::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background: var(--c, rgba(255,255,255,.95));
  transform: translate(-50%,-50%);
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(255,255,255, calc(var(--g, .35))));
}
#sky .star.spark4::before{ width: 140%; height: 2px; }
#sky .star.spark4::after{ width: 2px; height: 140%; }



#sky .star.dot{
  width: var(--s, 3px);
  height: var(--s, 3px);
  background: var(--c, rgba(255,255,255,.95));
  border-radius: 999px;
}



#sky .streak{
  position:absolute;
  width: var(--w, 180px);
  height: 2px;
  opacity: var(--o, .14);
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );
  transform: rotate(var(--r, 0deg));
  border-radius: 999px;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.10));
}



@keyframes twinkle{
  0%,100%{ opacity: var(--o,.85); transform: rotate(var(--r,0deg)) scale(1); }
  50%{ opacity: 1; transform: rotate(var(--r,0deg)) scale(1.08); }
}


#sky .star.cross::before,
#sky .star.cross::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background: inherit;
  opacity:.9;
  transform: translate(-50%, -50%);
  border-radius:999px;
}
#sky .star.cross::before{ width:140%; height:2px; }
#sky .star.cross::after { width:2px;  height:140%; }



#sky .star.glow{
  box-shadow: 0 0 6px currentColor, 0 0 14px currentColor;
}

@keyframes twinkle{
  0%,100%{ opacity: var(--o,.75); transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.25); }
}

#sky .shoot{
  position:absolute;
  width: 260px;
  height: 2px;
  transform: rotate(-18deg);
  transform-origin: left center;
  opacity:0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(57,230,255,.25), rgba(255,255,255,0));
  filter: drop-shadow(0 0 14px rgba(255,255,255,.20));
  animation: shoot var(--t, 9s) ease-in-out infinite;
  border-radius: 999px;
}
@keyframes shoot{
  0%   { transform: translate3d(-40vw, -10vh, 0) rotate(-18deg); opacity:0; }
  8%   { opacity:.55; }
  18%  { opacity:0; }
  100% { transform: translate3d(120vw, 55vh, 0) rotate(-18deg); opacity:0; }
}

#sky .float-item{
  position:absolute;
  left: var(--x, 50vw);
  top: 110vh;
  width: var(--w, 44px);
  height: var(--h, 44px);
  opacity: var(--o, .4);
  transform: rotate(var(--r, 0deg));
  animation: floatUp var(--d, 18s) linear infinite;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));
}
@keyframes floatUp{
  0%{ transform: translateY(0) rotate(var(--r,0deg)); }
  100%{ transform: translateY(-140vh) rotate(calc(var(--r,0deg) + 35deg)); }
}



#sky .sunflower{
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(91,58,18,.98) 0 18%, transparent 19%),
    radial-gradient(circle at 50% 50%, rgba(255,210,125,.95) 0 34%, transparent 35%),
    conic-gradient(from 8deg, rgba(255,210,125,.96), rgba(255,183,58,.95), rgba(255,210,125,.96));
  box-shadow: inset 0 0 10px rgba(0,0,0,.18), 0 0 30px rgba(255,210,125,.10);
}

#sky .vignette{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 700px at 50% 30%, transparent 55%, rgba(0,0,0,.45) 100%);
  opacity: .95;
}



#sparkles{
  position:fixed; inset:0; z-index:3;
  pointer-events:none; overflow:hidden;
}
.spark{
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,79,195,.35), transparent 70%);
  box-shadow: 0 0 18px rgba(255,255,255,.25), 0 0 30px rgba(57,230,255,.16);
  animation: sparkPop .9s ease both;
}
@keyframes sparkPop{
  0%{ opacity:0; transform: translate(-50%, -50%) scale(.6); }
  40%{ opacity:1; transform: translate(-50%, -50%) scale(1.15); }
  100%{ opacity:0; transform: translate(-50%, -70%) scale(.9); }
}


.vaultImg{
  width:100%;
  max-width: 640px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  display:block;
  margin-top:12px;
}



.giftWrap{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-top:14px;
}

.gift{
  position:relative;
  width:240px;
  height:210px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
}

.gift .box{
  position:absolute;
  inset:auto 14px 14px 14px;
  height:140px;
  border-radius:16px;
  background: linear-gradient(180deg, rgba(255,79,195,.18), rgba(57,230,255,.12));
  border:1px solid rgba(255,255,255,.10);
}

.gift .lid{
  position:absolute;
  left:10px; right:10px;
  top:22px;
  height:70px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  transform-origin: left bottom;
  transition: transform .35s ease, top .35s ease;
}

.gift .ribbon{
  position:absolute;
  left:50%;
  top:22px;
  width:16px;
  height:160px;
  transform:translateX(-50%);
  background: rgba(255,210,125,.45);
  border-radius:999px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

.gift .carImg{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) scale(.92);
  width:170px;
  opacity:0;
  transition: opacity .35s ease, transform .35s ease;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.35));
}

.gift.open .lid{
  top:6px;
  transform: rotate(-18deg) translateY(-10px);
}

.gift.open .carImg{
  opacity:1;
  transform:translateX(-50%) scale(1);
}