/* ============================================================================
   Auth redesign — split-screen sign in / sign up (handoff: design_handoff_auth)
   Scoped under #auth-overlay.authx so it never touches the rest of the app.
   Palette is warm/gold per the handoff, independent of the app's dark theme.
   ============================================================================ */

#auth-overlay.authx {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: stretch; justify-content: stretch;
  padding: 0; background: #EFEAE0; backdrop-filter: none;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1A1A18;
}

/* ── Left: feature spotlight ─────────────────────────────────────────────── */
.authx-left {
  flex: 1 1 50%; width: 50%; position: relative; overflow: hidden;
  background: #EFEAE0;
  padding: 44px 84px 36px;
  display: flex; flex-direction: column;
}
.authx-deco { position: absolute; border-radius: 50%; pointer-events: none; }
.authx-deco-1 { width: 460px; height: 460px; top: -100px; left: -140px; background: rgba(168,132,58,.07); }
.authx-deco-2 { width: 520px; height: 520px; bottom: -160px; right: -120px; background: rgba(168,132,58,.05); }

.authx-brand { font-size: 1.375rem; font-weight: 800; letter-spacing: -.3px; color: #1A1A18; position: relative; z-index: 1; }
.authx-brand span { color: #A8843A; }
.authx-brand-mobile { display: none; margin-bottom: 26px; }

.authx-carousel { position: relative; margin: auto 0; max-width: 693px; z-index: 1; min-height: 360px; }
.authx-pane {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .4s ease; pointer-events: none;
}
.authx-pane.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }

.authx-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #A8843A; }
.authx-headline { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #1A1A18; margin: 14px 0 0; }
.authx-lede { font-size: .9375rem; font-weight: 500; color: #7C766A; line-height: 1.6; max-width: 530px; margin: 12px 0 0; }

/* Feature visual card */
.authx-card {
  margin-top: 32px; background: #fff; border: 1px solid #E6E0D4; border-radius: 16px;
  padding: 18px; box-shadow: 0 20px 50px -14px rgba(26,26,24,.22); max-width: 530px;
}
.authx-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.authx-chip { background: rgba(168,132,58,.12); color: #A8843A; font-size: .656rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.authx-card-note { font-size: .688rem; color: #9a937f; }
.authx-tag { margin-left: auto; font-size: .625rem; font-weight: 700; color: #9a937f; background: #F1ECE1; padding: 2px 7px; border-radius: 5px; }
.authx-card-title { font-size: .9375rem; font-weight: 700; color: #1A1A18; }
.authx-card-meta { font-size: .781rem; color: #888; margin-top: 3px; }
.authx-card-actions { display: flex; gap: 8px; margin-top: 14px; }
.authx-btn-gold { background: #A8843A; color: #fff; font-size: .781rem; font-weight: 700; padding: 7px 14px; border-radius: 9px; }
.authx-btn-ghost { background: #fff; border: 1px solid #DDD8CE; color: #6B6B64; font-size: .781rem; font-weight: 600; padding: 7px 14px; border-radius: 9px; }

/* Market-check card bits */
.authx-mc-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.authx-thumb { width: 52px; height: 40px; border-radius: 8px; background: linear-gradient(135deg, #3a3a3a, #1a1a1a); flex-shrink: 0; }
.authx-mc-sub { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: .813rem; font-weight: 800; }
.authx-pill-red { font-size: .625rem; font-weight: 700; color: #C0392B; background: rgba(192,57,43,.1); padding: 2px 7px; border-radius: 5px; }
.authx-pill-green { font-size: .625rem; font-weight: 700; color: #2A7A4F; background: rgba(42,122,79,.1); padding: 2px 7px; border-radius: 5px; margin-left: auto; }
.authx-meter-labels { display: flex; justify-content: space-between; font-size: .656rem; font-weight: 700; margin-top: 8px; }
.authx-mc-fair { color: #2A7A4F; } .authx-mc-you { color: #C0392B; }
.authx-meter { position: relative; height: 6px; background: #EFE9DD; border-radius: 4px; margin: 5px 0 12px; }
.authx-meter-tick { position: absolute; left: 8%; top: -3px; width: 3px; height: 12px; background: #2A7A4F; border-radius: 2px; }
.authx-meter-dot { position: absolute; left: 88%; top: -3px; width: 12px; height: 12px; background: #C0392B; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.authx-rec { display: flex; align-items: center; gap: 10px; background: #FAF8F3; border: 1px solid #E6E0D4; border-radius: 11px; padding: 9px 11px; }
.authx-rec-icon { width: 30px; height: 30px; display: grid; place-items: center; background: #F3EEE6; border-radius: 8px; font-size: .9rem; }
.authx-rec-text { font-size: .781rem; font-weight: 700; color: #1A1A18; }
.authx-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #8E7BD6, #6D8AD9); color: #fff; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.authx-msg { font-size: .719rem; color: #6B6B64; margin-top: 3px; }
.authx-reply-chip { background: #F5F2EC; color: #7A5B12; font-size: .688rem; border-radius: 8px; padding: 8px 10px; margin-top: 4px; }

.authx-dots { display: flex; gap: 7px; position: relative; z-index: 1; }
.authx-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: #D8CFBB; cursor: pointer; transition: width .3s ease, background .3s ease; }
.authx-dot.is-active { width: 22px; background: #A8843A; }

/* ── Right: form panel ───────────────────────────────────────────────────── */
.authx-right {
  flex: 1 1 50%; width: 50%; background: #fff; border-left: 1px solid #DDD8CE;
  padding: 38px 64px 30px; display: flex; flex-direction: column; overflow-y: auto;
}
/* Keep the form itself readable and centered inside the wider 50% panel. */
.authx-form { margin: auto; width: 100%; max-width: 557px; }

.authx-title { font-size: 1.875rem; font-weight: 800; letter-spacing: -.5px; color: #1A1A18; }
.authx-subtitle { font-size: .906rem; font-weight: 500; color: #7C766A; margin: 6px 0 0; line-height: 1.5; }
.authx-subtitle b { color: #1A1A18; }

.authx-tabs { display: flex; background: #F1ECE1; border-radius: 12px; padding: 4px; margin: 22px 0 18px; }
.authx-tab { flex: 1; border: none; background: transparent; color: #948A79; font-size: .844rem; font-weight: 600; padding: 9px; border-radius: 9px; cursor: pointer; transition: all .18s ease; }
.authx-tab.is-active { background: #1A1712; color: #fff; font-weight: 700; }

.authx-field { margin-bottom: 14px; }
.authx-field > label { display: block; font-size: .688rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9a937f; margin-bottom: 6px; }
.authx-label-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.authx-label-row label { font-size: .688rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9a937f; }
.authx-forgot { font-size: .75rem; font-weight: 700; color: #A8843A; text-decoration: none; }
.authx-forgot:hover { text-decoration: underline; }

.authx-field input[type="email"],
.authx-field input[type="password"],
.authx-field input[type="text"] {
  width: 100%; background: #FAF8F3; border: 1px solid #DDD8CE; border-radius: 11px;
  padding: 13px 15px; font-size: .906rem; font-weight: 500; color: #1A1A18;
  font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease;
}
.authx-field input::placeholder { color: #B4AC9C; }
.authx-field input:focus { outline: none; border-color: #A8843A; box-shadow: 0 0 0 3px rgba(168,132,58,.12); }

.authx-input-wrap { position: relative; display: flex; align-items: center; }
.authx-input-wrap input { padding-right: 44px !important; }
.authx-eye { position: absolute; right: 10px; background: none; border: none; color: #B4AC9C; cursor: pointer; padding: 4px; display: grid; place-items: center; }
.authx-eye:hover { color: #7C766A; }
.authx-strength-badge { position: absolute; right: 40px; font-size: .656rem; font-weight: 700; border-radius: 6px; padding: 3px 9px; }
.authx-strength-badge.is-strong { color: #2A7A4F; background: rgba(42,122,79,.1); border: 1px solid rgba(42,122,79,.25); }
.authx-strength-badge.is-weak { color: #C0392B; background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.25); }

/* Input state tints (sign up strength) */
.authx-field.is-strong input { border-color: #2A7A4F; box-shadow: 0 0 0 3px rgba(42,122,79,.08); }
.authx-field.is-weak input { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192,57,43,.08); }

.authx-strength { margin-top: 10px; }
.authx-meter-3 { display: flex; gap: 5px; }
.authx-meter-3 span { flex: 1; height: 4px; border-radius: 2px; background: #EBE5D8; transition: background .2s ease; }
.authx-meter-3.t1 span:nth-child(1) { background: #C0392B; }
.authx-meter-3.t2 span:nth-child(-n+2) { background: #A8843A; }
.authx-meter-3.t3 span { background: #2A7A4F; }
.authx-rules { list-style: none; margin: 10px 0 0; padding: 0; }
.authx-rules li { font-size: .75rem; font-weight: 500; color: #9a937f; display: flex; align-items: center; gap: 7px; margin-top: 4px; }
.authx-rule-mark { font-weight: 700; color: #C0392B; width: 12px; display: inline-block; text-align: center; }
.authx-rules li.met { color: #4b5548; }
.authx-rules li.met .authx-rule-mark { color: #2A7A4F; }

.authx-confirm-msg { font-size: .75rem; font-weight: 600; margin-top: 6px; }
.authx-confirm-msg.ok { color: #2A7A4F; }
.authx-confirm-msg.bad { color: #C0392B; }

.authx-remember { display: flex; align-items: center; gap: 9px; font-size: .844rem; font-weight: 500; color: #6B6B64; margin: 4px 0 14px; cursor: pointer; }
.authx-remember input { width: 17px; height: 17px; border-radius: 5px; accent-color: #A8843A; cursor: pointer; }

.authx-primary {
  width: 100%; background: #A8843A; color: #fff; border: none; border-radius: 11px;
  padding: 15px; font-size: .9375rem; font-weight: 700; font-family: inherit; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(168,132,58,.55); transition: filter .15s ease;
}
.authx-primary:hover:not(:disabled) { filter: brightness(1.05); }
.authx-primary:disabled { background: #D9CBAA; box-shadow: none; cursor: not-allowed; }

.authx-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.authx-divider::before, .authx-divider::after { content: ""; flex: 1; height: 1px; background: #E6E0D4; }
.authx-divider span { font-size: .75rem; font-weight: 600; color: #9a937f; }

.authx-secondary {
  width: 100%; background: #fff; border: 1px solid #DDD8CE; border-radius: 11px;
  padding: 13px; font-size: .875rem; font-weight: 600; color: #1A1A18; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background .15s ease;
}
.authx-secondary:hover:not(:disabled) { background: #FAF8F3; }
.authx-secondary:disabled { color: #9a937f; cursor: not-allowed; }

.authx-terms { font-size: .719rem; color: #9a937f; margin-top: 14px; line-height: 1.5; }
.authx-terms a, .authx-footer a, .authx-back-row a { color: #A8843A; font-weight: 700; text-decoration: none; }
.authx-terms a:hover, .authx-footer a:hover { text-decoration: underline; }

.authx-footer { font-size: .75rem; color: #9a937f; margin-top: 20px; text-align: center; }
.authx-back-row { text-align: center; margin-top: 16px; font-size: .875rem; }

.authx-icon-tile { width: 52px; height: 52px; border-radius: 16px; background: rgba(42,122,79,.12); display: grid; place-items: center; margin-bottom: 16px; }

/* Error banner override to match warm palette */
#auth-overlay.authx .auth-error {
  background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.3);
  color: #8E2A1E; border-radius: 11px; padding: 11px 14px; font-size: .781rem; margin-bottom: 14px;
}

/* ── Mobile: dark hero + light sheet ─────────────────────────────────────── */
@media (max-width: 820px) {
  #auth-overlay.authx { flex-direction: column; overflow-y: auto; background: #1A1712; }
  .authx-left {
    flex: none; width: auto; padding: 40px 24px 28px; background: #1A1712; color: #F3EEE4;
    min-height: 300px;
  }
  .authx-deco-1 { background: rgba(168,132,58,.25); width: 300px; height: 300px; top: -80px; right: -60px; left: auto; }
  .authx-deco-2 { display: none; }
  .authx-brand { color: #F3EEE4; }
  .authx-brand span { color: #C9A96E; }
  .authx-carousel { min-height: auto; margin: 22px 0; }
  .authx-headline { font-size: 1.5625rem; letter-spacing: -.6px; color: #F3EEE4; }
  .authx-lede { color: #95897A; font-size: .813rem; }
  .authx-card { display: none; } /* keep the mobile hero light; cards are desktop-only */
  .authx-dot { background: #3A342A; }
  .authx-dot.is-active { background: #C9A96E; width: 18px; height: 6px; }

  .authx-right {
    flex: none; width: auto; border-left: none; background: #F5F2EC;
    border-radius: 24px 24px 0 0; margin-top: -14px; padding: 24px 20px 20px;
  }
  .authx-right .authx-form { max-width: none; }
  .authx-brand-mobile { display: none; }
  .authx-tabs { background: #EBE5D8; }
  .authx-field input { background: #fff; padding: 12px 14px; border-radius: 11px; }
  .authx-primary, .authx-secondary { border-radius: 12px; }
}