/* =========================================================
   Salaree v2 — Confident fintech
   Vibrant accents on a disciplined system.
   One font (Inter), tabular numbers, predictable grids.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Base */
  --bg:        #FAF7F4;
  --bg-2:      #F2EFEB;
  --surface:   #FFFFFF;
  --surface-2: #F4F0EB;

  /* Ink — for hero dark cards */
  --ink:       #14151A;
  --ink-2:     #1F2027;
  --ink-3:     #2A2C36;

  /* Text */
  --text:        #14151A;
  --text-mute:   #5E5F66;
  --text-faint:  #9A9BA1;
  --on-ink:      #FAF7F4;
  --on-ink-mute: rgba(250,247,244,0.66);
  --on-ink-faint:rgba(250,247,244,0.42);

  /* Accents — disciplined use */
  --lime:       #D9F65A;
  --lime-deep:  #C2E03B;
  --lime-glow:  rgba(217,246,90,0.30);

  --coral:      #FF7A66;
  --coral-deep: #E15F4D;
  --coral-soft: #FFE5DE;

  --violet:     #5B47FF;
  --violet-soft:#EAE6FF;

  --mint:       #1FB87A;
  --mint-soft:  #D8F4E6;

  --amber:      #FFA826;
  --amber-soft: #FFEFD1;

  --rose:       #FF4D5E;
  --rose-soft:  #FFE0E3;

  /* Borders */
  --line:       #E8E3DD;
  --line-strong:#D4CEC4;
  --line-ink:   rgba(255,255,255,0.10);

  /* Radii */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(20,21,26,0.04);
  --sh-sm: 0 3px 10px rgba(20,21,26,0.05);
  --sh-md: 0 10px 28px rgba(20,21,26,0.08);
  --sh-lg: 0 22px 50px rgba(20,21,26,0.12);
  --sh-glow-lime: 0 12px 30px rgba(217,246,90,0.40);

  --mobile-max: 420px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Tabular numbers — used everywhere we show money or counts */
.num,
.tabular {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.015em;
}

