/* =====================================================================
   Auth pages (login, forgot/reset password): split layout with the
   animated campus scene on one side and the form on the other.
   ===================================================================== */

.auth-body { background: var(--bg); min-height: 100vh; min-height: 100dvh; }

.auth-shell {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
}

.auth-visual { position: relative; overflow: hidden; }
.auth-visual-copy {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 4vw, 64px); color: #fff;
}
.av-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 650;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); margin-bottom: 20px;
}
.auth-visual-copy h1 {
  color: #fff; font-size: clamp(1.9rem, 3.1vw, 2.7rem); line-height: 1.14; letter-spacing: -.02em;
  margin-bottom: 14px; text-shadow: 0 2px 24px rgba(0, 0, 0, .25);
}
.auth-visual-copy p { max-width: 44ch; color: rgba(255, 255, 255, .78); font-size: 1rem; margin: 0; }

.auth-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 40px);
}
.theme-toggle-fixed {
  position: absolute; top: 18px; right: 18px; z-index: 5;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}

.auth-card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 34px);
  animation: rise .5s var(--ease) both;
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand .page-hero-ico { margin-inline: auto; }
.auth-brand h1 { font-size: 1.5rem; margin: 0 0 4px; }
.auth-brand p { color: var(--muted); margin: 0; font-size: .92rem; }

.auth-card .alert { margin-bottom: 16px; }
.auth-foot { margin-top: 20px; color: var(--muted); font-size: .84rem; text-align: center; }

.demo-accounts { margin-top: 22px; padding: 14px 16px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; }
.demo-accounts-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 650; font-size: .86rem; margin-bottom: 10px; }
.demo-accounts-head i { color: var(--brand-text); }
.demo-accounts-head span { font-weight: 500; color: var(--muted); font-size: .8rem; }
.demo-accounts-head code { background: var(--surface-3); padding: 1px 6px; border-radius: 6px; color: var(--text); }
.demo-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.demo-chip {
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2);
  border-radius: 999px; padding: 5px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, transform .16s var(--ease);
}
.demo-chip:hover { background: var(--brand-tint-2); border-color: rgba(var(--brand-rgb), .5); color: var(--brand-text); transform: translateY(-1px); }

@media (max-width: 991.98px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-visual { min-height: 40vh; }
  .auth-visual-copy { padding: 24px 22px 30px; }
  .auth-visual-copy h1 { font-size: 1.7rem; }
  .auth-visual-copy p { display: none; }
}
@media (max-width: 480px) {
  .auth-visual { min-height: 34vh; }
  .demo-chip-grid { max-height: 84px; overflow-y: auto; }
}