:root {
  --bg: #f2f2f7; --kaart: #fff; --label: #000; --label-2: rgba(60, 60, 67, 0.6); --tint: #ff5722; --vul: rgba(118, 118, 128, 0.12);
  --veer: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.077 24%, 1.064 26.4%, 1.034 30.5%, 0.997 36.6%, 0.988 40.5%, 0.996 51.1%, 1.002 62.6%, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #000; --kaart: #1c1c1e; --label: #fff; --label-2: rgba(235, 235, 245, 0.6); --tint: #ff6a3d; --vul: rgba(118, 118, 128, 0.24); }
  .merk.licht { display: none; }
}
@media (prefers-color-scheme: light) { .merk.donker { display: none; } }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: var(--bg); color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 17px; -webkit-font-smoothing: antialiased;
}
.login {
  width: min(100%, 380px); background: var(--kaart); border-radius: 34px; padding: 40px 28px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 20px 50px rgba(0, 0, 0, 0.08);
  animation: in 700ms var(--veer);
}
@keyframes in { from { transform: translateY(24px) scale(0.97); opacity: 0; } }
.merk { width: 88px; height: auto; margin-bottom: 8px; }
h1 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: 0.01em; }
.sub { margin: 0 0 16px; color: var(--label-2); }
.melding { margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--vul); font-size: 15px; }
.knop {
  width: 100%; min-height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--vul); color: var(--tint); font-weight: 600; text-decoration: none; transition: transform 300ms var(--veer);
}
.knop svg { width: 20px; height: 20px; }
.knop.prim { background: var(--tint); color: #fff; }
.knop:active { transform: scale(0.96); }
.knop:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 60%, transparent); outline-offset: 2px; }
.voet { margin: 8px 0 0; font-size: 13px; color: var(--label-2); }
@media (prefers-reduced-motion: reduce) { .login, .knop { animation: none; transition: none; } }