.todo-storage-note{font-size:var(--text-xs);color:var(--color-text-subtle);margin-bottom:var(--space-3)}.todo-add{display:flex;gap:var(--space-2)}.todo-add input{flex:1;min-height:var(--touch-target);padding:var(--space-3);border:var(--border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--text-base);font-family:inherit}.todo-add button{min-height:var(--touch-target);padding-inline:var(--space-5);border:none;border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-text-inverse);font-weight:var(--font-weight-semibold);font-family:inherit;cursor:pointer;white-space:nowrap;transition:var(--transition-color)}.todo-add button:hover{opacity:.9}.todo-add button:active{opacity:.8}.todo-focus{margin-top:var(--space-2)}.todo-focus>summary{cursor:pointer;min-height:var(--touch-target);display:flex;align-items:center;list-style:none;font-size:var(--text-sm);color:var(--color-text-muted);font-weight:var(--font-weight-medium)}.todo-focus>summary::-webkit-details-marker{display:none}.todo-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding-block:var(--space-2)}@media(max-width:640px){.todo-backup{margin-top:var(--space-3)}.todo-focus{margin-top:var(--space-1)}}.todo-tool-btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);padding-inline:var(--space-3);background:var(--color-bg);border:var(--border);border-radius:var(--radius-full, 999px);color:var(--color-text-muted);font-size:var(--text-sm);font-family:inherit;cursor:pointer;transition:color var(--duration-fast) ease,background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.todo-tool-icon{width:15px;height:15px;flex-shrink:0}.todo-tool-btn:hover{color:var(--color-text);border-color:var(--color-accent)}.todo-tool-btn:active{background:var(--color-bg-tertiary)}.todo-tool-btn[aria-pressed=true]{color:var(--color-accent-strong);background:var(--color-accent-subtle);border-color:var(--color-accent)}.todo-wake-timer{display:inline-flex;align-items:center;gap:var(--space-2);padding-inline:var(--space-2);min-height:var(--touch-target);font-size:var(--text-sm);color:var(--color-text-muted)}.todo-wake-timer[hidden]{display:none}.todo-wake-dot{width:8px;height:8px;border-radius:50%;background:var(--color-accent);flex-shrink:0;animation:dot-breathe 5s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.todo-wake-dot{animation:none}}.todo-wake-elapsed{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text)}#todo-list-container{display:flex;flex-direction:column;margin-top:var(--space-3)}.todo-empty{padding:var(--space-8) 0;color:var(--color-text-subtle);font-size:var(--text-sm);text-align:center}.todo-task{padding-block:var(--space-2);border-radius:var(--radius-md);background:var(--color-bg);transition:box-shadow var(--duration-normal) ease,opacity var(--duration-normal) ease,transform var(--duration-normal) ease}.todo-task.todo-dragging{box-shadow:0 6px 20px #00000024;cursor:grabbing;position:relative;z-index:2}.todo-task.todo-collapsing{opacity:0;transform:translate(8px)}.todo-task-row{display:flex;align-items:flex-start;gap:var(--space-2);min-height:28px}.todo-drag-handle,.todo-subtask-drag{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:none;border:none;color:var(--color-text-subtle);cursor:grab;border-radius:var(--radius-sm);touch-action:none;opacity:0;transition:opacity var(--duration-fast) ease,color var(--duration-fast) ease,background-color var(--duration-fast) ease}.todo-drag-handle svg,.todo-subtask-drag svg{width:16px;height:16px;display:block}.todo-subtask-drag{width:20px;height:20px}.todo-subtask-drag svg{width:14px;height:14px}.todo-task-row:hover .todo-drag-handle,.todo-task:focus-within .todo-drag-handle,.todo-subtask-row:hover .todo-subtask-drag,.todo-subtask-row:focus-within .todo-subtask-drag{opacity:1}.todo-drag-handle:hover,.todo-subtask-drag:hover{color:var(--color-text);background:var(--color-bg-tertiary)}.todo-drag-handle:active,.todo-subtask-drag:active{cursor:grabbing}.todo-checkbox,.todo-subtask-checkbox{appearance:none;-webkit-appearance:none;flex-shrink:0;box-sizing:border-box;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;position:relative;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.todo-checkbox{width:20px;height:20px;margin-top:calc((1.5rem - 20px)/2)}.todo-checkbox:hover,.todo-subtask-checkbox:hover{border-color:var(--color-accent)}.todo-checkbox:checked,.todo-subtask-checkbox:checked{background:var(--color-accent);border-color:var(--color-accent)}.todo-checkbox:after,.todo-subtask-checkbox:after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border:solid var(--color-text-inverse);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);opacity:0;transition:opacity var(--duration-fast) ease,transform var(--duration-fast) ease}.todo-checkbox:checked:after,.todo-subtask-checkbox:checked:after{transform:rotate(45deg) scale(1);opacity:1}.todo-subtask-checkbox:after{left:4.5px;top:1.5px;width:4px;height:8px}.todo-checkbox.todo-pop,.todo-subtask-checkbox.todo-pop{animation:todo-box-pop var(--duration-normal) var(--ease-default)}.todo-checkbox.todo-pop:after,.todo-subtask-checkbox.todo-pop:after{animation:todo-check-in var(--duration-normal) var(--ease-default)}@keyframes todo-box-pop{0%{transform:scale(1)}45%{transform:scale(.86)}to{transform:scale(1)}}@keyframes todo-check-in{0%{transform:rotate(45deg) scale(0);opacity:0}60%{transform:rotate(45deg) scale(1.25);opacity:1}to{transform:rotate(45deg) scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.todo-checkbox.todo-pop,.todo-subtask-checkbox.todo-pop,.todo-checkbox.todo-pop:after,.todo-subtask-checkbox.todo-pop:after{animation:none}.todo-checkbox:after,.todo-subtask-checkbox:after{transition:none}}.todo-title{flex:1;font-size:var(--text-base);font-weight:var(--font-weight-medium);line-height:1.5;transition:color var(--duration-fast) ease;word-break:break-word;min-width:0}.todo-task--done .todo-title{text-decoration:line-through;color:var(--color-text-subtle);font-weight:var(--font-weight-normal)}.todo-actions{display:flex;align-items:center;gap:var(--space-1);flex-shrink:0}.todo-count{display:inline-flex;align-items:center;gap:4px;height:24px;padding-inline:var(--space-2);background:none;border:none;border-radius:var(--radius-full, 999px);color:var(--color-text-subtle);font-size:var(--text-xs);font-variant-numeric:tabular-nums;font-family:inherit;cursor:pointer;transition:var(--transition-color)}.todo-count:hover{color:var(--color-text);background:var(--color-bg-tertiary)}.todo-count .todo-chevron{width:10px;height:10px;transform:rotate(90deg);transition:transform var(--duration-fast) ease}.todo-task.todo-collapsed .todo-count .todo-chevron{transform:rotate(0)}@media(prefers-reduced-motion:reduce){.todo-count .todo-chevron{transition:none}}.todo-add-sub,.todo-delete,.todo-subtask-delete{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:none;border:none;color:var(--color-text-subtle);font-size:var(--text-base);line-height:1;font-family:inherit;cursor:pointer;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--duration-fast) ease,color var(--duration-fast) ease,background-color var(--duration-fast) ease}.todo-add-sub{font-size:var(--text-lg)}.todo-task-row:hover .todo-add-sub,.todo-task-row:hover .todo-delete,.todo-task:focus-within .todo-add-sub,.todo-task:focus-within .todo-delete,.todo-subtask-row:hover .todo-subtask-delete,.todo-subtask-row:focus-within .todo-subtask-delete{opacity:1}@media(hover:none){.todo-add-sub,.todo-delete,.todo-subtask-delete,.todo-drag-handle,.todo-subtask-drag{opacity:1}.todo-actions{gap:var(--space-2)}.todo-add-sub,.todo-delete{width:40px;height:40px;margin-top:calc((1.5rem - 40px)/2)}.todo-count{height:40px;padding-inline:var(--space-3);margin-top:calc((1.5rem - 40px)/2)}.todo-drag-handle{width:32px;height:32px;margin-top:calc((1.5rem - 32px)/2)}.todo-subtask-delete{width:36px;height:36px}.todo-subtask-drag{width:28px;height:28px}.todo-task-row,.todo-subtask-row{min-height:40px}}.todo-add-sub:hover{color:var(--color-accent-strong);background:var(--color-accent-subtle)}.todo-delete:hover,.todo-subtask-delete:hover{color:var(--color-danger);background:var(--color-danger-bg)}.todo-subtasks{padding-left:calc(24px + var(--space-2));display:flex;flex-direction:column;margin-top:var(--space-1)}.todo-task.todo-collapsed .todo-subtasks{display:none}.todo-subtask-row{display:flex;align-items:center;gap:var(--space-2);min-height:32px;padding-block:var(--space-1);border-radius:var(--radius-sm);background:var(--color-bg);transition:box-shadow var(--duration-normal) ease}.todo-subtask-row.todo-dragging{box-shadow:0 4px 14px #0000001f;cursor:grabbing;position:relative;z-index:2}.todo-subtask-checkbox{width:16px;height:16px}.todo-subtask-title{flex:1;font-size:var(--text-sm);color:var(--color-text-muted);transition:color var(--duration-fast) ease;word-break:break-word;min-width:0}.todo-subtask--done .todo-subtask-title{text-decoration:line-through;color:var(--color-text-subtle)}.todo-add-subtask{display:none;padding-left:calc(24px + var(--space-2));margin-top:var(--space-2)}.todo-task.todo-adding .todo-add-subtask{display:flex}.todo-add-subtask input{flex:1;min-height:40px;padding:var(--space-2) var(--space-3);border:var(--border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:var(--text-sm);font-family:inherit}.todo-footer{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4)}.todo-footer[hidden]{display:none}.todo-backup,.todo-import-row{display:flex;flex-wrap:wrap;gap:var(--space-2)}.todo-backup{margin-top:var(--space-4)}.todo-import[hidden],.todo-import-msg[hidden]{display:none}.todo-import{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)}.todo-backup-btn{min-height:var(--touch-target);padding-inline:var(--space-3);border:var(--border);border-radius:var(--radius-full, 999px);background:var(--color-bg);color:var(--color-text-muted);font:inherit;font-size:var(--text-sm);cursor:pointer}.todo-backup-btn:hover{color:var(--color-text);border-color:var(--color-accent)}.todo-import-field{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-sm);color:var(--color-text-muted)}.todo-import-field textarea{min-height:96px;padding:var(--space-3);border:var(--border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font:inherit;resize:vertical}.todo-import-primary{min-height:var(--touch-target);padding-inline:var(--space-5);border:none;border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-text-inverse);font:inherit;font-weight:var(--font-weight-semibold);cursor:pointer}.todo-import-msg{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}.todo-import-msg.is-error{color:var(--color-danger, var(--color-text))}.todo-footer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}.todo-progress{font-size:var(--text-sm);color:var(--color-text-muted);font-variant-numeric:tabular-nums}.todo-progress-track{height:4px;width:100%;background:var(--color-bg-tertiary);border-radius:var(--radius-sm);overflow:hidden}.todo-progress-bar{height:100%;width:0%;background:var(--color-accent);border-radius:var(--radius-sm);transition:width var(--duration-normal) var(--ease-default)}@media(prefers-reduced-motion:reduce){.todo-progress-bar,.todo-task{transition:none}}.todo-hide-label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;font-weight:var(--font-weight-normal)}.todo-hide-label input[type=checkbox]{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:16px;height:16px;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-bg);cursor:pointer;position:relative;transition:background-color var(--duration-fast) ease,border-color var(--duration-fast) ease}.todo-hide-label input[type=checkbox]:hover{border-color:var(--color-accent)}.todo-hide-label input[type=checkbox]:checked{background:var(--color-accent);border-color:var(--color-accent)}.todo-hide-label input[type=checkbox]:checked:after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--color-text-inverse);border-width:0 2px 2px 0;transform:rotate(45deg)}