/* ═══════════════════════════════════════════════════════════
   Onyx — Adaptive Theme (dark default / light on demand)
   ═══════════════════════════════════════════════════════════ */

/* ── ТЁМНАЯ ТЕМА (по умолчанию) ──────────────────────────── */
:root {
  --bg:                 #0f1419;
  --surface:            #1c232c;
  --surface2:           #242d38;
  --surface3:           #2d3845;
  --border:             rgba(255,255,255,0.08);
  --border-strong:      rgba(255,255,255,0.14);
  --text:               #f1f5f9;
  --text-strong:        #ffffff;
  --text-muted:         #94a3b8;
  --accent:             #3390ec;
  --accent-dim:         rgba(51,144,236,0.15);
  --accent-text:        #38bdf8;
  --accent-text-strong: #7dd3fc;
  --accent-link:        #60a5fa;
  --green:              #4fce5d;
  --green-dim:          rgba(79,206,93,0.15);
  --orange:             #e0a100;
  --orange-dim:         rgba(224,161,0,0.15);
  --red:                #e53935;
  --red-dim:            rgba(229,57,53,0.15);
  --radius:             14px;
  --radius-sm:          10px;
  --card-shadow:        0 2px 8px rgba(0,0,0,0.25);
  --home-card-shadow:   0 2px 8px rgba(0,0,0,0.25);
  --home-page-bg:       #0a0f14;
  /* Glassmorphism */
  --glass-bg-1:         rgba(255,255,255,0.05);
  --glass-bg-2:         rgba(255,255,255,0.07);
  --glass-bg-3:         rgba(255,255,255,0.03);
  --glass-border:       rgba(255,255,255,0.10);
  --glass-blur:         blur(14px);
  --glass-bg-input:     rgba(0,0,0,0.22);
  --glass-border-input: rgba(255,255,255,0.08);
  /* Backwards-compat aliases */
  --blue:               #3390ec;
  --blue-dim:           rgba(51,144,236,0.15);
  --ink:                #f1f5f9;
  --ink-strong:         #ffffff;
  --ink-muted:          #94a3b8;
  --tab-bar-bg:         rgba(15,25,35,0.94);
  --tabbar-height:      56px;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg-1:     rgba(30,40,55,0.85);
    --glass-bg-2:     rgba(20,35,55,0.88);
    --glass-bg-3:     rgba(20,35,55,0.80);
    --glass-bg-input: rgba(20,35,55,0.90);
  }
}

/* ── СВЕТЛАЯ ТЕМА ─────────────────────────────────────────── */
/* Активируется через: JS data-theme, или prefers-color-scheme  */
:root._light-vars,
html[data-theme="light"],
body[data-theme="light"] {
  --bg:                 #ffffff;
  --surface:            #ffffff;
  --surface2:           #f1f5f9;
  --surface3:           #e2e8f0;
  --border:             rgba(0,0,0,0.08);
  --border-strong:      rgba(0,0,0,0.14);
  --text:               #0f172a;
  --text-strong:        #000000;
  --text-muted:         #64748b;
  --accent:             #007aff;
  --accent-dim:         rgba(0,122,255,0.10);
  --accent-text:        #0284c7;
  --accent-text-strong: #0369a1;
  --accent-link:        #2563eb;
  --card-shadow:        0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --home-card-shadow:   0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  --home-page-bg:       #f3f4f6;
  --glass-bg-1:         rgba(0,0,0,0.03);
  --glass-bg-2:         rgba(0,0,0,0.05);
  --glass-bg-3:         rgba(0,0,0,0.02);
  --glass-border:       rgba(0,0,0,0.08);
  --glass-bg-input:     rgba(0,0,0,0.04);
  --glass-border-input: rgba(0,0,0,0.10);
  --blue:               #007aff;
  --blue-dim:           rgba(0,122,255,0.10);
  --ink:                #0f172a;
  --ink-strong:         #000000;
  --ink-muted:          #64748b;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:                 #ffffff;
    --surface:            #ffffff;
    --surface2:           #f1f5f9;
    --surface3:           #e2e8f0;
    --border:             rgba(0,0,0,0.08);
    --border-strong:      rgba(0,0,0,0.14);
    --text:               #0f172a;
    --text-strong:        #000000;
    --text-muted:         #64748b;
    --accent:             #007aff;
    --accent-dim:         rgba(0,122,255,0.10);
    --accent-text:        #0284c7;
    --accent-text-strong: #0369a1;
    --accent-link:        #2563eb;
    --card-shadow:        0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
    --home-card-shadow:   0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
    --home-page-bg:       #f3f4f6;
    --glass-bg-1:         rgba(0,0,0,0.03);
    --glass-bg-2:         rgba(0,0,0,0.05);
    --glass-bg-3:         rgba(0,0,0,0.02);
    --glass-border:       rgba(0,0,0,0.08);
    --glass-bg-input:     rgba(0,0,0,0.04);
    --glass-border-input: rgba(0,0,0,0.10);
    --blue:               #007aff;
    --blue-dim:           rgba(0,122,255,0.10);
    --ink:                #0f172a;
    --ink-strong:         #000000;
    --ink-muted:          #64748b;
  }
}

/* Явная тёмная тема — перебивает prefers-color-scheme: light */
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg:                 #0f1419;
  --surface:            #1c232c;
  --surface2:           #242d38;
  --surface3:           #2d3845;
  --border:             rgba(255,255,255,0.08);
  --border-strong:      rgba(255,255,255,0.14);
  --text:               #f1f5f9;
  --text-strong:        #ffffff;
  --text-muted:         #94a3b8;
  --accent:             #3390ec;
  --accent-dim:         rgba(51,144,236,0.15);
  --accent-text:        #38bdf8;
  --accent-text-strong: #7dd3fc;
  --accent-link:        #60a5fa;
  --card-shadow:        0 2px 8px rgba(0,0,0,0.25);
  --home-card-shadow:   0 2px 8px rgba(0,0,0,0.25);
  --home-page-bg:       #0a0f14;
  --glass-bg-1:         rgba(255,255,255,0.05);
  --glass-bg-2:         rgba(255,255,255,0.07);
  --glass-bg-3:         rgba(255,255,255,0.03);
  --glass-border:       rgba(255,255,255,0.10);
  --glass-bg-input:     rgba(0,0,0,0.22);
  --glass-border-input: rgba(255,255,255,0.08);
  --blue:               #3390ec;
  --blue-dim:           rgba(51,144,236,0.15);
  --ink:                #f1f5f9;
  --ink-strong:         #ffffff;
  --ink-muted:          #94a3b8;
}

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

html, body {
  background: var(--bg);
  color: var(--ink-strong);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  overscroll-behavior: none;
  min-height: 100vh;
}

#app { max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; }

/* ── Pages ───────────────────────────────────────────────── */
.page { display:none; min-height:100vh; padding-bottom: 24px; }
.page.active { display:block; }

@keyframes slideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.page-enter { animation: slideIn 0.25s cubic-bezier(.4,0,.2,1); }

/* ── Nav header ──────────────────────────────────────────── */
.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px 12px 4px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
}
.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-strong);
}
.back-btn {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 10px 16px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  transition: background .15s;
}
.back-btn:active { background: var(--blue-dim); transform: scale(.94); }
@media (max-width: 480px) {
  .back-btn { font-size: 34px; padding: 12px 16px; min-width: 52px; min-height: 52px; }
}

/* ── Home header ─────────────────────────────────────────── */
/* Sticky lives on .home-sticky-bar below (balance + actions). The logo
   header scrolls away naturally — two siblings both pinned at top:0
   would overlap, and balance/actions are the higher-priority "always
   visible" surface. */
