@media (max-width: 640px) {
  .card {
    padding: 22px 18px;
  }

  #attendanceView .input-row {
    flex-direction: column;
    gap: 10px;
  }

  #attendanceView .input-row .btn {
    width: 100%;
  }

  #facultyView .input-row {
    flex-direction: column;
    gap: 10px;
  }

  #facultyView .input-row .btn {
    width: 100%;
  }

  #facultyListView .btn {
    width: 100%;
  }

  #iaMarksView .btn {
    width: 100%;
  }

  #finalIaMarksView .btn {
    width: 100%;
  }

  .attendance-head {
    align-items: flex-start;
  }

  .faculty-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  #loginView .input-row {
    flex-direction: column;
    gap: 10px;
  }

  #loginView .input-row .btn {
    width: 100%;
  }
}