:root{
  --bg:#FAFAFA;
  --surface:#FFFFFF;
  --border:#E4E4E7;
  --border-strong:#D4D4D8;
  --text:#0A0A0A;
  --muted:#71717A;
  --faint:#A1A1AA;
  --accent:#2563EB;
  --accent-soft:#EFF4FF;
  --error:#DC2626;
  --r-card:18px;
  --r-field:10px;
  --ff-body:'Parkinsans',sans-serif;
  --ff-mono:'JetBrains Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 1px) 0 0/22px 22px,
    var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}

.page{
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1.6rem;
}
.brand-mark{
  width:26px;height:26px;border-radius:7px;background:var(--text);
  color:var(--bg);display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:.72rem;font-weight:600;flex-shrink:0;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2;}
.brand-name{
  font-family:var(--ff-mono);font-size:.85rem;letter-spacing:.02em;color:var(--text);font-weight:600;
}
.brand-by{
  font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.05em;color:var(--muted);
  text-transform:uppercase;margin-top:.1rem;
}

.card{
  width:100%;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:2.25rem 1.9rem;
  box-shadow:0 1px 2px rgba(0,0,0,.03), 0 16px 40px -24px rgba(0,0,0,.18);
}

.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.03em;color:var(--muted);
  background:var(--bg);border:1px solid var(--border);border-radius:999px;
  padding:.3rem .65rem;margin-bottom:1.1rem;
}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}

h1{
  margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em;line-height:1.25;
}
.sub{
  margin:.6rem 0 0;font-size:.92rem;color:var(--muted);line-height:1.5;max-width:36ch;
}

form{margin-top:1.8rem;}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field label{
  font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
}
.code-input{
  font-family:var(--ff-mono);font-size:.98rem;letter-spacing:.02em;color:var(--text);
  padding:.85rem .95rem;border:1px solid var(--border-strong);border-radius:var(--r-field);
  background:var(--surface);width:100%;transition:border-color .15s ease, box-shadow .15s ease;
}
.code-input::placeholder{color:var(--faint);}
.code-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none;}
.code-input[data-error="true"]{border-color:var(--error);}

.error-msg{
  display:none;margin-top:.5rem;font-size:.8rem;color:var(--error);
}
.error-msg.show{display:block;}

.submit-btn{
  margin-top:1rem;width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--text);color:var(--bg);border:none;border-radius:var(--r-field);
  padding:.85rem 1rem;font-family:var(--ff-body);font-size:.95rem;font-weight:600;
  cursor:pointer;transition:background .15s ease, transform .1s ease;
}
.submit-btn:hover{background:#262626;}
.submit-btn:active{transform:scale(.98);}
.submit-btn:disabled{opacity:.75;cursor:default;}
.submit-btn .arrow{transition:transform .15s ease;}
.submit-btn:hover .arrow{transform:translateX(2px);}

.spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(250,250,250,.35);border-top-color:var(--bg);
  animation:spin .7s linear infinite;display:none;
}
.submit-btn[data-loading="true"] .spinner{display:inline-block;}
.submit-btn[data-loading="true"] .btn-label,
.submit-btn[data-loading="true"] .arrow{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

.trust-list{
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.65rem;
}
.trust-item{
  display:flex;align-items:flex-start;gap:.55rem;font-size:.8rem;color:var(--muted);line-height:1.45;
}
.trust-icon{width:14px;height:14px;flex-shrink:0;margin-top:.16rem;color:var(--accent);}

.help{
  margin-top:1.4rem;text-align:center;font-size:.83rem;color:var(--muted);
}
.help a{color:var(--accent);text-decoration:none;}
.help a:hover{text-decoration:underline;}

.foot{
  margin-top:1.8rem;font-family:var(--ff-mono);font-size:.7rem;color:var(--faint);
  letter-spacing:.02em;
}
.legal{
  margin-top:.45rem;font-family:var(--ff-mono);font-size:.66rem;color:var(--faint);
  letter-spacing:.01em;opacity:.85;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}