/* ----- Review bar ----- */
.review-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: var(--ink);
  color: var(--on-ink);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 500;
  z-index: 9999;
}
.review-bar a { color: var(--lime); font-weight: 600; }
.review-bar .tag {
  background: var(--lime);
  color: var(--ink);
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
body.has-review { padding-top: 36px; }

/* ----- Phone stage ----- */
.phone-stage {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 12px 60px;
  background:
    radial-gradient(800px 500px at 80% -200px, var(--coral-soft), transparent 55%),
    radial-gradient(700px 600px at 0% 100%, var(--lime-glow), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.phone {
  width: 100%;
  max-width: var(--mobile-max);
  background: var(--bg);
  border-radius: 36px;
  box-shadow: var(--sh-lg);
  overflow: hidden;
  min-height: 780px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}
@media (max-width: 480px) {
  .phone-stage { padding: 0; }
  .phone { border-radius: 0; box-shadow: none; min-height: 100vh; border: none; }
}

/* =====================================================================
   Desktop split screen — onboarding & portal
   ---------------------------------------------------------------------
   Mobile-first: the left panel is hidden and the phone frame IS the UI.
   From 920px up, each screen becomes two panes:
     • onboarding  → sticky brand/trust panel  (.onb-brand)  +  the form
     • portal      → sticky left nav rail       (.app-rail)  +  the app
   The right pane is always the same phone markup, de-chromed into a
   centred column. Nothing changes on phones/tablets.
   ===================================================================== */
.onb-brand { display: none; }            /* onboarding brand panel — desktop only */
.app-rail  { display: none; }            /* portal nav rail        — desktop only */

/* Tablet: keep the phone frame but let it breathe a little wider */
@media (min-width: 481px) and (max-width: 919px) {
  .phone { max-width: 460px; }
}

/* The desktop split-screen needs a real pointing device, not just width.
   Width alone was enough to put a PHONE into the desktop layout: Chrome on
   Android remembers "Desktop site" per domain, so one toggle — or a return
   from a vendor journey into a tab that had it set — reports a ~980px
   viewport and the borrower gets the two-pane desktop UI on a handset.
   hover/pointer describe the INPUT, which desktop-site mode does not fake. */
@media (min-width: 920px) and (hover: hover) and (pointer: fine) {
  .phone-stage {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }

  /* ----- left: brand / trust panel ----- */
  .phone-stage .onb-brand {
    display: flex;
    flex: 0 0 42%;
    max-width: 560px;
    flex-direction: column;
    justify-content: space-between;
    gap: 44px;
    background: var(--ink);
    color: var(--on-ink);
    padding: 56px 60px 52px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow: hidden;
  }
  .onb-brand::before {
    content: ""; position: absolute; right: -90px; top: -70px;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, var(--lime-glow), transparent 70%);
  }
  .onb-brand::after {
    content: ""; position: absolute; left: -80px; bottom: -100px;
    width: 300px; height: 300px; border-radius: 50%;
    background: radial-gradient(circle, var(--coral-soft), transparent 72%);
  }
  .onb-brand > * { position: relative; }   /* sit above the glows */

  .onb-brand .ob-logo {
    display: flex; align-items: center; gap: 11px;
    font-weight: 800; font-size: 21px; letter-spacing: -0.025em;
  }
  .onb-brand .ob-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: var(--lime); color: var(--ink);
    display: grid; place-items: center;
    font-weight: 900; font-size: 16px; letter-spacing: -0.04em;
  }
  .onb-brand h2 {
    font-size: 42px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 900;
  }
  .onb-brand h2 .accent { color: var(--lime); }
  .onb-brand .ob-sub {
    margin-top: 18px; max-width: 380px;
    font-size: 15.5px; line-height: 1.6; color: var(--on-ink-mute);
  }
  .onb-brand .ob-trust { display: flex; flex-direction: column; gap: 15px; }
  .onb-brand .ob-trust li {
    display: flex; align-items: center; gap: 13px;
    font-size: 13.5px; font-weight: 500; color: var(--on-ink-mute);
  }
  .onb-brand .ob-trust .tick {
    width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
    background: rgba(217, 246, 90, 0.14); color: var(--lime);
    display: grid; place-items: center;
  }
  .onb-brand .ob-trust .tick svg { width: 13px; height: 13px; }

  /* ----- right pane: de-chrome the phone into a centred column ----- */
  /* Selectors are scoped to .phone-stage so they out-specify the component
     defaults (.cta-dock, …) defined later in this file.
     We cap & centre the PHONE itself (not each child) so cards that carry
     their own margins — the portal's loan card etc. — stay aligned. */
  .phone-stage .phone {
    flex: 0 0 auto;
    width: 480px;
    max-width: calc(100% - 32px);
    margin-left: auto;                 /* centre the column beside the panel */
    margin-right: auto;
    align-self: center;                /* and float it vertically */
    min-height: auto;
    padding: 40px 0;                   /* breathing room + scroll gutter on tall screens */
    border: none; box-shadow: none; border-radius: 0;
    background: transparent;
    justify-content: flex-start;
  }
  .phone-stage .appbar { padding-top: 8px; }
  .phone-stage .screen-body { flex: 0 0 auto; padding-bottom: 8px; }
  .phone-stage .cta-dock {           /* was absolute-docked to the phone */
    position: static;
    background: none;
    padding: 16px 22px 40px;
  }

  /* ===== Customer portal: bottom tab bar → left navigation rail ===== */
  .phone-stage .tabbar { display: none; }   /* hide the floating mobile tabs */

  .phone-stage .app-rail {
    display: flex;
    flex: 0 0 264px;
    flex-direction: column;
    gap: 26px;
    background: var(--ink);
    color: var(--on-ink);
    padding: 28px 18px 24px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
  }
  .app-rail .ar-brand {
    display: flex; align-items: center; gap: 11px;
    padding: 6px 12px;
    font-weight: 800; font-size: 20px; letter-spacing: -0.025em;
  }
  .app-rail .ar-mark {
    width: 32px; height: 32px; border-radius: 9px;
    background: var(--lime); color: var(--ink);
    display: grid; place-items: center;
    font-weight: 900; font-size: 15px; letter-spacing: -0.04em;
  }
  .app-rail .ar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .app-rail .ar-nav a,
  .app-rail .ar-link {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 14px; border-radius: 12px;
    font-size: 14.5px; font-weight: 600; color: var(--on-ink-mute);
  }
  .app-rail .ar-nav a svg,
  .app-rail .ar-link svg { width: 20px; height: 20px; flex-shrink: 0; }
  .app-rail .ar-nav a:hover,
  .app-rail .ar-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--on-ink); }
  .app-rail .ar-nav a.active { background: var(--lime); color: var(--ink); font-weight: 700; }
  .app-rail .ar-foot { display: flex; flex-direction: column; gap: 4px; }
  .app-rail .ar-link { font-size: 13.5px; }
  .app-rail .ar-user {
    display: flex; align-items: center; gap: 11px;
    margin-top: 10px; padding: 14px 14px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .app-rail .ar-av {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: rgba(217, 246, 90, 0.16); color: var(--lime);
    display: grid; place-items: center; font-weight: 800; font-size: 13px;
  }
  .app-rail .ar-user .nm { font-size: 13.5px; font-weight: 700; color: var(--on-ink); }
  .app-rail .ar-user .rl { font-size: 11.5px; color: var(--on-ink-mute); margin-top: 1px; font-variant-numeric: tabular-nums; }
}
/* ----- App bar ----- */
.appbar {
  display: flex; align-items: center; gap: 12px;
  padding: 4px 18px 6px;
  min-height: 48px;
}
.appbar .back {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--on-ink);
  border: none;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.appbar .back svg { width: 16px; height: 16px; }
