.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem var(--space-md) var(--space-xl);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
}

.auth-logo { display: flex; justify-content: center; margin-bottom: var(--space-lg); }
.auth-logo svg { width: 36px; height: 36px; }

.auth-card h1 { font-size: 1.5rem; text-align: center; margin-bottom: 0.4rem; }
.auth-card .auth-sub { text-align: center; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: var(--space-lg); }

.field-group { margin-bottom: var(--space-md); }
.field-group label { display: block; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.4rem; }

.field-group input, .field-group select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}

.field-group input:focus, .field-group select:focus { outline: none; border-color: var(--accent-gold); }
.field-group .hint { font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.4rem; display: block; }

.role-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.role-option {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  text-align: center;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.role-choice-4 .role-option { font-size: 0.78rem; line-height: 1.3; padding: 0.6rem 0.5rem; }
@media (max-width: 420px) {
  .role-choice-4 { grid-template-columns: 1fr; }
}

.role-option input { display: none; }
.role-option.checked, .role-option:has(input:checked) {
  border-color: var(--accent-gold);
  color: var(--accent-gold-bright);
  background: rgba(212,175,55,0.08);
}

.auth-error {
  display: none;
  background: rgba(226, 114, 107, 0.1);
  border: 1px solid rgba(226, 114, 107, 0.35);
  color: #F0958E;
  font-size: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.auth-card .btn { width: 100%; padding: 0.85rem; font-size: 0.95rem; }

.auth-footer { text-align: center; margin-top: var(--space-lg); font-size: 0.88rem; color: var(--text-secondary); }
.auth-footer a { color: var(--accent-gold-bright); border-bottom: 1px solid rgba(212, 175, 55, 0.35); }

.auth-card .auth-home-btn { width: auto; display: inline-flex; }

.demo-creds {
  margin-top: var(--space-md);
  padding: 0.7rem 0.9rem;
  background: rgba(212,175,55,0.06);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}