:root{
  --bg:#0b1020;
  --text:#eaf0ff;
  --muted:#a7b3d6;

  --ok:#22c55e;
  --err:#ef4444;

  --accent:#6d28d9;
  --accent2:#2563eb;

  --card: rgba(255,255,255,0.045);
  --card2: rgba(255,255,255,0.02);
  --stroke: rgba(255,255,255,0.09);
  --stroke2: rgba(255,255,255,0.06);
  --shadow: 0 22px 80px rgba(0,0,0,0.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* Animated background */
.bg{
  position:fixed; inset:0;
  z-index:-1;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(26,42,108,0.85) 0%, rgba(11,16,32,0.92) 55%, rgba(11,16,32,1) 72%),
    radial-gradient(800px 520px at 10% 20%, rgba(109,40,217,0.22) 0%, rgba(109,40,217,0) 60%),
    radial-gradient(700px 500px at 90% 30%, rgba(37,99,235,0.18) 0%, rgba(37,99,235,0) 55%);
}

.orb{
  position:absolute;
  width:520px; height:520px;
  border-radius:999px;
  filter: blur(48px);
  opacity:0.55;
  animation: float 10s ease-in-out infinite;
}
.o1{left:-160px; top:-180px; background: radial-gradient(circle at 30% 30%, rgba(109,40,217,0.9), rgba(109,40,217,0)); animation-duration: 13s;}
.o2{right:-220px; top:80px; background: radial-gradient(circle at 30% 30%, rgba(37,99,235,0.85), rgba(37,99,235,0)); animation-duration: 15s; animation-delay:-3s;}
.o3{left:15%; bottom:-260px; background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.45), rgba(34,197,94,0)); animation-duration: 18s; animation-delay:-6s;}

@keyframes float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-22px,0) scale(1.03); }
}

.grain{
  position:absolute; inset:0;
  opacity:0.12;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Layout */
.app{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.card{
  width:min(720px, 100%);
  background: transparent;
  border:none;
  border-radius:0;
  padding: 10px 16px;
  box-shadow:none;
  position:relative;
  overflow:visible;
  transform-origin: 50% 70%;
  animation: cardIn 520ms cubic-bezier(.2,.9,.2,1) both;
}
@keyframes cardIn{
  from{ transform: translateY(14px) scale(0.99); opacity:0; }
  to{ transform: translateY(0) scale(1); opacity:1; }
}

.header{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin-bottom:14px;
}

.logo{
  width:48px;height:48px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 40px rgba(0,0,0,0.30);
  font-size:22px;
  user-select:none;
  transition: transform 200ms ease, filter 200ms ease;
}
.logo.pop{ transform: scale(1.06) rotate(-2deg); filter: brightness(1.15); }

.headtxt h1{margin:0;font-size:20px; letter-spacing:0.2px}
.headtxt p{margin:6px 0 0;color:var(--muted); line-height:1.35}

.fade-swap{
  animation: fadeSwap 220ms ease both;
}
@keyframes fadeSwap{
  from{ opacity:0.35; transform: translateY(2px); }
  to{ opacity:1; transform: translateY(0); }
}

.status-area{
  position:relative;
  z-index:2;

  position:relative;
  padding:14px;
  border-radius:18px;
  min-height:252px;
  overflow:hidden;
}

/* FX canvases (full-screen) */
.confetti-canvas,
.fx-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.fx-canvas{ opacity:0.95; }
.confetti-canvas{ opacity:1; }

.flash{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(1400px 700px at 50% 50%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 20% 30%, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;
  filter: blur(0.2px);
}
.flash--on{
  animation: flashPop 520ms ease-out both;
}
@keyframes flashPop{
  0%{ opacity:0; transform: scale(0.99); }
  12%{ opacity:1; }
  100%{ opacity:0; transform: scale(1.02); }
}

/* Loading skeleton */
.loading-box{
  position:relative;
  z-index:2;
  display:flex;
  gap:12px;
  align-items:center;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
}

.spinner{
  width:18px;height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.85);
  animation: spin 900ms linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.loading-lines{flex:1; display:flex; flex-direction:column; gap:8px}
.loading-lines .l1,
.loading-lines .l2{
  height:10px;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  background-size: 220% 100%;
  animation: shimmer 1200ms ease-in-out infinite;
}
.loading-lines .l1{ width:72%}
.loading-lines .l2{ width:56%; opacity:0.8; animation-delay:-240ms}
@keyframes shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}

.ok-box,.err-box{
  position:relative;
  z-index:2;
  padding:18px;
  border-radius:16px;
  margin-top:10px;
  animation: rise 260ms ease both;
}
@keyframes rise{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.ok-box{
  }
.err-box{
  border:1px solid rgba(239,68,68,0.35);
  background: rgba(239,68,68,0.10);
}

.big{font-size:18px;font-weight:800}
.small{margin-top:8px;color:var(--muted); line-height:1.35}

.sparkle{
  position:absolute; inset:-2px;
  border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(10px 10px at 20% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0) 60%),
    radial-gradient(12px 12px at 70% 40%, rgba(255,255,255,0.28), rgba(255,255,255,0) 60%),
    radial-gradient(10px 10px at 55% 75%, rgba(255,255,255,0.24), rgba(255,255,255,0) 60%);
  opacity:0.65;
  animation: sparkle 2.2s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{ transform: translateY(0); opacity:0.55; }
  50%{ transform: translateY(-2px); opacity:0.75; }
}

.missing{
  position:relative; z-index:2;
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  }
.missing h2{margin:0 0 10px;font-size:16px}
.missing ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}

.item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(0,0,0,0.20);
  border:1px solid rgba(255,255,255,0.06);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.26);
}