.appbar .title-block { flex: 1; }
.appbar h1 { font-size: 15px; font-weight: 700; letter-spacing: -0.015em; }
.appbar .icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--text);
}

/* ----- Progress ----- */
.progress {
  height: 5px;
  background: var(--bg-2);
  border-radius: var(--r-full);
  overflow: hidden;
  margin: 0 18px;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--ink);
  border-radius: var(--r-full);
}

/* ----- Screen body ----- */
.screen { flex: 1; display: flex; flex-direction: column; }
/* The bottom padding must clear the absolutely-docked CTA. --dock-h is measured
   at runtime (OnboardingLayout) because the dock height depends on how many
   buttons it holds and how the fineprint wraps — which differs across the
   eleven languages. 130px is only the fallback for the first paint; when it was
   the ONLY value, a taller dock overlapped the last line of content and the
   gradient (transparent at its top) let that text show through the button. */
.screen-body { flex: 1; padding: 22px 22px var(--dock-h, 130px); }

/* ----- Type scale ----- */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: inline-flex; align-items: center; gap: 6px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.h-mega    { font-size: 56px; line-height: 0.98; letter-spacing: -0.035em; font-weight: 900; }
.h-display { font-size: 30px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; }
.h-page    { font-size: 24px; line-height: 1.12; letter-spacing: -0.022em; font-weight: 800; }
.h-section { font-size: 16px; font-weight: 800; letter-spacing: -0.018em; }
.lead      { font-size: 14.5px; color: var(--text-mute); margin-top: 10px; line-height: 1.55; }
.mute      { color: var(--text-mute); }
.faint     { color: var(--text-faint); }

/* Big amount — always Inter, always tabular */
.amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}
.amount .rs {
  font-weight: 700;
  opacity: 0.55;
  letter-spacing: -0.02em;
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 24px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 15px;
  border: 1.5px solid transparent;
  transition: transform .08s ease, background .15s ease, box-shadow .2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-ink {
  background: var(--ink);
  color: var(--on-ink);
}
.btn-ink:hover { background: var(--ink-2); }
.btn-lime {
  background: var(--lime);
  color: var(--ink);
}
.btn-lime:hover { background: var(--lime-deep); }
.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--line-strong); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; font-size: 13px; padding: 0 16px; }
.btn-lg { height: 58px; font-size: 16px; }
.btn[disabled], .btn.is-disabled { opacity: 0.5; pointer-events: none; }

