/* auth.css — the look shared by the pages you reach when you can't sign in: /code, /forgot and
   /reset. Centred, one icon, one sentence, one button. Built on the tokens in styles.css. */
body{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:28px 18px;background:
    radial-gradient(900px 420px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg)}
.auth-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--border);
  border-radius:20px;box-shadow:0 1px 2px rgba(18,24,26,.04),0 18px 48px rgba(18,24,26,.10);
  padding:34px 28px 26px;text-align:center}
.auth-brand{display:flex;justify-content:center;margin-bottom:26px}
.auth-brand img{display:block;width:132px;height:auto}
.badge{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-ink)}
.badge svg{width:26px;height:26px}
.badge.good{background:var(--good-soft);color:var(--good)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
h1{margin:0 0 8px;font-size:22px;font-weight:750;letter-spacing:-0.02em}
.sub{margin:0 auto 24px;max-width:300px;color:var(--text-dim);font-size:14.5px;line-height:1.55}
.sub b{color:var(--text);font-weight:650;overflow-wrap:anywhere}
form{text-align:left}
label{display:block;font-size:12.5px;font-weight:650;color:var(--text-dim);margin:0 0 6px}
input[type=email],input[type=text],input[type=password]{width:100%;padding:13px 14px;font-size:16px;
  font-family:inherit;color:var(--text);background:var(--bg);border:1.5px solid transparent;
  border-radius:12px;margin-bottom:14px;transition:border-color .15s,box-shadow .15s,background .15s}
input:focus{outline:none;background:var(--panel);border-color:var(--accent-ink);box-shadow:0 0 0 4px var(--accent-soft)}
input.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:700;
  letter-spacing:.42em;text-indent:.42em;text-align:center;padding:14px 6px;margin-bottom:10px}
.go{display:block;width:100%;margin-top:4px;padding:14px 20px;border:none;border-radius:12px;cursor:pointer;
  font-size:15.5px;font-weight:700;font-family:inherit;text-align:center;text-decoration:none;
  background:var(--accent);color:var(--on-accent);transition:background .15s,transform .05s}
.go:hover{background:var(--accent-deep)}
.go:active{transform:translateY(1px)}
.go[disabled]{opacity:.6;cursor:default}
.check{display:flex;align-items:center;gap:8px;margin:2px 0 14px;font-size:13.5px;font-weight:500;color:var(--text-dim);cursor:pointer}
.check input{width:auto;margin:0}
.hint{font-size:12.5px;color:var(--text-faint);margin:-8px 0 14px}
.msg{padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;margin:0 0 16px;text-align:left}
.msg.bad{background:var(--bad-soft);color:var(--bad)}
.msg.good{background:var(--good-soft);color:var(--good)}
.alt{margin-top:20px;font-size:13.5px;color:var(--text-dim)}
.alt a,.link{color:var(--accent-ink);font-weight:650;text-decoration:none;background:none;border:none;
  font:inherit;font-weight:650;cursor:pointer;padding:0}
.alt a:hover,.link:hover{text-decoration:underline}
.foot{margin-top:18px;font-size:12.5px;color:var(--text-faint)}
.foot a{color:var(--text-dim);text-decoration:none}
.foot a:hover{color:var(--accent-ink)}
.spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}