:root {
  --ink: hsl(222 47% 11%); --ink-16: hsl(222 40% 16%); --ink-30: hsl(215 20% 30%); --ink-35: hsl(215 20% 35%);
  --muted: hsl(215 16% 47%); --muted-60: hsl(215 14% 60%); --line: hsl(214 20% 91%); --line-84: hsl(214 20% 84%); --line-94: hsl(214 20% 94%);
  --surface-98: hsl(210 20% 98%); --surface-985: hsl(210 20% 98.5%); --surface-96: hsl(210 20% 96%); --surface-97: hsl(210 20% 97%); --surface-92: hsl(210 20% 92%);
  --brand: hsl(221 83% 53%); --brand-hover: hsl(221 83% 47%); --brand-45: hsl(221 83% 45%); --brand-42: hsl(221 83% 42%); --brand-40: hsl(221 83% 40%); --brand-96: hsl(221 83% 96%); --brand-line: hsl(221 70% 88%); --ring: hsl(221 83% 53% / .25); --muted-btn: hsl(221 20% 80%);
  --field-bad: hsl(0 72% 72%); --red-bg: hsl(0 72% 97%); --red-line: hsl(0 72% 88%); --red-dot: hsl(0 72% 51%); --red-fg: hsl(0 72% 45%); --red-fg-38: hsl(0 72% 38%); --red-fg-42: hsl(0 60% 42%);
  --amber-bg: hsl(38 92% 95%); --amber-line: hsl(38 80% 80%); --amber-dot: hsl(38 92% 50%); --amber-fg: hsl(38 80% 30%); --amber-fg-2: hsl(38 60% 32%);
  --green-bg: hsl(152 40% 96%); --green-line: hsl(152 30% 82%); --green-dot: hsl(152 58% 38%); --green-fg: hsl(152 58% 30%); --green-fg-2: hsl(152 58% 28%); --green-fg-3: hsl(152 58% 26%);
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-card: 0 1px 4px #14141426;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
.mono { font-family: var(--font-mono); }
a { color: var(--brand-45); text-decoration: none; }
a:hover { color: var(--brand-42); text-decoration: underline; }
input::placeholder { color: var(--muted-60); }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-split { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
/* A 3200x2000 snapshot of the shader (frame 114500, darkest behind the logo) shows until the live shader
   fades in, and stays when WebGL2 is unavailable. Anchored top-left so the dark area stays behind the logo;
   the gradient underneath uses the snapshot's own colours for the moment before the image loads. */
.auth-split { background: url("../images/auth-background.e86181009e5e.webp") left top / cover no-repeat, linear-gradient(160deg, #28428e 0%, #3368e0 45%, #7494e3 100%); }
@media (prefers-reduced-motion: no-preference) { .auth-split > canvas { animation: auth-bg-in .6s ease both; } }
@keyframes auth-bg-in { from { opacity: 0; } }
.auth-brand { color: #fff; padding: 44px 44px 32px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-brand-top { display: flex; align-items: center; gap: 12px; }
.auth-brand-logo { flex-shrink: 0; }
/* The SVB figure builds itself on load: head, arms drawn from the top, body halves sliding in, then S, V and B
   grow one by one out of a point at their own centre (like Jitter's Apple-logo template).
   Transforms on SVG parts are in viewBox units (127 wide at 47px), so 14 units ≈ 5px on screen. */
.auth-logo { display: block; width: 47px; height: 56px; color: #fff; }
.auth-logo-head, .auth-logo-arc, .auth-logo-letter { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .auth-logo-head { animation: svb-logo-pop .5s cubic-bezier(.2,.7,.2,1) both; }
  .auth-logo-ring { stroke-dasharray: 1; animation: svb-logo-draw .9s cubic-bezier(.65,0,.35,1) .15s both; }
  .auth-logo-arc { animation: svb-logo-slide .7s cubic-bezier(.2,.7,.2,1) .45s both; }
  .auth-logo-arc--right { --svb-logo-from: 14px; }
  .auth-logo-letter { animation: svb-logo-letter .6s cubic-bezier(.16,1,.3,1) calc(.85s + var(--svb-letter) * .12s) both; }
}
@keyframes svb-logo-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes svb-logo-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes svb-logo-slide { from { opacity: 0; transform: translateX(var(--svb-logo-from, -14px)); } }
@keyframes svb-logo-letter { from { opacity: 0; transform: scale(0); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
.auth-brand-hero { max-width: 320px; padding: 32px 0; }
.auth-brand-hero h2 { margin: 0 0 14px; font-size: 27px; line-height: 1.22; font-weight: 600; letter-spacing: -.02em; text-wrap: pretty; }
.auth-brand-hero p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.68); text-wrap: pretty; }
.auth-brand-foot { display: flex; flex-direction: column; gap: 10px; }
.auth-brand-secure { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.72); }
.auth-brand-secure .dot { width: 7px; height: 7px; border-radius: 50%; background: hsl(152 58% 62%); flex-shrink: 0; }
.auth-brand-version { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.42); }
/* Brand and pane share one cell so the card centres on the page; the pane's padding keeps it clear of the logo (44 + 56px) and version. */
.auth-brand, .auth-pane { grid-area: 1 / 1; }
.auth-pane { display: flex; align-items: center; justify-content: center; padding: 132px 40px; }
.auth-card { width: 100%; max-width: 472px; padding: 40px; border-radius: 4px; background: #fff; box-shadow: var(--shadow-card); }
.auth-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-60); margin-bottom: 10px; }
.auth-h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.auth-lead { margin: 0 0 24px; font-size: 14px; color: var(--muted); text-wrap: pretty; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field label, .auth-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-30); margin-bottom: 6px; }
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.auth-label-row .auth-label { margin-bottom: 0; }
.auth-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-84); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff; outline: none; transition: border-color .12s, box-shadow .12s; }
.auth-input:focus, .auth-code:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.auth-input.is-invalid, .auth-code.is-invalid { border-color: var(--field-bad); }
.auth-hint { font-size: 12px; color: var(--muted-60); margin-top: 6px; }
.auth-error { font-size: 12.5px; color: var(--red-fg-42); margin-top: 6px; }
.auth-toggle { appearance: none; border: 0; background: transparent; padding: 0; font-family: inherit; font-size: 12.5px; font-weight: 500; color: var(--brand-45); cursor: pointer; }
.auth-toggle:hover { color: var(--brand-40); text-decoration: underline; }
.auth-checkbox { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-30); cursor: pointer; }
.auth-checkbox input { width: 15px; height: 15px; accent-color: var(--brand); margin: 0; cursor: pointer; }
.auth-checkbox-note { font-size: 12px; color: var(--muted-60); margin-top: 5px; padding-left: 24px; }
.auth-row-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.auth-link-strong { font-size: 13.5px; font-weight: 500; white-space: nowrap; padding-top: 1px; }
.auth-btn { width: 100%; height: 42px; border: 1px solid var(--brand); background: var(--brand); color: #fff; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background .12s, border-color .12s; }
.auth-btn:hover { background: var(--brand-hover); }
.auth-btn.is-loading { background: var(--muted-btn); border-color: var(--muted-btn); cursor: default; }
.auth-btn--secondary { background: #fff; color: var(--ink); border-color: var(--line-84); box-shadow: none; font-weight: 500; }
.auth-btn--secondary:hover { background: var(--surface-97); }
.auth-btn-sm { height: 34px; padding: 0 13px; width: auto; font-size: 13px; font-weight: 500; }
.auth-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.auth-actions-col { display: flex; flex-direction: column; gap: 12px; }
.auth-actions-row { display: flex; gap: 10px; flex-wrap: wrap; }
.auth-actions-row .auth-btn { flex: 1; min-width: 150px; }
.auth-alert { display: flex; gap: 10px; padding: 12px 13px; margin-bottom: 18px; border-radius: 10px; border: 1px solid; }
.auth-alert .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.auth-alert-title { font-size: 13.5px; font-weight: 600; }
.auth-alert-body { font-size: 13px; margin-top: 2px; }
.auth-alert--red { border-color: var(--red-line); background: var(--red-bg); }
.auth-alert--red .dot { background: var(--red-dot); }
.auth-alert--red .auth-alert-title { color: var(--red-fg-38); }
.auth-alert--red .auth-alert-body { color: var(--red-fg-42); }
.auth-alert--amber { border-color: var(--amber-line); background: var(--amber-bg); }
.auth-alert--amber .dot { background: var(--amber-dot); }
.auth-alert--amber .auth-alert-title { color: var(--amber-fg); }
.auth-alert--amber .auth-alert-body { color: var(--amber-fg-2); }
.auth-alert--green { border-color: var(--green-line); background: var(--green-bg); }
.auth-alert--green .dot { background: var(--green-dot); }
.auth-alert--green .auth-alert-body { color: var(--green-fg-2); }
.auth-alert--gray { border-color: var(--line); background: var(--surface-98); }
.auth-alert--gray .dot { background: var(--muted-60); }
.auth-alert--gray .auth-alert-body { color: var(--ink-35); text-wrap: pretty; }
.auth-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: 999px; margin-bottom: 14px; border: 1px solid; }
.auth-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
.auth-pill--blue { background: var(--brand-96); color: var(--brand-45); border-color: var(--brand-line); }
.auth-pill--blue .dot { background: var(--brand); }
.auth-pill--amber { background: var(--amber-bg); color: var(--amber-fg); border-color: var(--amber-line); }
.auth-pill--amber .dot { background: var(--amber-dot); }
.auth-pill--green { background: var(--green-bg); color: var(--green-fg); border-color: var(--green-line); }
.auth-pill--green .dot { background: var(--green-dot); }
.auth-pill--red { background: var(--red-bg); color: var(--red-fg); border-color: var(--red-line); }
.auth-pill--red .dot { background: var(--red-dot); }
.auth-note-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--surface-985); }
.auth-note-title { font-size: 13.5px; font-weight: 600; color: var(--ink-16); margin-bottom: 8px; }
.auth-note-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.auth-note-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-60); margin-bottom: 8px; }
.auth-footnote { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-94); font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.auth-back { margin-top: 22px; }
.auth-check { width: 40px; height: 40px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-line); display: grid; place-items: center; color: var(--green-fg); font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.auth-code { width: 186px; height: 48px; padding: 0 14px; border: 1px solid var(--line-84); border-radius: 8px; font-family: var(--font-mono); font-size: 22px; letter-spacing: .22em; color: var(--ink); background: #fff; outline: none; transition: border-color .12s, box-shadow .12s; }
.auth-strength { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.auth-bars { display: flex; gap: 4px; flex: 1; }
.auth-bar { height: 4px; flex: 1; border-radius: 999px; background: var(--surface-92); transition: background .18s; }
.auth-strength-label { font-size: 12px; font-weight: 600; min-width: 74px; text-align: right; color: var(--muted-60); }
.auth-rules { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.auth-rule { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.auth-rule .mark { width: 15px; height: 15px; border-radius: 50%; background: var(--surface-96); border: 1px solid var(--line); display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--green-fg); flex-shrink: 0; }
.auth-rule.is-met { color: var(--green-fg); }
.auth-rule.is-met .mark { background: hsl(152 40% 94%); border-color: hsl(152 30% 78%); }
.auth-rule.is-pending { color: var(--ink-35); }
.auth-skip { position: fixed; left: -9999px; top: 24px; background: #fff; padding: 8px 12px; border: 1px solid var(--line-84); border-radius: 8px; font-size: 13px; z-index: 70; }
.auth-skip:focus { left: 24px; }
@media (max-width: 800px) { .auth-brand, .auth-pane { grid-area: auto; } .auth-brand { min-height: auto; padding: 24px; gap: 32px; } .auth-brand-hero { padding: 0; max-width: 100%; } .auth-brand-hero h2 { font-size: 22px; } .auth-pane { padding: 8px 16px 32px; align-items: flex-start; } .auth-card { padding: 28px 24px; } }

/* Read by screen readers, not shown: the trusted-device warning stays the checkbox's description. */
.auth-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tweestapsverificatie instellen after login — Paper `19 · 2FA instellen`. */
.auth-btn:disabled { background: var(--muted-btn); border-color: var(--muted-btn); cursor: default; }
.auth-btn--secondary:disabled { background: #fff; border-color: var(--line); color: var(--muted-60); }
.auth-btn--secondary svg { color: var(--muted); }
.auth-link-button { appearance: none; border: 0; background: none; padding: 0; font-family: inherit; font-size: 13.5px; font-weight: 500; color: var(--brand-45); cursor: pointer; }
.auth-link-button:hover { color: var(--brand-42); text-decoration: underline; }
.auth-setup h1:focus { outline: none; }
.auth-setup-actions { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.auth-setup-error { margin: 18px 0 0; }
.auth-setup-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; }
.auth-setup-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 20px; color: var(--ink-30); }
.auth-setup-steps li + li { border-top: 1px solid var(--line); }
.auth-setup-steps .num { width: 22px; height: 22px; border-radius: 50%; background: var(--brand-96); color: var(--brand-45); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.auth-setup-qr { display: flex; gap: 18px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
.auth-setup-qr img { width: 148px; height: 148px; flex-shrink: 0; image-rendering: pixelated; }
.auth-setup-manual { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.auth-setup-manual-title { font-size: 12.5px; font-weight: 600; line-height: 18px; color: var(--ink-30); }
.auth-setup-manual-text { font-size: 12.5px; line-height: 18px; color: var(--muted); }
.auth-setup-key { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; color: var(--ink); background: var(--surface-98); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere; }
.auth-setup-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-98); font-family: var(--font-mono); font-size: 13px; line-height: 22px; color: var(--ink); }
.auth-setup-codebtns { display: flex; gap: 8px; margin-top: 12px; }
.auth-setup-status { margin-top: 8px; font-size: 12.5px; line-height: 18px; color: var(--muted); }
.auth-setup-status:empty { display: none; }
.auth-setup-confirm { margin-top: 18px; }