/* Web personal area (WebLK) – page shell and screen patterns, from the Figma screens.
   Desktop = 1440 (XL, margins 120); mobile = [data-fx-bp="sm"] set by the screen player. */

.fx-lk {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--fx-core-background-secondary);
  color: var(--fx-core-content-primary);
  font: 400 16px/24px 'Noto Sans', system-ui, sans-serif;
}
.fx-lk p, .fx-lk h1, .fx-lk h2 { margin: 0; }
.fx-lk a { color: inherit; text-decoration: none; }
.fx-lk--kyc { background: var(--fx-core-background-tertiary); }

/* ─── Header · Menu/WebLK (72, padding 16/120) ─── */
.fx-lk-header {
  position: sticky; top: 0; z-index: 3; /* stays at the top of the screen window while it scrolls */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 72px;
  padding: 16px var(--fx-grid-margin);
  box-sizing: border-box;
  background: var(--fx-core-background-primary);
}
/* Logo placeholder: the brand is not shown on the portfolio (NDA) */
.fx-lk-header { transition: box-shadow 0.2s; }
.fx-lk-header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); }
[data-fx-theme="dark"] .fx-lk-header.is-scrolled { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }
.fx-logo-ph { display: block; width: 120px; height: 24px; border-radius: 6px; background: var(--fx-core-background-tertiary); }
.fx-lk-nav { display: flex; gap: 16px; }
.fx-lk-nav a { padding: 8px 16px; border-radius: 12px; font: 500 16px/24px 'Noto Sans', system-ui, sans-serif; color: var(--fx-core-content-secondary); }
.fx-lk-nav a:hover { background: var(--fx-core-background-secondary); }
.fx-lk-nav a.is-active { color: var(--fx-core-content-primary); }
.fx-lk-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.fx-lk-actions .fx-btn--icon-only .fx-icon { width: 16px; height: 16px; }
.fx-lk-burger { display: none; }

/* ─── Page ─── */
.fx-lk-main { flex: 1; display: grid; justify-items: center; align-content: start; gap: 24px; padding: 32px 16px 40px; }
.fx-lk-main--auth { padding-top: 72px; padding-bottom: 96px; }
.fx-lk-main--kyc { padding-top: 48px; padding-bottom: 48px; }

.fx-card {
  box-sizing: border-box; width: 100%; max-width: 704px;
  display: flex; flex-direction: column; gap: 32px;
  padding: 32px; border-radius: 16px; background: var(--fx-core-background-primary);
}
.fx-card--auth { max-width: 524px; gap: 24px; }
.fx-card--result { max-width: 528px; gap: 32px; }
.fx-card--dash { max-width: 792px; border-radius: 24px; gap: 16px; }
/* Figma: balance and tabs cards 16 apart, the rest 24 */
.fx-dash { display: grid; gap: 24px; width: 100%; max-width: 792px; }
.fx-dash > :first-child { margin-bottom: -8px; }
.fx-sect { display: grid; gap: 16px; }
.fx-stack { display: grid; gap: 12px; }
.fx-stack--16 { gap: 16px; }
.fx-row { display: flex; align-items: center; gap: 12px; }
.fx-row--between { justify-content: space-between; }
.fx-row--wrap { flex-wrap: wrap; gap: 8px 12px; }
.fx-link { color: var(--fx-base-link) !important; font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; font-weight: 500; }
.fx-link--lg { font: 500 16px/24px 'Noto Sans', system-ui, sans-serif; }
.fx-link--sm { font: 600 14px/20px 'Noto Sans', system-ui, sans-serif; }
.fx-btn--block { width: 100%; }
.fx-btn-row { display: flex; gap: 16px; }

/* Typography helpers used by the screens (Figma text styles) */
.fx-t-h3 { font: 700 28px/36px 'Manrope', system-ui, sans-serif; }
.fx-t-h4 { font: 700 24px/32px 'Manrope', system-ui, sans-serif; }
.fx-t-h5 { font: 700 20px/28px 'Manrope', system-ui, sans-serif; }
.fx-t-hl-lg { font-size: 18px; line-height: 28px; font-weight: 600; }
.fx-t-hl-sm { font-size: 14px; line-height: 20px; font-weight: 600; }
.fx-t-sm { font-size: 14px; line-height: 20px; }
.fx-t-cap { font-size: 12px; line-height: 16px; }
.fx-muted { color: var(--fx-core-content-secondary); }

