/* ==================================================================================
   TONWEX - СТИЛИ ПРИЛОЖЕНИЯ
   ==================================================================================

   ОГЛАВЛЕНИЕ:

   1. CSS-ПЕРЕМЕННЫЕ И ТЕМАТИЗАЦИЯ ......................... строка 20
      - Цветовая палитра бренда
      - Светлая и темная темы
      - Системные переменные (spacing, sizing)

   2. БАЗОВЫЕ СТИЛИ ........................................ строка 85
      - Reset и typography
      - Body и layout
      - Общие утилиты (sub, helper text)

   2.5. УТИЛИТНЫЕ КЛАССЫ (замена Tailwind) ................ строка 250
      - Layout (flex, grid, display)
      - Spacing (margin, padding, gap, space-y)
      - Sizing (width, height, max-width)
      - Typography (font-size, font-weight, text-align, colors)
      - Borders и border-radius
      - Position и z-index
      - Специальные классы (wallet-input, balance-card, skeleton-w-*)

   3. ИКОНКИ И ИЗОБРАЖЕНИЯ ................................. строка 500
      - PNG иконки с фильтрами для темной темы
      - Логотипы и флаги

   4. КАРТОЧКИ И КОНТЕЙНЕРЫ ................................ строка 155
      - .card - базовые карточки
      - .tap-btn - кликабельные плитки меню
      - Градиенты и тени

   5. ФОРМЫ И ИНПУТЫ ....................................... строка 210
      - .input - текстовые поля
      - .label - подписи полей
      - Состояния: focus, error, valid
      - Кастомные select-ы с иконками

   6. КНОПКИ ............................................... строка 310
      - .primary - основная кнопка
      - .btn - базовая кнопка
      - .btn--primary - модификатор
      - .action-btn - кнопки действий
      - .back-btn - кнопка назад

   7. ГЛАВНОЕ МЕНЮ (HOME) .................................. строка 420
      - body.mobile-home-menu - градиентный фон
      - .menu-list - контейнер списка меню
      - .menu-title - заголовки секций
      - Эффекты при наведении

   8. НАВИГАЦИЯ (TAB BAR) .................................. строка 510
      - .tabbar - нижняя панель
      - .tab-item - элементы табов
      - Safe area для iPhone

   9. ОФИСЫ (EXCHANGE OFFICES) ............................. строка 545
      - .offices-grid - сетка карточек офисов
      - .office-card - карточка офиса
      - .office-status - статусы (открыт/закрыт)
      - .office-schedule-block - расписание
      - Skeleton loading состояния

   10. ЭКРАН СДЕЛКИ (DEAL) ................................. строка 730
       - #exchange-office-deal - обмен в офисе
       - Поля ввода суммы
       - Кнопка swap (переключение валют)
       - Info card с курсом

   11. SUMMARY (ИТОГИ СДЕЛКИ) .............................. строка 850
       - #exchange-office-summary - экран подтверждения
       - .sum-actions - кнопки действий (маршрут, звонок, сообщение)
       - Deal status и метаданные

   12. КУРСЫ ОБМЕНА (RATES) ................................ строка 920
       - .rates-intro - заголовок секции курсов
       - .rates-toggle - переключатель online/office
       - .rate-row - строка с курсом валюты
       - .office-rate - карточка курсов офиса
       - .office-tier-card - тарифные уровни

   13. ИСТОРИЯ ОПЕРАЦИЙ (HISTORY) .......................... строка 1150
       - #history - список сделок
       - Статусы транзакций
       - Empty states

   14. МОДАЛЬНЫЕ ОКНА ...................................... строка 1200
       - #settingsSheet - настройки (bottom sheet)
       - #walletSelectionModal - выбор кошелька
       - Overlay и анимации

   15. СТАТУСЫ И БЕЙДЖИ .................................... строка 1300
       - .status - общий статус
       - .badge - компактные метки
       - .status-dot - индикатор с точкой
       - Цветовые модификаторы (success, error, pending)

   16. СКЕЛЕТОНЫ И ЗАГРУЗКА ................................ строка 1370
       - .skeleton - анимация загрузки
       - .skel-row, .skel-line - элементы скелетона
       - Shimmer эффект

   17. ПУСТЫЕ СОСТОЯНИЯ (EMPTY STATES) ..................... строка 1420
       - .empty-state - когда нет данных
       - Эмодзи и текст

   18. ТОСТЫ И УВЕДОМЛЕНИЯ ................................. строка 1450
       - #toastRoot - контейнер уведомлений
       - .toast - всплывающие сообщения
       - Анимации появления

   19. МЕДИА-ЗАПРОСЫ ....................................... строка 1500
       - Mobile (max-width: 600px)
       - Small mobile (max-width: 480px)
       - Tiny mobile (max-width: 380px)

   20. АНИМАЦИИ И TRANSITIONS .............................. строка 1620
       - @keyframes определения
       - Общие transition утилиты

   ================================================================================== */


/* ==================================================================================
   1. CSS-ПЕРЕМЕННЫЕ И ТЕМАТИЗАЦИЯ
   ==================================================================================

   Используется: везде в приложении
   Описание: Основные цвета бренда, темизация, системные переменные для spacing/sizing
*/

