/* Product surfaces (deposit/convert/fees/markets chrome, 404, hubs) — linked on product pages.
   Not loaded on home /about/ /legal/ /notices/. Shared px-top chrome lives here. */
/* ============ PRODUCT PAGES (/deposit/rub/, /deposit/crypto/, /convert/) ============ */
.px { background: var(--cf-white); }
.px__wrap { max-width: calc(var(--cf-container) + 48px); margin: 0 auto; padding: 0 24px; }
.px__body { padding-top: 24px; padding-bottom: var(--cf-sec-y); }
.px__card { padding: 32px; background: var(--cf-card-bg); border: 1px solid transparent; border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-card); }
.px__card--main { box-shadow: var(--cf-sh-main); }
.px__h2 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--cf-ink-h1); }
.px__meta { font-size: 13px; line-height: 18px; color: var(--cf-muted); }

.px-dark .chg { color: var(--cf-on-dark-3); }
.px-dark .chg.is-up { color: var(--cf-up-on-dark); }
.px-dark .chg.is-down { color: var(--cf-down-on-dark); }

/* Title bar with section tabs — dark on product pages (markets, deposit, price, …). */
.px-top { position: relative; isolation: isolate; overflow: hidden; background: var(--cf-g-dark); border-bottom: 1px solid var(--cf-dark-line); color: var(--cf-on-dark); }
.px-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cf-arcs-r); -webkit-mask: radial-gradient(ellipse 58% 130% at 94% 50%, var(--cf-black) 0%, transparent 72%); mask: radial-gradient(ellipse 58% 130% at 94% 50%, var(--cf-black) 0%, transparent 72%); opacity: .9; }
.px-top__wrap { padding-top: 20px; padding-bottom: 24px; }
.px-top__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 14px; }
.px-top__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--cf-on-dark); }
.px-top .lg-crumbs,
.px-top .pv-hero__lead,
.px-top .pr-lead,
.px-top .pr-title span,
.px-top .mk-asof { color: var(--cf-on-dark-2); }
.px-top .lg-crumbs li:last-child { color: var(--cf-on-dark); }
@media (hover: hover) and (pointer: fine) { .px-top .lg-crumbs a:hover { color: var(--cf-on-dark); } }
.px-top .pv-stats li { background: var(--cf-dark-fill-2); border-color: var(--cf-dark-line); box-shadow: none; }
.px-top .pv-stats b { color: var(--cf-on-dark); }
.px-top .pv-stats__txt span { color: var(--cf-on-dark-2); }
.px-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--cf-dark-fill-2); border: 1px solid var(--cf-dark-line); border-radius: var(--cf-r-ctl); box-shadow: none; }
.px-tabs a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; color: var(--cf-on-dark-2); border-radius: var(--cf-r-sm); transition: color var(--cf-ease), background var(--cf-ease); }
.px-tabs svg { flex: none; width: 18px; height: 18px; }
.px-tabs a[aria-current="page"] { color: var(--cf-ink); background: var(--cf-white); box-shadow: none; }
.px-tabs__short { display: none; }
@media (hover: hover) and (pointer: fine) { .px-tabs a:not([aria-current]):hover { color: var(--cf-on-dark); background: var(--cf-dark-fill-3); } }

/* Working area: form + dark panel */
.px-term { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: start; gap: 24px; }
.px-bal { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--cf-muted); white-space: nowrap; }
.px-bal svg { flex: none; color: var(--cf-t3); }
.px-bal b { font-weight: 600; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.px-form__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 28px; }
.px-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--cf-up-text); background: var(--cf-up-soft); border-radius: var(--cf-r-pill); }
.px-badge i { width: 6px; height: 6px; background: var(--cf-up); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-up) 20%, transparent); }
.px-badge--muted { color: var(--cf-muted); background: var(--cf-board); }
.px-badge--muted i { background: var(--cf-t3); box-shadow: none; }

.px-steps { margin: 0; padding: 0; list-style: none; }
.px-steps { display: grid; }
.px-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding-bottom: 28px; }
.px-step:last-child { padding-bottom: 0; }
.px-step:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 40px; bottom: 8px; width: 1px; background: var(--cf-line); }
.px-step__num { display: grid; place-items: center; width: 32px; height: 32px; font-size: 14px; line-height: 1; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-g-ink); border-radius: 50%; font-variant-numeric: tabular-nums; }
.px-step__body { min-width: 0; }
.px-step__title { margin: 4px 0 12px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cf-ink-h1); }
.px-step__hint { margin: -8px 0 12px; font-size: 14px; line-height: 21px; color: var(--cf-muted); }

.px-rub { display: grid; place-items: center; flex: none; width: 28px; height: 28px; font-size: 15px; line-height: 1; font-style: normal; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-ink); border-radius: 50%; }
.px-field { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--cf-line); border-radius: var(--cf-r-ctl); }
.px-field b { font-size: 15px; line-height: 20px; font-weight: 700; }
.px-field span { min-width: 0; font-size: 14px; line-height: 20px; color: var(--cf-muted); }
.px-pick { margin-bottom: 0; }
.pick-dark .trade__asset-btn { transition: border-color var(--cf-ease), box-shadow var(--cf-ease), background-color var(--cf-ease), color var(--cf-ease); }
.pick-dark .trade__asset-btn[aria-expanded="true"] { color: var(--cf-on-dark); background: var(--cf-dark); border-color: var(--cf-dark); box-shadow: 0 8px 20px -10px var(--cf-shadow-dark); }
.pick-dark .trade__asset-btn[aria-expanded="true"] > span:not(.px-mpick__cur), .pick-dark .trade__asset-btn[aria-expanded="true"] .trade__asset-chev { color: var(--cf-on-dark-2); }
.pick-dark .trade__asset-btn[aria-expanded="true"] img, .pick-dark .trade__asset-pop img { background: none; }
.pick-dark .trade__asset-pop, .pick-dark > .trade__asset-list { color: var(--cf-on-dark); background: var(--cf-glass-menu); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border: 0; border-radius: var(--cf-r-ctl); box-shadow: 0 18px 36px var(--cf-sunken); }
.pick-dark .trade__asset-pop { padding: 8px; }
.pick-dark > .trade__asset-list { gap: 2px; padding: 6px; }
.pick-dark .trade__asset-search { height: 34px; padding: 0 10px; color: var(--cf-on-dark-3); background: var(--cf-dark-fill-1); border: 1px solid var(--cf-dark-line); border-radius: var(--cf-r-tile-sm); }
.pick-dark .trade__asset-search:focus-within { border-color: var(--cf-on-dark-4); box-shadow: none; }
.pick-dark .trade__asset-search svg { width: 16px; height: 16px; }
.pick-dark .trade__asset-search input { font-size: 13px; color: var(--cf-on-dark); }
.pick-dark .trade__asset-search input::placeholder { color: var(--cf-on-dark-3); }
.pick-dark .trade__asset-search input::-webkit-search-cancel-button { filter: invert(1) grayscale(1); opacity: .5; }
.pick-dark .trade__asset-pop .trade__asset-list { gap: 0; max-height: 288px; margin: 6px -4px 0 0; padding: 0 4px 0 0; }
.pick-dark .trade__asset-opt:focus-visible { background: var(--cf-dark-fill-2); }
@media (hover: hover) and (pointer: fine) { .pick-dark .trade__asset-opt:hover { background: var(--cf-dark-fill-2); } }
.pick-dark .trade__asset-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--cf-on-dark-3); }
.pick-dark .trade__asset-opt > svg { color: var(--cf-on-dark); }
.pick-dark .trade__asset-pop .trade__asset-opt { gap: 10px; height: 36px; padding: 0 10px; }
.pick-dark .trade__asset-pop .trade__asset-opt img { width: 20px; height: 20px; }
.pick-dark .trade__asset-pop .trade__asset-opt b { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cf-on-dark); }
.pick-dark .trade__asset-pop .trade__asset-opt span { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--cf-on-dark-3); }
.pick-dark .trade__asset-empty { color: var(--cf-on-dark-3); }
.pick-dark [aria-expanded="true"] .px-method__ico, .pick-dark .trade__asset-list .px-method__ico { color: var(--cf-on-dark); background: var(--cf-ico-dark-bg); border-color: var(--cf-ico-dark-line); box-shadow: none; }
.pick-dark .trade__asset-list .px-method__ico svg { color: var(--cf-on-dark); }
.pick-dark [aria-expanded="true"] .px-method__text small, .pick-dark .trade__asset-list .px-method__text small { color: var(--cf-on-dark-2); }
.pick-dark [aria-expanded="true"] .px-method__fee, .pick-dark .trade__asset-list .px-method__fee { color: var(--cf-on-dark); background: var(--cf-dark-fill-3); }
.px-mpick { position: relative; }
.px-mpick__btn { gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--cf-r-ctl); }
.px-mpick__cur, .px-mpick__opt { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.px-mpick__opt { padding: 8px; }
.px-mpick__opt .px-method__ico svg { color: var(--cf-ink); visibility: visible; }
.px-mpick__cur.px-mpick__cur--empty { display: flex; min-height: 40px; padding-left: 6px; }
.px-method__ico, .px-lock__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--cf-r-ctl); }
.px-method__text { display: grid; flex: 1; min-width: 0; gap: 2px; }
.px-method__text b { font-size: 15px; line-height: 20px; font-weight: 600; }
.px-method__text small { font-size: 13px; line-height: 18px; color: var(--cf-muted); }
.px-method__fee { flex: none; padding: 3px 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--cf-ink); background: var(--cf-board); border-radius: var(--cf-r-pill); white-space: nowrap; font-variant-numeric: tabular-nums; }

