.tasks { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; }
.tasks h1 { font-size: 26px; margin-bottom: 6px; }
.tasks h2 { font-size: 18px; margin: 32px 0 8px; }
.tasks ol { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; counter-reset: n; }
.tasks ol li { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; counter-increment: n; }
.tasks ol label { display: flex; gap: 10px; align-items: center; font-size: 17px; cursor: pointer; }
.tasks ol label b::before { content: counter(n) ". "; color: var(--ok); }
.tasks input[type=checkbox] { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--ok); }
.tasks ol p { margin: 8px 0 12px 32px; color: var(--muted); }
.tasks ol .btn { margin-left: 32px; display: inline-grid; place-items: center; text-decoration: none; }
.tasks ol .btn + .btn { margin-left: 6px; }
.tasks li.ok { opacity: .55; }
.tasks li.ok label b { text-decoration: line-through; }
.tasks code { background: var(--chip); padding: 1px 6px; border-radius: 6px; font-size: 14px; }
.tasks .done { color: var(--muted); padding-left: 20px; display: grid; gap: 4px; }
.top-actions a.btn { text-decoration: none; display: inline-grid; place-items: center; }