/* Светлая тема (по умолчанию) */
:root {
  /* Основные цвета бренда TONWEX */
  --bg: #E6F2F1;
  /* Фон приложения - светлый бирюзовый */
  --text: #042838;
  /* Основной текст - темный синий */
  --muted: #3f6d76;
  /* Приглушенный текст */

  /* Карточки и границы */
  --card: #ffffff;
  /* Фон карточек - белый */
  --border: #CCE3E8;
  /* Цвет границ */

  /* Основной бренд-цвет (кнопки, акценты) */
  --primary-500: #00D8B2;
  /* Primary - яркий бирюзовый */
  --primary-600: #00A88B;
  /* Primary темнее */
  --primary-700: #05967F;
  /* Primary еще темнее */
  --primary-900: #102031;
  /* Почти черный для контраста */

  /* Цвета статусов */
  --green: #22c55e;
  /* Success/Open - зеленый */
  --green-2: #16a34a;
  /* Success темнее */
  --red: #ef4444;
  /* Error/Closed - красный */
  --red-2: #dc2626;
  /* Error темнее */

  /* Иконки PNG (фильтр для темной темы) */
  --icon-filter: none;
  /* В светлой теме фильтр не применяется */

  /* Системные переменные для размеров */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */

  /* Контролы (кнопки, инпуты) */
  --ctrl-h: 2.875rem;
  /* ~46px - высота контролов */
  --btn-height: var(--ctrl-h);
  --btn-height-md: 46px;
  --btn-radius: 0.9rem;
  /* Скругление кнопок */
  --btn-gap: 0.5rem;
  /* Gap между иконкой и текстом в кнопке */

  /* Тени */
  --shadow-primary: 0 6px 14px color-mix(in srgb, var(--primary-600) 25%, transparent);

  /* Безопасная зона внизу (для iPhone) */
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* Темная тема */
:root[data-mode="dark"] {
  --bg: #042838;
  /* Темный фон */
  --text: #E6F2F1;
  /* Светлый текст */
  --muted: #D6EDF2;
  /* Приглушенный текст (светлее для читаемости) */

  --card: #0F4652;
  /* Темные карточки */
  --border: #0A3641;
  /* Темные границы */

  /* Primary colors остаются яркими */
  --primary-500: #00D8B2;
  --primary-600: #00A88B;

  /* Статусы остаются яркими */
  --green: #22c55e;
  --green-2: #16a34a;
  --red: #ef4444;
  --red-2: #dc2626;

  /* PNG иконки инвертируются и осветляются */
  --icon-filter: invert(1) brightness(1.8) contrast(1.1);
}


/* ==================================================================================
   2. БАЗОВЫЕ СТИЛИ
   ==================================================================================

   Используется: body, основная типография
   Описание: Reset стили, базовые настройки шрифтов и layout
*/

/* Tailwind-style reset для правильного box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Reset для кнопок и инпутов */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Убираем все эффекты нажатия для мобильных и декстопа */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Разрешаем выделение текста в инпутах и текстовых полях */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Убираем outline при фокусе (бортики при нажатии) */
*:focus,
*:active,
button:focus,
button:active,
a:focus,
a:active,
input:focus,
select:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* На мобильных увеличиваем шрифт для лучшей читаемости */

/*
   10. ЭКРАН СДЕЛКИ (DEAL) ................................. строка 730
       - #exchange-office-deal - обмен в офисе
       - Поля ввода суммы
       - Кнопка swap (переключение валют)
       - Info card с курсом

   11. SUMMARY (ИТОГИ СДЕЛКИ) .............................. строка 850
       - #exchange-office-summary - экран подтверждения
       - .sum-actions - кнопки действий (маршрут, звонок, сообщение)
       - Deal status и метаданные

   12. КУРСЫ ОБМЕНА (RATES) ................................ строка 920
       - .rates-intro - заголовок секции курсов
       - .rates-toggle - переключатель online/office
       - .rate-row - строка с курсом валюты
       - .office-rate - карточка курсов офиса
       - .office-tier-card - тарифные уровни

   13. ИСТОРИЯ ОПЕРАЦИЙ (HISTORY) .......................... строка 1150
       - #history - список сделок
       - Статусы транзакций
       - Empty states

   14. МОДАЛЬНЫЕ ОКНА ...................................... строка 1200
       - #settingsSheet - настройки (bottom sheet)
       - #walletSelectionModal - выбор кошелька
       - Overlay и анимации

   15. СТАТУСЫ И БЕЙДЖИ .................................... строка 1300
       - .status - общий статус
       - .badge - компактные метки
       - .status-dot - индикатор с точкой
       - Цветовые модификаторы (success, error, pending)

   16. СКЕЛЕТОНЫ И ЗАГРУЗКА ................................ строка 1370
       - .skeleton - анимация загрузки
       - .skel-row, .skel-line - элементы скелетона
       - Shimmer эффект

   17. ПУСТЫЕ СОСТОЯНИЯ (EMPTY STATES) ..................... строка 1420
       - .empty-state - когда нет данных
       - Эмодзи и текст

   18. ТОСТЫ И УВЕДОМЛЕНИЯ ................................. строка 1450
       - #toastRoot - контейнер уведомлений
       - .toast - всплывающие сообщения
       - Анимации появления

   19. МЕДИА-ЗАПРОСЫ ....................................... строка 1500
       - Mobile (max-width: 600px)
       - Small mobile (max-width: 480px)
       - Tiny mobile (max-width: 380px)

   20. АНИМАЦИИ И TRANSITIONS .............................. строка 1620
       - @keyframes определения
       - Общие transition утилиты

   ================================================================================== */


/* ==================================================================================
   1. CSS-ПЕРЕМЕННЫЕ И ТЕМАТИЗАЦИЯ
   ==================================================================================

   Используется: везде в приложении
   Описание: Основные цвета бренда, темизация, системные переменные для spacing/sizing
*/

/* Светлая тема (по умолчанию) */
:root {
  /* Основные цвета бренда TONWEX */
  --bg: #E6F2F1;
  /* Фон приложения - светлый бирюзовый */
  --text: #042838;
  /* Основной текст - темный синий */
  --muted: #3f6d76;
  /* Приглушенный текст */

  /* Карточки и границы */
  --card: #ffffff;
  /* Фон карточек - белый */
  --border: #CCE3E8;
  /* Цвет границ */

  /* Основной бренд-цвет (кнопки, акценты) */
  --primary-500: #00D8B2;
  /* Primary - яркий бирюзовый */
  --primary-600: #00A88B;
  /* Primary темнее */
  --primary-700: #05967F;
  /* Primary еще темнее */
  --primary-900: #102031;
  /* Почти черный для контраста */

  /* Цвета статусов */
  --green: #22c55e;
  /* Success/Open - зеленый */
  --green-2: #16a34a;
  /* Success темнее */
  --red: #ef4444;
  /* Error/Closed - красный */
  --red-2: #dc2626;
  /* Error темнее */

  /* Иконки PNG (фильтр для темной темы) */
  --icon-filter: none;
  /* В светлой теме фильтр не применяется */

  /* Системные переменные для размеров */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */

  /* Контролы (кнопки, инпуты) */
  --ctrl-h: 2.875rem;
  /* ~46px - высота контролов */
  --btn-height: var(--ctrl-h);
  --btn-height-md: 46px;
  --btn-radius: 0.9rem;
  /* Скругление кнопок */
  --btn-gap: 0.5rem;
  /* Gap между иконкой и текстом в кнопке */

  /* Тени */
  --shadow-primary: 0 6px 14px color-mix(in srgb, var(--primary-600) 25%, transparent);

  /* Безопасная зона внизу (для iPhone) */
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* Темная тема */
:root[data-mode="dark"] {
  --bg: #042838;
  /* Темный фон */
  --text: #E6F2F1;
  /* Светлый текст */
  --muted: #D6EDF2;
  /* Приглушенный текст (светлее для читаемости) */

  --card: #0F4652;
  /* Темные карточки */
  --border: #0A3641;
  /* Темные границы */

  /* Primary colors остаются яркими */
  --primary-500: #00D8B2;
  --primary-600: #00A88B;

  /* Статусы остаются яркими */
  --green: #22c55e;
  --green-2: #16a34a;
  --red: #ef4444;
  --red-2: #dc2626;

  /* PNG иконки инвертируются и осветляются */
  --icon-filter: invert(1) brightness(1.8) contrast(1.1);
}


/* ==================================================================================
   2. БАЗОВЫЕ СТИЛИ
   ==================================================================================

   Используется: body, основная типография
   Описание: Reset стили, базовые настройки шрифтов и layout
*/

/* Tailwind-style reset для правильного box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Reset для кнопок и инпутов */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Убираем все эффекты нажатия для мобильных и декстопа */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Разрешаем выделение текста в инпутах и текстовых полях */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Убираем outline при фокусе (бортики при нажатии) */
*:focus,
*:active,
button:focus,
button:active,
a:focus,
a:active,
input:focus,
select:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* На мобильных увеличиваем шрифт для лучшей читаемости */
@media (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Вспомогательный текст (sub) - используется для подписей, хинтов */
.sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Helper text для полей */
.helper {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

/* Заголовки секций */
.section-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: var(--space-3) 0 var(--space-2);
}

/* Разделитель (divider) */
.divider {
  height: 1px;
  background: color-mix(in srgb, var(--border) 95%, transparent);
  border: 0;
  margin: var(--space-3) 0;
}


/* ==================================================================================
   2.5. УТИЛИТНЫЕ КЛАССЫ (замена Tailwind)
   ==================================================================================

   Используется: везде в приложении
   Описание: Общие утилитарные классы для layout, spacing, typography
*/

/* ===== Layout утилиты ===== */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* Flex направления */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

/* Flex/Grid выравнивание */
.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

/* Flex grow/shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Grid columns */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

/* Grid items - убедимся что они не переполняют родителя */
.grid>* {
  min-width: 0;
  min-height: 0;
}

/* ===== Spacing утилиты ===== */
/* Gap (flex/grid) */
.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

/* Margin */
.m-0 {
  margin: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-auto {
  margin-left: auto;
}

/* Padding */
.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-16 {
  padding-right: 4rem;
}

/* Space-y (vertical spacing между детьми) */
.space-y-1>*+* {
  margin-top: 0.25rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-y-3>*+* {
  margin-top: 0.75rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

#exchange-online.space-y-4>.ex-card,
#exchange-online.space-y-4>.ex-swap-wrap,
#officeDeal.space-y-4>.ex-card,
#officeDeal.space-y-4>.ex-swap-wrap,
#crypto-buy.space-y-4>.ex-card,
#crypto-buy.space-y-4>.ex-swap-wrap {
  margin-top: 0;
}

#exchange-online.space-y-4>.ex-rate-card,
#officeDeal.space-y-4>.ex-rate-card,
#crypto-buy.space-y-4>.ex-rate-card {
  margin-top: 1rem;
}

.space-y-6>*+* {
  margin-top: 0.001rem;
}

/* ===== Sizing утилиты ===== */
.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-12 {
  width: 3rem;
}

.w-full {
  width: 100%;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-8 {
  height: 2rem;
}

.h-12 {
  height: 3rem;
}

.min-h-screen {
  min-height: 100vh;
}

.max-w-md {
  max-width: 28rem;
}

/* Важно для инпутов - убедимся что они занимают всю ширину контейнера */
input.w-full,
select.w-full,
textarea.w-full,
button.w-full {
  width: 100%;
  max-width: 100%;
}

/* Для grid элементов - убедимся что инпуты не переполняют ячейку */
.grid input,
.grid select,
.grid textarea {
  min-width: 0;
}

/* Когда .input используется с .flex-1, flex должен иметь приоритет */
.flex input.flex-1,
.flex select.flex-1,
.flex textarea.flex-1 {
  width: auto;
  min-width: 0;
}

/* ===== Typography утилиты ===== */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.2rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.logo-wordmark {
  font-family: "Futura PT", "Futura", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-style: oblique;
}

.break-all {
  word-break: break-all;
}

/* Цвета текста через CSS переменные */
.text-\[var\(--text\)\] {
  color: var(--text);
}

.text-\[var\(--muted\)\] {
  color: var(--muted);
}

.text-\[var\(--primary-600\)\] {
  color: var(--primary-600);
}

.text-\[var\(--primary-700\)\] {
  color: var(--primary-700);
}

.text-red-600 {
  color: #dc2626;
}

.text-green-600 {
  color: #16a34a;
}

.text-white {
  color: #ffffff;
}

/* Background цвета через CSS переменные */
.bg-\[var\(--bg\)\] {
  background-color: var(--bg);
}

.bg-\[var\(--card\)\] {
  background-color: var(--card);
}

.bg-\[var\(--primary-50\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 10%, white);
}

.bg-\[var\(--primary-100\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 20%, white);
}

.bg-\[var\(--primary-200\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 30%, white);
}

.bg-\[var\(--primary-500\)\] {
  background-color: var(--primary-500);
}

.bg-transparent {
  background-color: transparent;
}

/* Backdrop blur для header */
.bg-\[color\:var\(--bg\)\/0\.85\] {
  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
}

.bg-\[color\:var\(--bg\)\/0\.92\] {
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ===== Border утилиты ===== */
.border {
  border-width: 1px;
  border-style: solid;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-\[var\(--border\)\] {
  border-color: var(--border);
}

.border-\[color\:var\(--border\)\] {
  border-color: var(--border);
}

.border-\[var\(--primary-600\)\] {
  border-color: var(--primary-600);
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* ===== Position утилиты ===== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.right-2 {
  right: 0.5rem;
}

/* ===== Z-index ===== */
.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[60\] {
  z-index: 60;
}

/* ===== Misc утилиты ===== */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-90 {
  opacity: 0.9;
}

.pointer-events-none {
  pointer-events: none;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.translate-y-full {
  transform: translateY(100%);
}

.will-change-transform {
  will-change: transform;
}

/* Selection (выделение текста) */
.selection\:bg-\[var\(--primary-600\)\] ::selection,
.selection\:bg-\[var\(--primary-600\)\]::selection {
  background-color: var(--primary-600);
}

.selection\:text-white ::selection,
.selection\:text-white::selection {
  color: white;
}

/* Transition утилиты */
.transition-opacity {
  transition-property: opacity;
}

.transition-transform {
  transition-property: transform;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Hover эффекты */
.hover\:bg-\[var\(--bg\)\]:hover {
  background-color: var(--bg);
}

.hover\:bg-\[var\(--primary-200\)\]:hover {
  background-color: color-mix(in srgb, var(--primary-500) 30%, white);
}

.hover\:underline:hover {
  text-decoration: underline;
}

/* Divide (borders между детьми) */
.divide-y>*+* {
  border-top-width: 1px;
  border-top-style: solid;
}

.divide-\[var\(--border\)\]>*+* {
  border-top-color: var(--border);
}

/* Специальные классы для конкретных элементов */
.no-invert {
  filter: none !important;
}

/* Wallet input (monospace) */
.wallet-input {
  font-family: monospace;
  font-size: 14px;
}

/* Balance card gradient */
.balance-card-gradient {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700, #008770));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 1rem;
}

.balance-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}

.balance-amount {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  margin-top: 0.25rem;
}

.balance-topup-btn {
  padding: 0.5rem 1rem;
  background: white;
  color: var(--primary-600);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.balance-topup-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Skeleton width утилиты */
.skeleton-w-30 {
  width: 30%;
}

.skeleton-w-34 {
  width: 34%;
}

.skeleton-w-38 {
  width: 38%;
}

.skeleton-w-42 {
  width: 42%;
}

.skeleton-w-50 {
  width: 50%;
}

.skeleton-w-58 {
  width: 58%;
}

.skeleton-w-60 {
  width: 60%;
}

.skeleton-w-65 {
  width: 65%;
}

.skeleton-w-66 {
  width: 66%;
}

.skeleton-w-72 {
  width: 72%;
}

.skeleton-w-82 {
  width: 82%;
}

.skeleton-w-88 {
  width: 88%;
}


/* ==================================================================================
   3. ИКОНКИ И ИЗОБРАЖЕНИЯ
   ==================================================================================

   Используется: меню, табы, карточки офисов
   Описание: PNG иконки с автоматическим фильтром для темной темы
*/

/* Иконки в меню и карточках (стандартный размер) */
.icon-img {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  flex-shrink: 0;
  filter: var(--icon-filter);
  transition: filter 0.2s;
}

/* Иконки в табах (меньше) */
.tab-ic {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  filter: var(--icon-filter);
  transition: filter 0.2s;
}

/* Иконки фиксированного размера 20px */
.icon-20 {
  width: 20px;
  height: 20px;
}

/* Мини-иконки в селектах */
.ui-ico-img {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  object-fit: contain;
  display: inline-block;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.ui-ico-img.round {
  border-radius: 9999px;
}

/* Отключить фильтр для логотипа и специальных изображений */
.no-invert {
  filter: none !important;
}

/* Теги валют с иконками */
.currency-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--fg, var(--text));
  text-transform: uppercase;
}

.currency-tag--sm {
  font-size: 0.82rem;
}

.currency-tag__img {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  filter: var(--icon-filter);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  padding: 0.18rem;
}

.currency-tag--sm .currency-tag__img {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.12rem;
}

.currency-tag__code {
  letter-spacing: 0.02em;
}


/* ==================================================================================
   4. КАРТОЧКИ И КОНТЕЙНЕРЫ
   ==================================================================================

   Используется: все секции приложения
   Описание: Базовые карточки (.card) и кликабельные плитки меню (.tap-btn)
*/

/* Базовая карточка - белый контейнер с границей */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
}

/* Кликабельная плитка меню (используется на главном экране) */
.tap-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(0deg, color-mix(in srgb, var(--card) 94%, transparent), var(--card));
  border: 1px solid var(--border);
  box-shadow: 0 6px 14px color-mix(in srgb, #000 10%, transparent);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.18s ease;
  text-decoration: none;
  color: inherit;
}

.tap-btn.kyc-verified {
  border-color: var(--green);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--green) 18%, transparent);
}

.tap-btn.kyc-verified:hover {
  box-shadow: 0 12px 30px color-mix(in srgb, var(--green) 24%, transparent);
}

.tap-btn:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
}

.tap-btn:active {
  transform: translateY(1px);
}

/* Chevron (стрелка вправо) в tap-btn */
.tap-btn .chev {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.menu-item-with-note {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kyc-verified-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 1rem;
  font-size: 0.8rem;
  color: var(--green-2);
  font-weight: 500;
}

.kyc-verified-icon {
  width: 0.9rem;
  height: 0.9rem;
}


/* ==================================================================================
   5. ФОРМЫ И ИНПУТЫ
   ==================================================================================

   Используется: все формы в приложении
   Описание: Текстовые поля, селекты, лейблы, состояния валидации
*/

/* Общий класс для поля (label + input) */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Label (подпись поля) */
.label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* Базовый инпут */
.input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  outline: none;
  min-height: var(--ctrl-h);
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Select имеет больше отступа справа для стрелки */
select.input {
  padding-right: 2.1rem;
}

/* Состояние focus */
.input:focus {
  border-color: var(--primary-500);
  /* box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 22%, transparent); */
  /* Убрано для мобильных устройств */
}

/* Состояние ошибки */
.input.error,
.input.input-error {
  border-color: color-mix(in srgb, var(--red) 70%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent) !important;
}

/* Состояние валидно */
.input.valid {
  border-color: color-mix(in srgb, var(--green) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

/* Текст ошибки под полем */
.err-msg {
  color: var(--red-2);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* ===== Кастомный Select с иконками =====
   Используется: в формах обмена, выбор валюты
   Описание: Кастомизированный dropdown с PNG-иконками валют */

.ui-select {
  position: relative;
}

/* Скрываем нативный select */
.ui-select .native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Кнопка селекта */
.ui-select__btn {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-select__btn:focus {
  border-color: var(--primary-500);
  /* box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 22%, transparent); */
  /* Убрано для мобильных устройств */
}

/* Label внутри кнопки (иконка + текст) */
.ui-select__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

/* Chevron (стрелка вниз) */
.ui-select__chev {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex: 0 0 16px;
}

/* Панель с опциями (dropdown) */
.ui-select__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  box-shadow: 0 20px 40px color-mix(in srgb, #000 25%, transparent);
  padding: 0.35rem;
  max-height: 260px;
  overflow: auto;
  z-index: 50;
  transform-origin: top center;
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

/* Открытое состояние */
.ui-select.open .ui-select__panel {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown вверх (если места снизу мало) */
.ui-select.drop-up .ui-select__panel {
  top: auto;
  bottom: calc(100% + 0.4rem);
  transform-origin: bottom center;
}

/* Опция в селекте */
.ui-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ui-option:hover,
.ui-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-600) 30%, transparent);
}

/* Текст опции */
.ui-option__text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

/* Галочка выбранной опции */
.ui-check {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  opacity: 0.95;
}

.ui-option:not([aria-selected="true"]) .ui-check {
  visibility: hidden;
}


/* ==================================================================================
   6. КНОПКИ
   ==================================================================================

   Используется: формы, действия, навигация
   Описание: Основные кнопки (.primary), базовые кнопки (.btn), кнопки действий
*/

/* ===== Базовая кнопка =====
   Описание: Базовый класс для всех кнопок, содержит общие стили */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0 calc(var(--space-4) + 0.5rem);
  border-radius: var(--btn-radius);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, filter 0.24s ease, color 0.24s ease;
}

.btn:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-500) 50%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.btn:hover {
  filter: brightness(1.02);
}

/* ===== Primary кнопка (основная) =====
   Используется: подтверждение сделок, submit форм
   Описание: Яркая градиентная кнопка с тенью */

.primary,
.btn.primary,
button.primary,
.btn.btn--primary,
button.btn.btn--primary {
  --btn-padding-x: calc(var(--space-4) + 0.5rem);
  --btn-radius-lg: calc(var(--btn-radius) + 0.12rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: calc(var(--btn-height) + 0.05rem);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-radius-lg);
  font-weight: 700;
  letter-spacing: 0.01em;

  background:
    radial-gradient(140% 160% at 50% -35%, rgba(255, 255, 255, 0.72), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 86%, var(--card)) 0%, color-mix(in srgb, var(--primary-600) 96%, transparent) 100%) !important;

  color: #f6fffd !important;
  text-shadow: 0 1px 0 rgba(4, 32, 42, 0.18);
  border: 1px solid color-mix(in srgb, var(--primary-600) 62%, transparent) !important;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--primary-600) 28%, transparent);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.24s ease;
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 42px color-mix(in srgb, var(--primary-600) 32%, transparent);
  filter: brightness(1.04);
}

.primary:active {
  transform: translateY(0);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-600) 26%, transparent);
  filter: brightness(0.98);
}

.primary:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-500) 55%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.7);
  transform: none;
}

/* ===== Action кнопка =====
   Используется: Deal summary (маршрут, звонок, сообщение)
   Описание: Кнопки с иконками для действий */

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0 calc(var(--space-4) + 0.35rem);
  border-radius: var(--btn-radius);
  font-weight: 600;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  background:
    radial-gradient(120% 160% at 50% -40%, rgba(255, 255, 255, 0.7), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--primary-500) 22%, var(--card)) 100%);

  border: 1px solid color-mix(in srgb, var(--primary-600) 42%, transparent);
  color: color-mix(in srgb, var(--primary-600) 96%, var(--text) 10%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-600) 22%, transparent);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(120% 160% at 50% -40%, rgba(255, 255, 255, 0.75), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--primary-500) 28%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--primary-600) 58%, transparent);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary-600) 28%, transparent);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-600) 24%, transparent);
}

.action-btn:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-600) 55%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Иконка внутри action-btn */
.action-btn .btn-ic {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--primary-600) 18%, transparent);
  color: inherit;
  transition: background 0.2s ease, transform 0.18s ease;
}

.action-btn:hover .btn-ic {
  background: color-mix(in srgb, var(--primary-600) 26%, transparent);
  transform: translateY(-1px);
}

.action-btn .btn-ic svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===== Кнопка "Назад" =====
   Используется: навигация между экранами */

.back-btn {
  background: transparent;
  border: none;
  padding: 0.2rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.back-btn:focus {
  /* outline: 2px solid color-mix(in srgb, var(--primary-500) 60%, transparent); */
  /* Убрано для мобильных устройств */
}


/* ==================================================================================
   7. ГЛАВНОЕ МЕНЮ (HOME)
   ==================================================================================

   Используется: главный экран приложения (#home section)
   Описание: Градиентный фон, стилизованный список меню с эффектами
*/

/* Градиентный фон на главном экране */
body.mobile-home-menu {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--primary-500) 18%, var(--bg)) 0%,
      color-mix(in srgb, var(--bg) 92%, transparent) 55%,
      color-mix(in srgb, var(--bg) 100%, transparent) 100%);
}

