:root{
  --ink-950:#0b111b; --ink-900:#111827; --ink-800:#162033; --ink-700:#1e2a40;
  --mineral:#f7faff; --mist:#a9b3c5; --mist-dim:#7c8798; --line:#22304a;
  --blue:#3e8cff; --danger:#ff6b6b;
  --flow:linear-gradient(90deg,#b02eff 0%,#8a4dff 25%,#6666ff 50%,#3e8cff 75%,#30c4f4 100%);
}
*{box-sizing:border-box}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  margin:0;padding:6vh 1rem 4rem;color:var(--mineral);background:var(--ink-950);
  line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{margin:0 auto}
.wrap.narrow{max-width:26rem}
.wrap.wide{max-width:56rem}
.err{color:var(--danger)}
.flush{margin-top:0}
.gap{margin-top:1.4rem}
.centered{text-align:center}
.full{width:100%}
.brand{display:flex;align-items:center;gap:.6rem;justify-content:center;
  margin-bottom:1.5rem;font-weight:600;letter-spacing:-.01em;font-size:1.05rem}
.brand .bar{width:38px;height:3px;border-radius:2px;background:var(--flow)}
h1{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin:0 0 .35rem}
h2{font-size:1rem;font-weight:600;margin:1.75rem 0 .5rem}
.card{background:var(--ink-900);border:1px solid var(--line);border-radius:18px;
  padding:1.6rem}
label{display:block;font-size:.8125rem;font-weight:500;color:var(--mist);
  margin:.9rem 0 .35rem}
input,select{width:100%;padding:.6rem .75rem;border:1px solid var(--line);
  border-radius:8px;background:var(--ink-950);color:var(--mineral);font:inherit;
  font-size:.9375rem}
input:focus,select:focus{outline:none;border-color:var(--blue)}
input::placeholder{color:var(--mist-dim)}
button{padding:.6rem 1rem;border:0;border-radius:8px;background:var(--mineral);
  color:var(--ink-950);cursor:pointer;font:inherit;font-weight:600;
  font-size:.9375rem;margin-top:1.1rem}
button:hover{background:#e6edfa}
button.secondary{background:var(--ink-800);color:var(--mineral);
  border:1px solid var(--line);font-weight:500}
button.secondary:hover{background:var(--ink-700)}
button.wide{width:100%}
.sso{display:flex;flex-direction:column;gap:.55rem;margin:0 0 1.1rem}
.sso-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;
  width:100%;box-sizing:border-box;padding:.6rem 1rem;border-radius:8px;
  background:var(--ink-800);color:var(--mineral);border:1px solid var(--line);
  font-weight:500;font-size:.9375rem;line-height:1.4;text-decoration:none}
.sso-btn:hover{background:var(--ink-700);text-decoration:none}
.sso-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* Fixed box so both marks occupy the same width: Google's is square and
   GitHub's is not, and letting each size itself leaves the two labels
   starting at different x positions, which reads as a misalignment bug. */
.sso-btn svg{flex:none;width:18px;height:18px}
ul{padding-left:1.1rem;color:var(--mist)}
.muted{color:var(--mist);font-size:.875rem}
form.inline{display:inline}
form.inline button{margin-right:.4rem}
table{width:100%;border-collapse:collapse;margin:.5rem 0 1rem;font-size:.875rem}
th,td{text-align:left;padding:.5rem .6rem .5rem 0;border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--mist-dim);font-weight:500}
code{background:var(--ink-800);padding:.12rem .35rem;border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}
.notice{background:var(--ink-950);border:1px solid var(--line);
  border-left:2px solid var(--blue);padding:.7rem .9rem;border-radius:8px;
  color:var(--mist);font-size:.875rem;margin:.9rem 0}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}