.home-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 16px 16px;
  background: var(--home-page-bg, var(--bg));
}
.home-logo { display:flex; align-items:flex-start; gap:12px; }
.logo-icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #3a3a45 0%, #15151b 100%);
  border: 1px solid rgba(212, 212, 220, 0.35);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #d4d4dc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.logo-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--ink-strong);
  -webkit-text-fill-color: var(--ink-strong);
}
.logo-sub   { font-size: 12px; color: var(--ink-muted); margin-top: 1px; }
.logo-img {
  width: 44px; height: 44px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

/* Currency picker — radio rows in a bottom sheet. */
.currency-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.currency-option {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.currency-option input[type="radio"] {
  accent-color: var(--accent);
  width: 18px; height: 18px;
}
.currency-option:has(input:checked) {
  border-color: var(--accent);
  background: rgba(51,144,236,.08);
}
.currency-option .co-label {
  font-weight: 600;
  color: var(--ink);
}
.currency-option .co-sub {
  font-size: 12px;
  color: var(--ink-muted);
  text-align: right;
}

/* KYC status badge on the Settings page.
   Compact pill so the row stays single-line on every viewport.
   The .kyc-menu-item layout below stops the label from being
   pushed onto a second line when the badge widens. */
.kyc-menu-item .menu-item-left {
  flex: 1 1 auto;
  min-width: 0;
}
.kyc-row-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kyc-row-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.kyc-status {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  line-height: 1.4;
}
.kyc-status.approved { color: #16a34a; background: rgba(22,163,74,.12); }
.kyc-status.pending  { color: #d97706; background: rgba(217,119,6,.14); }
.kyc-status.rejected { color: #dc2626; background: rgba(220,38,38,.12); }
.kyc-status.none     { color: var(--accent); background: transparent; padding: 0; font-weight: 500; }
/* Hide the label half of the badge on very narrow screens —
   keep only the icon, e.g. ✅ instead of "✅ Верифицирован". */
@media (max-width: 360px) {
  .kyc-status .kyc-status-text { display: none; }
}

/* iOS-style toggle switch (used on the Settings page). */
.ios-switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
}
.ios-switch input { opacity: 0; width: 0; height: 0; }
.ios-switch-slider {
  position: absolute;
  inset: 0;
  background: #c7c7cc;
  border-radius: 14px;
  cursor: pointer;
  transition: background .2s;
}
.ios-switch-slider::before {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 24px; height: 24px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s;
}
.ios-switch input:checked + .ios-switch-slider { background: var(--accent); }
.ios-switch input:checked + .ios-switch-slider::before { transform: translateX(18px); }
.ios-switch input:disabled + .ios-switch-slider { opacity: .5; cursor: wait; }

/* Centered Telegram-style user avatar above the logo. */
.home-top {
  display: flex;
  justify-content: center;
  padding: 8px 16px 0;
}
.user-avatar-center {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(51,144,236,0.25);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s;
}
.user-avatar-center:active { transform: scale(.94); }
.user-avatar-center img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.uac-fallback {
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.uac-fallback.is-initial {
  color: #ffffff;
  font-weight: 600;
  font-size: 20px;
}

/* ── Home redesign v2: mini crypto icons, big balance, circular actions ── */

/* Единый fixed header: содержит аватар, логотип, баланс и кнопки.
   Всегда position:fixed, центрирован по 480px-колонке.
   #page-home резервирует высоту через --home-sticky-bar-h (JS обновляет
   значение через ResizeObserver, чтобы оно оставалось точным при
   переносах строк, смене шрифта или повороте экрана). */
.home-sticky-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 1000;
  background: var(--home-page-bg, var(--bg));
  /* Honour the iOS notch when the page is opened full-screen. */
  padding-top: env(safe-area-inset-top, 0);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
html[data-theme="dark"] .home-sticky-bar {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
/* Reserve vertical space so Рынок/Меню render below the fixed header
   instead of behind it. Fallback ≈ avatar + logo + balance + buttons. */
#page-home {
  padding-top: var(--home-sticky-bar-h, 280px);
}

/* Right side of header — three small crypto pills (no labels). */
.home-header-v2 { align-items: center; padding-bottom: 10px; }
.crypto-icons-mini {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cim-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
  cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.cim-btn:active { transform: scale(.92); }
.cim-btn:hover { border-color: var(--blue); background: rgba(51,144,236,0.1); }
@media (max-width: 380px) { .cim-btn { width: 40px; height: 40px; font-size: 19px; } }

/* Centered big balance with eye-toggle. */
.balance-display {
  text-align: center;
  padding: 8px 16px 18px;
}
.bd-amount-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.bd-amount {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  line-height: 1.1;
}
.balance-eye {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.balance-eye:active { transform: scale(.9); }
.bd-label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: .3px;
}
@media (max-width: 380px) {
  .bd-amount { font-size: 26px; }
}

/* Three equal circular action buttons (Купить / Обмен / Продать). */
.action-buttons-row {
  display: flex;
  justify-content: center;
  gap: 36px;
  padding: 0 16px 18px;
}
.action-btn-circular {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.action-btn-circular:active .abc-circle { transform: scale(.92); }
.abc-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(51,144,236,0.32);
  transition: transform .12s;
}
.abc-label {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 380px) {
  .action-buttons-row { gap: 28px; }
  .abc-circle { width: 44px; height: 44px; font-size: 18px; }
  .abc-label { font-size: 11px; }
}

/* Compact crypto cards (replaces .coin-tabs + scrolling ticker) */
.coin-cards-wrap {
  position: relative;
  padding: 0 12px 14px;
}
.coin-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.coin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 9px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  min-width: 0;
  font-family: inherit;
}
.coin-card:hover { border-color: var(--ink-muted); }
.coin-card.active {
  border-color: var(--blue);
  background: rgba(51,144,236,0.08);
  box-shadow: 0 0 0 2px rgba(51,144,236,0.15) inset;
}
.coin-card .cc-icon   { font-size: 24px; line-height: 1; }
.coin-card .cc-ticker { font-size: 12px; font-weight: 700; letter-spacing: .3px; color: var(--ink-muted); }

/* Header balance widget — aligned with the "Onyx" title row */
.home-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: right;
  /* Nudge the small "Баланс" label down so its baseline reads on the
     same horizontal as the much larger Onyx title to its left. */
  padding-top: 3px;
}
.home-balance .hb-label {
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1.1;
}
.home-balance .hb-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
  -webkit-text-fill-color: var(--ink-strong);
  white-space: nowrap;
  line-height: 1.15;
}

/* Flat (unchanged) 24h change in market block */
.mp-change-flat { color: var(--ink-muted); }

/* Tiny-screen fallback: horizontal scroll with right-edge fade */
@media (max-width: 359px) {
  .coin-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-right: 16px;
    scrollbar-width: none;
  }
  .coin-cards::-webkit-scrollbar { display: none; }
  .coin-card { flex: 0 0 84px; scroll-snap-align: start; }
  .coin-cards-wrap::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 14px;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg, #fff));
    pointer-events: none;
  }
}

/* Trade buttons */
.trade-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 4px 16px 20px;
}
.trade-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform .12s;
  text-align: left;
  box-shadow: var(--home-card-shadow, 0 2px 12px rgba(0,0,0,0.18));
  min-height: 56px;
}
.trade-btn:active { transform: scale(.97); }
.trade-buy  { background: var(--surface); border-bottom: 2px solid rgba(59,130,246,0.35); }
.trade-sell { background: var(--surface); border-bottom: 2px solid rgba(34,197,94,0.35); }
.trade-btn-icon {
  font-size: 18px;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.trade-buy  .trade-btn-icon { background: #bfdbfe; }
.trade-sell .trade-btn-icon { background: #bbf7d0; }
.trade-btn-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.trade-btn-sub   { font-size: 11px; color: var(--ink-muted); margin-top:2px; line-height: 1.2; }

@media (max-width: 380px) {
  .trade-btn { padding: 8px 12px; min-height: 50px; gap: 8px; }
  .trade-btn-icon { width: 30px; height: 30px; font-size: 16px; }
  .trade-btn-title { font-size: 14px; }
  .trade-btn-sub { font-size: 10px; }
}

/* Section title */
.section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 4px 16px 10px;
}
@media (prefers-color-scheme: light) {
  \.section-title { color: var(--text-muted); }
}
html[data-theme="light"] \.section-title { color: var(--text-muted); }

/* Menu list */
.menu-list { padding: 0 16px; display:flex; flex-direction:column; gap:10px; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: 16px;
  cursor: pointer;
  border: none;
  box-shadow: var(--home-card-shadow, 0 2px 12px rgba(0,0,0,0.18));
  transition: background .15s;
}
.menu-item:active { background: var(--surface2); }
.menu-item-left { display:flex; align-items:center; gap:14px; font-size:16px; font-weight:600; color: var(--ink); }
.menu-ico {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  flex-shrink: 0;
}
.menu-ico-blue   { background: #bfdbfe; }
.menu-ico-green  { background: #bbf7d0; }
.menu-ico-purple { background: #ddd6fe; }
.menu-ico-slate  { background: rgba(100,116,139,0.22); }
.menu-arrow { color: var(--ink-muted); font-size:20px; }
.menu-badge {
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: 8px;
  white-space: nowrap;
  line-height: 1.6;
}

/* Sub-line under the "Мои сделки" menu item showing total unread chat
   messages across active deals. Sits as a sibling of the menu-item so it
   doesn't disturb the row's flex layout used by other menu items. Padding
   aligns the message text with the parent menu item's name (after the icon). */
.menu-subline {
  font-size: 11px;
  color: #f59e0b;
  padding: 0 16px 8px 64px;
  margin-top: -6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-subline:active { opacity: .6; }

/* Blinking badge for unread dispute messages.
   Sits next to .menu-badge ("Мои сделки") and pulses while count > 0.
   Cleared by clearDisputeUnread(dealId) when the user opens the dispute. */
.dispute-unread-badge {
  background: rgba(220, 38, 38, .14);
  color: #dc2626;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  margin-right: 6px;
  white-space: nowrap;
  line-height: 1.6;
  animation: dispute-blink 1s ease-in-out infinite;
}
@keyframes dispute-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .35; }
}

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.fbar-wrap {
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
}
.fbar-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fbar-scroll::-webkit-scrollbar { display: none; }

/* Native select styled as pill */
.fbar-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b7280'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 28px 7px 12px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s;
  min-width: 0;
}
.fbar-select:focus { outline: none; }
.fbar-select-active {
  border-color: rgba(59,130,246,.5);
  background-color: rgba(59,130,246,.12);
  color: #3b82f6;
}

/* Amount input + clear button */
.fbar-amount-wrap {
  position: relative;
  flex-shrink: 0;
}
.fbar-input {
  appearance: none;
  background: var(--glass-bg-input);
  border: 1px solid var(--glass-border-input);
  border-radius: 20px;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 30px 7px 12px;
  width: 110px;
  transition: border-color .15s, background-color .15s;
}
.fbar-input:focus { outline: none; border-color: rgba(59,130,246,.5); }
.fbar-input::placeholder { color: var(--ink-muted); }
/* remove number arrows */
.fbar-input::-webkit-outer-spin-button,
.fbar-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fbar-input[type=number] { -moz-appearance: textfield; }
.fbar-input-active {
  border-color: rgba(59,130,246,.5);
  background-color: rgba(59,130,246,.12);
  color: #3b82f6;
}
.fbar-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ink-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

/* Reset button */
.fbar-reset {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(229,57,53,.08);
  border: 1px solid rgba(229,57,53,.25);
  color: #e53935;
  cursor: pointer;
  transition: background .15s;
}
.fbar-reset:active { background: rgba(229,57,53,.18); }

/* ── List body ───────────────────────────────────────────── */
.list-body { padding: 8px 16px; }

/* ── Order card ──────────────────────────────────────────── */
.order-card {
  background: var(--glass-bg-2);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background .15s;
}
.order-card:active { background: var(--glass-bg-3); }
.order-card-manage { cursor: default; }
.order-card-manage:active { background: var(--surface); }
.mo-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.mo-action-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink-strong);
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.mo-action-btn:active { background: var(--border); }
.mo-action-red { color: #e53935; border-color: rgba(229,57,53,.3); }
.mo-action-green { color: var(--green); border-color: rgba(79,206,93,.3); }
.mo-bulk-delete-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  margin-bottom: 12px;
  background: rgba(229,57,53,.08);
  border: 1px solid rgba(229,57,53,.25);
  border-radius: 12px;
  color: #e53935;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background .15s;
}
.mo-bulk-delete-btn:active { background: rgba(229,57,53,.15); }
/* Card quick-action icons (paused orders) */
.mo-card-actions { display: flex; align-items: center; gap: 6px; }
.mo-icon-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background .15s;
  color: var(--ink-strong);
}
.mo-icon-btn:active { background: var(--border); }
.mo-icon-red   { color: #e53935; border-color: rgba(229,57,53,.3); }
.mo-icon-red:active { background: rgba(229,57,53,.1); }
.mo-icon-play  { color: #22c55e; border-color: rgba(34,197,94,.3); }
.mo-icon-play:active { background: rgba(34,197,94,.1); }
.mo-icon-pause { color: #6b7280; border-color: rgba(107,114,128,.3); }
.mo-icon-pause:active { background: rgba(107,114,128,.1); }
/* Order detail page */
.od-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.od-status-active { background: rgba(34,197,94,.15); color: #22c55e; }
.od-status-paused { background: rgba(107,114,128,.15); color: #6b7280; }
.od-status-other  { background: var(--surface2); color: var(--ink-muted); }
.od-info-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.od-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.od-row:last-child { border-bottom: none; }
.od-label { font-size: 13px; color: var(--ink-muted); flex-shrink: 0; }
.od-value { font-size: 14px; font-weight: 500; color: var(--ink-strong); text-align: right; }
.od-toggle-full {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}
.od-delete-btn {
  width: 100%;
  padding: 14px;
  background: rgba(229,57,53,.1);
  border: 1px solid rgba(229,57,53,.3);
  border-radius: 14px;
  color: #e53935;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.od-delete-btn:active { background: rgba(229,57,53,.2); }
/* Max amount button */
.max-btn {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb, 100,180,255),.12);
  border: 1px solid rgba(var(--accent-rgb, 100,180,255),.3);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.max-btn:active { background: rgba(var(--accent-rgb, 100,180,255),.25); }
/* Order toggle switch */
/* ── Order card toggle (in Мои объявления) ── */
.oc-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.oc-toggle input { display: none; }
.oc-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  background: #4b5563;
  border-radius: 12px;
  transition: background .2s;
  flex-shrink: 0;
}
.oc-toggle input:checked ~ .oc-toggle-track { background: #22c55e; }
.oc-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.oc-toggle input:checked ~ .oc-toggle-track .oc-toggle-thumb { transform: translateX(18px); }
.oc-toggle-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
/* Status text colours */
.status-active { color: #22c55e; }
.status-paused { color: #6b7280; }
/* Closed order chip */
.oc-status-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.chip-cancelled { color: #e53935; background: rgba(229,57,53,.1); }
.chip-done      { color: #6b7280; background: rgba(107,114,128,.12); }
/* Card border by status */
.ocard-active { border: 1px solid rgba(34,197,94,.35) !important; }
.ocard-paused { border: 1px solid var(--border) !important; }
.ocard-closed { border: 1px solid var(--border) !important; opacity: .75; }
/* Card header layout */
.ocard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 2px;
}
.ocard-title { flex: 1; min-width: 0; cursor: pointer; }
.ocard-name  { font-weight: 700; font-size: 15px; }
.ocard-id    { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.ocard-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Keep old mo-toggle for detail page toggle */
.mo-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mo-toggle input { display: none; }
.mo-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  background: #4b5563;
  border-radius: 12px;
  transition: background .2s;
  flex-shrink: 0;
}
.mo-toggle input:checked ~ .mo-toggle-track { background: #22c55e; }
.mo-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mo-toggle input:checked ~ .mo-toggle-track .mo-toggle-thumb { transform: translateX(18px); }
.mo-toggle-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mo-toggle-on  { color: #22c55e; }
.mo-toggle-off { color: #6b7280; }
.order-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.order-price-big {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -.3px;
}
.order-price { color: #ffffff; font-size: 24px; font-weight: 800; }
.price-currency { font-size: 15px; color: #94a3b8; font-weight: 500; }
.price-accent   { color: var(--blue); font-weight: 700; }
.seller-chip    { display:flex; align-items:center; gap:8px; }
.seller-av,
.seller-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #2563eb;
  display: flex; align-items:center; justify-content:center;
  font-size: 15px; font-weight: 700; color: #fff;
  flex-shrink: 0;
}
.seller-name   { font-size: 15px; font-weight: 700; color: var(--accent-text); }
.seller-stats  { font-size: 13px; color: #94a3b8; margin-top: 2px; }
.verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 4px;
  line-height: 1;
  flex-shrink: 0;
}
.verified-badge svg { display: block; }
.verified-badge--lg svg { width: 18px; height: 18px; }
.trusted-badge { font-size: 12px; margin-left: 3px; vertical-align: middle; }
.order-rows { display:grid; gap: 0; margin-bottom: 12px; }
.order-row,
.order-row-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.order-row:last-child,
.order-row-item:last-child { border-bottom: none; }
.oi-label,
.order-label { color: #94a3b8; font-size: 14px; }
.oi-value,
.order-value { color: var(--accent-text); font-weight: 700; font-size: 16px; }
.order-comment {
  font-size: 13px; color: var(--ink-muted);
  background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 8px 10px;
  margin-bottom: 12px;
  border-left: 3px solid rgba(96,165,250,0.4);
}

/* Deal list items */
.deal-id-label   { font-size:15px; font-weight:700; }
.deal-role-label { font-size:12px; color:var(--ink-muted); margin-top:2px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-action {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.btn-action:active   { transform: scale(.97); opacity: .85; }
.btn-action:disabled { opacity: .5; cursor: not-allowed; }
.btn-waiting {
  width: 100%;
  background: var(--glass-bg-2);
  color: var(--ink-strong);
  border: 1px solid var(--accent-text);
  opacity: 1;
  cursor: default;
  margin-top: 8px;
}

.btn-primary-full { width:100%; background:var(--blue);  color:#fff; margin-top:8px; }
.btn-success-full { width:100%; background:var(--green); color:var(--bg); margin-top:8px; }
.btn-ghost        {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--border);
}
.btn-danger  { background: var(--red-dim); color: var(--red); border: 1px solid rgba(229,57,53,0.3); }
.btn-buy-order {
  width: 100%;
  background: #3b82f6;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  margin-top: 4px;
}
.btn-buy-order:active { opacity: .85; transform: scale(.98); }
.order-warn,
.order-warning,
.order-limit-note {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #e2e8f0;
  font-size: 14px;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 10px 0;
  line-height: 1.5;
}
.btn-add {
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid rgba(51,144,236,0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-add:disabled,
.btn-add.disabled {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: auto;
}

/* ── Status badges ───────────────────────────────────────── */
.status-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.status-created   { background: var(--blue-dim);   color: var(--blue);   }
.status-escrow    { background: var(--orange-dim); color: var(--orange); }
.status-payment   { background: var(--orange-dim); color: var(--orange); }
.status-completed { background: var(--green-dim);  color: var(--green);  }
.status-disputed  { background: var(--red-dim);    color: var(--red);    }
.status-cancelled { background: rgba(123,142,163,0.12); color: var(--ink-muted); }

/* ── Form ────────────────────────────────────────────────── */
.form-body  { padding: 16px; }
.form-group { margin-bottom: 18px; }
.form-label {
  display: block;
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-input {
  width: 100%;
  background: var(--glass-bg-input);
  border: 1px solid var(--glass-border-input);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink-strong);
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.form-input:focus { border-color: var(--blue); }

.amount-input-wrap { position: relative; }
.amount-input { padding-right: 96px; font-size:18px; font-weight:600; }
.amount-suffix {
  position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted); font-size: 13px; font-weight: 600;
  pointer-events: none;
}
.amount-hint {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}
.amount-hint strong { color: var(--blue); }

.toggle-group { display:flex; gap:8px; }
.toggle-btn {
  flex: 1; padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all .15s;
}
.toggle-btn.active {
  background: var(--blue-dim);
  color: var(--blue);
  border-color: rgba(51,144,236,0.35);
}

.methods-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.chip.active {
  background: var(--blue-dim);
  color: var(--blue);
  border-color: rgba(51,144,236,0.35);
}

/* ── Info card ───────────────────────────────────────────── */
.deal-info-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin: 0 16px 12px;
}
.info-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin: 0 16px 12px;
}
.di-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.di-row:last-child { border-bottom: none; padding-bottom: 0; }
.di-row:first-child { padding-top: 0; }
.di-label { font-size: 13px; color: var(--ink-muted); }
.di-value { font-size: 14px; font-weight: 600; text-align: right; max-width: 60%; word-break: break-all; }

.payment-details-box {
  background: var(--surface2);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  color: var(--ink-strong);
  word-break: break-all;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-details-box span:first-child { flex: 1; }

/* ── Deal status bar ─────────────────────────────────────── */
.deal-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
}
.timer-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.timer-label { font-size: 12px; color: var(--ink-muted); }
.deal-timer {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-strong, #fff);
  transition: color .3s;
}
/* Grace period: 5min → 30s — yellow + slow pulse */
.deal-timer.timer-warn {
  color: #f59e0b;
  animation: timerPulseYellow 2s infinite;
}
/* Critical: <30s — red + fast pulse */
.deal-timer.timer-danger {
  color: #ef4444;
  animation: timerPulseRed .6s infinite;
}
@keyframes timerPulseYellow {
  0%, 100% { opacity: 1; }
  50%       { opacity: .65; }
}
@keyframes timerPulseRed {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Chat ────────────────────────────────────────────────── */
.chat-section {
  margin: 0 16px 12px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-header {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.chat-messages {
  flex: 1;
  min-height: 180px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.chat-msg-system {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 6px 14px;
  background: var(--surface2);
  border-radius: 12px;
  align-self: center;
  max-width: 90%;
}
.chat-msg-system-alert {
  background: rgba(255, 165, 0, 0.12);
  border: 1px solid rgba(255, 165, 0, 0.35);
  color: #FFA500;
  font-size: 13px;
  padding: 10px 14px;
  margin: 8px 4px;
}
.chat-msg { display:flex; flex-direction:column; max-width: 80%; }
.chat-msg-me   { align-self: flex-end; align-items: flex-end; }
.chat-msg-them { align-self: flex-start; align-items: flex-start; }
.msg-sender { font-size: 11px; color: var(--ink-muted); margin-bottom: 3px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.msg-role-badge { font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.12); white-space: nowrap; }
.msg-role-admin { background: rgba(139,92,246,0.2); color: #a78bfa; }
.chat-msg-admin .msg-bubble { background: rgba(139,92,246,0.15); border: 1px solid rgba(139,92,246,0.3); }
.msg-bubble {
  padding: 8px 12px;
  border-radius: 14px;
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.chat-msg-me   .msg-bubble { background: var(--blue);    border-bottom-right-radius: 4px; }
.chat-msg-them .msg-bubble { background: var(--surface2); border-bottom-left-radius: 4px; border:1px solid var(--border); }
.msg-text { font-size: 14px; word-break: break-word; }
.chat-msg-me .msg-text   { color: #fff; }
.chat-msg-them .msg-text { color: var(--ink-strong); }
.msg-time { font-size: 10px; color: rgba(255,255,255,0.55); flex-shrink:0; margin-bottom:-1px; }
.chat-msg-them .msg-time { color: var(--ink-muted); }
.msg-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  margin-bottom: 1px;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.25);
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.chat-input {
  flex: 1;
  /* min-width:0 lets the input shrink below its intrinsic content width so the
     36×36 send button stays inside the .chat-section instead of being pushed
     off the right edge on narrow viewports (default flex min-width is `auto`,
     i.e. content-width). */
  min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 9px 14px;
  color: var(--ink-strong);
  -webkit-text-fill-color: var(--ink-strong);
  caret-color: var(--accent-text);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.chat-input:focus { border-color: var(--blue); }
.chat-input::placeholder { color: var(--ink-muted); opacity: 1; }
.chat-send-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  transition: opacity .15s;
}
.chat-send-btn:active { opacity: .8; }
.chat-attach-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--ink-strong);
  cursor: pointer;
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  font-size: 16px;
  transition: background .15s;
}
.chat-attach-btn:active { background: var(--blue-dim); }
.chat-img-thumb {
  max-width: 200px;
  max-height: 180px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin-bottom: 4px;
}
.chat-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 4px;
}
.chat-doc-link:hover { text-decoration: underline; }

/* ── Dispute resolution card ─────────────────────────────── */
.dispute-result-card {
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  margin: 12px 0;
}
.dispute-result-win {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  color: #1b5e20;
  border: 1px solid #a5d6a7;
}
.dispute-result-lose {
  background: var(--surface2);
  color: var(--ink-strong);
  border: 1px solid var(--border);
}

/* ── Deal actions ────────────────────────────────────────── */
.deal-actions {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Compact secondary buttons: dispute + cancel */
.deal-actions .btn-ghost,
.deal-actions .btn-cancel-red {
  font-size: 14px !important;
  padding: 9px 12px !important;
  min-height: 40px !important;
}
/* Row layout: side-by-side if text fits, wraps vertically if not */
.deal-actions-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.deal-actions-row .btn-action {
  flex: 1 1 120px;  /* shrink to 120px min, wrap below that */
  margin-top: 0;    /* btn-success-full carries margin-top:8px — neutralise it so
                       the two side-by-side buttons align */
}

/* Compact buttons inside confirmation bottom-sheets (cancel dialog, etc.) */
.bottom-sheet .btn-action {
  font-size: 14px !important;
  font-weight: 600;
  padding: 9px 14px !important;
  min-height: 40px !important;
}
.action-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
  padding: 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.success-note { color: var(--green); background: var(--green-dim); border-color: rgba(79,206,93,0.2); }
.action-timer-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink-muted);
  padding: 10px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.action-timer-note.seller-urgency { color: var(--accent); font-weight: 500; }
.action-timer-note.timer-urgent { color: #e53935 !important; animation: blink-warn 1s infinite; }
.cancel-request-banner {
  text-align: center;
  font-size: 14px;
  color: #e53935;
  font-weight: 600;
  padding: 12px;
  background: rgba(229,57,53,.08);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(229,57,53,.3);
  margin-bottom: 10px;
}
.cancel-request-banner.timer-urgent { animation: blink-warn 1s infinite; }
@keyframes blink-warn {
  0%, 100% { opacity: 1; }
  50%       { opacity: .5; }
}
.deal-time-left {
  font-size: 11px;
  color: var(--ink-muted);
  margin-left: 6px;
  font-weight: 400;
}

/* ── Active deal banner ─────────────────────────────────── */
.active-deal-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(229, 57, 53, 0.12);
  border: 1px solid rgba(229, 57, 53, 0.35);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #e53935;
  cursor: pointer;
  margin-bottom: 4px;
}
.active-deal-banner:active { opacity: .75; }
.active-deal-none {
  background: rgba(79, 206, 93, 0.1);
  border-color: rgba(79, 206, 93, 0.3);
  color: var(--green);
  cursor: default;
  justify-content: center;
}
.adb-arrow { font-size: 18px; opacity: .7; }

/* ── Profile ─────────────────────────────────────────────── */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 20px;
  gap: 6px;
}
.profile-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #1a6fbd);
  display: flex; align-items:center; justify-content:center;
  font-size: 30px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 20px rgba(51,144,236,0.4);
  margin-bottom: 6px;
}
.profile-name     { font-size: 20px; font-weight: 700; }
.profile-username { font-size: 14px; color: var(--ink-muted); }

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 0 16px 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
}
.stat-val { font-size: 20px; font-weight: 700; color: var(--blue); }
.stat-lbl { font-size: 11px; color: var(--ink-muted); margin-top: 4px; }

.balances-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 20px;
}
.balance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.balance-coin   { font-size: 12px; color: var(--ink-muted); font-weight: 600; margin-bottom: 6px; }
.balance-amount { font-size: 16px; font-weight: 700; }
.balance-locked { font-size: 11px; color: var(--orange); margin-top: 4px; }
.balance-status { font-size: 10px; color: var(--ink-muted); margin-top: 4px; }
/* USDT integration paused — show the card greyed-out and uninteractive. */
.balance-card--disabled { opacity: .5; cursor: default; pointer-events: none; }

/* ── Empty / loading states ──────────────────────────────── */
.loading-state {
  text-align: center;
  color: var(--ink-muted);
  padding: 56px 16px;
  font-size: 15px;
}
.empty-state {
  text-align: center;
  padding: 60px 16px;
}
.empty-icon { font-size: 44px; margin-bottom: 12px; }
.empty-text { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.empty-hint { font-size: 14px; color: var(--ink-muted); }

/* ── Bottom sheet (dispute) ──────────────────────────────── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 700;
}
.overlay.visible { opacity: 1; pointer-events: all; }

.bottom-sheet {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%);
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  z-index: 801;
  border: 1px solid var(--border);
  border-bottom: none;
}
.bottom-sheet.visible { transform: translateX(-50%) translateY(0); }

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.sheet-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}
.sheet-desc {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* ── Confirm bottom sheet ────────────────────────────────── */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 800;
}
#confirm-sheet, #tx-sheet {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  z-index: 801;
  border: 1px solid var(--border);
  border-bottom: none;
}
.confirm-sheet-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;                 /* keep value clear of the label */
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.confirm-sheet-row:last-of-type { border-bottom: none; }
.confirm-sheet-row .label {
  color: var(--ink-muted);
  flex: 0 0 auto;            /* label keeps its width, never squeezed */
  white-space: nowrap;
}
.confirm-sheet-row .value {
  font-weight: 600;
  text-align: right;         /* value sits on the right, aligned with siblings */
  min-width: 0;              /* allow it to shrink and wrap in its column */
  overflow-wrap: anywhere;   /* long comments / hashes / addresses wrap cleanly */
}
.confirm-sheet-warning {
  background: var(--orange-dim);
  border: 1px solid var(--orange);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  color: var(--orange);
  margin: 12px 0 4px;
}
.confirm-sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px) + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--glass-bg-3);
  color: var(--ink-strong);
  padding: 11px 20px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
  z-index: 900;
  transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .25s;
  opacity: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  /* Wrap long messages instead of clipping them at the right edge. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center;
  line-height: 1.4;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 32px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.toast.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ── Ticker / курсовая лента ─────────────────────────────── */
/* ── Scrolling ticker ────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  background: var(--surface);
  border-bottom: none;
  padding: 8px 0;
  white-space: nowrap;
  margin: 0 16px 18px;
  border-radius: 14px;
  box-shadow: var(--home-card-shadow, 0 2px 12px rgba(0,0,0,0.18));
  position: relative;
  /* fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.ticker-track {
  display: inline-block;
  will-change: transform;
  animation: ticker-scroll 32s linear infinite;
}
.ticker-wrap:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 20px;
  font-size: 13px;
  font-weight: 600;
  color: #e5e7eb;
  cursor: default;
  vertical-align: middle;
}
.ticker-coin  { font-size: 11px; font-weight: 700; color: var(--ink-muted); letter-spacing: .3px; }
.ticker-price { font-size: 13px; font-weight: 600; color: var(--ink); }
.ticker-fiat  { font-size: 11px; color: var(--ink-muted); }
.ticker-arrow { font-size: 10px; font-weight: 700; line-height: 1; }
.ticker-arrow.up   { color: #22c55e; }
.ticker-arrow.down { color: #ef4444; }
.ticker-dot   { color: var(--ink-muted); font-size: 12px; margin: 0 6px; vertical-align: middle; opacity: .6; }

/* ── Skeleton loading ────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 8px;
}
.skel-line.w90 { width: 90%; }
.skel-line.w70 { width: 70%; }
.skel-line.w50 { width: 50%; }

.skel-order {
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.skel-card {
  width: 90px;
  height: 80px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  flex-shrink: 0;
}
.skel-profile {
  height: 220px;
  border-radius: var(--radius);
  margin: 16px;
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface) 50%, var(--surface2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ── Pull-to-refresh ─────────────────────────────────────── */
/* Fixed pill at top-centre — guaranteed visible regardless of page layout,
   sticky headers or scroll container (the old in-flow growing strip could be
   clipped/hidden, so «часики» never showed). */
.ptr-indicator {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
  font-size: 13px;
  color: var(--ink-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.ptr-indicator.ptr-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ptr-indicator.ptr-ready   { color: var(--blue, #3b82f6); border-color: var(--blue, #3b82f6); }
.ptr-indicator .ptr-spin   { display: inline-block; font-size: 16px; line-height: 1; }
.ptr-indicator.ptr-spinning .ptr-spin { animation: ptrspin .8s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* NB: do NOT set overscroll-behavior on .pull-refresh-area. It has
   overflow-y:auto (so it's a scroll container) but no height, so it has nothing
   to scroll — the gesture must CHAIN to the body. overscroll-behavior:contain
   blocks that chaining and traps the scroll, freezing the whole list. Browser
   bounce is already handled by overscroll-behavior:none on body. */

/* ── Deal number bar ─────────────────────────────────────── */
.deal-number-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.deal-number-label {
  font-size: 15px;
  font-weight: 700;
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--blue);
  letter-spacing: .5px;
}
.copy-btn {
  background: var(--blue-dim);
  color: var(--blue);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s;
}
.copy-btn:active { background: rgba(51,144,236,0.3); }

/* ── Deal steps ──────────────────────────────────────────── */
.deal-steps {
  display: flex;
  align-items: center;
  padding: 8px 16px;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.step-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  transition: all .3s;
  position: relative;
  z-index: 1;
}
.step.active .step-dot {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-dim);
}
.step.done .step-dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: none;
}
/* done overrides active — last step on COMPLETED is green, not blue */
.step.active.done .step-dot {
  background: var(--green);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(56,142,60,.2);
}
.step-label {
  font-size: 9px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.step.active       .step-label { color: var(--blue);  font-weight: 600; }
.step.done         .step-label { color: var(--green);  font-weight: 600; }
.step.active.done  .step-label { color: var(--green);  font-weight: 600; }
.step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 3px;
  margin-bottom: 11px;
  transition: background .3s;
}
.step.done + .step-line        { background: var(--green); }
.step.active.done + .step-line { background: var(--green); }

/* ── Float price ─────────────────────────────────────────── */
.float-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--orange);
  background: var(--orange-dim);
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.float-price-preview {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--blue);
  text-align: center;
  border: 1px solid rgba(51,144,236,0.2);
}
.slider-wrap { position: relative; margin-bottom: 6px; }
.price-slider {
  width: 100%;
  accent-color: var(--blue);
  cursor: pointer;
}
.slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 4px;
}
.float-pct-highlight {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
}

/* ── Online indicators ───────────────────────────────────── */
.online-badge-inline {
  color: var(--green);
  font-size: 8px;
}
.online-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--surface);
}
.sbc-avatar { position: relative; }

/* ── Badges ──────────────────────────────────────────────── */
.trusted-badge {
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
  margin-left: 3px;
}
.block-warn {
  margin-top: 10px;
  padding: 10px 16px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
  text-align: center;
  border: 1px solid rgba(229,57,53,0.3);
}

/* ── Trusted seller progress ─────────────────────────────── */
.trusted-banner {
  margin: 0 16px 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  border-radius: var(--radius);
  border: none;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 4px 14px rgba(22,163,74,0.35);
}
.trusted-progress-card {
  margin: 0 16px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
}
.tp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.tp-title { font-size: 14px; font-weight: 700; }
.tp-pct   { font-size: 13px; color: var(--ink-muted); }
.tp-bar-wrap {
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.tp-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 3px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.tp-conditions { display: flex; flex-direction: column; gap: 8px; }
.tp-cond {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
}
.tp-cond.met { background: var(--green-dim); }
.tp-cond-icon { font-size: 16px; width: 24px; text-align: center; }
.tp-cond.met .tp-cond-icon { color: var(--green); }
.tp-cond-label { flex: 1; font-size: 13px; color: var(--ink-muted); }
.tp-cond.met .tp-cond-label { color: var(--green); font-weight: 600; }
.tp-cond-val { font-size: 13px; font-weight: 600; color: var(--ink-strong); }

/* ── Wallet coin cards ───────────────────────────────────── */
.wallet-coin-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.wc-icon { font-size: 28px; flex-shrink: 0; width: 36px; text-align: center; }
.wc-info { flex: 1; min-width: 0; }
.wc-name { font-size: 16px; font-weight: 700; }
.wc-fiat { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.wc-amounts { text-align: right; flex-shrink: 0; }
.wc-amount { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wc-locked { font-size: 11px; color: var(--orange); margin-top: 2px; }

.wallet-addr-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 8px;
}
.addr-coin { font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 8px; }
.addr-value {
  font-size: 13px;
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--blue);
  word-break: break-all;
  padding: 8px;
  background: var(--surface2);
  border-radius: 8px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.addr-value:active { background: var(--blue-dim); }

/* ── Convert UI ──────────────────────────────────────────── */
.convert-pair-card {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 20px;
  background: var(--surface);
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.convert-side { flex: 1; }
.conv-swap-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--blue);
  font-size: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: background .15s, transform .15s;
}
.conv-swap-btn:active { transform: rotate(180deg); background: var(--blue-dim); }

/* ── Convert page enhancements ───────────────────────────── */
.conv-max-btn {
  position: absolute;
  right: 52px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--blue-dim);
  color: var(--blue);
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  z-index: 1;
}
.conv-max-btn:active { opacity: 0.7; }

.conv-result-live {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--blue);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.conv-receive-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.conv-receive-label {
  font-size: 13px;
  color: var(--ink-muted);
}
.conv-receive-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
}
.conv-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.convert-result-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* ── Tap-to-copy ─────────────────────────────────────────── */
.copyable {
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border-radius: 8px;
}
.copyable:active { background: var(--blue-dim) !important; }
.copyable-block {
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border-radius: 10px;
}
.copyable-block:active { background: var(--blue-dim) !important; }
.copy-hint {
  font-size: 14px;
  color: var(--ink-muted);
  flex-shrink: 0;
  margin-left: 8px;
}
@keyframes copiedFlash {
  0%   { background: rgba(51,144,236,0.25); }
  100% { background: transparent; }
}
.copied-flash { animation: copiedFlash .6s forwards; }

/* ── Payment details warning ─────────────────────────────── */
.payment-missing-warn {
  padding: 10px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 8px;
  font-size: 13px;
  color: #5d4037;
  line-height: 1.5;
}
.link-btn {
  background: none;
  border: none;
  padding: 6px 10px;
  color: var(--blue);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 8px;
  transition: background .15s;
}
.link-btn:active { background: var(--blue-dim); }

/* ── Cancel sheet ────────────────────────────────────────── */
.cancel-warn-box {
  padding: 12px 14px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--red);
  border: 1px solid rgba(229,57,53,0.25);
  line-height: 1.5;
}
.cancel-reasons { display: flex; flex-direction: column; gap: 10px; }
.cancel-reason-item { cursor: pointer; display: block; }
.cancel-reason-item input[type="radio"] { display: none; }
.cancel-reason-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 2px solid transparent;
  transition: border-color .15s, background .15s;
}
.cancel-reason-item input:checked + .cancel-reason-card {
  border-color: var(--blue);
  background: var(--blue-dim);
}
.cr-icon  { font-size: 24px; flex-shrink: 0; }
.cr-title { font-size: 14px; font-weight: 600; }
.cr-hint  { font-size: 12px; color: var(--ink-muted); margin-top: 3px; }
.cr-penalty .cancel-reason-card { border-color: rgba(229,57,53,.2); }
.cr-penalty input:checked + .cancel-reason-card { border-color: #e53935; background: rgba(229,57,53,.08); }
.cr-penalty-hint { color: #e53935 !important; }

.btn-cancel-red {
  width: 100%;
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid rgba(229,57,53,0.3);
  padding: 13px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-cancel-red:active { background: rgba(229,57,53,0.25); }

/* ── Deal timer warning ──────────────────────────────────── */
.deal-timer-warn {
  margin: 0 16px 10px;
  padding: 10px 14px;
  background: var(--red-dim);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--red);
  border: 1px solid rgba(229,57,53,0.25);
  font-weight: 600;
  text-align: center;
  animation: timerPulse 1s infinite;
}

/* ── Top sellers row ─────────────────────────────────────── */
/* ── Market block ────────────────────────────────────────── */
.market-block {
  margin: 0 16px 20px;
  background: var(--surface);
  border: none;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: var(--home-card-shadow, 0 2px 12px rgba(0,0,0,0.18));
}
/* Horizontal infinite-scroll ticker on the home page.
   Items are rendered twice in JS so the keyframes can translate by
   exactly -50% and snap back to the start without a visible jump. */
.market-prices {
  position: relative;
  overflow: hidden;
  /* Hover-pause is a desktop nicety; touch devices ignore it. */
}
.market-prices::before,
.market-prices::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}
.market-prices::before {
  left: 0;
  background: linear-gradient(to right, var(--surface), transparent);
}
.market-prices::after {
  right: 0;
  background: linear-gradient(to left, var(--surface), transparent);
}
.market-prices:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}
.ticker-item {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}
/* Legacy vertical-list class kept in case other pages use it. */
.mp-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.mp-coin {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
}
.mp-price {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mp-change {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.mp-change-up   { color: #4caf50; }
.mp-change-down { color: #e53935; }
.market-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 14px 0 0;
  padding-bottom: 12px;
}
@media (prefers-color-scheme: dark) {
  .market-divider { background: rgba(255,255,255,0.08); }
}
html[data-theme="dark"] .market-divider { background: rgba(255,255,255,0.08); }
.market-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.ms-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}
.ms-row b { font-weight: 700; }
.ms-icon { font-size: 14px; flex-shrink: 0; }

/* ── Orange menu icon ────────────────────────────────────── */
.menu-ico-orange { background: #fef3c7; }

/* ── Pull-to-refresh area ────────────────────────────────── */
.pull-refresh-area { overflow-y: auto; }

/* ── Splash screen ───────────────────────────────────────── */
.splash-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, #0b1c2e 0%, #14243a 50%, #0f3460 100%);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity .45s ease, visibility .45s ease;
}
.splash-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-content { text-align: center; color: #fff; }
.splash-logo-wrap {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 22px;
  display: flex; align-items: center; justify-content: center;
  animation: splashFloat 2.8s ease-in-out infinite;
}
.splash-logo-ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3b82f6;
  border-right-color: #22c55e;
  animation: splashRing 1.8s linear infinite;
}
.splash-logo-img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(59,130,246,0.35);
}
.splash-logo-fallback {
  width: 96px; height: 96px; border-radius: 50%;
  background: #3b82f6; color: #fff; font-size: 40px;
  display: flex; align-items: center; justify-content: center;
}
.splash-brand {
  font-size: 38px; font-weight: 800;
  letter-spacing: 1px; margin: 0;
}
.splash-brand-accent { color: #22c55e; }
.splash-subtitle {
  font-size: 12px; letter-spacing: 4px;
  opacity: 0.65; margin: 6px 0 30px;
}
.splash-dots {
  display: flex; justify-content: center; gap: 8px;
}
.splash-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  animation: splashDots 1.2s ease-in-out infinite;
}
.splash-dots span:nth-child(1) { animation-delay: -0.3s; }
.splash-dots span:nth-child(2) { animation-delay: -0.15s; }
.splash-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes splashFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes splashRing   { to { transform: rotate(360deg); } }
@keyframes splashDots   { 0%,80%,100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@media (max-width: 380px) {
  .splash-logo-wrap { width: 100px; height: 100px; margin-bottom: 18px; }
  .splash-logo-img, .splash-logo-fallback { width: 78px; height: 78px; }
  .splash-brand { font-size: 32px; }
}

/* ── Wallet actions row ──────────────────────────────────── */
.wallet-actions-row {
  display: flex;
  gap: 10px;
  padding: 8px 16px 12px;
  align-items: stretch;
}
.wallet-actions-row .btn-action {
  flex: 1;                         /* both share the row 50/50, even gap */
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 16px !important;
  margin: 0 !important;            /* reset btn-primary-full's margin-top:8px */
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Both buttons identical: same size/shape (above) + same filled-blue fill, so
   the row reads as one symmetric pair. Only the icon/label differ. */
.wallet-actions-row .btn-primary-full,
.wallet-actions-row .btn-ghost {
  background: var(--blue, #3b82f6);
  color: #fff;
  border: none;
  font-weight: 600;
}
@media (max-width: 380px) {
  .wallet-actions-row { gap: 8px; }
  .wallet-actions-row .btn-action { height: 44px !important; min-height: 44px !important; font-size: 14px; }
}

/* ── Wallet addr card QR ─────────────────────────────────── */
.addr-copy-hint {
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  margin-top: 4px;
}
.btn-qr-toggle {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
}
.btn-qr-toggle:active { background: var(--surface2); }
.wallet-qr {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
}

/* ── Transaction list ────────────────────────────────────── */
.tx-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.tx-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.tx-done    { background: #e8f5e9; color: #388e3c; }
.tx-pending { background: #fff8e1; color: #f9a825; }
.tx-failed  { background: #fce4ec; color: #c62828; }
/* Icon colour follows the amount SIGN (matches .tx-plus / .tx-minus), not the
   transaction status — outgoing red, incoming green, convert neutral. */
.tx-icon.tx-out     { background: #ffebee; color: #c62828; }
.tx-icon.tx-in      { background: #e8f5e9; color: #388e3c; }
.tx-icon.tx-neutral { background: #eceff1; color: #607d8b; }
.tx-icon.tx-st-pending { opacity: .6; }
.tx-info { flex: 1; min-width: 0; }
.tx-label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tx-date { font-size: 11px; color: var(--ink-muted); margin-top: 2px; }
.tx-amount { font-size: 13px; font-weight: 700; white-space: nowrap; }
.tx-plus  { color: #388e3c; }
.tx-minus { color: #c62828; }

/* Tappable history row + details sheet */
.tx-row-click { cursor: pointer; }
.tx-row-click:active { background: rgba(0,0,0,.05); }
.tx-sheet-amount {
  font-size: 22px;
  font-weight: 800;
  margin: 2px 0 10px;
}
.tx-sheet-hash {
  font-family: monospace;
  cursor: pointer;
}
.tx-sheet-explorer {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #1976d2;
  text-decoration: none;
}

/* ── Withdraw form ───────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; color: var(--ink-muted); margin-bottom: 6px; }
.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--glass-border-input);
  border-radius: 10px;
  background: var(--glass-bg-input);
  color: var(--ink-strong);
  font-size: 15px;
  box-sizing: border-box;
}
.form-input:focus { outline: none; border-color: var(--accent); }

/* ── KYC verification page ───────────────────────────────── */
.kyc-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 0 20px;
}
.kyc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.kyc-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--border);
  color: var(--ink-muted);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.kyc-step.active .kyc-step-num  { background: var(--accent); color: #fff; }
.kyc-step.done .kyc-step-num    { background: #388e3c; color: #fff; }
.kyc-step-label { font-size: 11px; color: var(--ink-muted); }
.kyc-step.active .kyc-step-label { color: var(--accent); }
.kyc-step-line {
  width: 32px; height: 2px;
  background: var(--border);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.kyc-upload-hint {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 14px;
  text-align: center;
}
.kyc-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 16px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-height: 120px;
}
.kyc-upload-box:active { background: var(--surface2); border-color: var(--accent); }
.kyc-upload-icon { font-size: 32px; }
.kyc-upload-text { font-size: 14px; font-weight: 600; text-align: center; }
.kyc-upload-sub  { font-size: 12px; color: var(--ink-muted); }
.kyc-doc-section { margin-bottom: 16px; }
.kyc-upload-sm { min-height: 80px; padding: 10px 12px; }
.kyc-upload-sm .kyc-upload-icon { font-size: 22px; }
.kyc-upload-sm .kyc-preview { max-height: 120px; }
.kyc-preview {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 8px;
}
.kyc-error {
  color: #e53935;
  font-size: 13px;
  margin: 8px 0;
}

/* ── Step states: cancelled / disputed ───────────────────── */
.step.cancelled .step-dot {
  background: var(--surface2);
  border-color: var(--ink-muted);
}
.step.cancelled .step-label { color: var(--ink-muted); }
.step.cancelled + .step-line { background: var(--ink-muted); opacity: .3; }

.step.disputed .step-dot {
  background: var(--orange);
  border-color: var(--orange);
}
.step.disputed .step-label { color: var(--orange); font-weight: 600; }
.step.disputed + .step-line { background: var(--orange); opacity: .5; }

.deal-timer.timer-done { color: var(--green); font-weight: 700; }

/* ── Chat payment_details message ────────────────────────── */
.chat-msg-payment {
  align-self: center;
  max-width: 95%;
  background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(16,185,129,.1));
  border: 1px solid var(--blue);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 6px 0;
}
.payment-msg-icon { font-size: 22px; flex-shrink: 0; }
.payment-msg-text { font-size: 13px; line-height: 1.6; color: var(--ink-strong); }

/* ── New deal dot ─────────────────────────────────────────── */
.new-deal-dot {
  color: #ef4444;
  font-size: 14px;
  margin-left: 6px;
  vertical-align: middle;
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

/* ── Wallet coin deposit panel ───────────────────────────── */
.wallet-coin-card { cursor: pointer; transition: background .15s, border-color .15s; }
.wallet-coin-card:active, .wallet-coin-card.wcc-active {
  background: var(--surface2);
  border-color: var(--blue);
}
.wc-arrow { font-size: 20px; color: var(--ink-muted); margin-left: 8px; transition: transform .2s; }
.wcc-active .wc-arrow { transform: rotate(90deg); }

.coin-deposit-panel {
  background: var(--surface2);
  border: 1px solid var(--blue);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 14px 16px;
  margin-top: -8px;
  margin-bottom: 8px;
}
.cdp-title { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.cdp-locked-row {
  font-size: 13px;
  color: var(--orange);
  background: var(--orange-dim);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
}
.coin-locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--orange);
  margin-top: 2px;
  font-weight: 500;
}
.cdp-addr {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-family: 'SF Mono','Courier New',monospace;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  margin-bottom: 4px;
  user-select: none;
  -webkit-user-select: none;
}
.cdp-addr:active { background: var(--blue-dim); }
.cdp-qr {
  width: 160px; height: 160px;
  border-radius: 8px;
  margin-top: 8px;
}

/* ── Menu locked icon ─────────────────────────────────────── */
.menu-ico-grey { background: rgba(120,120,120,.15); }

/* ═══════════════════════════════════════════════════════════
   MOBILE-FIRST FONT SCALE — phone-readable sizes
   ═══════════════════════════════════════════════════════════ */

html, body {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ── Page / nav titles ───────────────────────────────────── */
.nav-title   { font-size: 19px; font-weight: 700; }
.page-header { font-size: 19px; font-weight: 700; }

/* ── Prices & amounts ────────────────────────────────────── */
.order-price-big, .order-price {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.3px;
}

/* ── Buttons — unified compact sizing ────────────────────── */
/* Default: 46px primary (was 52px). Compact: 40px for secondary/inline */
.btn-action {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  min-height: 46px;
  border-radius: 10px;
  transition: opacity .15s, transform .12s, background .15s;
}
.btn-primary, .btn-secondary,
.btn-buy, .btn-submit {
  font-size: 15px;
  font-weight: 600;
  padding: 12px 16px;
  min-height: 46px;
  border-radius: 10px;
}
.btn-buy-order  { font-size: 15px; font-weight: 600; padding: 12px 16px; min-height: 44px; border-radius: 10px; }
.btn-add        { font-size: 14px; }
.btn-cancel-red { font-size: 15px; font-weight: 600; padding: 12px 16px; min-height: 46px; border-radius: 10px; }

/* Size variants — compose with any button class */
.btn-sm { font-size: 13px !important; padding: 8px 12px !important; min-height: 36px !important; }
.btn-lg { font-size: 16px !important; padding: 14px 20px !important; min-height: 52px !important; }

/* Narrow screen tweak */
@media (max-width: 380px) {
  .btn-action,
  .btn-primary, .btn-secondary, .btn-buy, .btn-submit, .btn-cancel-red,
  .btn-buy-order {
    font-size: 14px;
    padding: 10px 14px;
    min-height: 42px;
  }
}

/* ── Form inputs ─────────────────────────────────────────── */
.form-input { font-size: 16px; padding: 15px 14px; }

/* ── Labels & values ─────────────────────────────────────── */
.di-label { font-size: 14px; color: var(--ink-muted); }
.di-value { font-size: 16px; font-weight: 600; color: var(--accent-text); }

/* ══════════════════════════════════════════════════════════
   LIGHT-BLUE VALUE PALETTE
   ══════════════════════════════════════════════════════════ */

/* All values / numbers / important text */
.order-value, .oi-value,
.deal-value, .info-value,
.copy-value, .requisite-value {
  color: var(--accent-text) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* Prices */
.order-price,
.order-price-big {
  color: var(--ink-strong) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

/* Order methods */
.order-methods {
  color: var(--accent-text) !important;
  font-weight: 600 !important;
}

/* Seller name */
.seller-name {
  color: var(--accent-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.seller-stats {
  color: #94a3b8 !important;
  font-size: 13px !important;
}

/* Card/account numbers and requisites in <code> */
code,
code.di-code {
  color: var(--accent-text-strong) !important;
  background: rgba(125, 211, 252, 0.08) !important;
  border: 1px solid rgba(125, 211, 252, 0.25) !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  display: block !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  font-family: 'SF Mono', 'Courier New', monospace !important;
  letter-spacing: .02em !important;
}
/* Inline code (e.g. inside sentences) — keep on one line */
code.inline {
  display: inline !important;
  padding: 2px 6px !important;
  font-size: 15px !important;
}

/* Deal amounts */
.fiat-amount, .crypto-amount, .deal-amount {
  color: var(--accent-text) !important;
  font-weight: 700 !important;
}

/* Labels stay grey */
.order-label, .oi-label,
.deal-label, .di-label {
  color: #94a3b8 !important;
}

/* Headings adapt to theme */
.page-header, .nav-title, h1, h2 {
  color: var(--ink-strong) !important;
}

/* ── Menu items ──────────────────────────────────────────── */
.menu-item      { font-size: 17px; min-height: 52px; }
.menu-item-left { font-size: 17px; }

/* ── Profile ─────────────────────────────────────────────── */
.profile-name { font-size: 22px; font-weight: 700; }
.stat-val     { font-size: 28px; font-weight: 700; }
.stat-value   { font-size: 28px; font-weight: 700; }
.stat-lbl     { font-size: 13px; }

/* ── Deal timer & number ─────────────────────────────────── */
.deal-timer        { font-size: 22px; font-weight: 700; }
.deal-number-label { font-size: 18px; font-weight: 700; }

/* ── Chat messages ───────────────────────────────────────── */
.msg-text          { font-size: 16px; line-height: 1.6; }
.chat-message      { font-size: 16px; line-height: 1.6; }
.chat-msg-system   { font-size: 14px; }
.chat-input        { font-size: 16px; }

/* ── Status badge ────────────────────────────────────────── */
.status-badge      { font-size: 15px; font-weight: 600; }

/* ── Toast ───────────────────────────────────────────────── */
.toast             { font-size: 15px; }

/* ── Section & small text ────────────────────────────────── */
.section-title   { font-size: 13px; }
.amount-hint     { font-size: 13px; }
.form-label      { font-size: 14px; }
.order-comment { font-size: 13px; }
.hint-text     { font-size: 13px; }

/* ── Touch targets: min 48px for all clickable items ─────── */
.menu-item,
.order-card,
.mo-action-btn,
.wallet-coin-card,
.menu-item,
.dflow-action-row,
.dflow-details-row {
  min-height: 48px;
}

/* ── Card padding & spacing ──────────────────────────────── */
.order-card    { padding: 16px; margin-bottom: 12px; }
.info-card,
.deal-info-card,
.dflow-card    { padding: 16px; }
.list-body     { padding: 8px 16px; gap: 10px; }

/* Nav settings button */
.nav-settings-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--ink-muted);
  transition: background .15s;
  line-height: 1;
}
.nav-settings-btn:active { background: var(--surface2); }

/* ═══════════════════════════════════════════════════════════
   DEAL FLOW SCREENS — page-deal-*
   ═══════════════════════════════════════════════════════════ */

.dflow-timer-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  padding: 3px 8px;
  background: var(--surface2);
  border-radius: 20px;
  border: 1px solid var(--border);
}
.dflow-timer-urgent { border-color: rgba(229,57,53,.4); background: var(--red-dim); }
.dflow-timer-urgent .deal-screen-timer { color: var(--red) !important; }

.deal-screen-timer {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--green);
}

.dflow-deal-num-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.dflow-deal-num {
  font-size: 16px;
  font-weight: 700;
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--blue);
  letter-spacing: .5px;
}

.dflow-card {
  background: var(--glass-bg-3);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  padding: 16px;
  margin: 12px 16px 0;
}
.dflow-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.dflow-cancel-hint {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
  text-align: center;
  margin-bottom: 10px;
  padding: 0 4px;
}
.dflow-cancel-btn { width: 100%; margin-top: 0; }

.dflow-chat-btn {
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid rgba(51,144,236,.3);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.dflow-chat-btn:active { background: rgba(51,144,236,.25); }
.dflow-chat-btn[data-unread="true"] {
  background: var(--accent-text);
  color: #fff;
  border-color: transparent;
  animation: chatPulse 1.6s ease-in-out infinite;
}
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(2,132,199,0.45); }
  50%       { box-shadow: 0 0 0 8px rgba(2,132,199,0); }
}
.dflow-chat-badge {
  display: inline-block;
  min-width: 18px;
  padding: 2px 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.dflow-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  text-align: center;
  min-height: 90px;
}
.dflow-upload-box:active { background: var(--surface2); border-color: var(--blue); }
.dflow-upload-link {
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dflow-receipt-uploaded {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--green-dim);
  border: 1px solid rgba(79,206,93,.35);
  border-radius: 10px;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════
   CREATE ORDER WIZARD
   ═══════════════════════════════════════════════════════════ */

.co-wizard-bar {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.co-wizard-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 8px;
}
.co-wiz-step {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface2);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-muted);
  transition: all .2s;
  flex-shrink: 0;
  z-index: 1;
}
.co-wiz-step.co-wiz-active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 4px var(--blue-dim);
}
.co-wiz-step.co-wiz-done {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.co-wiz-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 2px;
  transition: background .3s;
  max-width: 48px;
}
.co-wiz-line.co-wiz-line-done { background: var(--green); }
.co-wiz-label {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 500;
}
.co-nav-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding: 12px 0 calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 12px;
  margin-bottom: -16px;
}
.co-nav-back { margin-top: 0; }
.co-nav-next { margin-top: 0; }
.co-preview-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 16px;
}
.co-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.co-preview-row:last-child { border-bottom: none; }
.co-preview-label { font-size: 13px; color: var(--ink-muted); flex-shrink: 0; }
.co-preview-val { font-size: 14px; font-weight: 600; text-align: right; }
.co-preview-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink-strong);
}

/* ═══════════════════════════════════════════════════════════
   WITHDRAW IMPROVEMENTS
   ═══════════════════════════════════════════════════════════ */

.wd-addr-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wd-addr-input { flex: 1; }
.wd-addr-btn {
  flex-shrink: 0;
  width: 40px; height: 48px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.wd-addr-btn:active { background: var(--blue-dim); }
.wd-amount-wrap {
  position: relative;
}
.wd-max-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--blue-dim);
  color: var(--blue);
  border: 1px solid rgba(51,144,236,.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.wd-recent-addr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
  margin-bottom: 6px;
}
.wd-recent-addr-item:active { background: var(--blue-dim); }
.wd-recent-coin {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-muted);
  background: var(--surface);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.wd-recent-addr-text {
  flex: 1;
  font-size: 12px;
  font-family: 'SF Mono', 'Courier New', monospace;
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Deal-pay page: code values ──────────────────────────── */
code.di-code {
  font-family: 'SF Mono', 'Courier New', monospace;
  font-size: 14px;
  font-style: normal;
  background: var(--surface2);
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--ink-strong);
  letter-spacing: .02em;
}
code.di-code.price-accent { color: var(--blue); }

/* ── Deal-pay: details expandable row ────────────────────── */
.dflow-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  margin: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-strong);
  transition: background .15s;
}
.dflow-details-row:active { background: var(--surface2); }
.dflow-details-arrow {
  font-size: 20px;
  color: var(--ink-muted);
  transition: transform .2s;
  font-weight: 400;
}
.dflow-details-arrow.open { transform: rotate(90deg); }

/* ── Deal-pay: actions card (help / cancel) ──────────────── */
.dflow-actions-card { padding: 0; overflow: hidden; }
.dflow-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  transition: background .15s;
  font-size: 16px;
  font-weight: 500;
}
.dflow-action-row:active { background: var(--surface2); }
.dflow-action-blue { color: var(--blue); }
.dflow-action-red  { color: var(--red); }
.dflow-action-arr  { color: var(--ink-muted); font-size: 20px; font-weight: 400; }
.dflow-action-divider {
  height: 1px;
  background: var(--border);
  margin: 0 18px;
}

/* ── Deal-pay: sticky confirm button bar ─────────────────── */
.dflow-sticky-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.dflow-confirm-btn {
  display: block;
  width: 100%;
  height: 56px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.dflow-confirm-btn:active { opacity: .85; transform: scale(.98); }

/* Insufficient balance toast action */
.toast-action-btn {
  margin-left: 12px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

/* ── Deal Review page ────────────────────────────────────── */
#page-deal-review {
  padding-top: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
/* When active: pin to viewport top, independent of scroll position */
#page-deal-review.active {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 480px !important;
  overflow-y: auto !important;
  z-index: 10 !important;
  min-height: unset !important;
}

#page-deal-review .nav-header,
#page-deal-review .page-header {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#page-deal-review .form-body,
#page-deal-review .deal-review-content {
  padding-top: 8px !important;
  margin-top: 0 !important;
}

.deal-review-content {
  padding-bottom: 24px;
}

/* ── page-footer: sticks to viewport bottom on short AND long pages ── */
/* Short pages: margin-top:auto pushes to bottom of min-height:100svh container */
/* Long pages: position:sticky kicks in during scroll */
.page-footer {
  position: sticky;
  bottom: 0;
  z-index: 30;
  margin-top: auto;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-footer > button,
.page-footer > .btn-action {
  margin-top: 0 !important;
}

/* Short final pages: flex-column so margin-top:auto works on .page-footer */
#page-deal-cancelled.active,
#page-deal-waiting-confirm.active {
  display: flex !important;
  flex-direction: column;
  min-height: 100svh;
  padding-bottom: 0 !important;
}

/* ── Universal sticky footer for action buttons ─────────────── */
.page-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
}
.page-sticky-footer > button,
.page-sticky-footer > .btn-action {
  flex: 1;
  margin-top: 0 !important;
}

.deal-review-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: auto;
}

/* Compact buttons on deal-review page only */
#review-action-bar .btn-action {
  min-height: 44px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════
   GLASSMORPHISM — cards · bubbles · inputs · blocks
   TODO: убрать !important после тестирования, оставил для гарантии
   перебивания прежних правил (.order-card на стр. 305 и т.д.)
   ═══════════════════════════════════════════════════════════ */

/* Incoming chat bubbles */
.chat-msg-them .msg-bubble {
  background: var(--glass-bg-2) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  color: var(--ink-strong) !important;
}
.chat-msg-them .msg-text { color: var(--ink-strong) !important; }

/* Own chat bubbles — blue accent preserved */
.chat-msg-me .msg-bubble {
  background: rgba(29,78,216,0.85) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(96,165,250,0.3) !important;
  color: #ffffff !important;
}

/* System messages */
.chat-msg-system {
  background: var(--glass-bg-1) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  color: var(--ink-muted) !important;
}
.chat-msg-system-alert {
  background: rgba(255,165,0,0.12) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,165,0,0.35) !important;
}

/* Requisites / copy blocks */
.requisite-value,
.copy-value,
code,
.copy-block {
  background: var(--glass-bg-2) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(125,211,252,0.4) !important;
  color: var(--accent-text-strong) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}

/* Order cards — overrides line 305 */
.order-card {
  background: var(--glass-bg-2) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
}

/* Deal info row separators */
.di-row,
.deal-info-row {
  border-bottom: 1px solid var(--border) !important;
}

/* Warning / notice blocks */
.order-warn,
.order-warning,
.order-limit-note,
.warning-block {
  background: var(--glass-bg-1) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  color: var(--ink-strong) !important;
}


input::placeholder,
textarea::placeholder {
  color: var(--ink-muted) !important;
  -webkit-text-fill-color: var(--ink-muted) !important;
  opacity: 1 !important;
}


#page-home .section-title { padding-top: 4px; margin-top: 8px; }
#page-home .trade-buy  .trade-btn-icon { color: #1e40af; }
#page-home .trade-sell .trade-btn-icon { color: #166534; }
#page-home .menu-item span { color: var(--ink); }

/* Dark theme: deeper shadows for home cards */
@media (prefers-color-scheme: dark) {
  #page-home .menu-item,
  #page-home .trade-btn,
  #page-home .market-block,
  #page-home .ticker-wrap {
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15);
  }
}
html[data-theme="dark"] #page-home .menu-item,
html[data-theme="dark"] #page-home .trade-btn,
html[data-theme="dark"] #page-home .market-block,
html[data-theme="dark"] #page-home .ticker-wrap {
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.15);
}

/* Icon bg — насыщенные пастельные в обеих темах */
.menu-ico-blue   { background: #bfdbfe; }
.menu-ico-green  { background: #bbf7d0; }
.menu-ico-orange { background: #fde68a; }
.menu-ico-purple { background: #ddd6fe; }

/* FORCE logo-title visibility — НЕ УДАЛЯТЬ */
.logo-title,
.home-logo .logo-title,
.home-header .logo-title,
#page-home .logo-title {
  color: var(--text-strong) !important;
  -webkit-text-fill-color: var(--text-strong) !important;
}

/* FORCE home screen text — НЕ УДАЛЯТЬ */
#page-home .menu-item-left,
#page-home .menu-item-left span,
#page-home .menu-item span,
#page-home .trade-btn-title,
#page-home .mp-coin,
#page-home .mp-price {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}
#page-home .trade-btn-sub,
#page-home .section-title,
#page-home .menu-arrow,
#page-home .ms-row,
#page-home .ticker-coin,
#page-home .ticker-fiat,
#page-home .ticker-dot {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
}
#page-home .ticker-price {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* ═══════════════════════════════════════ BOTTOM TAB BAR ═══ */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 600;
  display: flex;
  align-items: stretch;
  height: 56px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--tab-bar-bg, rgba(15,25,35,0.94));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-sizing: content-box;
}
.tab-bar.hidden { display: none; }

.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  padding: 6px 4px;
  position: relative;
  transition: color .15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
}
.tab-btn.active       { color: var(--blue); }
.tab-btn:active       { opacity: .7; }
.tab-icon             { font-size: 22px; line-height: 1; display: block; }
.tab-label            { font-size: 10px; font-weight: 600; letter-spacing: .2px; line-height: 1; }

.tab-badge {
  position: absolute;
  top: 4px;
  left: calc(50% + 6px);
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.5;
  pointer-events: none;
}

/* Pages that show tab bar need extra bottom padding */
#page-home,
#page-deals,
#page-my-orders,
#page-wallet,
#page-profile {
  padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
}

/* === GLOBAL INPUT VISIBILITY — НЕ УДАЛЯТЬ === */
/* --text-strong / --text-muted уже адаптированы под тему через :root + data-theme */
input[type],
input:not([type]),
input[type="number"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea,
select,
[contenteditable="true"] {
  color: var(--text-strong) !important;
  -webkit-text-fill-color: var(--text-strong) !important;
  caret-color: var(--accent-text, #38bdf8) !important;
}
input[type]::placeholder,
input:not([type])::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  -webkit-text-fill-color: var(--text-muted) !important;
  opacity: 1 !important;
}
input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-strong) !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* ── History page ────────────────────────────────────────────── */
.history-filters {
  display: flex;
  flex-wrap: wrap;              /* WRAP to a 2nd line so the last chip («Конвертации») is always fully visible, never clipped — scrolling a single row was undiscoverable on the phone */
  gap: 8px;                     /* row-gap + column-gap both 8px */
  padding: 12px 16px 4px 16px;
  max-width: 100%;              /* never widen the page */
}
.history-filters .chip {
  flex: 0 0 auto;               /* keep natural width; wrap instead of squeezing */
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface2, var(--surface));
  color: var(--ink-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.history-filters .chip.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius);
  margin: 0 16px 10px;
  border: 1px solid var(--border);
}
.history-item:active { opacity: .8; }
.hi-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface2, rgba(255,255,255,0.06));
  font-size: 18px;
  flex-shrink: 0;
}
.hi-body { flex: 1; min-width: 0; }
.hi-title { font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.hi-sub { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.hi-amount {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.hi-amount.positive { color: var(--green); }
.hi-amount.negative { color: var(--red); }
.hi-amount.neutral  { color: var(--ink-muted); }

.hi-cancelled .hi-amount,
.hi-cancelled .hi-title,
.hi-cancelled .hi-sub { color: var(--ink-muted); text-decoration: line-through; }
.hi-badge-cancelled {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface2, rgba(255,255,255,0.08));
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: middle;
  text-decoration: none;
}
.btn-load-more {
  display: block;
  width: calc(100% - 32px);
  margin: 4px 16px 16px;
  padding: 12px;
  background: var(--surface2, rgba(255,255,255,0.06));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.btn-load-more:active { opacity: .7; }
.btn-load-more:disabled { opacity: .6; cursor: default; }

/* «Это все операции» — end-of-list marker shown when nothing more to load. */
.list-end-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-muted);
  padding: 14px 16px 18px;
}

/* Compact 10/20/30 page-size selector above transaction / history lists. */
.page-size-sel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 4px;
}
.page-size-sel .pss-label {
  font-size: 12px;
  color: var(--ink-muted);
  margin-right: 2px;
}
.page-size-sel .pss-opt {
  min-width: 34px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface2, var(--surface));
  color: var(--ink-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.page-size-sel .pss-opt.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.history-date-sep {
  font-size: 12px;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 8px 16px 4px;
  letter-spacing: .3px;
}

/* ── Accept deadline timer (deal-review page) ───────────────── */
.accept-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 0 0 12px;
  background: rgba(245,158,11,0.12);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  color: #f59e0b;
  font-weight: 700;
}
.accept-timer .at-label { color: var(--ink-muted); font-weight: 500; font-size: 14px; }
.accept-timer .at-value { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; }
.accept-timer.timer-urgent {
  background: rgba(239,68,68,0.12);
  border-color: var(--red);
  color: var(--red);
  animation: timerPulse .6s infinite;
}

