body{background:linear-gradient(135deg,#e0eafc,#cfdef3);margin:0;font-family:Poppins,sans-serif;color:#2d3436;transition:all .4s ease}.app{max-width:700px;margin:50px auto;padding:30px 35px;border-radius:30px;background:linear-gradient(145deg,#fff,#f3f4f6);box-shadow:0 15px 50px #0000001a;text-align:center;transition:all .4s ease}.app.dark{background:linear-gradient(145deg,#1e272e,#2f3640);color:#f5f6fa}.app.dark input,.app.dark select{background:#353b48;color:#f5f6fa;border:1px solid #555}.app.dark .task-info p,.app.dark .task-info small{color:#dcdde1}.theme-toggle{margin-bottom:20px;border:none;background:linear-gradient(135deg,#00c6ff,#0072ff);color:#fff;padding:12px 25px;border-radius:15px;cursor:pointer;font-weight:700;box-shadow:0 10px 25px #00000026;transition:all .4s ease}.theme-toggle:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 15px 35px #0003}.input-area{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;margin-bottom:25px}.input-area input,.input-area select{padding:12px 15px;border-radius:12px;border:1px solid #ccc;outline:none;font-size:15px;transition:all .3s ease}.input-area input:focus,.input-area select:focus{border-color:#6a11cb;box-shadow:0 0 15px #6a11cb4d}.input-area button{padding:12px 20px;background:linear-gradient(135deg,#6a11cb,#2575fc);color:#fff;border:none;border-radius:15px;cursor:pointer;font-weight:700;transition:all .4s ease}.input-area button:hover{transform:translateY(-3px) scale(1.07) rotate(-1deg);box-shadow:0 10px 30px #0003}.filters{margin:20px 0}.filters button{margin:4px;border:none;padding:7px 14px;border-radius:20px;background:#e0e0e0;cursor:pointer;font-weight:500;transition:all .3s ease}.filters button.active{background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;transform:scale(1.08);box-shadow:0 5px 15px #00000026}.filters button:hover{background:linear-gradient(135deg,#f7971e,#ffd200);color:#fff;transform:scale(1.08)}.progress-container{background:#dfe6e9;height:14px;border-radius:12px;overflow:hidden;margin:20px 0;box-shadow:inset 0 3px 6px #0000001a}.app.dark .progress-container{background:#3b3f47}.progress-bar{height:100%;background:linear-gradient(90deg,#ff512f,#dd2476);width:0%;border-radius:12px;transition:width .6s ease-in-out}ul{list-style:none;padding:0}li{background:linear-gradient(145deg,#fff,#f0f0f5);margin:15px 0;padding:18px 25px;border-radius:20px;box-shadow:0 10px 30px #00000014;display:flex;justify-content:space-between;align-items:center;transition:all .4s ease}.app.dark li{background:linear-gradient(145deg,#2c3e50,#34495e);box-shadow:0 10px 30px #0000004d}li.done{opacity:.5;text-decoration:line-through;filter:grayscale(30%);transform:scale(.98)}li:hover{transform:translateY(-7px) scale(1.02);box-shadow:0 15px 40px #0003}.task-info{text-align:left;cursor:pointer}.task-info h3{margin:0;font-size:20px;font-weight:700;background:linear-gradient(90deg,#ff4b2b,#ff416c);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.app.dark .task-info h3{-webkit-text-fill-color:#f5f6fa}.task-info p{margin:5px 0 2px;font-size:14px;color:#636e72}.app.dark .task-info p{color:#dcdde1}.task-info small{font-size:12px;color:#b2bec3}.app.dark .task-info small{color:#dcdde1}.task-info .tag{display:inline-block;padding:5px 12px;border-radius:25px;font-size:12px;margin-top:8px;font-weight:600;color:#fff;transition:all .3s ease}.tag.work{background:linear-gradient(135deg,#6a11cb,#2575fc)}.tag.personal{background:linear-gradient(135deg,#f7971e,#ffd200)}.tag.urgent{background:linear-gradient(135deg,#ff416c,#ff4b2b)}.tag.study{background:linear-gradient(135deg,#00b09b,#96c93d)}.buttons button{border:none;border-radius:15px;padding:10px 14px;cursor:pointer;margin-left:10px;font-size:14px;font-weight:700;transition:all .4s ease}button.edit{background:linear-gradient(135deg,#f7971e,#ffd200);color:#2d3436}button.edit:hover{transform:scale(1.15) rotate(-5deg);box-shadow:0 8px 25px #00000040}button.delete{background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff}button.delete:hover{transform:scale(1.15) rotate(5deg);box-shadow:0 8px 25px #00000040}li:hover .task-info h3{color:#2575fc;transition:color .4s ease}li:hover .tag{transform:scale(1.15)}@media screen and (max-width:768px){.app{margin:20px;padding:25px}.input-area input,.input-area select,.input-area button{width:100%}}