:root { --red:#b3132b; --red-d:#8c0e21; --gold:#e0a526; --bg:#fbf6ef; --card:#fff; --text:#2b2220; --muted:#857a74; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--red); color:#fff; padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
header a { color:#fff; text-decoration:none; }
.logo { font-weight:700; font-size:1.15rem; }
nav { display:flex; gap:14px; font-size:.95rem; flex-wrap:wrap; }
main { max-width:1000px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; }
.card { background:var(--card); border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.07); padding:16px; }
.narrow { max-width:460px; margin:24px auto; }
.grid { display:grid; gap:14px; }
.members { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.items { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.member { text-align:center; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:6px; align-items:center; }
.member.mine { outline:2px solid var(--gold); }
.avatar { width:56px; height:56px; border-radius:50%; background:var(--red); color:#fff; display:grid; place-items:center; font-size:1.5rem; font-weight:700; }
.muted { color:var(--muted); font-size:.9rem; }
.flash { background:#fff4d6; border-left:4px solid var(--gold); padding:10px 14px; border-radius:8px; margin-bottom:12px; }
input,textarea,select { width:100%; padding:11px; border:1px solid #ddd; border-radius:10px; font:inherit; margin-top:4px; background:#fff; }
button,.btn { background:var(--red); color:#fff; border:0; border-radius:10px; padding:11px 16px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
button:hover,.btn:hover { background:var(--red-d); }
button.secondary { background:#fff; color:var(--red); border:2px solid var(--red); }
.small { padding:7px 12px; font-size:.9rem; }
.danger { background:#666; }
.claimed { background:#2e7d32; }
form { margin:0; }
.narrow form { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.form label { display:block; font-weight:600; font-size:.95rem; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.names { display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
.name-btn { background:#fff; color:var(--text); border:2px solid #eee; }
.name-btn:hover { border-color:var(--red); background:#fff; }
.list-head { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.item { display:flex; flex-direction:column; padding:0; overflow:hidden; }
.item .body { padding:12px 14px; flex:1; }
.item h3 { margin:0 0 6px; font-size:1.1rem; }
.item p { margin:6px 0; white-space:pre-line; }
.item .actions { padding:0 14px 14px; display:flex; gap:8px; flex-wrap:wrap; }
.item.taken { opacity:.55; }
.price { color:var(--red); font-weight:700; }
.photos { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; background:#f2ece4; }
.photos a { flex:0 0 100%; scroll-snap-align:start; }
.photos img { width:100%; height:210px; object-fit:contain; display:block; }
.badge { background:#eee; border-radius:8px; padding:6px 10px; font-size:.85rem; }
.empty { text-align:center; color:var(--muted); }
.photo-edit { display:flex; gap:8px; flex-wrap:wrap; }
.photo-edit label { font-weight:400; text-align:center; }
.photo-edit img { width:90px; height:90px; object-fit:cover; border-radius:8px; display:block; }
.photo-edit input { width:auto; }
.lootje { text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px; background:linear-gradient(135deg,#fff,#fff4d6); border:2px solid var(--gold); }
.avatar.big { width:84px; height:84px; font-size:2.2rem; }
.lootje-name { font-size:1.6rem; }
.center { text-align:center; }
h2 { font-size:1.15rem; margin-top:24px; }