/* CTA dock */
.cta-dock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 22px 22px;
  background: linear-gradient(180deg, rgba(250,247,244,0) 0%, var(--bg) 35%);
}
.cta-dock .fineprint {
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}

/* ----- Inputs ----- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-mute);
}
.input {
  height: 56px;
  padding: 0 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-size: 16px;
  color: var(--text);
  font-weight: 600;
  transition: border .15s ease, box-shadow .15s ease;
  width: 100%;
  letter-spacing: -0.005em;
}
.input::placeholder { color: var(--text-faint); font-weight: 400; }
.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(20,21,26,0.06);
}
.input.with-prefix { padding-left: 54px; }
.input-wrap { position: relative; }
.input-wrap .prefix {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  color: var(--text-mute);
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
}
.input-wrap .suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 700;
}
.helper { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.helper.ok    { color: var(--mint); font-weight: 600; }
.helper.error { color: var(--rose); }

/* OTP boxes — Inter tabular */
.otp-row {
  display: flex; gap: 10px; justify-content: space-between; align-items: center;
}
.otp-box {
  flex: 0 1 50px;
  width: 50px; height: 56px;
  padding: 0;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  background: var(--surface);
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.otp-box:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(20,21,26,0.06);
  background: var(--bg-2);
}
.otp-box.filled { background: var(--ink); color: var(--lime); border-color: var(--ink); }

/* ----- Cards ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-soft {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-lg);
  padding: 18px;
}

/* Ink hero card — the bold money surface */
.ink-card {
  position: relative;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
}
.ink-card.has-glow::before {
  content: "";
  position: absolute;
  width: 240px; height: 240px;
  right: -80px; top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime-glow), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.ink-card .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-ink-mute);
  font-weight: 700;
}

/* Key-value list */
.kv-list { display: flex; flex-direction: column; }
.kv-list .kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 0;
  font-size: 14px;
}
.kv-list .kv + .kv { border-top: 1px dashed var(--line); }
.kv-list .k { color: var(--text-mute); font-weight: 500; }
.kv-list .v { font-weight: 700; }
.kv-list.on-dark .kv + .kv { border-color: var(--line-ink); }
.kv-list.on-dark .k { color: var(--on-ink-mute); }
.kv-list.on-dark .v { color: var(--on-ink); }

