:root{
  --bg-0:#010105;
  --bg-1:#04030a;
  --card:#070612;
  --ink:#ecebff;
  --muted:#8f89bd;
  --accent:#6d54ff;
  --accent-2:#5331d1;
  --glow-1:rgba(109,84,255,0.26);
  --glow-2:rgba(83,49,209,0.20);
  --glow-3:rgba(30,20,80,0.14);
  --shadow:0 22px 70px rgba(0,0,0,0.65);
  --radius:20px;
  --gap:16px;
  --pad:24px
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg-0),var(--bg-1));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  opacity:0;
  transition:opacity 900ms ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale
}
body.Ready{opacity:1}

/* Static, GPU-cheap backdrop (no filters/animations) */
.Backdrop{
  position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(60vmax 60vmax at 28% 26%, var(--glow-1) 0%, transparent 60%),
    radial-gradient(70vmax 70vmax at 72% 64%, var(--glow-2) 0%, transparent 62%),
    radial-gradient(48vmax 48vmax at 16% 84%, var(--glow-3) 0%, transparent 66%);
}

/* Layout */
.Page{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:min(6vw,56px)
}

/* Card: remove backdrop-filter, keep depth via gradient + shadow */
.Card{
  width:100%;
  max-width:520px;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.018),rgba(255,255,255,0.008)),
    var(--card);
  border:1px solid rgba(109,84,255,0.14);
  border-radius:var(--radius);
  padding:clamp(24px,4vw,38px);
  box-shadow:var(--shadow);
  transform:translateY(8px) scale(.985);
  opacity:0;
  animation:CardIn 750ms cubic-bezier(.22,.61,.36,1) forwards 160ms
}
@keyframes CardIn{to{transform:translateY(0) scale(1);opacity:1}}

.Title{
  margin:0 0 6px 0;
  font-weight:700;
  letter-spacing:.2px;
  font-size:clamp(24px,3vw,32px)
}
.Subtitle{
  margin:0 0 18px 0;
  color:var(--muted);
  font-size:14px
}

.Form{display:grid;gap:var(--gap)}
.Field{position:relative}

.Input{
  width:100%;
  height:56px;
  padding:0 16px;
  color:var(--ink);
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(109,84,255,0.16);
  border-radius:14px;
  outline:none;
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease,opacity .2s ease;
  font-size:16px
}
.Input::placeholder{color:rgba(229,231,235,0.34)}
.Input:focus{box-shadow:0 0 0 2px rgba(109,84,255,0.58),0 0 28px rgba(109,84,255,0.26);border-color:var(--accent);background:rgba(255,255,255,0.042)}
.Input.Error{border-color:#ef4444;box-shadow:0 0 0 2px rgba(239,68,68,0.6)}
.Input:disabled{opacity:.6;cursor:not-allowed;filter:saturate(.2)}

.Button{
  position:relative;
  width:100%;
  height:56px;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff;
  font-weight:750;
  font-size:17px;
  letter-spacing:.06px;
  line-height:1;
  cursor:pointer;
  transition:transform .04s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease,background .3s ease;
  box-shadow:0 20px 48px rgba(83,49,209,0.40);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  overflow:hidden
}
.Button:active{transform:translateY(1px)}
.Button:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(109,84,255,0.7),0 0 28px rgba(109,84,255,0.3)}
.Button:disabled{cursor:not-allowed;filter:saturate(.35) brightness(.85)}

.Button .ButtonLabel,
.Button .Spinner,
.Button .Check{display:inline-flex;align-items:center;justify-content:center}

.Button .ButtonLabel{
  opacity:1;
  transform:translateY(0);
  transition:opacity .36s ease, transform .36s ease
}
.Button.Loading .ButtonLabel{opacity:0;transform:translateY(4px)}
.Button.Success .ButtonLabel{opacity:0;transform:translateY(4px)}
.Button.Completed .ButtonLabel{opacity:1;transform:translateY(0)}

.Spinner{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .24s ease
}
.Button.Loading .Spinner{opacity:1}
.Spinner::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color:#fff;
  animation:Spin 900ms linear infinite
}
@keyframes Spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

.Check{position:absolute; inset:0; opacity:0; transform:scale(.9);
  transition:opacity .3s ease,transform .36s cubic-bezier(.22,.61,.36,1)}
.Button.Success .Check{opacity:1; transform:scale(1)}
.CheckSvg{display:block; margin:0 auto; color:#fff}
.CheckRing{stroke-dasharray:64; stroke-dashoffset:64; opacity:.7}
.CheckMark{stroke-dasharray:26; stroke-dashoffset:26}
.Button.Success .CheckRing{animation:Dash 520ms ease forwards}
.Button.Success .CheckMark{animation:Dash 520ms 160ms ease forwards}
@keyframes Dash{to{stroke-dashoffset:0}}

.Button.Completed{
  background:linear-gradient(180deg,#2c2c36,#1f1f28);
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  color:#e7e7f5
}
.Button.Completed .Spinner{opacity:0}
.Button.Completed .Check{opacity:0;transform:scale(.96)}
.Button.Completed:disabled{filter:none}

/* Motion cutbacks for low-power environments */
@media (prefers-reduced-motion: reduce){
  body{transition:none}
  .Card{animation:none;opacity:1;transform:none}
  .Spinner::before{animation:none}
}