[data-rub-pane][hidden] { display: none; }
.px-any { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: var(--cf-board); border-radius: var(--cf-r-panel); }
.px-any__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-size: 18px; line-height: 1; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-g-ink); border-radius: var(--cf-r-ctl); }
.px-any p { display: grid; gap: 2px; font-size: 14px; line-height: 21px; color: var(--cf-muted); }
.px-any b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--cf-ink-h1); }

.px-amount { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--cf-board); border: 1px solid transparent; border-radius: var(--cf-r-panel); transition: border-color var(--cf-ease), background var(--cf-ease), box-shadow var(--cf-ease); }
.px-amount:has(input:focus) { background: var(--cf-white); border-color: var(--cf-ink); box-shadow: var(--cf-ring); }
.px-amount__input { flex: 1; min-width: 0; padding: 0; font: inherit; font-size: 32px; line-height: 42px; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-ink); background: none; border: 0; outline: none; font-variant-numeric: tabular-nums; }
.px-amount__cur { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--cf-muted); }
.px-amount-row { display: flex; gap: 12px; }
.px-amount-row .px-amount { flex: 1; min-width: 0; }
.px-amount__pay { flex: none; height: auto; min-height: 56px; padding: 0 32px; border-radius: var(--cf-r-panel); }
.px-amount__pay:disabled, .cv__btn:disabled { opacity: .4; cursor: not-allowed; }
.px-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.px-quick button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cf-ink); background: var(--cf-white); border: 1px solid var(--cf-line); border-radius: var(--cf-r-pill); font-variant-numeric: tabular-nums; transition: border-color var(--cf-ease), background var(--cf-ease); }
.px-quick button[aria-pressed="true"] { background: var(--cf-board); border-color: var(--cf-ink); }
@media (hover: hover) and (pointer: fine) { .px-quick button:hover { border-color: var(--cf-line-strong); } }

.trade__asset-btn > .px-pick__ph { flex: 1; min-width: 0; padding-left: 6px; font-size: 15px; line-height: 28px; font-weight: 600; color: var(--cf-ink); }
.pick-dark .trade__asset-btn[aria-expanded="true"] > span.px-pick__ph { color: var(--cf-on-dark); }
.px-wait { padding: 16px 20px; font-size: 13px; line-height: 20px; color: var(--cf-text-2); background: var(--cf-board); border: 1px solid var(--cf-line); border-radius: var(--cf-r-ctl); }
.px-wait__text { display: grid; gap: 2px; }
.px-wait__text b { font-size: 14px; line-height: 21px; font-weight: 600; color: var(--cf-ink); }
.px-nets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.px-net { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--cf-line); border-radius: var(--cf-r-ctl); cursor: pointer; transition: border-color var(--cf-ease), box-shadow var(--cf-ease); }
.px-net input { position: absolute; opacity: 0; pointer-events: none; }
.px-net__text { display: grid; flex: 1; min-width: 0; }
.px-net__text b { font-size: 15px; line-height: 20px; font-weight: 700; }
.px-net__text small { font-size: 13px; line-height: 18px; color: var(--cf-muted); }
.px-net__dot { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--cf-line-strong); border-radius: 50%; transition: border var(--cf-ease); }
.px-net:has(input:checked) { border-color: var(--cf-ink); box-shadow: var(--cf-ring); }
.px-net:has(input:checked) .px-net__dot { border: 5px solid var(--cf-ink); }
.px-net:has(input:focus-visible) { outline: 2px solid var(--cf-accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .px-net:hover { border-color: var(--cf-line-strong); } }
.px-notes { display: grid; gap: 8px; padding: 16px 20px; background: var(--cf-board); border: 1px solid var(--cf-line); border-radius: var(--cf-r-ctl); }
.px-notes li { position: relative; padding-left: 16px; font-size: 14px; line-height: 21px; color: var(--cf-text-2); }
.px-notes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; background: var(--cf-ink); border-radius: 50%; }
.px-notes b { font-weight: 600; color: var(--cf-ink-h1); }