/* ─── Licence block inside a card · Logotypes ─── */
.fx-license { display: grid; justify-items: center; gap: 12px; padding-top: 20px; }
.fx-license p { font-size: 14px; line-height: 20px; color: var(--fx-core-content-secondary); }
.fx-license-logos { display: flex; align-items: center; gap: 24px; }
.fx-license-logos img { display: block; height: 32px; width: auto; }
.fx-license-logos img.is-wide { height: 20px; }

/* ─── Footer · Footer/WebLK (padding 24/120/48, divider) ─── */
.fx-lk-footer { display: grid; gap: 24px; padding: 24px var(--fx-grid-margin) 48px; font-size: 14px; line-height: 20px; color: var(--fx-core-content-secondary); }
.fx-lk-footer::before { content: ''; height: 1px; background: var(--fx-extension-opacity-10); }
.fx-foot-top { display: flex; justify-content: space-between; gap: 16px; }
.fx-foot-btns, .fx-foot-social { display: flex; gap: 16px; }
.fx-store {
  display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 24px; box-sizing: border-box;
  border-radius: 12px; background: var(--fx-core-background-tertiary); color: var(--fx-core-content-secondary);
  font: 600 20px/1 system-ui, -apple-system, sans-serif; letter-spacing: -0.02em; white-space: nowrap;
}
.fx-store small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 12px; }
.fx-store .fx-icon { width: 28px; height: 28px; }
.fx-store--sq { width: 56px; padding: 0; justify-content: center; }
.fx-store--sq .fx-icon { width: 24px; height: 24px; }
.fx-foot-social span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--fx-core-background-tertiary); color: var(--fx-core-content-secondary); }
.fx-foot-social .fx-icon { width: 24px; height: 24px; }
.fx-foot-text { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fx-foot-text > div { display: grid; gap: 12px; align-content: start; }
.fx-foot-logos { display: flex; align-items: center; gap: 24px; }
.fx-foot-logos i { width: 80px; height: 24px; border-radius: 6px; background: var(--fx-core-background-tertiary); }
.fx-foot-bottom { display: flex; justify-content: space-between; gap: 24px; }

/* ─── Auth ─── */
.fx-auth-head { display: grid; gap: 8px; text-align: center; }
.fx-auth-head p { color: var(--fx-core-content-secondary); }
.fx-auth-head .fx-link { font-weight: 600; }
.fx-social { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fx-social .fx-btn { gap: 8px; }
.fx-social .fx-icon { width: 24px; height: 24px; }
.fx-lk .fx-result-illu { display: block; width: 104px; height: 104px; margin: 0 auto; }
.fx-back { display: inline-flex; align-items: center; gap: 2px; color: var(--fx-base-link) !important; font-weight: 500; }
.fx-back .fx-icon { width: 16px; height: 16px; stroke-width: 2.25; }

/* ─── Segmented tabs (segment-control) ─── */
.fx-tabs { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px; background: var(--fx-core-background-secondary); }
.fx-tabs button { flex: 1; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--fx-core-content-disabled); font: 600 14px/20px 'Noto Sans', system-ui, sans-serif; cursor: pointer; }
.fx-tabs button[aria-selected="true"] { background: var(--fx-core-background-primary); color: var(--fx-core-content-primary); box-shadow: 0 2px 3px rgba(17, 25, 40, 0.08); }
/* Sliding pill: once fx-screens.js measures the active tab, one ::before glides between tabs instead of each tab painting its own */
.fx-tabs { position: relative; }
.fx-tabs button { position: relative; z-index: 1; transition: color 0.2s; }
.fx-tabs::before { content: ''; position: absolute; top: 4px; left: 0; width: var(--pill-w, 0); height: calc(100% - 8px); transform: translateX(var(--pill-x, 0)); border-radius: 8px; background: var(--fx-core-background-primary); box-shadow: 0 2px 3px rgba(17, 25, 40, 0.08); opacity: 0; }
.fx-tabs.has-pill::before { opacity: 1; }
.fx-tabs.has-pill.is-ready::before { transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), width 0.3s cubic-bezier(0.2, 0, 0, 1); }
.fx-tabs.has-pill button[aria-selected="true"] { background: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .fx-tabs.has-pill.is-ready::before { transition: none; } }
.fx-tabs i { width: 1px; height: 24px; background: var(--fx-extension-opacity-10); }
.fx-tabs button[aria-selected="true"] + i, .fx-tabs i:has(+ button[aria-selected="true"]) { visibility: hidden; }

