/* Auth surfaces. Same tokens as the landing page so the seam between the
   marketing site and the account pages is invisible. */
:root{
  --k-void:#06070A; --k-stage:#090C11; --k-body:#13171E; --k-lip:#2C333E;
  --k-mid:#1A1F28; --k-low:#0C1015;
  --lcd:#030406; --amber:#FFAE3D; --amber-hot:#FFC978; --amber-deep:#C8791F;
  --ink:#F0EDE4; --ink-2:#8B929D; --ink-3:#5F6673; --ink-4:#454C58;
  --bad:#FF5C4D; --good:#4ADE80;
  --face-plate:linear-gradient(172deg,#232935 0%,#161A21 44%,#0F1217 100%);
  --mold:
    inset 0 1px 0 rgba(226,238,255,.15), inset 1px 0 0 rgba(226,238,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.92), inset -1px 0 0 rgba(0,0,0,.7),
    -1px 2px 3px rgba(0,0,0,.75), -4px 16px 34px rgba(0,0,0,.6);
  --recess:
    inset 0 3px 9px rgba(0,0,0,.95), inset 2px 0 5px rgba(0,0,0,.7),
    inset 0 -1px 0 rgba(226,238,255,.08);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--k-void); color:var(--ink);
  font-family:Saira,-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,sans-serif;
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:40px 20px 60px;
}
a{color:var(--amber);text-decoration:none}
a:hover{color:var(--amber-hot);text-decoration:underline}

.wordmark{
  font-weight:750; font-size:1.15rem; letter-spacing:.02em; color:var(--ink);
  margin-bottom:26px; display:inline-block;
}
.wordmark:hover{text-decoration:none}
.wordmark b{color:var(--amber);font-weight:750}

.card{
  width:100%; max-width:420px; background:var(--face-plate);
  border:1px solid var(--k-seam,#000); border-radius:10px;
  box-shadow:var(--mold); padding:30px 28px 26px;
}
.card.wide{max-width:560px}
h1{font-size:1.4rem;font-weight:700;letter-spacing:-.01em;margin:0 0 6px}
.sub{color:var(--ink-2);font-size:.9rem;margin:0 0 22px}

label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.field{
  width:100%; background:var(--lcd); color:var(--ink);
  border:1px solid #000; border-radius:6px; box-shadow:var(--recess);
  padding:11px 12px; font:inherit; font-size:.95rem; margin-bottom:16px;
}
.field:focus{outline:none;border-color:var(--amber-deep);
  box-shadow:var(--recess),0 0 0 3px rgba(255,174,61,.16)}
.field::placeholder{color:var(--ink-4)}
textarea.field{resize:vertical;min-height:76px}
select.field{appearance:none;cursor:pointer}

.action{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(170deg,#333B47,#1A1F28 60%,#12161C);
  color:var(--ink); font:inherit; font-weight:650; font-size:.95rem;
  border:1px solid #000; border-radius:7px; padding:12px 18px; cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(226,238,255,.14),0 2px 5px rgba(0,0,0,.6);
}
.action:hover:not(:disabled){background:linear-gradient(170deg,#3E4655,#232935 60%,#171C24)}
.action:disabled{opacity:.55;cursor:not-allowed}
.action_lamp{width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px var(--amber);flex:none}

.alt{margin:18px 0 0;font-size:.85rem;color:var(--ink-2);text-align:center}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.hint{font-size:.78rem;color:var(--ink-3);margin:-10px 0 16px}

.msg{border-radius:6px;padding:11px 13px;font-size:.87rem;margin:0 0 18px;display:none}
.msg.on{display:block}
.msg.err{background:rgba(255,92,77,.1);border:1px solid rgba(255,92,77,.32);color:#FF9184}
.msg.ok{background:rgba(74,222,128,.09);border:1px solid rgba(74,222,128,.28);color:#86EFAC}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}