/* Self-hosted brand fonts (SECURITY-AUDIT M8): no third-party font request. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/mulish-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/mulish-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/mulish-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Mulish';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/mulish-latin-800-normal.woff2') format('woff2')}
/* SafelyHeld family sign-in / register — calm, warm, matches the marketing site. */
:root{
  --paper:#faf8f5; --surface:#fff; --ink:#1f2933; --slate:#56616e; --faint:#8a94a0;
  --clay:#c2553d; --clay-dk:#a3432f; --sage:#5f8468; --line:#e7e2da; --slate:#2a3340;
  --fh:'Bricolage Grotesque',Georgia,serif; --fb:'Mulish',-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--fb);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--fh);font-weight:700;font-size:1.4rem;margin-bottom:22px;color:var(--slate)}
/* Brand mark — the cradled square (slate outline + clay bar), per src/Brand.jsx */
.mark{width:28px;height:28px;display:inline-block;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><rect x='2.5' y='2.5' width='19' height='19' rx='6' stroke='%232a3340' stroke-width='2'/><rect x='6.5' y='11' width='11' height='7' rx='3' fill='%23c2553d'/></svg>") center/contain no-repeat}
.brand b{color:var(--clay)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:30px 28px;width:100%;max-width:430px;box-shadow:0 8px 30px rgba(31,41,51,.06)}
h1{font-family:var(--fh);font-size:1.6rem;margin:0 0 8px;letter-spacing:-.01em}
p.sub{color:var(--slate);font-size:1rem;line-height:1.55;margin:0 0 20px}
label{display:block;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700;margin:14px 0 5px}
input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:16px;background:#fff;color:var(--ink)}
input:focus{outline:none;border-color:var(--clay)}
.btn{width:100%;margin-top:20px;background:var(--clay);color:#fff;border:none;border-radius:10px;padding:13px;font-weight:700;font-family:inherit;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--clay-dk)}
.btn:disabled{opacity:.55;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);margin-top:10px}
.err{background:#fbeae7;border:1px solid #f1cfc8;color:#9c4a33;border-radius:10px;padding:11px 13px;margin:14px 0 0;font-size:.92rem}
.ok{background:#e9f3ec;border:1px solid #cfe6d6;color:#3f6b4a;border-radius:10px;padding:11px 13px;margin:0 0 14px;font-size:.92rem}
.muted{color:var(--faint);font-size:.85rem;margin-top:16px;line-height:1.5}
.qr{display:inline-block;background:#fff;padding:12px;border:1px solid var(--line);border-radius:12px}
.codes{font-family:ui-monospace,Menlo,monospace;background:#faf7f3;border:1px solid var(--line);border-radius:10px;padding:14px;line-height:2;letter-spacing:.05em;font-size:15px}
a{color:var(--clay-dk)}
.foot{margin-top:18px;font-size:.82rem;color:var(--faint);text-align:center;max-width:430px}