.item .left{display:flex;flex-direction:column;gap:2px; min-width:0}
.item .u{font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .d{font-size:12px;color:var(--muted)}

a.sub{
  text-decoration:none;
  color:white;
  background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(109,40,217,0.95));
  border:1px solid rgba(255,255,255,0.12);
  padding:8px 10px;
  border-radius:14px;
  font-weight:800;
  white-space:nowrap;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transition: transform 140ms ease, filter 140ms ease;
}
a.sub:active{ transform: translateY(1px) scale(0.99); }
a.sub:hover{ filter: brightness(1.08); transform: translateY(-1px); }

.btn{
  margin-top:12px;
  width:100%;
  border:0;
  padding:13px 14px;
  border-radius:16px;
  background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(109,40,217,0.95));
  color:white;
  font-weight:900;
  letter-spacing:0.2px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,0.30);
  transition: transform 140ms ease, filter 140ms ease;
}
.btn:hover{ filter: brightness(1.05); transform: translateY(-1px); }
.btn:active{ transform: translateY(1px) scale(0.99); }
.btn:disabled{ opacity:0.55; filter:none; transform:none; }

.btn__label{ position:relative; z-index:1; }
.btn__shine{
  position:absolute; inset:-40px -30%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.25), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: shine 2.6s ease-in-out infinite;
  opacity:0.55;
}
@keyframes shine{
  0%{ transform: translateX(-120%) rotate(18deg); opacity:0; }
  25%{ opacity:0.55; }
  55%{ transform: translateX(120%) rotate(18deg); opacity:0; }
  100%{ opacity:0; }
}

.footer{
  margin-top:12px;
  text-align:center;
}
.muted{color:rgba(234,240,255,0.58);font-size:12px}

.hidden{display:none}

@keyframes shake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-10px)}
  40%{transform:translateX(10px)}
  60%{transform:translateX(-8px)}
  80%{transform:translateX(8px)}
}
.shake{animation:shake 600ms ease-in-out}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .orb, .btn__shine, .spinner, .loading-lines .l1, .loading-lines .l2, .card, .ok-box, .err-box, .fade-swap{
    animation:none !important;
  }
  .btn, a.sub, .item, .logo{
    transition:none !important;
  }
}