/* ============================================================
   ELGI5 — AUTH PAGE STYLES
   Used by student-login.php, mentor-login.php, admin-login.php,
   public\student_registerv2.php
   ============================================================ */

.auth-shell {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) 1.25rem 3rem;
  background: var(--grad-mesh), var(--c-white);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--c-white);
  border: 1px solid var(--c-gray-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.auth-card .brand { margin-bottom: 1.5rem; }
.auth-card h1 { font-size: var(--fs-h3); margin-bottom: 0.4rem; }
.auth-card p.auth-sub { color: var(--c-ink-60); font-size: 0.92rem; margin-bottom: 1.75rem; }

.auth-field { margin-bottom: 1.1rem; }
.auth-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.auth-field input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--c-gray-line);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--c-gray);
  transition: border-color var(--dur-fast);
}
.auth-field input:focus {
  outline: none;
  border-color: var(--c-green);
  background: var(--c-white);
}

.auth-card .btn { width: 100%; margin-top: 0.5rem; }

.auth-switch {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.88rem;
  color: var(--c-ink-60);
}
.auth-switch a { font-weight: 700; color: var(--c-green-deep); }

.auth-roles {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.auth-roles a {
  flex: 1;
  text-align: center;
  padding: 0.6rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  border: 1.5px solid var(--c-gray-line);
  color: var(--c-ink-60);
}
.auth-roles a.active {
  border-color: var(--c-dark);
  color: var(--c-dark);
  background: var(--c-gray);
}