/* ============================================================
   GENERIC_WALLET — styles
   Ledger-style dark UI. Every color token below can be overridden
   on :root from the admin panel (see COLOR_KEYS in app.js).
   ============================================================ */

:root {
  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --surface: #1C1C1E;
  --surface-elevated: #2C2C2E;
  --text-primary: #FFFFFF;
  --text-secondary: #8E8E93;
  --text-tertiary: #636366;
  --accent-green: #30D158;
  --accent-red: #FF453A;
  --accent-blue: #0A84FF;
  --border-color: #38383A;
  --button-bg: #1C1C1E;
  --nav-bg: #000000;
  --nav-active: #FFFFFF;

  --radius-sm: 12px;
  --radius: 16px;
  --header-height: 56px;
  --nav-height: 76px;   /* 6px + 64px pill + 6px: the bar's full height */
  --nav-pad-bottom: 6px; /* the pill sits flush with the screen's bottom edge (client's
                            call, 2026-09-16): no safe-area inset, the home indicator is
                            drawn by iOS over the pill's lower edge */
  --pad-screen: 16px;
  --pad-card: 16px;
  --gap-block: 20px;

  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, monospace;

  --duration-fast: 150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- type scale (matched to the reference iOS screenshots) ---- */
  --fs-hero: 34px;    --lh-hero: 40px;     /* home balance, swap amount */
  --fs-amount: 28px;  --lh-amount: 34px;   /* tx-detail amount, coin price/total */
  --fs-heading: 19px; --lh-heading: 24px;  /* history day headers */
  --fs-title: 16px;   --lh-title: 21px;    /* section titles, row names, nav-bar titles, buttons */
  --fs-body: 15px;    --lh-body: 20px;     /* promo row, tx values, swap labels */
  --fs-value: 14px;   --lh-value: 18px;    /* USD values, secondary amounts */
  --fs-sub: 13px;     --lh-sub: 18px;      /* row sub-lines, change pill, action labels */
  --fs-caption: 12px; --lh-caption: 16px;  /* change %, tx labels, kicker, hints */
  --fs-micro: 11px;   --lh-micro: 14px;    /* market card % */
  --fs-nav: 10px;      --lh-nav: 12px;     /* bottom nav labels */
  --fs-input: 16px;                        /* never lower: iOS zooms focused fields below 16px */
  --ls-hero: -0.3px; --ls-amount: -0.2px;

  /* ---- pull-to-refresh timing/geometry (mirrored by PTR_* in app.js) ---- */
  --ptr-settle: 320ms;
}

/* Light preset — toggled by JS */
:root[data-theme="light"] {
  --bg-primary: #f2f2f7;
  --bg-secondary: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #e5e5ea;
  --text-primary: #111111;
  --text-secondary: #6e6e73;
  --text-tertiary: #aeaeb2;
  --border-color: #d1d1d6;
  --button-bg: #ffffff;
  --nav-bg: #f2f2f7;
  --nav-active: #111111;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Dynamic viewport height: on real mobile Safari, 100% is computed
     against whichever toolbar state was current at layout time, which can
     leave a gap below fixed-height children (bottom nav included) when the
     toolbar's chrome state doesn't match. 100dvh tracks the actual visible
     viewport and overrides the 100% fallback in browsers that support it. */
  height: 100dvh;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent mobile Safari's automatic text-inflation on pages it judges
     "text-sparse" -- otherwise fonts render larger on real devices than
     any desktop/simulator preview shows. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* The custom pull-to-refresh (Home) drives its own rubber-band; do not let
     the document itself bounce/chain underneath it. */
  overscroll-behavior: none;
}

body {
  overflow: hidden;
  /* Reference app: long-pressing labels/values never raises iOS's
     select/copy/lookup callout; only form fields keep native selection so
     typing and the caret still work. Copying a hash/address is done via the
     existing tap-to-copy affordance, not native text selection. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

#app {
  /* Regular browser tab (not installed): the address/toolbar can be shown
     or hidden, so size against 100dvh -- the *dynamic* viewport unit that
     tracks whichever chrome state is actually on screen. Sizing this box
     with 100vh/100lvh here (as standalone needs, see below) made it taller
     than the real visible area whenever the toolbar was showing, pushing
     the bottom nav bar's lower half -- icons' labels included -- off the
     bottom edge ("нижняя панель прижата к краю / не помещается на экран"). */
  position: relative;
  height: 100%;
  height: 100dvh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  /* Keeps every header out of the status-bar zone on platforms that report a
     top inset (Android/Chrome PWA, browser tabs with viewport-fit=cover). On
     iOS standalone this is now 0: the status bar style is "black" (opaque),
     so the WebView starts *below* the status bar -- see the next block. */
  padding-top: env(safe-area-inset-top);
}
/* Standalone (home-screen) PWA only.
   History of the "black band under the tab bar" on iOS:
   - With apple-mobile-web-app-status-bar-style="black-translucent" WebKit
     sized the installed WebView to screen-height minus the status bar and
     anchored it at the top, so a status-bar-sized strip at the bottom
     (59pt on Dynamic Island phones) was *outside* the WebView: OS-painted
     black that no CSS can reach. 100lvh (= full screen) then overflowed the
     short WebView and the tab bar was clipped mid-label -- the client's
     "чёрная полоса снизу / приложение обрезается". The fix is the meta tag
     in index.html: "black" (opaque status bar) makes the WebView edge to
     edge below the status bar. Existing home-screen icons freeze the meta
     at install time and must be removed and re-added.
   - With "black" the numbers measured in the installed app (iPhone 17 Pro,
     iOS 26.5) are: WebView = screen minus status bar (812 of 874pt),
     innerHeight = 100% = 100svh = 100dvh = 812, safe-area-inset-top = 0,
     safe-area-inset-bottom = 34 -- but 100lvh/100vh still report the full
     874pt screen. Sizing #app by lvh therefore overflowed the WebView by a
     status-bar height and pushed the tab bar off the bottom edge. So the
     app box is pinned to the viewport with inset:0 (no explicit height):
     it always equals the WebView, whatever a given iOS build says lvh is.
     (Under the old translucent style the opposite held -- the viewport
     was transiently smaller than the WebView at launch -- which is why
     100lvh was used before; do not bring it back without re-measuring.)
   Scoped to display-mode: standalone so a plain browser tab keeps the
   relative/100dvh sizing above. */
