*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}body{background:linear-gradient(to right,#e0eafc,#cfdef3);min-height:100vh;display:flex;align-items:center;justify-content:center}.main-container{background-color:#fff;padding:2rem;border-radius:1.5rem;box-shadow:0 10px 25px #00000014;width:90%;max-width:600px;transition:all .3s ease-in-out}h1{text-align:center;margin-bottom:1.5rem;font-size:1.8rem;color:#1e293b}.form-div{display:flex;gap:1rem;justify-content:center}input[type=text]{flex:1;padding:.75rem 1rem;border-radius:10px;border:1px solid #cbd5e1;font-size:1rem;transition:border .3s ease}input[type=text]:focus{border-color:#60a5fa;outline:none}button{padding:.75rem 1.2rem;border:none;border-radius:10px;font-size:1rem;cursor:pointer;transition:all .3s ease-in-out}button:hover{transform:scale(1.03)}.form-div button{background-color:#60a5fa;color:#fff}.form-div button:hover{background-color:#3b82f6}.task_div{display:flex;justify-content:space-between;align-items:center;background:#f8fafc;padding:.8rem 1rem;margin:.5rem 0;border-radius:10px;box-shadow:0 4px 8px #0000000d;animation:fadeInUp .4s ease;gap:.5rem}.task_div p{flex:1;font-size:1rem;color:#334155}.task_div button:first-of-type{background-color:#60a5fa;color:#fff}.task_div button:first-of-type:hover{background-color:#3b82f6}.task_div button:last-of-type{background-color:#60a5fa;color:#fff}.task_div button:last-of-type:hover{background-color:#3b82f6}.visible{display:block;margin:1.5rem auto 0;background-color:#fdba74;color:#78350f}.visible-c{display:inline-block;cursor:pointer;font-size:1.5rem;color:#007bff;transition:opacity .3s ease-in-out;opacity:1}.checked{text-decoration:line-through}.not_checked{text-decoration:none}.hidden-c{display:none}.visible:hover{background-color:#fb923c}.hidden{display:none}ul{list-style:none;margin-top:1rem;padding:0}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 500px){.form-div{flex-direction:column}button,input[type=text]{width:100%}.task_div{flex-direction:column;align-items:flex-start}.task_div p{margin-bottom:.5rem}.task_div button{width:100%;margin-top:.5rem}}.date_time_pick{width:100%;margin-top:.5rem}.completed_task{border:1px solid #ddd;border-radius:8px;background-color:#fafafa;margin:1rem 0;box-shadow:0 2px 5px #0000000d;overflow:hidden;font-family:sans-serif}.completed_header{padding:10px 15px;background-color:#f1f1f1;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:16px}.completed_header:hover{background-color:#e9e9e9}.arrow{transition:transform .3s ease}.arrow.open{transform:rotate(180deg)}.completed_list{list-style:none;margin:0;padding:0}.completed_item{display:flex;align-items:center;padding:10px 15px;border-top:1px solid #eee;background-color:#fff;transition:background-color .2s}.completed_item:hover{background-color:#fdfdfd}.checkmark{color:green;font-size:18px;margin-right:10px}.completed_item p{flex:1;margin:0;font-size:15px;color:#333;text-decoration:line-through}.bin{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.bin:hover{background-color:#fce4e4}.bin svg{color:#d9534f;font-size:16px}