/* Dark terminal panel */
.px-dark { position: sticky; top: calc(var(--hd-h) + 24px); isolation: isolate; overflow: hidden; padding: 24px; color: var(--cf-on-dark); background: var(--cf-g-dark); border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-dark); }
.px-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 100% 0%, var(--cf-dark-fill-4), transparent 45%), var(--cf-arcs-soft-tr); -webkit-mask: radial-gradient(ellipse 90% 70% at 100% 0%, var(--cf-black), transparent 75%); mask: radial-gradient(ellipse 90% 70% at 100% 0%, var(--cf-black), transparent 75%); }
.px-dark__head { display: flex; align-items: center; gap: 12px; }
.px-dark__head h2 { flex: 1; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.px-dark__head img { flex: none; border-radius: 50%; }
.px-dark__head > span:not(.px-dark__chip) { display: grid; flex: 1; min-width: 0; }
.px-dark__head b { font-size: 16px; line-height: 22px; font-weight: 600; }
.px-dark__head small { font-size: 12px; line-height: 16px; color: var(--cf-on-dark-2); }
.px-dark__head > span.px-dark__ph { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--cf-on-dark); background: var(--cf-dark-fill-3); border: 1px solid var(--cf-dark-line-mid); border-radius: 50%; }
.px-dark__chip { flex: none; padding: 4px 10px; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--cf-on-dark-strong); background: var(--cf-dark-fill-3); border: 1px solid var(--cf-dark-line); border-radius: var(--cf-r-pill); }
.px-dark__rows { margin: 16px 0 0; }
.px-dark__rows div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; font-size: 14px; line-height: 20px; border-bottom: 1px solid var(--cf-dark-line); }
.px-dark__rows div:last-child { border-bottom: 0; padding-bottom: 0; }
.px-dark__rows dt { color: var(--cf-on-dark-2); }
.px-dark__rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.px-dark__rows .is-total dd { font-size: 20px; line-height: 26px; }
.px-inf { font-size: 24px; line-height: 20px; font-weight: 500; }
.px-dark__rows .is-total dd.is-text { font-size: 16px; line-height: 22px; white-space: nowrap; }
.px-dark__note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--cf-on-dark-2); }
.px-dark__note svg { flex: none; margin-top: 1px; color: var(--cf-on-dark-strong); }
.px-dark .sk { background: linear-gradient(90deg, var(--cf-dark-fill-1), var(--cf-dark-fill-3), var(--cf-dark-fill-1)); background-size: 200% 100%; }