@media (display-mode: standalone) {
  #app {
    position: fixed;
    inset: 0;
    height: auto;
  }
}

button {
  font-family: inherit;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.hidden { display: none !important; }

svg.ic { width: 24px; height: 24px; display: block; flex-shrink: 0; }
svg.ic-sm { width: 18px; height: 18px; display: block; flex-shrink: 0; }

/* ---------- Generic view layout ---------- */
.view {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--pad-screen) 24px;
  position: relative;
  z-index: 1;
  scrollbar-width: none;
}
/* Pushed screens (no tab bar, see #app.no-nav toggled in showView) lose the
   nav's own safe-area-inset-bottom padding; give it back here so content
   and sticky action buttons never sit under the home indicator. */
#app.no-nav .scroll { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.scroll::-webkit-scrollbar { display: none; }
.scroll.column { display: flex; flex-direction: column; }
/* Belt-and-braces: a missed preventDefault in the custom pull-to-refresh can
   never fall through to Safari's own top bounce on Home. */
#home-body .scroll { overscroll-behavior-y: none; }

/* ---------- View body (header + main) ----------
   Home/Swap wrap header+main so the halftone canvas has a positioned
   parent that also owns the header; the pull-to-refresh translates only
   main.scroll inside it, so the header and the background stay put (as
   in the reference app) while the content sheet rubber-bands down. */
.view-body {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
}
#home-body .scroll { will-change: transform; }
.scroll.ptr-settle { transition: transform var(--ptr-settle) var(--ease-out); }

/* Atmospheric halftone background (Home, Swap), painted by halftone.js into
   a <canvas class="halftone">: a tilted, receding dot plane — dense/small
   toward the top-right, large/sparse toward the lower-left — fading to
   var(--bg-primary) before the action buttons. Analytic canvas render (not
   a CSS 3D transform/mask) so it stays crisp at any pixel ratio. */
:root { --halftone-h: 460px; }
.halftone {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--halftone-h);
  /* The canvas lives inside main.scroll (which is position:relative;
     z-index:1, i.e. its own stacking context). A negative z-index paints
     it above that context's (transparent) background but beneath every
     in-flow child -- otherwise, as a positioned box, it would sit on top of
     static content such as .swap-card and .tab-hero. */
  z-index: -1;
  pointer-events: none;
}

/* ---------- Sync spinner (thin ring next to "Обновляем...") ---------- */
.ios-spinner { width: 14px; height: 14px; display: block; color: var(--text-secondary); }
.sync-spinner { display: flex; }
.sync-spinner .ios-spinner { animation: ptr-spin 0.9s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Balance odometer ----------
   renderTotal() wraps every changed digit in .ch.roll holding the old and
   the new glyph stacked; both slide up one line so the new one lands. */
.total .ch.roll {
  display: inline-flex;
  flex-direction: column;
  height: var(--lh-hero);
  overflow: hidden;
  vertical-align: top;
}
.total .ch.roll > span {
  display: block;
  height: var(--lh-hero);
  line-height: var(--lh-hero);
  animation: digit-roll 520ms var(--ease-out) forwards;
}
@keyframes digit-roll { from { transform: translateY(0); } to { transform: translateY(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .scroll.ptr-settle { transition-duration: 0ms; }
  .sync-spinner .ios-spinner { animation-duration: 2s; }
  .total .ch.roll > span { animation: none; transform: translateY(-100%); }
}

/* ---------- Headers ---------- */
/* Reference app: the halftone canvas now lives inside main.scroll (see
   index.html) so it scrolls away with the content sheet; the header floats
   as an overlay above it and only picks up a blurred backing once the
   sheet has actually scrolled underneath it. */
.app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad-screen);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.app-header.scrolled {
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
:root[data-theme="light"] .app-header.scrolled { background: rgba(255, 255, 255, 0.72); }
/* The header no longer takes flex space (it overlays), so the scroller
   underneath needs its own top inset to start content below it. */
.app-header + .scroll { padding-top: var(--header-height); }
.header-group { display: flex; gap: 10px; }

.circle-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
:root[data-theme="light"] .circle-btn { background: rgba(0, 0, 0, 0.06); }
.circle-btn:active { transform: scale(0.92); background: var(--surface-elevated); }

.subheader {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--pad-screen);
  flex-shrink: 0;
}
.subheader .title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  min-width: 0;
}
.subheader .title .kicker {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  color: var(--text-secondary);
}
.subheader .title-coin {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-title); font-weight: 600;
}
.subheader .spacer { width: 40px; flex-shrink: 0; }

.icon-btn {
  width: 40px; height: 40px;
  background: none; border: none;
  color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--duration-fast);
}
.icon-btn:active { background: var(--surface); }

/* ---------- Balance block ---------- */
.balance-block { position: relative; padding: 43px 0 70px; text-align: center; }
/* Zero layout footprint: overlays the top padding so the balance beneath it
   never shifts when the status text/icon appears (pull-to-refresh, launch). */
.balance-status {
  position: absolute; left: 0; right: 0; top: 10px; height: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-sub); color: var(--text-secondary);
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.balance-status.show { opacity: 1; }
.balance-status .check { display: none; width: 16px; height: 16px; color: var(--accent-green); }
.balance-status.done .sync-spinner { display: none; }
.balance-status.done .check { display: block; }

.balance-block .total {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: 700;
  margin: 0;
  letter-spacing: var(--ls-hero);
  font-variant-numeric: tabular-nums;
}
.balance-block .total .dec { color: var(--text-tertiary); font-weight: 600; }
.balance-block .change {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 12px;
  height: 35px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-sub); font-weight: 500;
  line-height: var(--lh-sub);
  color: var(--text-primary);
  border: none; cursor: pointer;
}
:root[data-theme="light"] .balance-block .change { background: rgba(0, 0, 0, 0.06); }
.balance-block .change .pct { font-weight: 500; }
.balance-block .change .sep { color: var(--text-secondary); }
.balance-block .change svg { width: 14px; height: 14px; color: var(--text-secondary); }

.pct.up { color: var(--accent-green); }
.pct.down { color: var(--accent-red); }
.pct.flat { color: var(--text-tertiary); }

/* ---------- Action buttons ---------- */
.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 0;
}
.action-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 64px;
  padding: 0 8px;
  background: var(--button-bg);
  border: none;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast);
}
.action-btn .ic { width: 22px; height: 22px; }
.action-btn:active { transform: scale(0.96); background: var(--surface-elevated); }

