/* Login page styles — mirrors static/styles.css tokens. Served separately so
   CSP style-src 'self' is satisfied without 'unsafe-inline'. */
:root{
  --font-ui:"Hanken Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --bg:#EEF2F0; --surface:#FFFFFF; --surface-2:#F3F6F4; --surface-3:#EAF0EC;
  --ink:#0C1A13; --ink-2:#33453C; --muted:#5C6B63; --faint:#93A39A;
  --border:#E2E9E4; --border-2:#D3DDD7;
  --brand:#16A34A; --brand-strong:#117A38; --brand-tint:#E7F6ED; --brand-tint-2:#D6EFDF; --on-brand:#fff;
  --slate:#0D1B14; --red:#D8453B;
  --radius:14px; --radius-sm:10px; --radius-lg:20px;
  --shadow:0 4px 16px rgba(13,27,20,.06),0 1px 3px rgba(13,27,20,.05);
  --shadow-lg:0 18px 50px rgba(13,27,20,.13),0 4px 12px rgba(13,27,20,.07);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;
  font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 18% -10%, var(--brand-tint), transparent 60%),
    var(--bg);}
.card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:34px 30px;box-shadow:var(--shadow-lg)}
.brand{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.mark{width:38px;height:38px;border-radius:10px;background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-weight:800;font-size:20px;box-shadow:var(--shadow)}
.name{font-weight:800;font-size:20px;letter-spacing:-.02em}

/* Tab strip */
.tabs{display:flex;gap:0;margin-bottom:22px;border-bottom:1.5px solid var(--border)}
.tab{flex:1;padding:9px 0 10px;font:inherit;font-size:14px;font-weight:600;
  background:none;border:0;cursor:pointer;color:var(--faint);
  border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s}
.tab.active{color:var(--brand);border-bottom-color:var(--brand)}
.tab:hover:not(.active){color:var(--ink-2)}

.panel{display:none}
.panel.active{display:block}

h2{margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:13px;margin:0 0 20px;line-height:1.5}
label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);font-family:var(--font-mono);margin-bottom:7px;margin-top:14px}
label:first-of-type{margin-top:0}
.field{display:flex;align-items:center;border:1.5px solid var(--border-2);border-radius:var(--radius-sm);
  background:var(--surface);padding:2px 4px 2px 14px;transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint-2)}
.field input{flex:1;border:0;outline:none;background:none;font:inherit;font-size:15px;padding:11px 0;color:var(--ink)}
.field input::placeholder{color:var(--faint)}
.err{color:var(--red);font-size:12.5px;margin:10px 0 0;min-height:0}
.err.hidden{display:none}
.success{color:var(--brand-strong);font-size:12.5px;margin:10px 0 0;font-weight:500}
.success.hidden{display:none}
button.submit{margin-top:18px;width:100%;border:0;border-radius:var(--radius-sm);
  background:var(--brand);color:var(--on-brand);font:inherit;font-weight:600;font-size:15px;
  padding:13px;cursor:pointer;transition:background .15s}
button.submit:hover{background:var(--brand-strong)}
button.submit:disabled{opacity:.6;cursor:default}
.foot{margin-top:18px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.5}
.pw-hint{font-size:11px;color:var(--faint);margin:5px 0 0;line-height:1.4}
#signup-confirm-screen{display:none;text-align:center;padding:12px 0}
.confirm-check{font-size:36px;margin-bottom:12px}
.confirm-h2{margin-bottom:6px}
.confirm-sub{margin-bottom:20px}