:root {
  --bg: #21252e;          /* основной фон приложения */
  --card: #282f39;        /* фон карточек (чуть светлее фона) */
  --pill: #333945;        /* поисковая строка / тёмные пилюли */
  --track: #262c37;       /* трек сегмент-контрола (тёмный, чуть светлее фона) */
  --seg-active: #363d49;  /* активная вставка Exchange (светлее трека) */
  --btn-dark: #333a44;    /* тёмная кнопка Try Now */
  --border: #313743;
  --text: #eceef2;        /* основной белый текст */
  --text-dim: #8b909e;    /* приглушённый серый */
  --text-dim-2: #6b7180;  /* ещё бледнее (заголовки таблицы) */
  --yellow: #f3d453;      /* фирменный жёлтый */
  --red: #de4b58;         /* красный бейдж (чуть краснее) */
  --green: #16c784;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }  /* иначе классы вида display:flex на том же элементе перебивают атрибут hidden по specificity */

body {
  background: #0a0b0e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.phone {
  width: 440px;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);   /* воздух под статус-баром/чёлкой в установленном PWA */
  padding-bottom: 96px;
  position: relative;
}

/* на телефоне: убираем чёрную подложку-макет и растягиваем на всю ширину экрана */
@media (max-width: 520px) {
  body { padding: 0; background: var(--bg); display: block; }
  .phone { width: 100%; }
}

button { font-family: inherit; border: none; background: none; color: inherit; cursor: pointer; }
button:focus, button:focus-visible { outline: none; }  /* убираем браузерную обводку при клике */
svg { display: block; }

/* ---------- topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 12px;   /* воздух над Exchange/Wallet */
}

.topbar-left, .topbar-right { display: flex; align-items: center; gap: 5px; }

.icon-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.icon-btn svg { width: 20px; height: 20px; }
.topbar-right .icon-btn svg { width: 18px; height: 18px; }  /* QR и сообщение мельче */
.icon-btn.small { width: 28px; height: 28px; }
.icon-btn.small svg { width: 22px; height: 22px; }

.badge-wrap { position: relative; }
/* ===== ЖЁЛТЫЙ БЛОК — свой размер, от текста НЕ зависит ===== */
.badge {
  position: absolute;
  top: 1px;                 /* ПОЗИЦИЯ: вверх/вниз (меньше = выше) */
  left: 15px;               /* ПОЗИЦИЯ: влево/вправо (больше = правее) */
  width: 20px;              /* ШИРИНА блока (тянуть вправо = больше) */
  height: 10px;             /* ВЫСОТА блока */
  display: flex;
  align-items: center;      /* цифры по центру блока (вертикаль) */
  justify-content: center;  /* цифры по центру блока (горизонталь) */
  background: var(--yellow);
  border-radius: 6px;
}

/* ===== ЦИФРЫ 99+ — играйся отдельно, блок НЕ меняется ===== */
.badge-num {
  color: #20242d;
  font-size: 9px;           /* РАЗМЕР цифр */
  font-weight: 520;         /* жирность: 400 тонкий … 700 жирный */
  letter-spacing: 0.2px;      /* РАССТОЯНИЕ между цифрами (увеличивай: 0.5px, 1px) */
  line-height: 1;
  transform: translate(0.2px, 1px); /* СДВИНУТЬ цифры внутри блока: (вправо, вниз) */
}

.segmented {
  background: var(--track);
  border-radius: 8px;
  padding: 4px;              /* тоньше капсула */
  display: flex;
  gap: 2px;
  position: relative;
  top: 2px;                  /* чуть ниже */
}

.seg-btn {
  padding: 3px 14px;         /* тоньше (было 5px) */
  border-radius: 7px;
  font-size: 15px;
  font-weight: 400;          /* не жирный (было 600) */
  color: var(--text-dim);
}
.seg-btn.active {
  background: var(--seg-active);
  color: var(--text);
}