/* Header на главном экране - прозрачный с blur */
body.mobile-home-menu header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  backdrop-filter: blur(10px);
}

/* Увеличенные отступы на главном экране */
body.mobile-home-menu main {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Заголовок секции меню (badge с градиентом) */
body.mobile-home-menu .menu-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 75%, transparent), color-mix(in srgb, var(--primary-600) 48%, transparent));
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-600) 32%, transparent);
}

/* Контейнер списка меню - стеклянная карточка с градиентным свечением */
body.mobile-home-menu .menu-list {
  position: relative;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--text) 10%, transparent);
  padding: 0.35rem 0;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

/* Градиентное свечение внизу menu-list */
body.mobile-home-menu .menu-list::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -40%;
  width: 75%;
  height: 140%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary-500) 38%, transparent) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  filter: blur(0);
}

/* Убираем margin между элементами внутри menu-list */
body.mobile-home-menu .menu-list.space-y-3> :not([hidden])~ :not([hidden]) {
  margin-top: 0;
}

/* Стили для tap-btn внутри menu-list */
body.mobile-home-menu .menu-list .tap-btn {
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1.25rem 1.45rem;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s ease;
  display: flex;
}

/* Разделитель между элементами меню */
body.mobile-home-menu .menu-list .tap-btn::after {
  content: "";
  position: absolute;
  left: 5.1rem;
  right: 1.4rem;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:last-child::after {
  display: none;
}

/* Эффекты при взаимодействии */
body.mobile-home-menu .menu-list .tap-btn:active {
  background: color-mix(in srgb, var(--primary-500) 16%, transparent);
  transform: scale(0.99);
}

body.mobile-home-menu .menu-list .tap-btn:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--primary-500) 22%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600) 35%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:hover {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:hover .chev {
  opacity: 0.65;
}

/* Иконки в menu-list - больше и с градиентным фоном */
body.mobile-home-menu .menu-list .tap-btn .icon-img {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 40%, transparent), color-mix(in srgb, var(--primary-600) 28%, transparent));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-600) 30%, transparent);
}

/* Chevron в menu-list - меньше opacity */
body.mobile-home-menu .menu-list .tap-btn .chev {
  opacity: 0.45;
  width: 1.35rem;
  height: 1.35rem;
}

/* Sub текст светлее */
body.mobile-home-menu .menu-list .tap-btn .sub {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}




/* ===== Beautiful Error Tooltip ===== */
.input-group {
  position: relative;
}

.error-tooltip {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px) scale(0.95);
  width: calc(100% - 20px);
  min-width: 280px;
  max-width: 400px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  box-shadow:
    0 10px 25px rgba(239, 68, 68, 0.35),
    0 4px 8px rgba(239, 68, 68, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  z-index: 20;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.error-tooltip.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}

.error-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile optimization for error tooltip */
@media (max-width: 640px) {
  .error-tooltip {
    width: calc(100vw - 40px);
    min-width: unset;
    max-width: calc(100vw - 40px);
    font-size: 0.85rem;
    padding: 12px 14px;
  }
}

.error-tooltip-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.95;
}

/* Dark mode adjustments */
:root[data-mode="dark"] .error-tooltip {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
}

:root[data-mode="dark"] .error-tooltip::before {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

/* Inline error message inside ex-card */
.ex-inline-error {
  margin: 12px 16px 16px 16px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-left: 3px solid #ef4444;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #b91c1c;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ex-inline-error.visible {
  opacity: 1;
  max-height: 80px;
  margin-top: 12px;
  margin-bottom: 16px;
}

.ex-inline-error::before {
  content: '⚠';
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Dark mode for inline error */
:root[data-mode="dark"] .ex-inline-error {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(185, 28, 28, 0.2) 100%);
  border-left-color: #f87171;
  color: #fca5a5;
}

/* Mobile optimization */
@media (max-width: 640px) {
  .ex-inline-error {
    font-size: 0.75rem;
    padding: 8px 10px;
    margin: 10px 12px 12px 12px;
  }

  .ex-inline-error.visible {
    margin-bottom: 12px;
  }
}


/* ==================================================================================
   8. НАВИГАЦИЯ (TAB BAR)
   ==================================================================================

   Используется: нижняя панель навигации
   Описание: Фиксированная панель с 3 табами (Home, Quick, Settings)
*/

.tabbar {
  padding-bottom: env(safe-area-inset-bottom);
  /* Safe area для iPhone */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0.6rem;
  gap: 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.tab-item.active {
  color: var(--primary-600);
}


/* ==================================================================================
   9. ОФИСЫ (EXCHANGE OFFICES)
   ==================================================================================

   Используется: #exchange-office section, список офисов
   Описание: Сетка карточек офисов, статусы работы, расписание, skeleton loading
*/

/* Заголовок секции офисов */
.offices-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offices-heading {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Фильтр по странам */
.offices-filter {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.offices-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Сетка карточек офисов */
.offices-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ===== Карточка офиса =====
   Описание: Отдельная карточка с информацией об офисе */

.office-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  border-radius: 1.15rem;
  padding: 1.35rem;
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.office-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-600) 45%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--primary-600) 18%, transparent);
}

.office-card.selected {
  border-color: color-mix(in srgb, var(--primary-600) 65%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-600) 35%, transparent),
    0 20px 42px color-mix(in srgb, var(--primary-600) 25%, transparent);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--primary-600) 14%, var(--card)) 0%,
      var(--card) 55%);
}

.office-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.15rem;
}

.office-card__title {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  flex: 1;
  min-width: 0;
}

.office-card__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  color: color-mix(in srgb, var(--primary-600) 90%, #000);
}

.office-card__marker .office-icon {
  width: 22px;
  height: 22px;
}

.office-card__title-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.office-card__country {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary-600);
  font-weight: 600;
}

.office-card__address {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  word-break: break-word;
}

.office-card__status {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
  min-width: 0;
}

.office-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: color-mix(in srgb, var(--text) 92%, #fff);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.office-status-chip--open {
  background: color-mix(in srgb, var(--primary-500) 26%, transparent);
  color: color-mix(in srgb, var(--primary-600) 90%, #000);
}

.office-status-chip--soon {
  background: color-mix(in srgb, var(--warning-500, #fbbf24) 24%, transparent);
  color: color-mix(in srgb, var(--warning-700, #b45309) 84%, #000);
}

.office-status-chip--closed {
  background: color-mix(in srgb, var(--danger-500, #f87171) 24%, transparent);
  color: color-mix(in srgb, var(--danger-800, #991b1b) 90%, #000);
}

.office-status-note {
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
}

.office-card__info {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.office-info-item {
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-500) 12%, transparent);
}

.office-info-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  color: color-mix(in srgb, var(--primary-600) 92%, #000);
}

.office-info-item__icon .office-icon {
  width: 20px;
  height: 20px;
}

.office-info-item__text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.office-info-item__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--muted) 95%, transparent);
}

.office-info-item__value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.office-card__note {
  font-size: 0.8rem;
  color: var(--muted);
  padding-left: 0.2rem;
}

.office-card__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.office-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.office-contact .office-icon {
  width: 18px;
  height: 18px;
}

.office-contact:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary-600) 45%, transparent);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-600) 16%, transparent);
}

.office-contact--phone {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  color: color-mix(in srgb, var(--primary-600) 96%, #000);
}

.office-contact--tg {
  background: color-mix(in srgb, #1b95e0 18%, transparent);
  color: color-mix(in srgb, #1b95e0 95%, #0d3a5c);
}

.office-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.office-card__action {
  flex: 1 1 200px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  border: 1px solid transparent;
}

.office-card__action svg.office-icon {
  width: 20px;
  height: 20px;
}

.office-card__action--secondary {
  background: color-mix(in srgb, var(--primary-500) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary-600) 30%, transparent);
  color: color-mix(in srgb, var(--primary-600) 92%, #000);
}

.office-card__action--secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.office-card__action--secondary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--primary-600) 18%, transparent);
}

.office-card__action--primary {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.office-card__action--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary-600) 30%, transparent);
}

.office-card-details {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  font-size: 0.86rem;
}

.office-card-details__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-700);
}

.office-card-details__summary::marker {
  color: var(--primary-500);
}

.office-card-details[open] {
  border: 1px solid color-mix(in srgb, var(--primary-600) 28%, transparent);
}

.office-card-details__table {
  width: 100%;
  margin-top: 0.75rem;
  border-collapse: separate;
  border-spacing: 0 0.35rem;
}

.office-schedule-day {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-right: 1rem;
  white-space: nowrap;
}

.office-schedule-time {
  font-size: 0.86rem;
  color: var(--text);
}

.office-card__title-text .office-card__country+.office-card__address {
  margin-top: 0.15rem;
}

