*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f5f5f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.5}.container{max-width:600px;margin:0 auto;padding:2rem 1rem}.header{text-align:center;margin-bottom:1.5rem}.header h1{color:#222;font-size:1.75rem;font-weight:600}.add-todo{gap:.5rem;margin-bottom:1rem;display:flex}.add-input{border:1px solid #ccc;border-radius:6px;outline:none;flex:1;padding:.625rem .75rem;font-size:1rem;transition:border-color .2s}.add-input:focus{border-color:#4a90d9}.add-btn{color:#fff;cursor:pointer;background:#4a90d9;border:none;border-radius:6px;padding:.625rem 1.25rem;font-size:1rem;font-weight:500;transition:background .2s}.add-btn:hover:not(:disabled){background:#357abd}.add-btn:disabled{opacity:.5;cursor:not-allowed}.filters{gap:.5rem;margin-bottom:1.25rem;display:flex}.filter-btn{color:#555;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;flex:1;padding:.5rem;font-size:.875rem;font-weight:500;transition:all .2s}.filter-btn:hover{background:#f0f0f0}.filter-btn.active{color:#fff;background:#4a90d9;border-color:#4a90d9}.todo-list{list-style:none}.todo-item{background:#fff;border:1px solid #e8e8e8;border-radius:6px;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.75rem;transition:background .2s;display:flex}.todo-item:hover{background:#fafafa}.todo-checkbox{cursor:pointer;flex-shrink:0;width:1.125rem;height:1.125rem}.todo-title{cursor:pointer;word-break:break-word;flex:1}.todo-title:hover{color:#4a90d9}.todo-item.closed .todo-title{color:#999;text-decoration:line-through}.edit-input{border:1px solid #4a90d9;border-radius:4px;outline:none;flex:1;padding:.375rem .5rem;font-size:1rem}.delete-btn{color:#ccc;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 .25rem;font-size:1.25rem;line-height:1;transition:color .2s}.delete-btn:hover{color:#e74c3c}.error-banner{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem;display:flex}.error-banner span{word-break:break-word;flex:1}.error-dismiss{color:#dc2626;cursor:pointer;background:0 0;border:none;flex-shrink:0;padding:0 .25rem;font-size:1.25rem;line-height:1}.error-dismiss:hover{color:#991b1b}.loading,.empty{text-align:center;color:#999;padding:2rem 0;font-size:.95rem}@media (width<=480px){.container{padding:1rem .75rem}.header h1{font-size:1.5rem}.add-input,.add-btn{font-size:.95rem}.add-btn{padding:.625rem 1rem}.todo-item{gap:.5rem;padding:.625rem}.filter-btn{padding:.4rem;font-size:.8rem}.error-banner{padding:.625rem .75rem;font-size:.85rem}}@media (width<=360px){.container{padding:.75rem .5rem}.header h1{margin-bottom:.25rem;font-size:1.25rem}.add-todo{gap:.375rem}.add-input{padding:.5rem;font-size:.9rem}.add-btn{padding:.5rem .75rem;font-size:.9rem}.todo-item{gap:.375rem;padding:.5rem}.todo-title,.edit-input{font-size:.9rem}.filter-btn{padding:.35rem;font-size:.75rem}}