/* ---------- Section heading ---------- */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 0 14px;
}
.section-head .h {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600;
  background: none; border: none; color: var(--text-primary); padding: 0;
}
.section-head button.h { cursor: pointer; }
.section-head .h svg { width: 16px; height: 16px; color: var(--text-secondary); }
.section-head .aside {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary);
  background: none; border: none; padding: 0; cursor: pointer;
}
.section-head .aside svg { width: 14px; height: 14px; }
.section-head .aside.accent { color: var(--accent-blue); }

/* ---------- Coin icons ----------
   .coin-icon is an UNCLIPPED positioning box (width/height/font-size set
   inline by tokenIcon()); .coin-logo is the clipped, coloured circle inside
   it. Keeping the clip off .coin-icon lets .coin-badge overhang the circle
   without being cut into a crescent (the previous bug: overflow:hidden sat
   directly on the same element the badge was absolutely positioned in). */
.coin-icon {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  vertical-align: middle;
}
.coin-logo {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
}
/* Subtle rim so near-black brand colours (XRP, BTT, ARB, PUMP) separate
   from the page background; only applied where tokenIcon() flags it. */
.coin-logo.rim { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
:root[data-theme="light"] .coin-logo.rim { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.coin-logo svg { width: 62%; height: 62%; display: block; }
.coin-logo .letters { font-size: 0.36em; line-height: 1; }
.coin-badge {
  position: absolute; top: -3px; right: -3px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
}
.coin-badge svg { width: 11px; height: 11px; }
.coin-badge.in { background: var(--accent-green); color: #000; }
.coin-badge.out { background: var(--surface-elevated); color: var(--text-primary); }
.coin-badge.fee { background: var(--surface-elevated); color: var(--text-primary); }
/* Match the pressed-row tint so the badge ring never mismatches. */
.history-list li:active .coin-badge { border-color: var(--bg-secondary); }

/* ---------- Token list ---------- */
.token-list { list-style: none; margin: 0; padding: 0; }
.token-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}
.token-list li:active { background: var(--bg-secondary); }
.tok-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tok-name { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tok-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; }
.tok-right { text-align: right; flex-shrink: 0; }
.tok-value { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; font-variant-numeric: tabular-nums; }
.tok-change { font-size: var(--fs-caption); line-height: var(--lh-caption); margin-top: 2px; }

/* ---------- Market strip ---------- */
.market-strip {
  display: flex; gap: 10px;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--pad-screen));
  padding: 0 var(--pad-screen) 4px;
  scrollbar-width: none;
}
.market-strip::-webkit-scrollbar { display: none; }
.market-card {
  flex: 0 0 auto;
  width: 96px; height: 106px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--surface);
  border-radius: var(--radius);
  cursor: pointer;
}
.market-card .sym { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; }
.market-card .pct { font-size: var(--fs-micro); line-height: var(--lh-micro); margin-top: -3px; }
.market-card .gauge { width: 40px; height: 28px; display: block; }
.market-card .gauge text { font-size: 14px; font-weight: 600; fill: var(--text-primary); }

/* ---------- Stock chips (Home "Акции") ---------- */
.stock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stock-chip {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border: none; border-radius: 999px;
  padding: 7px 6px 7px 6px;
  color: var(--text-primary); font-size: 11px; font-weight: 600;
  cursor: pointer; min-width: 0; overflow: hidden;
}
.stock-chip .label { overflow: hidden; text-overflow: clip; white-space: nowrap; min-width: 0; letter-spacing: -0.5px; }
.chip-dot {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700;
}
.chip-dot.rim { box-shadow: inset 0 0 0 1px var(--border-color); }
/* Overlapping network-icon stack on the "Счета" promo row. */
.acct-stack { display: flex; align-items: center; flex-shrink: 0; }
.acct-stack .stack-dot {
  width: 22px; height: 22px; border-radius: 50%;
  margin-left: -8px;
  box-shadow: 0 0 0 2px var(--bg-primary);
}
.acct-stack .stack-dot:first-child { margin-left: 0; }
.acct-stack .stack-dot.more {
  background: var(--surface-elevated); color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}

/* ---------- Promo row (perps) ---------- */
.promo-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  background: none; border: none; padding: 6px 0;
  color: var(--text-primary); text-align: left; cursor: pointer;
}
.promo-row .promo-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.promo-row .promo-text { flex: 1; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.promo-row svg.chev { width: 16px; height: 16px; color: var(--text-primary); flex-shrink: 0; }
/* Two-line variant (coin screen staking card): bold title + grey subtitle
   instead of a single label, still inside the same pill-icon row. */
.promo-row .promo-text-wrap { flex: 1; min-width: 0; }
.promo-row .promo-title { display: block; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.promo-row .promo-sub { display: block; font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; }

/* ---------- History list ----------
   Reference: grey date bars, square outlined arrow icons, "Отправка 16:45"
   sub-line, amount + fiat on the right, no row separators. Shared by the
   history screen and the account screen. */
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list li.hist-date {
  height: 44px; display: flex; align-items: center;
  margin: 18px 0 8px; padding: 0 14px;
  background: var(--surface); border-radius: 8px;
  font-size: var(--fs-caption); font-weight: 500; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.history-list li.hist-date:first-child { margin-top: 6px; }
/* Ledger-style variant (.ledger): the unfiltered history opened from the
   header clock mixes every asset, so the reference app drops the grey date
   pill for a plain heading and swaps the outlined arrow square for the
   coin's own logo (painted by tokenIcon in app.js). */
.history-list.ledger li.hist-date {
  height: auto; display: block;
  margin: 20px 0 8px; padding: 0;
  background: none; border-radius: 0;
  font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: 600;
  color: var(--text-primary);
}
.history-list.ledger li.hist-date:first-child { margin-top: 6px; }
.history-list li.hist-row {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 6px 0; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast);
}
.history-list li.hist-row:active { background: var(--bg-secondary); }
.op-square {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--border-color); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
}
.op-square .ic-sm { width: 18px; height: 18px; }
.hist-main { flex: 1; min-width: 0; }
.hist-title { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; }
.hist-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }
.hist-right { text-align: right; flex-shrink: 0; }
.hist-amount { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-amount.in { color: var(--accent-green); }
.hist-usd { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }
.history-list li.hist-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 120px 24px 40px; cursor: default;
}
.hist-empty .info-circle {
  width: 64px; height: 64px; border-radius: 50%; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: var(--text-secondary); margin-bottom: 22px;
  font-family: Georgia, serif;
}
.hist-empty .t { font-size: var(--fs-title); font-weight: 600; }
.hist-empty .s { font-size: var(--fs-sub); color: var(--text-secondary); margin-top: 6px; }