@media (max-width: 720px) {
  .office-card {
    padding: 1.15rem;
    gap: 1rem;
  }

  .office-card__actions {
    flex-direction: column;
  }

  .office-card__action {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .office-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .office-card__status {
    align-items: flex-start;
  }

  .office-info-item {
    flex: 1 1 100%;
    min-width: 0;
  }

  .office-card__contacts {
    gap: 0.5rem;
  }
}

/* TABLE OF CONTENTS (duplicate - should be removed or commented properly)
   10. ЭКРАН СДЕЛКИ (DEAL) ................................. строка 730
       - #exchange-office-deal - обмен в офисе
       - Поля ввода суммы
       - Кнопка swap (переключение валют)
       - Info card с курсом

   11. SUMMARY (ИТОГИ СДЕЛКИ) .............................. строка 850
       - #exchange-office-summary - экран подтверждения
       - .sum-actions - кнопки действий (маршрут, звонок, сообщение)
       - Deal status и метаданные

   12. КУРСЫ ОБМЕНА (RATES) ................................ строка 920
       - .rates-intro - заголовок секции курсов
       - .rates-toggle - переключатель online/office
       - .rate-row - строка с курсом валюты
       - .office-rate - карточка курсов офиса
       - .office-tier-card - тарифные уровни

   13. ИСТОРИЯ ОПЕРАЦИЙ (HISTORY) .......................... строка 1150
       - #history - список сделок
       - Статусы транзакций
       - Empty states

   14. МОДАЛЬНЫЕ ОКНА ...................................... строка 1200
       - #settingsSheet - настройки (bottom sheet)
       - #walletSelectionModal - выбор кошелька
       - Overlay и анимации

   15. СТАТУСЫ И БЕЙДЖИ .................................... строка 1300
       - .status - общий статус
       - .badge - компактные метки
       - .status-dot - индикатор с точкой
       - Цветовые модификаторы (success, error, pending)

   16. СКЕЛЕТОНЫ И ЗАГРУЗКА ................................ строка 1370
       - .skeleton - анимация загрузки
       - .skel-row, .skel-line - элементы скелетона
       - Shimmer эффект

   17. ПУСТЫЕ СОСТОЯНИЯ (EMPTY STATES) ..................... строка 1420
       - .empty-state - когда нет данных
       - Эмодзи и текст

   18. ТОСТЫ И УВЕДОМЛЕНИЯ ................................. строка 1450
       - #toastRoot - контейнер уведомлений
       - .toast - всплывающие сообщения
       - Анимации появления

   19. МЕДИА-ЗАПРОСЫ ....................................... строка 1500
       - Mobile (max-width: 600px)
       - Small mobile (max-width: 480px)
       - Tiny mobile (max-width: 380px)

   20. АНИМАЦИИ И TRANSITIONS .............................. строка 1620
       - @keyframes определения
       - Общие transition утилиты

   ================================================================================== */


/* ==================================================================================
   1. CSS-ПЕРЕМЕННЫЕ И ТЕМАТИЗАЦИЯ
   ==================================================================================

   Используется: везде в приложении
   Описание: Основные цвета бренда, темизация, системные переменные для spacing/sizing
*/

/* Светлая тема (по умолчанию) */
:root {
  /* Основные цвета бренда TONWEX */
  --bg: #E6F2F1;
  /* Фон приложения - светлый бирюзовый */
  --text: #042838;
  /* Основной текст - темный синий */
  --muted: #3f6d76;
  /* Приглушенный текст */

  /* Карточки и границы */
  --card: #ffffff;
  /* Фон карточек - белый */
  --border: #CCE3E8;
  /* Цвет границ */

  /* Основной бренд-цвет (кнопки, акценты) */
  --primary-500: #00D8B2;
  /* Primary - яркий бирюзовый */
  --primary-600: #00A88B;
  /* Primary темнее */
  --primary-700: #05967F;
  /* Primary еще темнее */
  --primary-900: #102031;
  /* Почти черный для контраста */

  /* Цвета статусов */
  --green: #22c55e;
  /* Success/Open - зеленый */
  --green-2: #16a34a;
  /* Success темнее */
  --red: #ef4444;
  /* Error/Closed - красный */
  --red-2: #dc2626;
  /* Error темнее */

  /* Иконки PNG (фильтр для темной темы) */
  --icon-filter: none;
  /* В светлой теме фильтр не применяется */

  /* Системные переменные для размеров */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */

  /* Контролы (кнопки, инпуты) */
  --ctrl-h: 2.875rem;
  /* ~46px - высота контролов */
  --btn-height: var(--ctrl-h);
  --btn-height-md: 46px;
  --btn-radius: 0.9rem;
  /* Скругление кнопок */
  --btn-gap: 0.5rem;
  /* Gap между иконкой и текстом в кнопке */

  /* Тени */
  --shadow-primary: 0 6px 14px color-mix(in srgb, var(--primary-600) 25%, transparent);

  /* Безопасная зона внизу (для iPhone) */
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* Темная тема */
:root[data-mode="dark"] {
  --bg: #042838;
  /* Темный фон */
  --text: #E6F2F1;
  /* Светлый текст */
  --muted: #D6EDF2;
  /* Приглушенный текст (светлее для читаемости) */

  --card: #0F4652;
  /* Темные карточки */
  --border: #0A3641;
  /* Темные границы */

  /* Primary colors остаются яркими */
  --primary-500: #00D8B2;
  --primary-600: #00A88B;

  /* Статусы остаются яркими */
  --green: #22c55e;
  --green-2: #16a34a;
  --red: #ef4444;
  --red-2: #dc2626;

  /* PNG иконки инвертируются и осветляются */
  --icon-filter: invert(1) brightness(1.8) contrast(1.1);
}


/* ==================================================================================
   2. БАЗОВЫЕ СТИЛИ
   ==================================================================================

   Используется: body, основная типография
   Описание: Reset стили, базовые настройки шрифтов и layout
*/

/* Tailwind-style reset для правильного box-sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--border);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Reset для кнопок и инпутов */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/* Убираем все эффекты нажатия для мобильных и декстопа */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Разрешаем выделение текста в инпутах и текстовых полях */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Убираем outline при фокусе (бортики при нажатии) */
*:focus,
*:active,
button:focus,
button:active,
a:focus,
a:active,
input:focus,
select:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button,
select {
  text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

/* На мобильных увеличиваем шрифт для лучшей читаемости */
@media (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

/* Вспомогательный текст (sub) - используется для подписей, хинтов */
.sub {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Helper text для полей */
.helper {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

/* Заголовки секций */
.section-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: var(--space-3) 0 var(--space-2);
}

/* Разделитель (divider) */
.divider {
  height: 1px;
  background: color-mix(in srgb, var(--border) 95%, transparent);
  border: 0;
  margin: var(--space-3) 0;
}


/* ==================================================================================
   2.5. УТИЛИТНЫЕ КЛАССЫ (замена Tailwind)
   ==================================================================================

   Используется: везде в приложении
   Описание: Общие утилитарные классы для layout, spacing, typography
*/

/* ===== Layout утилиты ===== */
.hidden {
  display: none !important;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

/* Flex направления */
.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

/* Flex/Grid выравнивание */
.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

/* Flex grow/shrink */
.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

/* Grid columns */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-\[1fr_auto_1fr\] {
  grid-template-columns: 1fr auto 1fr;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

/* Grid items - убедимся что они не переполняют родителя */
.grid>* {
  min-width: 0;
  min-height: 0;
}

/* ===== Spacing утилиты ===== */
/* Gap (flex/grid) */
.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

/* Margin */
.m-0 {
  margin: 0;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-auto {
  margin-left: auto;
}

/* Padding */
.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-28 {
  padding-bottom: 7rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pr-16 {
  padding-right: 4rem;
}

/* Space-y (vertical spacing между детьми) */
.space-y-1>*+* {
  margin-top: 0.25rem;
}

.space-y-2>*+* {
  margin-top: 0.5rem;
}

.space-y-3>*+* {
  margin-top: 0.75rem;
}

.space-y-4>*+* {
  margin-top: 1rem;
}

#exchange-online.space-y-4>.ex-card,
#exchange-online.space-y-4>.ex-swap-wrap,
#officeDeal.space-y-4>.ex-card,
#officeDeal.space-y-4>.ex-swap-wrap,
#crypto-buy.space-y-4>.ex-card,
#crypto-buy.space-y-4>.ex-swap-wrap {
  margin-top: 0;
}

#exchange-online.space-y-4>.ex-rate-card,
#officeDeal.space-y-4>.ex-rate-card,
#crypto-buy.space-y-4>.ex-rate-card {
  margin-top: 1rem;
}

.space-y-6>*+* {
  margin-top: 0.001rem;
}

/* ===== Sizing утилиты ===== */
.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-12 {
  width: 3rem;
}

.w-full {
  width: 100%;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-8 {
  height: 2rem;
}

.h-12 {
  height: 3rem;
}

.min-h-screen {
  min-height: 100vh;
}

.max-w-md {
  max-width: 28rem;
}

/* Важно для инпутов - убедимся что они занимают всю ширину контейнера */
input.w-full,
select.w-full,
textarea.w-full,
button.w-full {
  width: 100%;
  max-width: 100%;
}

/* Для grid элементов - убедимся что инпуты не переполняют ячейку */
.grid input,
.grid select,
.grid textarea {
  min-width: 0;
}

/* Когда .input используется с .flex-1, flex должен иметь приоритет */
.flex input.flex-1,
.flex select.flex-1,
.flex textarea.flex-1 {
  width: auto;
  min-width: 0;
}

/* ===== Typography утилиты ===== */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.2rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.break-all {
  word-break: break-all;
}

/* Цвета текста через CSS переменные */
.text-\[var\(--text\)\] {
  color: var(--text);
}

.text-\[var\(--muted\)\] {
  color: var(--muted);
}

.text-\[var\(--primary-600\)\] {
  color: var(--primary-600);
}

.text-\[var\(--primary-700\)\] {
  color: var(--primary-700);
}

.text-red-600 {
  color: #dc2626;
}

.text-green-600 {
  color: #16a34a;
}

.text-white {
  color: #ffffff;
}

/* Background цвета через CSS переменные */
.bg-\[var\(--bg\)\] {
  background-color: var(--bg);
}

.bg-\[var\(--card\)\] {
  background-color: var(--card);
}

.bg-\[var\(--primary-50\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 10%, white);
}

.bg-\[var\(--primary-100\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 20%, white);
}

.bg-\[var\(--primary-200\)\] {
  background-color: color-mix(in srgb, var(--primary-500) 30%, white);
}

.bg-\[var\(--primary-500\)\] {
  background-color: var(--primary-500);
}

.bg-transparent {
  background-color: transparent;
}

/* Backdrop blur для header */
.bg-\[color\:var\(--bg\)\/0\.85\] {
  background-color: color-mix(in srgb, var(--bg) 85%, transparent);
}

.bg-\[color\:var\(--bg\)\/0\.92\] {
  background-color: color-mix(in srgb, var(--bg) 92%, transparent);
}

/* ===== Border утилиты ===== */
.border {
  border-width: 1px;
  border-style: solid;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-\[var\(--border\)\] {
  border-color: var(--border);
}

.border-\[color\:var\(--border\)\] {
  border-color: var(--border);
}

.border-\[var\(--primary-600\)\] {
  border-color: var(--primary-600);
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* ===== Position утилиты ===== */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.inset-x-0 {
  left: 0;
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.right-2 {
  right: 0.5rem;
}

/* ===== Z-index ===== */
.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[55\] {
  z-index: 55;
}

.z-\[60\] {
  z-index: 60;
}

/* ===== Misc утилиты ===== */
.opacity-0 {
  opacity: 0;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-90 {
  opacity: 0.9;
}

.pointer-events-none {
  pointer-events: none;
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.translate-y-full {
  transform: translateY(100%);
}

.will-change-transform {
  will-change: transform;
}

/* Selection (выделение текста) */
.selection\:bg-\[var\(--primary-600\)\] ::selection,
.selection\:bg-\[var\(--primary-600\)\]::selection {
  background-color: var(--primary-600);
}

.selection\:text-white ::selection,
.selection\:text-white::selection {
  color: white;
}

/* Transition утилиты */
.transition-opacity {
  transition-property: opacity;
}

.transition-transform {
  transition-property: transform;
}

.duration-300 {
  transition-duration: 300ms;
}

/* Hover эффекты */
.hover\:bg-\[var\(--bg\)\]:hover {
  background-color: var(--bg);
}

.hover\:bg-\[var\(--primary-200\)\]:hover {
  background-color: color-mix(in srgb, var(--primary-500) 30%, white);
}

.hover\:underline:hover {
  text-decoration: underline;
}

/* Divide (borders между детьми) */
.divide-y>*+* {
  border-top-width: 1px;
  border-top-style: solid;
}

.divide-\[var\(--border\)\]>*+* {
  border-top-color: var(--border);
}

/* Специальные классы для конкретных элементов */
.no-invert {
  filter: none !important;
}

/* Wallet input (monospace) */
.wallet-input {
  font-family: monospace;
  font-size: 14px;
}

/* Balance card gradient */
.balance-card-gradient {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700, #008770));
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 1rem;
}

.balance-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0.25rem;
}

.balance-amount {
  font-size: 1.875rem;
  font-weight: 700;
  color: white;
  margin-top: 0.25rem;
}

.balance-topup-btn {
  padding: 0.5rem 1rem;
  background: white;
  color: var(--primary-600);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

.balance-topup-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Skeleton width утилиты */
.skeleton-w-30 {
  width: 30%;
}

.skeleton-w-34 {
  width: 34%;
}

.skeleton-w-38 {
  width: 38%;
}

.skeleton-w-42 {
  width: 42%;
}

.skeleton-w-50 {
  width: 50%;
}

.skeleton-w-58 {
  width: 58%;
}

.skeleton-w-60 {
  width: 60%;
}

.skeleton-w-65 {
  width: 65%;
}

.skeleton-w-66 {
  width: 66%;
}

.skeleton-w-72 {
  width: 72%;
}

.skeleton-w-82 {
  width: 82%;
}

.skeleton-w-88 {
  width: 88%;
}


/* ==================================================================================
   3. ИКОНКИ И ИЗОБРАЖЕНИЯ
   ==================================================================================

   Используется: меню, табы, карточки офисов
   Описание: PNG иконки с автоматическим фильтром для темной темы
*/

/* Иконки в меню и карточках (стандартный размер) */
.icon-img {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-block;
  flex-shrink: 0;
  filter: var(--icon-filter);
  transition: filter 0.2s;
}

/* Иконки в табах (меньше) */
.tab-ic {
  width: 1.35rem;
  height: 1.35rem;
  display: block;
  filter: var(--icon-filter);
  transition: filter 0.2s;
}

/* Иконки фиксированного размера 20px */
.icon-20 {
  width: 20px;
  height: 20px;
}

/* Мини-иконки в селектах */
.ui-ico-img {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
  object-fit: contain;
  display: inline-block;
  background: transparent;
  border: none;
  box-shadow: none;
  outline: none;
}

.ui-ico-img.round {
  border-radius: 9999px;
}

/* Отключить фильтр для логотипа и специальных изображений */
.no-invert {
  filter: none !important;
}

/* Теги валют с иконками */
.currency-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--fg, var(--text));
  text-transform: uppercase;
}

.currency-tag--sm {
  font-size: 0.82rem;
}

.currency-tag__img {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  filter: var(--icon-filter);
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  padding: 0.18rem;
}

.currency-tag--sm .currency-tag__img {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0.12rem;
}

.currency-tag__code {
  letter-spacing: 0.02em;
}


/* ==================================================================================
   4. КАРТОЧКИ И КОНТЕЙНЕРЫ
   ==================================================================================

   Используется: все секции приложения
   Описание: Базовые карточки (.card) и кликабельные плитки меню (.tap-btn)
*/

/* Базовая карточка - белый контейнер с границей */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  transition: box-shadow 0.25s ease;
}

.card:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
}

/* Кликабельная плитка меню (используется на главном экране) */
.tap-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 1.1rem;
  background: linear-gradient(0deg, color-mix(in srgb, var(--card) 94%, transparent), var(--card));
  border: 1px solid var(--border);
  box-shadow: 0 6px 14px color-mix(in srgb, #000 10%, transparent);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.18s ease;
  text-decoration: none;
  color: inherit;
}

.tap-btn:hover {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
}

.tap-btn:active {
  transform: translateY(1px);
}

/* Chevron (стрелка вправо) в tap-btn */
.tap-btn .chev {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0.7;
  flex-shrink: 0;
}


/* ==================================================================================
   5. ФОРМЫ И ИНПУТЫ
   ==================================================================================

   Используется: все формы в приложении
   Описание: Текстовые поля, селекты, лейблы, состояния валидации
*/

/* Общий класс для поля (label + input) */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Label (подпись поля) */
.label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* Базовый инпут */
.input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  outline: none;
  min-height: var(--ctrl-h);
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Select имеет больше отступа справа для стрелки */
select.input {
  padding-right: 2.1rem;
}

/* Состояние focus */
.input:focus {
  border-color: var(--primary-500);
  /* box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 22%, transparent); */
  /* Убрано для мобильных устройств */
}

/* Состояние ошибки */
.input.error,
.input.input-error {
  border-color: color-mix(in srgb, var(--red) 70%, transparent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 22%, transparent) !important;
}

/* Состояние валидно */
.input.valid {
  border-color: color-mix(in srgb, var(--green) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent);
}

/* Текст ошибки под полем */
.err-msg {
  color: var(--red-2);
  font-size: 0.78rem;
  margin-top: 0.25rem;
}

/* ===== Кастомный Select с иконками =====
   Используется: в формах обмена, выбор валюты
   Описание: Кастомизированный dropdown с PNG-иконками валют */

.ui-select {
  position: relative;
}

/* Скрываем нативный select */
.ui-select .native {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Кнопка селекта */
.ui-select__btn {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui-select__btn:focus {
  border-color: var(--primary-500);
  /* box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-500) 22%, transparent); */
  /* Убрано для мобильных устройств */
}

/* Label внутри кнопки (иконка + текст) */
.ui-select__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
}

/* Chevron (стрелка вниз) */
.ui-select__chev {
  width: 16px;
  height: 16px;
  opacity: 0.7;
  flex: 0 0 16px;
}

/* Панель с опциями (dropdown) */
.ui-select__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  box-shadow: 0 20px 40px color-mix(in srgb, #000 25%, transparent);
  padding: 0.35rem;
  max-height: 260px;
  overflow: auto;
  z-index: 50;
  transform-origin: top center;
  transform: scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

/* Открытое состояние */
.ui-select.open .ui-select__panel {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* Dropdown вверх (если места снизу мало) */
.ui-select.drop-up .ui-select__panel {
  top: auto;
  bottom: calc(100% + 0.4rem);
  transform-origin: bottom center;
}

/* Опция в селекте */
.ui-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.7rem;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ui-option:hover,
.ui-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-600) 30%, transparent);
}

/* Текст опции */
.ui-option__text {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}

/* Галочка выбранной опции */
.ui-check {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  opacity: 0.95;
}

.ui-option:not([aria-selected="true"]) .ui-check {
  visibility: hidden;
}


/* ==================================================================================
   6. КНОПКИ
   ==================================================================================

   Используется: формы, действия, навигация
   Описание: Основные кнопки (.primary), базовые кнопки (.btn), кнопки действий
*/

/* ===== Базовая кнопка =====
   Описание: Базовый класс для всех кнопок, содержит общие стили */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0 calc(var(--space-4) + 0.5rem);
  border-radius: var(--btn-radius);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, filter 0.24s ease, color 0.24s ease;
}

.btn:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-500) 50%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}

.btn:hover {
  filter: brightness(1.02);
}

/* ===== Primary кнопка (основная) =====
   Используется: подтверждение сделок, submit форм
   Описание: Яркая градиентная кнопка с тенью */

.primary,
.btn.primary,
button.primary,
.btn.btn--primary,
button.btn.btn--primary {
  --btn-padding-x: calc(var(--space-4) + 0.5rem);
  --btn-radius-lg: calc(var(--btn-radius) + 0.12rem);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: calc(var(--btn-height) + 0.05rem);
  padding: 0 var(--btn-padding-x);
  border-radius: var(--btn-radius-lg);
  font-weight: 700;
  letter-spacing: 0.01em;

  background:
    radial-gradient(140% 160% at 50% -35%, rgba(255, 255, 255, 0.72), transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 86%, var(--card)) 0%, color-mix(in srgb, var(--primary-600) 96%, transparent) 100%) !important;

  color: #f6fffd !important;
  text-shadow: 0 1px 0 rgba(4, 32, 42, 0.18);
  border: 1px solid color-mix(in srgb, var(--primary-600) 62%, transparent) !important;
  box-shadow: 0 18px 36px color-mix(in srgb, var(--primary-600) 28%, transparent);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.3s ease, filter 0.24s ease;
}

.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 42px color-mix(in srgb, var(--primary-600) 32%, transparent);
  filter: brightness(1.04);
}

.primary:active {
  transform: translateY(0);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-600) 26%, transparent);
  filter: brightness(0.98);
}

.primary:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-500) 55%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.primary:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
  filter: saturate(0.7);
  transform: none;
}