/* ─── Dashboard ─── */
.fx-balance { display: flex; align-items: center; gap: 8px; font: 700 32px/40px 'Manrope', system-ui, sans-serif; }
.fx-balance .fx-icon { width: 24px; height: 24px; color: var(--fx-core-content-tertiary); }
.fx-balance-sum { position: relative; }
.fx-balance-eye { display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.fx-balance-eye:focus-visible { outline: 2px solid var(--fx-base-link); outline-offset: 2px; border-radius: 4px; }
/* Hidden balance (Figma): 75% surface with a 10px backdrop blur over the sum, radius 8 */
.fx-balance-sum::after { content: ''; position: absolute; inset: 0; border-radius: 8px; background: color-mix(in srgb, var(--fx-core-background-primary) 75%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.2s; pointer-events: none; }
.fx-balance.is-hidden .fx-balance-sum::after { opacity: 1; }
.fx-acc { display: flex; align-items: center; gap: 4px; padding: 8px 0; }
.fx-acc .fx-icon { width: 24px; height: 24px; }
/* Account switcher (Figma Dropdown-menu / _account-list_item) */
.fx-acc-wrap { position: relative; }
button.fx-acc { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.fx-acc .fx-icon { transition: transform 0.2s; }
button.fx-acc[aria-expanded="true"] .fx-icon { transform: rotate(180deg); }
button.fx-acc:focus-visible { outline: 2px solid var(--fx-base-link); outline-offset: 2px; border-radius: 6px; }
.fx-tag.fx-tag--demo { background: var(--fx-base-neutral); } /* Figma: Demo = Base/Neutral blue */
.fx-acc-menu { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; width: 372px; margin: 0; padding: 16px; box-sizing: border-box; list-style: none; border-radius: 20px; background: var(--fx-core-background-primary); box-shadow: 0 2px 12px rgba(17, 25, 40, 0.12); transform-origin: top left; animation: fx-acc-in 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
[data-fx-theme="dark"] .fx-acc-menu { box-shadow: 0 0 0 1px var(--fx-extension-opacity-10), 0 2px 12px rgba(0, 0, 0, 0.4); }
.fx-acc-menu[hidden] { display: none; }
.fx-acc-menu li { display: flex; align-items: center; gap: 8px; padding: 16px; border-radius: 12px; cursor: pointer; }
.fx-acc-menu li b { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 600; white-space: nowrap; }
.fx-acc-menu li .fx-icon { width: 20px; height: 20px; color: var(--fx-base-negative); }
.fx-acc-menu li[aria-selected="true"], .fx-acc-menu li:hover { background: var(--fx-core-background-secondary); }
.fx-acc-menu li:hover:not([aria-selected="true"]) { color: var(--fx-core-content-secondary); }
@keyframes fx-acc-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .fx-acc-menu { animation: none; } }
.fx-tag { margin-right: 4px; padding: 2px 4px; border-radius: 4px; background: var(--fx-base-positive); color: var(--fx-base-white); font: 500 10px/12px 'Noto Sans', system-ui, sans-serif; text-transform: uppercase; }
.fx-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 56px; padding: 16px 16px 16px 12px; box-sizing: border-box; border: 0; border-radius: 12px; background: var(--fx-core-background-secondary); color: var(--fx-core-content-primary); font: 500 16px/24px 'Noto Sans', system-ui, sans-serif; cursor: pointer; }
.fx-action:hover { background: var(--fx-core-background-tertiary); }
/* Noto Sans sits high in its line box: trim text to the cap height so flex centring lines it up with the icon / the tag box */
@supports (text-box: trim-both cap alphabetic) {
  .fx-action > span { display: block; text-box: trim-both cap alphabetic; }
  .fx-tag { text-box: trim-both cap alphabetic; padding-top: 4.5px; padding-bottom: 4.5px; }
}
.fx-action .fx-icon { width: 24px; height: 24px; color: var(--fx-base-link); }

.fx-tx-block { display: grid; gap: 8px; }
.fx-tx-block + .fx-tx-block { margin-top: 16px; }
.fx-tx-date { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fx-core-content-secondary); }
.fx-tx { display: grid; grid-template-columns: 40px repeat(4, minmax(0, 1fr)); align-items: center; column-gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--fx-core-border-tertiary); font-size: 14px; line-height: 20px; }
.fx-tx:last-child { border-bottom: 0; }
.fx-tx > span:nth-child(3), .fx-tx > span:nth-child(4) { font-size: 12px; line-height: 16px; color: var(--fx-core-content-secondary); }
.fx-tx > b { font-weight: 600; font-size: 16px; line-height: 24px; text-align: right; }
/* Tx icon: the 40px disc is painted by the icon itself (background + 8px spread), so disc and glyph share one box
   and stay concentric under the player's zoom (a separate wrapper rounded to other pixels and looked shifted) */
.fx-tx-ic { --ic-bg: var(--fx-core-background-tertiary); display: grid; place-items: center; width: 40px; height: 40px; color: var(--fx-core-content-secondary); }
.fx-tx-ic .fx-icon { width: 24px; height: 24px; border-radius: 50%; background: var(--ic-bg); box-shadow: 0 0 0 8px var(--ic-bg); }
.fx-tx-ic.is-in { --ic-bg: var(--fx-extension-background-positive); color: var(--fx-base-positive); }
.fx-tx-ic.is-bad { --ic-bg: var(--fx-extension-background-negative); color: var(--fx-base-negative); }
.fx-tx-ic.is-wait { --ic-bg: var(--fx-extension-background-warning); color: var(--fx-base-warning); }
/* ponytail: hardcoded for dark – the ramp-90 extension backgrounds sink the icon; base colour at 16% like the dark badges (Figma Dark mode rule) */
[data-fx-theme="dark"] .fx-tx-ic.is-in { --ic-bg: color-mix(in srgb, var(--fx-base-positive) 16%, transparent); }
[data-fx-theme="dark"] .fx-tx-ic.is-bad { --ic-bg: color-mix(in srgb, var(--fx-base-negative) 16%, transparent); }
[data-fx-theme="dark"] .fx-tx-ic.is-wait { --ic-bg: color-mix(in srgb, var(--fx-base-warning) 16%, transparent); }
.fx-tx .is-plus { color: var(--fx-extension-content-positive); }
.fx-tx .is-neg { color: var(--fx-extension-content-negative); }
.fx-more { margin-top: 24px; }
.fx-more .fx-icon { width: 24px; height: 24px; }

.fx-kv { display: grid; }
.fx-kv > div { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 8px; min-height: 56px; padding: 16px 0; box-sizing: border-box; border-bottom: 1px solid var(--fx-core-border-tertiary); }
.fx-kv > div:last-child { border-bottom: 0; }
.fx-kv span:first-child { color: var(--fx-core-content-tertiary); }
.fx-kv .fx-copy { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--fx-base-link); cursor: pointer; }
.fx-kv .fx-copy .fx-icon { width: 20px; height: 20px; }

.fx-kv--dash > div { grid-template-columns: 1fr auto auto; padding: 16px 8px; }

