.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: "Cormorant Garamond",serif; font-size: 1.5rem; }
.google-button { width: 100%; min-height: 48px; background: #fff; color: #213027; border-radius: 12px; }
.google-mark { color: #4285f4; font-size: 1.2rem; font-weight: 800; }
.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: "Cormorant Garamond",serif; 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; }
}