* { box-sizing: border-box; }
:root { --ink: #17212b; --muted: #66727e; --line: #dfe7e5; --accent: #0f9b8a; --accent-2: #2fc4ad; --accent-soft: #dff3ef; --surface: #fff; --gm: #8c9093; }
@media (prefers-color-scheme: dark) {
  :root { --ink: #e9eef1; --muted: #9aa7b2; --line: #2a3640; --accent: #3cc9b4; --accent-2: #2fc4ad; --accent-soft: #173a36; --surface: #19222a; }
}
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px;
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent-2) 35%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 60%),
    var(--accent-soft);
  -webkit-font-smoothing: antialiased;
}
.card {
  width: 100%; max-width: 380px; padding: 30px 26px 26px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 1px 2px rgba(23,33,43,.06), 0 24px 60px rgba(15,155,138,.18);
}
/* Icoon links, even hoog als de twee regels ernaast (naam + "Wachtwoord"). */
.brand { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; margin-bottom: 16px; }
.logo { grid-row: 1 / 3; height: 100%; width: auto; aspect-ratio: 1; max-height: 64px; display: block; filter: drop-shadow(0 4px 10px rgba(15,155,138,.3)); }
.brand label { margin: 0; }
h1 { margin: 0; font-size: 1.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
h1 span { font-weight: 400; color: var(--muted); }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
input { width: 100%; padding: 12px 14px; font-size: 1rem; color: inherit; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
input:focus, input:focus-visible { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(47, 196, 173, .22); }
button { width: 100%; margin-top: 16px; padding: 13px; border: 0; border-radius: 12px; cursor: pointer; font-size: 1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 8px 20px rgba(15,155,138,.3); }
button:hover { filter: brightness(1.05); }
.err { color: #d4513f; margin: 10px 0 0; font-size: .92rem; }