:root {
  --auth-wine: #9f1d2c;
  --auth-orange: #d85c2f;
  --auth-amber: #f2ad3f;
  --auth-cream: #fff9f2;
  --auth-ink: #2f2021;
  --auth-muted: #756568;
  --auth-border: #e8d9d2;
}

body.auth-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(242, 173, 63, .20), transparent 29rem),
    radial-gradient(circle at 90% 88%, rgba(216, 92, 47, .13), transparent 32rem),
    linear-gradient(145deg, #fffaf4 0%, #f8efea 100%);
  color: var(--auth-ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-shell {
  width: 100%;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}

.auth-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 27rem;
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border: 1px solid rgba(159, 29, 44, .10);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1.5rem 4rem rgba(90, 37, 29, .12);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: .3rem;
  background: linear-gradient(90deg, var(--auth-wine), var(--auth-orange) 62%, var(--auth-amber));
}

.auth-brand-mark {
  width: 3.75rem;
  height: 3.75rem;
  color: #fff;
  background: linear-gradient(145deg, var(--auth-wine), var(--auth-orange));
  box-shadow: 0 .75rem 1.5rem rgba(159, 29, 44, .24);
}

.auth-title {
  color: var(--auth-ink);
  letter-spacing: -.035em;
}

.auth-subtitle,
.auth-footer {
  color: var(--auth-muted) !important;
}

.auth-label {
  color: #4b3638;
  font-size: .875rem;
}

.auth-input-group {
  width: 100%;
  min-height: 3.25rem;
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: .875rem;
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.auth-input-group:focus-within {
  border-color: var(--auth-orange);
  box-shadow: 0 0 0 .25rem rgba(216, 92, 47, .14);
  background: var(--auth-cream);
}

.auth-input-group > .input {
  flex: 1 1 auto;
  min-width: 0;
}

.auth-input-group .input-group-text,
.auth-input-group .form-control {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.auth-input-group .input-group-text {
  padding-inline: 1rem .75rem;
  color: var(--auth-orange);
}

.auth-input-group .form-control {
  width: 100%;
  min-height: 3.125rem;
  padding: .75rem 1rem .75rem 0;
  color: var(--auth-ink);
  font-size: 1rem;
  box-shadow: none;
}

.auth-input-group .form-control::placeholder { color: #a79698; }
.auth-input-group .form-control:focus { background: transparent; box-shadow: none; }

.auth-input-group .form-control:-webkit-autofill,
.auth-input-group .form-control:-webkit-autofill:hover,
.auth-input-group .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  box-shadow: 0 0 0 1000px var(--auth-cream) inset;
  transition: background-color 9999s ease-out 0s;
}

.auth-submit {
  min-height: 3.25rem;
  border: 0;
  border-radius: .875rem;
  color: #fff;
  background: linear-gradient(110deg, var(--auth-wine), #ba302c 52%, var(--auth-orange));
  box-shadow: 0 .75rem 1.5rem rgba(159, 29, 44, .22);
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.auth-submit:hover {
  color: #fff;
  filter: brightness(.96) saturate(1.08);
  transform: translateY(-1px);
  box-shadow: 0 1rem 1.75rem rgba(159, 29, 44, .26);
}

.auth-submit:focus-visible {
  color: #fff;
  box-shadow: 0 0 0 .25rem rgba(242, 173, 63, .40), 0 .75rem 1.5rem rgba(159, 29, 44, .22);
}

.auth-submit:active { color: #fff !important; transform: translateY(0); }

@media (max-width: 359.98px) {
  .auth-shell { padding-inline: .75rem; }
  .auth-card { padding: 1.25rem; border-radius: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-input-group,
  .auth-submit { transition: none; }
}