@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/poppins-400.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/poppins-500.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/poppins-600.ttf") format("truetype"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/poppins-700.ttf") format("truetype"); }

  :root{
    --page-bg:#EFF6FF;
    --card-bg:#FFFFFF;
    --ink:#1C1E20;
    --muted:#5B5F66;
    --border:#DEE3EE;
    --blue:#005EEB;
    --blue-focus:#0050C7;
    --amber:#EFA23E;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    font-family:'Poppins',sans-serif;
    background:var(--page-bg);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
  }

  .auth-card{
    width:100%;
    max-width:460px;
    background:var(--card-bg);
    border-radius:28px;
    box-shadow:0 20px 50px -20px rgba(28,30,32,0.14);
    padding:48px 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .wordmark{
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .wordmark img{
    height:23px;
    width:auto;
  }

  .heading-group{
    width:332px;
    max-width:100%;
    margin-top:40px;
    text-align:center;
  }

  h1{
    margin:0;
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:30px;
    line-height:40px; /* 125% */
    letter-spacing:0.32px;
    color:var(--ink);
  }

  .sub{
    margin:16px 0 0;
    font-family:'Poppins',sans-serif;
    font-weight:400;
    font-size:15px;
    line-height:24px;
    color:var(--muted);
  }
  .sub.tight{ margin-top:0; }

  .email-strong{
    margin:12px 0 0;
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:15px;
    line-height:24px;
    color:var(--ink);
  }

  .sub a{
    color:var(--blue);
    font-weight:500;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  .sub a:hover{ color:var(--blue-focus); }

  form{
    width:332px;
    max-width:100%;
    margin-top:40px;
    display:flex;
    flex-direction:column;
    gap:20px;
  }

  input{
    box-sizing:border-box;
    width:100%;
    padding:16px;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    color:var(--ink);
    background:#fff;
    border:1.5px solid var(--border);
    border-radius:16px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  input::placeholder{ color:#9AA0A6; letter-spacing:normal; }
  input:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(0,94,235,0.14);
  }
  input.error{ border-color:#C0392B; }

  .field-msg{
    font-size:13px;
    color:#C0392B;
    padding:0 16px;
    margin-top:-8px;
    display:none;
  }
  .field-msg.show{ display:block; }

  button.cta{
    box-sizing:border-box;
    width:100%;
    padding:16px;
    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:600;
    color:#fff;
    background:var(--blue);
    border:none;
    border-radius:16px;
    cursor:pointer;
    transition:background .15s ease, transform .05s ease;
  }
  button.cta:hover{ background:var(--blue-focus); }
  button.cta:active{ transform:scale(0.99); }
  button.cta:focus-visible{
    outline:3px solid rgba(0,94,235,0.35);
    outline-offset:2px;
  }
  button.cta[disabled]{ background:#8FB8F5; cursor:default; }

  .resend{
    margin-top:24px;
    background:none;
    border:none;
    padding:0;
    font-family:'Poppins',sans-serif;
    font-size:16px;
    font-weight:600;
    color:var(--blue);
    cursor:pointer;
  }
  .resend:hover{ color:var(--blue-focus); }
  .resend[disabled]{ color:#9AA0A6; cursor:default; }

  @media (max-width:520px){
    .auth-card{ padding:40px 28px; border-radius:20px; }
    .heading-group, form{ width:100%; }
    h1{ font-size:26px; line-height:34px; }
  }

body { color: var(--ink); }
main { width: 100%; display: flex; justify-content: center; }
.auth-card > div:not(.wordmark) { width: 100%; }
.heading-group { margin-inline: auto; }
#code { letter-spacing: 2px; }
.email-strong { overflow-wrap: anywhere; }
.text-button { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.text-button:hover { color: var(--blue-focus); }
button:focus-visible { outline: 3px solid rgba(0,94,235,.35); outline-offset: 3px; }
.text-button:disabled { color: #9AA0A6; cursor: default; }
.resend { display: block; margin-inline: auto; }
.message { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.message.error { color: #C0392B; padding: 0 16px; margin-top: -8px; }
#resend-message { text-align: center; margin-top: 16px; }
#resend-message:empty { display: none; }
input[aria-invalid="true"] { border-color: #C0392B; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.loading { margin-top: 40px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; }
.spinner { flex-shrink: 0; width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--blue); border-radius: 50%; animation: spin 800ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
[hidden] { display: none !important; }
@media (max-width:520px) { body { padding: 24px 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }