/* ============================================================
   ENVOY — Components (light mode, iOS)
   Depends on envoy-tokens.css. Mirrors the Figma components in
   Envoy-MVP (Big Button, Small Button, Amount Chip, Text Link)
   and the shared patterns used across the 26 screens. Grouped by
   component so any screen file can link tokens + this sheet.
   Rules: no shorthand for border/margin/padding/font/background,
   flexbox only (no grid/gap), px line-heights, no backdrop-filter.
   ============================================================ */

/* ---------- Reset ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; background-color: #E9E9E9; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border-width: 0; background-color: transparent; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; }
input { outline-width: 0; }
svg { display: block; }

/* ---------- Stage (desktop wrapper — remove in RN) ---------- */
.stage {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background-color: #E9E9E9;
  padding-top: 32px; padding-bottom: 32px; padding-left: 16px; padding-right: 16px;
  font-family: var(--font-ui);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}
.device {
  width: var(--device-w); height: var(--device-h);
  border-radius: var(--device-radius);
  background-color: var(--bg-page);
  position: relative; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.10);
}

/* ---------- Screen shell ---------- */
.screen {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: none; flex-direction: column;
  background-color: var(--bg-page);
  overflow: hidden;
}
.screen.is-active { display: flex; }
.screen.is-under  { display: flex; }   /* kept visible beneath an expanding/collapsing screen */
.screen.anim-fade   { animation: screenFade var(--dur-base) var(--ease-ios); }
.screen.anim-push   { animation: screenPush var(--dur-base) var(--ease-ios); }
.screen.anim-pop    { animation: screenPop  var(--dur-base) var(--ease-ios); }
.screen.anim-emerge { animation: screenEmerge var(--dur-slow) var(--ease-out); }
.screen.anim-sheet  { animation: screenSheet var(--dur-slow) var(--ease-out); }
@keyframes screenSheet  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes screenFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes screenPush   { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes screenPop    { from { transform: translateX(-24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes screenEmerge { from { transform: translateY(120px) scale(0.94); opacity: 0; border-radius: var(--radius-3xl); } to { transform: translateY(0) scale(1); opacity: 1; } }

.screen__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none;
  display: flex; flex-direction: column;
}
.screen__scroll::-webkit-scrollbar { display: none; }
.screen__scroll > * { flex-shrink: 0; }
.safe-top    { height: var(--safe-top); flex-shrink: 0; }
.safe-bottom { height: var(--safe-bottom); flex-shrink: 0; }
.gutter { padding-left: var(--gutter); padding-right: var(--gutter); }
.grow { flex: 1; }

/* ---------- Status bar (Dynamic Island) ---------- */
.status-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 400;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-left: 32px; padding-right: 28px;
  font-family: var(--font-ui); font-size: var(--text-body-lg); line-height: 22px; font-weight: var(--weight-semibold);
  color: var(--text-primary); pointer-events: none;
}
.status-bar--light { color: var(--text-on-dark); }
.status-bar__island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 126px; height: 37px; background-color: #000; border-radius: var(--radius-full);
}
.status-bar__time { min-width: 54px; letter-spacing: -0.2px; }
.status-bar--crumb .status-bar__time { visibility: hidden; }
.status-bar__icons { display: flex; flex-direction: row; align-items: center; }
.status-bar__icons svg { margin-left: 6px; }

/* ---------- Home indicator ---------- */
.home-indicator {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--safe-bottom); z-index: 400;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; pointer-events: none;
}
.home-indicator::after { content: ''; width: 139px; height: 5px; border-radius: var(--radius-full); background-color: var(--text-primary); opacity: 0.9; }

/* ---------- Typography — one class per Figma text style ---------- */
.t-display        { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-regular); letter-spacing: var(--tracking-display); color: var(--bg-ink); }
.t-display-hero   { font-family: var(--font-display); font-size: var(--text-display-hero); line-height: var(--leading-display-hero); font-weight: var(--weight-regular); color: var(--bg-ink); }
.t-amount-display { font-family: var(--font-display); font-size: var(--text-display-amount); line-height: var(--leading-display-amount); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-amount         { font-family: var(--font-display); font-size: var(--text-amount); line-height: var(--leading-amount); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-amount-sm      { font-family: var(--font-display); font-size: var(--text-amount-sm); line-height: var(--leading-amount-sm); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-title-1  { font-size: var(--text-title-1); line-height: var(--leading-title-1); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-title-2  { font-size: var(--text-title-2); line-height: var(--leading-title-2); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-title-3  { font-size: var(--text-title-3); line-height: var(--leading-title-3); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-body-lg  { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-body     { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-body-sm  { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-caption  { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-regular); color: var(--text-secondary); }
.t-micro    { font-size: var(--text-micro); line-height: var(--leading-micro); font-weight: var(--weight-regular); color: var(--text-tertiary); }
.t-medium   { font-weight: var(--weight-medium); }
.t-semibold { font-weight: var(--weight-semibold); }
.t-button-lg { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-button); color: var(--text-primary); }
.t-button    { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.t-button-sm { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-semibold); color: var(--text-primary); }
.t-label        { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--text-tertiary); }
.t-mono-caption { font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-mono-micro   { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); font-weight: var(--weight-regular); color: var(--text-tertiary); }
.t-mono-title   { font-family: var(--font-mono); font-size: var(--text-title-3); line-height: var(--leading-title-3); font-weight: var(--weight-regular); color: var(--text-primary); }
.t-link      { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-link); }
.t-center    { text-align: center; }
.t-primary   { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary  { color: var(--text-tertiary); }
.t-success   { color: var(--text-success); }

/* Section label above grouped lists (Figma: Label / Section) */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--text-tertiary);
  padding-left: var(--space-2xs); margin-bottom: 8px; margin-top: var(--space-3xl);
}
.eyebrow:first-child { margin-top: 0; }

/* ---------- Icon wrapper (library-agnostic) ---------- */
.ic { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; width: 1em; height: 1em; flex-shrink: 0; }
.ic iconify-icon { display: block; width: 1em; height: 1em; }
.ic--sm { font-size: 16px; } .ic--md { font-size: 20px; } .ic--lg { font-size: 24px; } .ic--xl { font-size: 32px; }

/* ---------- Nav bar / back pill ---------- */
.navbar {
  height: var(--navbar-h); flex-shrink: 0;
  display: flex; flex-direction: row; align-items: center;
  padding-left: var(--gutter); padding-right: var(--gutter);
  position: relative;
}
.navbar__title { position: absolute; left: 72px; right: 72px; text-align: center; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: -0.2px; }
.navbar__title--left { position: static; text-align: left; margin-left: 0; font-size: var(--text-title-3); line-height: var(--leading-title-3); }
.navbar__right { margin-left: auto; display: flex; flex-direction: row; align-items: center; }
.back-pill, .icon-pill {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background-color: var(--bg-primary); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-pill), 0 0 0 1px var(--bg-subtle);
  flex-shrink: 0;
}
.back-pill:active, .icon-pill:active { transform: scale(0.94); }

/* ---------- Buttons (Figma: Big Button · Small Button) ---------- */
.btn {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  height: 56px; padding-left: var(--space-2xl); padding-right: var(--space-2xl);
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-button); transition: transform var(--dur-fast) var(--ease-ios), opacity var(--dur-fast);
  flex-shrink: 0; white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn--full { width: 100%; }
.btn--primary   { background-color: var(--bg-dark); color: var(--text-on-dark); box-shadow: var(--shadow-button-inset); }   /* Style=Primary     */
.btn--secondary { background-color: var(--bg-primary); color: var(--text-primary); box-shadow: var(--shadow-button-inset); } /* Style=Secondary   */
.btn--tertiary  { background-color: transparent; color: var(--text-primary); }                                              /* Style=Ghost       */
.btn--danger    { background-color: var(--tint-red); color: var(--text-destructive); box-shadow: var(--shadow-button-inset); } /* Style=Destructive */
.btn--sm { height: 40px; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); letter-spacing: 0; border-radius: var(--radius-xl); padding-left: var(--space-xl); padding-right: var(--space-xl); }
.btn--sm.btn--secondary { background-color: var(--bg-subtle); box-shadow: none; }
/* Small Button: Filled (primary) · Subtle (secondary) */
.btn--xs { height: 32px; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); border-radius: var(--radius-xs); padding-left: var(--space-lg); padding-right: var(--space-lg); }
.btn--xs.btn--secondary { background-color: var(--bg-subtle); box-shadow: none; }
.btn[disabled], .btn.is-disabled { opacity: 0.32; pointer-events: none; }
.btn .ic { margin-right: 8px; }
.btn .ic--trail { margin-right: 0; margin-left: 8px; }

/* Amount chip (Figma: Amount Chip · Selected=True/False) */
.chips { display: flex; flex-direction: row; justify-content: center; }
.chip { height: 36px; padding-left: var(--space-md); padding-right: var(--space-md); border-radius: var(--radius-md); background-color: var(--bg-primary); box-shadow: 0 0 0 1px var(--border-default); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-primary); display: flex; align-items: center; margin-left: var(--space-2xs); margin-right: var(--space-2xs); }
.chip.is-active { background-color: var(--bg-dark); color: var(--text-on-dark); box-shadow: none; }

/* Round CTA (Revolut-style action) */
.round-cta { display: flex; flex-direction: column; align-items: center; width: 92px; }
.round-cta__circle {
  width: 60px; height: 60px; border-radius: var(--radius-full);
  background-color: var(--bg-primary); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); position: relative;
}
.round-cta:active .round-cta__circle { transform: scale(0.94); }
.round-cta__label { margin-top: 8px; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-primary); }
.round-cta.is-disabled { opacity: 0.4; pointer-events: none; }
/* Ring IS the button's circumference: track = full circle, fill starts at 12 o'clock */
.round-cta__ring { position: absolute; top: 0; left: 0; width: 60px; height: 60px; }

/* ---------- Fields (underline) ---------- */
.field { display: flex; flex-direction: column; width: 100%; }
.field__label { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-2xs); }
.field__row {
  display: flex; flex-direction: row; align-items: center;
  height: 52px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-default);
}
.field.is-focus .field__row { border-bottom-color: var(--text-primary); }
.field.is-error .field__row { border-bottom-color: var(--text-destructive); }
.field__prefix { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-primary); margin-right: var(--space-md); padding-right: var(--space-md); border-right-width: 1px; border-right-style: solid; border-right-color: var(--border-muted); }
.field__input { flex: 1; min-width: 0; border-width: 0; background-color: transparent; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-primary); padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }
.field__input::placeholder { color: var(--text-muted); }
.field__input--mono { font-family: var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.field__help { font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--text-tertiary); margin-top: 8px; }
.field.is-error .field__help { color: var(--text-destructive); }
.field + .field { margin-top: var(--space-md); }

/* Boxed field (limits) */
.field-box {
  display: flex; flex-direction: row; align-items: center;
  height: 44px; width: 132px; padding-left: var(--space-md); padding-right: var(--space-md);
  border-width: 1px; border-style: solid; border-color: var(--border-default);
  border-radius: var(--radius-xs); background-color: var(--bg-primary);
}
.field-box__prefix { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-tertiary); margin-right: 8px; }
.field-box__input { flex: 1; min-width: 0; border-width: 0; background-color: transparent; text-align: right; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-medium); color: var(--text-primary); padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }
.field-box.is-focus { border-color: var(--text-primary); }

/* Select (dropdown row) */
.select-row { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 52px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: var(--border-default); font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-tertiary); }
.select-row.has-value { color: var(--text-primary); }
.select-row .ic { color: var(--text-tertiary); }

/* ---------- OTP ---------- */
.otp { display: flex; flex-direction: row; justify-content: space-between; padding-left: 8px; padding-right: 8px; }
.otp__cell {
  width: 51px; height: 62px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-medium); color: var(--text-primary);
  border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: var(--border-muted);
}
.otp__cell.is-filled, .otp__cell.is-current { border-bottom-color: var(--text-primary); }
.otp__cell.is-error { border-bottom-color: var(--text-destructive); color: var(--text-destructive); }

/* ---------- Segmented control (UISegmentedControl) ---------- */
.segmented { display: flex; flex-direction: row; background-color: var(--ios-segment-bg); border-radius: var(--radius-lg); padding-top: 2px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; height: 36px; }
.segmented__item { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-primary); transition: background-color var(--dur-fast); }
.segmented__item.is-active { background-color: var(--bg-primary); box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04); font-weight: var(--weight-semibold); }

/* ---------- Toggle (UISwitch) ---------- */
.toggle { width: 51px; height: 31px; border-radius: var(--radius-full); background-color: var(--ios-toggle-off); position: relative; flex-shrink: 0; transition: background-color var(--dur-base) var(--ease-ios); }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: var(--radius-full); background-color: var(--bg-primary); box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 3px 1px rgba(0,0,0,0.06); transition: transform var(--dur-base) var(--ease-ios); }
.toggle.is-on { background-color: var(--accent-green); }
.toggle.is-on::after { transform: translateX(20px); }

/* ---------- Radio ---------- */
.radio { width: 22px; height: 22px; border-radius: var(--radius-full); border-width: 1.5px; border-style: solid; border-color: var(--border-default); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.radio.is-on { border-color: var(--text-primary); background-color: var(--text-primary); }
.radio.is-on::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background-color: var(--bg-primary); }

/* ---------- Pills / badges ---------- */
.pill { display: inline-flex; flex-direction: row; align-items: center; height: 24px; padding-left: 8px; padding-right: 8px; border-radius: var(--radius-full); font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); white-space: nowrap; }
.pill .ic { font-size: 12px; margin-right: var(--space-2xs); }
.pill .dot { width: 6px; height: 6px; margin-right: var(--space-xs); }
.pill--neutral { background-color: var(--bg-subtle); color: var(--text-secondary); font-size: var(--text-micro); line-height: var(--leading-micro); }
.pill--success { background-color: var(--tint-green); color: var(--text-success); }
.pill--error   { background-color: var(--tint-red); color: var(--text-destructive); }
.pill--inverse { background-color: var(--bg-dark); color: var(--text-on-dark); font-size: var(--text-micro); line-height: var(--leading-micro); }
.dot { width: 8px; height: 8px; border-radius: var(--radius-full); background-color: var(--accent-green); flex-shrink: 0; }

/* ---------- Agent pill (stacked agent logos + status) ---------- */
.agent-pill { display: inline-flex; flex-direction: row; align-items: center; height: 38px; padding-top: 4px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; border-radius: 12px; background-color: var(--bg-primary); box-shadow: 0 0 0 1px var(--bg-subtle); }
.agent-pill__logos { display: flex; flex-direction: row; align-items: center; }
.agent-pill__logo { width: 28px; height: 28px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-on-dark); box-shadow: 0 0 0 1px var(--bg-primary), 0 1px 3px rgba(0,0,0,0.25); flex-shrink: 0; }
.agent-pill__logo + .agent-pill__logo { margin-left: -13px; }
.agent-pill__name { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-semibold); color: var(--text-primary); margin-left: var(--space-sm); }
.agent-pill__status { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); margin-left: 5px; }
.agent-pill .ic { color: var(--text-tertiary); margin-left: var(--space-sm); font-size: 14px; }

/* Agent logo tile — agents are squircles, humans/merchants circles */
.agent-logo { width: 44px; height: 44px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--text-on-dark); font-size: 20px; flex-shrink: 0; }
.agent-logo--sm { width: 32px; height: 32px; font-size: 15px; border-radius: var(--radius-lg); }
.agent-logo--lg { width: 72px; height: 72px; font-size: 34px; border-radius: 22px; }
.agent-logo--claude   { background-color: var(--accent-warm); }
.agent-logo--chatgpt  { background-color: #10A37F; }
.agent-logo--grok     { background-color: var(--bg-ink); }
.agent-logo--instinct { background-color: #7C5CFC; }

/* ---------- Cards ---------- */
.card { background-color: var(--bg-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding-top: var(--space-xl); padding-bottom: var(--space-xl); padding-left: var(--space-xl); padding-right: var(--space-xl); }
.card--flat { box-shadow: none; }

/* ---------- Grouped list (UITableView inset grouped) ---------- */
.list { background-color: var(--bg-primary); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
.list--flat { box-shadow: none; }
.list__row { display: flex; flex-direction: row; align-items: center; min-height: 56px; padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-xl); padding-right: var(--space-xl); position: relative; background-color: var(--bg-primary); }
.list__row + .list__row::before { content: ''; position: absolute; top: 0; left: var(--space-xl); right: var(--space-xl); height: 1px; background-color: var(--ios-separator); }
.list__row--tappable:active { background-color: var(--bg-subtle); }
.list__icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-right: var(--space-md); flex-shrink: 0; color: var(--text-on-dark); font-size: 17px; }
.list__icon--blue   { background-color: var(--accent-blue); }
.list__icon--warm   { background-color: var(--accent-warm); }
.list__icon--ink    { background-color: var(--bg-dark); }
.list__icon--green  { background-color: var(--accent-green); }
.list__icon--red    { background-color: var(--accent-red); }
.list__icon--tint   { background-color: var(--bg-subtle); color: var(--text-primary); }
.list__body { flex: 1; min-width: 0; }
.list__title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--text-primary); }
.list__title--regular { font-weight: var(--weight-regular); }
.list__title--danger { color: var(--text-destructive); }
.list__sub { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); margin-top: 2px; }
.list__mono { font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--text-tertiary); margin-top: var(--space-2xs); }
.list__right { display: flex; flex-direction: row; align-items: center; margin-left: var(--space-md); color: var(--text-tertiary); font-size: var(--text-caption); line-height: var(--leading-caption); }
.list__right .ic { color: var(--border-light); font-size: 18px; margin-left: var(--space-2xs); }
/* Plain icon (no tile) — Account / Card controls direction */
.list__picon { width: 26px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--text-primary); margin-right: var(--space-md); flex-shrink: 0; }
.list__picon--red { color: var(--text-destructive); }
.list__picon--muted { color: var(--text-tertiary); }

/* Key / value row (transaction detail, profile) */
.kv { display: flex; flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-xl); padding-right: var(--space-xl); position: relative; }
.kv + .kv::before { content: ''; position: absolute; top: 0; left: var(--space-xl); right: 0; height: 1px; background-color: var(--ios-separator); }
.kv__k { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--text-secondary); }
.kv__v { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-medium); color: var(--text-primary); text-align: right; display: flex; flex-direction: row; align-items: center; }
.kv__v .ic { margin-left: var(--space-xs); color: var(--text-tertiary); font-size: 16px; }

/* Limit row (limits, agent detail) */
.limit-row { display: flex; flex-direction: row; align-items: center; padding-top: var(--space-xl); padding-bottom: var(--space-xl); padding-left: var(--space-xl); padding-right: var(--space-xl); position: relative; }
.limit-row + .limit-row::before, .list__row + .limit-row::before { content: ''; position: absolute; top: 0; left: var(--space-xl); right: var(--space-xl); height: 1px; background-color: var(--ios-separator); }
.limit-row__body { flex: 1; min-width: 0; }
.limit-row__title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--text-primary); }
.limit-row__title--regular { font-weight: var(--weight-regular); }

