.todo{max-width:var(--max-w);margin:0 auto;padding:0 2.5rem}.todo__back{font-family:var(--font-mono);font-size:.8125rem;color:var(--c-text-3);text-decoration:none;letter-spacing:.02em;transition:color .2s ease;display:inline-block;margin-bottom:2rem}.todo__back:hover{color:var(--c-accent)}.todo__title{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--c-text);font-variation-settings:'opsz' 72;margin-bottom:.75rem}.todo__desc{font-size:1.0625rem;color:var(--c-text-2);line-height:1.6;max-width:640px;margin-bottom:2.5rem}.todo__panel{border:1px solid var(--c-border);border-radius:6px;overflow:hidden;background:var(--c-bg-elevated)}.todo__input-row{display:flex;border-bottom:1px solid var(--c-border)}.todo__input{flex:1;min-width:0;font-family:var(--font-body);font-size:1.0625rem;color:var(--c-text);background:0 0;border:none;padding:1rem 1.25rem;outline:none}.todo__input::placeholder{color:var(--c-text-3)}.todo__add-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:#fff;background:var(--c-accent);border:none;padding:0 1.5rem;cursor:pointer;letter-spacing:.04em;text-transform:uppercase;transition:background .2s ease;flex-shrink:0}.todo__add-btn:hover{background:var(--c-accent-hover)}.todo__list{min-height:3rem}.todo__empty{padding:3rem 1.25rem;text-align:center;color:var(--c-text-3);font-size:.9375rem}.todo__item{display:flex;align-items:center;padding:.75rem 1.25rem;border-bottom:1px solid var(--c-border);gap:.75rem;transition:background .15s ease}.todo__item:last-child{border-bottom:none}.todo__item:hover{background:var(--c-bg)}.todo__item--completed .todo__text{text-decoration:line-through;color:var(--c-text-3)}.todo__checkbox-label{display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;position:relative;width:1.25rem;height:1.25rem}.todo__checkbox{position:absolute;opacity:0;width:0;height:0}.todo__checkmark{width:1.25rem;height:1.25rem;border:1.5px solid var(--c-border);border-radius:3px;transition:all .15s ease;position:relative}.todo__checkbox:checked+.todo__checkmark{background:var(--c-accent);border-color:var(--c-accent)}.todo__checkbox:checked+.todo__checkmark::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.todo__checkbox:focus-visible+.todo__checkmark{outline:2px solid var(--c-accent);outline-offset:2px}.todo__text{flex:1;font-size:1rem;color:var(--c-text);line-height:1.5;word-break:break-word}.todo__delete{font-size:1.25rem;color:var(--c-text-3);background:0 0;border:none;cursor:pointer;padding:0 .25rem;line-height:1;opacity:0;transition:all .15s ease}.todo__item:hover .todo__delete,.todo__delete:focus-visible{opacity:1}.todo__delete:hover{color:var(--c-accent)}.todo__footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid var(--c-border)}.todo__footer[hidden]{display:none}.todo__count{font-family:var(--font-mono);font-size:.6875rem;color:var(--c-text-3);letter-spacing:.02em}.todo__clear-btn{font-family:var(--font-mono);font-size:.6875rem;color:var(--c-text-3);background:0 0;border:1px solid var(--c-border);border-radius:100px;padding:.25rem .75rem;cursor:pointer;letter-spacing:.02em;transition:all .2s ease}.todo__clear-btn:hover{color:var(--c-accent);border-color:var(--c-accent)}.todo__clear-btn[hidden]{display:none}.todo__backup{margin-top:2rem;border-top:1px solid var(--c-border);padding-top:1rem}.todo__backup-toggle{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--c-text-3);text-transform:uppercase;letter-spacing:.08em;background:0 0;border:none;cursor:pointer;padding:.375rem 0;display:flex;align-items:center;gap:.5rem;transition:color .2s ease;width:100%}.todo__backup-toggle:hover{color:var(--c-accent)}.todo__backup-chevron{transition:transform .2s ease;flex-shrink:0}.todo__backup-toggle[aria-expanded=true] .todo__backup-chevron{transform:rotate(180deg)}.todo__backup-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}.todo__backup-body--open{grid-template-rows:1fr}.todo__backup-inner{overflow:hidden}.todo__backup-section{padding:1rem 0 .5rem}.todo__backup-desc{font-size:.875rem;color:var(--c-text-3);line-height:1.6;margin-bottom:1rem}.todo__backup-actions{display:flex;flex-wrap:wrap;gap:.75rem}.todo__backup-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:400;color:var(--c-text-2);background:var(--c-bg);border:1px solid var(--c-border);border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;letter-spacing:.02em;transition:all .2s ease;text-align:center}.todo__backup-btn:hover{color:var(--c-text);border-color:var(--c-accent)}.todo__backup-file-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.todo__backup-status{font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;padding:.75rem 1rem;border-radius:4px;margin-top:.75rem}.todo__backup-status--success{color:var(--c-text-2);background:var(--c-tag-bg);border:1px solid var(--c-tag-border)}.todo__backup-status--error{color:#a33;background:rgba(170,51,51,8%);border:1px solid rgba(170,51,51,.2)}body.dark-theme .todo__backup-status--error{color:#e88;background:rgba(238,136,136,8%);border-color:rgba(238,136,136,.2)}.todo__backup-confirm{margin-top:.75rem;padding:1rem;background:var(--c-bg-elevated);border:1px solid var(--c-border);border-radius:6px}.todo__backup-confirm-text{font-size:.875rem;color:var(--c-text-2);line-height:1.6;margin-bottom:1rem}.todo__backup-confirm-actions{display:flex;flex-wrap:wrap;gap:.5rem}.todo__backup-confirm-btn{font-family:var(--font-mono);font-size:.75rem;font-weight:500;color:#fff;background:var(--c-accent);border:none;border-radius:100px;padding:.5rem 1.25rem;cursor:pointer;letter-spacing:.02em;transition:background .2s ease}.todo__backup-confirm-btn:hover{background:var(--c-accent-hover)}.todo__backup-confirm-btn--cancel{color:var(--c-text-2);background:0 0;border:1px solid var(--c-border)}.todo__backup-confirm-btn--cancel:hover{color:var(--c-text);border-color:var(--c-accent);background:0 0}.todo__info{padding-top:2rem;border-top:1px solid var(--c-border);margin-top:1rem;margin-bottom:4rem}.todo__info p{font-size:.9375rem;color:var(--c-text-3);line-height:1.7;max-width:640px}@media(max-width:768px){.todo{padding:0 1.5rem}}@media(max-width:480px){.todo{padding:0 1rem}.todo__input{font-size:1rem;padding:.875rem 1rem}.todo__add-btn{padding:0 1rem}.todo__item{padding:.75rem 1rem}.todo__delete{opacity:1}.todo__backup-actions{flex-direction:column}.todo__backup-confirm-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){.todo__item,.todo__back,.todo__add-btn,.todo__delete,.todo__checkmark,.todo__clear-btn,.todo__backup-toggle,.todo__backup-chevron,.todo__backup-body,.todo__backup-btn,.todo__backup-confirm-btn{transition:none}}@media(display-mode:standalone){.todo{padding:0}.todo__panel{border-radius:0;border-left:none;border-right:none}}