/* ---------- search ---------- */
.search-bar {
  margin: 8px 16px 24px;
  background: var(--track);   /* цвет как у Exchange|Wallet */
  border-radius: 8px;
  padding: 5.5px 14px;          /* тоньше (было 13px) */
  display: flex;
  align-items: center;
  gap: 9px;
}
/* бегущая строка: окошко высотой в одну строку, лишнее скрыто */
.search-rotator { flex: 1; height: 20px; overflow: hidden; }
.search-list {
  list-style: none;
  transition: transform 0.5s ease;   /* плавность «переворота» */
}
.search-list li {
  height: 20px;
  line-height: 20px;
  color: var(--text-dim);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-icon { width: 19px; height: 19px; color: var(--text-dim); }

/* ---------- balance ---------- */
.balance { padding: 0 18px; margin-bottom: 20px; }

.balance-row { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }  /* воздух: Est.Total → $0.03 */
.balance-label { font-size: 14px; color: #d6d9df; }
.chev { width: 15px; height: 15px; color: #d6d9df; }

.balance-row.main { justify-content: space-between; align-items: center; margin-bottom: 18px; }  /* воздух: $0.03 → Today's PNL */
.balance-value {
  font-size: 34px;
  letter-spacing: -1px;
  line-height: 1;
  font-weight: 400;                        /* ГРУБО: 400 / 500 / 600 / 700 (шаг 100) */
  -webkit-text-stroke: 0px currentColor;   /* АТОМЫ: 0 … 0.5px (шаг 0.05). Больше 0.5 — НЕ ставить! */
}

.btn-yellow {
  background: #fcd535;      /* ярче/желтее (только эта кнопка) */
  color: #20242d;
  font-weight: 500;         /* текст тоньше (было 700). Ещё тоньше: 400 */
  font-size: 14px;
  padding: 9px 18px;        /* высота кнопки как была */
  border-radius: 6px;       /* минимальное скругление (почти прямые углы) */
}

.pnl-row {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  position: relative;
  top: 0px;                /* АТОМЫ: поднять = минус (-0.5px, -1px, -1.5px…), опустить = плюс */
}
.pnl-underline { color: var(--text); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--text-dim); text-underline-offset: 4px; }  /* текст белый, точки серые */
.pnl-value { color: var(--text); }   /* белый по умолчанию, пока PNL не посчитан */
.pnl-value.up { color: var(--green); }
.pnl-value.down { color: var(--red); }
.pnl-row .chev { width: 15px; height: 15px; color: var(--text-dim); }

/* ---------- pending card ---------- */
.pending-card {
  margin: 0 16px;
  margin-bottom: 17.3px;      /* ⬅ ЗАЗОР между Pending Task и блоком монет. АТОМЫ: 16.5px, 17px, 20px… */
  background: var(--card);
  border-radius: 14px;
  padding: 13px 15px;
}
.pending-title { font-size: 15px; font-weight: 400; margin-bottom: 9px; position: relative; top: -2px; }
.pending-body { display: flex; align-items: center; gap: 11px; }

.pending-icon {
  width: 30px; height: 30px;
  color: var(--yellow);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pending-icon svg { width: 26px; height: 26px; }

.pending-text { flex: 1; min-width: 0; }
.pending-heading { font-size: 15px; font-weight: 600; margin-bottom: 2px; position: relative; top: -2px; }
.pending-sub { font-size: 12px; color: var(--text-dim); position: relative; top: 2px; }  /* чуть ниже */

.btn-dark {
  background: var(--btn-dark);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 6px;        /* минимальное скругление, как Add Funds */
  white-space: nowrap;
}

/* ---------- market card ---------- */
.market-card {
  margin: 0 16px 15px;
  background: var(--card);
  border-radius: 16px;
  padding: 16px 0 2px;       /* 3-е число (4px) = НИЗ карточки. Меньше = короче снизу (можно 0) */
}

/* ===== 1) СТРОКА «Favorites / Hot / TradFi …» ===== */
.tabs-row {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 12px;      /* 3-е число (12px) = ЗАЗОР до строки Spot/Futures */
  position: relative;
  top: -6px;                  /* ВСЮ строку выше/ниже: минус = выше (-0.5px, -1px…) */
}
.tabs-scroll { flex: 1; display: flex; justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }

.tab {
  font-size: 15px;           /* РАЗМЕР всех вкладок */
  font-weight: 400;          /* ЖИРНОСТЬ неактивных (Hot, TradFi, Alpha…) */
  color: var(--text-dim);
  white-space: nowrap;
}
.tab.active {                /* только «Favorites» */
  color: var(--text);
  font-weight: 500;                        /* ГРУБО: 400/500/600/700 */
  -webkit-text-stroke: 0px currentColor;   /* АТОМЫ: 0 … 0.5px (шаг 0.05) */
}

/* ===== 2) СТРОКА «Spot / Futures» ===== */
.subtabs-row {
  display: flex; gap: 20px;  /* gap = расстояние МЕЖДУ Spot и Futures */
  padding: 0 16px 11px;      /* 3-е число (11px) = ЗАЗОР до строки Name */
  position: relative;
  top: -8px;                  /* ВСЮ строку выше/ниже: минус = выше */
}
.subtab {
  font-size: 15px;           /* РАЗМЕР */
  font-weight: 400;          /* ЖИРНОСТЬ «Futures» (неактивной) */
  color: var(--text-dim);
}
.subtab.active {             /* только «Spot» */
  color: var(--text);
  font-weight: 300;                        /* ГРУБО */
  -webkit-text-stroke: 0px currentColor;   /* АТОМЫ: 0 … 0.5px */
}

/* ===== 3) СТРОКА «Name / Last Price / 24h chg%» ===== */
.table-head {
  display: flex;
  align-items: center;
  padding: 0 16px 4px;       /* 3-е число (4px) = ЗАЗОР до первой монеты */
  font-size: 12px;           /* РАЗМЕР */
  font-weight: 300;          /* ЖИРНОСТЬ */
  color: var(--text-dim-2);
  position: relative;
  top: -6px;                  /* ВСЮ строку выше/ниже: минус = выше */
}
/* колонки заголовка привязаны к структуре строк, чтобы не разъезжались */
.col-name { flex: 1; }
.col-price { margin-right: 14px; }              /* тот же зазор, что у .row-price */
.col-chg { min-width: 80px; text-align: center; } /* та же ширина, что у бейджа */

.table-body {
  display: flex; flex-direction: column;
  position: relative;
  top: -4px;                  /* ПОДНЯТЬ все монеты: минус (-1px, -2px…). Опустить: плюс */
}

/* ---------- Spot/Futures: таблица и пустой экран занимают ОДНУ область ---------- */
.table-wrap { position: relative; }   /* якорь для наложения пустого экрана поверх таблицы */
.empty-state {
  display: none;               /* показывается через JS при выборе Futures */
  position: absolute;
  inset: 0;                    /* точно поверх table-head+table-body+view-more -> высота карточки не меняется */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--card);     /* перекрывает скрытую (visibility:hidden) таблицу под собой */
}
.empty-icon { width: 44px; height: 44px; color: var(--text-dim-2); }
.empty-btn { padding: 6px 14px; font-size: 12px; }

.row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 16px;        /* 1-е число (12px) = РАССТОЯНИЕ между монетами. Меньше = плотнее */
}

.coin-icon {
  width: 28px; height: 28px;      /* меньше (было 34) */
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.asset-row { align-items: flex-start; }
.asset-row .coin-icon { width: 20px; height: 20px; margin-top: 2px; }  /* АТОМЫ: меньше + на уровне текста USDT */
.asset-row .row-name { font-size: 16px; position: relative; top: 2px; }  /* АТОМЫ: USDT чуть меньше */

.row-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; }
.row-name .pair { color: var(--text-dim); font-weight: 400; font-size: 15px; }

.row-price { text-align: right; margin-right: 14px; }
.row-price .last { font-size: 15px; font-weight: 500; }                              /* меньше (было 17) */
.row-price .sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }        /* меньше (было 13) */
.asset-row .row-price { position: relative; top: 2px; }                              /* АТОМЫ: 0.03 на уровне USDT */
.asset-row .row-price .sub { margin-top: 6px; }                                      /* АТОМЫ: $0.030000 на уровне TetherUS */

.row-chg {
  min-width: 80px;
  display: flex;
  align-items: center;       /* по центру бейджа: вертикаль */
  justify-content: center;   /* по центру бейджа: горизонталь */
  padding: 7px 0;          /* толще: выше+ниже (1-е число) */
  border-radius: 6px;        /* минимальное скругление, как Try Now */
  font-size: 13px;           /* чуть меньше (было 15) */
  font-weight: 500;
  color: #fff;
}
.row-chg.down { background: var(--red); }
.row-chg.up { background: var(--green); }

.view-more {
  display: block; width: 100%; text-align: center;
  padding: 8px 16px 16px;
  color: var(--text-dim);
  font-size: 13px;           /* РАЗМЕР */
  font-weight: 300;          /* ЖИРНОСТЬ (400 тонкий … 700 жирный) */
  position: relative;
  left: -8px;                 /* ВЛЕВО / ВПРАВО: минус = влево, плюс = вправо */
  top: -5px;                  /* ВВЕРХ / ВНИЗ:   минус = выше,  плюс = ниже */
}

/* ---------- discover row ---------- */
.discover-row {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--border);   /* линия над Discover, во всю ширину */
  padding: 9px 16px 18px;                /* текст ближе к линии */
  gap: 10px;
  margin-bottom: 60px;   /* ⬅ ЗАПАС ПРОКРУТКИ вниз. Больше = дальше листается (0 = нельзя) */
  position: relative;
  top: -6px;             /* ⬅ ВЕСЬ блок Discover выше/ниже: минус = выше */
}
.discover-scroll { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; overscroll-behavior-x: contain; }  /* скролл ТОЛЬКО вбок, без размазывания */
.discover-scroll::-webkit-scrollbar { display: none; }

