/* Loginscherm (nieuw in HANDOFF.md): gecentreerd paneel van 360px op --bg. */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-body)}
.login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.merk{font-family:var(--f-display);font-weight:700;font-size:1.25rem;background:var(--side);color:var(--side-fg);padding:8px 14px;border-radius:8px}
.merk span{color:var(--side-dim);font-weight:500}
.kaart{width:min(360px,100%);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px}
h1{font-family:var(--f-display);font-size:1.45rem;font-weight:600;margin:0}
.uitleg{margin:0 0 6px;color:var(--dim);font-size:.9rem}
label{font-weight:600;font-size:.88rem;margin-top:4px}
input{height:42px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--fg);font:500 1rem var(--f-body);padding:0 12px}
#code{font-family:var(--f-mono);letter-spacing:.14em}
input:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:1px}
button{margin-top:8px;height:42px;border:0;border-radius:8px;background:var(--lime);color:var(--lime-ink);font:600 .95rem var(--f-body);cursor:pointer}
button:hover{filter:brightness(.95)}
.melding{margin:4px 0 0;background:var(--bad-bg);color:var(--bad);border-radius:8px;padding:9px 12px;font-size:.88rem}