*{box-sizing:border-box}body{color:#18181b;background:#f4f4f5;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif}main{max-width:44rem;margin:0 auto;padding:3rem 1.5rem}main.centered{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;min-height:100dvh;display:flex}h1{margin-bottom:.25rem;font-size:1.9rem}p.sub{color:#71717a;margin-top:0;margin-bottom:0}p.empty{color:#a1a1aa;text-align:center;margin-top:3rem;font-size:1rem}.add-form{flex-direction:column;gap:.5rem;margin:1.5rem 0;display:flex}.add-inputs{flex-wrap:wrap;gap:.5rem;display:flex}.add-title{background:#fff;border:1px solid #e4e4e7;border-radius:.6rem;flex:180px;padding:.65rem .85rem;font-size:1rem;box-shadow:0 1px 3px #0000000a}.add-title:focus{outline-offset:1px;outline:2px solid #6366f1}.add-priority,.add-date{cursor:pointer;background:#fff;border:1px solid #e4e4e7;border-radius:.6rem;padding:.65rem .75rem;font-size:.92rem;box-shadow:0 1px 3px #0000000a}.add-priority:focus,.add-date:focus{outline-offset:1px;outline:2px solid #6366f1}.add-btn{color:#fff;cursor:pointer;background:#6366f1;border:0;border-radius:.6rem;align-self:flex-start;padding:.65rem 1.3rem;font-size:1rem;font-weight:600;transition:background .15s}.add-btn:hover{background:#4f46e5}.section-label{text-transform:uppercase;letter-spacing:.06em;color:#71717a;margin:1.5rem 0 .5rem;font-size:.75rem;font-weight:600}.done-label{color:#a1a1aa}.todo-list{flex-direction:column;gap:.5rem;padding:0;list-style:none;display:flex}.todo-item{background:#fff;border:1px solid #e4e4e7;border-left:4px solid #0000;border-radius:.75rem;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;transition:opacity .15s;display:flex;box-shadow:0 1px 4px #0000000d}.todo-item.pending{opacity:.5;pointer-events:none}.todo-item.done{background:#fafafa;border-left-color:#d1d5db!important}.todo-item.priority-high{border-left-color:#ef4444}.todo-item.priority-medium{border-left-color:#f59e0b}.todo-item.priority-low{border-left-color:#22c55e}.check-btn{cursor:pointer;color:#fff;background:#fff;border:2px solid #d4d4d8;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;margin-top:.1rem;padding:0;font-size:.75rem;transition:background .15s,border-color .15s;display:flex}.todo-item.done .check-btn{background:#22c55e;border-color:#22c55e}.check-btn:hover{border-color:#22c55e}.todo-body{flex-direction:column;flex:1;gap:.3rem;display:flex}.todo-title{font-size:1rem;line-height:1.4}.todo-item.done .todo-title{color:#a1a1aa;text-decoration:line-through}.todo-meta{flex-wrap:wrap;gap:.35rem;display:flex}.badge{color:#52525b;background:#f4f4f5;border-radius:9999px;align-items:center;padding:.15rem .55rem;font-size:.72rem;font-weight:500;display:inline-flex}.priority-badge-high{color:#b91c1c;background:#fef2f2}.priority-badge-medium{color:#92400e;background:#fffbeb}.priority-badge-low{color:#166534;background:#f0fdf4}.due-badge{color:#1d4ed8;background:#eff6ff}.due-badge.overdue{color:#b91c1c;background:#fef2f2;font-weight:700}.edit-btn{cursor:pointer;color:#a1a1aa;background:0 0;border:0;border-radius:.3rem;flex-shrink:0;padding:.15rem .3rem;font-size:1rem;transition:background .15s}.edit-btn:hover{color:#6366f1;background:#f4f4f5}.delete-btn{color:#d4d4d8;cursor:pointer;background:0 0;border:0;border-radius:.3rem;flex-shrink:0;padding:.15rem .3rem;font-size:1rem;transition:color .15s,background .15s}.delete-btn:hover{color:#ef4444;background:#fef2f2}.edit-form{flex-direction:column;flex:1;gap:.5rem;display:flex}.edit-input{border:1px solid #6366f1;border-radius:.5rem;outline:none;width:100%;padding:.5rem .7rem;font-size:1rem}.edit-row{flex-wrap:wrap;gap:.5rem;display:flex}.edit-select,.edit-date{background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.4rem .6rem;font-size:.88rem}.edit-actions{gap:.5rem;display:flex}.save-btn{color:#fff;cursor:pointer;background:#6366f1;border:0;border-radius:.5rem;padding:.4rem .9rem;font-size:.9rem;font-weight:600}.save-btn:hover{background:#4f46e5}.cancel-btn{color:#71717a;cursor:pointer;background:0 0;border:1px solid #e4e4e7;border-radius:.5rem;padding:.4rem .9rem;font-size:.9rem}.cancel-btn:hover{background:#f4f4f5}.actions{flex-direction:column;align-items:center;gap:.75rem;margin-top:1.25rem;display:flex}a.sub{color:#71717a;font-size:.875rem}button.secondary{color:#71717a;cursor:pointer;background:0 0;border:0}li span{color:#71717a;font-size:.875rem;display:block}