/* ── Member enrollment & portal — page-specific styles ────────────────────── */

/* ── Enrollment (enrollment/join.html) ── */
.page--join {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 24px 56px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-enter { animation: page-in 380ms var(--ease-out) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-bar { display: flex; justify-content: flex-end; margin-bottom: 40px; }
.lang-switch {
  display: flex;
  border: 1px solid var(--dim);
  border-radius: 4px;
  overflow: hidden;
}
.lang-switch button {
  background: none;
  border: none;
  cursor: pointer;
  font: 600 10px/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 14px;
  min-height: 44px;
  color: var(--muted);
  transition: color 120ms, background 120ms;
  touch-action: manipulation;
}
.lang-switch button[aria-pressed="true"] { background: var(--dim); color: var(--white); }
.lang-switch button:hover:not([aria-pressed="true"]) { color: var(--white); }

.header--join {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 40px;
}
.header__logo--join { width: 120px; height: auto; mix-blend-mode: var(--logo-blend, screen); }
.header__sub {
  font: 600 10px/1 var(--f-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.referral-banner {
  display: flex;
  gap: 12px;
  background: oklch(0.72 0.055 72 / 0.09);
  border: 1px solid oklch(0.72 0.055 72 / 0.26);
  border-radius: 6px;
  padding: 13px 15px;
  margin-bottom: 28px;
  align-items: flex-start;
}
.referral-banner__pip {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wood);
  flex-shrink: 0;
  margin-top: 5px;
}
.referral-banner__copy { font: 400 13px/1.55 var(--f-body); color: var(--wood); }
.referral-banner__copy strong { font-weight: 600; }

.benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--dim);
}
.benefit { display: flex; align-items: center; gap: 14px; }
.benefit__dot {
  width: 34px; height: 34px; min-width: 34px;
  border-radius: 50%;
  background: var(--teal);
  display: grid;
  place-items: center;
}
.benefit__badge { width: 18px; height: auto; }
.benefit__copy { font: 400 14px/1.4 var(--f-body); }
.benefit__copy strong { font-weight: 600; }

.form--join { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font: 600 10px/1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__optional {
  font: 400 10px/1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: oklch(0.72 0.007 85 / 0.5);
}
.field__input {
  background: oklch(0.97 0.006 85 / 0.045);
  border: 1px solid var(--dim);
  border-radius: 6px;
  color: var(--white);
  font: 500 16px/1 var(--f-body);
  padding: 14px 15px;
  width: 100%;
  outline: none;
  transition: border-color 140ms;
  -webkit-appearance: none;
  appearance: none;
}
.field__input::placeholder { color: oklch(0.72 0.007 85 / 0.3); }
.field__input:focus { border-color: var(--teal); }
.field__hint { font: 400 11px/1.5 var(--f-body); color: oklch(0.72 0.007 85 / 0.45); }
.field__input--error { border-color: oklch(0.62 0.19 35 / 0.55) !important; }

.field__phone-group {
  display: flex;
  align-items: stretch;
  background: oklch(0.97 0.006 85 / 0.045);
  border: 1px solid var(--dim);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 140ms;
}
.field__phone-group:focus-within { border-color: var(--teal); }
.field__phone-group--error { border-color: oklch(0.62 0.19 35 / 0.55) !important; }
.field__phone-dial {
  position: relative;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--dim);
  flex-shrink: 0;
  background: oklch(0.97 0.006 85 / 0.04);
}
.field__dial-select {
  background: transparent;
  border: none;
  color: var(--muted);
  font: 500 14px/1 var(--f-body);
  padding: 14px 28px 14px 11px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  letter-spacing: 0.01em;
}
.field__dial-select option { background: oklch(0.10 0.008 55); color: var(--white); }
.field__dial-arrow {
  position: absolute;
  right: 7px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted);
  opacity: 0.6;
}
.field__input--phone {
  background: transparent;
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.field__input--phone:focus { border-color: transparent; }

.btn-join {
  width: 100%;
  padding: 16px;
  background: var(--teal);
  color: var(--black);
  border: none;
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 80ms;
  margin-bottom: 20px;
}
.btn-join:hover { background: var(--teal-deep); color: var(--black); }
.btn-join:active { transform: scale(0.985); }

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: oklch(0.62 0.19 35 / 0.10);
  border: 1px solid oklch(0.62 0.19 35 / 0.28);
  border-radius: 8px;
  padding: 12px 14px;
  font: 500 13px/1.4 var(--f-body);
  color: oklch(0.82 0.12 35);
}
.form-error__icon { flex-shrink: 0; margin-top: 1px; }

