/* Auth / portal landing */

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

.auth-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(201, 162, 39, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(201, 162, 39, 0.06), transparent 50%),
    linear-gradient(180deg, #0b0b0b 0%, #090909 100%);
  z-index: 0;
}
.auth-ambient-client {
  background:
    radial-gradient(ellipse 70% 50% at 85% 15%, rgba(201, 162, 39, 0.1), transparent 55%),
    radial-gradient(ellipse 45% 35% at 10% 85%, rgba(59, 130, 246, 0.06), transparent 50%),
    linear-gradient(180deg, #0b0b0b 0%, #090909 100%);
}
[data-gimss-theme="light"] .auth-ambient,
[data-gimss-theme="light"] .auth-ambient-client {
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(201, 162, 39, 0.18), transparent 55%),
    linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
}

.auth-wrap,
.portal-select {
  position: relative;
  z-index: 1;
}

.brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(145deg, var(--gimss-gold), #8a6d12);
  color: #0a0a0a;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.75rem;
  box-shadow: 0 10px 30px rgba(201, 162, 39, 0.25);
}
.brand-mark-sm {
  width: 48px;
  height: 48px;
  font-size: 1.35rem;
  border-radius: 12px;
}
.brand-mark-client {
  background: linear-gradient(145deg, #d4af37, #9a7b1a);
}

.brand-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  margin: 0;
  color: var(--gimss-text);
}
.brand-subtitle {
  color: var(--gimss-gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
}

.portal-card {
  display: block;
  height: 100%;
  padding: 1.75rem 1.5rem;
  background: var(--gimss-card);
  border: 1px solid var(--gimss-border);
  border-radius: var(--gimss-radius);
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.portal-card:hover {
  border-color: rgba(201, 162, 39, 0.5);
  transform: translateY(-3px);
  box-shadow: var(--gimss-shadow);
  color: inherit;
}
.portal-card .portal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gimss-gold-dim);
  color: var(--gimss-gold);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.client-portal .portal-icon {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--gimss-card);
  border: 1px solid var(--gimss-border);
  border-radius: calc(var(--gimss-radius) + 4px);
  padding: 1.75rem;
  box-shadow: var(--gimss-shadow);
}
.auth-card-client {
  border-top: 3px solid var(--gimss-gold);
}

.portal-label {
  color: var(--gimss-gold);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.portal-label-client {
  color: var(--gimss-gold-light);
}

.auth-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--gimss-muted);
}
.auth-footer a {
  color: var(--gimss-text-secondary);
}
.auth-footer a:hover {
  color: var(--gimss-gold);
}
.auth-footer .sep {
  color: var(--gimss-border-strong);
}

@media (max-width: 400px) {
  .auth-card {
    padding: 1.25rem;
  }
}