.px-lock { display: grid; overflow: hidden; border: 1px solid var(--cf-line); border-radius: var(--cf-r-panel); }
.px-lock > * { grid-area: 1 / 1; }
.px-lock__addr, .px-lock .px-req, .px-lock .px-sbp { filter: blur(3px); opacity: .6; user-select: none; }
.px-lock__lines i { display: block; width: 150px; max-width: 40vw; height: 10px; background: var(--cf-line-strong); border-radius: 5px; }
.px-lock__addr { display: flex; align-items: center; gap: 20px; margin: 0; padding: 20px; }
.px-req { padding: 16px 20px 10px; }
.px-req__bank { position: relative; display: grid; gap: 6px; }
.px-req__label { font-size: 12px; line-height: 16px; color: var(--cf-on-dark-2); }
.px-req__bank-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 12px; font: inherit; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cf-on-dark); text-align: left; background: var(--cf-dark-fill-2); border: 1px solid var(--cf-dark-line-mid); border-radius: var(--cf-r-tile-sm); cursor: pointer; transition: border-color var(--cf-ease); }
@media (hover: hover) and (pointer: fine) { .px-req__bank-btn:hover { border-color: var(--cf-dark-line-strong); } }
.px-req__bank-btn:focus-visible { outline: 2px solid var(--cf-on-dark-2); outline-offset: 2px; }
.px-req__bank-btn .is-empty { font-weight: 500; color: var(--cf-on-dark-2); }
.px-req__bank-btn svg { flex: none; color: var(--cf-on-dark-2); transition: transform var(--cf-ease); }
.px-req__bank-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.px-req__opt { padding: 8px 10px; }
.px-req__opt .px-method__text b { font-size: 14px; color: var(--cf-on-dark); }
.px-req__opt .px-method__text small { font-size: 12px; }
.px-req__rows { margin: 12px 0 0; }
.px-req__rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--cf-dark-line); }
.px-req__rows > div:last-child { border-bottom: 0; }
.px-req__rows dt { flex: none; font-size: 13px; line-height: 20px; color: var(--cf-on-dark-2); }
.px-req__rows dd { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0 -6px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cf-on-dark); text-align: right; font-variant-numeric: tabular-nums; }
.px-req__rows > .px-req__wide { flex-direction: column; align-items: stretch; gap: 2px; }
.px-req__wide dd { align-items: flex-start; justify-content: space-between; font-size: 13px; line-height: 19px; font-weight: 500; text-align: left; }
.px-req .ab-copy, .px-sbp .ab-copy { width: 28px; height: 28px; color: var(--cf-on-dark-3); }
@media (hover: hover) and (pointer: fine) { .px-req .ab-copy:hover, .px-sbp .ab-copy:hover { color: var(--cf-on-dark); background: var(--cf-dark-fill-3); } }
.px-sbp { padding: 20px; }
.px-sbp[hidden], .px-sbp__pay[hidden] { display: none; }
.px-sbp__idle { padding: 8px 0; font-size: 13px; line-height: 20px; text-align: center; color: var(--cf-on-dark-2); }
.px-sbp__pay { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.px-sbp[data-sbp-state="expired"] .px-qr, .px-sbp[data-sbp-state="expired"] .px-sbp__link { opacity: .3; }
.px-sbp__side { display: grid; gap: 8px; }
.px-sbp__timer { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px; font-size: 12px; line-height: 16px; color: var(--cf-on-dark-strong); background: var(--cf-dark-fill-3); border-radius: var(--cf-r-pill); }
.px-sbp__timer b { font-weight: 600; color: var(--cf-on-dark); font-variant-numeric: tabular-nums; }
.px-sbp__side p { font-size: 12px; line-height: 18px; color: var(--cf-on-dark-2); }
.px-sbp__link { grid-column: 1 / -1; display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 4px 0 12px; background: var(--cf-dark-fill-2); border: 1px solid var(--cf-dark-line-mid); border-radius: var(--cf-r-tile-sm); }
.px-sbp__link > span { flex: 1; min-width: 0; overflow: hidden; font-size: 13px; line-height: 20px; color: var(--cf-on-dark-strong); white-space: nowrap; text-overflow: ellipsis; }
.px-qr { flex: none; width: 112px; height: 112px; background: repeating-conic-gradient(var(--cf-dark) 0 25%, var(--cf-white) 0 50%) 0 0 / 16px 16px; border: 8px solid var(--cf-on-dark); border-radius: var(--cf-r-ctl); }
.px-lock__lines { display: grid; flex: 1; gap: 8px; }
.px-lock__lines small { font-size: 12px; line-height: 16px; color: var(--cf-muted); }
.px-lock__lines i { width: 100%; }
.px-lock__lines i:nth-of-type(2) { width: 60%; }
.px-lock__lines i:nth-of-type(3) { width: 30%; }
.px-lock__over { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 20px; text-align: center; }
.px-lock__over b { font-size: 16px; line-height: 24px; font-weight: 600; }
.px-lock__over p { max-width: 320px; font-size: 13px; line-height: 19px; }
.px-lock__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.px-lock__btns .btn, .px-empty .btn { height: 40px; padding: 0 20px; font-size: 15px; }
.px-lock--dark { margin-top: 20px; background: var(--cf-dark-fill-1); border-color: var(--cf-dark-line); }
.px-lock--dark .px-lock__lines small { color: var(--cf-on-dark-2); }
.px-lock--dark .px-lock__lines i { background: var(--cf-dark-line-strong); }
.px-lock--dark .px-lock__over { background: var(--cf-scrim); }
.px-lock--dark .px-lock__over b { color: var(--cf-on-dark); }
.px-lock--dark .px-lock__over p { color: var(--cf-on-dark-2); }

/* Below the working area */
.px-hist { margin-top: 24px; }
.px-hist__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.px-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 4px; font-size: 14px; line-height: 20px; text-align: center; color: var(--cf-muted); }
.px-empty[hidden] { display: none; }
.px-empty__btn { height: 40px; padding: 0 20px; font-size: 14px; }
.px-hist__all { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cf-ink); }
.px-hist__all svg { transition: transform var(--cf-ease); }
@media (hover: hover) and (pointer: fine) { .px-hist__all:hover svg { transform: translateX(3px); } }
.px-hist__scroll { margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.px-hist__scroll::-webkit-scrollbar { display: none; }
.px-hist__cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(88px, 1fr)); gap: 16px; min-width: calc(var(--cols) * 104px); padding: 10px 16px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--cf-muted); white-space: nowrap; background: var(--cf-board); border-radius: var(--cf-r-sm); }
.px-hist__cols span:last-child { text-align: right; }
.px-sec { margin-top: 64px; }
.px-sec__title, .px-plat__title, .cv-how__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--cf-ink-h1); text-wrap: balance; }
.px-sec__sub { max-width: 720px; margin-top: 8px; font-size: 16px; line-height: 24px; color: var(--cf-muted); }
.px-sec__sub--w500 { max-width: 500px; }
.px-sec__sub--w540 { max-width: 540px; }
.px-sec__sub--w600 { max-width: 600px; }
.px-sec + .px-below { margin-top: 64px; }
.px-bento { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.px-bento__card { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 20px; padding: 28px; overflow: hidden; background: var(--cf-card-bg); border: 1px solid transparent; border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-card); }
.px-bento__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--cf-r-ctl); }
.px-bento__metric { display: block; margin-bottom: 6px; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; color: var(--cf-ink-h1); font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-bento h3 { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--cf-ink-h1); }
.px-bento p { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--cf-muted); }
.px-bento__card--hero { grid-row: span 2; min-height: 380px; color: var(--cf-on-dark); background: var(--cf-g-dark); box-shadow: var(--cf-sh-dark); }
.px-bento__card--hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cf-arcs-soft-br); -webkit-mask-image: radial-gradient(120% 90% at 100% 100%, var(--cf-black) 0%, transparent 65%); mask-image: radial-gradient(120% 90% at 100% 100%, var(--cf-black) 0%, transparent 65%); }
.px-bento__card--hero::after { content: ""; position: absolute; top: -140px; right: -120px; z-index: -1; width: 360px; height: 360px; background: radial-gradient(circle, var(--cf-dark-fill-4) 0%, transparent 65%); }
.px-bento__card--hero .px-bento__metric { margin-top: auto; font-size: 72px; line-height: 76px; letter-spacing: -0.045em; background: linear-gradient(180deg, var(--cf-white) 30%, var(--cf-on-dark-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.px-bento__card--hero h3 { font-size: 18px; line-height: 26px; color: var(--cf-on-dark); }
.px-bento__card--hero p { color: var(--cf-on-dark-2); }
.px-bento__card--hero .px-bento__body { margin-top: auto; }
.px-bento__card--wide { grid-column: span 2; flex-direction: row; align-items: center; }
.px-bento__coins { display: flex; padding-left: 8px; }
.px-bento__coins img { width: 36px; height: 36px; margin-left: -8px; border-radius: 50%; background: var(--cf-dark); box-shadow: 0 0 0 3px var(--cf-dark-raised); }
.px-bento__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; font-weight: 600; }
.px-bento__flow span { padding: 6px 12px; color: var(--cf-on-dark); background: var(--cf-dark-fill-3); border: 1px solid var(--cf-dark-line-mid); border-radius: var(--cf-r-pill); }
.px-bento__flow span:last-child { color: var(--cf-ink); background: var(--cf-white); border-color: var(--cf-on-dark); }
.px-bento__flow i { width: 16px; height: 1px; background: linear-gradient(90deg, var(--cf-dark-fill-4), var(--cf-on-dark-2)); }
.px-plat { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 40px; padding: 48px; overflow: hidden; color: var(--cf-on-dark); background: var(--cf-g-dark); border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-dark); }
.px-plat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--cf-arcs-l); -webkit-mask-image: radial-gradient(70% 90% at 12% 50%, var(--cf-black) 0%, transparent 70%); mask-image: radial-gradient(70% 90% at 12% 50%, var(--cf-black) 0%, transparent 70%); opacity: .85; }
.px-plat__title { color: var(--cf-on-dark); }
.px-plat__lead { max-width: 350px; margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--cf-on-dark-2); }
.px-plat__facts { display: grid; gap: 14px; margin-top: 28px; }
.px-plat__facts li { display: flex; align-items: center; gap: 14px; }
.px-plat__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--cf-r-ctl); }
.px-plat__facts li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 18px; color: var(--cf-on-dark-2); }
.px-plat__facts b { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--cf-on-dark); }
.px-plat__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 32px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--cf-dark-line); }
.px-plat__stats dt { font-size: 12px; line-height: 16px; color: var(--cf-on-dark-2); }
.px-plat__stats dd { margin: 4px 0 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.px-orbit { position: relative; justify-self: center; width: 420px; height: 420px; --d1: 220px; --d2: 380px; }
.px-orbit::before { content: ""; position: absolute; inset: 20%; z-index: -1; background: radial-gradient(circle, var(--cf-dark-fill-4) 0%, transparent 70%); }
.px-orbit__ring { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); border: 1px solid var(--cf-dark-line-mid); border-radius: 50%; animation: px-orbit var(--t) linear infinite; }
.px-orbit__ring--1 { --d: var(--d1); --t: 60s; }
.px-orbit__ring--2 { --d: var(--d2); --t: 90s; border-style: dashed; border-color: var(--cf-dark-line); animation-direction: reverse; }
.px-orbit__sat { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: rotate(var(--a)) translateY(calc(var(--d) / -2)) rotate(calc(var(--a) * -1)); }
.px-orbit__sat img { display: block; width: 44px; height: 44px; padding: 2px; background: var(--cf-dark-raised); border: 1px solid var(--cf-dark-line-mid); border-radius: 50%; box-shadow: 0 8px 20px var(--cf-shadow-dark); animation: px-orbit var(--t) linear infinite reverse; }
.px-orbit__ring--2 .px-orbit__sat img { animation-direction: normal; }
.px-orbit__core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; background: linear-gradient(180deg, var(--cf-dark-edge) 0%, var(--cf-dark-tile) 100%); border: 1px solid var(--cf-dark-line-strong); border-radius: 26px; box-shadow: 0 0 0 10px var(--cf-dark-fill-1), 0 0 48px var(--cf-dark-line-strong); }
@keyframes px-orbit { to { rotate: 360deg; } }
.px-below { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px; margin-top: 24px; }
.px-faq .px__h2 { margin-bottom: 4px; }
.px-faq__item { border-bottom: 1px solid var(--cf-line); }
.px-faq__item:last-child { border-bottom: 0; }
.px-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--cf-ink-h1); cursor: pointer; list-style: none; }
.px-faq__item summary::-webkit-details-marker { display: none; }
.px-faq__item summary svg { flex: none; color: var(--cf-muted); transition: transform var(--cf-ease); }
.px-faq__item[open] summary svg { transform: rotate(180deg); }
.px-faq__item p { padding: 0 32px 16px 0; font-size: 14px; line-height: 22px; color: var(--cf-text-2); }
.px-help { position: sticky; top: calc(var(--hd-h) + 24px); }
.px-help p { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--cf-muted); }
.px-help .px-help__mail { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--cf-ink); }
.px-help__mail > svg { flex: none; }
.px-help__mail > span { min-width: 0; overflow-wrap: anywhere; }
.px-help__mail .ab-copy { margin: -6px 0; transition: background var(--cf-ease), color var(--cf-ease), opacity var(--cf-ease); }
@media (hover: hover) and (pointer: fine) {
  .px-help__mail .ab-copy { opacity: 0; }
  .px-help__mail:hover .ab-copy, .px-help__mail .ab-copy:focus-visible, .px-help__mail .ab-copy.is-done { opacity: 1; }
}

