.auth-stage {
  min-height: calc(100vh - 88px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 64px;
}
.auth-card {
  width: min(440px, 100%);
  margin: 0 auto;
  background: #0c1210;
  border: 1px solid rgba(61, 255, 154, 0.28);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(61, 255, 154, 0.08), 0 24px 60px rgba(0, 0, 0, 0.38);
}
.auth-bar {
  height: 3px;
  background: linear-gradient(90deg, #0c5c3a, #3dff9a, #b8ffd8);
}
.auth-body { padding: 28px 26px 22px; }
.auth-back {
  background: transparent;
  color: #9eb8aa;
  border: 0;
  padding: 0 0 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  cursor: pointer;
}
.auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #3dff9a;
  color: #04140c;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-kicker[hidden] { display: none; }
.auth-terms { margin: -2px 0 10px; color: #9eb8aa; font-size: 0.78rem; line-height: 1.4; text-transform: none; letter-spacing: 0; }
.auth-terms a { color: #3dff9a; }
.auth-title {
  margin: 0 0 6px;
  font-size: 1.55rem;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #f4fff8;
  font-weight: 700;
}
.auth-detail {
  margin: 0 0 18px;
  color: #c5e7d4;
  line-height: 1.5;
}
.auth-form label {
  display: block;
  margin: 0 0 12px;
  color: #9eb8aa;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-form input[type="email"],
.auth-form input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  background: #07110c;
  color: #f4fff8;
  border: 1px solid rgba(61, 255, 154, 0.28);
  border-radius: 0;
  font: inherit;
  letter-spacing: 0;
  text-transform: none;
}
.auth-form button[type="submit"],
.auth-form .auth-signup,
.auth-form .auth-returning,
.auth-google {
  width: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  background: #04140c;
  color: #3dff9a;
  border: 1px solid rgba(61, 255, 154, 0.75);
  border-radius: 0;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(61, 255, 154, 0.18);
}
.auth-form button[type="submit"]:hover,
.auth-form .auth-signup:hover,
.auth-form .auth-returning:hover,
.auth-google:hover { background: #3dff9a; color: #04140c; }
.auth-google { background: #07110c; color: #f4fff8; box-shadow: none; }
.auth-code,
.auth-resend,
.auth-forgot,
.auth-dev {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  background: transparent;
  color: #9eb8aa;
  border: 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.68rem;
  cursor: pointer;
}
.auth-dev { border: 1px dashed rgba(61, 255, 154, 0.35); }
.auth-code:hover,
.auth-resend:hover,
.auth-forgot:hover,
.auth-dev:hover { color: #3dff9a; }
.auth-form .auth-check {
  display: flex;
  gap: 8px;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.85rem;
  color: #c5e7d4;
}
.auth-check input { width: auto; }
.auth-check a { color: #3dff9a; }
.auth-error { min-height: 1.2em; margin: 10px 0 0; color: #ffb4c0; font-size: 0.85rem; }
.otp-row { display: flex; gap: 8px; }
.otp {
  width: 100%;
  text-align: center;
  font-size: 1.25rem;
  padding: 12px 0;
  background: #07110c;
  color: #f4fff8;
  border: 1px solid rgba(61, 255, 154, 0.28);
  border-radius: 0;
}
.enter-window .auth-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  width: 100%;
}
.enter-window .auth-body { padding: 8px 0 0; }
.nav-out {
  background: transparent;
  color: inherit;
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 0;
}
.nav-out:hover { color: #3dff9a; }

/* ===== In-app header parity (account · plans · login) =====
   These signed-in / auth pages are body.market, so they inherited the marketing
   header: UPPERCASE sans-serif pills + a filled-green primary button. That reads as a
   different, "legacy" look next to the dashboard / gallery / inspo kit header. Re-skin the
   corner nav here to match the app (mixed-case mono pills, quiet outlined primary). Scoped
   to body.market, and auth-card.css is only loaded by account/plans/login — the dashboard
   isn't .market and the landing/go pages don't load this file, so none of them are touched. */
body.market .site-top nav a { text-transform: none; }
body.market .corner-btn {
  font: 600 0.82rem/1 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #cfeede;
  border-color: #244036;
}
body.market .corner-btn:hover { border-color: #3dff9a; color: #3dff9a; background: rgba(61, 255, 154, 0.08); }
/* Log out / Log in — quiet like the app, not a filled-green shout. */
body.market .corner-btn.is-main {
  background: #04140c;
  color: #3dff9a;
  border-color: rgba(61, 255, 154, 0.6);
  box-shadow: none;
}
body.market .corner-btn.is-main:hover { background: #3dff9a; color: #04140c; border-color: #3dff9a; }
body.market .emerald-pill b { font: 800 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
/* Generator / Inspo tabs — the same left-hand nav the dashboard/gallery carry, as pills.
   Selector is .site-top .modes a (3 classes) so it beats market.css's `.site-top nav a`. */
body.market .site-top .modes { display: flex; align-items: center; gap: 6px; }
body.market .site-top .modes a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid #244036; background: transparent;
  color: #8aae9a; text-decoration: none; text-transform: none; white-space: nowrap;
  font: 600 0.82rem/1 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.01em;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .08s ease;
}
body.market .site-top .modes a:hover { color: #e8fff4; border-color: rgba(61, 255, 154, 0.6); }
body.market .nav-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* slavpic kit: nav buttons are CUT-corner (clip-path), not rounded pills — match the dashboard. */
body.market .site-top .modes a,
body.market .corner-btn {
  border-radius: 0 !important;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}