/* mSamex — Onboarding & KYC flow (responsive: works phone → desktop) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--snow); font-family: var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv02"; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); } .down { color: var(--down); } .muted { color: var(--mute); }
input, button { font-family: inherit; }
input { background-color: transparent; color: var(--snow); border: none; }
input:focus { outline: none; }
input::placeholder { color: var(--mute); }
    :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 5px; }

.stage { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; background: radial-gradient(60% 50% at 50% 0%, rgba(0,214,143,0.06), transparent 70%), var(--bg); }
.stage-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(70% 60% at 50% 0%, black, transparent 100%); pointer-events: none; }

.card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--e-3); }
.ahead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.actrl { display: flex; align-items: center; gap: 8px; }
.iconbtn { width: 30px; height: 30px; display: grid; place-items: center; background: var(--elevated); border: 1px solid var(--line); border-radius: 8px; color: var(--snow-dim); cursor: pointer; padding: 0; }
.iconbtn svg { width: 15px; height: 15px; }
.iconbtn:hover { color: var(--snow); border-color: var(--mute); }
.langtog { min-width: 30px; height: 30px; padding: 0 8px; background: var(--elevated); border: 1px solid var(--line); border-radius: 8px; color: var(--snow-dim); cursor: pointer; font-size: 12px; font-weight: 600; }
.langtog:hover { color: var(--snow); border-color: var(--mute); }
.abrand { display: flex; align-items: center; gap: 9px; }
.abrand .wm { font-weight: 700; font-size: 17px; letter-spacing: -0.03em; } .abrand .wm-s { color: var(--mint); }
.astep { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.05em; }

h1.title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; }
.subtitle { font-size: 14px; color: var(--snow-dim); margin: 0 0 22px; line-height: 1.5; }

.field { margin-bottom: 16px; position: relative; }
.field > label { display: block; font-size: 12px; color: var(--mute); margin-bottom: 7px; }
.inp { display: flex; align-items: center; gap: 8px; background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; }
.inp:focus-within { border-color: var(--mint); }
.inp input { flex: 1; font-size: 15px; min-width: 0; }
.inp .eye, .inp .tail { background: none; border: none; color: var(--mute); cursor: pointer; display: grid; padding: 0; }
.inp .eye svg, .inp .tail svg { width: 17px; height: 17px; }
.inp.pick { cursor: pointer; justify-content: space-between; }
.err { color: var(--down); font-size: 12px; margin-top: 6px; }
.hint { color: var(--mute); font-size: 12px; margin-top: 6px; }

/* password strength */
.strength { display: flex; gap: 5px; margin-top: 9px; }
.strength i { flex: 1; height: 4px; border-radius: 3px; background: var(--line); transition: background var(--d-base); }
.strength.s1 i:nth-child(1) { background: var(--down); }
.strength.s2 i:nth-child(-n+2) { background: var(--warn); }
.strength.s3 i:nth-child(-n+3) { background: var(--mint); }
.strength.s4 i { background: var(--mint); }
.pw-rules { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.pw-rules span { font-size: 11px; color: var(--mute); display: flex; align-items: center; gap: 4px; }
.pw-rules span.ok { color: var(--mint); }
.pw-rules span .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* ── bank-grade required agreement checkbox ── */
.check {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px; color: var(--snow-dim); line-height: 1.55; cursor: pointer;
  margin: 4px 0 6px; padding: 13px 14px;
  background: var(--elevated); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color var(--d-fast), background var(--d-fast);
  -webkit-tap-highlight-color: transparent;
}
.check:hover { border-color: var(--mute); }
.check.on { border-color: color-mix(in srgb, var(--mint) 55%, var(--line)); background: var(--mint-wash); }
.check:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.check .box {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--mute);
  flex-shrink: 0; display: grid; place-items: center; margin-top: 1px;
  transition: background var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
}
.check.on .box { background: var(--mint); border-color: var(--mint); color: var(--ink); transform: scale(1.02); }
.check .box svg { width: 13px; height: 13px; opacity: 0; transition: opacity var(--d-fast); }
.check.on .box svg { opacity: 1; }
.check .check-txt { flex: 1; }
.check a, .lglink { color: var(--mint); text-decoration: none; font-weight: 600; }
.check a:hover, .lglink:hover { text-decoration: underline; }

/* validation hint (shown when submit is attempted while unchecked) */
.check-hint {
  display: none; align-items: center; gap: 6px;
  font-size: 12px; color: var(--down); margin: 0 0 14px; padding-left: 2px;
}
.check-hint.show { display: flex; }

