*{margin:0;padding:0;box-sizing:border-box}body{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background:#f5f5f5;color:#4d4d4d;min-height:100vh;display:flex;justify-content:center;padding-top:40px;-webkit-font-smoothing:antialiased}#root{width:100%;max-width:550px;padding:0 16px}.app{background:#fff;box-shadow:0 2px 4px #0003,0 25px 50px #0000001a;position:relative}.header h1{font-size:80px;font-weight:200;text-align:center;color:#b83f45;padding:20px 0 16px;letter-spacing:-2px}.input-form{display:flex;align-items:center;border-bottom:1px solid #e6e6e6;position:relative}.toggle-all{display:flex;align-items:center;justify-content:center;width:45px;height:45px;font-size:28px;color:#949494;border:none;background:none;cursor:pointer;padding:0;transform:rotate(-90deg);transition:color .2s;border-radius:0;flex-shrink:0}.toggle-all:hover{color:#4d4d4d;border-color:transparent}.toggle-all.checked{color:#4d4d4d}.new-todo{flex:1;padding:16px 16px 16px 8px;font-size:24px;font-family:inherit;border:none;outline:none;background:none;color:#4d4d4d}.new-todo::placeholder{color:#d9d9d9;font-style:italic;font-weight:300}.todo-list{list-style:none}.todo-item{display:flex;align-items:center;padding:0;border-bottom:1px solid #ededed;font-size:24px;position:relative;transition:background .15s}.todo-item:hover{background:#fafafa}.todo-item:hover .delete-btn{opacity:1}.checkbox{width:40px;height:40px;min-width:40px;margin:8px 0 8px 12px;border:1px solid #ededed;border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .2s}.checkbox:hover{border-color:#b83f45}.checkbox.checked{border-color:#bddad5}.checkbox svg{width:18px;height:18px;color:#5dc2af}.todo-text{flex:1;padding:15px 12px;word-break:break-all;cursor:default;line-height:1.2;transition:color .3s}.completed .todo-text{color:#d9d9d9;text-decoration:line-through}.delete-btn{width:40px;height:40px;border:none;background:none;color:#cc9a9a;font-size:28px;cursor:pointer;opacity:0;transition:opacity .15s,color .15s;display:flex;align-items:center;justify-content:center;padding:0;margin-right:8px;border-radius:0}.delete-btn:hover{color:#af5b5e;border-color:transparent}.edit-input{flex:1;padding:14px 16px;font-size:24px;font-family:inherit;border:1px solid #999;outline:none;box-shadow:inset 0 -1px 5px #0003;margin:0}.footer{display:flex;align-items:center;justify-content:space-between;padding:10px 15px;font-size:14px;color:#777;border-top:1px solid #e6e6e6;flex-wrap:wrap;gap:8px}.count{white-space:nowrap}.filters{display:flex;gap:4px}.filter-btn{padding:3px 7px;border:1px solid transparent;border-radius:3px;background:none;color:inherit;cursor:pointer;font-size:14px}.filter-btn:hover{border-color:#af2f2f1a}.filter-btn.active{border-color:#af2f2f33}.clear-completed{border:none;background:none;color:inherit;cursor:pointer;font-size:14px;padding:0;border-radius:0}.clear-completed:hover{text-decoration:underline;border-color:transparent}@media(max-width:430px){.footer{justify-content:center}}