.fx-banks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fx-bank { display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--fx-core-background-secondary); }
.fx-bank img { display: block; height: 24px; width: auto; max-width: 100%; }
/* Dark theme uses the Figma white logo versions */
.fx-bank .is-dark, [data-fx-theme="dark"] .fx-bank .is-light { display: none; }
[data-fx-theme="dark"] .fx-bank .is-dark { display: block; }
.fx-dash-app { padding: 32px 0 0; overflow: hidden; }
.fx-dash-app .fx-tabs { margin: 0 32px; }
/* Download TP (Figma, XL): text + QR + store badges left, the app screenshot right, cropped at 316 with a fade */
.fx-app { display: grid; grid-template-columns: minmax(0, 1fr) 296px; align-items: end; }
.fx-app-text { display: grid; gap: 32px; align-content: start; padding: 32px 0 32px 32px; }
.fx-app-dl { display: flex; align-items: center; gap: 16px; }
.fx-qr { display: block; width: 96px; height: 96px; padding: 4px; box-sizing: border-box; border: 1px solid #e8eaee; border-radius: 8px; background: #fff; image-rendering: pixelated; }
.fx-app-stores { display: grid; gap: 16px; }
.fx-app-stores img { display: block; width: 150px; height: 40px; }
.fx-app-img { position: relative; width: 296px; max-width: 100%; height: 316px; overflow: hidden; }
.fx-app-img img { position: absolute; left: 50%; top: 32px; width: 244px; height: auto; transform: translateX(-50%); }
.fx-app-img::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 244px; height: 33px; transform: translateX(-50%); background: linear-gradient(rgba(255, 255, 255, 0), #fff); opacity: 0.5; }
/* MetaTrader tab (Figma Download TP · MT, XL): 2×2 store/desktop buttons, the platform illustration centred in the rest */
.fx-app--mt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.fx-mt-btns { display: grid; grid-template-columns: repeat(2, 150px); gap: 12px; }
.fx-mt-btns img { display: block; width: 150px; height: 40px; }
.fx-mt-img { display: grid; place-items: center; align-self: stretch; padding: 16px 32px 16px 0; }
.fx-mt-img img { display: block; width: 100%; max-width: 330px; height: auto; }

/* ─── Deposit / withdrawal ─── */
.fx-sum { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: var(--fx-core-background-secondary); }
.fx-sum b { font: 700 28px/36px 'Manrope', system-ui, sans-serif; }
.fx-sum span { font-size: 12px; line-height: 16px; color: var(--fx-core-content-secondary); }
.fx-sum .fx-sum-label { font-size: 14px; line-height: 20px; color: var(--fx-core-content-primary); }
.fx-upload { display: grid; place-items: center; width: 144px; height: 144px; padding: 0; border: 1.5px dashed var(--fx-lapras-40); border-radius: 16px; background: var(--fx-core-background-secondary); cursor: pointer; }
.fx-upload span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fx-base-link); color: var(--fx-base-white); }
.fx-upload span .fx-icon { width: 24px; height: 24px; stroke-width: 2; }
.fx-upload.is-done { border-style: solid; border-color: var(--fx-base-positive); background: var(--fx-extension-background-positive); color: var(--fx-extension-content-positive); font-size: 12px; line-height: 16px; text-align: center; padding: 8px; }
.fx-bank-chip { display: block; width: 28px; height: 28px; border-radius: 6px; object-fit: cover; object-position: left; background: var(--fx-base-white); box-shadow: inset 0 0 0 1px var(--fx-core-border-tertiary); padding: 3px; box-sizing: border-box; }
.fx-bank-chip[src*="mandiri"] { object-position: right; }
.fx-field-bal { font-weight: 600; font-size: 18px; line-height: 28px; color: var(--fx-core-content-primary); }
.fx-progress { display: grid; grid-auto-flow: column; gap: 8px; }
.fx-progress i { height: 4px; border-radius: 32px; background: var(--fx-core-background-tertiary); }
.fx-progress i.is-done { background: var(--fx-base-positive); }
.fx-note--block { max-width: none; padding-right: 16px; }
.fx-note ol { margin: 4px 0 0; padding-left: 18px; font-size: 14px; line-height: 20px; }
details.fx-note { display: block; padding: 16px; }
details.fx-note summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-weight: 600; }
details.fx-note summary::-webkit-details-marker { display: none; }
details.fx-note summary > .fx-icon:first-child { color: var(--c); }
details.fx-note summary > .fx-icon:last-child { margin-left: auto; width: 20px; height: 20px; transition: transform 0.2s; }
details.fx-note[open] summary > .fx-icon:last-child { transform: rotate(180deg); }
details.fx-note .fx-note-body { padding: 8px 0 0 32px; }

