/* ==========================================================================
   Infyrus Astro — guest auth (Screen 2: Login / Register)

   public/assets/auth.css

   ONE authoritative stylesheet for the guest authentication experience:
   a full-viewport split layout with a photographic Nepal hero on the left and
   the authentication card on the right, collapsing to a compact scenic banner
   above the form on mobile. It is loaded only by auth_header.php and the
   account-state page; the signed-in customer app uses member_v4.css.

   No `!important` is used. Layout is handled with grid and minmax(0, …) so no
   horizontal overflow can appear at any width.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
.mm-auth-page {
  --auth-bg: #FFF9F3;
  --surface: #FFFFFF;
  --text: #17233A;
  --muted: #6F6A66;
  --primary: #F36F21;
  --primary-hover: #E96318;
  --rose: #EE5570;
  --border: #E8DED5;
  --border-strong: #DDD5CE;
  --soft-orange: #FFF0E4;
  --soft-orange-2: #FFF6EC;
  --danger: #C53B45;
  --danger-soft: #FDEFF0;
  --success: #198754;
  --success-soft: #EAF8F1;
  --font: 'Poppins', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  margin: 0;
  background: var(--auth-bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.mm-auth-page *, .mm-auth-page *::before, .mm-auth-page *::after { box-sizing: border-box; }
/* The element reset is written with :where() on purpose. A plain `p`/`ul`
   selector would carry (0,1,2) and outrank every single-class component rule in
   this file, silently zeroing their margins and padding. */
.mm-auth-page :where(h1, h2, h3, p, ul, ol, figure, blockquote) { margin: 0; }
.mm-auth-page :where(ul, ol) { padding: 0; list-style: none; }
.mm-auth-page img { max-width: 100%; display: block; }
.mm-auth-page a { text-decoration: none; }
.mm-auth-page svg { display: block; }

.auth-ico { width: 16px; height: 16px; flex: 0 0 auto; }

.auth-skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--surface); color: var(--text);
  padding: 9px 14px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-weight: 600;
}
.auth-skip:focus { left: 12px; top: 12px; }

:where(.mm-auth-page a, .mm-auth-page button, .mm-auth-page input, .mm-auth-page select, .mm-auth-page summary, .mm-auth-page textarea):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ====================================================== split layout shell */
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 56.5fr) minmax(0, 43.5fr);
  min-height: 100svh;
  width: 100%;
}

/* ------------------------------------------------------------ LEFT: hero */
.auth-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #F3E6D6;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}

.auth-hero__media { position: absolute; inset: 0; z-index: 0; display: block; }
.auth-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }

/* A warm readability wash. Deliberately not a dark overlay: the photograph has
   to stay bright and warm. */
.auth-hero__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(103deg, rgba(255, 248, 238, .46) 0%, rgba(255, 248, 238, .22) 34%, rgba(255, 248, 238, .04) 62%),
    linear-gradient(to top, rgba(58, 38, 22, .22) 0%, rgba(58, 38, 22, 0) 42%);
}

.auth-hero__body {
  position: relative; z-index: 2;
  padding: clamp(28px, 7.5vh, 74px) clamp(28px, 7.5%, 82px) 0;
  max-width: 540px;
  color: var(--text);
}
.auth-hero__mobile { display: none; }

/* --------------------------------------------------------------- branding */
.auth-hero__brand,
.auth-card__brand {
  display: flex; align-items: center; gap: 12px; margin: 0;
}
.auth-hero__logo {
  width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: 0 0 auto;
  box-shadow: 0 2px 10px rgba(58, 38, 22, .12);
}
.auth-hero__brandtext,
.auth-card__brandtext { display: flex; flex-direction: column; line-height: 1.16; min-width: 0; }
.auth-hero__brandtext strong,
.auth-card__brandtext strong {
  font-size: 21px; font-weight: 700; letter-spacing: .045em; color: var(--text);
}
.auth-hero__brandtext small,
.auth-card__brandtext small {
  font-size: 10.5px; font-weight: 600; letter-spacing: .21em;
  text-transform: uppercase; color: var(--primary);
}

/* ------------------------------------------------------------ trust badge */
.auth-hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; margin-top: 22px; padding: 0 15px;
  border-radius: 999px;
  background: rgba(255, 253, 250, .82);
  border: 1px solid rgba(243, 111, 33, .38);
  color: #A9510F;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.auth-hero__badge .auth-ico { color: var(--primary); }