/* ===== Action кнопка =====
   Используется: Deal summary (маршрут, звонок, сообщение)
   Описание: Кнопки с иконками для действий */

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 0 calc(var(--space-4) + 0.35rem);
  border-radius: var(--btn-radius);
  font-weight: 600;
  line-height: 1.2;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  background:
    radial-gradient(120% 160% at 50% -40%, rgba(255, 255, 255, 0.7), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--primary-500) 22%, var(--card)) 100%);

  border: 1px solid color-mix(in srgb, var(--primary-600) 42%, transparent);
  color: color-mix(in srgb, var(--primary-600) 96%, var(--text) 10%);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-600) 22%, transparent);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

.action-btn:hover {
  transform: translateY(-1px);
  background:
    radial-gradient(120% 160% at 50% -40%, rgba(255, 255, 255, 0.75), transparent 65%),
    linear-gradient(135deg, color-mix(in srgb, var(--card) 88%, transparent) 0%, color-mix(in srgb, var(--primary-500) 28%, var(--card)) 100%);
  border-color: color-mix(in srgb, var(--primary-600) 58%, transparent);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--primary-600) 28%, transparent);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--primary-600) 24%, transparent);
}

.action-btn:focus-visible {
  /* outline: 3px solid color-mix(in srgb, var(--primary-600) 55%, transparent); */
  /* outline-offset: 3px; */
  /* Убрано для мобильных устройств */
}

.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Иконка внутри action-btn */
.action-btn .btn-ic {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--primary-600) 18%, transparent);
  color: inherit;
  transition: background 0.2s ease, transform 0.18s ease;
}

.action-btn:hover .btn-ic {
  background: color-mix(in srgb, var(--primary-600) 26%, transparent);
  transform: translateY(-1px);
}

.action-btn .btn-ic svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===== Кнопка "Назад" =====
   Используется: навигация между экранами */

.back-btn {
  background: transparent;
  border: none;
  padding: 0.2rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.back-btn:focus {
  /* outline: 2px solid color-mix(in srgb, var(--primary-500) 60%, transparent); */
  /* Убрано для мобильных устройств */
}


/* ==================================================================================
   7. ГЛАВНОЕ МЕНЮ (HOME)
   ==================================================================================

   Используется: главный экран приложения (#home section)
   Описание: Градиентный фон, стилизованный список меню с эффектами
*/

/* Градиентный фон на главном экране */
body.mobile-home-menu {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--primary-500) 18%, var(--bg)) 0%,
      color-mix(in srgb, var(--bg) 92%, transparent) 55%,
      color-mix(in srgb, var(--bg) 100%, transparent) 100%);
}

/* Header на главном экране - прозрачный с blur */
body.mobile-home-menu header {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  backdrop-filter: blur(10px);
}

/* Увеличенные отступы на главном экране */
body.mobile-home-menu main {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Заголовок секции меню (badge с градиентом) */
body.mobile-home-menu .menu-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 75%, transparent), color-mix(in srgb, var(--primary-600) 48%, transparent));
  color: #fff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--primary-600) 32%, transparent);
}

/* Контейнер списка меню - стеклянная карточка с градиентным свечением */
body.mobile-home-menu .menu-list {
  position: relative;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border-radius: 1.4rem;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  box-shadow: 0 20px 40px color-mix(in srgb, var(--text) 10%, transparent);
  padding: 0.35rem 0;
  overflow: hidden;
  backdrop-filter: blur(6px);
}

/* Градиентное свечение внизу menu-list */
body.mobile-home-menu .menu-list::before {
  content: "";
  position: absolute;
  inset: auto auto -30% -40%;
  width: 75%;
  height: 140%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--primary-500) 38%, transparent) 0%, transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  filter: blur(0);
}

/* Убираем margin между элементами внутри menu-list */
body.mobile-home-menu .menu-list.space-y-3> :not([hidden])~ :not([hidden]) {
  margin-top: 0;
}

/* Стили для tap-btn внутри menu-list */
body.mobile-home-menu .menu-list .tap-btn {
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1.25rem 1.45rem;
  position: relative;
  transition: background-color 0.18s ease, transform 0.18s ease;
  display: flex;
}

/* Разделитель между элементами меню */
body.mobile-home-menu .menu-list .tap-btn::after {
  content: "";
  position: absolute;
  left: 5.1rem;
  right: 1.4rem;
  bottom: 0;
  height: 1px;
  background: color-mix(in srgb, var(--border) 72%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:last-child::after {
  display: none;
}

/* Эффекты при взаимодействии */
body.mobile-home-menu .menu-list .tap-btn:active {
  background: color-mix(in srgb, var(--primary-500) 16%, transparent);
  transform: scale(0.99);
}

body.mobile-home-menu .menu-list .tap-btn:focus-visible {
  outline: none;
  background: color-mix(in srgb, var(--primary-500) 22%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary-600) 35%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:hover {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
}

body.mobile-home-menu .menu-list .tap-btn:hover .chev {
  opacity: 0.65;
}

/* Иконки в menu-list - больше и с градиентным фоном */
body.mobile-home-menu .menu-list .tap-btn .icon-img {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem;
  border-radius: 1.2rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 40%, transparent), color-mix(in srgb, var(--primary-600) 28%, transparent));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary-600) 30%, transparent);
}

/* Chevron в menu-list - меньше opacity */
body.mobile-home-menu .menu-list .tap-btn .chev {
  opacity: 0.45;
  width: 1.35rem;
  height: 1.35rem;
}

/* Sub текст светлее */
body.mobile-home-menu .menu-list .tap-btn .sub {
  color: color-mix(in srgb, var(--muted) 82%, transparent);
}


/* ==================================================================================
   8. НАВИГАЦИЯ (TAB BAR)
   ==================================================================================

   Используется: нижняя панель навигации
   Описание: Фиксированная панель с 3 табами (Home, Quick, Settings)
*/

.tabbar {
  padding-bottom: env(safe-area-inset-bottom);
  /* Safe area для iPhone */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 0.6rem;
  gap: 0.1rem;
  color: var(--muted);
  font-size: 0.72rem;
  cursor: pointer;
  transition: color 0.2s ease;
  text-decoration: none;
}

.tab-item.active {
  color: var(--primary-600);
}


/* ==================================================================================
   9. ОФИСЫ (EXCHANGE OFFICES)
   ==================================================================================

   Используется: #exchange-office section, список офисов
   Описание: Сетка карточек офисов, статусы работы, расписание, skeleton loading
*/

/* Заголовок секции офисов */
.offices-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offices-heading {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Фильтр по странам */
.offices-filter {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.offices-filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Сетка карточек офисов */
.offices-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ===== Карточка офиса =====
   Описание: Отдельная карточка с информацией об офисе */

.office-card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 1.1rem;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  box-shadow: 0 16px 32px color-mix(in srgb, var(--text) 9%, transparent);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Градиентное свечение в карточке офиса */
.office-card::after {
  content: "";
  position: absolute;
  inset: auto -50% -60% 40%;
  height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-500) 15%, transparent) 0%, transparent 70%);
  opacity: 0.25;
  pointer-events: none;
}

/* Выбранная карточка офиса */
.office-card.selected {
  border-color: color-mix(in srgb, var(--primary-600) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-600) 35%, transparent),
    0 20px 40px color-mix(in srgb, var(--primary-600) 26%, transparent);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 90%, var(--primary-600) 10%) 0%,
      color-mix(in srgb, var(--card) 74%, var(--primary-600) 26%) 100%);
}

.office-card:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 10%, transparent);
}

.office-card:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--primary-600) 62%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary-600) 22%, transparent),
    0 18px 36px color-mix(in srgb, var(--text) 9%, transparent);
}

.office-card.selected:focus-visible {
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--primary-600) 28%, transparent),
    0 22px 44px color-mix(in srgb, var(--primary-600) 30%, transparent);
}

/* Шапка карточки (страна, адрес, статус) */
.skeleton-card {
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1.05rem;
  padding: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  inset: -40% -60% -40% -60%;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #ffffff 55%, transparent) 50%, transparent 100%);
  animation: skeleton-shimmer 1.4s infinite;
}

.skeleton-bar {
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 88%, transparent);
}

.skeleton-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 85%, transparent);
}

.skeleton-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-55%);
  }

  100% {
    transform: translateX(55%);
  }
}

/* Tariff badge (бонус/комиссия в тарифах) */
.tariff-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.tariff-bonus {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.35);
}

.tariff-commission {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.35);
}


/* ==================================================================================
   10. ЭКРАН СДЕЛКИ (DEAL)
   ==================================================================================

   Используется: #exchange-office-deal section
   Описание: Форма обмена в офисе - выбор валют, ввод суммы, кнопка swap
*/

#exchange-office-deal .pb-5 {
  padding-bottom: 0 !important;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#exchange-office-deal .input {
  min-height: 42px;
}

#exchange-office-deal #offSwap {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Современный layout карточки сделки */
#exchange-office-deal .deal-card {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

#exchange-office-deal .deal-modern {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#exchange-office-deal .deal-modern>.sub {
  margin-bottom: 0.3rem;
}

#exchange-office-deal .deal-modern .field-row {
  margin: 0;
}

#exchange-office-deal .deal-modern .field-row+.field-row {
  margin-top: 0.4rem;
}

#exchange-office-deal .field-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

#exchange-office-deal .sel-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

/* Кнопка переключения валют (кликабельная) */
#exchange-office-deal #offSwitch {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

#exchange-office-deal #offSwitch:hover {
  border-color: color-mix(in srgb, var(--primary-600) 50%, transparent);
  background: color-mix(in srgb, var(--primary-500) 8%, var(--bg));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-600) 20%, transparent);
}

#exchange-office-deal #offSwitch:active {
  transform: translateY(1px);
}

#exchange-office-deal .center-row {
  display: flex;
  justify-content: center;
}

#exchange-office-deal #offSwitchText {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Текст пары валют - стилизованный chip */
#exchange-office-deal #offSwitchText {
  display: inline-block;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-600) 30%, transparent);
  color: var(--primary-600);
  font-weight: 700;
}

/* Кнопка swap (↔) */
#exchange-office-deal .swap-btn {
  border: 1px solid color-mix(in srgb, var(--primary-600) 50%, transparent);
  background: linear-gradient(180deg, var(--primary-500), var(--primary-600));
  color: #fff;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  min-width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-600) 32%, transparent);
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

#exchange-office-deal .swap-btn:hover {
  filter: brightness(1.05);
}

#exchange-office-deal .swap-btn:active {
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

/* Поле ввода суммы */
#exchange-office-deal .input-amount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#exchange-office-deal .input-amount .amount-el {
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  font: inherit;
  color: inherit;
}

/* Тег валюты справа в поле */
#exchange-office-deal .input-amount .cur-tag {
  flex: 0 0 auto;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: 0.9;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-600) 28%, transparent);
  color: var(--primary-600);
}

/* Карточка с информацией о курсе */
#exchange-office-deal .info-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 0.9rem;
  padding: 0.75rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

#exchange-office-deal .info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

#exchange-office-deal .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#exchange-office-deal .info-row.total .mono {
  font-weight: 700;
}

#exchange-office-deal .receive-amt {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.02rem;
  font-weight: 700;
}

/* Grid для выбора направлений */
#exchange-office-deal .grid {
  grid-template-columns: 1fr auto 1fr;
}

/* Скрыть legacy элементы */
#exchange-office-deal .legacy-hide {
  display: none !important;
}


/* ==================================================================================
   11. SUMMARY (ИТОГИ СДЕЛКИ)
   ==================================================================================

   Используется: #exchange-office-summary section
   Описание: Экран с подтверждением сделки, кнопки действий (маршрут, звонок)
*/

/* Компактный статус в summary */
.status.status-sm {
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
}

/* Индикатор-точка статуса */
.status-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.status-dot .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  display: block;
}

.status-dot.status-open .dot {
  background: var(--green);
}

.status-dot.status-closed .dot {
  background: var(--red);
}

/* Кнопки действий в summary */
.sum-actions .row-full {
  margin-bottom: 0.5rem;
}

.sum-actions .row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}


/* ==================================================================================
   12. КУРСЫ ОБМЕНА (RATES)
   ==================================================================================

   Используется: #rates section
   Описание: Таблицы курсов, переключатель online/office, тарифные уровни
*/

/* Заголовок секции курсов - с градиентом */
.rates-intro {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 14%, transparent), var(--card));
  border: 1px solid color-mix(in srgb, var(--primary-600) 30%, var(--border));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--primary-600) 14%, transparent);
}

.rates-intro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rates-updated {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Карточка с курсами */
.rates-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rates-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.rates-card-title {
  font-size: 1.02rem;
  font-weight: 600;
}

/* Pill (метка "Live", "Office") */
.rates-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-600) 45%, transparent);
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--primary-600);
}

.rates-pill.live {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: #fff;
  border-color: color-mix(in srgb, var(--primary-600) 70%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary-600) 22%, transparent);
}

/* Таблица курсов */
.rates-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Строка с курсом валюты */
.rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 6%, transparent);
  transition: box-shadow 0.2s ease;
}

.rate-row:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, #000 8%, transparent);
}

.rate-row--error {
  justify-content: center;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  border-style: dashed;
}

/* Пара валют в строке курса */
.rate-pair {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.rate-pair-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  font-size: 1rem;
}

.rate-arrow {
  opacity: 0.6;
}

.rate-base {
  font-size: 0.75rem;
  color: var(--muted);
}

.rate-base-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Значения курса */
.rate-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
}

.rate-effective {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 600;
}

.rate-percent {
  font-size: 0.78rem;
  font-weight: 600;
}

.rate-percent.positive {
  color: var(--green-2);
}

.rate-percent.negative {
  color: var(--red-2);
}

.rate-percent.neutral {
  color: var(--muted);
}

/* ===== Переключатель Online / Office =====
   Используется: #rates section */

.rates-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.4rem;
  border-radius: 1.1rem;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.rates-toggle-btn {
  flex: 1 1 0;
  min-width: 140px;
  padding: 0.6rem 1rem;
  border-radius: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.85rem;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  cursor: pointer;
}

.rates-toggle-btn.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-500) 18%, transparent), color-mix(in srgb, var(--primary-500) 28%, transparent));
  color: var(--primary-900, #102031);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-500) 25%, transparent);
  transform: translateY(-1px);
}