/* ---------- Banner ---------- */
.banner { display: flex; flex-direction: row; align-items: flex-start; padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-xl); padding-right: var(--space-xl); border-radius: var(--radius-md); border-width: 1px; border-style: solid; }
.banner .ic { margin-right: var(--space-md); flex-shrink: 0; margin-top: 1px; }
.banner__text { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--text-primary); }
.banner--warning { background-color: var(--tint-warm); border-color: rgba(217,119,87,0.55); }
.banner--warning .ic { color: var(--accent-warm); }
.banner--info { background-color: var(--tint-blue); border-color: var(--accent-blue); }
.banner--info .ic { color: var(--text-link); }

/* ---------- Notification card (carousel) ----------
   Anatomy: [asset · title · amount] → [meta (fills) · small CTA, bottom-right].
   Kinds: pre-purchase approval, post-purchase success/failure, reconnect. */
.notif { width: 330px; border-radius: var(--radius-md); padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-md); padding-right: var(--space-md); display: flex; flex-direction: column;
  background-color: var(--bg-primary); box-shadow: 0 0 0 1px var(--bg-subtle), var(--shadow-card); transform-origin: left center; will-change: transform; }
.notif__hd { display: flex; flex-direction: row; align-items: center; margin-bottom: 8px; }
.notif__asset { width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; margin-right: 8px; font-size: 17px; }
.notif__asset--green { background-color: var(--tint-green); color: var(--text-success); }
.notif__asset--red { background-color: var(--tint-red); color: var(--text-destructive); }
.notif__asset .agent-logo { width: 28px; height: 28px; border-radius: 9px; font-size: 13px; }
.notif__badge { position: absolute; right: -4px; bottom: -4px; width: 14px; height: 14px; border-radius: 5px; background-color: var(--accent-red); color: var(--text-on-dark); display: flex; align-items: center; justify-content: center; font-size: 8px; box-shadow: 0 0 0 2px var(--bg-primary); }
.notif__badge--warn { background-color: var(--accent-warm); }
.notif__title { flex: 1; min-width: 0; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }
.notif__amount { font-family: var(--font-display); font-size: var(--text-amount-sm); line-height: var(--leading-amount-sm); color: var(--text-primary); margin-left: 8px; white-space: nowrap; }
.notif__main { display: flex; flex-direction: row; align-items: flex-end; }
.notif__meta { flex: 1; min-width: 0; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); }
.notif__cta { margin-left: var(--space-xl); flex-shrink: 0; }
/* Carousel depth: off-screen cards tilt away, straighten as they arrive */
.carousel--3d { perspective: 900px; perspective-origin: 20% 50%; }
.carousel { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x mandatory; padding-left: var(--gutter); padding-right: var(--gutter); }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex-shrink: 0; margin-right: var(--space-md); }
.carousel > *:last-child { margin-right: 0; }

/* ---------- Transaction row ---------- */
.txn { display: flex; flex-direction: row; align-items: center; padding-top: var(--space-md); padding-bottom: var(--space-md); padding-left: var(--space-xl); padding-right: var(--space-xl); position: relative; background-color: var(--bg-primary); }
.txn + .txn::before { content: ''; position: absolute; top: 0; left: var(--space-xl); right: var(--space-xl); height: 1px; background-color: var(--ios-separator); }
.txn:active { background-color: var(--bg-subtle); }
/* Main icon: circle. Agent badge: squircle. */
.txn__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-semibold); color: var(--text-primary); margin-right: var(--space-md); position: relative; flex-shrink: 0; }
.txn__avatar--in { background-color: var(--tint-green); color: var(--text-success); }
.txn__badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-on-dark); font-size: 9px; box-shadow: 0 0 0 2px var(--bg-primary); }
.txn__badge--user { background-color: var(--text-secondary); }
.txn__body { flex: 1; min-width: 0; }
.txn__title { font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; }
.txn__meta { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); margin-top: 1px; display: flex; flex-direction: row; align-items: baseline; }
.txn__meta-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.txn__link { flex-shrink: 0; color: var(--text-link); font-weight: var(--weight-medium); margin-left: 8px; white-space: nowrap; cursor: pointer; }
.txn > .col { align-self: flex-start; margin-left: var(--space-md); padding-top: 2px; }
.txn__amount { font-family: var(--font-display); font-size: var(--text-amount); line-height: var(--leading-amount); font-weight: var(--weight-regular); color: var(--text-primary); white-space: nowrap; }
.txn__amount--in { color: var(--text-success); }
.txn__status { font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--text-tertiary); text-align: right; }
.day-header { font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-secondary); padding-left: var(--space-2xs); margin-top: var(--space-2xl); margin-bottom: 8px; }

