.mapro-auth {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  width: min(1180px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  overflow: hidden;
  border: 1px solid #80642e;
  background: #11100e;
  color: #fff9e9;
  font-family: Arial, Helvetica, sans-serif;
}

.mapro-auth *, .mapro-auth *::before, .mapro-auth *::after { box-sizing: border-box; }
.mapro-auth__brand { min-height: 660px; padding: 68px 60px; background: linear-gradient(135deg, #070707 0%, #17130e 58%, #3b2e16 100%); }
.mapro-auth__eyebrow { display: block; color: #d9bd6a; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.mapro-auth h2 { max-width: 620px; margin: 22px 0; color: #fff; font-size: clamp(45px, 5.5vw, 78px); letter-spacing: 0; line-height: .96; }
.mapro-auth__brand > p { max-width: 545px; color: #d6cbbb; font-size: 19px; line-height: 1.65; }
.mapro-auth__brand .mapro-auth__business-note { max-width: 520px; margin-top: 20px; color: #e8d49e; font-size: 15px; font-weight: 700; line-height: 1.6; }
.mapro-auth__brand-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 48px; }
.mapro-auth__brand-stats span { border: 1px solid rgba(217,189,106,.42); padding: 10px 12px; color: #e8ddc9; font-size: 12px; font-weight: 700; }
.mapro-auth__panel { padding: 42px; background: #fbf9f4; color: #16130e; }
.mapro-auth__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 5px; border: 1px solid #e7dcbf; background: #f1ecdf; }
.mapro-auth__tabs button { min-height: 46px; border: 0; background: transparent; color: #766c5a; font: inherit; font-weight: 800; cursor: pointer; }
.mapro-auth__tabs button.is-active { background: #15130f; color: #fff; }
.mapro-auth__form { display: none; margin-top: 42px; }
.mapro-auth__form.is-active { display: block; }
.mapro-auth__form h3 { margin: 0; color: #17130d; font-size: 34px; line-height: 1.05; }
.mapro-auth__form > p { margin: 12px 0 28px; color: #716856; font-size: 16px; line-height: 1.55; }
.mapro-auth__form label { display: block; margin: 17px 0; color: #251f16; font-size: 13px; font-weight: 900; }
.mapro-auth__form input { display: block; width: 100%; margin-top: 8px; padding: 14px 15px; border: 1px solid #cfc4ad; border-radius: 0; outline: 0; background: #fff; color: #17130d !important; -webkit-text-fill-color: #17130d !important; font: inherit; font-size: 16px; }
.mapro-auth__form input:focus { border-color: #ae8a39; box-shadow: 0 0 0 3px rgba(217,189,106,.20); }
.mapro-auth__two-columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.mapro-auth__primary { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 53px; margin-top: 12px; border: 0; background: #17130d; color: #fff !important; text-decoration: none; font: inherit; font-weight: 900; cursor: pointer; }
.mapro-auth__primary:hover { background: #493817; }
.mapro-auth__primary:disabled { cursor: wait; opacity: .65; }
.mapro-auth__text-button { margin-top: 16px; padding: 0; border: 0; background: transparent; color: #7d5b16; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.mapro-auth__form small { display: block; margin-top: 16px; color: #796f5e; font-size: 12px; line-height: 1.5; }
.mapro-auth__message { display: none; margin-top: 24px; padding: 13px 15px; border-left: 4px solid #b08c39; background: #f5eedb; color: #382b15; font-size: 14px; font-weight: 700; line-height: 1.45; }
.mapro-auth__message.is-visible { display: block; }
.mapro-auth__message.is-error { border-left-color: #b33c32; background: #fbedeb; color: #741f1a; }
.mapro-auth--signed-in { display: block; max-width: 720px; padding: 58px; background: linear-gradient(135deg, #090807, #2c2110); }
.mapro-auth--signed-in h2 { font-size: 48px; }
.mapro-auth--signed-in p { color: #d6cbbb; font-size: 18px; }
.mapro-auth__signed-actions { display: flex; gap: 12px; max-width: 460px; margin-top: 30px; }
.mapro-auth__signed-actions .mapro-auth__primary { width: auto; padding: 0 20px; }
.mapro-auth__secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 53px; padding: 0 20px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 800; text-decoration: none; }

@media (max-width: 820px) {
  .mapro-auth { grid-template-columns: 1fr; width: calc(100vw - 32px); max-width: calc(100vw - 32px); }
  .mapro-auth__brand { min-height: auto; padding: 42px 28px; }
  .mapro-auth h2 { font-size: 51px; }
  .mapro-auth__panel { padding: 34px 24px; }
}

@media (max-width: 460px) {
  .mapro-auth__two-columns { grid-template-columns: 1fr; gap: 0; }
  .mapro-auth__signed-actions { flex-direction: column; }
  .mapro-auth__signed-actions .mapro-auth__primary { width: 100%; }
}