.todo-wrap{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:24px;display:grid}@media (max-width:960px){.todo-wrap{grid-template-columns:1fr}}.todo-add{gap:12px;margin-bottom:18px;display:flex}.todo-add input{color:#15171e;background:#fff;border:1px solid #dfe2e9;border-radius:999px;outline:none;flex:1;padding:14px 22px;font-size:14.5px;transition:border-color .2s,box-shadow .2s;box-shadow:0 4px 14px #1416230f}.todo-add input:focus{border-color:#2f7ded;box-shadow:0 0 0 2px #2f7ded33}.todo-addbtn{cursor:pointer;color:#fff;background:#2f7ded;border:none;border-radius:50%;flex:none;place-items:center;width:50px;height:50px;transition:transform .2s;display:grid;box-shadow:0 8px 18px #2f7ded59}.todo-addbtn:hover{background:#256ad1;transform:translateY(-2px)}.fpill{cursor:pointer;color:#4c515d;background:#e2e5ea;border:none;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:600;transition:background .2s,color .2s}.fpill.active{color:#fff;background:#1858b8;box-shadow:0 4px 10px #1858b840}.todo{background:#f7f8fb;border:1px solid #dfe2e9;border-radius:18px;align-items:center;gap:14px;margin-bottom:12px;padding:16px 18px;transition:transform .15s;display:flex;box-shadow:0 4px 14px #1416230a}.todo:hover{transform:translateY(-1px)}.todo .chk{cursor:pointer;background:#fff;border:2px solid #cfd4dc;border-radius:50%;flex:none;place-items:center;width:26px;height:26px;transition:background .2s,border-color .2s;display:grid}.todo .chk.on{background:#1858b8;border-color:#1858b8}.todo .tt{color:#15171e;flex:1;font-size:15px;font-weight:600}.todo.done .tt{color:#5c6270;text-decoration:line-through}.todo .due{color:#4c515d;flex:none;margin-left:auto;font-size:12.5px}.tag{border-radius:999px;flex:none;padding:5px 12px;font-size:11.5px;font-weight:700}