body {
      font-family: Arial, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      flex-direction: column;
    }

    #login-container, #grades-container {
      width: 80%;
      max-width: 600px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-align: center;
    }

    #login-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }

    #login-form input, #login-form button {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ddd;
    }

    #admin-login {
      margin-top: 15px;
    }

    #admin-passcode {
      display: none;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }

    #admin-passcode input, #admin-passcode button {
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #ddd;
    }


    #students-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }

    .student {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .student input[type="number"] {
      width: 50px;
    }

    #student-grade {
      display: none;
    }

    #student-grade input[type="number"] {
      display: block; /* Only show for student view */
    }
