@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ---- variables & reset ---- */
:root{
  --clr-bg-start:#0f172a;
  --clr-bg-end:#1e293b;
  --clr-accent:#38bdf8;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}

/* ---- layout ---- */
body{
  font-family:'Inter',Arial,Helvetica,sans-serif;
  height:100vh;
  background:linear-gradient(135deg,var(--clr-bg-start),var(--clr-bg-end));
  display:flex;align-items:center;justify-content:center;
  color:#e2e8f0;
  overflow-x:hidden;
}
.card{
  backdrop-filter:blur(14px);
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius);
  box-shadow:0 6px 30px rgba(0,0,0,.25);
  max-width:460px;width:90%;
  padding:42px 32px 36px;
  text-align:center;
}
/* …everything else exactly as in the inline version… */

/* Hide honeypot from humans */
.honeypot {
  position: absolute;
  left: -9999px;
}

/* hide the status messages until JS decides which one to show */
.msg,
.error {
  display: none;
}