/* ----- Stickers ----- */
.sticker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.sticker-lime  { background: var(--lime); color: var(--ink); }
.sticker-coral { background: var(--coral); color: #fff; }
.sticker-ink   { background: var(--ink); color: var(--on-ink); }
.sticker-mint  { background: var(--mint-soft); color: var(--mint); }
.sticker-violet{ background: var(--violet-soft); color: var(--violet); }
.sticker-amber { background: var(--amber-soft); color: #B57500; }
.sticker-rose  { background: var(--rose-soft); color: var(--rose); }
.sticker-soft  { background: var(--bg-2); color: var(--text-mute); }
.sticker-outline { background: transparent; color: var(--on-ink); border: 1px solid var(--line-ink); }
.sticker-secure { background: var(--surface); color: var(--text); border: 1px solid var(--line); }

/* Trust strip — used on money screens */
.trust-strip {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  color: var(--text-mute);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.trust-strip svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--mint); }

/* ----- Edge state patterns ----- */

/* Result icon — large coloured circle for outcome screens */
.result-icon {
  width: 88px; height: 88px;
  margin: 8px auto 24px;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  position: relative;
  isolation: isolate;
}
.result-icon::before {
  content: ""; position: absolute; inset: -10px;
  border-radius: 50%; opacity: 0.35; z-index: -1;
  filter: blur(2px);
}
.result-icon svg { width: 38px; height: 38px; }
.result-icon.is-error   { color: var(--rose); }
.result-icon.is-error::before   { background: var(--rose); }
.result-icon.is-warn    { color: var(--amber); }
.result-icon.is-warn::before    { background: var(--amber); }
.result-icon.is-info    { color: var(--violet); }
.result-icon.is-info::before    { background: var(--violet); }
.result-icon.is-success { color: var(--mint); }
.result-icon.is-success::before { background: var(--mint); }
.result-icon.is-lime    { color: var(--lime); }
.result-icon.is-lime::before    { background: var(--lime); }

/* Inline banner — error/warn/info/success message within a form */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  line-height: 1.55;
}
.banner .ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0; color: #fff;
}
.banner .ico svg { width: 12px; height: 12px; }
.banner .t { font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.banner .s { color: var(--text-mute); margin-top: 2px; }
.banner-error   { background: var(--rose-soft); }
.banner-error .ico   { background: var(--rose); }
.banner-warn    { background: var(--amber-soft); }
.banner-warn .ico    { background: var(--amber); color: var(--text); }
.banner-info    { background: var(--violet-soft); }
.banner-info .ico    { background: var(--violet); }
.banner-success { background: var(--mint-soft); }
.banner-success .ico { background: var(--mint); }

/* Support strip — contact card */
.support-strip {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.support-strip .ico {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--bg-2); color: var(--text);
  display: grid; place-items: center; flex-shrink: 0;
}
.support-strip .body { flex: 1; min-width: 0; }
.support-strip .body .t { font-weight: 700; font-size: 13.5px; letter-spacing: -0.01em; }
.support-strip .body .s { font-size: 12px; color: var(--text-mute); margin-top: 2px; }
.support-strip a { font-weight: 700; font-size: 13px; }

/* OTP error variant — rose-tinted boxes */
.otp-box.error {
  border-color: var(--rose);
  background: var(--rose-soft);
  color: var(--rose);
}

/* ----- Choice rows ----- */
.choice {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: all .15s ease;
}
.choice + .choice { margin-top: 10px; }
.choice .radio {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.choice.selected {
  border-color: var(--ink);
  background: var(--bg-2);
}
.choice.selected .radio { border-color: var(--ink); background: var(--ink); }
.choice.selected .radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lime);
}
.choice .label { flex: 1; }
.choice .title { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.choice .sub { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }

/* ----- Slider ----- */
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 8px;
  background: var(--bg-2);
  border-radius: var(--r-full);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  border: 5px solid var(--lime);
  cursor: pointer;
  box-shadow: var(--sh-md);
}
.slider::-moz-range-thumb {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink);
  border: 5px solid var(--lime);
  cursor: pointer;
}

/* ----- Tab bar -----
   FIXED, not absolute. Absolute anchors to the nearest positioned ancestor —
   .phone — which grows with its content, so on any page taller than the
   viewport the bar sat at the bottom of the DOCUMENT and you had to scroll to
   reach it. That was invisible while the app was mostly short screens and
   obvious the moment it ran as an installed PWA with no browser chrome.

   Centred on the viewport and clamped to the phone width, because fixed
   positioning escapes .phone's max-width: left/right:16px would stretch the
   pill across a tablet.

   The Capacitor shell overrides all of this back to a static flex child
   (`html.native .tabbar` in app.css) — there the whole screen is a fixed
   flexbox, so the bar is pinned by layout and needs no positioning at all. */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 32px), calc(var(--mobile-max) - 32px));
  /* Clear of the iOS home indicator / Android gesture bar in standalone mode,
     where there is no browser UI underneath to absorb it. */
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-full);
  padding: 8px;
  box-shadow: var(--sh-lg);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0;
  font-size: 10.5px; font-weight: 600;
  color: var(--on-ink-mute);
  border-radius: var(--r-full);
}
.tabbar a.active {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
}
.tabbar svg { width: 20px; height: 20px; }

/* ----- Spinner / pulse ----- */
.spin {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 5px solid var(--bg-2);
  border-top-color: var(--ink);
  animation: spin 0.9s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.dot-live {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(31,184,122,0.5);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(31,184,122,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(31,184,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(31,184,122,0); }
}

/* ----- Utility ----- */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.text-center { text-align: center; }
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.divider.on-dark { background: var(--line-ink); }