:root {
      --bg-main: #020617;
      --bg-section: #0B1220;
      --bg-card: #0F172A;

      --text-main: #F8FAFC;
      --text-muted: #94A3B8;

      --primary: #3B82F6;
      --primary-hover:#22C55E;
      --button:#22c55e23;

     --danger: #811d1d;

      --success: #22C55E;
      --border-soft: rgba(255,255,255,0.06);
      --input-background: #0F172A; 
    }
     .gpa-table input, .gpa-table select {
        width: 100%;
        padding: 6px;
        font-family: Cairo;
        background-color: var(--input-background);
        color: var(--text-main);
      }
      input::placeholder{
        color: var(--text-main);
      }
      .gpa-actions {
        margin: 15px auto;     
        display: flex;
        justify-content: center;
        gap: 10px;
      }

      .gpa-actions button {
        padding: 8px 15px;
        cursor: pointer;
        background-color: var(--button);
        outline: none;
        border: 1px solid var(--primary-hover);
        width: 200px;
        height: 50px;
        color: var(--text-main);
        font-size: 18px;
        border-radius: 15px;
     }

      .gpa-result {
        
        margin-top: 20px;
        font-size: 22px;
        font-weight: bold;
        text-align: center;
      }

@media (max-width: 992px) {

  .gpa-actions button {
    width: 160px;
    height: 45px;
    font-size: 16px;
  }

  .gpa-result {
    font-size: 20px;
  }

}


@media (max-width: 768px) {

  .gpa-actions {
    flex-direction: column;
    gap: 12px;
  }

  .gpa-actions button {
    width: 90%;
    height: 45px;
    font-size: 16px;
  }

  .gpa-result {
    font-size: 18px;
  }

  .gpa-table input,
  .gpa-table select {
    font-size: 14px;
    padding: 8px;
  }

}


@media (max-width: 480px) {

  .gpa-actions button {
    height: 42px;
    font-size: 15px;
  }

  .gpa-result {
    font-size: 16px;
  }

}