/* ---------- Floating tab bar (Home · Transactions) ---------- */
.tabbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 46px; z-index: 350; display: flex; flex-direction: row; align-items: center; height: var(--tabbar-h); padding-top: 5px; padding-bottom: 5px; padding-left: 4px; padding-right: 4px; border-radius: var(--radius-full); background-color: var(--bg-primary); box-shadow: var(--shadow-float); }
.tabbar.is-hidden { display: none; }
.tabbar__item { width: 64px; height: 52px; border-radius: var(--radius-full); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-tertiary); transition: background-color var(--dur-fast), color var(--dur-fast); }
.tabbar__item .ic { font-size: 24px; }
.tabbar__item.is-active { background-color: var(--bg-dark); color: var(--text-on-dark); }
.tabbar__item:active { transform: scale(0.94); }

/* Progressive blur behind the tab bar.
   RN: expo-blur BlurView inside @react-native-masked-view/masked-view with a
   LinearGradient mask (transparent → black). */
.bottom-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 340; pointer-events: none;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 45%, #000 80%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 45%, #000 80%); }
.bottom-fade.is-hidden { display: none; }

/* ---------- Bottom sheet ---------- */
.scrim { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--ios-scrim); z-index: 500; display: none; animation: screenFade var(--dur-base); }
.scrim.is-open { display: block; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 510; background-color: var(--bg-primary); border-top-left-radius: 32px; border-top-right-radius: 32px; box-shadow: var(--shadow-sheet); padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 48px; display: none; flex-direction: column; max-height: 82%; }
.sheet.is-open { display: flex; animation: sheetUp var(--dur-slow) var(--ease-out); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet__grabber { width: 36px; height: 5px; border-radius: var(--radius-full); background-color: var(--ios-grabber); margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: var(--space-2xl); flex-shrink: 0; }

/* Action sheet (UIAlertController .actionSheet) */
.action-sheet { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 510; display: none; flex-direction: column; }
.action-sheet.is-open { display: flex; animation: sheetUp var(--dur-base) var(--ease-out); }
.action-sheet__group { background-color: var(--bg-primary); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 8px; }
.action-sheet__title { text-align: center; font-size: var(--text-caption); line-height: var(--leading-caption); font-weight: var(--weight-medium); color: var(--text-secondary); padding-top: var(--space-md); padding-bottom: var(--space-md); }
.action-sheet__item { display: flex; align-items: center; justify-content: center; height: 57px; font-size: var(--text-title-3); line-height: var(--leading-title-3); color: var(--accent-ios-blue); position: relative; width: 100%; }
.action-sheet__item + .action-sheet__item::before, .action-sheet__title + .action-sheet__item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--ios-separator); }
.action-sheet__item:active { background-color: var(--bg-subtle); }
.action-sheet__item--cancel { font-weight: var(--weight-semibold); background-color: var(--bg-primary); border-radius: var(--radius-xl); }
.action-sheet__item--dark { color: var(--text-primary); }

/* ---------- iOS keyboard ---------- */
.keyboard { flex-shrink: 0; background-color: var(--ios-keyboard-bg); padding-top: 8px; padding-left: 3px; padding-right: 3px; padding-bottom: 0; display: flex; flex-direction: column; user-select: none; }
.keyboard__row { display: flex; flex-direction: row; justify-content: center; margin-bottom: 11px; }
.key { height: 44px; margin-left: 3px; margin-right: 3px; border-radius: var(--radius-sm); background-color: var(--bg-primary); box-shadow: var(--shadow-key); display: flex; align-items: center; justify-content: center; font-size: var(--text-title-2); line-height: var(--leading-title-2); color: var(--text-primary); flex: 1; min-width: 0; font-weight: var(--weight-regular); }
.key--alpha { width: 33px; flex: 0 0 33px; }
.key--fn { background-color: var(--ios-key-dark); font-size: var(--text-body); }
.key--fn.key--wide { flex: 0 0 44px; }
.key--space { flex: 1; font-size: var(--text-body); }
.key--return { flex: 0 0 90px; background-color: var(--accent-blue); color: var(--text-on-dark); font-size: var(--text-body); }
.key:active { background-color: var(--bg-subtle); }
.keyboard__bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; padding-bottom: 8px; height: 36px; color: var(--text-primary); }
.keyboard--num { padding-top: 8px; padding-left: 4px; padding-right: 4px; }
.keyboard--num .key { height: 46px; font-size: var(--text-title-1); line-height: var(--leading-title-1); margin-left: 3.5px; margin-right: 3.5px; margin-bottom: 0; }
.keyboard--num .key--blank { background-color: transparent; box-shadow: none; pointer-events: none; }
.keyboard--num .key--del { background-color: transparent; box-shadow: none; font-size: 22px; }
.keyboard--num .key--del:active { background-color: transparent; }
.keyboard__spacer { height: 34px; }

