:root { font-family: system-ui, sans-serif; color: #20342f; background: #f1f5f1; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; padding: 48px 20px; }
main { max-width: 700px; margin: auto; background: white; padding: 36px; border: 1px solid #d7e2da; border-radius: 20px; }
h1 { margin: 8px 0; font-size: clamp(1.8rem, 5vw, 2.6rem); }
header { margin-bottom: 32px; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; color: #366750; }
label, legend { font-weight: 600; }
.entry { display: flex; gap: 10px; margin-top: 8px; }
input[type="text"] { min-width: 0; flex: 1; padding: 12px; border: 1px solid #6f8278; border-radius: 8px; font: inherit; }
button { background: #225b43; color: white; border: 0; border-radius: 8px; padding: 12px 18px; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #174631; }
:focus-visible { outline: 3px solid #ad5d0b; outline-offset: 4px; }
.error { color: #a12424; min-height: 1.4em; margin: 8px 0; }
fieldset { border: 1px solid #d7e2da; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
fieldset label { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: #225b43; flex-shrink: 0; }
ul { padding: 0; list-style: none; }
li { border-bottom: 1px solid #d7e2da; }
li label { display: flex; align-items: center; gap: 12px; padding: 16px 0; cursor: pointer; }
li span { overflow-wrap: anywhere; min-width: 0; }
li.completed span { text-decoration: line-through; color: #5c6962; }
#task-count, #empty-state, #storage-status { color: #52665b; }
@media (max-width: 480px) { body { padding: 16px 10px; } main { padding: 22px 16px; } .entry { flex-direction: column; } }