:root { --brand:#147F92; --text:#1A2226; --muted:#5C6B72; --danger:#BF3636; --bg:#fff; --line:#C7D0D4; }
* { box-sizing: border-box; }
body { margin:0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:var(--bg); }
main { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-size: 1.6rem; line-height:1.25; margin:.5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; }
.muted { color: var(--muted); }
.todo { color: var(--danger); font-size:.9rem; }
.check { display:flex; gap:.75rem; align-items:flex-start; margin:1.25rem 0; padding:.75rem; border:1px solid var(--line); border-radius:.5rem; }
.check input { width:1.5rem; height:1.5rem; margin-top:.1rem; flex:none; }
.actions { display:flex; flex-direction:column; gap:.75rem; }
button { min-height:48px; padding:.75rem 1rem; font:inherit; font-weight:600; border-radius:.5rem; border:2px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--brand); }
button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid #0F6070; outline-offset:2px; }
dl { display:grid; grid-template-columns: max-content 1fr; gap:.4rem 1rem; }
dt { font-weight:600; }
#status:not(:empty) { padding:.75rem 1rem; border-radius:.5rem; margin:1rem 0; background:#E6F7FA; color:#0F6070; }
#status.error { background:#FDECEC; color:#8F2323; }
@media (min-width: 40rem) { .actions { flex-direction:row; } }