.auth-page { overflow-x: hidden; }
.auth-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .15; background-image: radial-gradient(#e7d79f 0.6px, transparent .6px); background-size: 7px 7px; mask-image: linear-gradient(to bottom, black, transparent 70%); }
.auth-shell { min-height: calc(100dvh - 74px); max-width: 1250px; margin: auto; padding: clamp(36px, 8vw, 100px) clamp(20px, 6vw, 76px); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.7fr); align-items: center; gap: clamp(48px, 9vw, 120px); }
.auth-shell.compact { grid-template-columns: minmax(320px, 520px); justify-content: center; }
.auth-copy { max-width: 720px; }
.auth-copy h1 { margin: 20px 0 24px; }
.auth-copy h1 em { color: var(--gold-bright); font-style: normal; }
.auth-copy p { max-width: 560px; color: var(--muted); font-size: 1.05rem; line-height: 1.8; }
.feature-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.feature-pills span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #c7d3cc; font-size: .74rem; }
.auth-card, .install-card { position: relative; border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px, 5vw, 46px); background: linear-gradient(155deg, rgba(20,76,57,.78), rgba(5,25,19,.96)); box-shadow: var(--shadow); overflow: hidden; }
.auth-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, rgba(214,170,76,.13), transparent 40%); pointer-events: none; }
.auth-card > * { position: relative; }
.auth-card h1, .auth-card h2 { margin: 10px 0 8px; }
.card-suit { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 24px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-bright); font-family: var(--font-display); font-size: 1.5rem; }
/* google styles in common.css */
.separator { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .72rem; margin: 18px 0; }
.separator::before, .separator::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.12); }
.auth-foot { text-align: center; color: var(--muted); font-size: .84rem; margin: 22px 0 0; }
.install-shell { width: min(980px, calc(100% - 30px)); margin: 38px auto 80px; }
.install-card fieldset { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; margin: 22px 0; padding: 20px; }
.install-card legend { color: var(--gold-bright); font-family: var(--font-display); font-size: 1.35rem; padding: 0 8px; }
.preflight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0; }
.check-row { padding: 9px 10px; border-radius: 9px; background: rgba(255,255,255,.04); font-size: .75rem; }
.check-row span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; }
.check-row.ok span { color: var(--success); background: rgba(105,198,146,.12); }
.check-row.warn span { color: var(--gold-bright); background: rgba(214,170,76,.12); }
.check-row.bad span { color: var(--danger); background: rgba(233,107,104,.12); }

@media (max-width: 800px) {
  .auth-shell { grid-template-columns: 1fr; min-height: auto; gap: 32px; padding-top: 48px; }
  .auth-copy { text-align: center; }
  .auth-copy p { margin-inline: auto; }
  .feature-pills { justify-content: center; }
  .preflight { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .auth-copy { display: none; }
  .auth-shell { padding: 24px 14px 50px; }
  .auth-card { border-radius: 18px; padding: 28px 20px; }
  .preflight { grid-template-columns: 1fr; }
  .install-card fieldset { padding: 14px; }
}


.card-suit-logo {
  width: 72px; height: 72px; padding: 0; border: none; background: transparent;
  box-shadow: none;
}
.card-suit-logo img {
  width: 72px; height: 72px; border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  border: 1px solid rgba(232,201,106,.35);
}

/* Auth form select contrast */
.auth-page select,
.auth-card select {
  background-color: rgba(4, 18, 12, .95) !important;
  color: #f5f0e6 !important;
}
.auth-page select option {
  background: #0f241a;
  color: #f5f0e6;
}
.verification-card { max-width: 520px; margin-inline: auto; }
.verification-card .alert { margin: 18px 0; line-height: 1.55; }
.verification-login { display: flex; align-items: center; justify-content: center; text-decoration: none; }