.dtab {
  font-size: 16px;           /* РАЗМЕР текста (Discover, Following…) */
  font-weight: 400;          /* ЖИРНОСТЬ неактивных (Following, Campaign…) */
  color: var(--text-dim);
  white-space: nowrap;
  padding-bottom: 8px;       /* РАССТОЯНИЕ от текста до жёлтой линии (больше = дальше) */
  position: relative;
}
.dtab.active {               /* только «Discover» */
  color: var(--text);
  font-weight: 400;                        /* ГРУБО: 400/500/600/700 */
  -webkit-text-stroke: 0px currentColor;   /* АТОМЫ: 0 … 0.5px (шаг 0.05) */
}
.dtab.active::after {
  content: "";
  position: absolute;
  bottom: -3px;                 /* минус (-2px) = линия ещё ниже, не растягивая строку */
  left: 50%;
  transform: translateX(-50%);   /* по центру под текстом */
  width: 18px;                   /* короче (было 26) */
  height: 4px;
  background: var(--yellow);
  border-radius: 0;              /* без скруглений */
}

/* ---------- bottom nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);   /* свой composite-слой — на iOS фикс-элементы без этого могут "дёргаться"/съезжать во время резинового оттягивания страницы вниз при скролле */
  will-change: transform;
  width: 440px;
  max-width: 100%;
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 10px 0 26px;   /* 3-е число = ВОЗДУХ ПОД иконками Home/Markets… (больше = ниже воздуха) */
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-dim);
  font-size: 11px;
}
.nav-item svg { width: 24px; height: 24px; }
.nav-item.active { color: var(--yellow); }              /* иконка активной вкладки жёлтая */
.nav-item.active span { color: var(--text); }          /* ПОДПИСЬ активной (Home) — белая */
.nav-item[data-page="assets"].active { color: var(--text); }   /* Assets: иконка активной вкладки БЕЛАЯ, не жёлтая */
.nav-item[data-page="trade"].active .cvt-arrow { fill: #fff; }
.nav-item[data-page="trade"].active .cvt-diamond { fill: var(--yellow); }

/* ===== ДЕСКТОП: превью ровно как экран iPhone 16 Pro Max =====
   440×900 CSS-пикселей = реальная видимая область на твоём телефоне
   (экран 440×956 минус ~56px статус-бара). Что влезло тут — влезет и на телефоне. */
@media (min-width: 521px) {
  .phone {
    width: 440px;
    height: 900px;
    min-height: 900px;
    max-height: 900px;
    overflow-y: auto;          /* контент скроллится ВНУТРИ рамки, как на телефоне */
    overflow-x: hidden;
    padding-bottom: 0;         /* меню теперь в потоке, компенсация не нужна */
    border-radius: 26px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
    scrollbar-width: none;
  }
  .phone::-webkit-scrollbar { display: none; }

  /* меню прилипает к низу РАМКИ, а не к окну браузера */
  .bottom-nav {
    position: sticky;
    bottom: 0;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
  }
}

/* ===== Pull-to-refresh: анимация логотипа Binance ===== */
/* блокируем нативную «оттяжку»/перезагрузку браузера, чтобы жест был наш */
html, body { overscroll-behavior-y: contain; touch-action: pan-x pan-y; }  /* блокирует pinch-to-zoom и двойной тап-зум, обычный скролл разрешён */
* { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }  /* нельзя выделить текст (как в нативном приложении) */

/* лого вклеено В контент (абсолют вверху) — двигается ВМЕСТЕ с ним, оторваться не может */
.ptr-content { position: relative; transition: transform .3s cubic-bezier(.22,1,.36,1); will-change: transform; }
.ptr-content.dragging { transition: none; }

.ptr-anchor {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;   /* логотип строго по центру */
  pointer-events: none;      /* жест не мешает кликам по интерфейсу */
}
.ptr-logo {
  opacity: 0;
  transform: translateY(-60px) scale(.6);   /* спрятан над верхом контента */
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .3s ease; /* пружина при отпускании */
  will-change: transform, opacity;
}
.ptr-logo.dragging { transition: none; }     /* во время протяжки — 1:1 за пальцем, без сглаживания */

/* твоё видео-лого как индикатор обновления */
.ptr-video {
  width: 36px; height: 36px;   /* РАЗМЕР анимации — крути это число */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ===== Страница Assets (кошелёк) ===== */
.page-assets { padding: 4px 16px 40px; }

.wtabs-row {
  display: flex; gap: 14px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  position: sticky; top: 0; z-index: 70;   /* фикс: не двигается со страницей, поверх pull-to-refresh лого */
  background: var(--bg);
}
.wtab { font-size: 16px; font-weight: 400; color: var(--text-dim); position: relative; top: 1px; }  /* АТОМЫ: размер/подъём текста, полоску под рядом не трогает */
.wtab.active { color: var(--text); font-weight: 400; }

.wallet-value-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wallet-value-label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #d6d9df; font-weight: 350; position: relative; top: -4px; }  /* АТОМЫ: не жирный + подъём текста с глазом вместе */
.eye-icon { width: 18px; height: 18px; color: var(--text-dim); }
.wallet-value-icons { display: flex; align-items: center; gap: 14px; }

.wallet-balance-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.wallet-value { font-size: 34px; position: relative; top: -12px; }   /* тот же размер, что и на Home; АТОМЫ: подъём */
.usd-drop { display: flex; align-items: center; gap: 3px; font-size: 15px; color: var(--text-dim); position: relative; top: -12px; }  /* едет вместе с балансом */
.usd-drop svg { width: 13px; height: 13px; }
.usd-text { color: var(--text); font-size: 14px; }   /* слово USD — белое, чуть меньше стрелки; стрелка приглушённая */

.wallet-pnl-row { margin-bottom: 16px; top: -10px; }  /* АТОМЫ: подъём всей строки (текст, $, %, стрелка) */

.wallet-actions { display: flex; gap: 10px; margin-bottom: 18px; }
.wallet-btn { flex: 1; text-align: center; padding-top: 9px; padding-bottom: 9px; font-weight: 400; }

.wsubtabs-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  margin-bottom: 16px;
}
.wsubtabs-left { display: flex; gap: 18px; position: relative; }
.wsubtab { font-size: 16px; font-weight: 400; color: var(--text-dim); position: relative; top: 2px; padding-bottom: 10px; }  /* АТОМЫ: позиция текста */
.wsubtab.active { color: var(--text); font-weight: 400; }
.wsubtab-indicator {
  position: absolute; bottom: -1px; left: 0;
  width: 16px; height: 3px; background: var(--yellow); border-radius: 0;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.asset-card { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.asset-row { padding: 0 0 12px; }
.asset-sub { font-size: 12px; color: var(--text-dim); font-weight: 350; margin-top: 5px; }
.asset-pnl-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 350; margin-bottom: 10px; margin-left: 31px; margin-right: 14px; }  /* тоньше (как TetherUS) + сдвиг вправо на уровень тикера монеты (иконка 20px + gap 11px); справа тот же отступ, что у row-price */
.asset-pnl-label { color: var(--text-dim); }
.asset-pnl-value { color: var(--green); }
.asset-pnl-value.down { color: var(--red); }
.asset-actions { display: flex; justify-content: flex-end; gap: 9px; margin-right: 14px; }
.asset-btn { padding: 5px 18.5px; font-size: 12px; font-weight: 400; }  /* АТОМЫ: пошире и не полужирный, как в оригинале */

/* вкладка Account: Spot/Earn/Futures вместо списка монет */
.account-view { position: relative; top: -12px; }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 15px; font-weight: 500; }
.account-row-value { color: var(--text); }
.account-row:nth-child(2) { position: relative; top: -2px; }  /* Earn */
.account-row:nth-child(3) { position: relative; top: -3.5px; }  /* Futures */

/* Assets <-> Account: контент едет синхронно с жёлтой полоской, а не пропадает/появляется */
.wsubtab-content-wrap { overflow: hidden; }
.wsubtab-content-track {
  display: flex;
  transition: transform .25s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.assets-view, .account-view { flex: 0 0 100%; min-width: 100%; }

/* карточки BTC/ETH/BNB/GRAM — иконка/шрифты как у USDT, только полоска-разделитель ближе к кнопкам Earn/Trade */
.asset-card-sm { padding-bottom: 9.5px; }


/* ===== ВРЕМЕННАЯ dev-кнопка «очистить кэш» (удалить вместе с кнопкой в HTML) ===== */
#dev-clear-cache {
  position: fixed;
  right: 10px;
  bottom: 90px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e15662;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  opacity: .85;
}
#dev-clear-cache:active { transform: scale(.92); }


/* ===== Add Funds: нижний лист "Select Deposit Method" ===== */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 200;
  touch-action: none;  /* тёмная область над листом — тоже не должна листать страницу под ней */
}
.sheet-overlay.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 50%;
  top: 40vh; bottom: calc(-1 * env(safe-area-inset-bottom));   /* АТОМЫ: верх листа — фикс. точка по высоте экрана. Bottom сдвинут вниз на зону home indicator — иначе там просвечивал чёрный фон страницы */
  width: 440px; max-width: 100%;
  display: flex; flex-direction: column;   /* шапка (handle+title) фикс., скроллится только .sheet-rows ниже */
  overflow: hidden;   /* список карточек не должен вылезать за фон листа снизу */
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  padding: 10px 16px 0;
  transform: translate(-50%, 100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  z-index: 201;
  touch-action: none;  /* сама шапка (полоска, заголовок, зазоры вокруг) — не скроллит ничего */
}
.sheet.open { transform: translate(-50%, -19.5px); }
.sheet.dragging { transition: none; }  /* 1:1 за пальцем при перетаскивании за полоску */