/* ---------- Transaction detail ----------
   Reference screenshots: outlined square hero, 18px amount, fiat with an
   info glyph, green status line, then a flat left-aligned label/value list
   (no card) with full hash and addresses, and an outline pill button. */
.tx-hero { text-align: center; padding: 24px 0 20px; }
.hero-square {
  width: 60px; height: 60px; border-radius: 12px; margin: 0 auto 18px;
  border: 1px solid var(--border-color);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
}
.hero-square .ic { width: 22px; height: 22px; }
.hero-square.done { color: var(--accent-green); border-color: var(--accent-green); }
.tx-hero .amount {
  font-size: 18px; line-height: 24px; font-weight: 600; margin: 0;
  font-variant-numeric: tabular-nums;
}
.tx-hero .amount.in { color: var(--accent-green); }
.tx-hero .amount-usd {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin: 6px 0 0;
  font-variant-numeric: tabular-nums;
}
.tx-hero .amount-usd .info { width: 15px; height: 15px; }
.tx-status {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600;
}
.tx-status .dot { width: 6px; height: 6px; border-radius: 50%; }
.tx-status.confirmed { color: var(--accent-green); }
.tx-status.confirmed .dot { background: var(--accent-green); }
.tx-status.pending { color: var(--text-secondary); }
.tx-status.pending .dot { background: var(--text-secondary); }
.tx-status.failed { color: var(--accent-red); }
.tx-status.failed .dot { background: var(--accent-red); }

.tx-fields { margin: 12px 0 0; padding: 0; }
.tx-field { margin: 0 0 26px; cursor: default; }
.tx-field.copyable { cursor: pointer; }
.tx-field dt { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); }
.tx-field dd {
  margin: 6px 0 0; font-size: var(--fs-value); line-height: 20px; font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tx-field dd.wrap { word-break: break-all; }
.tx-field dd .approx { color: var(--text-secondary); font-weight: 400; margin: 0 14px; }
.tx-fields.compact .tx-field { margin-bottom: 20px; }
.tx-explorer { margin-top: auto; }

/* ---------- Analytics screen ---------- */
.an-label { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin: 8px 0 4px; }
.an-total.total {
  font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 700;
  margin: 0; letter-spacing: var(--ls-hero); font-variant-numeric: tabular-nums; text-align: left;
}
.an-total.total .dec { color: var(--text-tertiary); font-weight: 600; }
.an-change {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); font-variant-numeric: tabular-nums;
}
.an-change .pct { font-weight: 600; }
.an-change .delta { color: var(--text-primary); }
.an-change .muted { color: var(--text-secondary); }
.tri { font-size: 0.75em; line-height: 1; }
.tri.up { color: var(--accent-green); }
.tri.down { color: var(--accent-red); }

.an-chart { position: relative; height: 200px; margin: 6px 0 10px; }
.an-chart-svg { width: 100%; height: 100%; display: block; }
.an-mark {
  position: absolute;
  display: flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.an-mark .tri { color: var(--text-secondary); }
.an-mark { flex-direction: column; gap: 0; }
.an-mark.max { transform: translate(-50%, calc(-100% - 4px)); align-items: center; }
.an-mark.min { transform: translate(-50%, 4px); align-items: center; }
/* Marks near the chart edges hug the edge instead of spilling outside. */
.an-mark.edge-right { transform: translate(-100%, calc(-100% - 4px)); align-items: flex-end; }
.an-mark.min.edge-right { transform: translate(-100%, 4px); }
.an-mark.edge-left { transform: translate(0, calc(-100% - 4px)); align-items: flex-start; }
.an-mark.min.edge-left { transform: translate(0, 4px); }
.an-timeframes { border-radius: 14px; margin-bottom: 4px; }
.an-timeframes button { border-radius: 11px; }

.an-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.an-card { background: var(--surface); border-radius: var(--radius); padding: 14px 12px; min-width: 0; }
.an-card .label { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-secondary); }
.an-card .value {
  display: flex; align-items: center; gap: 6px;
  margin-top: 6px; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.an-dist {
  display: flex; align-items: center; gap: 18px;
  width: 100%; padding: 10px 0 4px;
  background: none; border: none; color: var(--text-primary); text-align: left; cursor: pointer;
}
.an-donut { width: 64px; height: 64px; flex-shrink: 0; display: block; }
.an-donut svg { width: 100%; height: 100%; display: block; }
.an-legend {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 500;
}
.an-leg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.an-leg .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.an-dist svg.chev { width: 18px; height: 18px; color: var(--text-primary); flex-shrink: 0; }

.btn-white { background: var(--text-primary); color: var(--bg-primary); font-weight: 600; }
.an-swap { margin-top: 22px; }

/* ---------- Tab hero (Earn / Card) ---------- */
.tab-hero { text-align: center; padding: 28px 8px 26px; }
.tab-hero-title {
  font-size: var(--fs-hero); line-height: 40px; font-weight: 700; letter-spacing: var(--ls-hero);
  margin: 0;
}
.tab-hero-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); margin: 14px 0 0; }
.tab-hero .tab-hero-cta { display: inline-block; width: auto; padding: 18px 26px; margin-top: 24px; }
.actions.two { grid-template-columns: 1fr 1fr; }
.actions.two .action-btn { height: 80px; gap: 8px; }
.section-head .h .count { font-size: var(--fs-body); font-weight: 400; color: var(--text-secondary); margin-left: 6px; }