/* ---------- Progress ring ---------- */
.ring { position: relative; display: flex; align-items: center; justify-content: center; }
.ring svg { transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--bg-subtle); }
.ring__fill  { fill: none; stroke: var(--accent-blue); stroke-linecap: round; transition: stroke-dashoffset var(--dur-slow) var(--ease-ios); }
.ring__label { position: absolute; font-size: 28px; line-height: 34px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); color: var(--text-primary); }

/* ---------- Steps (setup checklist) ---------- */
.step { display: flex; flex-direction: row; align-items: center; padding-top: var(--space-xl); padding-bottom: var(--space-xl); position: relative; }
.step + .step::before { content: ''; position: absolute; top: 0; left: 44px; right: 0; height: 1px; background-color: var(--ios-separator); }
.step__icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; margin-right: var(--space-md); flex-shrink: 0; background-color: var(--bg-subtle); color: var(--text-primary); font-size: 16px; }
.step.is-done .step__icon { background-color: var(--accent-green); color: var(--text-on-dark); }
.step.is-next .step__icon { background-color: var(--bg-dark); color: var(--text-on-dark); }
.step__body { flex: 1; }
.step__title { font-size: var(--text-body-lg); line-height: var(--leading-body-lg); font-weight: var(--weight-medium); color: var(--text-primary); }
.step.is-done .step__title { color: var(--text-secondary); }
.step__sub { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); margin-top: 2px; }
.step__chev { color: var(--border-light); font-size: 18px; }
.step.is-locked { opacity: 0.45; }

/* Numbered instruction step (agent guide) */
.card--steps { padding-top: var(--space-sm); padding-bottom: var(--space-sm); padding-left: 0; padding-right: 0; }
.instr { display: flex; flex-direction: row; align-items: flex-start; padding-top: var(--space-sm); padding-bottom: var(--space-sm); padding-left: var(--space-xl); padding-right: var(--space-xl); }
.instr__num { width: 26px; height: 26px; border-radius: var(--radius-full); background-color: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-micro); line-height: var(--leading-micro); font-weight: var(--weight-semibold); color: var(--text-primary); margin-right: var(--space-md); flex-shrink: 0; }
.instr.is-done .instr__num { background-color: var(--accent-green); color: var(--text-on-dark); }
.instr__body { flex: 1; }
.instr__text { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--text-primary); }
.instr__text strong { font-weight: var(--weight-semibold); }
.instr.is-done .instr__text { color: var(--text-tertiary); text-decoration: line-through; }
.copy-row { display: flex; flex-direction: row; align-items: center; margin-top: var(--space-2xs); height: 40px; padding-left: var(--space-md); padding-right: var(--space-2xs); border-radius: var(--radius-md); background-color: var(--bg-subtle); }
.copy-row__url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.copy-row .btn { margin-left: var(--space-sm); }

/* ---------- Picture-in-picture guide ---------- */
.pip { position: absolute; right: 12px; bottom: 96px; width: 220px; z-index: 600; background-color: var(--bg-ink); border-radius: var(--radius-2xl); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.10); overflow: hidden; display: none; touch-action: none; color: var(--text-on-dark); }
.pip.is-open { display: block; animation: pipIn var(--dur-slow) var(--ease-out); }
@keyframes pipIn { from { transform: scale(1.6) translate(-40px, -200px); opacity: 0; } to { transform: scale(1) translate(0,0); opacity: 1; } }
.pip__hdr { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 8px; padding-left: 12px; padding-right: 8px; cursor: grab; }
.pip__title { display: flex; flex-direction: row; align-items: center; font-size: var(--text-micro); line-height: var(--leading-micro); font-weight: var(--weight-semibold); color: rgba(255,255,255,0.8); }
.pip__title .dot { margin-right: 6px; }
.pip__min { width: 24px; height: 24px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); }
.pip__body { padding-left: 12px; padding-right: 12px; padding-bottom: 10px; }
.pip__row { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 8px; }
.pip__n { width: 18px; height: 18px; border-radius: var(--radius-full); flex-shrink: 0; margin-top: 1px; margin-right: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; font-weight: var(--weight-semibold); background-color: rgba(255,255,255,0.10); color: rgba(255,255,255,0.4); }
.pip__row.is-active .pip__n { background-color: var(--accent-blue); color: var(--text-on-dark); }
.pip__row.is-done .pip__n { background-color: rgba(52,199,89,0.25); color: var(--accent-green); }
.pip__t { font-size: var(--text-caption); line-height: var(--leading-caption); color: rgba(255,255,255,0.4); flex: 1; }
.pip__row.is-active .pip__t { color: rgba(255,255,255,0.95); font-weight: var(--weight-medium); }
.pip__row.is-done .pip__t { color: rgba(52,199,89,0.7); text-decoration: line-through; }
.pip__copy { display: flex; flex-direction: row; align-items: center; margin-top: 4px; margin-bottom: 8px; height: 30px; padding-left: 8px; padding-right: 4px; border-radius: var(--radius-md); background-color: rgba(255,255,255,0.08); }
.pip__copy span { flex: 1; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; }
.pip__copy button { font-size: 10px; font-weight: var(--weight-semibold); color: var(--accent-blue); padding-left: 6px; padding-right: 6px; }
.pip__cta { display: flex; align-items: center; justify-content: center; width: calc(100% - 24px); height: 34px; margin-left: 12px; margin-right: 12px; margin-bottom: 12px; border-radius: var(--radius-lg); background-color: var(--accent-blue); color: var(--text-on-dark); font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.pip-mini { position: absolute; right: 12px; bottom: 96px; z-index: 600; display: none; flex-direction: row; align-items: center; height: 40px; padding-left: 12px; padding-right: 14px; border-radius: var(--radius-full); background-color: var(--bg-ink); color: rgba(255,255,255,0.85); font-size: var(--text-caption); font-weight: var(--weight-semibold); box-shadow: 0 6px 24px rgba(0,0,0,0.35); }
.pip-mini.is-open { display: flex; }
.pip-mini .dot { margin-right: 8px; }

/* ---------- Numeric input sheet (native-style keyboard) ---------- */
.kb-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 520; transform: translateY(105%); transition: transform var(--dur-base) var(--ease-ios); }
.kb-sheet.is-open { transform: translateY(0); }
.kb-sheet__bar { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; background-color: var(--ios-keyboard-bg); padding-top: 8px; padding-left: 16px; padding-right: 16px; }
.kb-sheet__done { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); color: var(--accent-ios-blue); }