.sheet-handle { width: 42px; height: 4px; background: #454b58; border-radius: 2px; margin: 0 auto 20px; flex-shrink: 0; }
.sheet-title { font-size: 17px; font-weight: 500; margin-bottom: 16px; position: relative; top: -3px; flex-shrink: 0; color: var(--text); }

.sheet-rows {
  flex: 1 1 auto;
  min-height: 0;   /* классический фикс: без этого flex-элемент с overflow:auto не сжимается, а раздувает родителя */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* нативный инерционный скролл + "резиновый" отскок на iOS внутри fixed-листа */
  overscroll-behavior: contain;  /* даже если контент дотянется до края своего скролла — не даём ему утечь на страницу под листом */
  touch-action: pan-y;  /* тут скролл разрешён — это единственная скроллящаяся часть листа */
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
  scrollbar-width: none;  /* без видимой полоски скролла */
}
.sheet-rows::-webkit-scrollbar { display: none; }

.sheet-row {
  display: flex; align-items: flex-start; gap: 16.58px;
  border: 1px solid var(--border); border-radius: 16.58px;
  padding: 16.58px; margin-bottom: 14.21px;
  min-height: 80px;   /* запас по высоте — иконка растёт сюда, не раздувая карточку и не толкая соседние */
  touch-action: pan-y;  /* тянуть по карточкам скроллит лист, но не страницу под ним */
}
.sheet-row-icon-wrap { width: 27px; height: 27px; flex-shrink: 0; color: var(--text); margin-top: 2.06px; }
.sheet-row-icon-wrap svg { width: 100%; height: 100%; display: block; }
.sheet-row-title { font-size: 15.45px; font-weight: 400; margin-bottom: 4.12px; color: var(--text); }
.sheet-row-sub { font-size: 12.36px; color: var(--text-dim); line-height: 1.4; }

/* Withdraw-лист короче остальных (4 карточки без доп. кнопок) — не растягиваем его
   на фикс. 60vh как Add Funds/Choose Network, а сажаем на контент снизу */
#withdraw-sheet { top: auto; max-height: 82vh; }
#withdraw-sheet .sheet-row-icon-wrap { width: 21px; height: 21px; margin-top: 3px; }
/* Карточки этого листа мельче и легче, чем в Add Funds: подпись у оригинала укладывается
   в одну строку (у нас переносилась на две). Правим только тут, чтобы не задеть Add Funds. */
#withdraw-sheet .sheet-row { gap: 14px; }
#withdraw-sheet .sheet-row-title { font-size: 14.8px; }
#withdraw-sheet .sheet-row-sub { font-size: 10.8px; font-weight: 350; }

/* ===== Страница "Select Asset" ===== */
.page-select-asset {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 150;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;  /* iOS: без этого скролл внутри fixed-блока мог "проваливаться" на страницу под ним */
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 40px;
}

.sa-topbar {
  display: flex; align-items: center; justify-content: center; position: relative;
  padding: 10px 16px 14px;
  top: -10px;
}
.sa-topbar #sa-back, .sa-topbar #dc-back, .sa-topbar #da-back, .sa-topbar #wa-back, .sa-topbar #ea-back, .sa-topbar #sc-back, .sa-topbar #co-back { position: absolute; left: 12px; }
.sa-topbar #wa-search-btn { position: absolute; right: 12px; }
.sa-title { font-size: 17px; font-weight: 400; }

.sa-search-bar {
  margin: 4px 16px 20px;
  background: var(--track);
  border-radius: 8px;
  padding: 6.2px 14px;
  display: flex; align-items: center; gap: 9px;
  position: relative; top: -1px;
}
.sa-search-placeholder { color: var(--text-dim); font-size: 14px; font-weight: 300; }

.sa-section-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; }
#sa-history-row { margin-top: -15px; }  /* поднимает History и всё, что ниже (обычный поток) */
.sa-section-label { font-size: 15px; font-weight: 300; }
.sa-section-row .icon-btn { color: var(--text-dim); }

