:root {
  --auth-brand-primary: #ff0d00;
  --auth-brand-secondary: #3898ec;
  --auth-brand-primary-rgb: 255, 13, 0;
  --auth-brand-secondary-rgb: 56, 152, 236;
}

.auth-wrapper {
  background: radial-gradient(
      circle at 10% 20%,
      rgba(var(--auth-brand-primary-rgb), 0.15),
      transparent 55%
    ),
    radial-gradient(
      circle at 90% 10%,
      rgba(var(--auth-brand-secondary-rgb), 0.2),
      transparent 40%
    ),
    var(--bs-body-bg, #f8f9fa);
}

.auth-hero-panel {
  background: linear-gradient(
    135deg,
    var(--auth-brand-primary),
    var(--auth-brand-secondary)
  );
  color: #fff;
  border: none;
  position: relative;
  overflow: hidden;
}

.auth-hero-panel::after {
  content: "";
  position: absolute;
  inset: 10%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 32px;
  pointer-events: none;
}

.auth-hero-panel h1,
.auth-hero-panel p,
.auth-hero-panel li,
.auth-hero-panel li i {
  color: rgba(255, 255, 255, 0.95);
}

.auth-card {
  border: none;
  box-shadow: 0 25px 60px rgba(14, 32, 70, 0.1);
  border-top: 4px solid var(--auth-brand-secondary);
}

.auth-card .btn-primary,
.auth-card .btn.prominent,
.auth-card button[tags~="prominent"] {
  background-image: linear-gradient(
    135deg,
    var(--auth-brand-primary),
    var(--auth-brand-secondary)
  );
  border: none;
  box-shadow: 0 12px 25px rgba(56, 152, 236, 0.25);
}

.auth-card .btn-primary:hover,
.auth-card .btn.prominent:hover,
.auth-card button[tags~="prominent"]:hover {
  filter: brightness(1.05);
}

.auth-brand-accent-text {
  background: linear-gradient(
    135deg,
    var(--auth-brand-primary),
    var(--auth-brand-secondary)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.auth-brand-link {
  color: var(--auth-brand-secondary) !important;
  font-weight: 600;
}

.auth-brand-link:hover {
  color: var(--auth-brand-primary) !important;
}

.auth-brand-icon {
  background: linear-gradient(
    135deg,
    rgba(var(--auth-brand-primary-rgb), 0.9),
    rgba(var(--auth-brand-secondary-rgb), 0.9)
  );
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(56, 152, 236, 0.25);
}

.auth-brand-icon i {
  color: inherit;
}

.circle-icon-48 {
  width: 48px;
  height: 48px;
}

.circle-icon-56 {
  width: 56px;
  height: 56px;
}

.auth-wrapper .link-secondary {
  color: rgba(13, 27, 62, 0.75) !important;
}

.auth-wrapper .link-secondary:hover {
  color: var(--auth-brand-secondary) !important;
}