/* ---------- Toast ---------- */
.toast { position: absolute; left: 50%; transform: translateX(-50%); top: 70px; z-index: 700; background-color: var(--bg-ink); color: var(--text-on-dark); font-size: var(--text-caption); font-weight: var(--weight-medium); height: 40px; padding-left: 16px; padding-right: 16px; border-radius: var(--radius-full); display: none; align-items: center; box-shadow: var(--shadow-float); }
.toast.is-open { display: flex; animation: toastIn var(--dur-base) var(--ease-out); }
@keyframes toastIn { from { transform: translate(-50%, -12px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* ---------- Balance header ---------- */
.balance { display: flex; flex-direction: column; align-items: center; text-align: center; }
.balance__label { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
/* Big money: Faculty Glyphic 54/50, "₹ 1,489" — rupee sign, thin space, digits */
.balance__amount { font-family: var(--font-display); font-size: var(--text-display-amount); line-height: var(--leading-display-amount); font-weight: var(--weight-regular); color: var(--text-primary); margin-top: var(--space-md); }
.balance__amount sup { font-size: inherit; font-weight: inherit; vertical-align: baseline; position: static; margin-right: 0.18em; color: inherit; }

/* ---------- Mock external (agent connector page) ---------- */
.ext { background-color: var(--bg-primary); }
.ext__bar { height: 44px; display: flex; flex-direction: row; align-items: center; padding-left: var(--gutter); padding-right: var(--gutter); }
.ext__url { flex: 1; height: 36px; border-radius: var(--radius-lg); background-color: var(--bg-subtle); display: flex; align-items: center; justify-content: center; font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-secondary); margin-left: var(--space-md); margin-right: var(--space-md); }
.ext__title { font-family: -apple-system, 'Inter', system-ui, sans-serif; font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-regular); color: var(--bg-ink); }
.ext__card { border-radius: var(--radius-2xl); box-shadow: 0 0 0 1px var(--border-default); }
.ext__input { height: 44px; border-radius: var(--radius-lg); border-width: 1px; border-style: solid; border-color: var(--border-default); display: flex; align-items: center; padding-left: var(--space-md); padding-right: var(--space-md); font-family: var(--font-mono); font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--text-primary); }

/* ---------- Utilities ---------- */
.row { display: flex; flex-direction: row; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.mt-1 { margin-top: var(--space-2xs); } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: var(--space-md); } .mt-4 { margin-top: var(--space-xl); } .mt-5 { margin-top: var(--space-2xl); } .mt-6 { margin-top: var(--space-3xl); } .mt-8 { margin-top: var(--space-4xl); } .mt-10 { margin-top: var(--space-5xl); }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: var(--space-md); } .mb-4 { margin-bottom: var(--space-xl); } .mb-6 { margin-bottom: var(--space-3xl); }
.ml-2 { margin-left: 8px; } .ml-3 { margin-left: var(--space-md); } .mr-2 { margin-right: 8px; } .mr-3 { margin-right: var(--space-md); }
.px-5 { padding-left: var(--space-2xl); padding-right: var(--space-2xl); }
.hr { height: 1px; background-color: rgba(0,0,0,0.05); }
.hidden { display: none !important; }