.rates-toggle-btn:focus-visible {
  /* outline: 2px solid color-mix(in srgb, var(--primary-500) 70%, transparent); */
  /* outline-offset: 2px; */
  /* Убрано для мобильных устройств */
}

/* ===== Офисные курсы (с тарифами) =====
   Используется: rates office tab */

.rates-office-list {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.office-rate {
  border-radius: 1.15rem;
  padding: 1.1rem 1.2rem;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, #000 7%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.office-rate-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.office-rate-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.office-rate-title {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--fg, var(--text));
}

.office-rate-sub {
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.office-rate-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.office-rate-body--tiers {
  gap: 1rem;
}

/* Направление обмена в офисе */
.office-direction {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.office-direction+.office-direction {
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-top: 0.9rem;
}

.office-direction-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.office-direction-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--fg, var(--text));
  font-size: 0.95rem;
}

.office-direction-arrow {
  opacity: 0.6;
}

.office-direction-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  text-align: right;
}

.office-direction-rate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 1rem;
  color: var(--fg, var(--text));
}

/* Бейджи направления (бонус, комиссия, фикс) */
.office-direction-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--muted);
}

.office-direction-badge.positive {
  color: var(--green-2);
  border-color: color-mix(in srgb, var(--green-2) 45%, transparent);
  background: color-mix(in srgb, var(--green-2) 12%, transparent);
}

.office-direction-badge.negative {
  color: var(--red-2);
  border-color: color-mix(in srgb, var(--red-2) 45%, transparent);
  background: color-mix(in srgb, var(--red-2) 12%, transparent);
}

.office-direction-badge.neutral {
  color: var(--muted);
}

.office-direction-badge.fixed {
  color: var(--primary-600);
  border-color: color-mix(in srgb, var(--primary-600) 45%, transparent);
  background: color-mix(in srgb, var(--primary-500) 14%, transparent);
}

/* Минимальная сумма */
.office-direction-min {
  margin: 0.5rem 0 0.3rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--muted);
}

.office-direction-min-label {
  font-weight: 600;
  color: var(--fg, var(--text));
}

.office-direction-min-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--fg, var(--text));
}

/* ===== Тарифные уровни (Tiers) =====
   Используется: когда офис имеет многоуровневые тарифы */

.office-tier-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0.6rem 0 0;
}

.office-tier-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--text) 8%, transparent);
  position: relative;
  overflow: hidden;
}

.office-tier-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -45% 30%;
  height: 55%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-500) 22%, transparent) 0%, transparent 70%);
  opacity: 0.22;
  pointer-events: none;
}

.office-tier-card+.office-tier-card {
  border-color: color-mix(in srgb, var(--border) 74%, transparent);
}

/* Диапазоны суммы (min/max) */
.office-tier-card-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.office-tier-card-range-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  min-width: 0;
  position: relative;
  overflow: hidden;
  line-height: 1.2;
}

.office-tier-card-range-item::before {
  content: "";
  position: absolute;
  inset: auto 12% -35% -30%;
  height: 70%;
  background: radial-gradient(120% 120% at 50% 100%, color-mix(in srgb, var(--primary-500) 18%, transparent) 0%, transparent 65%);
  opacity: 0.22;
  pointer-events: none;
}

.office-tier-card-range-item--max {
  border-color: color-mix(in srgb, var(--primary-500) 42%, transparent);
  background: color-mix(in srgb, var(--primary-500) 14%, transparent);
}

.office-tier-card-range-item--max::before {
  opacity: 0.32;
}

.office-tier-range-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.office-tier-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--muted) 88%, transparent);
}

.office-tier-range-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg, var(--text));
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.office-tier-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--fg, var(--text));
  white-space: nowrap;
}

/* Детали тарифа */
.office-tier-card-details,
.office-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.office-tier-card-details {
  margin-top: 0.4rem;
}

.office-tier-type {
  font-weight: 600;
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Число курса/комиссии */
.office-tier-number {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg, var(--text));
}

.office-tier-number.positive {
  color: var(--green-2);
}

.office-tier-number.negative {
  color: var(--red-2);
}

.office-tier-number.fixed {
  color: var(--primary-600);
}

.office-tier-number.neutral {
  color: var(--fg, var(--text));
}

/* Footer с дополнительной инфой */
.office-rate-footer {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.office-rate-footer span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.office-rate-footer .min-label {
  font-weight: 600;
  color: var(--fg, var(--text));
}

/* Группа курсов (когда несколько валют в одном блоке) */
.rates-group {
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 1rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rates-group+.rates-group {
  margin-top: 0.75rem;
}

.rates-group-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--fg, var(--text));
}

.rates-group-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rates-group-arrow {
  opacity: 0.55;
}

/* Заголовок офисного курса (страна, адрес) */
.office-rate-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.office-rate-location {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.office-rate-country {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--fg, var(--text));
}

.office-rate-address {
  font-size: 0.82rem;
  color: var(--muted);
}

.office-rate-submeta {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

.office-rate-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
  text-align: right;
}

.office-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.78rem;
  border: 1px solid transparent;
}

.office-status-badge--open {
  color: var(--green-2);
  background: color-mix(in srgb, var(--green-2) 16%, transparent);
  border-color: color-mix(in srgb, var(--green-2) 45%, transparent);
}

.office-status-badge--closed {
  color: var(--red-2);
  background: color-mix(in srgb, var(--red-2) 16%, transparent);
  border-color: color-mix(in srgb, var(--red-2) 45%, transparent);
}

.office-status-badge--soon {
  color: var(--primary-600);
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  border-color: color-mix(in srgb, var(--primary-600) 42%, transparent);
}

.office-status-note {
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}

.office-rate-directions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Стили для пары валют (аналогичны rate-row) */
.rate-pair {
  gap: 0.6rem;
  align-items: flex-start;
}

.rate-pair-main {
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Prominent rate pill на экране deal */
.rate-pill {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--primary-50, #ecfeff) 55%, var(--card));
  border: 1px solid color-mix(in srgb, var(--primary-400, #38bdf8) 35%, var(--border));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-700, #0369a1) 10%, transparent);
}

.rate-pill .pill-text {
  font-weight: 600;
}

.rate-pill .pill-sub {
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
}


/* ==================================================================================
   13. ИСТОРИЯ ОПЕРАЦИЙ (HISTORY)
   ==================================================================================

   Используется: #history section, #crypto-history section
   Описание: Список прошлых сделок/транзакций
*/

/* Пока используются общие стили из Empty States и Status/Badges секций */


/* ==================================================================================
   14. МОДАЛЬНЫЕ ОКНА
   ==================================================================================

   Используется: настройки, выбор кошелька
   Описание: Bottom sheet и модалки с overlay
*/

/* ===== Bottom Sheet (настройки) =====
   Используется: #settingsSheet */

/* Handle (полоска для свайпа) */
.sheet-handle {
  width: 4rem;
  height: 5px;
  margin: 0 auto 0.5rem;
  border-radius: 9999px;
  background: #9ca3af;
  cursor: grab;
}

.sheet-handle:active {
  cursor: grabbing;
}

/* Body с overflow hidden (когда sheet открыт) */
body.overflow-hidden {
  touch-action: none;
  overscroll-behavior: none;
}

/* Overlay (затемнение фона) */
#sheetOverlay {
  /* Инлайн стили в HTML */
}

/* ===== Модальное окно выбора кошелька =====
   Используется: #walletSelectionModal */

#walletSelectionModal {
  animation: fadeIn 0.2s ease-out;
}

#walletSelectionModal.hidden {
  display: none !important;
}

#walletSelectionModal>div {
  animation: slideUp 0.3s ease-out;
  transform-origin: bottom;
}

/* Поиск кошелька */
#walletSearchInput {
  transition: all 0.2s ease;
}

#walletSearchInput:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(0, 216, 178, 0.1);
  outline: none;
}

/* Элементы списка кошельков */
.wallet-item {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.1s ease;
}

.wallet-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(0, 216, 178, 0.1),
      transparent);
  transition: left 0.5s ease;
}

.wallet-item:hover::before {
  left: 100%;
}

.wallet-item:active {
  transform: scale(0.98);
}

/* Подсветка в поиске */
.wallet-item mark {
  background-color: rgba(255, 235, 59, 0.4);
  color: inherit;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

:root[data-mode="dark"] .wallet-item mark {
  background-color: rgba(255, 193, 7, 0.3);
}

/* Кнопка закрытия */
#closeWalletModal {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#closeWalletModal:hover {
  transform: rotate(90deg);
  background-color: rgba(239, 68, 68, 0.1);
}

/* Кнопка очистки поиска */
#clearWalletSearch {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#clearWalletSearch:hover {
  transform: scale(1.1);
}

/* Кнопка открытия модалки */
#openWalletModal {
  transition: all 0.3s ease;
  position: relative;
}

#openWalletModal:hover {
  border-color: var(--primary-600);
  background-color: rgba(0, 216, 178, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 216, 178, 0.15);
}

#openWalletModal:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 216, 178, 0.1);
}

/* Выбранный кошелек */
#selectedWalletDisplay {
  transition: color 0.2s ease;
}

/* Скроллбар списка кошельков */
#walletListContainer::-webkit-scrollbar {
  width: 8px;
}

#walletListContainer::-webkit-scrollbar-track {
  background: var(--card);
  border-radius: 4px;
}

#walletListContainer::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
  transition: background 0.2s ease;
}

#walletListContainer::-webkit-scrollbar-thumb:hover {
  background: var(--primary-500);
}

/* Пустые состояния в модалке */
#walletListEmpty svg,
#walletListNoResults svg {
  transition: transform 0.3s ease;
}

#walletListEmpty:hover svg,
#walletListNoResults:hover svg {
  transform: scale(1.1);
}

/* Copyable text (можно скопировать по клику) */
.copyable {
  cursor: pointer;
}


/* ==================================================================================
   15. СТАТУСЫ И БЕЙДЖИ
   ==================================================================================

   Используется: везде для отображения статусов
   Описание: Универсальные компоненты статусов с цветовой индикацией
*/

/* ===== Общий статус =====
   Используется: history, deal summary */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  border: 1px solid transparent;
}

.status .dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  display: inline-block;
}

.status-open {
  background: rgba(34, 197, 94, 0.12);
  color: var(--green-2);
  border-color: rgba(34, 197, 94, 0.35);
}

.status-open .dot {
  background: var(--green);
  animation: dot-pulse 1.6s ease-in-out infinite;
}

.status-closed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--red-2);
  border-color: rgba(239, 68, 68, 0.35);
}

.status-closed .dot {
  background: var(--red);
}

.status-temp {
  background: rgba(148, 163, 184, 0.16);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.35);
}

.status-temp .dot {
  background: #94a3b8;
}

/* ===== Компактные бейджи =====
   Используется: в history, chips */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.badge-muted {
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--muted);
  border-color: var(--border);
}

.badge-success {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.35);
}

.badge-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.35);
}

/* Новые цветные бэджи для статусов */
.badge-confirmed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.35);
}

.badge-cancelled {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}

/* Цветные бэджи для типов сделок */
.badge-online {
  background: rgba(139, 92, 246, 0.12);
  color: #6d28d9;
  border-color: rgba(139, 92, 246, 0.35);
  font-weight: 600;
}

.badge-office {
  background: rgba(236, 72, 153, 0.12);
  color: #be185d;
  border-color: rgba(236, 72, 153, 0.35);
  font-weight: 600;
}


/* ==================================================================================
   16. СКЕЛЕТОНЫ И ЗАГРУЗКА
   ==================================================================================

   Используется: все секции при загрузке данных
   Описание: Анимированные плейсхолдеры пока грузятся данные
*/

.skeleton {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 1rem;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 12%, transparent), transparent);
  animation: shimmer 1.1s infinite;
}

.skel-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
}