/* small Terms/Privacy line under social buttons */
.social-legal { font-size: 12px; line-height: 1.5; color: var(--snow-mute); text-align: center; margin: 12px 0 0; }
.social-legal a { color: var(--snow-dim); text-decoration: underline; }
.social-legal a:hover { color: var(--mint); }

.btn { width: 100%; border: none; border-radius: 10px; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; background: var(--mint); color: var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.sec { background: var(--elevated); color: var(--snow); border: 1px solid var(--line); }
.btn.ghost { background: none; color: var(--snow-dim); border: 1px solid var(--line); }
/* minmax(0,1fr), NOT 1fr. A bare `1fr` is `minmax(auto, 1fr)`, and the auto
   minimum is the item's min-content width — an <input> carries an intrinsic
   width of roughly 20 characters, so the track refuses to shrink and the row
   overflows the card. Visible on "Last name" and on "Postal code", which use
   this same class. `.social` below already does this correctly. */
.btn-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
/* Belt and braces: a grid item is also min-width:auto by default, so anything
   nested (the .inp flex wrapper) could reintroduce the same blowout. */
.btn-row > * { min-width: 0; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--mute); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.social { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
/* single social button (native apps hide Apple): auto-fit makes it FULL WIDTH
   and it should carry the row like the primary Sign in button */
.social button:only-child { font-weight: 700; font-size: 15px; }
.social button { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 11px; color: var(--snow); font-size: 14px; font-weight: 500; cursor: pointer; }
.social svg { width: 18px; height: 18px; }
.foot-link { text-align: center; font-size: 13px; color: var(--snow-dim); margin-top: 18px; }
.foot-link a { color: var(--mint); text-decoration: none; cursor: pointer; }
.backlink { background: none; border: none; color: var(--mute); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 16px; }
.backlink svg { width: 16px; height: 16px; }

/* dropdown (country / select) */
.dd { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--elevated); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--e-3); z-index: 20; overflow: hidden; display: none; }
.field.open .dd { display: block; }
.dd-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.dd-search svg { width: 15px; height: 15px; color: var(--mute); }
.dd-search input { flex: 1; font-size: 13px; }
.dd-list { max-height: 240px; overflow-y: auto; }
.dd-opt { display: flex; align-items: center; gap: 10px; padding: 10px 13px; cursor: pointer; font-size: 14px; }
.dd-opt:hover { background: var(--surface); }
.dd-opt .iso { font-family: var(--mono); font-size: 11px; color: var(--mute); width: 26px; }
.dd-opt .dial { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.iso-chip { font-family: var(--mono); font-size: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; color: var(--snow-dim); }

/* date picker */
.cal { position: absolute; left: 0; top: calc(100% + 6px); width: 300px; max-width: 100%; background: var(--elevated); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--e-3); z-index: 20; padding: 14px; display: none; }
.field.open .cal { display: block; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal-head button { background: none; border: none; color: var(--snow); cursor: pointer; font-size: 14px; }
.cal-head select { background: var(--surface); color: var(--snow); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid .dow { font-size: 10px; color: var(--mute); text-align: center; padding: 4px 0; font-family: var(--mono); }
.cal-grid button { background: none; border: none; color: var(--snow-dim); font-size: 13px; padding: 7px 0; border-radius: 6px; cursor: pointer; font-family: var(--mono); }
.cal-grid button:hover { background: var(--surface); }
.cal-grid button.sel { background: var(--mint); color: var(--ink); font-weight: 700; }
.cal-grid button.empty { visibility: hidden; }

/* OTP */
.otp { display: flex; gap: 9px; justify-content: space-between; margin-bottom: 16px; }
.otp input { width: 100%; aspect-ratio: 1; text-align: center; font-family: var(--mono); font-size: 22px; font-weight: 700; background: var(--elevated); border: 1px solid var(--line); border-radius: 10px; }
.otp input:focus { border-color: var(--mint); }
.resend { text-align: center; font-size: 13px; color: var(--mute); }
.resend b { color: var(--mint); cursor: pointer; }

/* milestone */
.milestone { text-align: center; padding: 16px 4px; }
.milestone .mk { display: flex; justify-content: center; margin-bottom: 18px; }
.milestone h1 { font-size: 24px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.02em; }
.milestone p { font-size: 14px; color: var(--snow-dim); margin: 0 0 24px; line-height: 1.5; }
.badge-lv { display: inline-flex; align-items: center; gap: 7px; background: var(--mint-wash); border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); color: var(--mint); padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 20px; }

/* 2FA factor list */
.factors { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.factor { display: flex; align-items: center; gap: 13px; background: var(--elevated); border: 1px solid var(--line); border-radius: 11px; padding: 14px; cursor: pointer; text-align: left; width: 100%; color: var(--snow); }
.factor:hover { border-color: var(--mute); }
.factor.primary { border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.factor .fi { width: 38px; height: 38px; border-radius: 9px; background: var(--surface); display: grid; place-items: center; color: var(--mint); flex-shrink: 0; }
.factor .fi svg { width: 19px; height: 19px; }
.factor .ft { flex: 1; } .factor .ft strong { display: block; font-size: 14px; } .factor .ft small { font-size: 12px; color: var(--mute); }
.factor .pill { font-size: 10px; font-family: var(--mono); color: var(--mint); background: var(--mint-wash); padding: 2px 7px; border-radius: 999px; }

/* KYC tiers + stepper */
.tier { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 10px; }
.tier.cur { border-color: color-mix(in srgb, var(--mint) 40%, transparent); background: var(--mint-wash); }
.tier .tnum { width: 30px; height: 30px; border-radius: 50%; background: var(--elevated); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 13px; flex-shrink: 0; }
.tier.done .tnum { background: var(--mint); color: var(--ink); }
.tier .tbody { flex: 1; } .tier .tbody strong { font-size: 14px; display: block; } .tier .tbody small { font-size: 12px; color: var(--snow-dim); }
.tier .tlimit { font-family: var(--mono); font-size: 12px; color: var(--mute); text-align: right; }
.stepper { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.stp { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); background: var(--elevated); border-radius: 11px; transition: border-color .15s ease, background .15s ease; }
.stp:hover { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.stp.done { opacity: .65; }
.stp.next { border-color: color-mix(in srgb, var(--mint) 55%, transparent); background: var(--mint-wash); }
.stp.next .sc { border-color: var(--mint); color: var(--mint); }
.stp .sc { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.stp.done .sc { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.stp.active .sc { border-color: var(--mint); color: var(--mint); }
.stp .sl { font-size: 14px; } .stp.done .sl { color: var(--mute); }
.stp .schev { margin-left: auto; color: var(--mint); }

/* uploader */
.upload { border: 1.5px dashed var(--line); border-radius: 12px; padding: 28px 16px; text-align: center; cursor: pointer; margin-bottom: 16px; }
.upload:hover { border-color: var(--mint); }
.upload .ui { width: 44px; height: 44px; border-radius: 10px; background: var(--elevated); display: grid; place-items: center; margin: 0 auto 12px; color: var(--mint); }
.upload .ui svg { width: 22px; height: 22px; }
.upload strong { font-size: 14px; display: block; margin-bottom: 4px; } .upload small { font-size: 12px; color: var(--mute); }
.upload.filled { border-style: solid; border-color: color-mix(in srgb, var(--mint) 40%, transparent); }
.doctype { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 16px; }
.doctype button { background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 12px 6px; color: var(--snow-dim); font-size: 12px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.doctype button.sel { border-color: var(--mint); color: var(--snow); }
.doctype svg { width: 20px; height: 20px; }

/* phone field */
.phone-row { display: flex; gap: 8px; }
.phone-dial { display: flex; align-items: center; gap: 6px; background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 12px; cursor: pointer; font-size: 14px; white-space: nowrap; }
.otp-method { display: flex; gap: 8px; margin-bottom: 16px; }
.otp-method button { flex: 1; background: var(--elevated); border: 1px solid var(--line); border-radius: 9px; padding: 10px; color: var(--snow-dim); font-size: 13px; font-weight: 500; cursor: pointer; }
.otp-method button.sel { border-color: var(--mint); color: var(--snow); }

.status-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 16px; }
.status-icon.pending { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.status-icon.ok { background: var(--mint-wash); color: var(--mint); }
.status-icon svg { width: 30px; height: 30px; }

/* logical-direction fixes for RTL */
.dd-opt .dial { margin-inline-start: auto; margin-left: 0; }
.stp .schev { margin-inline-start: auto; margin-left: 0; }
.tier .tlimit { text-align: end; }
.factor { text-align: start; }
.cal { inset-inline-start: 0; left: auto; }
[dir="rtl"] .backlink svg, [dir="rtl"] .stp .schev svg, [dir="rtl"] .tier-chev svg { transform: scaleX(-1); }
/* keep numbers, OTP, codes LTR even in RTL */
.mono, .otp, .astep, .dial, .iso, .tlimit, input.mono { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .otp { flex-direction: row-reverse; }

/* ===== Desktop split-screen auth (≥960px) — mobile stays a centered card ===== */
.auth-aside { display: none; }
.auth-main { width: 100%; display: flex; justify-content: center; }

@media (min-width: 960px) {
  .stage { padding: 0; align-items: stretch; justify-content: stretch; }
  .auth-aside {
    display: flex; flex-direction: column; justify-content: space-between;
    flex: 0 0 44%; max-width: 600px; padding: 52px 56px;
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(0,214,143,0.10), transparent 60%),
      linear-gradient(155deg, #0E141A 0%, var(--bg) 70%);
    border-inline-end: 1px solid var(--line);
    position: relative; overflow: hidden;
  }
  .aa-top { display: flex; align-items: center; gap: 10px; }
  .aa-mark { display: grid; place-items: center; }
  .aa-wm { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: var(--snow); }
  .aa-wm .s { color: var(--mint); }
  .aa-mid h2 { font-size: clamp(30px, 3.2vw, 46px); font-weight: 700; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 16px; color: var(--snow); }
  .aa-mid h2 .mint { color: var(--mint); }
  .aa-mid > p { font-size: 15px; line-height: 1.6; color: var(--snow-dim); margin: 0 0 28px; max-width: 42ch; }
  .aa-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .aa-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--snow); }
  .aa-ck { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; color: var(--mint); background: var(--mint-wash); border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); }
  .aa-ck svg { width: 12px; height: 12px; }
  .aa-foot { display: flex; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
  .aa-stat strong { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--snow); letter-spacing: -0.02em; }
  .aa-stat span { font-size: 12px; color: var(--mute); }

  .auth-main { flex: 1; min-width: 0; display: grid; place-items: center; padding: 48px 40px; }
  .auth-main #app { width: 100%; max-width: 460px; }
  .card { box-shadow: none; }
}
@media (min-width: 1280px) {
  .auth-main #app { max-width: 480px; }
}

/* ===================================================================== */
/* PHONE (≤600px): full-bleed mobile-app layout matching /mobile/.        */
/* The shared onboarding HTML/JS is reused — only the layer below restyles */
/* it into a proper mobile screen: edge-to-edge, large touch targets,     */
/* 16px input text (no iOS auto-zoom), safe-area insets, no desktop card. */
/* Desktop (≥960px) split-screen above is untouched.                      */
/* ===================================================================== */
@media (max-width: 600px) {
  html, body { background: var(--bg); }
  /* full-screen stage, no desktop padding box; hide the desktop grid wash */
  .stage {
    min-height: 100svh; min-height: 100dvh;
    align-items: stretch; justify-content: stretch;
    padding: 0; background: var(--bg);
  }
  .stage-grid { display: none; }
  .auth-aside { display: none; }
  .auth-main { width: 100%; display: block; padding: 0; }
  .auth-main #app { width: 100%; max-width: none; }

  /* card becomes a full-bleed mobile screen: no frame, fills width + height,
     footer pushed to the bottom, safe-area padding so CTAs clear the
     home indicator / notch. */
  .card {
    width: 100%; max-width: none; min-height: 100svh; min-height: 100dvh;
    border: 0; border-radius: 0; box-shadow: none; background: var(--bg);
    display: flex; flex-direction: column;
    padding:
      calc(18px + env(safe-area-inset-top, 0px))
      max(20px, env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom, 0px))
      max(20px, env(safe-area-inset-left));
  }

  /* header: bigger brand + touch-sized control buttons */
  .ahead { margin-bottom: 26px; }
  .abrand .wm { font-size: 19px; }
  .iconbtn, .langtog { width: 40px; height: 40px; border-radius: 10px; }
  .iconbtn svg { width: 17px; height: 17px; }
  .astep { font-size: 12px; }

  /* typographic scale for small screens */
  h1.title { font-size: 27px; margin-bottom: 8px; }
  .subtitle { font-size: 15px; margin-bottom: 26px; }

  /* form fields: large touch targets + 16px text to stop iOS zoom-on-focus */
  .field { margin-bottom: 18px; }
  .field > label { font-size: 13px; margin-bottom: 9px; }
  .inp { border-radius: 12px; padding: 15px 16px; }
  .inp input { font-size: 16px; }
  .inp .eye svg, .inp .tail svg { width: 20px; height: 20px; }

  /* primary actions: tall, thumb-friendly buttons */
  .btn { padding: 17px; font-size: 16px; border-radius: 12px; }
  .btn-row { gap: 12px; }
  .social button { padding: 14px; font-size: 15px; border-radius: 12px; }
  .social svg { width: 20px; height: 20px; }
  .divider { margin: 22px 0; }

  /* agreement checkbox: bigger hit area + box */
  .check { padding: 15px 16px; font-size: 14px; border-radius: 12px; }
  .check .box { width: 24px; height: 24px; border-radius: 7px; }

  .foot-link { font-size: 15px; margin-top: 22px; }
  .backlink { font-size: 15px; margin-bottom: 18px; padding: 4px 0; }
  .backlink svg { width: 18px; height: 18px; }

  /* OTP: larger boxes, comfortable to tap */
  .otp { gap: 10px; margin-bottom: 18px; }
  .otp input { font-size: 26px; border-radius: 12px; }

  /* phone verification row */
  .phone-dial { padding: 14px; font-size: 15px; border-radius: 12px; }
  .otp-method button { padding: 13px; font-size: 14px; border-radius: 12px; }

  /* 2FA factor cards: taller rows + bigger icons */
  .factor { padding: 16px; border-radius: 14px; }
  .factor .fi { width: 44px; height: 44px; }
  .factor .fi svg { width: 22px; height: 22px; }
  .factor .ft strong { font-size: 15px; }

  /* KYC tiers + stepper sized for touch */
  .tier { padding: 16px; border-radius: 14px; }
  .stp { padding: 14px; }
  .stp .sc { width: 28px; height: 28px; }
  .stp .sl { font-size: 15px; }

  /* document uploader + doctype picker */
  .upload { padding: 32px 16px; border-radius: 14px; }
  .upload .ui { width: 52px; height: 52px; }
  .doctype button { padding: 14px 6px; font-size: 12px; border-radius: 12px; }
  .doctype svg { width: 22px; height: 22px; }

  /* dropdowns / calendar fill the width and sit above the keyboard nicely */
  .cal { width: 100%; }
  .dd-list { max-height: 50vh; }
  .dd-opt { padding: 13px; font-size: 15px; }

  /* milestone / status screens centered with breathing room */
  .milestone { padding: 24px 4px; }
  .status-icon { width: 72px; height: 72px; }
}

/* Tiny phones: trim side padding a touch so inputs don't feel cramped. */
@media (max-width: 360px) {
  .card {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* GIS ID-token official Google button host */
.social-host { display: flex; justify-content: center; align-items: center; min-height: 44px; width: 100%; }
.social-host > div { width: 100%; display: flex; justify-content: center; }

/* ── KYC polish (2026-06-30) ───────────────────────────────────────────── */
/* steps are the tappable action — make them obvious + readable (were low-contrast) */
.stp { cursor: pointer; border-radius: 10px; padding: 10px 8px; transition: background .12s; }
.stp:hover { background: var(--elevated); }
.stp .sl { color: var(--snow); font-weight: 500; }
.stp .sc { color: var(--snow-dim); }
.stp .schev { margin-left: auto; opacity: .55; }
/* status tier cards are NOT buttons — show default cursor so they don't look clickable */
.tier { cursor: default; }
/* native dial-code select matches the phone input */
select.phone-dial { -webkit-appearance: none; appearance: none; background: var(--bg); border: 1px solid var(--line);
  border-radius: 9px; color: var(--snow); font-family: var(--mono); font-size: 14px; padding: 0 28px 0 12px; height: 46px;
  min-width: 104px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
select.phone-dial option { background: var(--card); color: var(--snow); }
/* never let name/inputs overflow their rounded box */
.field input, .inp input, .inp { box-sizing: border-box; }
.inp input { padding: 0; }

/* 2FA alternate-method links on the code screen */
.twofa-alt { color: var(--mint, #00D68F); font-size: 13px; cursor: pointer; text-decoration: none; }
.twofa-alt:hover { text-decoration: underline; }

/* 2FA method selector — 3 tappable boxes (only the user's activated methods) */
.factor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.factor-grid .factor-box { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  background: var(--elevated); border: 1px solid var(--line); border-radius: 13px; padding: 16px 10px; cursor: pointer; color: var(--snow); transition: border-color .15s, transform .15s; }
.factor-grid .factor-box:hover { border-color: var(--mute); transform: translateY(-2px); }
.factor-grid .factor-box.primary { border-color: color-mix(in srgb, var(--mint) 45%, transparent); }
.factor-grid .factor-box .fi { width: 40px; height: 40px; border-radius: 11px; background: var(--surface); display: grid; place-items: center; color: var(--mint); }
.factor-grid .factor-box .fi svg { width: 20px; height: 20px; }
.factor-grid .factor-box strong { font-size: 13px; } .factor-grid .factor-box small { font-size: 10.5px; color: var(--mute); line-height: 1.3; }
@media (max-width: 420px) { .factor-grid { grid-template-columns: 1fr; } .factor-grid .factor-box { flex-direction: row; text-align: left; } }