/* ----------------------------------------------------------------- copy */
.auth-hero__title {
  margin-top: 22px;
  font-size: clamp(30px, 3.05vw, 47px);
  line-height: 1.13;
  font-weight: 750;
  letter-spacing: -.022em;
  color: var(--text);
  text-wrap: balance;
}
.auth-hero__title span {
  display: block;
  margin-top: 10px;
  font-size: clamp(15px, 1.42vw, 20px);
  line-height: 1.44;
  font-weight: 500;
  letter-spacing: 0;
  color: #4A4038;
}
/* One highlighted phrase, exactly as the reference does. */
.auth-hero__accent { font-style: normal; font-weight: 600; color: var(--primary); }

.auth-hero__lead {
  margin-top: 18px;
  max-width: 44ch;
  font-size: clamp(14px, 1.06vw, 16px);
  line-height: 1.6;
  color: #574B41;
}

/* --------------------------------------------------------- trust strip */
.auth-trust {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: auto clamp(24px, 6%, 66px) clamp(26px, 5vh, 52px);
  padding: 18px 20px;
  background: rgba(255, 255, 255, .90);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 17px;
  box-shadow: 0 10px 34px rgba(58, 38, 22, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.auth-trust__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.auth-trust__ico {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--soft-orange);
  color: var(--primary);
}
.auth-trust__ico svg { width: 17px; height: 17px; }
.auth-trust__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auth-trust__index {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: var(--primary);
}
.auth-trust__label {
  font-size: 11.5px; font-weight: 600; line-height: 1.28; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =================================================== RIGHT: auth panel */
.auth-panel {
  position: relative;
  min-height: 100svh;
  background: var(--auth-bg);
  display: flex; flex-direction: column;
  padding: 22px clamp(20px, 3.4vw, 56px) clamp(24px, 4vh, 44px);
}
.auth-panel__lang {
  display: flex; justify-content: center;
  /* Aligns the switch with the card column instead of the raw panel edge.
     The switch itself is the canonical partials/lang_switch.php control, which
     carries its own styles, so only the placement rules belong here. */
}
.auth-panel__lang > .langswitch { margin-left: auto; margin-right: max(0px, calc((100% - 452px) / 2)); }
@media (max-width: 1100px) {
  .auth-panel__lang > .langswitch { margin-right: 0; }
}
.auth-panel__inner {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: 18px 0 0;
}

/* ---------------------------------------------------------------- card */
.auth-card {
  width: 100%; max-width: 452px; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(34, 27, 22, .07);
  padding: 30px 32px 28px;
  animation: auth-card-in .26s ease both;
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.auth-card__brand { justify-content: center; text-align: left; }
.auth-card__brand img { width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.auth-card__brandtext strong { font-size: 17px; }
.auth-card__brandtext small { font-size: 9.5px; letter-spacing: .2em; }

.auth-card__body { margin-top: 18px; }

/* ---------------------------------------------------------------- tabs */
.auth-seg {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 20px 0 0;
  background: #F8F6F4;
  border-radius: 10px;
  padding: 3px;
  position: relative;
}
.auth-seg a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 42px;
  border-radius: 8px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.auth-seg a:hover { color: var(--text); }
.auth-seg a.is-active {
  background: var(--surface); color: var(--primary);
  box-shadow: 0 1px 3px rgba(58, 38, 22, .09);
}
.auth-seg a.is-active::after {
  content: ''; position: absolute; left: 22%; right: 22%; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--primary);
}

/* -------------------------------------------------------------- heading */
.auth-title {
  margin-top: 20px;
  font-size: 27px; font-weight: 700; letter-spacing: -.015em; line-height: 1.22;
  color: var(--text);
}
.auth-sub { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------------- fields */
.auth-form { display: grid; gap: 15px; margin-top: 20px; }
/* Register pairs the short fields so the card still fits a 900px-tall desktop
   viewport without scrolling. Collapses to one column on narrow screens. */
.auth-form--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
/* Only the half-width fields sit side by side; anything else (phone, terms,
   the submit button) spans the full card width. */
.auth-form--pair > :not(.auth-field--half) { grid-column: 1 / -1; }
.auth-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.auth-label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.auth-label .req { color: var(--primary); }

.auth-input {
  width: 100%; min-width: 0; height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit; font-size: 14.5px; line-height: 1.4;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.auth-input::placeholder { color: #A79F98; }
.auth-input:hover { border-color: #CFC5BB; }
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(243, 111, 33, .13); }
.auth-input[aria-invalid='true'] { border-color: var(--danger); }
.auth-input[aria-invalid='true']:focus { box-shadow: 0 0 0 3px rgba(197, 59, 69, .13); }

.auth-inputwrap { position: relative; }
.auth-inputwrap .auth-input { padding-right: 48px; }
.auth-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; cursor: pointer;
  color: #8C837B; border-radius: 8px;
  transition: color .16s ease, background .16s ease;
}
.auth-eye:hover { color: var(--text); background: #F7F2ED; }
.auth-eye svg { width: 19px; height: 19px; }
.auth-eye .auth-eye__off { display: none; }
.auth-eye.is-on { color: var(--primary); }
.auth-eye.is-on .auth-eye__open { display: none; }
.auth-eye.is-on .auth-eye__off { display: block; }

.auth-hint { font-size: 11.5px; color: #9A928A; }
.auth-error { font-size: 12px; font-weight: 500; color: var(--danger); }

/* Password requirements: only what the backend enforces, revealed on use. */
.auth-rules { display: none; gap: 4px; }
.auth-field[data-visible='true'] .auth-rules { display: grid; }
.auth-rules li {
  position: relative; padding-left: 14px;
  font-size: 11.5px; color: var(--muted);
}
.auth-rules li::before {
  content: ''; position: absolute; left: 3px; top: 7px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}

/* ------------------------------------------------- remember / forgot row */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.auth-check {
  display: inline-flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: var(--muted); cursor: pointer;
}
.auth-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--primary); flex: 0 0 auto; }
.auth-link { color: var(--primary); font-weight: 600; }
.auth-link:hover { color: var(--primary-hover); text-decoration: underline; }

/* --------------------------------------------------------- primary CTA */
.auth-submit {
  width: 100%; height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--primary);
  border-radius: 9px;
  background: var(--primary);
  color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 650; letter-spacing: .005em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.auth-submit:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.auth-submit:active { background: #D95A12; }

/* ------------------------------------------------------------- divider */
.auth-sep {
  position: relative; margin: 22px 0 18px; text-align: center;
  border-top: 1px solid var(--border);
}
.auth-sep span {
  position: relative; top: -9px; padding: 0 11px;
  background: var(--surface);
  font-size: 12px; color: #9A928A;
}

/* -------------------------------------------------------------- google */
.auth-google {
  width: 100%; height: 47px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px; font-weight: 600;
  transition: background .16s ease, border-color .16s ease;
}
.auth-google:hover { background: #FBF7F3; border-color: #CFC5BB; }
/* The Google mark is a bare <svg> with no width/height attributes, so it sizes
   purely from CSS. Every dimension is pinned here: without an explicit basis
   the flex item stretches to the button and the logo fills the whole panel.
   Scoped tightly to the button so no later generic rule can undo it. */
.auth-google > svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  display: block;
}
.auth-google--off { color: #6F6A66; }

.auth-note {
  margin-top: 10px;
  font-size: 11.5px; line-height: 1.5;
  color: #8C837B;
  text-align: center;
}

/* ------------------------------------------------------- account switch */
.auth-foot {
  margin-top: 20px; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* -------------------------------------------------------------- alerts */
.auth-alert {
  padding: 10px 13px; margin-bottom: 15px;
  border: 1px solid var(--border); border-radius: 9px;
  background: #FBF7F3; color: var(--muted);
  font-size: 12.5px; line-height: 1.5;
}
.auth-alert--ok { background: var(--success-soft); border-color: #C6E7D8; color: #12694A; }
.auth-alert--err { background: var(--danger-soft); border-color: #F5D3D6; color: var(--danger); font-weight: 500; }
.auth-alert--warning { background: #FFF7EC; border-color: #F3E0C4; color: #8A5A1B; }
.auth-alert__ico { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.auth-alert { display: flex; align-items: flex-start; gap: 9px; }

.auth-notice__actions { display: grid; gap: 9px; margin-top: 16px; }
.auth-submit--quiet { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.auth-submit--quiet:hover { background: #FBF7F3; border-color: #CFC5BB; }

/* ================================================ account-state page (reused) */
.mm-state-page .auth-state__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 50%; color: var(--primary);
  background: var(--soft-orange); border: 1px solid #F8DCC4;
}
.mm-state-page .auth-prose { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin-top: 12px; }

/* ================================================================ 1366 and below
   Desktop panels are at least 768px tall, so the vertical rhythm is tightened
   just enough for the five-field register card to fit without scrolling. */
@media (min-width: 1024px) {
  .auth-panel { padding-top: 20px; padding-bottom: 28px; }
  .auth-panel__inner { padding-top: 12px; }
  .auth-card { padding: 26px 32px 24px; }
  .auth-card__body { margin-top: 14px; }
  .auth-seg { margin-top: 16px; }
  .auth-title { margin-top: 16px; }
  .auth-form { gap: 13px; margin-top: 16px; }
  .auth-sep { margin: 18px 0 16px; }
  .auth-foot { margin-top: 16px; }
  .auth-alert { margin-bottom: 12px; }
}

@media (max-width: 1440px) {
  .auth-hero__body { padding-left: clamp(24px, 6.4%, 68px); padding-right: 40px; }
  .auth-trust { margin-left: clamp(20px, 5%, 56px); margin-right: clamp(20px, 5%, 56px); }
}

@media (max-width: 1366px) {
  .auth-hero__title { font-size: clamp(29px, 2.9vw, 40px); }
  .auth-hero__title span { font-size: clamp(14px, 1.35vw, 18px); }
  .auth-hero__body { max-width: 500px; }
  .auth-trust { padding: 15px 16px; }
  .auth-trust__label { font-size: 11.5px; }
  .auth-card { padding: 28px 30px 26px; }
}

/* ==================================================================== 1024 */
@media (max-width: 1100px) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-hero__body { padding: 30px 28px 0; max-width: 100%; }
  .auth-hero__title { font-size: clamp(26px, 3.4vw, 34px); }
  .auth-hero__title span { font-size: 15px; }
  .auth-hero__lead { font-size: 14px; }
  .auth-hero__media img { object-position: 58% 46%; }
  .auth-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: auto 20px 22px; padding: 13px 15px; }
  .auth-panel { padding-left: 22px; padding-right: 22px; }
  .auth-card { max-width: 100%; padding: 24px 24px 22px; }
  .auth-title { font-size: 24px; }
}

/* ============================================== 768–1023: 42 / 58 split */
@media (max-width: 1023px) {
  .auth-split { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); }
  .auth-hero__lead { display: none; }
  .auth-hero__badge { height: 32px; margin-top: 16px; padding: 0 12px; font-size: 11.5px; }
  .auth-hero__title { font-size: clamp(22px, 3.1vw, 28px); margin-top: 16px; }
  .auth-hero__title span { font-size: 13px; margin-top: 8px; }
  /* The strip would crowd a short viewport; the copy above carries the message. */
  .auth-trust { display: none; }
  .auth-hero__logo { width: 40px; height: 40px; }
  .auth-hero__brandtext strong { font-size: 17px; }
  .auth-hero__media img { object-position: 56% 44%; }
  .auth-panel__inner { padding-top: 12px; }
  .auth-card { padding: 22px 20px 20px; }
  .auth-card__body { margin-top: 14px; }
  .auth-title { font-size: 22px; }
  .auth-sub { font-size: 13px; }
  .auth-seg a { height: 38px; font-size: 13.5px; }
  .auth-input { height: 46px; font-size: 14px; }
  .auth-submit { height: 46px; font-size: 14px; }
}

/* ============================================================== <=767 mobile
   The desktop split is dropped. A short scenic banner sits above the form so a
   member is never pushed half a screen past an image to reach the fields. */
@media (max-width: 767px) {
  .mm-auth-page { font-size: 14.5px; }
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 100svh; }

  .auth-hero {
    min-height: 196px;
    max-height: 220px;
    flex-direction: column; justify-content: flex-end;
    padding: 0 20px 18px;
  }
  .auth-hero__media img { object-position: 56% 34%; }
  .auth-hero__wash {
    background:
      linear-gradient(to top, rgba(38, 24, 14, .52) 0%, rgba(38, 24, 14, .12) 58%, rgba(255, 248, 238, .18) 100%),
      linear-gradient(90deg, rgba(255, 248, 238, .22), rgba(255, 248, 238, .05));
  }
  .auth-hero__body { display: none; }
  .auth-hero__mobile { position: relative; z-index: 2; display: block; }
  .auth-hero__mobile .auth-hero__logo { width: 38px; height: 38px; }
  .auth-hero__mobile .auth-hero__brandtext strong { color: #fff; font-size: 16px; }
  .auth-hero__mobile .auth-hero__brandtext small { color: #FFD9B4; }
  .auth-hero__mobileline {
    margin-top: 10px;
    font-size: 14px; font-weight: 600; line-height: 1.35;
    color: #FFF6EA;
    text-shadow: 0 1px 10px rgba(38, 24, 14, .45);
  }

  .auth-panel {
    min-height: auto;
    background: var(--auth-bg);
    padding: 14px 14px 28px;
    margin-top: -14px;
    border-radius: 18px 18px 0 0;
    position: relative;
    z-index: 3;
  }
  .auth-panel__lang { justify-content: flex-end; }
  .auth-card__brand img { width: 40px; height: 40px; }
  .auth-card__brandtext strong { font-size: 16px; }
  .auth-panel__inner { padding: 8px 0 0; }
  .auth-form--pair { grid-template-columns: minmax(0, 1fr); }
  .auth-form--pair > :not(.auth-field--half) { grid-column: auto; }
  .auth-form--pair > .auth-field--half { grid-column: auto; }
  .auth-card {
    max-width: 100%; padding: 20px 18px 18px; border-radius: 14px;
    box-shadow: 0 6px 24px rgba(34, 27, 22, .06);
  }
  .auth-title { font-size: 21px; margin-top: 16px; }
  .auth-sub { font-size: 13px; }
  .auth-form { gap: 13px; margin-top: 16px; }
  .auth-seg { margin-top: 16px; }
}

/* ================================================================ <=380 */
@media (max-width: 380px) {
  .auth-panel { padding: 12px 12px 24px; }
  .auth-card { padding: 16px 15px 16px; border-radius: 13px; }
  .auth-card__brand img { width: 38px; height: 38px; border-radius: 10px; }
  .auth-card__brandtext strong { font-size: 15px; }
  .auth-card__brandtext small { font-size: 8.5px; letter-spacing: .18em; }
  .auth-title { font-size: 19px; }
  .auth-sub { font-size: 12.5px; }
  .auth-seg a { height: 36px; font-size: 13px; }
  .auth-input { height: 46px; font-size: 13.5px; padding: 0 12px; }
  .auth-inputwrap .auth-input { padding-right: 44px; }
  .auth-submit { height: 46px; font-size: 14px; }
  .auth-google { height: 46px; font-size: 13px; }
  .auth-row { gap: 8px; }
  .auth-check { font-size: 12.5px; }
  .auth-hero { min-height: 168px; max-height: 184px; padding: 0 15px 14px; }
  .auth-hero__mobileline { font-size: 13px; }
  .auth-foot { font-size: 12.5px; }
}

/* ================================================ reduced motion / short view */
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
  .auth-seg a, .auth-input, .auth-eye, .auth-submit, .auth-google { transition: none; }
}

@media (max-height: 700px) and (min-width: 768px) {
  .auth-card { padding: 22px 26px 20px; }
  .auth-card__body { margin-top: 14px; }
  .auth-title { font-size: 22px; margin-top: 15px; }
  .auth-form { gap: 12px; margin-top: 15px; }
  .auth-seg { margin-top: 15px; }
  .auth-sep { margin: 16px 0 14px; }
  .auth-trust { padding: 12px 14px; }
}

/* ================================== the account-state page uses a simple card */
body.mm-state-page {
  display: grid; place-items: center;
  min-height: 100svh;
  padding: 24px 16px;
}
body.mm-state-page .auth-card {
  max-width: 452px; padding: 30px 30px 26px;
  animation: none;
}
body.mm-state-page .auth-brandmark { display: none; }
body.mm-state-page .auth-card__lang { display: none; }
body.mm-state-page .auth-foot { font-size: 13px; }
body.mm-state-page .auth-submit { text-decoration: none; }
@media (max-width: 480px) {
  body.mm-state-page { padding: 0; align-items: start; }
  body.mm-state-page .auth-card { max-width: none; border-radius: 0; border-left: 0; border-right: 0; min-height: 100svh; padding: 40px 20px 30px; }
}