.skel-ic {
  width: 20px;
  height: 20px;
  border-radius: 0.5rem;
  background: color-mix(in srgb, #000 8%, transparent);
}

.skel-line {
  height: 0.8rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, #000 8%, transparent);
  flex: 1;
}

.skel-line.short {
  max-width: 40%;
}

.skel-rect {
  height: 120px;
  background: color-mix(in srgb, #000 8%, transparent);
  border-radius: 0.8rem;
  margin: 0.5rem;
}


/* ==================================================================================
   17. ПУСТЫЕ СОСТОЯНИЯ (EMPTY STATES)
   ==================================================================================

   Используется: history, rates, crypto history
   Описание: Показывается когда нет данных
*/

.empty-state {
  text-align: center;
  padding: 1.2rem;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

.empty-state .emoji {
  font-size: 1.6rem;
  display: block;
  margin-bottom: 0.4rem;
}

.empty-state .title {
  font-weight: 700;
  color: var(--text);
}

.empty-state .hint {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}


/* ==================================================================================
   18. ТОСТЫ И УВЕДОМЛЕНИЯ
   ==================================================================================

   Используется: #toastRoot
   Описание: Всплывающие сообщения об успехе/ошибке
*/

#toastRoot {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 0.9rem;
  padding: 0.6rem 0.8rem;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 10%, transparent);
  min-width: 220px;
}

.toast .ico {
  width: 20px;
  height: 20px;
}

.toast.ok {
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
}

.toast.err {
  border-color: color-mix(in srgb, var(--red) 35%, transparent);
}

.toast.show {
  animation: toast-in 0.18s ease;
}


/* ==================================================================================
   19. МЕДИА-ЗАПРОСЫ
   ==================================================================================

   Описание: Адаптивность для разных размеров экранов
*/

/* ===== Офисы - Мобильные =====  */
@media (max-width: 600px) {
  .offices-header {
    gap: 0.6rem;
  }

  .offices-heading {
    font-size: 1.18rem;
  }

  .offices-grid {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

}



/* ===== Курсы - Мобильные ===== */
@media (max-width: 600px) {
  .rates-toggle {
    min-width: auto;
    width: min(9.6rem, calc(100vw - 2.5rem));
    max-width: min(9.6rem, calc(100vw - 2.5rem));
    margin-top: 0.25rem;
  }

  .rates-toggle-btn {
    min-width: 0;
    width: 100%;
  }

  .office-rate {
    padding: 1rem;
  }

  .office-rate-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .office-direction-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .office-direction-highlight {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .rate-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .rate-values {
    align-items: flex-start;
    text-align: left;
  }

  .rate-effective {
    font-size: 1.02rem;
  }
}

/* ===== Тарифные карточки - Responsive ===== */
@media (max-width: 900px) {
  .office-tier-card {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
}

@media (max-width: 720px) {
  .office-tier-card {
    padding: 0.95rem;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--text) 6%, transparent);
  }

  .office-tier-card-range {
    grid-template-columns: 1fr;
  }

  .office-tier-card-range-item {
    gap: 0.6rem;
  }

  .office-tier-card-details,
  .office-tier-row {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .office-tier-number {
    font-size: 1.02rem;
  }

  .office-tier-range-label {
    font-size: 0.7rem;
    letter-spacing: 0.055em;
  }

  .office-tier-range-value {
    font-size: 0.92rem;
  }

  .office-tier-value {
    white-space: normal;
  }
}

@media (max-width: 540px) {
  .office-tier-cards {
    gap: 0.5rem;
  }

  .office-tier-card {
    padding: 0.8rem;
    border-radius: 0.85rem;
    border-color: color-mix(in srgb, var(--border) 65%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 5%, transparent);
  }

  .office-tier-card-range {
    gap: 0.5rem;
  }

  .office-tier-card-range-item {
    padding: 0.5rem 0.65rem;
    gap: 0.55rem;
  }

  .office-tier-card-range-item::before {
    opacity: 0.16;
  }

  .office-tier-number {
    font-size: 1.02rem;
  }

  .office-tier-range-label {
    font-size: 0.68rem;
    letter-spacing: 0.055em;
  }

  .office-tier-range-value {
    font-size: 0.88rem;
  }

  .office-tier-value {
    font-size: 0.9rem;
  }

  .rates-group {
    padding: 0.8rem;
  }

  .office-rate-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .office-rate-status {
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 420px) {
  .office-tier-card {
    box-shadow: none;
    background: color-mix(in srgb, var(--card) 98%, transparent);
    border-color: color-mix(in srgb, var(--border) 58%, transparent);
    padding: 0.8rem;
  }

  .office-tier-card-range-item {
    padding: 0.45rem 0.6rem;
    border-radius: 0.75rem;
    gap: 0.5rem;
  }

  .office-tier-range-label {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
  }

  .office-tier-label {
    font-size: 0.68rem;
    letter-spacing: 0.045em;
  }

  .office-tier-range-value {
    font-size: 0.86rem;
  }

  .office-tier-number {
    font-size: 1rem;
  }
}

/* ===== Мобильная типография (улучшенная читаемость) ===== */
html,
body {
  font-size: 17px;
  line-height: 1.55;
}


@media (max-width: 380px) {

  html,
  body {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* ===== Модалка кошельков - мобильная ===== */
@media (max-width: 640px) {
  #walletSelectionModal>div {
    max-height: 85vh;
    border-radius: 24px 24px 0 0;
  }

  #walletSearchInput {
    font-size: 16px;
    /* Prevent zoom on iOS */
  }
}

/* ===== Deal screen - мобильный ===== */
@media (max-width: 520px) {
  /* modern layout is columnar by default; legacy grid stays hidden */
}


/* ==================================================================================
   19.5. ЭКРАН ЗАГРУЗКИ (LOADING SCREEN)
   ==================================================================================

   Используется: при загрузке приложения
   Описание: Простой и красивый экран с логотипом и вращающимся спиннером
*/

#app-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#app-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Контейнер для контента */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
}

/* Логотип */
.loader-logo {
  width: 150px;
  height: auto;
  object-fit: contain;
  animation: loader-fade-in 0.6s ease-out;
}

/* Контейнер для спиннера */
.loader-spinner-container {
  position: relative;
  width: 60px;
  height: 60px;
}

/* Простой вращающийся круг */
.loader-spinner {
  width: 100%;
  height: 100%;
  border: 4px solid var(--border);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}

/* Текст загрузки */
.loader-text {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: loader-text-fade 2s ease-in-out infinite;
}

/* Анимация появления */
@keyframes loader-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Анимация вращения спиннера */
@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Анимация мерцания текста */
@keyframes loader-text-fade {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

/* Анимация таймера обновления курса */
@keyframes timer-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

#rateTimer {
  transition: all 0.3s ease;
}

#rateTimer.updating {
  animation: timer-pulse 0.5s ease-in-out;
  background: var(--primary-600) !important;
  color: white !important;
}

#rateTimer.low-time {
  background: #fef3c7 !important;
  color: #d97706 !important;
}

/* ==================================================================================
   Unified Exchange Screen Styles
   ================================================================================== */

/* Exchange input group container */
.exchange-input-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.55rem 0.8rem;
  background: var(--bg);
  transition: all 0.2s ease;
}

.exchange-input-group:focus-within {
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px rgba(0, 168, 139, 0.1);
}

/* Amount input field */
.exchange-input-amount {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  outline: none;
  padding: 0;
  min-width: 0;
}

.exchange-input-amount::placeholder {
  color: var(--muted);
}

/* Currency selector button */
.exchange-currency-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.exchange-currency-select:hover {
  background: var(--bg);
  border-color: var(--primary-600);
}

.exchange-currency-select img {
  width: 1.25rem;
  height: 1.25rem;
}

/* Swap button */
.swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--primary-50);
  color: var(--primary-600);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.25rem;
  align-self: center;
}

.swap-btn:hover {
  background: var(--primary-100);
}

.swap-btn:active {
  transform: scale(0.95);
}

.swap-btn.swapping {
  animation: swap-rotate 0.3s ease-in-out;
}

@keyframes swap-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

/* Exchange rate info block */
.exchange-rate-info {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 0.55rem 0.8rem;
  background: var(--bg);
  font-size: 0.85rem;
}

.exchange-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
}

.exchange-rate-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.exchange-rate-label {
  color: var(--muted);
}

.exchange-rate-value {
  font-family: monospace;
  font-weight: 500;
  color: var(--text);
}

.exchange-rate-value.highlighted {
  color: var(--primary-600);
  font-weight: 600;
}

/* Dropdown menu for currency selection */
.currency-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 50;
  min-width: 7.5rem;
  max-height: 16rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: all 0.2s ease;
}

.currency-dropdown.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.currency-dropdown {
  right: auto;
  left: 0;
  min-width: auto;
  width: min(9.6rem, calc(100vw - 2.5rem));
  max-width: min(9.6rem, calc(100vw - 2.5rem));
  margin-top: 0.25rem;
}

.currency-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.currency-option img {
  width: 1.2rem;
  height: 1.2rem;
}

.currency-option:hover {
  background: var(--bg);
}

.currency-option img {
  width: 1.2rem;
  height: 1.2rem;
}

.currency-option-code {
  font-weight: 500;
  color: var(--text);
}

.currency-option-symbol {
  color: var(--muted);
  margin-left: auto;
  font-size: 0.85rem;
}

/* Hide old exchange-quote screen (now merged into unified exchange) */
#exchange-quote {
  display: none !important;
}

/* ==================================================================================
   Confirmation Screen Styles - Clean Table Design
   ================================================================================== */

.confirm-table-card {
  padding: 0;
}

/* Confirmation Row */
.confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
}

.confirm-row:last-child {
  border-bottom: none;
}

/* Label */
.confirm-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}

/* Value */
.confirm-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

/* Badge Style */
.confirm-value.badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: var(--primary-100);
  color: var(--primary-700);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

/* Pair Style */
.confirm-value.pair {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.confirm-arrow {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Color Variants */
.confirm-value.red {
  color: rgb(239, 68, 68);
}

.confirm-value.green {
  color: rgb(34, 197, 94);
}

.confirm-value.primary {
  color: var(--primary-600);
  font-weight: 700;
}

/* Status Style */
.confirm-value.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
  border-radius: 0.375rem;
  font-size: 0.8125rem;
}

.confirm-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  border-radius: 50%;
  animation: pulse-dot-anim 2s ease-in-out infinite;
}

@keyframes pulse-dot-anim {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Confirmation Success Banner */
.confirm-status-card {
  padding: 1.1rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.confirm-status-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-50);
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.confirm-status-icon::before {
  content: "";
  width: 18px;
  height: 10px;
  border: 3px solid currentColor;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
  margin-top: 2px;
}

.confirm-status-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
}

.confirm-status-text {
  font-size: 0.9rem;
  color: var(--muted);
}

.confirm-value.link {
  color: var(--primary-600);
  text-decoration: none;
}

.confirm-value.link:hover {
  text-decoration: underline;
}

/* Office Info in Value */
.confirm-office-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.125rem;
}

.confirm-office-addr {
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.3;
}

/* Details Header */
.confirm-details-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.confirm-details-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-600);
  flex-shrink: 0;
}

/* Detail List */
.confirm-detail-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.confirm-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.625rem 0;
}

.confirm-detail-item:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.confirm-detail-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}

.confirm-detail-value {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  font-family: 'Courier New', monospace;
}


/* ==================================================================================
   20. АНИМАЦИИ И TRANSITIONS
   ==================================================================================

   Описание: @keyframes определения для анимаций
*/

/* Анимация пульсации точки статуса */
@keyframes dot-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.85;
  }
}

/* Shimmer эффект для skeleton */
@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Появление toast */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Fade in для модалок */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slide up для bottom sheet */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Transitions для view переключения */
[data-view] {
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Hover эффект для checkbox */
.checkbox:hover {
  filter: brightness(1.03);
}

/* Микроинтеракции для кнопок и карточек */
.tap-btn:active {
  transform: translateY(1px);
}

.office-card:hover {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 10%, transparent);
}

.office-select-btn:hover {
  filter: brightness(1.05);
  transform: translateY(0);
}

/* ==================================================================================
   NEW Exchange Card Design
   ================================================================================== */

/* Exchange Card */
.exchange-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Card Header */
.exchange-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.exchange-card-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
}

.exchange-card-balance {
  font-size: 0.8125rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.exchange-card-balance span:last-child {
  font-weight: 600;
  color: var(--text);
}

/* Currency Button */
.exchange-currency-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.exchange-currency-btn:hover {
  border-color: var(--primary-600);
  background: var(--card);
}

.exchange-currency-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.exchange-currency-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.125rem;
}

.exchange-currency-code {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
}

.exchange-currency-network {
  font-size: 0.8125rem;
  color: var(--muted);
}

.exchange-currency-chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted);
  flex-shrink: 0;
}

/* Amount Input */
.exchange-amount-input {
  width: 100%;
  border: none;
  background: transparent;
  font-size: 2rem;
  font-weight: 600;
  color: var(--text);
  outline: none;
  padding: 0;
  margin: 0.5rem 0;
}

.exchange-amount-input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.exchange-amount-input:disabled,
.exchange-amount-input:read-only {
  color: var(--text);
  opacity: 1;
}

/* USD Equivalent */
.exchange-equiv {
  font-size: 0.9375rem;
  color: var(--muted);
  margin-top: -0.5rem;
}

/* Percentage Buttons */
.exchange-percent-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.exchange-percent-btn {
  padding: 0.625rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 0.625rem;
  background: var(--card);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s;
}

.exchange-percent-btn:hover {
  border-color: var(--primary-600);
  color: var(--primary-600);
}

.exchange-percent-btn-active {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.exchange-percent-btn-active:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
  color: white;
}

/* Swap Button Wrapper */
.exchange-swap-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -0.75rem 0;
  z-index: 10;
}

.exchange-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--primary-600);
  color: white;
  border: 4px solid var(--bg);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(0, 168, 139, 0.25);
}

.exchange-swap-btn:hover {
  background: var(--primary-700);
  transform: scale(1.05);
}

.exchange-swap-btn:active {
  transform: scale(0.95);
}

.exchange-swap-btn.swapping {
  animation: swap-rotate-new 0.3s ease-in-out;
}

.exchange-swap-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

@keyframes swap-rotate-new {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

/* Rate Card */
.exchange-rate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exchange-rate-commission {
  color: var(--primary-600);
  font-weight: 600;
}

/* Continue Button */
.exchange-continue-btn {
  width: 100%;
  padding: 1rem;
  background: var(--primary-600);
  color: white;
  border: none;
  border-radius: 0.875rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 6px 14px rgba(0, 168, 139, 0.25);
}

.exchange-continue-btn:hover {
  background: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0, 168, 139, 0.3);
}

.exchange-continue-btn:active {
  transform: translateY(0);
}

.exchange-continue-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#exTimer {
  font-weight: 400;
  opacity: 0.9;
}

/* ==================================================================================
   Exchange Form - Mockup Design
   ================================================================================== */

/* Exchange Card */
.ex-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--card);
  box-shadow: 0 1px 2px rgba(4, 40, 56, .03);
}

.ex-card+.ex-card {
  margin-top: 1px;
  /* Увеличен отступ для кнопки swap */
}

/* Card Header */
.ex-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ex-card-title {
  font-size: 13px;
  color: var(--muted);
}

/* Row with currency and amount */
.ex-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 6px;
}

/* Currency Icon */
.ex-coin-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: 0 0 44px;
  object-fit: cover;
}

/* Currency Info (Code + Network) */
.ex-asset {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ex-code {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.ex-net {
  font-size: 13px;
  color: var(--muted);
}

/* Chevron Button (Dropdown) */
.ex-chev {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--card);
  cursor: pointer;
  transition: all 0.2s;
}

.ex-chev:hover {
  border-color: var(--primary-600);
  color: var(--primary-600);
}

/* Amount Input/Display */
.ex-amount {
  margin-left: auto;
  text-align: right;
}

.ex-amount input {
  width: 160px;
  text-align: right;
  border: none;
  outline: none;
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
}

.ex-amount input::placeholder {
  color: var(--muted);
  opacity: 0.5;
}

.ex-amount-readonly {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
}

/* Swap Button Wrapper */
.ex-swap-wrap {
  position: relative !important;
  height: 0 !important;
  margin: 0 !important;
}

.ex-swap-btn {
  position: absolute !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--primary-600) !important;
  color: white !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.25s ease !important;
}

.ex-swap-btn:hover {
  background: var(--primary-700);
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.ex-swap-btn:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.ex-swap-btn svg {
  width: 22px !important;
  height: 22px !important;
  pointer-events: none !important;
  stroke: currentColor !important;
  transition: transform 0.28s ease !important;
  transform: rotate(0deg) !important;
}

.ex-swap-btn[data-rot="180"] svg {
  transform: rotate(180deg) !important;
}

.ex-swap-btn:focus-visible {
  outline: 3px solid var(--primary-500);
  outline-offset: 3px;
}

/* Rate Info Card - Beautiful Table */
.ex-rate-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  background: var(--card);
  overflow: hidden;
}

.ex-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.ex-rate-row:last-child {
  border-bottom: none;
}

.ex-rate-row-highlight {
  background: transparent;
}

.ex-rate-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
}

.ex-rate-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ex-rate-value-primary {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}

.ex-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #dc2626) 15%, transparent) !important;
  background-color: color-mix(in srgb, var(--red, #dc2626) 3%, var(--card)) !important;
}

.input-error:focus {
  border-color: var(--red, #dc2626) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red, #dc2626) 20%, transparent) !important;
}

/* Pulse animation for critical errors */
@keyframes pulse-error {

  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red, #dc2626) 15%, transparent);
  }

  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--red, #dc2626) 8%, transparent);
  }
}

.pulse-error {
  animation: pulse-error 1.5s ease-in-out infinite;
}

/* Swipe to Confirm Slider - TWX Component */
.twx-slide-confirm {
  width: 100%;
  margin: 0 auto;
}