/* Convert widget */
.cv { padding: 28px; background: var(--cf-card-bg); border: 1px solid transparent; border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-main); }
.cv__box { padding: 16px 18px; background: var(--cf-board); border: 1px solid transparent; border-radius: var(--cf-r-panel); transition: border-color var(--cf-ease), background var(--cf-ease); }
.cv__box:has(.cv__input:focus) { background: var(--cf-white); border-color: var(--cf-ink); }
.cv__label { display: block; font-size: 13px; line-height: 18px; color: var(--cf-muted); }
.cv__label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cv__row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.cv__input, .cv__out { flex: 1; min-width: 0; padding: 0; overflow: hidden; font: inherit; font-size: 34px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-ink); text-overflow: ellipsis; white-space: nowrap; background: none; border: 0; outline: none; font-variant-numeric: tabular-nums; }
.cv__out.is-empty, .cv__input::placeholder { color: var(--cf-t3); opacity: 1; }
.cv__slot { flex: none; }
.cv__pick { margin: 0; }
.cv__pick .trade__asset-btn { width: auto; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--cf-r-pill); }
.cv__pick .trade__asset-pop { left: auto; right: 0; width: 300px; max-width: calc(100vw - 72px); }
.cv__qico { display: flex; flex: none; }
.cv__qico img { width: 28px; height: 28px; }
.cv__pick .cv__qlist { left: auto; right: 0; width: 260px; max-width: calc(100vw - 72px); }
.cv__flip { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -12px auto; padding: 0; color: var(--cf-on-dark); background: var(--cf-g-ink); border: 0; border-radius: 50%; box-shadow: 0 0 0 5px var(--cf-on-dark); }
.cv__flip svg { transition: transform var(--cf-ease); }
@media (hover: hover) and (pointer: fine) { .cv__flip:hover svg { transform: rotate(180deg); } }
.cv__rows { display: grid; gap: 8px; margin: 18px 0 0; padding: 0 4px; }
.cv__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.cv__rows dt { color: var(--cf-muted); }
.cv__rows dd { margin: 0; font-weight: 600; color: var(--cf-ink); text-align: right; font-variant-numeric: tabular-nums; }
.cv__btn { width: 100%; margin-top: 20px; gap: 12px; }
.cv__timer { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; }
.cv__timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.5; }
.cv__timer circle { stroke: var(--cf-dark-line-strong); stroke-dasharray: 100; }
.cv__timer .cv__timer-bar { stroke: var(--cf-on-dark); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.cv__timer b { font-size: 11px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Convert market panel */
.cvm__price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.cvm__price small { flex-basis: 100%; font-size: 13px; line-height: 18px; color: var(--cf-on-dark-2); }
.cvm__price strong { font-size: 30px; line-height: 38px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.px-dark .chg--pill { color: var(--cf-on-dark-2); background: var(--cf-dark-fill-2); }
.px-dark .chg--pill.is-up { color: var(--cf-up-on-dark); background: var(--cf-up-soft); }
.px-dark .chg--pill.is-down { color: var(--cf-down-on-dark); background: var(--cf-down-soft); }
.cvm__chart { height: 112px; margin: 12px -24px 0; }
.cvm__chart svg { width: 100%; height: 100%; }
.cvm__vol { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 14px; font-size: 13px; line-height: 18px; color: var(--cf-on-dark-2); border-top: 1px solid var(--cf-dark-line); }
.cvm__vol b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cf-on-dark); font-variant-numeric: tabular-nums; }

.cv-how__title { margin-bottom: 24px; }
.rg__steps a, .px-faq__item p a { color: var(--cf-ink); text-decoration: underline; text-decoration-color: var(--cf-line-strong); text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .px-term, .px-below { grid-template-columns: minmax(0, 1fr); }
  .px-dark, .px-help { position: relative; top: auto; }
  .px-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-bento__card--hero { grid-row: auto; grid-column: span 2; min-height: 300px; }
  .px-plat { grid-template-columns: minmax(0, 1fr); }
  .px-orbit { width: 340px; height: 340px; --d1: 180px; --d2: 310px; }
}
@media (max-width: 767px) {
  .px__wrap { padding: 0 16px; }
  .px__body { padding-top: 16px; padding-bottom: var(--cf-sec-y); }
  .px-top__wrap { padding-top: 14px; padding-bottom: 16px; }
  .px-top__row { gap: 12px; margin-top: 10px; }
  .px-top__title { font-size: 26px; line-height: 34px; }
  .px-tabs { display: flex; width: 100%; }
  .px-tabs a { flex: 1; gap: 6px; padding: 0 8px; }
  .px-tabs__full { display: none; }
  .px-tabs__short { display: inline; }
  .px__card { padding: 20px; }
  .px-form__head { margin-bottom: 20px; }
  .px-step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
  .px-step:not(:last-child)::before { left: 13.5px; top: 36px; }
  .px-step__num { width: 28px; height: 28px; font-size: 13px; }
  .px-step__title { margin-top: 2px; }
  .px-mpick__btn { padding: 8px 12px 8px 8px; }
  .px-mpick__cur, .px-mpick__opt { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 4px 10px; }
  .px-mpick__opt { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  .px-mpick .px-method__ico { grid-row: 1 / 3; }
  .px-mpick .px-method__fee { grid-column: 2; grid-row: 2; justify-self: start; }
  .px-mpick__opt > svg { grid-column: 3; grid-row: 1 / 3; }
  .px-dark__rows .is-total dd.is-text { font-size: 14px; line-height: 20px; }
  .px-amount { padding: 10px 14px; }
  .px-amount-row { flex-direction: column; }
  .px-amount__input { font-size: 26px; line-height: 36px; }
  .px-amount__cur { font-size: 20px; }
  .px-notes, .px-wait { padding: 14px 16px; }
  .px-dark { padding: 20px; }
  .px-qr { width: 84px; height: 84px; border-width: 6px; }
  .px-lock__addr { gap: 14px; padding: 16px; }
  .px-hist, .px-below { margin-top: 16px; }
  .px-below { gap: 16px; }
  .cv { padding: 18px; }
  .cv__box { padding: 14px 16px; }
  .cv__input, .cv__out { font-size: 26px; line-height: 36px; }
  .cvm__chart { margin: 8px -20px 0; height: 96px; }
  .cvm__price strong { font-size: 26px; line-height: 34px; }
  .cv-how__title { margin-bottom: 16px; }
  .px-hist__scroll { -webkit-mask-image: linear-gradient(90deg, var(--cf-black) 80%, transparent); mask-image: linear-gradient(90deg, var(--cf-black) 80%, transparent); }
  .px-sec, .px-sec + .px-below { margin-top: 40px; }
  .px-sec__title, .px-plat__title, .cv-how__title { font-size: 24px; line-height: 32px; }
  .px-sec__sub { font-size: 15px; line-height: 22px; }
  .px-bento { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .px-bento__card { gap: 16px; padding: 20px; }
  .px-bento__card--hero { grid-column: auto; min-height: 280px; }
  .px-bento__card--hero .px-bento__metric { font-size: 56px; line-height: 60px; }
  .px-bento__card--wide { grid-column: auto; align-items: flex-start; }
  .px-bento__metric { font-size: 32px; line-height: 36px; }
  .px-bento__flow { gap: 6px; }
  .px-bento__flow span { padding: 6px 10px; }
  .px-bento__flow i { width: 10px; }
  .px-plat { gap: 8px; padding: 28px 20px 8px; }
  .px-plat__lead { font-size: 15px; line-height: 22px; }
  .px-plat__stats { gap: 20px; }
  .px-plat__stats dd { font-size: 22px; line-height: 28px; }
  .px-orbit { width: 300px; height: 300px; --d1: 150px; --d2: 270px; }
  .px-orbit__sat, .px-orbit__sat img { width: 36px; height: 36px; }
  .px-orbit__sat { margin: -18px 0 0 -18px; }
  .px-orbit__core { width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 20px; }
}
@media (max-width: 400px) {
  .px-bento__flow { gap: 4px; font-size: 12px; }
  .px-bento__flow span { padding: 5px 8px; }
  .px-bento__flow i { width: 8px; }
}
@media (max-width: 340px) {
  .px-bento__flow { gap: 3px; }
  .px-bento__flow span { padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .px-orbit__ring, .px-orbit__sat img { animation: none; }
  .px-tabs a, .px-quick button, .px-net, .px-net__dot, .px-amount, .px-faq__item summary svg, .px-hist__all svg, .cv__box, .cv__flip svg, .cv__timer .cv__timer-bar { transition: none; }
}

/* ============ Fees overview (/fees/) ============ */
.fe-sum { padding: 0; color: var(--cf-on-dark); background: var(--cf-g-dark); box-shadow: var(--cf-sh-dark); }
.fe-sum__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.fe-sum__list li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
.fe-sum__list li + li { border-left: 1px solid var(--cf-dark-line); }
.fe-sum__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--cf-r-ctl); }
.fe-sum__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fe-sum__txt small { font-size: 13px; line-height: 20px; color: var(--cf-on-dark-2); }
.fe-sum__txt b { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--cf-on-dark); font-variant-numeric: tabular-nums; }
.fe-sum__txt b.fe-sum__word { font-size: 18px; }
.fe-sum__txt span { font-size: 13px; line-height: 20px; color: var(--cf-on-dark-strong); }
.fe-sum__link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--cf-on-dark-strong); }
.fe-sum__link svg { flex: none; transition: transform var(--cf-ease); }
@media (hover: hover) and (pointer: fine) { .fe-sum__link:hover svg { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fe-sum__link svg { transition: none; } }
.fe-panel { margin-top: 24px; scroll-margin-top: calc(var(--hd-h) + 24px); }
.fe-panel[hidden] { display: none; }
.fe-panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.fe-lead { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--cf-text-2); }
.fe-search { width: 300px; }
.fe-scroll { margin-top: 20px; overflow-x: auto; }
.fe-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 20px; }
.fe-table th { padding: 10px 16px; font-size: 12px; line-height: 16px; font-weight: 600; text-align: left; white-space: nowrap; color: var(--cf-muted); background: var(--cf-board); }
.fe-table th:first-child { border-radius: var(--cf-r-tile-sm) 0 0 var(--cf-r-tile-sm); }
.fe-table th:last-child { border-radius: 0 var(--cf-r-tile-sm) var(--cf-r-tile-sm) 0; }
.fe-table td { padding: 16px; vertical-align: middle; color: var(--cf-ink); border-bottom: 1px solid var(--cf-line); }
.fe-table tbody tr:last-child td { border-bottom: 0; }
.fe-table tr[hidden] { display: none; }
.fe-val { font-weight: 600; white-space: nowrap; color: var(--cf-ink-h1); font-variant-numeric: tabular-nums; }
.fe-val small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cf-muted); }
.fe-dim { color: var(--cf-text-2); }
.fe-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fe-table--crypto td { padding-top: 12px; padding-bottom: 12px; }
.fe-coin { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.fe-coin img { flex: none; border-radius: 50%; }
.fe-coin b { font-weight: 600; color: var(--cf-ink-h1); }
.fe-coin span { color: var(--cf-muted); }
.fe-net { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fe-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 11px; line-height: 16px; font-weight: 600; color: var(--cf-ink); background: var(--cf-board); border-radius: var(--cf-r-pill); }
.fe-empty { padding: 32px 16px; font-size: 14px; line-height: 22px; text-align: center; color: var(--cf-muted); }
.fe-empty[hidden] { display: none; }
.fe-notes { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 0; padding: 16px 20px 16px 36px; font-size: 13px; line-height: 20px; color: var(--cf-text-2); list-style: disc; background: var(--cf-board); border-radius: var(--cf-r-ctl); }
.fe-notes li::marker { color: var(--cf-muted); }
.fe-notes b { font-weight: 600; color: var(--cf-ink); }
.fe-notes a { color: var(--cf-ink); text-decoration: underline; text-decoration-color: var(--cf-line-strong); text-underline-offset: 3px; }
@media (max-width: 1080px) {
  .fe-sum__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-sum__list li + li { border-left: 0; }
  .fe-sum__list li:nth-child(even) { border-left: 1px solid var(--cf-dark-line); }
  .fe-sum__list li:nth-child(n + 3) { border-top: 1px solid var(--cf-dark-line); }
}
@media (max-width: 767px) {
  .fe-tabs { width: 100%; }
  .fe-tabs a { flex: 1; padding: 0 10px; }
  .fe-sum__list li { flex-direction: column; gap: 10px; padding: 16px; }
  .fe-sum__ico { width: 36px; height: 36px; }
  .fe-sum__txt b { font-size: 18px; line-height: 26px; }
  .fe-search { width: 100%; }
  .fe-table { min-width: 560px; }
  .fe-table--trade { min-width: 0; }
  .fe-table--crypto { min-width: 780px; }
  .fe-table th, .fe-table td { padding-left: 12px; padding-right: 12px; }
  .fe-table--trade th, .fe-table--trade td { padding-left: 8px; padding-right: 8px; }
  .fe-notes { padding: 14px 16px 14px 32px; }
}

/* ---------- 404 ---------- */
.nf-hero { position: relative; isolation: isolate; overflow: hidden; padding: 56px 24px 88px; color: var(--cf-on-dark); text-align: center; background: var(--cf-dark); }
.nf-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--cf-arcs-c); -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 30%, var(--cf-black) 0%, transparent 75%); mask-image: radial-gradient(ellipse 55% 70% at 50% 30%, var(--cf-black) 0%, transparent 75%); opacity: .9; }
.nf-hero__wrap { display: flex; flex-direction: column; align-items: center; }
.nf-hero__badge { align-self: center; color: var(--cf-down-on-dark); }
.nf-code { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 28px; }
.nf-code__d { font-size: 200px; line-height: 1; font-weight: 700; letter-spacing: -0.06em; color: transparent; background: linear-gradient(180deg, var(--cf-white) 0%, var(--cf-on-dark-4) 100%); -webkit-background-clip: text; background-clip: text; }
.nf-orbit { flex: none; width: 240px; height: 240px; --d1: 130px; --d2: 224px; }
.nf-orbit .px-orbit__sat, .nf-orbit .px-orbit__sat img { width: 34px; height: 34px; }
.nf-orbit .px-orbit__sat { margin: -17px 0 0 -17px; }
.nf-orbit .px-orbit__core { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 20px; }
.nf-hero__title { margin-top: 24px; font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.nf-hero__sub { max-width: 560px; margin-top: 16px; font-size: 18px; line-height: 28px; color: var(--cf-on-dark-2); text-wrap: pretty; }
.nf-tx { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; margin-top: 32px; padding: 6px; background: var(--cf-dark-fill-1); border: 1px solid var(--cf-dark-line); border-radius: var(--cf-r-panel); }
.nf-tx div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 10px 20px; text-align: left; }
.nf-tx div + div { border-left: 1px solid var(--cf-dark-line); }
.nf-tx dt { font-size: 12px; line-height: 16px; color: var(--cf-on-dark-2); }
.nf-tx dd { max-width: 260px; margin: 0; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; }
.nf-tx__status { display: inline-flex; align-items: center; gap: 6px; color: var(--cf-down-on-dark); }
.nf-tx__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nf-hero__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.nf-go { padding: 64px 24px var(--cf-sec-y); }
.nf-go__title { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.03em; color: var(--cf-ink-h1); }
.nf-go__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.nf-go__card { display: flex; align-items: flex-start; gap: 16px; height: 100%; padding: 24px; color: var(--cf-ink); background: var(--cf-card-bg); border: 1px solid transparent; border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-card); transition: transform var(--cf-ease), box-shadow var(--cf-ease); }
.nf-go__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--cf-on-dark); background: var(--cf-g-dark); border-radius: var(--cf-r-ctl); }
.nf-go__body { flex: 1; min-width: 0; }
.nf-go__body b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; }
.nf-go__body small { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--cf-text-2); }
.nf-go__arrow { flex: none; margin-top: 4px; color: var(--cf-muted); transition: transform var(--cf-ease), color var(--cf-ease); }
.nf-go__arrow svg { display: block; }
@media (hover: hover) {
  .nf-go__card:hover { transform: translateY(-2px); }
  .nf-go__card:hover .nf-go__arrow { transform: translateX(3px); color: var(--cf-ink); }
}
@media (max-width: 991px) {
  .nf-go__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .nf-hero { padding: 40px 16px 64px; }
  .nf-code { margin-top: 20px; }
  .nf-code__d { font-size: 104px; }
  .nf-orbit { width: 148px; height: 148px; --d1: 82px; --d2: 138px; }
  .nf-orbit .px-orbit__sat, .nf-orbit .px-orbit__sat img { width: 24px; height: 24px; }
  .nf-orbit .px-orbit__sat { margin: -12px 0 0 -12px; }
  .nf-orbit .px-orbit__core { width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 13px; }
  .nf-orbit .px-orbit__core img { width: 20px; height: 20px; }
  .nf-hero__title { font-size: 32px; line-height: 40px; }
  .nf-hero__sub { font-size: 16px; line-height: 24px; }
  .nf-tx { flex-direction: column; align-items: stretch; width: 100%; }
  .nf-tx div + div { border-left: 0; border-top: 1px solid var(--cf-dark-line); }
  .nf-tx dd { max-width: 100%; }
  .nf-hero__btns { width: 100%; }
  .nf-hero__btns .btn { width: 100%; }
  .nf-go { padding: 48px 16px var(--cf-sec-y); }
  .nf-go__title { font-size: 26px; line-height: 34px; }
  .nf-go__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .nf-go__card, .nf-go__arrow { transition: none; } }

