.auth-screen{position:fixed;inset:0;z-index:200;background:#f7f5ef;display:grid;grid-template-columns:minmax(320px,520px) 1fr;overflow:auto}.auth-screen[hidden]{display:none}.auth-panel{min-width:0;padding:clamp(32px,7vw,90px);display:flex;flex-direction:column;justify-content:center}.auth-brand{color:#203a30;padding:0 0 55px}.auth-panel h1{font-size:38px;overflow-wrap:anywhere}.auth-form{min-width:0;margin-top:26px;display:flex;flex-direction:column;gap:16px}.auth-form[hidden]{display:none}.auth-form label{font-weight:700;font-size:13px}.auth-form input,.auth-form select{display:block;width:100%;min-width:0;max-width:100%;margin-top:7px;padding:12px 13px;border:1px solid #d9d8d1;border-radius:9px;background:#fff;font:inherit;outline:none}.auth-form input:focus{border-color:#315b48;box-shadow:0 0 0 3px rgba(49,91,72,.1)}.auth-form label small{display:block;color:var(--text-secondary);margin-top:5px;font-weight:400}.auth-form .primary{margin-top:4px}.form-error{color:var(--danger-ink);font-size:12px;min-height:17px;margin:0}.auth-switch{margin-top:20px;align-self:center;max-width:100%;white-space:normal}.auth-visual{background:#203a30;display:grid;place-items:center;padding:50px;overflow:hidden;position:relative}.auth-visual:before,.auth-visual:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.12);border-radius:50%;width:600px;height:600px}.auth-visual:after{width:380px;height:380px}.visual-card{position:relative;z-index:1;width:min(420px,90%);background:#f4ead1;border-radius:18px;padding:35px;transform:rotate(-2deg);box-shadow:0 30px 70px rgba(0,0,0,.2)}.visual-card span{display:block;color:#758078;font-size:11px;text-transform:uppercase;letter-spacing:1px}.visual-card strong{display:block;font:800 28px/1.2 system-ui;margin:20px 0 10px}.visual-card p{color:#607067;line-height:1.6}.auth-screen.loading .auth-panel{opacity:.65;pointer-events:none}@media(max-width:760px){.auth-screen{grid-template-columns:1fr}.auth-visual{display:none}.auth-panel{padding:35px 24px;justify-content:flex-start}.auth-brand{padding-bottom:35px}}@media(max-width:360px){.auth-panel{padding:24px 14px}.auth-panel h1{font-size:30px}.auth-brand{padding-bottom:24px}}

/* Premium bibliotheek: het inlogscherm volgt het thema en gebruikt dezelfde hoofdillustratie als de startpagina. */
.auth-screen { background: var(--bg); color: var(--text-primary); }
.auth-panel h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.auth-panel input { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
/* --brass haalt als kleine tekst maar 3,2:1 op de lichte achtergrond; --brass-ink 5,2:1 (in donker dezelfde kleur). */
.auth-panel .eyebrow { color: var(--brass-ink); }
.auth-visual { background: linear-gradient(180deg, rgba(14, 22, 18, 0.28), rgba(14, 22, 18, 0.6)), url("/illustrations/brand/landing-hero.webp") center / cover no-repeat; }
.auth-visual::before, .auth-visual::after { display: none; }
.visual-card { background: #fffdf8; }
.visual-card strong { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.auth-panel .form-hint { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.auth-brand { color: var(--text-primary); }
.visual-card, .visual-card strong { color: #1d2a24; }
.visual-card span { color: #7a6a45; }
.visual-card p { color: #4d5a52; }
/* Nieuwe stijl (2026-09-30): rustig beeld uit de nieuwe set (hetzelfde landschap als bovenaan de startpagina in de app),
   de kaart recht en in dezelfde afronding als de kaarten in de app. */
.auth-visual { background: url("/illustrations/app/dashboard/header.webp") 72% center / cover no-repeat, var(--image-fallback); }
.visual-card { transform: none; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-hover); padding: var(--space-8); }
.visual-card strong { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.02em; }
.visual-card, .visual-card strong { color: var(--text-primary); }
.visual-card span { color: var(--primary); font-weight: 700; letter-spacing: 0.12em; }
.visual-card p { color: var(--text-secondary); }
.auth-panel h1 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.025em; }
.auth-panel input { border-radius: var(--radius); min-height: 48px; }
.auth-panel .primary { min-height: 48px; border-radius: var(--radius); }
:root[data-theme="dark"] .auth-visual { background: linear-gradient(rgba(15, 21, 25, 0.28), rgba(15, 21, 25, 0.28)), url("/illustrations/app/dashboard/header.webp") 72% center / cover no-repeat, var(--image-fallback); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .auth-visual { background: linear-gradient(rgba(15, 21, 25, 0.28), rgba(15, 21, 25, 0.28)), url("/illustrations/app/dashboard/header.webp") 72% center / cover no-repeat, var(--image-fallback); } }
:root.calm .auth-visual { background: var(--image-fallback); }

/* Al ingelogd vanaf een ander IP-adres: kiezen tussen hier verder en annuleren. */
.login-elsewhere { padding: 14px 16px; border: 1px solid var(--border, #d9d8d1); border-radius: 12px; background: var(--surface, #fff); }
.login-elsewhere[hidden], #loginSubmit[hidden] { display: none; }
.login-elsewhere p { margin: 0 0 12px; line-height: 1.5; }
.login-elsewhere .button-row { display: flex; flex-wrap: wrap; gap: 10px; }