/* ============================================================================
   MXKRS — sign-in / setup / reset / legal pages, matched to mxkrs.com (2026-09-25)
   Loaded after each page's own <style>. Covers: admin-login.php (.brand-col / .fld / .btn-sign),
   client-login.php + reset-password.php (.left-panel / .field-input / .btn-login),
   account-setup.php, admin-setup.php, terms.php, privacy.php.
   Layout: light page, a dark rounded panel with the wordmark (the site's hero), a white
   rounded form card. VISUAL ONLY.
   ========================================================================== */
:root {
  --bg: #f5f5f5; --surface: #ffffff; --surface2: #fafafa; --border: #e9e9e9; --border2: #dcdcdc;
  --text: #0a0a0a; --text2: rgba(10,10,10,.72); --text3: #999999; --muted: #999999;
  --accent: #0a0a0a; --accent-dim: rgba(10,10,10,.06); --accent-border: rgba(10,10,10,.18);
  --red: #b91c1c; --red-bg: rgba(185,28,28,.08); --red-border: rgba(185,28,28,.25);
  --green: #15803d; --green-bg: rgba(21,128,61,.08); --green-border: rgba(21,128,61,.25);
  --black: #0a0a0a; --white: #ffffff; --off: #f5f5f5;
  --sans: "Inter", "Inter Placeholder", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); --mono: "Fragment Mono", "DM Mono", ui-monospace, Menlo, monospace;
  --radius: 10px; --ease-out: cubic-bezier(.56,.22,.05,.99); --spring: cubic-bezier(.22,1,.36,1);
}
html, body { background: var(--bg) !important; color: var(--text) !important; font-family: var(--sans) !important; letter-spacing: -.02em; -webkit-font-smoothing: antialiased; }
body { padding: 16px; min-height: 100vh; }
body > .page-grid, body > .left-panel + .right-panel { min-height: calc(100vh - 32px); }

/* Two-column shells */
.page-grid { display: grid !important; grid-template-columns: 1.15fr 1fr !important; gap: 16px; width: 100%; min-height: calc(100vh - 32px); }
body:has(.left-panel) { display: grid !important; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; }

/* Dark brand panel = the site's hero panel */
.brand-col, .left-panel { background: #0a0a0a !important; color: #fff !important; border: none !important; border-radius: 25px !important; padding: 34px 30px 28px !important; position: relative; overflow: hidden; display: flex !important; flex-direction: column; justify-content: space-between;
  background-image: url("/site/media/vrhxHFTuxnCduP4nljUulqZcuQ.jpg") !important; background-size: cover !important; background-position: center !important; }
