:root{
  --paper:#FBF6F6; --surface:#FFFFFF; --ink:#2A2224; --muted:#6B6164; --line:#E6D9DB;
  --wine:#58020B; --wine-soft:#F6EEEF; --rose:#9E2A36; --good:#2C7A4B;
  --f-display:Cambria,"Caladea",Georgia,serif; --f-body:Calibri,"Carlito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#1A1416; --surface:#241C1F; --ink:#F3EAEB; --muted:#B5A9AC; --line:#3E3236;
  --wine:#E8A3AC; --wine-soft:#3A1D22; --rose:#D46A76; --good:#71C392; color-scheme:dark}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;min-height:100vh;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.wrap{max-width:440px;margin:clamp(24px,8vh,80px) auto 24px;display:grid;gap:18px}
.wrap.breed{max-width:960px}
.kop{display:grid;gap:4px;text-align:center}
.eyebrow{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose);font-weight:700}
h1{font-family:var(--f-display);color:var(--wine);font-size:clamp(1.8rem,5vw,2.4rem);line-height:1.1;margin:0}
h2{font-family:var(--f-display);color:var(--wine);font-size:1.3rem;margin:0}
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:grid;gap:14px;box-shadow:0 6px 24px rgb(0 0 0 / .05)}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--wine-soft);border-radius:10px;padding:4px;gap:4px}
.tabs button{all:unset;text-align:center;padding:8px;border-radius:8px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--wine)}
.tabs button:focus-visible{outline:2px solid var(--wine)}
form{display:grid;gap:12px}
label{display:grid;gap:4px;font-size:.9rem;font-weight:600}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:100%}
input:focus,select:focus{outline:2px solid var(--wine);outline-offset:1px}
.btn{font:inherit;font-weight:700;border:1px solid var(--wine);background:var(--wine);color:var(--surface);border-radius:8px;padding:10px 16px;cursor:pointer}
.btn.ghost{background:transparent;color:var(--wine)}
.btn:disabled{opacity:.6;cursor:wait}
.link{all:unset;cursor:pointer;color:var(--wine);text-decoration:underline;text-underline-offset:3px;font-size:.9rem}
.small{font-size:.88rem}
.muted{color:var(--muted)}
.melding{border-radius:8px;padding:10px 12px;font-size:.92rem;background:var(--wine-soft)}
.melding.goed{background:color-mix(in srgb,var(--good) 14%,var(--surface));color:var(--ink)}
.melding.fout{background:color-mix(in srgb,var(--rose) 16%,var(--surface))}
[hidden]{display:none!important}
.laden{text-align:center;color:var(--muted);padding:40px 0}