.todo-item{padding:var(--spacing-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast);justify-content:space-between;align-items:center;gap:var(--spacing-md);display:flex}.todo-item:hover{background-color:var(--color-surface-hover);border-color:var(--color-primary);box-shadow:0 2px 8px #00000014}.todo-item__content{align-items:center;gap:var(--spacing-md);flex:1;min-width:0;display:flex}.todo-item__checkbox{appearance:none;cursor:pointer;border:2px solid var(--color-primary);width:20px;height:20px;transition:all var(--transition-fast);background:#fff;border-radius:50%;flex-shrink:0;place-content:center;display:grid}.todo-item__checkbox:before{content:"";width:10px;height:6px;transition:transform var(--transition-fast);border-bottom:2px solid #fff;border-left:2px solid #fff;margin-bottom:2px;transform:rotate(-45deg)scale(0)}.todo-item__checkbox:checked{background:var(--color-primary);border-color:var(--color-primary)}.todo-item__checkbox:checked:before{transform:rotate(-45deg)scale(1)}.todo-item__checkbox:hover{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-primary) 20%, transparent)}.todo-item__text{padding:var(--spacing-xs) var(--spacing-sm);word-break:break-word;overflow-wrap:break-word;cursor:text;transition:all var(--transition-fast);border-radius:var(--radius-sm);flex:1}.todo-item__text:hover{background-color:#0366d60d}.todo-item__text--completed{color:var(--color-text-secondary);text-decoration:line-through}.todo-item__edit-input{padding:var(--spacing-xs) var(--spacing-sm);border:2px solid var(--color-primary);border-radius:var(--radius-sm);background-color:var(--color-background);color:var(--color-text);flex:1;font-size:1rem}.todo-item__delete{border-radius:var(--radius-md);width:32px;height:32px;color:var(--color-text-secondary);transition:all var(--transition-fast);cursor:pointer;background-color:#0000;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.todo-item__delete:hover{background-color:var(--color-danger);color:#fff}.todo-item__delete:active{transform:scale(.95)}.todo-item--duplicate{border:2px solid #e53935}.todo-list{gap:var(--spacing-lg);flex-direction:column;display:flex}.todo-list--loading,.todo-list--empty{justify-content:center;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-xxl) var(--spacing-lg);color:var(--color-text-secondary);text-align:center;flex-direction:column;display:flex}.todo-list--empty svg{opacity:.5;margin-bottom:var(--spacing-md)}.todo-list--empty p{color:var(--color-text);font-size:1.25rem;font-weight:600}.todo-list--empty span{font-size:.875rem}.todo-list__spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.todo-list__header{gap:var(--spacing-sm);padding:0 var(--spacing-sm);flex-direction:column;display:flex}.todo-list__stats{gap:var(--spacing-sm);flex-direction:column;display:flex}.todo-list__count{color:var(--color-text-secondary);font-size:.875rem;font-weight:500}.todo-list__progress{background-color:var(--color-surface);border-radius:var(--radius-full);width:100%;height:4px;overflow:hidden}.todo-list__progress-bar{background:linear-gradient(90deg, var(--color-primary), var(--color-success));height:100%;transition:width var(--transition-slow);border-radius:var(--radius-full)}.todo-list__items{gap:var(--spacing-md);animation:fadeIn var(--transition-base);flex-direction:column;display:flex}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.todo-input{gap:var(--spacing-sm);width:100%;display:flex}.todo-input__field{padding:var(--spacing-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-surface);color:var(--color-text);transition:all var(--transition-fast);flex:1;font-size:1rem}.todo-input__field:hover{border-color:var(--color-primary)}.todo-input__field:focus{border-color:var(--color-primary);background-color:var(--color-background);box-shadow:0 0 0 3px #0366d61a}.todo-input__field::placeholder{color:var(--color-text-secondary)}.todo-input__field:disabled{opacity:.6;cursor:not-allowed}.todo-input__button{padding:var(--spacing-md);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md);transition:all var(--transition-fast);cursor:pointer;border:none;justify-content:center;align-items:center;min-width:48px;font-weight:600;display:flex}.todo-input__button:hover:not(:disabled){background-color:var(--color-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0366d64d}.todo-input__button:active:not(:disabled){transform:translateY(0)}.todo-input__button:disabled{opacity:.6;cursor:not-allowed}.todo-input__button-spinner{animation:1s linear infinite spin}.theme-toggle{background-color:var(--color-surface);border:2px solid var(--color-border);border-radius:var(--radius-lg);width:40px;height:40px;color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.theme-toggle:hover{border-color:var(--color-primary);background-color:var(--color-surface-hover);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.todo-page{background-color:var(--color-background);width:100%;height:100vh;color:var(--color-text);transition:background-color var(--transition-base), color var(--transition-base);flex-direction:column;display:flex}.todo-page__header{border-bottom:1px solid var(--color-border);background-color:var(--color-surface);padding:var(--spacing-lg) 0;box-shadow:0 1px 3px #0000000d}.todo-page__header-content{max-width:800px;padding:0 var(--spacing-lg);justify-content:space-between;align-items:center;width:100%;margin:0 auto;display:flex}.todo-page__title{color:var(--color-text);margin:0;font-size:2rem;font-weight:700}.todo-page__title-input{color:var(--color-text);background-color:var(--color-surface);box-shadow:none;border:none;outline:none}.todo-page__title-input:focus{box-shadow:none;outline:none}.todo-page__slug{margin:var(--spacing-xs) 0 0 0;color:var(--color-text-secondary);font-size:.875rem;font-weight:500;font-family:var(--font-family-mono);word-break:break-all}.todo-page__main{padding:var(--spacing-xl) 0;flex:1;justify-content:flex-start;align-items:flex-start;display:flex;overflow-y:auto}.todo-page__container{width:100%;max-width:800px;padding:0 var(--spacing-lg);gap:var(--spacing-xl);flex-direction:column;margin:0 auto;display:flex}.todo-page__error{padding:var(--spacing-lg);border:1px solid var(--color-danger);border-radius:var(--radius-md);color:var(--color-danger);background-color:#d73a491a}.todo-page__error p{margin:0;font-weight:500}.todo-page__footer{border-top:1px solid var(--color-border);background-color:var(--color-surface);padding:var(--spacing-lg);text-align:center;color:var(--color-text-secondary);margin-top:auto;font-size:.875rem}.todo-page__footer p{margin:0}@media (width<=640px){.todo-page__title{font-size:1.5rem}.todo-page__header-content{gap:var(--spacing-md);flex-direction:column;align-items:flex-start}.todo-page__main{padding:var(--spacing-lg) 0}.todo-page__container{padding:0 var(--spacing-md)}}.not-found{background-color:var(--color-background);width:100%;height:100vh;color:var(--color-text);justify-content:center;align-items:center;display:flex}.not-found__content{text-align:center;gap:var(--spacing-lg);padding:var(--spacing-lg);flex-direction:column;max-width:500px;display:flex}.not-found__code{background:linear-gradient(135deg, var(--color-primary), var(--color-success));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:8rem;font-weight:900;line-height:1}.not-found__title{color:var(--color-text);margin:0;font-size:1.5rem}.not-found__message{color:var(--color-text-secondary);margin:0;line-height:1.6}.not-found__link{padding:var(--spacing-md) var(--spacing-lg);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-md);transition:all var(--transition-fast);font-weight:600;text-decoration:none;display:inline-block}.not-found__link:hover{background-color:var(--color-primary-hover);transform:translateY(-2px)}.not-found__info{padding:var(--spacing-md);background-color:var(--color-surface);border-radius:var(--radius-md);border:1px solid var(--color-border);font-family:var(--font-family-mono);color:var(--color-primary);word-break:break-all;font-size:.875rem}.not-found__info code{color:inherit}@media (width<=640px){.not-found__code{font-size:4rem}.not-found__title{font-size:1.25rem}}:root{--font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--font-family-mono:"Fira Code", "Courier New", monospace;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--radius-xs:.25rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-full:9999px;--transition-fast:.15s ease-in-out;--transition-base:.2s ease-in-out;--transition-slow:.3s ease-in-out}html[data-theme=light],:root{--color-background:#fff;--color-surface:#f8f9fa;--color-surface-hover:#f0f1f3;--color-border:#e1e4e8;--color-text:#24292e;--color-text-secondary:#6a737d;--color-primary:#0366d6;--color-primary-hover:#0256c7;--color-success:#28a745;--color-success-hover:#22863a;--color-danger:#d73a49;--color-danger-hover:#cb2431;--color-warning:#e36209}html[data-theme=dark]{--color-background:#0d1117;--color-surface:#161b22;--color-surface-hover:#21262d;--color-border:#30363d;--color-text:#e6edf3;--color-text-secondary:#8b949e;--color-primary:#58a6ff;--color-primary-hover:#79c0ff;--color-success:#3fb950;--color-success-hover:#56d364;--color-danger:#f85149;--color-danger-hover:#da3633;--color-warning:#fb8500}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);transition:background-color var(--transition-base), color var(--transition-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}#root{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}input:focus,textarea:focus,select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #0366d61a}button{cursor:pointer;font-family:inherit;font-size:inherit;transition:all var(--transition-fast)}button:disabled{opacity:.5;cursor:not-allowed}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-md)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-secondary)}