/* ─── Result ─── */
.fx-card--result .fx-result { display: grid; gap: 16px; text-align: center; }
.fx-card--result .fx-note { text-align: left; }
.fx-result-ic { display: block; width: 96px; height: 96px; margin: 0 auto; }

/* ─── Verification (CDDS) ─── */
.fx-kyc-head { display: grid; gap: 16px; }
.fx-kyc-bar { height: 4px; border-radius: 32px; background: var(--fx-core-background-tertiary); overflow: hidden; }
.fx-kyc-bar i { display: block; height: 100%; border-radius: 32px; background: var(--fx-base-positive); }
.fx-kyc-block { display: grid; gap: 16px; }
.fx-kyc-text { display: grid; gap: 8px; }
.fx-examples { display: grid; gap: 8px; }
.fx-examples > div { display: flex; gap: 12px; }
.fx-example { display: grid; gap: 4px; }
.fx-example i { display: block; width: 112px; height: 104px; border-radius: 8px; background: var(--fx-core-background-tertiary); position: relative; overflow: hidden; }
.fx-example i::before { content: ''; position: absolute; inset: 26px 14px; border-radius: 6px; background: var(--fx-lapras-10); box-shadow: inset 30px 0 0 -18px var(--fx-lapras-20); }
.fx-example.is-bad i::before { filter: blur(2px); transform: rotate(-10deg) scale(0.85); }
.fx-example .fx-msg { font-size: 12px; line-height: 16px; gap: 4px; }
.fx-example .fx-msg .fx-icon { width: 14px; height: 14px; }
.fx-example .fx-msg.is-ok { color: var(--fx-extension-content-positive); }
.fx-example .fx-msg.is-no { color: var(--fx-extension-content-negative); }
.fx-radios { display: grid; gap: 8px; }
.fx-kyc-q { font-size: 16px; line-height: 24px; font-weight: 600; }
.fx-docs { display: grid; gap: 24px; }
.fx-doc { display: grid; gap: 8px; }
.fx-doc small { font-size: 12px; line-height: 16px; color: var(--fx-core-content-secondary); }
.fx-doc a { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--fx-base-link) !important; }
.fx-lk--kyc .fx-btn--secondary { --bg: var(--fx-core-background-tertiary); }
[data-show-when][hidden], [data-panel][hidden] { display: none; } /* .fx-app sets display: grid, which beat [hidden] */

