:root { --bg:#f4f6fb; --card:#fff; --ink:#1d2433; --muted:#5b6478; --brand:#2f6fed; --ok:#1a7f37; --bad:#c62828; --line:#dde2ee; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width:680px; margin:0 auto; padding:16px; }
body.admin main { max-width:980px; }
h1 { margin:.2em 0; font-size:1.7rem; } h2 { margin:.1em 0 .5em; font-size:1.25rem; } h3 { margin:.6em 0 .3em; font-size:1rem; }
header { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:8px; }
header p { margin:0; color:var(--muted); }
nav { display:flex; gap:12px; flex-wrap:wrap; }
nav a { text-decoration:none; padding:4px 10px; border-radius:8px; color:var(--brand); }
nav a.on { background:var(--brand); color:#fff; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0; }
.flash { background:#fff6d6; border:1px solid #ecd27a; border-radius:10px; padding:10px 14px; }
.small { font-size:.85rem; color:var(--muted); }
a { color:var(--brand); }
button, input, textarea { font:inherit; }
input[type=text], input[type=password], input:not([type]), input[type=number], textarea { width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
label { display:block; margin:6px 0; }
button { cursor:pointer; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:#fff; }
button.big { display:block; width:100%; margin-top:14px; padding:16px; font-size:1.2rem; font-weight:600; border:0; background:var(--brand); color:#fff; }
button.link { border:0; background:none; color:var(--brand); padding:4px 6px; text-decoration:underline; }
button.link.bad { color:var(--bad); }
.who { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.pick { flex:1 1 140px; margin:0; }
.pick input { position:absolute; opacity:0; }
.pick span { display:block; text-align:center; padding:18px 10px; border:2px solid var(--line); border-radius:12px; font-weight:600; }
.pick input:checked + span { border-color:var(--brand); background:#e8f0ff; }
.pick input:focus-visible + span { outline:3px solid var(--brand); }
ul.chores { list-style:none; margin:0; padding:0; }
.chore { position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:12px 0; border-top:1px solid var(--line); }
.chore:first-child { border-top:0; }
.chore .t { flex:1 1 auto; min-width:0; margin:0; }
label.t { display:flex; align-items:center; gap:12px; cursor:pointer; }
label.t input { width:28px; height:28px; flex:none; }
label.t input:checked + span { color:var(--muted); text-decoration:line-through; }
.info, .q { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border-radius:50%; border:1px solid var(--brand); background:#fff; color:var(--brand); font-weight:700; }
.q { width:22px; height:22px; font-size:.8rem; }
.tip { display:none; flex:1 0 100%; background:#eef3ff; border:1px solid #c9d8ff; border-radius:10px; padding:10px 12px; font-size:.95rem; }
.chore.open .tip, .info:hover + .tip, .info:focus-visible + .tip { display:block; }
.verdict { display:flex; gap:10px; flex:1 0 100%; }
.verdict label { flex:1; margin:0; padding:10px; text-align:center; border:2px solid var(--line); border-radius:10px; }
.verdict label:has(input:checked).ok { background:#e6f6ea; border-color:var(--ok); }
.verdict label:has(input:checked).bad { background:#fdeaea; border-color:var(--bad); }
.verdict input { margin-right:6px; }
.note { flex:1 0 100%; }
b.ok, .ok { color:var(--ok); } b.bad, .bad { color:var(--bad); }
.progress { text-align:center; font-weight:600; margin:12px 0 0; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:6px; border-top:1px solid var(--line); vertical-align:top; }
td.act { display:flex; gap:6px; flex-wrap:wrap; }
td.act form { margin:0; }
form.inline { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin:8px 0; }
form.inline label { flex:1 1 200px; margin:0; }
form.edit { display:grid; gap:6px; padding:12px 0 2px; border-top:1px solid var(--line); }
form.del { margin:0 0 8px; text-align:right; }