/* ---------- Earn strips ---------- */
.earn-strip {
  display: flex; gap: 10px; overflow-x: auto;
  margin: 0 calc(-1 * var(--pad-screen)); padding: 0 var(--pad-screen) 4px;
  scrollbar-width: none;
}
.earn-strip::-webkit-scrollbar { display: none; }
.earn-card {
  flex: 0 0 auto; width: 110px; height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface); border: none; border-radius: 14px; color: var(--text-primary);
  cursor: pointer; padding: 0 8px;
}
.earn-card .name { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.earn-card .rate {
  font-size: var(--fs-micro); line-height: 14px; font-weight: 600; color: var(--accent-green);
  background: rgba(48, 209, 88, 0.15); border-radius: 6px; padding: 2px 7px; white-space: nowrap;
}
.info-rows { display: flex; flex-direction: column; gap: 10px; }
.info-row {
  display: flex; align-items: center; gap: 14px;
  height: 56px; padding: 0 var(--pad-card);
  background: var(--surface); border: none; border-radius: 14px; color: var(--text-primary);
  font-size: var(--fs-body); font-weight: 600; text-align: left; cursor: pointer;
}
.info-row span { flex: 1; }
.info-row svg.chev { width: 18px; height: 18px; color: var(--text-secondary); }
.disclaimer { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--text-secondary); margin: 22px 0 0; }

/* ---------- Card visual ---------- */
.card-visual { position: relative; height: 300px; margin: 28px 0 0; display: flex; align-items: center; justify-content: center; }
.card-plate {
  position: relative; width: 250px; height: 158px; border-radius: 14px;
  background: linear-gradient(135deg, #0b0b0d 0%, #16161a 60%, #0b0b0d 100%);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-12deg) skewY(2deg);
  overflow: hidden;
}
.card-dots {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 65% 45%, rgba(255, 140, 40, 0.9), transparent 70%),
    radial-gradient(ellipse 55% 60% at 40% 40%, rgba(70, 120, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 50% 55% at 55% 60%, rgba(60, 220, 140, 0.7), transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 1.2px, transparent 1.8px);
  mask-image: radial-gradient(circle, #000 1.2px, transparent 1.8px);
  -webkit-mask-size: 6px 6px; mask-size: 6px 6px;
  opacity: 0.85;
}
.card-chip { position: absolute; left: 18px; top: 18px; width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #d9d9dd, #8e8e93); opacity: 0.9; }
.card-brand { position: absolute; right: 16px; bottom: 14px; display: flex; }
.card-brand .mc { width: 22px; height: 22px; border-radius: 50%; }
.card-brand .mc.a { background: #eb001b; }
.card-brand .mc.b { background: #f79e1b; margin-left: -8px; opacity: 0.9; }
.card-shadow {
  position: absolute; left: 50%; bottom: 20px; width: 220px; height: 26px;
  transform: translateX(-50%) rotate(-12deg); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 120, 30, 0.45), transparent 70%);
  filter: blur(6px);
}

/* ---------- Market page ---------- */
.market-search { margin: 6px 0 14px; }
.stat-strip {
  display: flex; gap: 10px; overflow-x: auto;
  margin: 0 calc(-1 * var(--pad-screen)); padding: 0 var(--pad-screen) 4px; scrollbar-width: none;
}
.stat-strip::-webkit-scrollbar { display: none; }
.stat-tile {
  flex: 0 0 auto; min-width: 190px; height: 72px;
  background: var(--surface); border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.stat-tile .label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); }
.stat-tile .value { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-tile .value .pct { font-size: var(--fs-sub); font-weight: 600; margin-left: 6px; }
.stat-tile .gauge-wrap .gauge { width: 44px; height: 30px; display: block; }
.stat-tile .gauge-wrap .gauge text { font-size: 14px; font-weight: 600; fill: var(--text-primary); }
.icon-btn.small { width: 32px; height: 32px; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--pad-screen)) 6px; padding: 0 var(--pad-screen); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 10px;
  background: var(--surface); border: none; color: var(--text-secondary);
  font-size: var(--fs-value); font-weight: 500; cursor: pointer;
}
.chip.active { background: var(--surface-elevated); color: var(--text-primary); }
.market-list li { padding: 9px 0; }
.market-list .rank {
  display: inline-block; font-size: 10px; font-weight: 600; color: var(--text-secondary);
  background: var(--surface-elevated); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px;
}

/* ---------- Sort sheet ---------- */
.picker-head.center { position: relative; justify-content: center; }
.picker-head.center .icon-btn { position: absolute; right: -8px; top: -8px; }
.sort-options { display: flex; flex-direction: column; }
.sort-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 6px 0; background: none; border: none; color: var(--text-primary);
  font-size: var(--fs-body); font-weight: 500; text-align: left; cursor: pointer;
}
.sort-option.active svg { color: #A78BFA; }
.sort-option.disabled { flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text-tertiary); cursor: default; }
.sort-option.disabled small { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---------- Profile ---------- */
.avatar {
  width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 30px;
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
.tile-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile {
  height: 80px; border-radius: var(--radius); background: var(--surface); border: none;
  color: var(--text-primary); font-size: var(--fs-value); font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.tile-ic { position: relative; display: flex; }
.tile-ic.dot::after { content: ""; position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-red); }
.outline-row {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 var(--pad-card);
  background: none; border: 1px solid var(--border-color); border-radius: var(--radius);
  color: var(--text-primary); font-size: var(--fs-title); font-weight: 600; text-align: left; cursor: pointer;
}
.outline-row .plus { font-size: 22px; font-weight: 300; line-height: 1; }
.hint-text { font-size: var(--fs-body); line-height: var(--lh-body); margin: 16px 0 0; }
.footer-link { text-align: center; color: var(--text-secondary); font-size: var(--fs-sub); margin: 56px 0 0; }
.footer-link .link { background: none; border: none; color: #A78BFA; font: inherit; cursor: pointer; padding: 0; }

/* ---------- Coin screen ---------- */
.coin-price-label { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin: 8px 0 4px; }
.coin-price { font-size: var(--fs-amount); line-height: var(--lh-amount); font-weight: 700; margin: 0; letter-spacing: var(--ls-amount); font-variant-numeric: tabular-nums; }
.coin-change {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); margin-top: 6px;
}
.coin-change .muted { color: var(--text-secondary); }
.coin-chart { width: 100%; height: 180px; display: block; margin: 16px 0 8px; }
.coin-chart .line {
  fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: chart-draw 900ms var(--ease-out) forwards;
}
.coin-chart .area { opacity: 0; animation: chart-fade 900ms ease 300ms forwards; }
.coin-chart .marker { opacity: 0; animation: chart-fade 300ms ease 800ms forwards; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }
@keyframes chart-fade { to { opacity: 0.18; } }
.coin-chart .marker { animation-name: chart-marker; }
@keyframes chart-marker { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .coin-chart .line, .coin-chart .area, .coin-chart .marker { animation: none; }
  .coin-chart .line { stroke-dashoffset: 0; }
  .coin-chart .area { opacity: 0.18; }
  .coin-chart .marker { opacity: 1; }
}
.coin-chart .marker { r: 4; stroke: var(--bg-primary); stroke-width: 2; }
.timeframes {
  display: flex; gap: 4px;
  background: var(--bg-secondary);
  border-radius: 999px; padding: 3px;
  margin-bottom: var(--gap-block);
}
.timeframes button {
  flex: 1; padding: 7px 0;
  border: none; border-radius: 999px;
  background: none; color: var(--text-secondary);
  font-size: var(--fs-sub); font-weight: 600; cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.timeframes button.active { background: var(--surface-elevated); color: var(--text-primary); }
/* Timeframes + a trailing settings-sliders stub, as on the reference coin screen. */
.timeframes-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--gap-block); }
.timeframes-row .timeframes { flex: 1; margin-bottom: 0; }
.timeframes-row .icon-btn.sm { width: 36px; height: 36px; flex-shrink: 0; }
.timeframes-row .icon-btn.sm .ic { width: 18px; height: 18px; }

.coin-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coin-balance .total { font-size: var(--fs-amount); line-height: var(--lh-amount); font-weight: 700; margin: 4px 0 0; letter-spacing: var(--ls-amount); font-variant-numeric: tabular-nums; }
.coin-balance .qty { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 4px; }
.coin-balance .btn { width: auto; padding: 11px 18px; display: flex; align-items: center; gap: 8px; }
.coin-balance .btn .ic-sm { width: 16px; height: 16px; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--gap-block); }
.stat-card { background: var(--surface); border-radius: var(--radius); padding: var(--pad-card); }
.stat-card .label { display: flex; align-items: center; gap: 4px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); }
.stat-card .label svg { width: 13px; height: 13px; flex-shrink: 0; }
.stat-card .value { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }

.account-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
}
.account-row .grow { flex: 1; min-width: 0; }
.account-row .name { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; }
.account-row .addr { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.account-row .value { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* Two-line right side (coin screen "Счета" row): USD value on top, the raw
   crypto balance underneath it, both right-aligned. */
.account-row .amounts { text-align: right; flex-shrink: 0; }
.account-row .amounts .qty-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Plain label/value rows -- "Рыночная статистика" and "Динамика цены". */
.stat-rows { display: flex; flex-direction: column; }
.stat-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-color);
}
.stat-row:last-child { border-bottom: none; }
.stat-row .k { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); }
.stat-row .k .sub { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); margin-top: 2px; }
.stat-row .v { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.stat-row .v .sub { display: block; font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 600; margin-top: 2px; }
.coin-source-note { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); margin: 10px 0 0; }

/* Docked bottom action bar: Покупка / Обмен (white) / round overflow.
   Absolutely positioned inside #view-coin (.view is position:relative) as
   a sibling of main.scroll; the scroller gets matching bottom padding so
   its last row can still scroll out from under the bar. */
.coin-sticky {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; gap: 10px; align-items: center;
  padding: 14px var(--pad-screen) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg-primary) 28%);
}
/* Two ids: must outrank #app.no-nav .scroll (1,2,0). */
#app #view-coin .scroll { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
.coin-sticky .btn { flex: 1; }
.coin-sticky .icon-btn.round { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); flex-shrink: 0; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); }
.input, .select, textarea.input {
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 13px 14px;
  font-size: var(--fs-input); /* never lower: iOS zooms focused fields below 16px */
  font-family: inherit;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.select {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none;
  border-color: var(--border-color);
}
/* iOS/Safari paints its own yellow highlight over an autofilled field
   (e.g. it guesses "адрес" is a postal address and offers the Contacts
   card); force it back to the field's own surface colour instead. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  box-shadow: 0 0 0 1000px var(--surface) inset;
  transition: background-color 9999s ease-in-out 0s;
}
.input-row { display: flex; gap: 8px; align-items: center; }
.input-row .input { flex: 1; }
.input-suffix { color: var(--text-secondary); font-size: var(--fs-value); }
.field-hint { font-size: var(--fs-caption); color: var(--text-secondary); }

.btn {
  display: block; width: 100%;
  padding: 15px;
  border-radius: var(--radius);
  border: none;
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 500;
  cursor: pointer;
  text-align: center;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), color var(--duration-fast);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--button-bg); color: var(--text-primary); }
.btn-primary:disabled { color: var(--text-tertiary); cursor: default; transform: none; }
.btn-outline { background: none; border: 1px solid var(--border-color); color: var(--text-primary); }
.btn-danger { background: var(--surface); color: var(--accent-red); }
.btn-ghost { background: var(--surface); color: var(--text-primary); }
.btn-pill { border-radius: 999px; }

/* ---------- Receive (QR) ---------- */
.recv-card {
  background: var(--surface); border-radius: var(--radius); padding: 18px 16px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 8px;
}
.recv-acct { font-size: var(--fs-sub); font-weight: 500; }
.qr-box { position: relative; background: #fff; border-radius: 16px; padding: 14px; display: inline-block; line-height: 0; }
.qr-box svg { display: block; }
.qr-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.recv-addr {
  font-size: var(--fs-sub); line-height: var(--lh-sub); text-align: center;
  word-break: break-all; font-variant-numeric: tabular-nums; padding: 0 6px;
}
.recv-actions { display: flex; gap: 10px; margin-top: 12px; }
.recv-actions .sq, .recv-actions .wide {
  height: 52px; border: none; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--fs-value); font-weight: 600;
}
.recv-actions .sq { width: 52px; flex-shrink: 0; }
.recv-actions .wide { flex: 1; }
.disclaimer.center { text-align: center; margin: 14px 8px 0; }
.tip-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-radius: var(--radius); padding: 12px 8px 12px 12px; margin: 16px 0 12px;
}
.tip-row .tip-ic {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface-elevated);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tip-row .tip-text { flex: 1; font-size: var(--fs-value); font-weight: 600; }
.grow { flex: 1; }