.or-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: oklch(0.72 0.007 85 / 0.35);
  font: 400 11px/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.or-divider::before, .or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.97 0.006 85 / 0.10);
}
.btn-login {
  display: block;
  width: 100%;
  padding: 14px;
  background: transparent;
  color: var(--teal);
  border: 1px solid oklch(0.64 0.048 204 / 0.45);
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.btn-login:hover { background: oklch(0.64 0.048 204 / 0.08); border-color: var(--teal); }
.btn-login:active { background: oklch(0.64 0.048 204 / 0.15); }

.legal {
  font: 400 11px/1.65 var(--f-body);
  color: oklch(0.72 0.007 85 / 0.45);
  text-align: center;
}
.legal a { color: oklch(0.72 0.007 85 / 0.65); text-decoration: underline; text-underline-offset: 2px; }

/* ── Member portal (member/me.html) ── */
.page--me {
  max-width: 430px;
  margin: 0 auto;
  padding: 0 0 max(48px, env(safe-area-inset-bottom));
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(18px, env(safe-area-inset-top)) 20px 16px;
  min-height: 0;
  border-bottom: none;
}
.topbar__logo {
  display: block;
  position: static;
  left: auto;
  transform: none;
  height: 28px;
  width: auto;
  max-width: none;
  pointer-events: auto;
  mix-blend-mode: var(--logo-blend, screen);
}
.btn-lang {
  font: 600 0.62rem/1 var(--f-body);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid oklch(0.97 0.010 75 / 0.18);
  border-radius: 4px;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}
.btn-lang:hover { color: var(--white); border-color: oklch(0.97 0.010 75 / 0.40); }

.card-section { padding: 8px 20px 24px; }
.card-section--rewards { padding-bottom: 4px; }
.card-section--rewards .pending-reward-card { margin-bottom: 10px; }
.card-section--rewards .pending-reward-card:last-child { margin-bottom: 0; }
.card-label {
  font: 600 0.65rem/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.stamp-card--me {
  background: var(--surface2);
  border: 1px solid oklch(0.64 0.048 204 / 0.22);
  border-radius: 18px;
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Fixed stamp circles: centered at consistent 44px regardless of stamp count */
.stamp-circles {
  display: grid;
  grid-template-columns: repeat(var(--stamp-cols, 10), 18px);
  gap: 8px;
  justify-content: center;
}
.stamp-circles .stamp-ghost { grid-column: span 1; }
.stamp-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid oklch(0.97 0.010 75 / 0.08);
}

/* ── Pending reward banner (member/me.html) ── */
.pending-reward-card {
  background: oklch(0.64 0.048 204 / 0.09);
  border: 1px solid oklch(0.64 0.048 204 / 0.28);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pending-reward-card__icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%;
  background: oklch(0.64 0.048 204 / 0.15);
  display: flex; align-items: center; justify-content: center;
  color: var(--teal);
  flex-shrink: 0;
  margin-top: 1px;
}
.pending-reward-card__body { flex: 1; }
.pending-reward-card__title {
  font: 600 0.9rem/1.2 var(--f-body);
  color: var(--teal);
  margin-bottom: 3px;
}
.pending-reward-card__meta {
  font: 500 0.72rem/1 var(--f-body);
  letter-spacing: 0.04em;
  color: oklch(0.64 0.048 204 / 0.55);
  margin-bottom: 6px;
}
.pending-reward-card__desc {
  font: 400 0.78rem/1.4 var(--f-body);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.pending-reward-card__desc::-webkit-details-marker { display: none; }
.pending-reward-detail { margin-top: 0; }
.pending-reward-detail__body {
  font: 400 0.78rem/1.5 var(--f-body);
  color: var(--muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid oklch(0.64 0.048 204 / 0.15);
}
.stamp-count--me { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.stamp-count__n--me { font: 600 2.5rem/1 var(--f-disp); letter-spacing: -0.01em; }
.stamp-count__of--me { font: 400 1.1rem/1 var(--f-disp); color: var(--muted); }
.stamp-count__label--me { font: 500 0.75rem/1 var(--f-body); color: var(--muted); margin-left: 2px; }
.reward-hint--me { font: 500 0.75rem/1.4 var(--f-body); color: var(--teal); text-align: right; }
.reward-hint--me-muted { color: var(--muted); }


.qr-section { padding: 0 20px 20px; }
.qr-card {
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.qr-card__label { font: 600 0.6rem/1 var(--f-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.qr-card__img { display: block; width: 200px; height: 200px; border-radius: 10px; image-rendering: pixelated; }
.qr-card__hint { font: 400 0.75rem/1.4 var(--f-body); color: var(--muted); text-align: center; }

.wallet-btns { display: flex; gap: 10px; padding: 0 20px 20px; }
.wallet-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border-radius: 10px;
  font: 600 0.78rem/1 var(--f-body);
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid var(--dim2);
  background: var(--surface);
  color: var(--white);
  cursor: pointer;
  transition: background 140ms, opacity 120ms;
}
.wallet-btn:hover { background: var(--surface2); }
.wallet-btn:active { opacity: 0.7; }
.wallet-btn--apple { background: var(--white); color: var(--black); border-color: transparent; }
.wallet-btn--apple:hover { background: oklch(0.93 0.010 75); }

.email-section { padding: 0 20px 20px; }
.email-card {
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.email-card__info { flex: 1; min-width: 0; }
.email-card__title { font: 500 0.88rem/1 var(--f-body); margin-bottom: 4px; }
.email-card__sub {
  font: 400 0.72rem/1 var(--f-body);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-email {
  background: none;
  border: 1px solid var(--dim2);
  color: var(--muted);
  font: 500 0.72rem/1 var(--f-body);
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0 14px;
  min-height: 44px;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 140ms, border-color 140ms;
  flex-shrink: 0;
}
.btn-email:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.2); }

.me-section { padding: 20px 20px 0; }
.me-section-title { font: 500 1.3rem/1 var(--f-disp); letter-spacing: 0.03em; margin-bottom: 4px; }
.me-section-sub { font: 400 0.8rem/1.5 var(--f-body); color: var(--muted); margin-bottom: 16px; }

.referral-card {
  background: oklch(0.72 0.055 72 / 0.08);
  border: 1px solid oklch(0.72 0.055 72 / 0.22);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.referral-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.referral-card__info { flex: 1; }
.referral-card__title { font: 600 1rem/1.2 var(--f-body); margin-bottom: 4px; }
.referral-card__desc { font: 400 0.78rem/1.4 var(--f-body); color: var(--muted); }
.referral-card__qr { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.referral-card__qr img { display: block; width: 72px; height: 72px; image-rendering: pixelated; }

.referral-code-row { display: flex; align-items: center; gap: 10px; }
.referral-code {
  flex: 1;
  background: var(--black);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  padding: 10px 14px;
  font: 600 1.1rem/1 var(--f-disp);
  letter-spacing: 0.12em;
  color: oklch(0.80 0.055 72);
}
.btn-copy {
  height: 44px;
  padding: 0 14px;
  background: oklch(0.72 0.055 72 / 0.15);
  border: 1px solid oklch(0.72 0.055 72 / 0.28);
  border-radius: 8px;
  color: oklch(0.80 0.055 72);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-copy:active { opacity: 0.7; }

.referral-card__stat { display: flex; gap: 20px; }
.ref-stat { flex: 1; }
.ref-stat__n { font: 600 1.5rem/1 var(--f-disp); letter-spacing: 0.01em; }
.ref-stat__label { font: 500 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }

.tx-list { display: flex; flex-direction: column; margin-top: 4px; }
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--dim);
}
.tx-row:last-child { border-bottom: none; }
.tx-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tx-icon--earned   { background: oklch(0.64 0.048 204 / 0.15); color: var(--teal); }
.tx-icon--redeem   { background: oklch(0.64 0.048 204 / 0.08); color: var(--teal); }
.tx-icon--referral { background: oklch(0.72 0.055 72 / 0.12); color: var(--wood); }
.tx-icon--welcome  { background: oklch(0.64 0.048 204 / 0.10); color: var(--teal); }
.tx-info { flex: 1; min-width: 0; }
.tx-title { font: 500 0.88rem/1.2 var(--f-body); }
.tx-sub { font: 400 0.72rem/1 var(--f-body); color: var(--muted); margin-top: 3px; }
.tx-delta { font: 600 1rem/1 var(--f-disp); letter-spacing: 0.02em; flex-shrink: 0; }
.tx-delta--earned   { color: var(--teal); }
.tx-delta--redeem   { color: var(--muted); }
.tx-delta--referral { color: var(--wood); }

.footer--me {
  margin-top: 20px;
  padding: 32px 20px 0;
  text-align: center;
  color: var(--muted);
  font: 400 0.72rem/1.5 var(--f-body);
}
.footer--me a { color: var(--muted); }

/* ── Logout link button ── */
.btn-logout {
  background: none;
  border: none;
  color: var(--muted);
  font: 400 0.72rem/1.5 var(--f-body);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 120ms;
}
.btn-logout:hover { color: var(--white); }

/* ── Referral share button ── */
.btn-share {
  height: 44px;
  padding: 0 14px;
  background: oklch(0.72 0.055 72 / 0.15);
  border: 1px solid oklch(0.72 0.055 72 / 0.28);
  border-radius: 8px;
  color: oklch(0.80 0.055 72);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  transition: opacity 120ms;
}
.btn-share:active { opacity: 0.7; }

/* ── History link button ── */
.btn-history {
  display: block;
  margin: 20px 20px 20px;
  padding: 13px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--dim2);
  border-radius: 8px;
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: color 140ms, border-color 140ms;
}
.btn-history:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.20); }

/* ── Enrollment confirm (enrollment/confirm.html) ── */
.page--confirm {
  max-width: 420px;
  padding: 56px 24px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Pop animation only on confirm — earned stamps were just added */
.page--confirm .stamp--earned {
  animation: stamp-pop 240ms var(--ease-out) both;
}
@keyframes stamp-pop {
  from { transform: scale(0.55); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.logo--confirm {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 36px;
  mix-blend-mode: var(--logo-blend, screen);
  opacity: 0.9;
}
.welcome-title {
  font: 600 clamp(28px, 7.5vw, 36px)/1.05 var(--f-disp);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.welcome-sub {
  font: 400 14px/1.5 var(--f-body);
  color: var(--muted);
  margin-bottom: 40px;
}
.pass-preview {
  width: 100%;
  background: var(--surface);
  border: 1px solid oklch(0.97 0.010 75 / 0.14);
  border-radius: 10px;
  padding: 20px 20px 16px;
  margin-bottom: 10px;
}
.pass-preview__eyebrow {
  font: 600 10px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.pass-preview__tally {
  font: 400 12px/1 var(--f-body);
  color: var(--muted);
  text-align: right;
  margin-top: 12px;
}
.pass-preview__tally strong { color: var(--white); font-weight: 600; }
.pass-note {
  font: 400 12px/1.5 var(--f-body);
  color: oklch(0.72 0.007 85 / 0.55);
  text-align: center;
  margin-bottom: 36px;
}
.email-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: oklch(0.64 0.048 204 / 0.08);
  border: 1px solid oklch(0.64 0.048 204 / 0.20);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 28px;
  text-align: left;
}
.email-notice__icon { color: var(--teal); flex-shrink: 0; margin-top: 1px; }
.email-notice__copy { font: 400 13px/1.55 var(--f-body); color: var(--muted); }
.email-notice__copy strong { color: var(--white); font-weight: 600; }
.btn-card {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--teal);
  color: var(--black);
  border: none;
  border-radius: 6px;
  font: 600 12px/1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 140ms, color 140ms, transform 80ms;
}
.btn-card:hover { background: var(--teal-deep); color: var(--black); }
.btn-card:active { transform: scale(0.985); }

/* ── Member history page (member/history.html) ── */
.history-page {
  max-width: 430px;
  margin: 0 auto;
  padding-bottom: max(48px, env(safe-area-inset-bottom));
}
.history-header {
  padding: max(20px, env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--dim);
  margin-bottom: 4px;
}
.history-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--dim2);
  color: var(--muted);
  text-decoration: none;
  flex-shrink: 0;
  font-size: 1rem;
  transition: color 120ms, background 120ms;
}
.history-back:hover { color: var(--white); background: var(--surface2); }
.history-title {
  font: 600 1.1rem/1 var(--f-disp);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.history-list {
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}
.btn-load-more {
  display: block;
  width: calc(100% - 40px);
  margin: 8px 20px 0;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--dim2);
  border-radius: 8px;
  color: var(--muted);
  font: 600 0.72rem/1 var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.btn-load-more:hover { color: var(--white); border-color: oklch(0.97 0.006 85 / 0.20); }
.btn-load-more.htmx-request { opacity: 0.5; cursor: wait; }
.history-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font: 400 0.85rem/1.5 var(--f-body);
}

/* ── Social login ── */
.oauth-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  background: var(--surface);
  border: 1px solid var(--dim2);
  border-radius: 10px;
  color: var(--white);
  font: 600 0.83rem/1 var(--f-body);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.btn-oauth:active { background: var(--surface2); }
.btn-oauth svg { flex-shrink: 0; }
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  color: var(--muted);
  font: 400 0.72rem/1 var(--f-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.97 0.010 75 / 0.10);
}