/* ---------- RUB method guide (/deposit/rub/bank/, /deposit/rub/sbp/) ---------- */
.rg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: center; margin-top: 24px; padding: 40px; }
.rg__title { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-ink-h1); }
.rg__lead { max-width: 520px; margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--cf-muted); }
.rg__lead--w420 { max-width: 420px; }
.rg__steps { display: grid; margin: 28px 0 0; padding: 0; list-style: none; }
.rg__steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-bottom: 22px; }
.rg__steps li:last-child { padding-bottom: 0; }
.rg__steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--cf-line); }
.rg__num { display: grid; place-items: center; width: 36px; height: 36px; font-size: 14px; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-g-ink); border-radius: 50%; }
.rg__steps h3 { padding-top: 6px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--cf-ink-h1); }
.rg__steps p { margin-top: 2px; font-size: 14px; line-height: 22px; color: var(--cf-muted); }
.rg__vis { position: relative; display: grid; place-items: center; min-height: 360px; padding: 56px 32px 40px; overflow: hidden; background: var(--cf-board); border-radius: var(--cf-r-panel); }
.rg__vis::before { content: ""; position: absolute; inset: 0; background: var(--cf-arcs-line-tr); opacity: .55; -webkit-mask-image: radial-gradient(ellipse at 90% 10%, var(--cf-black) 20%, transparent 72%); mask-image: radial-gradient(ellipse at 90% 10%, var(--cf-black) 20%, transparent 72%); pointer-events: none; }
.rg__doc { width: 100%; max-width: 360px; margin: 0 0 16px; }
.rg .ab-doc__head i { color: var(--cf-ink); background: var(--cf-ico-bg); border: 1px solid var(--cf-ico-line); }
.rg .ab-doc__head i.rg__sbp { background: var(--cf-white); }
.rg__doc .px-inf { display: block; font-size: 20px; line-height: 18px; }
.rg__qr { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px dashed var(--cf-line); }
.rg__qr .ab-doc__rows { flex: 1; min-width: 0; padding-top: 0; border-top: 0; }
.rg__qr .px-qr { width: 96px; height: 96px; border-width: 6px; box-shadow: 0 0 0 1px var(--cf-line); }
.rg__toast { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cf-ink-h1); background: var(--cf-white); border-radius: var(--cf-r-pill); box-shadow: var(--cf-sh-card); }
.rg__toast img { width: 24px; height: 24px; border-radius: 50%; }
.rg .ab-doc__head i.rg__coin { background: var(--cf-white); }
.rg__coin img { width: 24px; height: 24px; border-radius: 50%; }
.rg__nets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.rg__nets span { padding: 3px 10px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--cf-muted); background: var(--cf-board); border-radius: var(--cf-r-pill); }
.rg__nets span.is-on { color: var(--cf-on-dark); background: var(--cf-g-ink); }
.rg__bar { display: block; height: 6px; margin: 8px 0 4px; background: linear-gradient(90deg, var(--cf-up) 0%, var(--cf-up-on-dark) 100%); border-radius: var(--cf-r-chg); }
.rg__swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 4px; }
.rg__swap > span { display: grid; gap: 4px; padding: 10px 12px; background: var(--cf-board); border-radius: var(--cf-r-ctl); }
.rg__swap small { font-size: 12px; line-height: 16px; color: var(--cf-muted); }
.rg__swap b { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--cf-ink-h1); }
.rg__swap img, .rg__swap .px-rub { width: 24px; height: 24px; border-radius: 50%; }
.rg__swap .px-rub { font-size: 13px; }
.rg__swap > i { display: grid; place-items: center; width: 28px; height: 28px; color: var(--cf-on-dark); background: var(--cf-g-ink); border-radius: 50%; }
.rg__swap > i svg { width: 14px; height: 14px; }
.rg__toast i { display: grid; place-items: center; width: 24px; height: 24px; font-size: 12px; font-style: normal; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-up); border-radius: 50%; }
@media (max-width: 1080px) {
  .rg { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .rg__vis { min-height: 0; }
}
@media (max-width: 640px) {
  .rg { padding: 24px 20px; }
  .rg__title { font-size: 22px; line-height: 30px; }
  .rg__lead { font-size: 15px; line-height: 24px; }
  .rg__vis { padding: 60px 16px 28px; }
  .rg__toast { top: 14px; right: 14px; }
  .rg__qr { flex-direction: column; align-items: stretch; }
  .rg__qr .px-qr { align-self: center; }
}

/* ---------- Deposit hub (/deposit/) ---------- */
.dh-title { margin-top: 14px; }
.dh-sub { max-width: 560px; margin-top: 8px; font-size: 16px; line-height: 26px; color: var(--cf-muted); }
.dh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.dh__card { position: relative; display: flex; flex-direction: column; padding: 12px; background: var(--cf-card-bg); border: 1px solid transparent; border-radius: var(--cf-r-card); box-shadow: var(--cf-sh-card); transition: box-shadow var(--cf-ease), translate var(--cf-ease); }
.dh__vis { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; height: 220px; overflow: hidden; background: var(--cf-board); border-radius: var(--cf-r-panel); }
.dh__vis::before { content: ""; position: absolute; inset: 0; background: var(--cf-arcs-line-c); opacity: .5; -webkit-mask-image: radial-gradient(ellipse at 20% 80%, var(--cf-black) 20%, transparent 72%); mask-image: radial-gradient(ellipse at 20% 80%, var(--cf-black) 20%, transparent 72%); pointer-events: none; }
.dh__stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.dh__token { display: grid; place-items: center; width: 64px; height: 64px; font-size: 28px; line-height: 1; font-weight: 700; color: var(--cf-on-dark); background: var(--cf-g-ink); border-radius: 50%; box-shadow: 0 0 0 6px var(--cf-on-dark), var(--cf-sh-float); }
.dh__coin { width: 48px; height: 48px; border-radius: 50%; background: var(--cf-white); box-shadow: 0 0 0 4px var(--cf-board); transition: margin .3s cubic-bezier(.2,.8,.2,1); }
.dh__card--crypto .dh__stage { gap: 0; }
.dh__card--crypto .dh__coin + .dh__coin { margin-left: -12px; }
.dh__card--convert .dh__coin { width: 64px; height: 64px; box-shadow: 0 0 0 6px var(--cf-on-dark), var(--cf-sh-float); }
.dh__flip { display: grid; place-items: center; width: 40px; height: 40px; color: var(--cf-ink); background: var(--cf-white); border-radius: 50%; box-shadow: var(--cf-sh-card); }
.dh__flip svg { rotate: 90deg; transition: rotate .4s cubic-bezier(.2,.8,.2,1); }
.dh__pills { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 16px; }
.dh__pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; line-height: 18px; font-weight: 500; white-space: nowrap; color: var(--cf-muted); background: var(--cf-white); border-radius: var(--cf-r-pill); box-shadow: 0 1px 2px var(--cf-shade-1); }
.dh__pill i + b { margin-left: 2px; }
.dh__pill b { font-weight: 700; color: var(--cf-ink-h1); font-variant-numeric: tabular-nums; }
.dh__pill i { display: grid; place-items: center; width: 18px; height: 18px; color: var(--cf-ink); }
.dh__pill i svg { width: 18px; height: 18px; }
.dh__pill i.dh__sbp svg { width: 14px; height: 17px; }
.dh__body { display: flex; flex-direction: column; flex: 1; padding: 20px 12px 12px; }
.dh__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dh__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cf-muted); }
.dh__tag svg { width: 16px; height: 16px; }
.dh__arrow { display: grid; place-items: center; width: 36px; height: 36px; color: var(--cf-ink); background: var(--cf-board); border-radius: 50%; transition: color var(--cf-ease), background var(--cf-ease); }
.dh__title { margin-top: 10px; font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-ink-h1); }
.dh__link { color: inherit; }
.dh__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--cf-r-card); }
.dh__link:focus-visible { outline: none; }
.dh__card:has(.dh__link:focus-visible) { box-shadow: var(--cf-ring), var(--cf-sh-lift); }
.dh__text { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--cf-muted); }
@media (hover: hover) and (pointer: fine) {
  .dh__card:hover { translate: 0 -2px; box-shadow: var(--cf-sh-lift); }
  .dh__card:hover .dh__arrow { color: var(--cf-on-dark); background: var(--cf-g-ink); }
  .dh__card:hover .dh__stage { transform: translateY(-4px); }
  .dh__card--crypto:hover .dh__coin + .dh__coin { margin-left: -4px; }
  .dh__card--convert:hover .dh__flip svg { rotate: 270deg; }
}
@media (prefers-reduced-motion: reduce) {
  .dh__card, .dh__stage, .dh__coin, .dh__flip svg { transition: none; }
}
@media (max-width: 1080px) {
  .dh { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .dh__card { flex-direction: row; align-items: center; }
  .dh__vis { flex: none; width: 340px; height: 200px; }
  .dh__body { padding: 12px 16px 12px 28px; }
}
@media (max-width: 640px) {
  .dh-sub { font-size: 15px; line-height: 24px; }
  .dh__card { flex-direction: column; align-items: stretch; }
  .dh__vis { width: auto; height: 190px; }
  .dh__body { padding: 18px 8px 8px; }
  .dh__title { font-size: 20px; line-height: 28px; }
}