:root { --bg:#fff8f0; --card:#ffffff; --ink:#2b2340; --muted:#7a7290; --line:#eee3d6; --brand:#e8443a; --brand2:#ffcc33; --ok:#2e9e62; --busy:#e39b12;
        --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--font); }
a { color:var(--brand); }
header { position:sticky; top:0; z-index:5; background:var(--card); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
header h1 { margin:0; font-size:18px; } header h1 span { color:var(--brand); }
header .grow { flex:1; }
main { max-width:1000px; margin:0 auto; padding:16px; }
button, .btn { font:inherit; border:0; border-radius:999px; padding:8px 16px; cursor:pointer; background:#f1ebe3; color:var(--ink); text-decoration:none; display:inline-block; }
button.primary, .btn.primary { background:var(--brand); color:#fff; font-weight:700; }
button.ok { background:var(--ok); color:#fff; font-weight:700; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline:3px solid var(--brand2); outline-offset:2px; }
input, select, textarea { width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
textarea { min-height:76px; resize:vertical; }
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; }
.filters { display:grid; grid-template-columns:2fr 1.5fr 1fr 1fr; gap:8px; margin-bottom:12px; }
@media (max-width:700px) { .filters { grid-template-columns:1fr 1fr; } }
.progress { height:10px; background:#f1ebe3; border-radius:999px; overflow:hidden; margin:6px 0 14px; } .progress i { display:block; height:100%; background:var(--ok); }
.list { display:flex; flex-direction:column; gap:6px; }
.row { display:flex; gap:10px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px 12px; text-decoration:none; color:var(--ink); }
.row:hover { border-color:var(--brand2); }
.row .name { font-weight:700; } .row .cat { color:var(--muted); font-size:13px; } .row .grow { flex:1; min-width:0; }
.pill { font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; white-space:nowrap; }
.pill.leeg { background:#f1ebe3; color:var(--muted); } .pill.bezig { background:#fff1d1; color:#9a6400; } .pill.klaar { background:#dff3e8; color:var(--ok); }
.star { background:none; padding:4px; font-size:18px; line-height:1; color:#d8cfc3; } .star.on { color:#f5a623; }
.muted { color:var(--muted); font-size:13px; }
.form h2 { margin:0 0 2px; } .form .group { margin:22px 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.6px; color:var(--brand); font-weight:800; }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; } .grid .full { grid-column:1 / -1; }
@media (max-width:700px) { .grid { grid-template-columns:1fr; } }
label.f span { display:block; font-weight:700; font-size:14px; margin-bottom:4px; } label.f small { color:var(--muted); font-weight:400; }
.bar { position:sticky; bottom:0; background:linear-gradient(transparent, var(--bg) 30%); padding:18px 0 12px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.saved { color:var(--muted); font-size:13px; margin-left:auto; }
.login { max-width:380px; margin:12vh auto; } .login h1 { margin:0 0 4px; } .login label { display:block; margin:12px 0 4px; font-weight:700; }
.err { color:var(--brand); min-height:22px; margin-top:10px; }
.f .lab { display:block; font-weight:700; font-size:14px; margin-bottom:2px; } .f .help { display:block; color:var(--muted); font-size:12.5px; margin-bottom:6px; }
.f > label { display:block; }
.euro { display:flex; align-items:center; gap:6px; } .euro span { font-weight:700; color:var(--muted); } .euro input { flex:1; }
.rows, .specs, .photos { display:flex; flex-direction:column; gap:6px; }
.r { display:grid; gap:6px; align-items:start; }
.r.extra { grid-template-columns:2fr 1fr 1.6fr auto; } .r.one { grid-template-columns:1fr auto; } .r.faqr { grid-template-columns:1fr auto; } .r.faqr textarea { grid-column:1; }
.r.spec { grid-template-columns:200px 1fr auto; } .r.spec.fixed { grid-template-columns:200px 1fr; } .r.spec .sl { padding-top:10px; font-size:14px; color:var(--ink); }
.r.spec textarea { min-height:42px; } .r.photo { grid-template-columns:72px 1fr auto; align-items:center; } .r.photo img { width:72px; height:52px; object-fit:cover; border-radius:8px; background:#f1ebe3; }
@media (max-width:700px) { .r.extra, .r.spec, .r.spec.fixed { grid-template-columns:1fr; } }
button.add { background:none; color:var(--brand); padding:6px 0; font-weight:700; } button.del { background:#f6efe7; color:var(--muted); padding:8px 11px; }
.missing { background:#fff6df; border:1px solid #f3dfa8; border-radius:12px; padding:8px 12px; font-size:13.5px; margin:8px 0 4px; }