/* Inloggen, account aanmaken, wachtwoord vergeten/herstellen, e-mail
   bevestigen, uitnodiging en nieuwsbrief-aanmelding (body.auth-page) in de
   stijl van de website (functie.css): Manrope/Inter, blauw, ronde kaart.
   Laadt na app.css en theme.css; geen inline stijlen (CSP). */

@font-face{font-family:"Manrope";src:url("../fonts/manrope-variable.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

.auth-page,.status-page{--fx-bg:#0e0f12;--fx-alt:#121318;--fx-card:#17181d;--fx-soft:#1e1f25;--fx-line:#2a2b33;--fx-ink:#f4f5f8;--fx-muted:#9ca3af;--fx-primary:#6d9cff;--fx-primary-solid:#2563eb;--fx-primary-soft:rgba(37,99,235,.16);--fx-accent:#2dd4bf;--fx-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 44px rgba(0,0,0,.45);--fx-dot:rgba(255,255,255,.05);
    background:var(--fx-bg);color:var(--fx-ink);font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html[data-theme="light"] .auth-page,html[data-theme="light"] .status-page{--fx-bg:#ffffff;--fx-alt:#f8fafc;--fx-card:#ffffff;--fx-soft:#f8fafc;--fx-line:#e2e8f0;--fx-ink:#0f172a;--fx-muted:#64748b;--fx-primary:#2563eb;--fx-primary-soft:#eff6ff;--fx-accent:#14b8a6;--fx-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 40px rgba(37,99,235,.12);--fx-dot:rgba(15,23,42,.045)}

/* Linkerkant: merk en belofte */
.auth-page .auth-branding,html[data-theme="light"] .auth-page .auth-branding{border-right:1px solid var(--fx-line);background-color:var(--fx-alt);background-image:radial-gradient(60% 50% at 70% 20%,rgba(37,99,235,.14),transparent 70%),radial-gradient(50% 45% at 15% 85%,rgba(20,184,166,.10),transparent 70%),radial-gradient(var(--fx-dot) 1px,transparent 1px);background-size:auto,auto,24px 24px}
html .auth-page .eyebrow,html[data-theme="light"] .auth-page .eyebrow{color:var(--fx-primary)!important;font-size:13px!important;letter-spacing:.08em}
.auth-page .eyebrow>span{display:none}
.auth-page .auth-branding h1{font-family:"Manrope",system-ui,sans-serif;font-size:clamp(40px,4.4vw,60px);font-weight:800;line-height:1.06;letter-spacing:-.035em;color:var(--fx-ink)}
.auth-page .auth-branding h1 em{color:var(--fx-primary);font-style:italic}
.auth-page .auth-branding>div>p:last-child,html[data-theme="light"] .auth-page .auth-branding>div>p:last-child{color:var(--fx-muted);font-size:17px}
.auth-page .auth-branding ul,html[data-theme="light"] .auth-page .auth-branding ul{gap:14px;color:var(--fx-ink);font-size:15px}
.auth-page .auth-branding li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:10px;border-radius:50%;background:rgba(20,184,166,.16);color:var(--fx-accent);font-size:12px;font-weight:700}

/* Rechterkant: het formulier als kaart */
.auth-page .auth-panel,html[data-theme="light"] .auth-page .auth-panel{background:var(--fx-bg)}
.auth-page .auth-card{max-width:440px;padding:clamp(28px,4vw,40px);border:1px solid var(--fx-line);border-radius:22px;background:var(--fx-card);box-shadow:var(--fx-shadow)}
.auth-page .auth-kicker{color:var(--fx-primary)!important;font-size:12px!important;letter-spacing:.08em}
.auth-page .auth-card h2{margin:8px 0;font-family:"Manrope",system-ui,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--fx-ink)}
.auth-page .auth-card>p,html[data-theme="light"] .auth-page .auth-card>p{color:var(--fx-muted);font-size:15px;line-height:1.6}
.auth-page .auth-card form{gap:18px;margin-top:26px}
.auth-page .auth-card label,html[data-theme="light"] .auth-page .auth-card label{gap:8px;color:var(--fx-ink);font-size:14px;font-weight:600;letter-spacing:0}
.auth-page .label-note{color:var(--fx-muted);font-size:12.5px}
.auth-page .auth-card input:not([type="checkbox"]),html[data-theme="light"] .auth-page .auth-card input:not([type="checkbox"]){height:48px;padding:0 14px;border:1px solid var(--fx-line);border-radius:12px;background:var(--fx-soft);color:var(--fx-ink);font-size:15px;box-shadow:none}
.auth-page .auth-card input:focus,html[data-theme="light"] .auth-page .auth-card input:focus{border-color:var(--fx-primary-solid);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.auth-page .auth-card input[type="checkbox"]{accent-color:var(--fx-primary-solid)}
.auth-page .password-hint{font-size:12.5px!important;color:var(--fx-muted)!important}
.auth-page .legal-acceptance{font-weight:400!important;font-size:13.5px!important;line-height:1.5}
.auth-page .auth-card a,html[data-theme="light"] .auth-page .auth-switch a,html[data-theme="light"] .auth-page .forgot-link{color:var(--fx-primary)}
.auth-page .forgot-link{font-size:13px;font-weight:600}
.auth-page .gold-button.form-submit,html[data-theme="light"] .auth-page .gold-button.form-submit{justify-content:center;gap:8px;padding:15px 22px;border:0;border-radius:12px;background:linear-gradient(180deg,#2e6bf0,#2563eb);color:#fff;font-size:15px;font-weight:600;box-shadow:0 1px 2px rgba(30,64,175,.4),0 8px 20px rgba(37,99,235,.28)}
.auth-page .gold-button.form-submit:hover{transform:translateY(-2px);background:linear-gradient(180deg,#2e6bf0,#2563eb)}
.auth-page .auth-switch{color:var(--fx-muted);font-size:14px!important}
.auth-page .auth-switch a{font-weight:600}
.auth-page .form-error,.auth-page .auth-message{border-radius:12px;font-size:13.5px}

/* Kleine links onderaan */
.auth-page .back-link,.auth-page .auth-legal-links{color:var(--fx-muted);font-size:13px}
.auth-page .back-link:hover,.auth-page .auth-legal-links a:hover{color:var(--fx-primary)}

/* Meldingspagina's: niet gevonden, tijdelijk niet beschikbaar, sessie
   verlopen (body.status-page). Eén kaart in het midden. */
html body.status-page{background-color:var(--fx-bg);background-image:radial-gradient(55% 45% at 75% 15%,rgba(37,99,235,.12),transparent 70%),radial-gradient(45% 40% at 15% 85%,rgba(20,184,166,.08),transparent 70%),radial-gradient(var(--fx-dot) 1px,transparent 1px);background-size:auto,auto,24px 24px}
.status-page main{width:100%;max-width:600px;padding:clamp(28px,5vw,48px);border:1px solid var(--fx-line);border-radius:22px;background:var(--fx-card);box-shadow:var(--fx-shadow)}
.status-page .wordmark{margin-bottom:36px}
html .status-page .eyebrow,html[data-theme="light"] .status-page .eyebrow{color:var(--fx-primary)!important;font-size:12px!important;letter-spacing:.08em}
.status-page .eyebrow>span{display:none}
.status-page h1{margin:12px 0 16px;font-family:"Manrope",system-ui,sans-serif;font-size:clamp(30px,4vw,42px);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:var(--fx-ink)}
.status-page main>p:not(.eyebrow),html[data-theme="light"] .status-page main>p:not(.eyebrow){margin-bottom:16px;color:var(--fx-muted);font-size:16px;line-height:1.65}
.status-page main>p:not(.eyebrow):last-of-type{margin-bottom:28px}
.status-page .outline-button,html[data-theme="light"] .status-page .outline-button{gap:8px;padding:13px 22px;border:0;border-radius:12px;background:linear-gradient(180deg,#2e6bf0,#2563eb);color:#fff;font-size:15px;font-weight:600;box-shadow:0 1px 2px rgba(30,64,175,.4),0 8px 20px rgba(37,99,235,.28)}
.status-page .outline-button:hover{transform:translateY(-2px)}
.status-page>.theme-toggle,html[data-theme="light"] .status-page>.theme-toggle{border:1px solid var(--fx-line);border-radius:10px;background:var(--fx-card);color:var(--fx-ink);box-shadow:none}

@media(max-width:760px){
    .auth-page .auth-card{padding:26px 20px;border-radius:18px}
}