:root {
  /* Основные фоны */
  --bg-main: #000000;          /* Глубокий черный фон */
  --bg-card: #121212;          /* Фон карточек (Smart Mode, поля ввода) */
  --bg-input: #1a1a1a;         /* Фон внутренних блоков */

  /* Текст */
  --text-primary: #ffffff;      /* Основные числа и заголовки */
  --text-secondary: #8a8a8e;    /* Подписи "Вы отправляете", "Доверие" */
  --text-blue: #45aeff;         /* Ссылки "Half", "Max", "0.5% slippage" */
  --text-balance: #007aff;

  /* Акценты и границы */
  --accent-blue: #007aff;       /* Цвет кнопки "Включить" */
  --border-color: #2c2c2e;      /* Разделители и границы */
  --border-radius: 8px;        /* Сильное скругление углов */
}


.swap-card {
  background-color: var(--bg-card);
  border-radius: var(--border-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.input-group {
  background-color: var(--bg-input);
  border-radius: 12px;
  padding: 12px;
}

.input-header {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  outline: none;
  width: 50%;
}

.btn-action {
  background-color: var(--text-primary); /* Белая кнопка как "Включить" */
  color: var(--bg-main);
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}

.btn-blue-text {
  color: var(--text-blue);
  background: transparent;
  border: none;
  font-size: 14px;
}

/* Общие настройки */
/* Основной контейнер */
.app-container {
    width: 100%;           /* На телефоне на всю ширину */
    max-width: 420px;      /* На ПК не шире обычного смартфона */
    margin: 0 auto;        /* Центрируем на большом экране */
    padding: 0 10px;
    box-sizing: border-box;
    transition: filter 0.2s ease;
}

.blurred {
    filter: blur(20px);
    pointer-events: none; /* Чтобы пользователь не мог нажимать кнопки сквозь блюр */
    user-select: none;    /* Чтобы нельзя было выделить текст */
}

/* Чтобы кнопки и блоки не вылезали за края */
* {
    box-sizing: border-box;
}

/* Олдскульный фикс для мобилок: убираем лишние отступы у body */
body {
    font-family: 'Inter', sans-serif;
        font-family: Harmony-Medium, sans-serif;
    background-color: #000;
    color: #fff;
    -webkit-tap-highlight-color: transparent; /* Убирает синий блик при клике на iOS */
}


.tnt-logo {
display: inline-block;
    font-family: "Times New Roman", Times, serif;
    font-size: 60px;
    font-weight: bold;
    font-style: italic;
    line-height: 1;
    color: #fff;
    user-select: none;
    letter-spacing: -6px;
    flex-wrap: nowrap;
    column-wrap: nowrap;
    text-wrap-mode: nowrap;
    filter: sepia(0.2) hue-rotate(23deg);
}

/* Левая T */
.t-left {
    position: relative;
    z-index: 1;
    color: green;
}

/* Средняя N — она меньше и приподнята */
.n-middle {
    /*font-size: 0.45em;      /* Делаем N меньше относительно T */
    position: relative;
    /*top: -0.18em;            /* Приподнимаем вверх */
    /*margin-left: -0.4em;   /* Накладываем на левую T */
    /*margin-right: -0.4em;   /* Подкладываем под правую T */
    z-index: 2;
    color:blue;
}

/* Правая T */
.t-right {
    position: relative;
    z-index: 3;
    color:red;
}


.smart-info {
    display: flex;
    align-items: center; /* Центрирует иконку и адрес по вертикали */
    gap: 8px;            /* Отступ между портфелем и буквами */
}

.icon {
    display: flex;
    align-items: center;
}

.wallet-address {
    font-family: 'Roboto Mono', monospace; /* Моноширинный адрес выглядит круче */
    font-size: 14px;
    font-weight: 700;
    color: #8e8e93;      /* Делаем адрес чуть тусклее, чтобы выделить кнопку */
}


.main-input {
    /* Для цифр используем жирный моноширинный шрифт */
    /*font-family: 'Roboto Mono', monospace;*/
    /*font-weight: 700;*/
    font-size: 32px; /* Делаем цифры крупнее */
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    text-wrap-mode: nowrap;
}

.btn-submit {
    font-family: 'Inter', sans-serif;
    font-weight: 700; /* Плотная кнопка */
    text-transform: uppercase; /* Олдскульный капс */
    letter-spacing: 1px;
}


/* Баннер Smart Mode */
.smart-mode-banner {
    border-radius: 16px;
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.btn-enable {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 20px;
    padding: 6px 14px;
    font-weight: bold;
    cursor: pointer;
}


.input-block {
    background: #1c1c1e;
    border-radius: var(--border-radius);
    padding: 16px;
    margin-bottom: 4px;
}

.label-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8e8e93;
    margin-bottom: 12px;
}

.blue-text {
    color: #007aff;
    cursor: pointer;
}

.amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-input {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 28px;
    /*font-weight: bold;*/
    width: 60%;
    outline: none;
}

/* Выбор токена */
.token-selector {
    background: #393939;
    border-radius: var(--border-radius);
    padding: 6px 12px 6px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}


.token-icon { font-size: 18px; }

.token-name {
    font-family: 'Inter', sans-serif; /* Или твой основной шрифт */
    font-weight: 800;             /* Очень жирный (Extra Bold) */
    letter-spacing: 0.8px;        /* Увеличиваем расстояние между буквами */
    text-transform: uppercase;    /* Олдскульный прием: заглавные буквы смотрятся солиднее */
    font-size: 14px;              /* Подбери под свой макет */
    color: #ffffff;
    display: inline-block;        /* Чтобы отступы и размеры работали корректно */
    vertical-align: middle;       /* Выравнивание по центру относительно иконки */
}



.arrow {
    font-weight: 900;
    margin-left: 4px;
    color: #8e8e93; /* Твой вторичный серый цвет */
    font-size: 20px; /* Можно сделать чуть больше текста */
    line-height: 1;
 }

.sub-text {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 8px;
    display: flex;
    justify-content: left;
    gap: 10px;
}

/* Разделитель (кружок со стрелками) */
.divider {
    height: 0;
    position: relative;
    display: flex;
    justify-content: right;
    padding-right: 10%;
    align-items: center;
    z-index: 2;
}

.divider-circle {
    background: #1c1c1e;
    border: 3px solid var(--bg-card);
    width: 46px;
    height: 34px;
    border-radius: 8px;

    display: flex;
    justify-content: center;
    align-items: center; /* Центрирует по вертикали строго */

    font-family: Arial, sans-serif;
    /*font-weight: 900;*/
    font-size: 11px;
    line-height: 1; /* Убирает лишнее пространство вокруг символа */
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s;

    /* Если стрелки визуально всё равно кажутся чуть выше (оптическая иллюзия) */
    /*padding-top: 2px;*/
}


.divider-circle:active {
    transform: scale(0.9); /* Анимация нажатия */
}


/* Главная кнопка */
.btn-submit {
    width: 100%;
    background: #2c2c2e;
    color: #8e8e93;
    border: none;
    border-radius: var(--border-radius);
    padding: 18px;
    font-size: 14px;
    font-weight: bold;
    margin-top: 12px;
    cursor: not-allowed;
    display: flex;
    justify-content: center;
}


.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон */
    display: none; /* Скрыто по умолчанию */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background: rgba(28, 28, 30, 0.8); /* Темный фон карточки */
    backdrop-filter: blur(15px); /* Размытие самого окна */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 24px;
    width: 300px;
    text-align: center;
    color: white;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.modal-header {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 16px;
}

.modal-body {
    font-size: 15px;
    color: #8e8e93;
    line-height: 1.4;
    margin-bottom: 24px;
}

.modal-footer {
    display: flex;
    gap: 12px;
}

/* Кнопки в стиле iOS/Telegram */
.modal-footer button {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-confirm {
    background: #007aff; /* Синий цвет как в TON/iOS */
    color: white;
}

.btn-confirm:active, .btn-cancel:active {
    opacity: 0.7;
}


.token-list-container {
    max-height: 300px;
    overflow-y: auto;
    margin-top: 10px;
}

.token-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.2s;
}

.token-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

.token-info {
    text-align: left;
}

.token-symbol {
    font-weight: 600;
    color: white;
}

.token-addr {
    font-size: 10px;
    color: #8e8e93;
}

.token-balance {
    font-weight: 500;
    color: var(--text-balance); /* Выделяем баланс цветом */
}

.swap-arrow {
    display: flex;
    filter: sepia(0.2) hue-rotate(23deg);
    align-items: center;
}