/* Inloggen, registreren, e-mail bevestigen en /accounts.
   Zelfde ontwerpsysteem als de marketingsite (public/marketing.css): dezelfde
   kleurtokens, General Sans voor koppen, Bai Jamjuree voor ondertekst, Inter
   voor bediening, en de kaart met verloop van de netwerk-/featurekaarten.
   Layout: logo, één kaart met de flow, eronder één strak blok kleine lettertjes. */
@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; }
@font-face{ font-family:"General Sans"; src:url("/fonts/generalsans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
:root{
  --bg:#0a0e17; --panel-hi:#1a2235; --panel-lo:#141a26; --field:#0d121c; --field-focus:#0f1626;
  --text:#eaeef7; --muted:#96a2ba; --subtle:#6a7488; --line:rgba(255,255,255,.07);
  --primary:#2563eb; --primary-hover:#3b82f6; --link:#8fb0ff; --err:#f87171;
  --display:"General Sans","Inter Tight","Inter",system-ui,sans-serif;
  --ui:"Inter",system-ui,sans-serif;
  --sub:"Bai Jamjuree","Inter",system-ui,sans-serif;
  --t-body:.94rem; --t-small:.86rem; --t-micro:.75rem; --t-label:.7rem;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
/* hidden moet altijd winnen, ook van display:flex op .or, .step en .msg. */
[hidden]{display:none!important}
html{height:100%}
body{min-height:100%}
body{
  font-family:var(--ui); -webkit-font-smoothing:antialiased; color:var(--text); letter-spacing:-0.01em;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--bg);
  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;
}
a{ color:inherit; }

.clockbar{ display:flex; align-items:center; justify-content:safe center; gap:12px; flex-wrap:nowrap; overflow-x:auto;
  padding:5px 12px; background:#080b13; box-shadow:0 1px 0 rgba(255,255,255,.045); scrollbar-width:none; }
.clockbar::-webkit-scrollbar{display:none}
.clock{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap}
.clock-city{color:var(--subtle); font-weight:600; font-size:11px; letter-spacing:.3px}
.clock-time{color:var(--muted); font-weight:500; font-size:11px; font-variant-numeric:tabular-nums}
.clock-sep{flex:0 0 auto; width:1px; height:11px; background:rgba(255,255,255,.08)}
.c-full{display:none} .c-short{display:inline}

.auth{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-block:44px 20px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.panel{ width:100%; max-width:404px; display:flex; flex-direction:column; align-items:stretch; }
.logo{ display:block; width:132px; height:auto; margin:0 auto 26px; opacity:.95; }

/* De kaart: hetzelfde oppervlak als .feat-card op de site. */
.card{ background:linear-gradient(180deg,var(--panel-hi),var(--panel-lo)); border-radius:20px; padding:30px 28px 0;
  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); }
.step{ display:flex; flex-direction:column; gap:14px; padding-bottom:26px; }
.card-foot{ margin:0 -28px; padding:15px 28px 16px; border-top:1px solid var(--line); text-align:center;
  font-family:var(--sub); font-size:var(--t-small); color:var(--muted); }
.card-foot a{ color:var(--link); text-decoration:none; font-weight:500; margin-left:4px; }
.card-foot a:hover{ text-decoration:underline; }

.eyebrow{ font-family:var(--ui); font-size:var(--t-label); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--primary-hover); }
h1{ font-family:var(--display); font-weight:600; font-size:1.6rem; line-height:1.18; letter-spacing:-.03em; color:#f4f6fb; text-wrap:balance; }
.sub{ font-family:var(--sub); color:var(--muted); font-size:var(--t-body); line-height:1.55; text-wrap:pretty; }
.head{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.head.center{ text-align:center; align-items:center; }

/* De officiële Google-knop (Google Identity Services tekent hem zelf). */
.gwrap{ display:flex; justify-content:center; min-height:44px; }
/* Het Google-iframe is zelf licht. Met color-scheme:dark op de pagina tekent de
   browser er een ondoorzichtige witte rechthoek achter; gelijk zetten op light
   maakt de iframe-achtergrond weer transparant, zodat alleen de pil zichtbaar is. */
.gwrap, .gwrap iframe{ color-scheme:light; background:transparent; }
.or{ display:flex; align-items:center; gap:12px; color:var(--subtle); font-size:var(--t-label); font-weight:600; text-transform:uppercase; letter-spacing:.16em; }
.or::before,.or::after{ content:""; flex:1; height:1px; background:var(--line); }

.field{ position:relative; display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:var(--t-micro); color:var(--muted); font-weight:600; letter-spacing:.01em; }
.field input{ width:100%; padding:13px 44px 13px 15px; border-radius:12px; background:var(--field); border:none;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
  color:var(--text); font-size:16px; font-family:var(--ui); letter-spacing:.005em; transition:box-shadow .16s ease, background .16s ease; }
.field input::placeholder{ color:rgba(255,255,255,.28) }
.field input:focus{ outline:none; background:var(--field-focus); 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); }
.field input[aria-invalid="true"]{ box-shadow:inset 0 2px 5px rgba(0,0,0,.5), 0 0 0 2px rgba(248,113,113,.6); }
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,.field input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 100px var(--field) inset, inset 0 2px 5px rgba(0,0,0,.55); caret-color:#fff; transition:background-color 9999s ease-in-out 0s; }
.eye{ position:absolute; right:6px; bottom:6px; width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; color:rgba(255,255,255,.4); padding:0; border-radius:8px; }
.eye:hover{ color:rgba(255,255,255,.85) } .eye svg{ width:17px; height:17px }
.eye:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.hint{ font-size:var(--t-micro); color:var(--subtle); margin-top:-6px; }

.btn{ width:100%; padding:13px 20px; border-radius:12px; cursor:pointer; font-family:var(--ui); font-size:.9rem; font-weight:600; letter-spacing:.005em; text-align:center; color:#fff;
  border:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none;
  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, opacity .14s ease; }
.btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn:disabled{ opacity:.6; cursor:default; transform:none; }
/* Zelfde opstaande knop als "Log in" op de site, geen dun lijntje. */
.btn-ghost{ width:100%; padding:13px 20px; border-radius:12px; cursor:pointer; font-family:var(--ui); font-size:.9rem; font-weight:600; color:var(--text);
  background:linear-gradient(180deg,#223052 0%,#18213a 100%); border:none;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px -2px rgba(0,0,0,.65);
  display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; transition:transform .14s ease, filter .14s ease; }
.btn-ghost:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.btn-ghost svg{ width:17px; height:17px; opacity:.9; }
.btn:focus-visible,.btn-ghost:focus-visible,.link:focus-visible,.card-foot a:focus-visible,.fine a:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:6px; }
.spin{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce){ .spin{ animation-duration:2.4s } .btn,.btn-ghost{ transition:none } }

.row{ display:flex; justify-content:flex-end; margin-top:-4px; }
.link{ color:var(--link); text-decoration:none; font-size:var(--t-small); background:none; border:none; cursor:pointer; font-family:var(--ui); padding:0; }
.link:hover{ text-decoration:underline; }
.link.quiet{ color:var(--muted); align-self:center; }
.back{ display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:var(--t-small); background:none; border:none; cursor:pointer; font-family:var(--ui); padding:2px 0; align-self:flex-start; margin:-6px 0 0 -2px; }
.back:hover{ color:#fff; }
.msg{ border-radius:12px; padding:11px 14px; font-size:var(--t-small); line-height:1.5; }
.msg.err{ background:rgba(248,113,113,.1); color:#fecaca; box-shadow:inset 0 0 0 1px rgba(248,113,113,.28); }
.msg.info{ background:rgba(37,99,235,.13); color:#dbe5ff; box-shadow:inset 0 0 0 1px rgba(59,130,246,.3); }
.msg.ok{ background:rgba(52,211,153,.1); color:#c9f5df; box-shadow:inset 0 0 0 1px rgba(52,211,153,.26); }
.check{ display:flex; gap:10px; align-items:flex-start; font-family:var(--sub); font-size:var(--t-small); color:var(--muted); line-height:1.45; cursor:pointer; }
.check input{ width:16px; height:16px; margin-top:2px; flex:none; accent-color:var(--primary); }
.check a{ color:var(--link); text-decoration:none; } .check a:hover{ text-decoration:underline; }

/* Kleine lettertjes onder de kaart: één compact blok, één maat, één kleur. */
.fine{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center;
  font-family:var(--ui); font-size:var(--t-micro); line-height:1.5; color:var(--subtle); text-wrap:balance; }
.fine a{ color:var(--muted); text-decoration:none; }
.fine a:hover{ color:var(--text); text-decoration:underline; }

/* /accounts: het account-label en de stappen. */
.who{ align-self:center; display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:6px 12px 6px 10px; border-radius:99px;
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px var(--line); font-size:var(--t-micro); color:var(--muted); }
.who span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.who::before{ content:""; width:7px; height:7px; border-radius:50%; background:#34d399; box-shadow:0 0 0 3px rgba(52,211,153,.15); flex:none; }
.list{ display:flex; flex-direction:column; gap:10px; }
.acct{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:12px; color:var(--text); font:inherit; cursor:pointer; text-align:left; width:100%; border:none;
  background:linear-gradient(180deg,#223052 0%,#18213a 100%); box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 6px -2px rgba(0,0,0,.65); }
.acct:hover{ filter:brightness(1.1); }
.acct small{ color:var(--muted); display:block; font-size:var(--t-micro); margin-top:2px; text-transform:capitalize; }
/* De stappen zijn echt een volgorde (aanvraag -> beoordeling -> verificatie),
   dus genummerd en met een lijn die ze verbindt. */
  background:rgba(37,99,235,.18); box-shadow:inset 0 0 0 1px rgba(59,130,246,.38); font-variant-numeric:tabular-nums; }
.actions{ display:flex; flex-direction:column; gap:10px; }

.langbar{ display:flex; align-items:center; justify-content:center; gap:13px; padding:16px 16px 26px; }
.flag{ width:30px; height:21px; border-radius:5px; cursor:pointer; padding:0; overflow:hidden; position:relative; background:none; border:1px solid rgba(255,255,255,.30);
  box-shadow:0 1px 2px rgba(0,0,0,.55), inset 0 1px 1px rgba(255,255,255,.4); opacity:.5; transition:opacity .18s ease, transform .12s ease; }
.flag svg{ display:block; width:100%; height:100% }
.flag:hover{ opacity:.85 } .flag.active{ opacity:1; transform:translateY(-1px); box-shadow:0 0 0 2px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.55); }
.flag:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Mobiel: grotere aanraakvlakken zonder dat de tekst verschuift. Tekstlinks
   krijgen een onzichtbare marge rondom (padding + negatieve marge); knoppen
   en vlaggen minstens 40-44px. */
.card-foot a,.fine a,.row .link{ display:inline-block; padding:12px 6px; margin:-12px -6px; }
/* In de onderrand staat de link naast de vraag: ruimte ertussen houden. */
.card-foot a{ margin-left:2px; }
.card-foot{ padding-block:12px 13px; }
.back{ padding:12px 0; margin:-14px 0 -8px -2px; }
.eye{ width:42px; height:42px; right:2px; bottom:2px; }
.link.quiet{ padding:12px 10px; margin:-12px 0; }
.flag{ overflow:visible; }
.flag svg{ border-radius:4px; }
.flag::before{ content:""; position:absolute; inset:-12px -7px; }
.check{ padding-block:4px; }
.eyebrow{ font-size:.72rem; }

@media (max-width:440px){
  .auth{ padding-block:26px 14px; }
  .logo{ width:116px; margin-bottom:20px; }
  .card{ padding:24px 20px 0; border-radius:18px; }
  .card-foot{ margin:0 -20px; padding:14px 20px 15px; }
  .step{ padding-bottom:22px; }
  h1{ font-size:1.42rem; }
}

/* Bewegende blauwe lichtbundels achter de pagina (zie public/beams.js). */
.beams-bg{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; filter:blur(6px); }
/* Glass fold-achtergrond (public/glass-fold.js): scherp, iets gedimd achter de kaart. */
.beams-bg.glas{ filter:none; opacity:.45; }

/* ===== Glaskaart (inspiratie: "modern stunning sign-in") ===== */
/* Geldt voor de kaart op signup, verify, reset enz. en voor /login op mobiel. */
.card{ border-radius:28px; padding:32px 28px 0;
  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); }
.card-foot{ border-top-color:rgba(255,255,255,.07); }
/* Logo in een glazen rondje boven de kaart. */
.panel > a:first-child{ 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); }
.panel > a:first-child .logo{ height:26px !important; width:auto; margin:0; }
/* Velden: zacht wit glas, ronde hoeken; knoppen rond. */
.field input{ border-radius:14px; background:rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.field 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); }
.field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 100px #23262c inset; }
.btn, .btn-ghost{ border-radius:999px; }
.btn-ghost{ background:linear-gradient(180deg,#2a2d31,#232526); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }

/* Login/signup-details (21-10-2026) */
/* Voorwaarden-regel onder de vlaggen. */
.langbar{ padding-bottom:10px; }
.fine.fine-onder{ margin:0 auto; padding:0 16px max(18px, env(safe-area-inset-bottom, 0px)); max-width:420px; }
/* Signup: logo in het midden boven de kop, kop en ondertitel gecentreerd. */
.card.kaart-met-logo{ position:relative; }
.kaart-logo{ display:flex; justify-content:center; margin:0 auto 4px; }
.kaart-logo img{ height:30px !important; width:auto; display:block; margin:0 !important; }
.kaart-met-logo .head.center{ text-align:center; align-items:center; padding-left:0; }
/* Oogje precies midden in het wachtwoordveld. */
.field{ position:relative; }
.field .eye{ top:auto; bottom:0; height:var(--veld-h, 48px); right:8px; display:flex; align-items:center; }
.card .field{ --veld-h:46px; } .card .field input{ height:46px; padding-top:0; padding-bottom:0; -webkit-appearance:none; } .card .field .eye{ height:46px; }
/* Google-knop: onzichtbaar (maar met zijn ruimte) tot Google hem klaar heeft. */
.gwrap{ transition:opacity .25s ease; }
.gwrap.g-wacht{ opacity:0; pointer-events:none; }