.sa-chip-row { padding: 0 16px 8px; }
.sa-chip { background: var(--track); color: var(--text); font-size: 14px; font-weight: 300; padding: 4px 13px; border-radius: 8px; }

.sa-alpha-marker { padding: 16px 16px 4px; font-size: 13px; color: var(--text-dim); }

.sa-list { padding: 0 16px; }
.sa-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.sa-row .coin-icon { width: 28px; height: 28px; }
.sa-row-text { flex: 1; min-width: 0; font-size: 17px; font-weight: 500; }
.sa-row-sub { font-size: 13px; color: var(--text-dim); font-weight: 350; margin-top: 2px; }
.sa-row-status { font-size: 11px; color: var(--text-dim); font-weight: 350; margin-right: 8px; }

/* "Withdraw Asset" -> Select Asset: тип кошелька сверху + список монет, у которых баланс > 0 (из БД) */
/* Список обычно короче экрана (3-5 монет) — scrollHeight===clientHeight означает, что скроллить
   вообще нечему, и с overscroll-behavior:contain страница ощущается "мёртвой" (даже резинка не тянется).
   Запас снизу даёт странице реальный (пусть небольшой) ход, чтобы палец чувствовал живой скролл. */
#wa-asset-list { min-height: calc(100vh + 60px); box-sizing: border-box; padding-bottom: 40px; }
.wa-type-row { display: flex; align-items: center; gap: 8px; padding: 6px 16px 22px; }
.wa-wallet-icon { width: 20px; height: 20px; color: var(--text); }
.wa-type-row span { font-size: 15px; }
.wa-chevron { width: 16px; height: 16px; color: var(--text-dim); }
.wa-row-price { text-align: right; margin-left: auto; }
.wa-row-amount { font-size: 15px; font-weight: 500; }
.wa-row-usd { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ===== Страница "Enter address" ===== */
.ea-title { font-weight: 700; }
.ea-topbar-right { position: absolute; right: 12px; display: flex; align-items: center; gap: 16px; }
.ea-icon { width: 20px; height: 20px; }

.ea-body { padding: 8px 16px 40px; min-height: calc(100vh + 60px); box-sizing: border-box; }

.ea-network-pill {
  display: flex; align-items: center; gap: 8px;
  background: var(--track); color: var(--text-dim);
  border-radius: 10px; padding: 10px 16px;
  font-size: 15px;
}
.ea-network-pill.selected { color: var(--text); }
.ea-pill-icon, .ea-pill-icon-wrap { width: 18px; height: 18px; flex-shrink: 0; display: flex; }
.ea-pill-icon-wrap svg, .ea-pill-icon-wrap img { width: 100%; height: 100%; display: block; border-radius: 50%; }

.ea-address-wrap { position: relative; margin: 40px 0 20px; }
.ea-address-input, .ea-address-display {
  display: block; width: 100%; box-sizing: border-box;
  font-family: inherit; font-weight: 400;
  font-size: 28px; line-height: 1.25; min-height: 34px;
  white-space: pre-wrap; word-break: break-all;
}
.ea-address-input {
  position: relative; background: transparent; border: none; outline: none;
  color: transparent; caret-color: var(--text);
  resize: none; overflow: hidden; padding: 0; margin: 0;
}
.ea-address-input::placeholder { color: #707a8a; -webkit-text-fill-color: #707a8a; }
.ea-address-input:placeholder-shown { font-size: 50px; line-height: 1; min-height: 60px; }
.ea-address-display {
  position: absolute; inset: 0; pointer-events: none; color: var(--text);
}
.ea-address-display .hl { color: var(--yellow); }


.ea-network-pill.error { border: 1.5px solid #f6465d; }

.ea-network-warning {
  display: flex; align-items: flex-start; gap: 10px;
  background: #352933; color: #f6465d;
  border-radius: 10px; padding: 12px 16px; margin-top: 10px;
  font-size: 14px; line-height: 1.4;
}
.ea-network-warning svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.ea-network-warning.info { background: #3a331f; color: var(--text); }
.ea-network-warning.info a { color: var(--yellow); text-decoration: none; }

.ea-next-btn.active { background: #fcd535; color: #20242d; }

/* ===== Страница "Choose Network" ===== */
.cn-list { padding: 0 16px 24px; }
.cn-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px;
  display: flex; gap: 12px;
  position: relative;
}
/* Приостановленная сеть: бейдж в правом верхнем углу, карточка приглушена и некликабельна */
.cn-card.suspended { opacity: .55; }
.cn-suspended {
  position: absolute; top: 0; right: 0;
  background: #3a2730; color: #f6465d;
  font-size: 11.5px; padding: 3px 10px;
  border-radius: 0 13px 0 8px;
}
.cn-icon-wrap { width: 32px; height: 32px; flex-shrink: 0; margin-top: 2px; }
.cn-icon-wrap svg, .cn-icon-wrap img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.cn-card-body { flex: 1; min-width: 0; }
.cn-card-head { font-size: 15.5px; }
.cn-code { font-weight: 600; }
.cn-name { color: var(--text-dim); font-weight: 400; margin-left: 4px; }
.cn-detail { font-size: 13.5px; color: var(--text-dim); margin-top: 8px; }
.cn-footer { padding: 4px 16px 24px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

.ea-chip-row { display: flex; gap: 6px; }
.ea-chip {
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--track); color: var(--text);
  border-radius: 10px; padding: 9px 10px;
  font-size: 14px;
}
.ea-chip-icon { width: 17px; height: 17px; flex-shrink: 0; }

.ea-next-btn {
  position: fixed; left: 50%; bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  width: calc(440px - 32px); max-width: calc(100% - 32px);
  border-radius: 8px;
  padding-top: 13px; padding-bottom: 13px;
  background: #625b31; color: #202630; font-weight: 500; font-size: 14px; border: none;
}

/* ===== Камера сканирования QR ===== */
.page-qr-scan {
  position: fixed; inset: 0; background: #131313; color: #fff; z-index: 250;
  display: flex; flex-direction: column; align-items: center;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.qr-scan-topbar {
  width: 100%; display: flex; align-items: center; justify-content: center; position: relative;
  padding: 14px 16px;
}
.qr-scan-close { position: absolute; left: 12px; color: #fff; }
.qr-scan-close svg { width: 20px; height: 20px; }
.qr-scan-title { font-size: 17px; font-weight: 700; }

.qr-scan-frame-wrap {
  position: relative; width: 280px; height: 280px; margin-top: 64px;
  border-radius: 16px; overflow: hidden; background: #2a2a2a;
}
.qr-scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-corner { position: absolute; width: 30px; height: 30px; border: 3px solid #fff; }
.qr-corner.tl { top: -1.5px; left: -1.5px; border-right: none; border-bottom: none; border-radius: 12px 0 0 0; }
.qr-corner.tr { top: -1.5px; right: -1.5px; border-left: none; border-bottom: none; border-radius: 0 12px 0 0; }
.qr-corner.bl { bottom: -1.5px; left: -1.5px; border-right: none; border-top: none; border-radius: 0 0 0 12px; }
.qr-corner.br { bottom: -1.5px; right: -1.5px; border-left: none; border-top: none; border-radius: 0 0 12px 0; }

.qr-scan-hint { color: #fff; font-size: 15px; margin-top: 28px; text-align: center; padding: 0 30px; }

.qr-upload-btn {
  margin-top: auto; margin-bottom: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #fff; font-size: 14px;
}
.qr-upload-icon-wrap {
  width: 48px; height: 48px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.qr-upload-icon-wrap svg { width: 24px; height: 24px; }

.sa-alpha-index {
  position: fixed; right: 6px; top: 215px; bottom: 194px;   /* АТОМЫ: от Trending до 1000PEPPER, не по центру экрана */
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  font-size: 9.5px; color: var(--text-dim); line-height: 1;
  z-index: 151;
}
.sa-alpha-index span.active { color: var(--text); font-weight: 600; }

/* ===== Страница "Deposit {Coin}" ===== */
.page-deposit-coin {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 155;
  overflow: hidden;   /* лист Choose Network всегда лежит поверх — фон не должен скроллиться сам по себе,
                          иначе жест на карточке сети иногда утекает на эту страницу вместо листа */
  touch-action: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: 40px;
}
.dc-topbar-right { position: absolute; right: 12px; display: flex; align-items: center; gap: 4px; }

/* ===== Декоративная иллюстрация над листом Choose Network ===== */
.dc-hero {
  position: relative;
  height: 250px;
  margin: 0 0 12px;
  overflow: hidden;
}
.dc-block { position: absolute; background: #242C36; border-radius: 7px; }
.dc-block-rect2 { top: 132px; left: 277px; width: 66px; height: 14px; }
.dc-block-rect3 { top: 165px; left: 78px; width: 39px; height: 14px; }

/* трассировано из референса (pin/network иконки + L-блок + шевроны), см. icons/dc-hero-illust.svg */
.dc-hero-illust {
  position: absolute; top: 65px; left: 0;
  width: 383px; height: 223px;
}

.dc-network-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 14px;
}
.dc-network-label { font-size: 15px; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; }
.dc-network-placeholder { font-size: 13px; font-weight: 350; color: var(--text-dim); }
.dc-swap-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--track); border: none; border-radius: 10px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.dc-swap-btn svg { width: 20px; height: 20px; }
.dc-divider { border-top: 1px solid var(--border); margin: 0 16px; }

/* ===== Лист "Choose Network" ===== */
.net-card {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
  touch-action: pan-y;
}
.net-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.net-code { font-size: 15px; font-weight: 500; }
.net-name { font-size: 12px; color: var(--text-dim); font-weight: 350; }
.net-divider { border-top: 1px solid var(--border); margin-bottom: 10px; }
.net-detail { font-size: 12px; color: var(--text-dim); font-weight: 350; line-height: 1.7; }

/* высота листа подстраивается под число карточек сетей: у BTC/ETH сетей много — лист почти на весь экран,
   у BNB сетей мало — лист короче (top считается в JS при открытии, см. setupDepositCoinFlow) */
#network-sheet { top: 101px; }
#network-rows { flex: 0 1 auto; }

.net-disclaimer {
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--track); border-radius: 10px;
  padding: 10px 12px;
  margin: 0 12px calc(16px + env(safe-area-inset-bottom));
  flex-shrink: 0;
}
.net-disclaimer-icon { width: 14px; height: 14px; color: var(--text-dim); flex-shrink: 0; margin-top: 1px; }
.net-disclaimer span { font-size: 11px; color: var(--text-dim); font-weight: 350; line-height: 1.45; }

/* ===== Страница адреса депозита ===== */
.page-deposit-address {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 210;   /* поверх открытого листа "Choose Network" (201), т.к. открывается тапом по его карточке */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-top: env(safe-area-inset-top);
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.da-qr-wrap { display: flex; justify-content: center; padding: 18px 0 26px; }
.da-qr-card {
  position: relative;
  width: 182px; height: 182px;
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.da-qr-img { width: 100%; height: 100%; }
.da-qr-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 31px; height: 31px; border-radius: 9px;
  background: #fff; border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--border);
}
/* Иконка монеты — круглая: у PNG свой тёмный квадратный фон, при радиусе 6px по углам
   торчали чёрные уголки (в оригинале — чистый круг). */
.da-qr-badge img { width: 24px; height: 24px; border-radius: 50%; }

.da-section { padding: 0 16px; }
.da-label { font-size: 13px; color: var(--text-dim); font-weight: 350; }

.da-network-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.da-network-code { font-size: 15.7px; font-weight: 400; color: var(--text); }
.da-network-name { font-size: 13px; color: var(--text-dim); font-weight: 350; margin-top: 9px; }

.da-contract-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 14px 16px;
}
.da-contract-value { font-size: 13px; color: var(--text-dim); font-weight: 350; border-bottom: 1px dotted var(--text-dim); }

.da-address-label-row { display: flex; align-items: center; gap: 2px; padding: 25px 0 10px; color: var(--text-dim); }
.da-address-label-row .da-label { padding: 0; }
.da-chevron { width: 16px; height: 16px; color: var(--text-dim); }

.da-address-block { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 14px; }
.da-address-text {
  flex: 1; min-width: 0;
  font-size: 17.7px; font-weight: 350; line-height: 1.5;
  word-break: break-all;
  color: var(--text);
}
.da-address-text .hl { color: var(--yellow); }
.da-copy-btn {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--track); border: none; border-radius: 10px; color: var(--text);
  display: flex; align-items: center; justify-content: center;
}
.da-copy-btn svg { width: 18px; height: 18px; }
.da-copy-btn .da-copy-check { display: none; color: var(--green); position: absolute; }
.da-copy-btn.copied svg:not(.da-copy-check) { display: none; }
.da-copy-btn.copied .da-copy-check { display: block; }

.da-contract-warn {
  font-size: 12px; color: var(--red); font-weight: 350; line-height: 1.5;
  margin-top: -4px; padding-bottom: 14px;
}

.da-more-details {
  width: 100%; background: none; border: none;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 0;
  font-size: 13px; color: var(--text-dim); font-weight: 350;
  position: relative;
}
.da-more-details.open { top: -2px; }
.da-chevron-down { width: 16px; height: 16px; color: var(--text-dim); transition: transform .2s ease; }
.da-more-details.open .da-chevron-down { transform: rotate(180deg); }
.da-more-panel { padding: 20px 16px 11px; }
.da-more-row { display: flex; align-items: center; justify-content: space-between; padding: 9.5px 0; font-size: 11.3px; }
.da-more-row > span:first-child { color: var(--text-dim); font-weight: 350; }
.da-more-row > span:last-child { color: var(--text); font-weight: 350; }
.da-dotted { border-bottom: 1px dotted var(--text-dim); }
.da-more-value-chevron { display: flex; align-items: center; gap: 2px; }
.da-more-value-chevron svg { width: 15px; height: 15px; color: var(--text-dim); }
.da-more-note { font-size: 12px; color: var(--text-dim); font-weight: 350; line-height: 1.6; padding: 0.5px 0; }
.da-more-note a { color: var(--yellow); text-decoration: none; }

.da-save-btn {
  position: fixed; left: 50%; bottom: env(safe-area-inset-bottom);
  transform: translateX(-50%);
  width: calc(440px - 32px); max-width: calc(100% - 32px);
  border-radius: 8px;
  padding-top: 13px; padding-bottom: 13px;
  background: #fcd535; color: #20242d; font-weight: 500; font-size: 14px; border: none;
}

/* ===== Страница логина ===== */
.page-login {
  position: fixed; inset: 0;
  z-index: 500;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  padding-top: calc(24px + env(safe-area-inset-top));
}

.login-card { width: 100%; max-width: 360px; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 44px; }
.login-logo { width: 26px; height: 26px; color: var(--yellow); }
.login-wordmark { font-size: 20px; font-weight: 700; color: var(--yellow); letter-spacing: 0.3px; }
.login-title { font-size: 22px; font-weight: 500; color: var(--text); margin-bottom: 28px; }

.login-field { margin-bottom: 18px; }
.login-field label { display: block; font-size: 13px; color: var(--text-dim); font-weight: 350; margin-bottom: 7px; }
.login-field input {
  width: 100%; background: var(--track); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; font-size: 15px; color: var(--text); font-family: inherit;
  -webkit-appearance: none; appearance: none;
}
.login-field input:focus { outline: none; border-color: var(--yellow); }

.login-error {
  font-size: 13px; color: var(--red); font-weight: 350;
  margin: -6px 0 16px; line-height: 1.4;
}

.login-submit {
  width: 100%; border-radius: 8px; margin-top: 6px;
  padding-top: 13px; padding-bottom: 13px;
  background: #fcd535; color: #20242d; font-weight: 500; font-size: 14px; border: none;
  font-family: inherit;
}
.login-submit:disabled { opacity: 0.6; }

/* ===== MEMO на "Enter address" (только сети TON/TONMEMO, поле необязательное) ===== */
.ea-memo { margin-top: 34px; }
.ea-memo-label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text); margin-bottom: 12px; }
.ea-memo-label svg { width: 16px; height: 16px; color: var(--text-dim); }
.ea-memo-input-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 8px; padding: 13px 14px;
}
.ea-memo-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: inherit; font-size: 14px; color: var(--text);
}
.ea-memo-input::placeholder { color: var(--text-dim); }
.ea-memo-scan { flex-shrink: 0; color: var(--text-dim); display: flex; }
.ea-memo-scan svg { width: 19px; height: 19px; }

/* ===== Страница "Send {Coin}" ===== */
.sc-title { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.sc-title-icon { width: 22px; height: 22px; border-radius: 50%; display: block; }

.sc-body { padding: 0 16px; }

.sc-onetime {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--text);
  border-radius: 8px; padding: 8px 14px; font-size: 11.6px;
}
.sc-onetime svg { width: 14px; height: 14px; color: var(--text); }

.sc-amount-row { display: flex; align-items: center; gap: 12px; margin-top: 45px; }
.sc-amount-wrap { flex: 1; min-width: 0; display: flex; align-items: baseline; position: relative; }
.sc-amount, .sc-ticker, .sc-mirror {
  font-family: inherit; font-size: 53px; font-weight: 500; line-height: 1.1; letter-spacing: -1px;
}
.sc-amount {
  background: none; border: none; outline: none; padding: 0;
  color: var(--text); min-width: 22px;
}
.sc-ticker { color: #6f7684; margin-left: 14px; white-space: nowrap; }
/* невидимый близнец: по его ширине подгоняем input, чтобы тикер стоял вплотную к числу */
.sc-mirror { position: absolute; visibility: hidden; white-space: pre; pointer-events: none; }

.sc-max {
  flex-shrink: 0; background: var(--card); color: var(--text);
  border-radius: 8px; padding: 8px 12px; font-size: 11.1px;
}

.sc-usd { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); margin-top: 13px; }
.sc-pencil { width: 15px; height: 15px; color: var(--text-dim); }

.sc-available { font-size: 11.6px; color: var(--text-dim); margin-top: 24px; }
.sc-available > span:last-child { color: var(--text); }

.sc-warn {
  display: flex; align-items: flex-start; gap: 11px;
  background: #363730; color: var(--text);
  border-radius: 10px; padding: 15px 16px; margin-top: 37px;
  font-size: 12.5px; line-height: 1.5;
}
.sc-warn svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; color: var(--text); }
.sc-warn a { color: var(--yellow); text-decoration: none; }

.sc-caution { display: flex; align-items: center; gap: 5px; font-size: 10.7px; color: var(--text-dim); margin-top: 37px; padding: 0; }
.sc-caution svg { width: 15px; height: 15px; }

.sc-bottom {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: env(safe-area-inset-bottom);
  width: 440px; max-width: 100%;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 14px 16px 10px;
}
.sc-bottom-row { display: flex; align-items: center; justify-content: space-between; font-size: 11.1px; color: var(--text); padding: 4px 0; }
.sc-bottom-label { display: flex; align-items: center; gap: 9px; }
.sc-bicon { width: 17px; height: 17px; color: var(--text); flex-shrink: 0; }

.sc-withdraw {
  width: 100%; margin-top: 12px; border-radius: 8px;
  padding-top: 14px; padding-bottom: 14px;
  background: #625b31; color: #202630; font-weight: 500; font-size: 14px; border: none;
}
.sc-withdraw.active { background: #fcd535; color: #20242d; }

/* ===== "Confirm order" ===== */
.co-body { padding: 0 16px; text-align: center; }
.co-coin-icon { width: 52px; height: 52px; border-radius: 50%; margin: 30px auto 18px; display: block; }
.co-receive { font-size: 23px; font-weight: 700; }
.co-usd { font-size: 14px; color: var(--text-dim); margin-top: 6px; }

.co-card { text-align: left; background: var(--card); border-radius: 14px; padding: 16px; margin-top: 30px; }
.co-card-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.co-card-icon { width: 20px; height: 20px; color: var(--text-dim); flex-shrink: 0; margin-top: 2px; }
.co-card-text { flex: 1; min-width: 0; }
.co-card-label { font-size: 13px; color: var(--text-dim); margin-bottom: 3px; }
.co-card-value { font-size: 14.5px; font-weight: 500; word-break: break-all; }
.co-address .hl { color: var(--yellow); }

.co-row { display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 14px; padding: 14px 0; }
.co-row span:first-child { color: var(--text-dim); }

.co-bottom { position: fixed; left: 50%; transform: translateX(-50%); bottom: env(safe-area-inset-bottom); width: 440px; max-width: 100%; padding: 0 16px 14px; }
.co-note { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 14px; }
.co-slider {
  position: relative; height: 52px; border-radius: 26px;
  background: #625b31; overflow: hidden;
  display: flex; align-items: center;
  touch-action: none;
}
.co-slider-label { flex: 1; text-align: center; color: #cfc596; font-size: 14px; pointer-events: none; }
.co-slider-handle {
  position: absolute; left: 3px; top: 3px; width: 46px; height: 46px; border-radius: 50%;
  background: #fcd535; color: #20242d;
  display: flex; align-items: center; justify-content: center;
}
.co-slider-handle svg { width: 22px; height: 22px; }
.co-slider.done .co-slider-label { opacity: 0; }

/* ===== Модалка MEMO ===== */
.memo-modal-overlay {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 0 32px;
}
.memo-modal { width: 100%; max-width: 340px; background: var(--card); border-radius: 18px; padding: 28px 22px 20px; text-align: center; }
.memo-modal-icon svg { width: 44px; height: 44px; margin: 0 auto 16px; display: block; }
.memo-modal-text { font-size: 14px; color: var(--text); line-height: 1.5; margin-bottom: 20px; }
.memo-modal-confirm { width: 100%; background: #fcd535; color: #20242d; font-weight: 500; font-size: 14px; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.memo-modal-return { width: 100%; background: var(--track); color: var(--text); font-weight: 500; font-size: 14px; border-radius: 8px; padding: 12px; }

/* ===== "Withdrawal Processing" ===== */
.wp-body { padding: 0 16px; text-align: center; }
.wp-hourglass { width: 68px; height: 82px; color: var(--text); margin: 90px auto 24px; display: block; }
.wp-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.wp-amount { font-size: 27px; font-weight: 700; margin-bottom: 26px; }
.wp-eta, .wp-note { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
.wp-eta b { color: var(--text); font-weight: 600; }
.wp-history-btn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: env(safe-area-inset-bottom);
  width: calc(440px - 32px); max-width: calc(100% - 32px);
  margin-bottom: 14px; border-radius: 8px; padding: 13px;
  background: #fcd535; color: #20242d; font-weight: 500; font-size: 14px; border: none;
}
.sa-topbar #wp-back { position: absolute; left: 12px; }

/* ==================== Convert (Trade) страница ==================== */
.page-convert {
  position: fixed;
  inset: 0;
  background: var(--bg);
  overflow: hidden;         /* страницу нельзя листать/скроллить */
  touch-action: none;       /* блокирует swipe-скролл на iOS внутри этого блока */
  padding-top: env(safe-area-inset-top);  /* fixed-оверлей вышел из потока .phone — свой safe-area нужен */
  padding-bottom: 96px;
}

/* --- верхние вкладки: тот же паттерн, что .wtabs-row/.wtab в Assets (Overview/Spot/...) --- */
.cv-tabs {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 15px;
  border-bottom: 1px solid var(--border);
}
.cv-tab {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-dim);
  position: relative;
  top: 1px;
  padding: 0;
  white-space: nowrap;
}
.cv-tab.active {
  color: var(--text);
  font-weight: 400;
}
.cv-burger {
  margin-left: auto;
  color: var(--text);
  display: flex;
  align-items: center;
  align-self: center;
}
.cv-burger svg { width: 22px; height: 22px; }

.cv-body { padding: 5px 16px 0; }

/* --- промо-баннер --- */
.cv-reward {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #383627;
  border-radius: 11px;          /* АТОМЫ: чуть круглее (было 8px) */
  padding: 11px 14px;           /* АТОМЫ: тоньше на 2px (было 13px) */
  margin-top: 4px;
}
.cv-gift { width: 22px; height: 22px; color: #d9d2bd; flex-shrink: 0; }
.cv-reward-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
}

/* --- сегмент Instant / Recurring / Limit --- */
.cv-seg {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}
.cv-seg-btn {
  font-size: 13px;              /* АТОМЫ: меньше текст (было 14px) */
  font-weight: 400;
  color: var(--text-dim);
  padding: 8px 10px;            /* АТОМЫ: выше и короче (было 4.5px 14px) */
  border-radius: 7px;
}
.cv-seg-btn.active {
  background: var(--pill);
  color: var(--text);
}
.cv-seg-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cv-seg-icon { color: var(--text); display: flex; }
.cv-seg-icon svg { width: 22px; height: 22px; }

/* --- строка курса --- */
.cv-rate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text);
}
.cv-rate-chg { font-weight: 500; }
.cv-rate-chg.down { color: var(--red); }
.cv-rate-chg.up { color: var(--green); }
.cv-rate-swap { width: 15px; height: 15px; color: var(--text-dim); }

/* --- метки From / To --- */
.cv-io-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.cv-io-label-from { margin-top: 15px; }  /* From: строка выше на 3px */
.cv-bal { display: flex; align-items: center; gap: 8px; }
.cv-bal-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--pill);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.cv-bal-pill svg { width: 15px; height: 15px; }
.cv-bal-amt {
  font-size: 13.5px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cv-bal-plus { color: var(--text); display: flex; }
.cv-bal-plus svg { width: 20px; height: 20px; }

/* --- строка выбора монеты + сумма --- */
.cv-io-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 6px;
}
.cv-coin {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
}
.cv-coin-icon { width: 32px; height: 32px; border-radius: 50%; }
.cv-coin-name { font-size: 20px; font-weight: 600; color: var(--text); line-height: 1; }
.cv-coin-chev { width: 15px; height: 15px; color: var(--text); margin-left: -2px; }
.cv-io-right { display: flex; flex-direction: column; align-items: flex-end; }
.cv-io-amt { font-size: 30px; font-weight: 500; color: var(--text-dim-2); line-height: 42px; }
.cv-max {
  font-size: 14px;
  font-weight: 600;
  color: var(--yellow);
  margin-top: 6px;
  padding: 0;
}

/* --- разделитель со свап-кнопкой --- */
.cv-swap-wrap {
  position: relative;
  height: 20px;
  margin-top: 22px;
}
.cv-swap-line {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.cv-swap {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cv-swap svg { width: 20px; height: 20px; }

/* --- кнопка Preview --- */
.cv-preview {
  width: 100%;
  height: 48px;
  margin-top: 30px;
  border-radius: 8px;
  background: var(--yellow);
  color: #20242d;
  font-size: 16px;
  font-weight: 600;
}
.cv-preview:disabled {
  background: #5b5527;
  color: #8a8355;
}