/* ═══ Deposit TON page (Шаг 2) ════════════════════════════════════════════ */
.deposit-warning {
  background: #fff3cd;
  border-left: 4px solid #ff9800;
  color: #7a4f00;
  padding: 12px 14px;
  margin: 0 0 14px 0;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
}
.deposit-qr-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 16px 16px 10px;
  margin: 0 0 14px 0;
  text-align: center;
}
.deposit-qr {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}
.deposit-qr img,
.deposit-qr canvas {
  width: 220px;
  height: 220px;
}
.deposit-qr-hint {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 8px;
}
.deposit-row {
  margin: 12px 0;
}
.deposit-row > label {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.copy-field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(128, 128, 128, 0.12);
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(128, 128, 128, 0.2);
}
.copy-field.highlight {
  background: #fff3e0;
  border-color: #ff9800;
}
.copy-field .mono {
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
  flex: 1;
  color: var(--ink, #f1f5f9);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.copy-field.highlight .mono {
  color: #c76b00;
  font-weight: 600;
}
.copy-btn {
  background: var(--tg-theme-button-color, #3390ec);
  color: var(--tg-theme-button-text-color, #fff);
  border: none;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.deposit-steps {
  margin: 16px 0 8px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.deposit-steps ol {
  padding-left: 20px;
  margin: 0;
}
.deposit-steps li {
  margin: 6px 0;
}

/* Compact offer cards (P2P list) */
.offer-card-compact {
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-2);
  cursor: pointer;
  transition: background 0.15s;
}
.offer-card-compact:active {
  background: var(--glass-bg-3);
}
.offer-row-1 {
  font-size: 12px;
  color: var(--subtext);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offer-row-2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.offer-row-2 .offer-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.offer-row-2 .offer-amount {
  font-size: 12px;
  color: var(--subtext);
}
.offer-row-3 {
  font-size: 12px;
  color: var(--subtext);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.offer-status-online  { color: #4ade80; }
.offer-status-offline { color: var(--subtext); }
.offer-btn-buy {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.offer-btn-buy:active { opacity: 0.85; transform: scale(0.98); }

/* Offer preview screen (full detail) */
.op-card {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.op-seller-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  word-break: break-word;
}
.op-seller-stats {
  font-size: 13px;
  color: var(--subtext);
  line-height: 1.5;
}
.op-seller-since {
  font-size: 12px;
  color: var(--subtext);
  margin-top: 4px;
}
.op-price-card {
  text-align: center;
  padding: 18px 16px;
}
.op-price-big {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.5px;
  line-height: 1.1;
}
.op-price-currency {
  font-size: 18px;
  font-weight: 600;
  color: var(--subtext);
  margin-left: 4px;
}
.op-price-sub {
  font-size: 13px;
  color: var(--subtext);
  margin-top: 6px;
}
.op-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.op-row:first-child { padding-top: 0; }
.op-row:last-child  { border-bottom: none; padding-bottom: 0; }
.op-row-block {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.op-label {
  font-size: 13px;
  color: var(--subtext);
}
.op-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.op-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.op-method-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 14px;
  background: var(--glass-bg-3);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}
.op-comment-body {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Deal rating widget (history list) */
.deal-rate-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.deal-rate-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.deal-rate-btn:active { opacity: 0.8; transform: scale(0.98); }
.deal-rate-like:hover    { border-color: #4ade80; color: #4ade80; background: rgba(74,222,128,0.10); }
.deal-rate-dislike:hover { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.10); }
.deal-rate-done {
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--subtext);
  text-align: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

/* === FIX: всегда центрировать баланс (глазик прижат справа) === */
.balance-display {
  text-align: center;
  width: 100%;
}
.bd-amount-row {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;  /* spacer | сумма | глазик+spacer */
  align-items: center;
  width: 100%;
  gap: 0;
}
.bd-amount-row .bd-amount {
  grid-column: 2;  /* строго в центре */
  text-align: center;
  white-space: nowrap;     /* не переносить число */
}
.bd-amount-row .balance-eye {
  grid-column: 3;
  justify-self: start;
  margin-left: 10px;       /* небольшой отступ от цифры */
}
/* На очень узких экранах если число всё ещё длинное — ужать шрифт */
@media (max-width: 380px) {
  .bd-amount { font-size: 22px; }
}
@media (max-width: 320px) {
  .bd-amount { font-size: 18px; }
}

/* ── Clickable counterparty username + public profile sheet (v=225) ── */
.clickable-user {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.clickable-user:hover { opacity: 0.8; }

.online-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.online-dot.online  { background: #4ade80; }
.online-dot.offline { background: #94a3b8; }

.up-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}
.up-row + .up-row { border-top: 1px solid var(--border); }
.up-row span { color: var(--ink-muted); }
.up-row b { color: var(--ink-strong); font-weight: 600; }

.up-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.up-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface2);
  color: var(--ink-strong);
  border: 1px solid var(--border);
}
/* Light theme defaults — dark saturated text on tinted bg (high contrast) */
.up-badge-verified { background: rgba(59,130,246,0.22);  color: #1e40af; border-color: rgba(59,130,246,0.5); }
.up-badge-reliable { background: rgba(245,158,11,0.22);  color: #b45309; border-color: rgba(245,158,11,0.5); }
.up-badge-trusted  { background: rgba(34,197,94,0.22);   color: #15803d; border-color: rgba(34,197,94,0.5); }
/* Dark theme — explicit data-theme override */
html[data-theme="dark"] .up-badge-verified,
body[data-theme="dark"] .up-badge-verified { background: rgba(59,130,246,0.20); color: #93c5fd; border-color: rgba(59,130,246,0.45); }
html[data-theme="dark"] .up-badge-reliable,
body[data-theme="dark"] .up-badge-reliable { background: rgba(245,158,11,0.20); color: #fbbf24; border-color: rgba(245,158,11,0.45); }
html[data-theme="dark"] .up-badge-trusted,
body[data-theme="dark"] .up-badge-trusted  { background: rgba(34,197,94,0.20);  color: #86efac; border-color: rgba(34,197,94,0.45); }
/* Dark theme — system preference fallback (when no explicit data-theme="light" override) */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .up-badge-verified,
  body:not([data-theme="light"]) .up-badge-verified { background: rgba(59,130,246,0.20); color: #93c5fd; border-color: rgba(59,130,246,0.45); }
  html:not([data-theme="light"]) .up-badge-reliable,
  body:not([data-theme="light"]) .up-badge-reliable { background: rgba(245,158,11,0.20); color: #fbbf24; border-color: rgba(245,158,11,0.45); }
  html:not([data-theme="light"]) .up-badge-trusted,
  body:not([data-theme="light"]) .up-badge-trusted  { background: rgba(34,197,94,0.20);  color: #86efac; border-color: rgba(34,197,94,0.45); }
}

.btn-warning-outline {
  background: transparent;
  color: #f59e0b;
  border: 1.5px solid #f59e0b;
  padding: 12px 16px;
  border-radius: 10px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.btn-warning-outline:hover { background: rgba(245,158,11,0.1); }

/* ── Payment method card (active deal "Реквизиты для оплаты", v=86) ── */
.req-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.req-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.req-head img {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}
.req-bank-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-strong);
  line-height: 1.2;
}
.req-method-type {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
.req-label-tag {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-style: italic;
}
.req-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--border);
}
.req-row:first-of-type { border-top: 1px solid var(--border); }
.req-label {
  color: var(--ink-muted);
  font-size: 13px;
  flex-shrink: 0;
}
.req-value {
  font-weight: 600;
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--ink-strong);
  text-align: right;
  flex: 1;
  word-break: break-all;
  min-width: 0;
}
.req-copy-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-strong);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  flex-shrink: 0;
}
.req-copy-btn:hover { background: rgba(255,255,255,0.05); }
.req-empty {
  color: var(--ink-muted);
  font-style: italic;
  text-align: center;
  padding: 12px;
}
.pay-requisites-card { margin-top: 6px; }

/* ── Support tickets (Mini App) v=92 ───────────────────────────────────────── */
.support-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.support-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.support-item:active { transform: scale(0.98); opacity: 0.85; }
.support-item-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.support-item-subject {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-strong);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-item-id {
  color: var(--ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.support-item-preview {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 6px;
}
.support-item-meta {
  display: flex;
  font-size: 11px;
  color: var(--ink-muted);
}
.support-empty {
  text-align: center;
  padding: 56px 16px;
  color: var(--ink-muted);
}
.support-loading {
  text-align: center;
  padding: 24px;
  color: var(--ink-muted);
}

/* status dot — small circle next to subject */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.open         { background: #fbbf24; }
.status-dot.in-progress  { background: #3b82f6; }
.status-dot.waiting      { background: #8b5cf6; }
.status-dot.closed       { background: #94a3b8; }

/* status pill — bigger label under header */
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.status-pill.status-open         { background: rgba(251,191,36,0.22); color: #92400e; }
.status-pill.status-in-progress  { background: rgba(59,130,246,0.22); color: #1e3a8a; }
.status-pill.status-waiting      { background: rgba(139,92,246,0.22); color: #5b21b6; }
.status-pill.status-closed       { background: rgba(148,163,184,0.22); color: #334155; }
html[data-theme="dark"] .status-pill.status-open,
body[data-theme="dark"] .status-pill.status-open         { color: #fbbf24; }
html[data-theme="dark"] .status-pill.status-in-progress,
body[data-theme="dark"] .status-pill.status-in-progress  { color: #93c5fd; }
html[data-theme="dark"] .status-pill.status-waiting,
body[data-theme="dark"] .status-pill.status-waiting      { color: #c4b5fd; }
html[data-theme="dark"] .status-pill.status-closed,
body[data-theme="dark"] .status-pill.status-closed       { color: #cbd5e1; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .status-pill.status-open         { color: #fbbf24; }
  html:not([data-theme="light"]) .status-pill.status-in-progress  { color: #93c5fd; }
  html:not([data-theme="light"]) .status-pill.status-waiting      { color: #c4b5fd; }
  html:not([data-theme="light"]) .status-pill.status-closed       { color: #cbd5e1; }
}

/* ticket detail — meta strip below header */
.sd-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.sd-id {
  color: var(--ink-muted);
  font-size: 13px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* thread reuses .chat-msg / .msg-bubble. Add system-message styling. */
.sd-thread {
  padding: 12px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 50vh;
  padding-bottom: 120px; /* room for sticky reply bar */
}
.chat-msg-system {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}
.chat-msg-system .msg-bubble {
  background: transparent !important;
  border: none !important;
  color: var(--ink-muted);
  font-style: italic;
  font-size: 12px;
  text-align: center;
  padding: 4px 12px;
  max-width: 100%;
  border-radius: 6px;
}

/* sticky reply bar at the bottom of detail page */
.sd-reply-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 30;
}
.sd-reply-bar textarea {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
}
.sd-send-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sd-send-btn:active { transform: scale(0.94); }
.sd-closed-bar {
  position: sticky;
  bottom: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* ─── Dispute banner (Этап 2, compact + sticky) ────────────────────────────
   Single-row layout: title + countdown + action button. Hint on a thin
   second line. Same height for both roles — buttons have fixed width so
   different label lengths don't change banner geometry.

   Sticky: glued just below the .nav-header (which is sticky top:0 z:40).
   Solid-tinted bg + backdrop-blur so chat/info doesn't bleed through when
   the banner is stuck and other content scrolls under it. */
.dispute-banner {
  position: sticky;
  /* nav-header height on real devices is ~76–80 px (52 px back-btn + 24 px
     padding + 1 px border + iOS safe-area when present). 64 px was clipping
     the top of the banner behind it on phones with thicker headers — bumped
     to 84 px so the banner always sits fully visible below. */
  top: 84px;
  z-index: 39;        /* one below nav-header so the back-btn always wins overlap */
  /* Same offset for scrollIntoView({block:'start'}) — keeps 84 px clearance
     above so first-appearance scroll doesn't tuck the banner behind the header. */
  scroll-margin-top: 84px;
  margin: 8px 16px 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,0.45);
  background: rgba(239,68,68,0.18);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: var(--ink-strong);
  font-size: 13px;
  line-height: 1.35;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Older WebView fallback — fully opaque tinted background so stuck content
     under the banner stays hidden. */
  .dispute-banner { background: #2c1414; }
  html[data-theme="light"] .dispute-banner,
  body[data-theme="light"] .dispute-banner { background: #fde8e8; }
}
.dispute-banner.dispute-banner-admin {
  border-color: rgba(245,158,11,0.50);
  background: rgba(245,158,11,0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dispute-banner.dispute-banner-admin { background: #2c2414; }
  html[data-theme="light"] .dispute-banner.dispute-banner-admin,
  body[data-theme="light"] .dispute-banner.dispute-banner-admin { background: #fef5e7; }
}
.dispute-banner-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dispute-banner-title {
  font-weight: 600; font-size: 13px;
  display: flex; align-items: baseline; gap: 4px;
  flex: 1 1 auto; min-width: 0;
}
.dispute-banner-tail { color: var(--ink-muted); font-weight: 500; font-size: 12px; }
.dispute-banner .dispute-countdown {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700; color: var(--red); font-size: 14px;
}
.dispute-banner .dispute-countdown-active {
  animation: dispute-pulse 1.5s ease-in-out infinite;
}
.dispute-banner-hint {
  color: var(--ink-muted); font-size: 12px; margin-top: 4px;
}
.dispute-banner-row > button {
  /* Fixed footprint regardless of label length so seller and buyer banners
     have identical geometry. Labels are short («Подтвердить» / «Отменить»). */
  flex: 0 0 auto; width: 130px;
  padding: 6px 10px;
  border-radius: 8px; border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.dispute-btn-confirm {
  background: var(--green, #22c55e); color: #fff; border-color: transparent;
}
.dispute-btn-cancel {
  background: var(--surface2); color: var(--red);
  border-color: rgba(239,68,68,0.45);
}
.dispute-btn-confirm:active, .dispute-btn-cancel:active { opacity: 0.85; }
@media (max-width: 380px) {
  /* Very narrow — let button drop to its own line at full width. */
  .dispute-banner-row > button { width: 100%; }
}
@keyframes dispute-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
/* One-shot tone shift for 2 s when the banner first appears, to draw the eye
   of a user scrolled deep into chat. Removed by JS via setTimeout. */
.dispute-banner-attention {
  animation: dispute-attention 2s ease-in-out 1;
}
@keyframes dispute-attention {
  0%, 100% { background: rgba(239,68,68,0.08); box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  20%      { background: rgba(239,68,68,0.30); box-shadow: 0 0 0 4px rgba(239,68,68,0.20); }
  60%      { background: rgba(239,68,68,0.18); box-shadow: 0 0 0 2px rgba(239,68,68,0.14); }
}
@media (prefers-reduced-motion: reduce) {
  .dispute-banner .dispute-countdown-active { animation: none; }
  .dispute-banner-attention                 { animation: none; }
}