/* ─── Mobile web (also what the app shows in WebView) ─── */
[data-fx-bp="sm"] .fx-lk-header { grid-template-columns: 1fr auto; min-height: 64px; padding: 16px; }
[data-fx-bp="sm"] .fx-logo svg { width: 110px; height: 26px; }
[data-fx-bp="sm"] .fx-lk-nav, [data-fx-bp="sm"] .fx-lk-actions .fx-btn:not(.fx-lk-burger) { display: none; }
[data-fx-bp="sm"] .fx-lk-burger { display: inline-flex; }
[data-fx-bp="sm"] .fx-lk-main { padding: 16px 16px 32px; gap: 12px; }
[data-fx-bp="sm"] .fx-lk-main--auth, [data-fx-bp="sm"] .fx-lk-main--kyc { padding-top: 24px; }
[data-fx-bp="sm"] .fx-card { padding: 24px 16px; gap: 24px; }
[data-fx-bp="sm"] .fx-card--dash { border-radius: 16px; padding: 16px; }
[data-fx-bp="sm"] .fx-dash { gap: 12px; }
[data-fx-bp="sm"] .fx-dash > *, [data-fx-bp="sm"] .fx-tabs { min-width: 0; } /* scrolling tabs must not widen the card */
[data-fx-bp="sm"] .fx-dash > :first-child { margin-bottom: 0; gap: 8px; }
[data-fx-bp="sm"] .fx-dash > .fx-card--dash:nth-child(2) { gap: 24px !important; }
[data-fx-bp="sm"] .fx-balance { font-size: 24px; line-height: 32px; }
[data-fx-bp="sm"] .fx-acc { padding: 8px 2px; font-size: 14px; line-height: 20px; }
/* Tabs scroll sideways on phones (Figma: items keep their width, edges fade) */
[data-fx-bp="sm"] .fx-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
[data-fx-bp="sm"] .fx-tabs::-webkit-scrollbar { display: none; }
[data-fx-bp="sm"] .fx-tabs button { flex: none; padding: 6px 12px; white-space: nowrap; }
[data-fx-bp="sm"] .fx-t-h3 { font-size: 24px; line-height: 32px; }
/* Phone row (Figma SM): icon · type over status | amount over method, right-aligned */
[data-fx-bp="sm"] .fx-tx { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 12px 4px; }
[data-fx-bp="sm"] .fx-tx > span:nth-child(1) { grid-row: 1 / 3; }
[data-fx-bp="sm"] .fx-tx > span:nth-child(2) { grid-column: 2; grid-row: 1; }
[data-fx-bp="sm"] .fx-tx > span:nth-child(3) { grid-column: 2; grid-row: 2; }
[data-fx-bp="sm"] .fx-tx > b { grid-column: 3; grid-row: 1; font-size: 14px; line-height: 20px; padding-left: 4px; }
[data-fx-bp="sm"] .fx-tx > span:nth-child(4) { grid-column: 3; grid-row: 2; text-align: right; }
[data-fx-bp="sm"] .fx-more { margin-top: 16px; min-height: 40px; height: 40px; padding: 8px 14px 8px 16px; font-size: 14px; line-height: 24px; }
[data-fx-bp="sm"] .fx-banks { grid-template-columns: 1fr 1fr; gap: 8px; }
[data-fx-bp="sm"] .fx-app { grid-template-columns: 1fr; position: relative; justify-items: center; }
[data-fx-bp="sm"] .fx-app-text { padding: 24px 16px 0; text-align: center; }
[data-fx-bp="sm"] .fx-app-text .fx-t-h5 { font-size: 16px; line-height: 20px; }
[data-fx-bp="sm"] .fx-app-text .fx-muted { font-size: 14px; line-height: 20px; }
[data-fx-bp="sm"] .fx-app-dl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 8px 16px 16px; }
[data-fx-bp="sm"] .fx-app-stores { width: 100%; }
[data-fx-bp="sm"] .fx-app-stores img { width: 100%; height: 56px; object-fit: contain; border-radius: 8px; background: #000; }
[data-fx-bp="sm"] .fx-app-stores img + img { display: none; }
[data-fx-bp="sm"] .fx-dash-app .fx-tabs { margin: 0 16px; }
[data-fx-bp="sm"] .fx-qr { display: none; }
[data-fx-bp="sm"] .fx-actions { gap: 8px; }
[data-fx-bp="sm"] .fx-action { flex-direction: column; gap: 2px; height: auto; padding: 8px 12px 10px; border-radius: 10px; font-size: 12px; line-height: 16px; }
[data-fx-bp="sm"] .fx-action .fx-icon { width: 20px; height: 20px; }
[data-fx-bp="sm"] .fx-social { gap: 8px; }
[data-fx-bp="sm"] .fx-kv > div { grid-template-columns: 1fr auto; }
[data-fx-bp="sm"] .fx-kv > div > span:first-child { grid-column: 1 / -1; }
[data-fx-bp="sm"] .fx-btn-row { flex-direction: column-reverse; gap: 12px; }
[data-fx-bp="sm"] .fx-btn-row .fx-btn, [data-fx-bp="sm"] .fx-card > .fx-btn { width: 100%; }
[data-fx-bp="sm"] .fx-lk-footer { padding: 16px 16px 32px; gap: 24px; font-size: 12px; line-height: 16px; }
[data-fx-bp="sm"] .fx-foot-top { flex-direction: column; }
[data-fx-bp="sm"] .fx-foot-btns, [data-fx-bp="sm"] .fx-foot-social { gap: 8px; }
[data-fx-bp="sm"] .fx-store { height: 48px; padding: 0 12px; font-size: 16px; }
[data-fx-bp="sm"] .fx-store--sq, [data-fx-bp="sm"] .fx-foot-social span { width: 48px; height: 48px; }
[data-fx-bp="sm"] .fx-foot-text { grid-template-columns: 1fr; }
[data-fx-bp="sm"] .fx-foot-bottom { flex-direction: column; gap: 8px; }
[data-fx-bp="sm"] .fx-license-logos { gap: 16px; }
.fx-lk .fx-field { max-width: none; }
.fx-lk-footer { grid-template-columns: minmax(0, 1fr); }
[data-fx-bp="sm"] .fx-store--sq { display: none; }
[data-fx-bp="sm"] .fx-foot-btns, [data-fx-bp="sm"] .fx-foot-social { flex-wrap: wrap; }

/* ─── Build-in (dashboard, first view): 1 outlines draw in, 2 blocks fill and settle, 3 elements pop in ───
   Springy ease on transforms, soft ease-out on opacity; blocks cascade by --b, elements by --b and --c. */
.fx-lk[data-build] {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
.fx-lk[data-build] :is(.fx-lk-header, .fx-card--dash) {
  outline: 1px dashed transparent; outline-offset: -1px;
  transition: background-color 0.6s var(--ease-out) calc(var(--b, 0) * 90ms), outline-color 0.5s var(--ease-out) calc(var(--b, 0) * 90ms),
              transform 0.8s var(--ease-spring) calc(var(--b, 0) * 90ms), opacity 0.5s var(--ease-out) calc(var(--b, 0) * 90ms);
}
.fx-lk[data-build] :is(.fx-lk-header, .fx-card--dash, .fx-lk-footer) > * {
  transition: opacity 0.6s var(--ease-out) calc(var(--b, 0) * 90ms + var(--c, 0) * 45ms),
              transform 0.9s var(--ease-spring) calc(var(--b, 0) * 90ms + var(--c, 0) * 45ms),
              filter 0.6s var(--ease-out) calc(var(--b, 0) * 90ms + var(--c, 0) * 45ms);
}
/* 0: nothing yet */
.fx-lk[data-build="0"] :is(.fx-lk-header, .fx-card--dash) { opacity: 0; transform: scale(0.96); }
/* 0–1: no fills, 1: outlines draw in */
.fx-lk[data-build="0"] :is(.fx-lk-header, .fx-card--dash), .fx-lk[data-build="1"] :is(.fx-lk-header, .fx-card--dash) { background-color: transparent; box-shadow: none; }
.fx-lk[data-build="1"] :is(.fx-lk-header, .fx-card--dash) { outline-color: var(--fx-core-border-secondary); transform: scale(0.985); } /* light grey dashed contour */
/* 0–2: elements wait below, slightly blurred */
.fx-lk[data-build="0"] :is(.fx-lk-header, .fx-card--dash, .fx-lk-footer) > *,
.fx-lk[data-build="1"] :is(.fx-lk-header, .fx-card--dash, .fx-lk-footer) > *,
.fx-lk[data-build="2"] :is(.fx-lk-header, .fx-card--dash, .fx-lk-footer) > * { opacity: 0; transform: translateY(14px) scale(0.98); filter: blur(4px); }
.fx-lk[data-build="0"] .fx-lk-footer::before, .fx-lk[data-build="1"] .fx-lk-footer::before { opacity: 0; }

/* Theme switch: a short cross-fade of colours (class set by fx-screens.js only while the theme flips) */
.fx-theming, .fx-theming *, .fx-theming *::before, .fx-theming *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, outline-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease, stroke 0.35s ease !important;
}