*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;background-color:#f5f7fa;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:40px;color:#333}@media (max-width: 780px){body{padding:15px}}.app{display:flex;flex-direction:column;gap:20px;max-width:500px;width:100%}.task-container,.completed-task-container,.deleted-task-container{position:relative;background-color:#fff;border-radius:10px;box-shadow:0 4px 12px #0000001a;padding:30px}@media (max-width: 780px){.task-container,.completed-task-container,.deleted-task-container{padding:10px}}h1,h2{color:#2c3e50;margin-bottom:16px}.completed-header{display:flex;align-items:center;justify-content:space-between}.toggle-button{background:none;border:none;cursor:pointer;font-size:1.2em;color:#3498db;transition:transform .3s ease}.toggle-button.open{transform:rotate(180deg)}.sort-controls{display:flex;justify-content:start;align-items:center;gap:12px;margin-bottom:20px}.close-button{background:none;border:none;font-size:1.5em;font-weight:700;color:#3498db;cursor:pointer;position:absolute;top:10px;right:16px;padding:0;transition:color .3s,transform .3s ease}.close-button.open{transform:rotate(135deg);color:#2980b9}.close-button:hover{color:#2980b9}.sort-button{padding:6px 12px;background-color:#3498db;border:none;color:#fff;font-size:.9em;font-weight:700;border-radius:6px;cursor:pointer;transition:background-color .3s}.sort-button.active{background-color:#2980b9;font-weight:700}.sort-button:hover{background-color:#2980b9}.task-form{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;animation:fade-in .5s ease-in-out}.task-form input[type=text],.task-form select,.task-form input[type=datetime-local]{margin:0 0 16px;padding:12px;border-radius:8px;border:1px solid #ced4da;width:80%;font-size:1em;transition:border .3s}@media (max-width: 780px){.task-form input[type=text],.task-form select,.task-form input[type=datetime-local]{width:95%}}.task-form input:focus,.task-form select:focus,.task-form input[type=datetime-local]:focus{outline:none;border-color:#3498db}.task-form button{padding:12px 24px;border:none;background-color:#2980b9;color:#fff;font-size:1em;font-weight:700;border-radius:8px;cursor:pointer;transition:background-color .3s,transform .2s;width:80%}.task-form button:hover{background-color:#2980b9;transform:translateY(-2px)}@media (max-width: 780px){.task-form button{width:95%}}.task-list,.completed-task-list{list-style-type:none;padding:0;width:100%}.task-item{padding:15px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;margin:10px 0;font-size:1.1em;transition:transform .2s,opacity .3s;animation:fade-in .5s ease-in-out}.task-item.high{background-color:#f8d7da;color:#721c24;border-left:6px solid #f5c6cb}.task-item.medium{background-color:#fff3cd;color:#856404;border-left:6px solid #ffeeba}.task-item.low{background-color:#d4edda;color:#155724;border-left:6px solid #c3e6cb}.task-item:hover{transform:scale(1.02)}.task-info{flex:1;text-align:left}.task-deadline{font-size:.85em;color:#666;margin-top:5px}.task-buttons{display:flex;flex-direction:column;gap:6px}.complete-button{padding:6px 10px;background-color:#2ecc71;border:none;color:#fff;border-radius:6px;font-size:.85em;font-weight:700;cursor:pointer;transition:background-color .3s,transform .2s}.complete-button:hover{background-color:#27ae60;transform:translateY(-2px)}.delete-button{padding:6px 10px;background-color:#e74c3c;border:none;color:#fff;border-radius:6px;font-size:.85em;font-weight:700;cursor:pointer;transition:background-color .3s,transform .2s}.delete-button:hover{background-color:#c0392b;transform:translateY(-2px)}.task-item.completed{background-color:#e0f7df;color:#155724;border-left:6px solid #a5d6a7;opacity:.9}.completed-task-list .task-item{animation:fade-in .5s ease-in-out}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.completed-task-list-container{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s ease,opacity .5s ease}.completed-task-list-container.open{max-height:500px;opacity:1}.completed-task-list,.task-list{margin-top:20px;padding-top:10px;border-top:2px solid #ddd}.footer{text-align:center;margin-top:20px;padding:10px;background-color:#f0f0f0;font-size:.9em}