.twx-track {
  position: relative;
  height: 56px;
  padding: 0;
  border-radius: 16px;
  background: var(--card-background, #E6F2F1);
  box-shadow: inset 0 0 0 1px rgba(4, 40, 56, 0.08);
  border: 1px solid var(--border-color, rgba(4, 40, 56, 0.1));
  overflow: hidden;
  touch-action: pan-x;
  user-select: none;
}

.twx-progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-600, #00A88B);
  border-radius: 16px;
  transition: width 0.2s ease;
}

.twx-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 14px/1.2 var(--font-family, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, Arial, sans-serif);
  color: var(--text-secondary, #0F4652);
  pointer-events: none;
}

.twx-label .twx-label-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.95;
}

.twx-label .twx-label-inner svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  opacity: 0.85;
}

.twx-knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--primary-600, #00A88B);
  box-shadow: 0 4px 12px rgba(0, 168, 139, 0.3);
  transition: left 0.2s ease;
  outline: none;
  z-index: 10;
  animation: hint-knob-slide 2s ease-in-out infinite;
}

.twx-knob.dragging {
  animation: none;
}

.twx-knob svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
  fill: none;
}

.twx-confirmed .twx-label {
  color: #fff;
}

.twx-confirmed .twx-knob {
  background: #11C5A6;
}

.twx-success {
  animation: success-pulse 0.4s ease-out;
}

@keyframes success-pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.twx-hint {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.twx-shimmer {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: twx-shimmer 1.8s linear infinite;
}

.twx-hint-arrow {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  stroke: var(--text-secondary, #0F4652);
  fill: none;
  opacity: 0;
}

@keyframes twx-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes hint-knob-slide {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(12px);
  }

  30% {
    transform: translateX(0);
  }
}

/* Dark theme support */
[data-theme="dark"] .twx-track,
.dark .twx-track {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .twx-label,
.dark .twx-label {
  color: #cfe7ea;
}

[data-theme="dark"] .twx-hint-arrow,
.dark .twx-hint-arrow {
  stroke: #cfe7ea;
}

/* Legacy Swipe to Confirm Slider (fallback) */
.swipe-confirm-container {
  width: 100%;
  padding: 4px;
  background: linear-gradient(90deg,
      rgba(0, 168, 139, 0.1) 0%,
      rgba(0, 168, 139, 0.05) 50%,
      transparent 100%);
  border-radius: 16px;
  border: 2px solid var(--primary-200);
  transition: all 0.3s ease;
}

.swipe-confirm-track {
  position: relative;
  width: 100%;
  height: 64px;
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
}

.swipe-confirm-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg,
      var(--primary-100) 0%,
      var(--primary-200) 100%);
  border-radius: 12px 0 0 12px;
  width: 0;
  transition: width 0.1s ease-out;
  opacity: 0.5;
}

.swipe-confirm-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
  z-index: 1;
}

.swipe-confirm-slider {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
  border-radius: 12px;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 168, 139, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  touch-action: none;
  user-select: none;
  z-index: 2;
  will-change: left;
  animation: hint-swipe 2s ease-in-out infinite;
}

.swipe-confirm-slider:active {
  cursor: grabbing;
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 168, 139, 0.4),
    0 3px 6px rgba(0, 0, 0, 0.15);
  filter: brightness(1.1);
  animation: none;
}

.swipe-confirm-icon {
  width: 28px;
  height: 28px;
  stroke: white;
  stroke-width: 2.5;
  transition: transform 0.2s;
  animation: hint-arrow 2s ease-in-out infinite;
}

.swipe-confirm-slider:active .swipe-confirm-icon {
  transform: translateX(2px);
  animation: none;
}

.swipe-confirm-slider.swiping {
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  animation: none;
}

.swipe-confirm-slider.swiping .swipe-confirm-icon {
  animation: none;
}

.swipe-confirm-slider.completed {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  animation: success-pulse 0.5s ease-out;
}

.swipe-confirm-slider.completed .swipe-confirm-icon {
  animation: success-check 0.3s ease-out;
}

.swipe-confirm-track.completed .swipe-confirm-text {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}

.swipe-confirm-track.completed .swipe-confirm-progress {
  width: 100% !important;
  background: linear-gradient(90deg,
      rgba(16, 185, 129, 0.2) 0%,
      rgba(16, 185, 129, 0.3) 100%);
  opacity: 1;
}

@keyframes success-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@keyframes success-check {
  0% {
    transform: translateX(2px) rotate(0deg);
  }

  50% {
    transform: translateX(4px) rotate(10deg);
  }

  100% {
    transform: translateX(2px) rotate(0deg);
  }
}

@keyframes hint-swipe {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(8px);
  }

  30% {
    transform: translateX(0);
  }
}

@keyframes hint-arrow {

  0%,
  100% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(4px);
  }

  30% {
    transform: translateX(0);
  }
}

/* Continue Button */
.ex-cta {
  width: 100%;
  padding: 16px 18px;
  border: none;
  border-radius: 14px;
  background: var(--primary-600);
  color: white;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 168, 139, .35);
  cursor: pointer;
  transition: all 0.2s;
}

.ex-cta:hover {
  background: var(--primary-700);
}

.ex-cta:active {
  transform: translateY(1px);
}

.ex-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#cryptoTrxConfirmButton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  overflow: hidden;
}

#cryptoTrxConfirmButton .button-label {
  transition: opacity 0.18s ease;
  visibility: visible;
}

#cryptoTrxConfirmButton.is-loading .button-label {
  opacity: 0;
  visibility: hidden;
}

#cryptoTrxConfirmButton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 0.2rem solid transparent;
  border-top-color: rgba(255, 255, 255, 0.85);
  border-right-color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.75);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

#cryptoTrxConfirmButton.is-loading::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: button-spinner 0.65s linear infinite;
}

#cryptoTrxConfirmButton.is-loading {
  opacity: 1;
  cursor: progress;
}

@keyframes button-spinner {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
  }
}

.ex-cta.ex-cta--ghost {
  background: transparent;
  color: var(--primary-600);
  border: 1px solid rgba(28, 169, 139, 0.35);
  box-shadow: none;
}

.ex-cta.ex-cta--ghost:hover {
  background: var(--primary-50);
}

.ex-cta.ex-cta--ghost:active {
  transform: translateY(0);
}

.ex-cta.ex-cta--ghost:disabled {
  background: transparent;
  color: var(--muted);
  border-color: var(--border);
}


/* ==================================================================================
   КОНЕЦ ФАЙЛА
   ================================================================================== */



.card-structured {
  position: relative;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--primary-600) 14%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.card-structured:hover,
.card-structured:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-500) 38%, transparent);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--primary-600) 20%, transparent);
}

.card-structured.selected {
  border-color: color-mix(in srgb, var(--primary-500) 58%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-500) 34%, transparent),
    0 22px 48px color-mix(in srgb, var(--primary-600) 26%, transparent);
}

.structured-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.structured-heading {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.structured-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
  color: color-mix(in srgb, var(--primary-600) 92%, #000);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.structured-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.structured-meta .country {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

.structured-meta .address {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

.structured-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  color: color-mix(in srgb, var(--text) 88%, #fff);
}

.status-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.status-chip.status-open {
  background: color-mix(in srgb, var(--primary-500) 24%, transparent);
  color: color-mix(in srgb, var(--primary-700) 85%, #000);
}

.status-chip.status-open::before {
  opacity: 0.9;
}

.status-chip.status-soon {
  background: color-mix(in srgb, var(--warning-400, #facc15) 26%, transparent);
  color: color-mix(in srgb, var(--warning-700, #854d0e) 90%, #000);
}

.status-chip.status-closed {
  background: color-mix(in srgb, var(--danger-500, #f87171) 20%, transparent);
  color: color-mix(in srgb, var(--danger-200, #fee2e2) 92%, #fff);
}

.structured-status .status-note {
  font-size: 12px;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
  text-align: right;
}

.structured-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
}

.structured-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.structured-section {
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.structured-section .section-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, transparent);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-600) 28%, transparent);
  background: color-mix(in srgb, var(--primary-500) 16%, transparent);
  color: color-mix(in srgb, var(--primary-300) 88%, #fff);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metrics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.metrics-list li {
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 14px;
  padding: 12px 14px;
}

.metrics-list li small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 93%, transparent);
}

.metrics-list li strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--text);
}

.schedule-details summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary-600) 32%, transparent);
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  color: color-mix(in srgb, var(--primary-200) 92%, #fff);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}

.summary-caret {
  display: inline-block;
  font-size: 12px;
  transition: transform 0.2s ease;
}

.schedule-details[open] .summary-caret {
  transform: rotate(180deg);
}

.schedule-details summary::-webkit-details-marker {
  display: none;
}

.schedule-details[open] summary {
  border-color: color-mix(in srgb, var(--primary-500) 46%, transparent);
  background: color-mix(in srgb, var(--primary-500) 18%, transparent);
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 12px;
}

.schedule-table tr {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.schedule-table th {
  text-align: left;
  padding: 6px 6px 6px 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 90%, transparent);
}

.schedule-table td {
  padding: 6px 0;
  color: var(--text);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.contact-link {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--primary-200) 92%, #fff);
}

.structured-actions {
  display: flex;
  justify-content: center;
}

.structured-actions .btn {
  width: 100%;
  max-width: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .card-structured {
    padding: 20px 18px;
  }

  .structured-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .structured-status {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .card-structured {
    border-radius: 16px;
    padding: 18px 16px;
    gap: 16px;
  }

  .structured-header {
    flex-direction: column;
    gap: 12px;
  }

  .structured-heading {
    gap: 10px;
  }

  .structured-actions .btn {
    font-size: 15px;
  }

  .structured-meta .address {
    font-size: 18px;
  }
}

@media (max-width: 520px) {
  .metrics-list {
    grid-template-columns: 1fr;
  }

  .metrics-list li {
    padding: 10px 12px;
  }

  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .contact-link {
    align-self: flex-start;
  }
}

/* ==================================================================================
   NEW OFFICE CARD DESIGN - Compact & Modern
   ================================================================================== */

/* Main office card container with clean compact design */
.office-card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(4, 40, 56, 0.08);
  border: 1px solid color-mix(in srgb, var(--primary-500) 25%, var(--border));
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.office-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary-600) 45%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--primary-600) 18%, transparent);
}

.office-card.selected {
  border-color: color-mix(in srgb, var(--primary-600) 60%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--primary-600) 35%, transparent),
    0 20px 40px color-mix(in srgb, var(--primary-600) 26%, transparent);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 90%, var(--primary-600) 10%) 0%,
      color-mix(in srgb, var(--card) 85%, var(--primary-600) 15%) 100%);
}

/* Office card header with icon and address */
.office-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.office-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-500) 15%, transparent);
  color: var(--primary-700);
  flex-shrink: 0;
}

.office-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: currentColor;
}

.office-kicker {
  font-size: 12px;
  color: var(--primary-700);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.office-title {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text);
  font-weight: 600;
}

/* Office status section with badge and next change info */
.office-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  gap: 12px;
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.badge .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.badge--open {
  background: color-mix(in srgb, var(--primary-500) 15%, transparent);
  color: var(--primary-700);
}

.badge--open .dot {
  background: var(--primary-600);
}

.badge--closed {
  background: rgba(239, 68, 68, 0.15);
  color: rgb(185, 28, 28);
}

.badge--closed .dot {
  background: rgb(239, 68, 68);
}

.badge--soon {
  background: rgba(251, 191, 36, 0.15);
  color: rgb(180, 83, 9);
}

.badge--soon .dot {
  background: rgb(251, 191, 36);
}

.next-change {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
}

.next-change svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}

/* Action row for map, phone, telegram buttons */
.action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 0;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary-500) 25%, var(--border));
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.action svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

.action:hover {
  border-color: var(--primary-600);
  background: color-mix(in srgb, var(--primary-500) 8%, var(--card));
}

.action.is-disabled,
.action[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* Timezone info */
.tz {
  margin-top: 0;
  font-size: 12px;
  color: var(--muted);
}

.tz b {
  color: var(--text);
  font-weight: 600;
}

/* Schedule section */
.schedule {
  margin-top: 0;
  background: color-mix(in srgb, var(--primary-500) 8%, var(--bg));
  border-radius: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary-500) 20%, var(--border));
}

.schedule summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
}

.schedule-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 8px;
  transition: background 0.2s ease;
}

.schedule-row.is-today {
  background: color-mix(in srgb, var(--primary-500) 15%, transparent);
  font-weight: 600;
}

/* Pills blocks for highlights and services */
.pill-block {
  margin-top: 0;
}

.pill-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--primary-500) 25%, var(--border));
  color: var(--text);
  white-space: nowrap;
}

.pill--soft {
  background: color-mix(in srgb, var(--primary-500) 12%, transparent);
  border-color: transparent;
  color: var(--primary-700);
}

/* CTA button */
.cta {
  margin-top: 2px;
}

.btn-select {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--primary-600);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--primary-600) 35%, transparent);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-select:hover:not(:disabled):not(.btn-select--disabled) {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--primary-600) 40%, transparent);
}

.btn-select:active:not(:disabled):not(.btn-select--disabled) {
  transform: scale(0.98);
}

.btn-select svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
}

/* Disabled state for closed offices */
.btn-select:disabled,
.btn-select.btn-select--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--muted) 60%, transparent);
  color: color-mix(in srgb, var(--text) 65%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--muted) 15%, transparent);
  transform: none;
}

.btn-select:disabled svg,
.btn-select.btn-select--disabled svg {
  stroke: color-mix(in srgb, var(--text) 65%, transparent);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .office-card {
    background: var(--card);
    border-color: color-mix(in srgb, var(--primary-500) 20%, var(--border));
  }

  .office-title {
    color: var(--text);
  }

  .action {
    background: var(--card);
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary-500) 22%, var(--border));
  }

  .tz {
    color: var(--muted);
  }

  .schedule {
    background: color-mix(in srgb, var(--primary-500) 6%, var(--bg));
    border-color: color-mix(in srgb, var(--primary-500) 18%, var(--border));
  }

  .pill {
    background: var(--card);
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary-500) 22%, var(--border));
  }

  .pill--soft {
    background: color-mix(in srgb, var(--primary-500) 10%, transparent);
    color: var(--primary-400);
  }

  .btn-select:disabled,
  .btn-select.btn-select--disabled {
    background: color-mix(in srgb, var(--muted) 40%, transparent);
    color: color-mix(in srgb, var(--text) 50%, transparent);
  }

  .btn-select:disabled svg,
  .btn-select.btn-select--disabled svg {
    stroke: color-mix(in srgb, var(--text) 50%, transparent);
  }
}

/* Responsive adjustments for office cards */
@media (max-width: 640px) {
  .action-row {
    grid-template-columns: 1fr;
  }

  .action {
    padding: 10px 12px;
  }

  .office-status {
    flex-direction: column;
    align-items: flex-start;
  }
}