.brand-col::before, .brand-col::after, .left-panel::after { display: none !important; }
.bc-logo, .lp-logo, .bc-body, .lp-body, .bc-footer, .lp-footer { position: relative; z-index: 1; }
.bc-wordmark, .lp-logo { font-family: var(--sans) !important; font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: -.04em !important; text-transform: none !important; color: #fff !important; }
.bc-tag, .bc-label, .lp-eyebrow { font-family: var(--sans) !important; font-size: .68rem !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255,255,255,.7) !important; opacity: 1 !important; margin: 4px 0 0 !important; }
.bc-label, .lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px !important; }
.bc-label::before, .lp-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.bc-headline, .lp-headline { font-family: var(--sans) !important; font-size: clamp(44px, 6.5vw, 96px) !important; line-height: .95 !important; letter-spacing: -.06em !important; font-weight: 600 !important; color: #fff !important; margin: 0 0 22px !important; }
.bc-headline em, .lp-headline em { font-style: normal !important; color: rgba(255,255,255,.55) !important; }
.bc-desc, .lp-feature p { font-family: var(--sans) !important; font-size: .95rem !important; font-weight: 500 !important; line-height: 1.4 !important; color: rgba(255,255,255,.75) !important; max-width: 440px; letter-spacing: -.02em; }
.lp-feature p strong { color: #fff; font-weight: 600; }
.lp-features { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.lp-feature { display: flex; gap: 10px; align-items: flex-start; }
.lp-feature-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff !important; margin-top: 7px; flex-shrink: 0; }
.bc-footer, .lp-footer { font-family: var(--sans) !important; font-size: .72rem !important; font-weight: 500 !important; color: rgba(255,255,255,.65) !important; letter-spacing: -.01em !important; }
.bc-footer a, .lp-footer a { color: #fff !important; opacity: 1 !important; text-decoration: underline; text-underline-offset: 4px; }

/* Form column / card */
.form-col, .right-panel { background: transparent !important; border: none !important; display: flex !important; align-items: center; justify-content: center; padding: 20px !important; }
.form-wrap, .form-card { width: 100% !important; max-width: 420px !important; background: #fff; border: 1px solid var(--border); border-radius: 25px; padding: 32px 30px 26px !important; animation: mxAuthIn .8s var(--spring) both; }
.form-card + .form-card { margin-top: 12px; }
@keyframes mxAuthIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.form-kicker, .form-eyebrow { font-family: var(--sans) !important; font-size: .72rem !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-transform: none !important; color: var(--text) !important; margin-bottom: 10px !important; }
.form-heading, .form-title { font-family: var(--sans) !important; font-size: 1.85rem !important; font-weight: 600 !important; letter-spacing: -.05em !important; line-height: 1 !important; color: var(--text) !important; margin: 0 0 8px !important; }
.form-sub { font-size: .84rem !important; font-weight: 500; color: var(--text3) !important; line-height: 1.45 !important; margin-bottom: 22px !important; letter-spacing: -.01em; }
.access-badge { display: none !important; }
.alert, .alert-error, .alert-success { border-radius: 10px !important; font-family: var(--sans) !important; font-size: .78rem !important; font-weight: 500 !important; padding: 10px 12px !important; margin-bottom: 14px !important; }
.alert-error { background: var(--red-bg) !important; border: 1px solid var(--red-border) !important; color: var(--red) !important; }
.alert-success { background: var(--green-bg) !important; border: 1px solid var(--green-border) !important; color: var(--green) !important; }
.fld, .field-group { margin-bottom: 14px !important; }
.fld-label, .field-label { font-family: var(--sans) !important; font-size: .6rem !important; font-weight: 600 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--text) !important; margin-bottom: 6px !important; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; }
.fld-input, .field-input, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=url], select, textarea {
  width: 100%; font-family: var(--sans) !important; font-size: .88rem !important; font-weight: 500 !important; padding: 12px 14px !important; background: #fff !important; border: 1px solid var(--border) !important; border-radius: 10px !important; color: var(--text) !important; outline: none !important; box-shadow: none !important; transition: border-color .2s ease; letter-spacing: -.01em;
}
.fld-input:focus, .field-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--text) !important; box-shadow: none !important; }
.fld-input.err, .field-input.error { border-color: var(--red) !important; }
input::placeholder, textarea::placeholder { color: #a4a4a4 !important; }
.forgot-row { margin: -4px 0 14px !important; }
.forgot-btn, .forgot-link { font-family: var(--sans) !important; font-size: .74rem !important; font-weight: 600 !important; color: var(--text3) !important; text-decoration: underline !important; text-underline-offset: 4px; background: none; border: none; cursor: pointer; transition: color .2s; letter-spacing: -.01em; }
.forgot-btn:hover, .forgot-link:hover { color: var(--text) !important; }
.remember-row { display: flex; align-items: center; gap: 8px; margin: 2px 0 16px; font-size: .78rem; font-weight: 500; color: var(--text2); }
.remember-row input { accent-color: #0a0a0a; width: 15px; height: 15px; }
.btn-sign, .btn-login, .btn, button[type=submit] { width: 100%; font-family: var(--sans) !important; font-size: .9rem !important; font-weight: 600 !important; letter-spacing: -.02em !important; text-transform: none !important; height: 46px; padding: 0 24px !important; background: #0a0a0a !important; color: #fff !important; border: 1px solid #0a0a0a !important; border-radius: 999px !important; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .25s var(--spring), background .25s ease !important; }
.btn-sign:hover, .btn-login:hover, .btn:hover, button[type=submit]:hover { background: #313131 !important; transform: translateY(-1px); }
.btn-ghost, .btn-outline { background: #fff !important; color: var(--text) !important; border-color: var(--border) !important; }
.btn-ghost:hover, .btn-outline:hover { background: #ebebeb !important; }
.security-note { font-family: var(--sans) !important; font-size: .7rem !important; font-weight: 500 !important; color: var(--text3) !important; border-top: 1px solid var(--border) !important; margin-top: 20px !important; padding-top: 16px !important; letter-spacing: -.01em; }
.divider-row { display: flex; align-items: center; gap: 12px; margin: 22px 0 12px; }
.divider-row hr { flex: 1; border: none; border-top: 1px solid var(--border); margin: 0; }
.divider-row span { font-size: .72rem; font-weight: 500; color: var(--text3); white-space: nowrap; }
.signup-row { text-align: center; }
.signup-row a { font-family: var(--sans) !important; font-size: .82rem !important; font-weight: 600 !important; color: var(--text) !important; text-decoration: none !important; position: relative; }
.signup-row a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.signup-row a:hover::after { transform: scaleX(1); }
.spinner { border-color: rgba(255,255,255,.35) !important; border-top-color: #fff !important; }

/* Legal + setup pages (single column content) */
.legal-wrap, .setup-wrap, .wrap, .container, main.legal { max-width: 900px; margin: 0 auto; padding: 40px 24px 80px; }
.legal-wrap h1, .setup-wrap h1, .wrap h1, main h1 { font-family: var(--sans) !important; font-size: clamp(40px, 6vw, 80px) !important; font-weight: 600 !important; letter-spacing: -.06em !important; line-height: .98 !important; color: var(--text) !important; }
.legal-wrap h2, .setup-wrap h2, .wrap h2, main h2 { font-family: var(--sans) !important; font-size: 1.3rem !important; font-weight: 600 !important; letter-spacing: -.04em !important; margin-top: 26px; color: var(--text) !important; }
.legal-wrap p, .setup-wrap p, .wrap p, main p, .legal-wrap li, main li { font-family: var(--sans) !important; font-size: .95rem !important; font-weight: 500 !important; line-height: 1.55 !important; color: var(--text2) !important; }

@media (max-width: 860px) {
  .page-grid, body:has(.left-panel) { grid-template-columns: 1fr !important; }
  .brand-col, .left-panel { min-height: 46vh; padding: 26px 22px 22px !important; }
  .bc-headline, .lp-headline { font-size: clamp(40px, 12vw, 64px) !important; }
  .form-col, .right-panel { padding: 8px 0 !important; }
}
@media (prefers-reduced-motion: reduce) { .form-wrap, .form-card { animation: none; } .btn-sign:hover, .btn-login:hover { transform: none; } }

/* ── account-setup.php / admin-setup.php / terms.php / privacy.php specifics ── */
.topbar { background: transparent !important; border: none !important; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px !important; }
.topbar-logo { font-family: var(--sans) !important; font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: -.04em !important; color: var(--text) !important; text-decoration: none; text-transform: none !important; }
.topbar-right { font-size: .8rem; font-weight: 500; color: var(--text3); }
.topbar-right a { color: var(--text) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.page-eyebrow, .eyebrow, .section-label, .prog-label, .rr-label, .ref-label { font-family: var(--sans) !important; font-size: .62rem !important; font-weight: 600 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--text3) !important; }
.page-title, .success-title, .card-title { font-family: var(--sans) !important; font-size: clamp(34px, 5vw, 56px) !important; font-weight: 600 !important; letter-spacing: -.05em !important; line-height: 1 !important; color: var(--text) !important; }
.page-sub, .success-sub, .card-sub, .intro, .field-hint, .fld-hint { font-family: var(--sans) !important; font-weight: 500 !important; color: var(--text3) !important; }
.form-card, .card { background: #fff; border: 1px solid var(--border) !important; border-radius: 25px !important; box-shadow: none !important; }
.card-head { border-bottom: 1px solid var(--border) !important; }
/* Multi-step signup: .step-panel is the WRAPPER (card + nav buttons), not a card — keep it transparent. The 420px login-card width above must not apply here. */
.step-panel { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; max-width: 560px; }
.step-panel .form-card { max-width: 560px !important; padding: 34px 38px !important; animation: none; }
.step-panel .nav-row { max-width: 560px; margin-top: 4px; }
/* Stepper: a plain centred row on the page background (the original drew a white band with a bottom rule). */
.progress-bar { background: transparent !important; border: 0 !important; padding: 10px 0 0 !important; }
.progress-inner { background: transparent !important; border-radius: 0 !important; height: 52px; justify-content: center; }
.prog-step { flex: 0 0 auto; }
.prog-line { max-width: 72px; width: 72px; flex: 0 0 72px; margin: 0 16px !important; }
.prog-num, .ts-dot, .pending-badge, .ref-chip, .email-badge { border-radius: 999px !important; font-family: var(--sans) !important; }
.prog-num { width: 26px !important; height: 26px !important; font-size: .64rem !important; font-weight: 600 !important; border: 1px solid var(--border2) !important; color: var(--text3); background: #fff; }
.prog-step.active .prog-num, .prog-step.done .prog-num, .ts-item.done .ts-dot, .ts-dot.complete { background: var(--text) !important; border-color: var(--text) !important; color: #fff !important; }
.prog-step.active .prog-label, .prog-step.done .prog-label { color: var(--text) !important; }
.prog-line.done { background: var(--text) !important; }
/* Success screen: a real card with room inside; its inner timeline list is a bordered block, not a second card. */
.success-screen { background: #fff; border: 1px solid var(--border) !important; border-radius: 25px !important; box-shadow: none !important; padding: 44px 40px 36px !important; max-width: 560px !important; width: 100%; }
.timeline-steps, .ack-row, .ref-chip { border-radius: 18px !important; }
.ts-dot.pending { background: #fff !important; border-color: var(--text) !important; color: var(--text) !important; }
.prog-step.done .prog-label, .ts-item .ts-label { color: var(--text) !important; }
.pending-badge { display: none !important; }   /* its emoji was removed in the 09-25 sweep; an empty circle is worse than none */
@media (max-width: 600px) {
  .progress-inner { height: 44px; }
  .prog-line { width: 26px; flex-basis: 26px; margin: 0 8px !important; }
  .prog-step:not(.active) .prog-label { display: none; }   /* phones: numbers + the active step's name only */
  .step-panel .form-card { padding: 26px 20px !important; }
  .success-screen { padding: 32px 20px 26px !important; }
}
.review-row { border-bottom: 1px solid var(--border) !important; }
.wrap { max-width: 900px; margin: 0 auto; padding: 30px 8px 80px; }
.wrap h1 { font-family: var(--sans) !important; font-size: clamp(40px, 6vw, 80px) !important; font-weight: 600 !important; letter-spacing: -.06em !important; line-height: .98 !important; }
.wrap h2 { font-family: var(--sans) !important; font-size: 1.3rem !important; font-weight: 600 !important; letter-spacing: -.04em !important; margin-top: 26px; }
.wrap p, .wrap li { font-family: var(--sans) !important; font-size: .95rem !important; font-weight: 500 !important; line-height: 1.55 !important; color: var(--text2) !important; }
.updated, .foot { font-family: var(--sans) !important; font-size: .78rem !important; font-weight: 500 !important; color: var(--text3) !important; }
.btn-ghost, .btn-outline, .nav-row .btn-ghost { width: auto; }
.nav-row { display: flex; gap: 10px; justify-content: space-between; }
.nav-row .btn, .nav-row button { width: auto !important; }