/* ---------- Account screen ---------- */
.acct-head { padding: 6px 0 0; }
.acct-name { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 600; }
.acct-chip {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase;
  background: var(--surface-elevated); border-radius: 6px; padding: 3px 6px; color: var(--text-primary);
}
.acct-qty { font-size: var(--fs-value); color: var(--text-secondary); margin-top: 3px; font-variant-numeric: tabular-nums; }
.acct-total {
  font-size: 30px; line-height: 36px; font-weight: 700; margin: 10px 0 0;
  letter-spacing: var(--ls-hero); font-variant-numeric: tabular-nums;
}
.acct-total .dec { color: var(--text-tertiary); font-weight: 600; }
.acct-change { display: flex; align-items: center; gap: 6px; font-size: var(--fs-value); font-weight: 500; margin-top: 4px; font-variant-numeric: tabular-nums; }
.acct-change.up { color: var(--accent-green); }
.acct-change.down { color: var(--accent-red); }
.acct-change.flat { color: var(--text-secondary); }
.acct-addr {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--surface); border: none; border-radius: 8px; padding: 8px 10px;
  color: var(--text-primary); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.2px; cursor: pointer;
}
.acct-chart { margin: 6px calc(-1 * var(--pad-screen)) 0; }
.acct-chart .coin-chart { height: 150px; margin: 0; }
.timeframes.bare { background: none; padding: 0; gap: 8px; margin: 10px 0 0; }
.timeframes.bare button { border-radius: 10px; padding: 12px 0; font-size: var(--fs-caption); }
.timeframes.bare button.active { background: var(--surface-elevated); }
.eyebrow {
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 600; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-secondary); margin: 26px 0 12px;
}
.quick-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.quick {
  grid-column: span 2; height: 80px; border-radius: var(--radius-sm);
  background: var(--surface); border: none; color: var(--text-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-value); font-weight: 600; cursor: pointer;
}
.quick.wide { grid-column: span 3; }
.quick .ic { width: 22px; height: 22px; }
.acct-all { margin-top: 12px; }
.view-body .subheader { position: relative; z-index: 2; }

/* ---------- Send wizard ---------- */
.send-step { display: flex; flex-direction: column; flex: 1; padding-top: 8px; }
.asset-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: none; border-radius: 999px; padding: 6px 12px 6px 6px;
  color: var(--text-primary); font-size: var(--fs-sub); font-weight: 600; cursor: pointer; margin-bottom: 18px;
}
.asset-chip .dim { color: var(--text-secondary); font-weight: 500; }
.asset-chip svg.chev { width: 14px; height: 14px; color: var(--text-secondary); }
.scan-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0; }
.or-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--text-secondary); font-size: var(--fs-caption); }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.addr-field { position: relative; }
.addr-field .input { padding-right: 48px; border-color: #3A3A3C; background: transparent; }
.addr-field .input:focus { border-color: #A78BFA; }
.paste-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: none; background: none; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.notice {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  background: #2A2350; border-radius: var(--radius-sm); padding: 14px;
  font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500;
}
.notice .ic-sm { flex-shrink: 0; color: #A78BFA; margin-top: 1px; }
.amount-entry { display: flex; align-items: baseline; gap: 10px; margin-top: 20px; }
.amount-input {
  flex: 1; min-width: 0; background: none; border: none; color: var(--text-primary);
  font-size: 40px; font-weight: 600; letter-spacing: -0.8px; padding: 0; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.amount-input:focus { outline: none; }
.amount-input::placeholder { color: var(--text-tertiary); }
.amount-input.over { color: var(--accent-red); }
.amount-token { font-size: var(--fs-title); font-weight: 600; color: var(--text-secondary); }
.amount-usd { font-size: var(--fs-body); color: var(--text-secondary); margin-top: 6px; font-variant-numeric: tabular-nums; }
.amount-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: var(--fs-sub); color: var(--text-secondary); }
.amount-foot .max-pill {
  background: var(--surface-elevated); border: none; color: var(--text-primary);
  border-radius: 999px; padding: 7px 12px; font-size: var(--fs-sub); font-weight: 500; cursor: pointer;
}
.memo-field { margin-top: 22px; }
.done-hero { text-align: center; padding: 40px 0 0; }
.done-hero h2 { font-size: var(--fs-title); font-weight: 600; margin: 0; }
.done-hero p { font-size: var(--fs-sub); color: var(--text-secondary); margin: 8px 0 0; }
.send-step .btn + .btn { margin-top: 10px; }

/* ---------- Swap ---------- */
.swap-card {
  background: var(--surface); border-radius: var(--radius); padding: var(--pad-card);
  display: flex; flex-direction: column; gap: 14px;
}
.swap-card .swap-head { display: flex; align-items: center; justify-content: space-between; }
.swap-card .swap-label { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.swap-card .max-pill {
  background: var(--surface-elevated); border: none; color: var(--text-primary);
  border-radius: 999px; padding: 7px 12px; font-size: var(--fs-sub); font-weight: 500; cursor: pointer;
}
.swap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.swap-amount {
  flex: 1; min-width: 0;
  font-size: var(--fs-hero); font-weight: 600; letter-spacing: -0.8px;
  background: none; border: none; color: var(--text-primary);
  padding: 0; font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.swap-amount::placeholder { color: var(--text-tertiary); }
.swap-amount:focus { outline: none; }
.swap-token {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-elevated); border: none; color: var(--text-primary);
  border-radius: 999px; padding: 6px 10px 6px 6px;
  font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; cursor: pointer; flex-shrink: 0;
}
.swap-token svg.chev { width: 18px; height: 18px; color: var(--text-primary); }
.swap-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swap-foot .swap-usd {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-secondary); font-size: var(--fs-value);
}
.swap-foot .swap-usd svg { width: 16px; height: 16px; }
.swap-foot .right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.swap-foot .swap-bal { color: var(--text-secondary); font-size: var(--fs-value); white-space: nowrap; }
.account-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-elevated); border-radius: 10px;
  padding: 6px 10px 6px 6px; font-size: var(--fs-sub); font-weight: 500;
}
.swap-flip {
  display: flex; justify-content: center;
  margin: -14px 0; position: relative; z-index: 2;
}
.swap-flip button {
  width: 56px; height: 56px; border-radius: 14px;
  background: var(--surface); border: 4px solid var(--bg-primary);
  color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out);
}
.swap-flip button:active { transform: scale(0.92); }
.swap-submit { margin-top: auto; padding-top: var(--gap-block); }
.swap-quote-status {
  font-size: var(--fs-value); color: var(--text-secondary);
  transition: opacity var(--duration-fast);
}
.swap-quote-status.loading { opacity: 0.7; }
.swap-done { display: flex; flex-direction: column; flex: 1; }

