body.auth-access-page {
  background:
    radial-gradient(circle at 15% 15%, rgba(231, 181, 31, .18), transparent 24rem),
    linear-gradient(145deg, #eef7f3 0%, #f8faf9 48%, #e4f1eb 100%) !important;
}

body.auth-access-page .wrapper { background: transparent !important; }
body.auth-access-page .content-wrapper {
  align-items: center;
  background: transparent !important;
  display: flex;
  justify-content: center;
  margin-left: 0 !important;
  min-height: calc(100vh - 58px) !important;
  padding: clamp(1rem, 4vw, 3rem) 1rem;
}

body.auth-access-page .content { width: 100%; }
body.auth-access-page .container { max-width: 720px; }
body.auth-access-page .card {
  border: 1px solid rgba(255,255,255,.85) !important;
  border-radius: 24px !important;
  box-shadow: 0 24px 70px rgba(6,58,45,.16) !important;
  overflow: hidden;
}

body.auth-access-page .card-primary > .card-header {
  align-items: center;
  background: linear-gradient(110deg, var(--usal-green-950), var(--usal-green-700)) !important;
  border: 0 !important;
  color: #fff !important;
  display: flex;
  justify-content: center;
  padding: 1rem 1.35rem;
}

body.auth-access-page .card-primary > .card-header .card-title {
  color: #fff !important;
  font-size: .9rem;
  float: none !important;
  font-weight: 600;
  letter-spacing: .12em;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}
body.auth-access-page .card-body { padding: clamp(1.2rem, 4vw, 2rem) !important; }
body.auth-access-page .profile-user-img {
  background: #fff;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 30px rgba(6,58,45,.16);
  padding: 5px !important;
}

body.auth-access-page .profile-username { color: var(--usal-green-950); font-size: clamp(1.45rem, 4vw, 1.9rem); font-weight: 800; margin-top: 1.2rem; }
body.auth-access-page .text-muted { color: var(--usal-muted) !important; font-size: .92rem !important; }
body.auth-access-page .info-box {
  background: var(--usal-green-800) !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #fff;
  min-height: 76px;
}

body.auth-access-page .info-box-icon { background: rgba(255,255,255,.12) !important; color: var(--usal-gold-500) !important; }
body.auth-access-page .info-box-text { color: #fff !important; font-size: .88rem !important; }
body.auth-access-page .main-footer {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--usal-muted);
  display: flex;
  justify-content: space-between;
  margin-left: 0 !important;
  padding: 1rem clamp(1.25rem, 4vw, 3rem);
  text-align: left;
}

body.auth-access-page .main-footer .float-right {
  float: none !important;
  margin-left: auto;
  text-align: right;
}

body.auth-access-page .auth-option-link,
body.auth-access-page .auth-option-link:hover {
  color: #fff;
  display: block;
  text-decoration: none;
}

body.auth-access-page .auth-options {
  justify-content: center;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-bottom: 1.5rem;
  row-gap: 1.5rem;
}

body.auth-access-page .auth-options > [class*="col-"] {
  padding-left: 1rem;
  padding-right: 1rem;
}

body.auth-access-page .auth-option {
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(6,58,45,.18) !important;
  min-height: 108px;
  height: 100%;
  padding: .55rem .65rem;
  transition: box-shadow .2s ease, transform .2s ease;
}

body.auth-access-page .auth-option--staff {
  background: linear-gradient(145deg, #168158, #25a36d) !important;
}
body.auth-access-page .auth-option--students {
  background: linear-gradient(145deg, #e98c08, #f6a71e) !important;
}
body.auth-access-page .auth-option-link:hover .auth-option {
  box-shadow: 0 14px 30px rgba(6,58,45,.25) !important;
  transform: translateY(-3px);
}

body.auth-access-page .auth-option .info-box-icon {
  align-self: center;
  background: rgba(5,76,57,.42) !important;
  border-radius: 14px !important;
  color: #fff !important;
  flex: 0 0 48px;
  font-size: 1.28rem;
  height: 52px;
  margin: 0 .5rem 0 0;
}

body.auth-access-page .auth-option--students .info-box-icon {
  background: rgba(154,82,0,.38) !important;
}

body.auth-access-page .auth-option .info-box-content {
  align-items: center;
  justify-content: center;
  padding: .4rem;
  text-align: center;
}

body.auth-access-page .auth-option .info-box-text,
body.auth-access-page .auth-option .info-box-number {
  color: #fff !important;
  white-space: normal;
}

body.auth-access-page .auth-option .info-box-text {
  font-size: .9rem !important;
  font-weight: 700;
  letter-spacing: .04em;
}

body.auth-access-page .auth-option .info-box-number {
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
  margin-top: .25rem;
}

body.auth-access-page .g_id_signin {
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 44px;
  overflow: hidden;
  padding: 0;
  width: max-content;
  max-width: 100%;
}

body.auth-access-page .google-icon-access {
  align-items: center;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-top: .45rem;
  position: relative;
  width: 44px;
}

body.auth-access-page .google-logo-visible {
  height: 20px;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  z-index: 5;
}

@media (max-width: 575.98px) {
  body.auth-access-page .content-wrapper { align-items: flex-start; padding: .8rem; }
  body.auth-access-page .card { border-radius: 18px !important; }
  body.auth-access-page .card-body { padding: 1rem !important; }
  body.auth-access-page .auth-options > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  body.auth-access-page .auth-option { min-height: 104px; }
  body.auth-access-page .main-footer {
    align-items: center;
    flex-direction: column;
    gap: .3rem;
    text-align: center;
  }
  body.auth-access-page .main-footer .float-right {
    margin-left: 0;
    text-align: center;
  }
}