/* Tweestapsverificatie en beveiligingsinstellingen: zelfde ontwerpsysteem als
   /login, /signup en de marketingsite (zie public/auth.css): logo boven één
   kaart met het verloop van de featurekaarten, General Sans voor koppen, Bai
   Jamjuree voor ondertekst, Inter voor bediening. Klassen ongewijzigd. */
@font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
:root{ --ink:#eaeef7; --muted:#96a2ba; --subtle:#6a7488; --line:rgba(255,255,255,.07); --accent:#3b82f6; --link:#8fb0ff;
  --bg:#0a0e17; --field:#0d121c; --panel-hi:#1a2235; --panel-lo:#141a26;
  --display:"General Sans","Inter Tight","Inter",system-ui,sans-serif; --ui:"Inter",system-ui,sans-serif; --sub:"Bai Jamjuree","Inter",system-ui,sans-serif;
  color-scheme:dark; }
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:var(--ui);-webkit-font-smoothing:antialiased;letter-spacing:-0.01em;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-block:32px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  background-image:radial-gradient(1100px 560px at 50% -260px, rgba(37,99,235,.16) 0%, rgba(10,14,23,0) 68%);background-attachment:fixed;background-repeat:no-repeat}
.logo{display:block;width:132px;height:auto;margin:0 auto 26px;opacity:.95}
.card{width:100%;max-width:420px;border-radius:20px;padding:30px 28px;background:linear-gradient(180deg,var(--panel-hi),var(--panel-lo));
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 28px 56px -26px rgba(0,0,0,.75)}
.brand{display:none}
h1{font-family:var(--display);font-weight:600;font-size:1.45rem;line-height:1.2;letter-spacing:-.03em;color:#f4f6fb;margin-bottom:10px;text-wrap:balance}
h2{font-family:var(--display);font-weight:600;letter-spacing:-.015em}
p.sub{font-family:var(--sub);color:var(--muted);font-size:.94rem;line-height:1.55;margin-bottom:22px;text-wrap:pretty}
label{display:block;font-size:.75rem;font-weight:600;color:var(--muted);margin-bottom:7px;letter-spacing:.01em}
input{width:100%;border:none;border-radius:12px;padding:13px 15px;font-family:var(--ui);font-size:16px;color:var(--ink);background:var(--field);margin-bottom:16px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);transition:box-shadow .16s ease}
input::placeholder{color:rgba(255,255,255,.22)}
input:focus{outline:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05), 0 0 0 3px rgba(37,99,235,.35)}
/* Het code-veld: groot, cijfers op vaste breedte met ruimte ertussen. */
input#code{text-align:center;font-family:var(--display);font-weight:600;font-size:1.6rem;letter-spacing:.42em;padding:15px 10px 15px calc(10px + .42em);font-variant-numeric:tabular-nums}
button{width:100%;border:none;border-radius:12px;color:#fff;font-family:var(--ui);font-weight:600;font-size:.9rem;padding:13px 20px;cursor:pointer;
  background:radial-gradient(90% 120% at 28% 14%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 62%), linear-gradient(180deg,#3a6ad8 0%,#1c3f9c 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, 0 10px 22px -14px rgba(28,63,156,.75);transition:transform .14s ease, filter .14s ease}
button:hover{transform:translateY(-1px);filter:brightness(1.06)}
button:disabled{opacity:.55;cursor:default;transform:none}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
button.ghost,button.sec{background:linear-gradient(180deg,#223052 0%,#18213a 100%);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px -2px rgba(0,0,0,.65);margin-top:10px}
.err{background:rgba(248,113,113,.1);color:#fecaca;border-radius:12px;padding:11px 14px;font-size:.86rem;line-height:1.5;margin-bottom:16px;display:none;box-shadow:inset 0 0 0 1px rgba(248,113,113,.28)}
.err.show{display:block}
/* QR op een witte tegel (scanners hebben contrast nodig), verder in de kaart. */
.qr{display:flex;justify-content:center;margin:2px 0 18px}
.qr svg{width:196px;height:196px;border-radius:14px;background:#fff;padding:10px;box-shadow:0 12px 30px -18px rgba(0,0,0,.8)}
.key{background:var(--field);border-radius:12px;padding:12px 14px;font-family:ui-monospace,Menlo,monospace;font-size:.9rem;letter-spacing:.1em;text-align:center;word-break:break-all;margin-bottom:18px;color:#dbe5ff;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05)}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 18px}
.codes span{background:var(--field);border-radius:10px;padding:10px;font-family:ui-monospace,Menlo,monospace;font-size:.9rem;text-align:center;color:#dbe5ff;box-shadow:inset 0 0 0 1px var(--line)}
.note{background:rgba(234,179,8,.09);border-radius:12px;padding:12px 14px;font-size:.84rem;line-height:1.5;color:#f5dfa6;margin-bottom:16px;box-shadow:inset 0 0 0 1px rgba(240,196,120,.22)}
.check{display:flex;gap:10px;align-items:flex-start;padding-block:10px;font-family:var(--sub);font-size:.86rem;color:var(--muted);margin-bottom:16px;line-height:1.45;cursor:pointer}
.check input{width:16px;height:16px;margin:2px 0 0;flex:none;box-shadow:none;accent-color:#2563eb;padding:0}
.alt{text-align:center;font-size:.8rem;color:var(--subtle);margin-top:14px}
.alt a{color:var(--muted);cursor:pointer;text-decoration:none;display:inline-block;padding:12px 6px;margin:-8px -6px}
.alt a:hover{color:var(--ink);text-decoration:underline}
.hint{font-size:.75rem;color:var(--subtle);margin:-8px 0 16px;line-height:1.45}
p.sub b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ok{text-align:center}
.ok .tick{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 16px;color:#c9f5df;
  background:rgba(52,211,153,.14);box-shadow:inset 0 0 0 1px rgba(52,211,153,.35)}
.note{margin-top:4px}
input[hidden]{display:none!important}
@media (max-width:440px){ .card{padding:24px 20px;border-radius:18px} .logo{width:116px;margin-bottom:20px} h1{font-size:1.3rem} .qr svg{width:180px;height:180px} }

/* ===== Glaskaart, zelfde als /login en /signup (21-10-2026) ===== */
.beams-bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
.beams-bg.glas{ opacity:.45; }
body > a:first-of-type{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 22px;
  border-radius:50%; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 10px 24px -10px rgba(0,0,0,.7); }
body > a:first-of-type .logo, body > .logo{ height:26px !important; width:auto; margin:0; }
.card{ border-radius:28px; padding:32px 28px;
  background:linear-gradient(105deg, rgba(255,255,255,.07) 0%, rgba(18,18,18,.55) 100%);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -30px rgba(0,0,0,.9); }
h1{ text-align:center; } p.sub{ text-align:center; }
input{ border-radius:14px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
input:focus{ background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(148,163,184,.35); }
.key, .codes span{ background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
button{ border-radius:999px; }
button.ghost, button.sec{ background:linear-gradient(180deg,#2a2d31,#232526); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.qr svg{ border-radius:18px; }
@media (max-width:440px){ .card{ padding:26px 20px; border-radius:24px; } }