.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

.task-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .task-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .task-grid { grid-template-columns: repeat(3, 1fr); }
}

.task-card .delete-btn {
  opacity: 0;
}
.task-card:hover .delete-btn {
  opacity: 1;
}