#root{height:100vh;display:flex;justify-content:center;align-items:center}.todo{display:block;width:70%;max-width:480px;margin:5% auto;padding:20px;border-radius:8px;box-shadow:2px 2px 10px #00000059}@media (max-width: 427px){.todo{width:80%}button{max-width:80px}}.todo-form form{display:grid;grid-template-columns:1fr 100px;margin:0 0 1rem}.todo-form input{font-size:85%;border-color:transparent;background:#f1f5f8;padding:.4rem .4rem .4rem 1rem;border-radius:4px}.error-text{color:#cb2431;opacity:.8;font-weight:700;text-align:center}.task-options{display:flex;gap:1rem;margin-top:.5rem;justify-content:center;align-items:center}.priority-section{display:flex;gap:.5rem;align-items:center}.priority-section label{display:flex;align-items:center;gap:.2rem;cursor:pointer}.category-section{display:flex;align-items:center;gap:.5rem}.category-section select{padding:.2rem;border-radius:4px;border:1px solid #ccc}.todo-list{padding:0 3rem}.todo-list li{display:flex;list-style-type:none;align-items:center;cursor:pointer;gap:.5rem}.todo-list li+li{margin-top:.5rem}.todo-list li:hover{background-color:#eee}.todo-list li.done .task-name{text-decoration:line-through;color:#ccc}.todo-list button{min-height:40px}.priority-label{font-weight:700;font-size:.9rem;color:#fff;padding:.1rem .3rem;border-radius:4px}.task-name{font-size:120%;flex:1}.category-label{font-size:.9rem;color:#666;min-width:4rem;text-align:right}.no-task{text-align:center;color:#999;font-size:18px;margin:2rem 0;padding:2rem;background:#f9f9f9;border:2px dashed #ddd;border-radius:8px;font-style:italic}.todo-filter{display:flex;justify-content:center;margin:1rem 0 1.2rem;gap:.5rem}.todo-filter label{display:flex;gap:.2rem;cursor:pointer}#root{font-family:"system-ui",Josefin Sans}h1{font-size:2rem;text-align:center}button{background-color:#1fadc5;border:1px solid transparent;color:#fff;padding:.4em 1.2em;cursor:pointer;outline:none;border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}button.danger{background-color:#fff;color:#cb2431}button.danger.delete{display:flex;justify-content:center;align-items:center;margin:0 auto;margin-top:1rem;border-radius:.5rem;width:120px}button.danger:hover{background-color:#cb2431;color:#fff}button[disabled],button.danger[disabled]{opacity:.6;cursor:default}input[type=checkbox],input[type=radio]{cursor:pointer}