/* ---------- Bottom navigation ---------- */
#bottom-nav {
  flex-shrink: 0;
  background: var(--nav-bg);
  /* 6px + the 64px pill + --nav-pad-bottom. Deliberately ignores
     env(safe-area-inset-bottom): the client wants the pill against the very
     bottom edge of the screen, fully visible, with the home indicator laid
     over it, not floating above the safe area. */
  padding: 6px var(--pad-screen) var(--nav-pad-bottom);
  display: flex;
  position: relative; z-index: 3;
}
.nav-pill {
  flex: 1;
  display: flex;
  background: var(--surface);
  border-radius: 999px;
  padding: 4px;
  height: 64px;
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 999px;
  font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer; background: none; border: none;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.nav-item.active { color: var(--nav-active); background: var(--surface-elevated); }

/* ---------- Admin panel ---------- */
.admin-section {
  background: var(--surface); border-radius: var(--radius);
  padding: var(--pad-card); margin-bottom: 16px;
}
.admin-section h3 { margin: 0 0 14px; font-size: var(--fs-title); font-weight: 600; }
.admin-section .hint { font-size: var(--fs-caption); color: var(--text-secondary); margin: -8px 0 12px; }
.admin-section .input, .admin-section .select { background: var(--surface-elevated); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.color-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type="color"] {
  width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-color);
  border-radius: 8px; background: none; cursor: pointer; flex-shrink: 0;
}
.color-field input[type="text"] { flex: 1; padding: 10px 12px; font-size: var(--fs-sub); }
.check-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-value); }
.check-row input { width: 18px; height: 18px; }
.asset-row, .tx-admin-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border-color);
}
.asset-row:last-child, .tx-admin-row:last-child { border-bottom: none; }
.asset-row .grow, .tx-admin-row .grow { flex: 1; min-width: 0; }
.asset-row .sym { font-weight: 500; font-size: var(--fs-value); }
.asset-row .sym .tag { font-size: var(--fs-micro); font-weight: 400; color: var(--text-secondary); margin-left: 6px; }
.asset-row .order { display: flex; flex-direction: column; gap: 4px; }
.asset-row .order .mini-btn { padding: 3px 9px; line-height: 1; }
.asset-row .order .mini-btn:disabled { opacity: 0.3; cursor: default; }
.asset-row .meta, .tx-admin-row .meta { font-size: var(--fs-caption); color: var(--text-secondary); }
.mini-btn {
  background: var(--surface-elevated); border: none;
  color: var(--text-primary); border-radius: 8px; padding: 8px 12px;
  font-size: var(--fs-caption); cursor: pointer; white-space: nowrap;
}
.mini-btn.danger { color: var(--accent-red); }

/* ---------- Modal / bottom sheet ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
.modal-card {
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.modal-card .input, .modal-card .select { background: var(--surface-elevated); }
.modal-card h3 { margin: 0 0 16px; font-size: var(--fs-title); font-weight: 600; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }
.modal-actions .btn-ghost { background: var(--surface-elevated); }

.sheet-option {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 0;
  background: none; border: none; color: var(--text-primary);
  text-align: left; cursor: pointer;
}
.sheet-option .opt-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-elevated);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sheet-option .opt-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; }
.sheet-option .opt-sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 2px; }
.sheet-option svg.chev { width: 18px; height: 18px; color: var(--text-secondary); margin-left: auto; }

/* ---------- Asset picker (search sheet) ---------- */
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.picker-head h3 { margin: 0; }
.search-field { position: relative; margin-bottom: 8px; }
.search-field svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-secondary); pointer-events: none;
}
.search-field .input { padding-left: 44px; }
#asset-picker-list { max-height: 60vh; overflow-y: auto; }
#asset-picker-list li:empty { display: none; }
.picker-empty { padding: 24px 0; text-align: center; color: var(--text-secondary); font-size: var(--fs-value); }

/* ---------- Distribution sheet ("Распределение активов") ---------- */
.dist-donut-wrap { position: relative; width: 140px; height: 140px; margin: 8px auto 22px; }
.dist-donut-big { width: 100%; height: 100%; display: block; }
.dist-donut-big svg { width: 100%; height: 100%; display: block; }
.dist-donut-count {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dist-donut-count .n { font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dist-donut-count .l { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); }
.dist-list { list-style: none; margin: 0; padding: 0; }
.dist-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.dist-list li:last-child { border-bottom: none; }
.dist-list .grow { flex: 1; min-width: 0; }
.dist-list .name { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; }
.dist-list .sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }
.dist-list .amounts { text-align: right; flex-shrink: 0; }
.dist-list .pct { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-list .usd { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* ---------- P&L sheet ("Прибыль и убыток") ---------- */
.pnl-desc { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin: -4px 0 18px; }
.pnl-rows { display: flex; flex-direction: column; }
.pnl-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}
.pnl-row:last-child { border-bottom: none; }
.pnl-row .label { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; }
.pnl-row .hint { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); margin-top: 4px; }
.pnl-row .amounts { text-align: right; flex-shrink: 0; }
.pnl-row .value { font-size: var(--fs-value); line-height: var(--lh-value); font-weight: 600; font-variant-numeric: tabular-nums; }
.pnl-row .pct { font-size: var(--fs-caption); line-height: var(--lh-caption); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pnl-disclaimer { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-secondary); margin: 18px 0 0; }

/* ---------- Swap quote sheet ---------- */
.quote-provider { display: flex; align-items: center; gap: 12px; padding: 4px 0 18px; }
.quote-provider .name { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; }
.quote-provider .sub { font-size: var(--fs-sub); line-height: var(--lh-sub); color: var(--text-secondary); margin-top: 1px; }
.quote-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: var(--fs-value); line-height: var(--lh-value);
}
.quote-row:last-child { border-bottom: none; }
.quote-row .k { color: var(--text-secondary); }
.quote-row .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-height) + 12px);
  transform: translateX(-50%);
  background: var(--surface-elevated);
  color: var(--text-primary); padding: 10px 16px; border-radius: 999px;
  font-size: var(--fs-sub); z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 90%; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ---------- Passcode modal ---------- */
.passcode-dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0; }
.passcode-dots .pd { width: 14px; height: 14px; border-radius: 50%; background: var(--border-color); }
.passcode-dots .pd.filled { background: var(--text-primary); }
.passcode-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.passcode-pad button {
  padding: 16px 0; font-size: 20px; border-radius: var(--radius-sm);
  background: var(--surface-elevated); border: none;
  color: var(--text-primary); cursor: pointer;
}