:root {
    /* Импортируем переменные из header.css */
    --color-bg-primary: #111827;
    --color-bg-secondary: #1F2937;
    --color-text-light: #FFFFFF;
    --color-text-medium: #D1D5DB;
    --color-text-dark: #9CA3AF;
    --color-accent-blue-light: #60A5FA;
    --color-accent-blue-medium: #3B82F6;
    --color-accent-blue-dark: #2563EB;
    --color-accent-purple: #8B5CF6;
    --color-border-subtle: #374151;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;
    --transition-fast: all 0.15s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
    --success-color: #10B981; /* Tailwind green-500 */
    --error-color: #EF4444; /* Tailwind red-500 */
    --color-cta-blue-light: #2563EB;
    --color-cta-blue-dark: #1D4ED8;
    --shadow-cta: 0 4px 6px rgba(37, 99, 235, 0.3);
    --shadow-cta-hover: 0 7px 14px rgba(37, 99, 235, 0.4);
    --gradient-cta: linear-gradient(to right, var(--color-cta-blue-light), var(--color-cta-blue-dark));
}

/* Единый фон для страницы (перекрывает любые фоновые цвета из глобальных стилей) */
/* html, body { background: transparent !important; } */
/* body::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom right, #111827, #0f172a 55%, #1f2937);
} */

/* Доп. стили для новой разметки (карточки в стиле сайта) */
.glass {
    backdrop-filter: blur(6px);
    background-color: rgba(17,24,39,0.55);
}
/* На странице подключений растягиваем карточки на всю доступную ширину контейнера */
#exchange-settings-widget .glass { width: 100%; box-sizing: border-box; }
/* Гарантируем, что секции внутри main занимают всю ширину контейнера */
#exchange-settings-widget main { width: 100%; }
#exchange-settings-widget main > section { width: 100%; }
/* Двойной прозрачный слой внутри карточек не должен выходить за край */
#exchange-settings-widget .glass { max-width: 100%; overflow: hidden; }
.card-shadow {
    box-shadow: var(--shadow-xl);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Segoe UI Mono", monospace; }

/* Бейдж с иконкой EX в цветах темы */
.ex-badge {
    background: radial-gradient(120% 120% at 0% 0%, #0EA5E9 0%, #2563EB 45%, #1F2937 100%);
    border: 1px solid rgba(59,130,246,0.45);
    box-shadow: 0 12px 28px rgba(37,99,235,0.35), inset 0 0 18px rgba(14,165,233,0.25);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}

.ex-badge img.exchangeLogo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
}

/* Приводим tailwind-поля к палитре сайта */
select#walletSelect,
select#exchangeSelect,
select#networkSelect,
input#apiKey,
input#apiSecret,
input#apiPassword,
button#saveBtn,
button#testBtn {
    border-color: var(--color-border-subtle);
}

/* Кнопки */
button#saveBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.8rem 1.2rem;
    background: var(--gradient-cta);
    color: #FFFFFF;
    font-weight: 600;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-cta);
    position: relative;
    overflow: hidden;
    outline: none;
    font-size: 1rem;
}

button#saveBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}

button#saveBtn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-cta-hover);
}

button#saveBtn:hover::before {
    left: 100%;
}

button#saveBtn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-cta);
}

button#testBtn {
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
    position: relative;
    overflow: hidden;
}
button#testBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}
button#testBtn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); filter: none; }
button#testBtn:hover::before {
    left: 100%;
}
button#testBtn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Хлебные уведомления */
.toast { box-shadow: var(--shadow-md); border: 1px solid var(--color-border-subtle); }

/* Анимация для кнопок в карточках */
.btn-test, .btn-edit, .btn-delete {
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.btn-test::before, .btn-edit::before, .btn-delete::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: 0.5s;
}
.btn-test:hover, .btn-edit:hover, .btn-delete:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); filter: none; }
.btn-test:hover::before, .btn-edit:hover::before, .btn-delete:hover::before {
    left: 100%;
}
.btn-test:active, .btn-edit:active, .btn-delete:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

/* Иконка-глаз: аккуратный hover */
.eye-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.eye-toggle:hover { color: var(--color-text-light); }

/* Фиксированное положение иконки "глаз" внутри поля: по правому краю и строго внутри по вертикали */
#exchange-settings-widget #toggleSecret {
    position: absolute !important;
    right: 0.75rem; /* стабильный правый отступ */
    top: 0 !important;             /* растягиваем контейнер по высоте поля */
    bottom: 0 !important;
    transform: none !important;    /* убираем translate, чтобы не вылезал на крупных масштабах */
    width: 2.5rem;                  /* ~40px: предсказуемая зона клика справа */
    height: auto;                   /* совпадает с высотой родителя (инпута) */
    display: flex; align-items: center; justify-content: center;
    z-index: 3; /* над полем */
}

/* Маска под иконкой: перекрывает точки пароля за иконкой на любых масштабах */
#exchange-settings-widget #toggleSecret::before {
    content: "";
    position: absolute;
    top: 50%; right: -0.25rem;
    transform: translateY(-50%);
    width: 3.5rem;                 /* шире самой кнопки, чтобы перекрыть крайние точки */
    height: 70%;                    /* овальная маска */
    background: var(--color-bg-secondary);
    border-radius: 9999px;
    z-index: -1;                    /* ниже иконки, но в слое кнопки — над вводом */
    pointer-events: none;
}

@media (max-width: 768px) {
    #exchange-settings-widget #toggleSecret {
        right: 0.75rem; /* тот же базовый отступ для стабильности на зуме */
        width: 2.75rem; /* немного шире зона клика на узких экранах */
        height: auto;
    }
}

@media (max-width: 768px) {
    .mobile-header-offset {
        margin-top: 88px;
    }
}

/* Не допускаем пересечения текста с иконкой "глаз" в поле API Secret */
#exchange-settings-widget #apiSecret {
    padding-right: 3.25rem; /* компактный отступ; маска под иконкой скрывает крайние точки */
}

/* Увеличиваем зону справа на мобильных, чтобы текст не заходил на иконку */
@media (max-width: 768px) {
    #exchange-settings-widget #apiSecret {
        padding-right: 3.75rem; /* немного больше на узких экранах */
    }
}

/* Модальное подтверждение (в стиле страницы) */
.ex-modal-overlay {
    position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
    z-index: 10000; opacity: 1; transition: opacity .15s ease;
}
.ex-modal-overlay.hide { opacity: 0; }
.ex-modal-card {
    width: 100%; max-width: 440px; margin: 0 16px;
    background: linear-gradient(180deg, var(--color-bg-secondary), #0f172a);
    border: 1px solid var(--color-border-subtle);
    border-radius: 16px; padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    color: var(--color-text-light);
}
.ex-modal-title { display: flex; align-items: center; font-weight: 700; font-size: 1.05rem; color: var(--color-text-light); margin-bottom: 8px; }
.ex-modal-message { color: var(--color-text-medium); font-size: .95rem; margin-bottom: 16px; }
.ex-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

.ex-btn-outline {
    padding: 10px 14px; border-radius: 10px; border: 1px solid var(--color-border-subtle);
    background: transparent; color: var(--color-text-medium); cursor: pointer; transition: var(--transition-fast);
}
.ex-btn-outline:hover { color: var(--color-text-light); background: rgba(255,255,255,0.04); }

.ex-btn-danger {
    padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(239,68,68,0.85);
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: #fff; cursor: pointer; box-shadow: 0 10px 26px rgba(239,68,68,.28);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.ex-btn-danger:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 12px 30px rgba(239,68,68,.34); }
.ex-btn-danger:active { transform: translateY(0); }

/* Skeletons for lazy loading list */
.skeleton-card { position: relative; overflow: hidden; }
.skeleton-box { background: linear-gradient(180deg, #0f172a, #111827); border: 1px solid var(--color-border-subtle); }
.skeleton-line { background: #0f172a; border-radius: 6px; opacity: 0.9; }
.skeleton-pill { background: #0f172a; border-radius: 9999px; width: 90px; }
.skeleton-card::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
  animation: skeleton-shine 1.2s infinite;
}
@keyframes skeleton-shine { 100% { transform: translateX(100%); } }

/* Подавление автозаполнения браузером для ключевых полей */
input[name="api_secret"]::-ms-reveal,
input[name="api_secret"]::-ms-clear { display: none; }
input[name="api_key"]:-webkit-autofill,
input[name="api_secret"]:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text-light);
    box-shadow: 0 0 0px 1000px var(--color-bg-secondary) inset !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--color-bg-secondary) inset !important;
}

/* Обновляем body, чтобы он не переопределял основной фон темы */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Удаляем градиент фона, чтобы основной фон темы был виден */
    /* background: linear-gradient(to bottom right, #f8faff, #f0f4f8); */
    min-height: 100vh;
}

/* Основной виджет, который будет "сливаться" с фоном профиля */
.exchange-settings-widget {
    background: transparent !important; /* не перекрывать общий фон */
    font-family: 'Inter', sans-serif;
    color: var(--color-text-light);
    line-height: 1.6;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* padding: 0 2.5rem 2.5rem 2.5rem; */ /* Изменено: убран padding-top */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    border-radius: var(--radius-xl);
    box-shadow: none;
    border: none;

    overflow-x: hidden; /* не даём появиться горизонтальному скроллу */
}

@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: -0.02em;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid var(--color-border-subtle);
}

/* Информационные блоки (О подключении бирж, Как получить API ключи?) */
.description-block, .faq-info-block {
    background-color: var(--color-bg-primary);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--color-border-subtle);
    width: 100%;
    max-width: 100%; /* растягиваем информационные блоки на всю ширину виджета */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: var(--color-text-light);
}

.description-block .description-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    color: var(--color-accent-blue-light);
    padding-top: 0.25rem;
}

.description-icon-wrapper i {
    font-size: 2rem;
}

.faq-info-block .info-icon-wrapper {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    color: var(--color-accent-blue-light);
    padding-top: 0.25rem;
}

.info-icon-wrapper i {
    font-size: 2rem;
}

.description-text-content, .info-text-content {
    flex-grow: 1;
}

.description-block h3, .faq-info-block h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}
.description-block p, .faq-info-block p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-medium);
    margin-bottom: 0.8rem;
}
.description-block p:last-child, .faq-info-block p:last-child {
    margin-bottom: 0;
}

.faq-info-block a {
    color: var(--color-accent-blue-light);
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition-fast);
}
.faq-info-block a:hover {
    color: var(--color-accent-blue-medium);
}

/* Основной раздел настроек бирж (содержит форму и список) */
.exchange-settings {
    display: grid;
    grid-template-columns: 1fr; /* по умолчанию одна колонка */
    gap: 2rem;
    margin-top: 32px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    align-items: stretch; /* растягиваем элементы по высоте строки */
}

/* Улучшаем визуальные пропорции колонок и отступов */
.exchange-form { min-height: 100%; }
.exchange-list { min-height: 100%; }

.settings-section {
    width: 100%;
}

/* Для маленьких экранов оставляем одну колонку */
@media (max-width: 767px) {
    .exchange-settings { grid-template-columns: 1fr; }
}

/* С 640px используем две колонки для размещения форм рядом */
@media (min-width: 640px) {
    .exchange-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Дополнительное усиление для ширины >= 1024px */
@media (min-width: 1024px) {
  .exchange-settings { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* Добавим выравнивание для карточек */
.exchange-form, .exchange-list {
    background-color: var(--color-bg-primary);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100%; /* тянуться, чтобы карточки были одинаковой высоты */
    min-height: 100%;
    box-sizing: border-box; /* Учитываем padding в высоте */
    min-width: 0; /* Позволяет грид-детям становиться в одну строку без переполнения */
    width: 100%;
}

/* Принудительно растягиваем обе карточки до одинаковой высоты строки грида */
.exchange-settings > .exchange-form,
.exchange-settings > .exchange-list {
    align-self: stretch;
}

.form-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-title i {
    font-size: 24px;
    color: var(--color-accent-blue-light);
}

.input-group {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-medium);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
}

.input-group .relative.group .ph-info {
    color: var(--color-text-dark);
    transition: color 0.2s ease-in-out;
}

.input-group .relative.group:hover .ph-info {
    color: var(--color-text-light);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--color-text-light);
    background-color: var(--color-bg-secondary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
    border-color: var(--color-accent-blue-medium);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.2), 0 0 8px rgba(79, 140, 255, 0.2);
}

.form-input:disabled {
    background-color: var(--color-border-subtle);
    cursor: not-allowed;
    color: var(--color-text-dark);
}

.select-wrapper {
    position: relative;
}

.select-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
}

.select-wrapper .ph-caret-down {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-medium);
}

/* Tooltips */
.tooltip-text {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-bg-primary);
    color: var(--color-text-light);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out, transform 0.3s ease-out;
    z-index: 20;
    pointer-events: none;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-subtle);
}

.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: var(--color-bg-primary) transparent transparent transparent;
}

.input-group .relative.group:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Показ подсказки для статуса биржи при наведении */
.status-tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Универсальные контейнеры с подсказками */
.has-tooltip { position: relative; }
.has-tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Разрешаем всплывать подсказкам поверх карточек со спрятанным оверфлоу */
#cards .glass {
    overflow: visible;
}

/* Подсказка статуса поверх всех блоков (включая оверлеи) */
.status-tooltip .tooltip-text {
    z-index: 1000000;
}

/* Поверх всех блоков и для универсальных контейнеров */
.has-tooltip .tooltip-text {
    z-index: 1000000;
}

/* Разрешаем видимость подсказок в секциях (форма/список) */
#exchange-settings-widget > main > section.glass {
    overflow: visible;
}

/* Повышаем слой формы добавления, чтобы её подсказки не перекрывались соседними колонками */
#addForm { position: relative; }
#addForm .tooltip-text { z-index: 1000000; }

/* Поднимаем всю левую секцию (с формой) над правой колонкой для корректного наложения тултипов */
#exchange-settings-widget > main > section.glass:first-of-type {
    /* Этот блок может конфликтовать */
    z-index: 10;
}

/* Снижаем z-index для формы добавления/обновления на мобильных */
@media (max-width: 768px) {
  #exchange-settings-widget > main > section.glass:first-of-type {
    position: relative;
    z-index: 9; /* Снижаем приоритет для мобильных устройств */
  }
}

/* Добавляем z-index для формы добавления/обновления в мобильной версии */
@media (max-width: 768px) {
  section.lg\:col-span-1.glass.rounded-2xl.p-6.card-shadow.border.border-gray-700 {
    position: relative;
    z-index: 9; /* Снижаем приоритет для мобильных устройств */
  }
}

/* Мобильная адаптация тултипов: перенос строк, ограничение ширины и корректная видимость */
@media (max-width: 768px) {
    .status-tooltip .tooltip-text,
    .has-tooltip .tooltip-text {
        max-width: 90vw;
        white-space: normal;
        line-height: 1.35;
        padding: 0.6rem 0.8rem;
        font-size: 0.8125rem;
        transform: translateX(-50%) translateY(-5px);
        left: 50%;
    }
    /* На очень узких экранах прячем стрелку, чтобы не обрезалась */
    .status-tooltip .tooltip-text::after,
    .has-tooltip .tooltip-text::after {
        display: none;
    }
}

/* Buttons */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    white-space: nowrap;
    background: linear-gradient(90deg, var(--color-accent-blue-medium) 0%, var(--color-accent-blue-dark) 100%);
    color: var(--color-text-light);
    box-shadow: 0 4px 12px rgba(79,140,255,0.2);
    width: 100%;
}

.btn-primary i {
    font-size: 20px;
    margin-right: 0.5rem;
}

.btn-primary:hover:not(:disabled) {
    background: linear-gradient(90deg, var(--color-accent-blue-dark) 0%, var(--color-accent-blue-medium) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(79,140,255,0.3);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-primary:focus:not(:disabled) {
    outline: none;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.2) inset;
}

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition-fast);
    cursor: pointer;
    background-color: var(--color-bg-secondary);
    color: var(--color-text-medium);
    border: 1px solid var(--color-border-subtle);
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}

.btn-secondary i {
    font-size: 20px;
    margin-right: 0.5rem;
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-border-subtle);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-light);
}

.btn-secondary:focus:not(:disabled) {
    outline: none;
    box-shadow: 0 0 0 4px rgba(160, 174, 192, 0.3);
}

.btn-secondary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) inset;
}

.spinner {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: conic-gradient(
        from 0turn,
        var(--color-accent-blue-light),
        var(--color-accent-purple),
        var(--color-accent-blue-light)
    );
    /* вырезаем внутренний круг, оставляя кольцо толщиной 3px */
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
            mask: radial-gradient(farthest-side, #0000 calc(100% - 3px), #000 0);
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.exchange-list {
    background-color: var(--color-bg-primary);
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border-subtle);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* не позволяем внутренним двойным блокам выходить за края */
}

.exchange-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-subtle);
}

/* Бейдж количества подключений справа от заголовка */
.exchange-list-header .status-indicator {
    background-color: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.exchange-list-header h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.exchange-list-header h3 i {
    font-size: 24px;
    color: var(--color-accent-purple);
}

.status-indicator {
    padding: 0.4rem 0.8rem;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-weight: 600;
    color: var(--color-accent-purple);
    font-size: 0.9rem;
}

.status-indicator span#connectedCount {
    color: var(--color-accent-purple);
}

#exchangeList {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: none; /* Убираем фиксированную высоту */
    overflow-y: auto;
    padding-right: 0; /* чтобы карточки не сужались визуально справа */
    flex-grow: 1; /* Займет все доступное пространство */
}

#exchangeList::-webkit-scrollbar {
    width: 8px;
}

#exchangeList::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
    border-radius: 10px;
}

#exchangeList::-webkit-scrollbar-thumb {
    background: var(--color-border-subtle);
    border-radius: 10px;
}

#exchangeList::-webkit-scrollbar-thumb:hover {
    background: #4B5563;
}

.exchange-item {
    display: grid; /* сетка для идеального выравнивания */
    grid-template-columns: 1fr auto; /* инфо слева, действия справа */
    align-items: center;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-subtle);
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-fast);
    column-gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.exchange-item .ph {
    opacity: 0.9;
}

 .exchange-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent-blue-medium);
    background-color: #2D3A4B;
}

/* Внутренняя карточка должна растягиваться по ширине контейнера-обертки */
.exchange-item > .glass { width: 100%; box-sizing: border-box; }

.exchange-info {
    display: grid;
    grid-template-columns: 32px 1fr; /* фиксированная колонка под логотип */
    align-items: center;
    column-gap: 12px;
}

.exchange-text {
    min-width: 0; /* чтобы работал ellipsis внутри small */
}

.exchange-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: contain;
    background-color: var(--color-bg-primary);
    padding: 4px;
    border: 1px solid var(--color-border-subtle);
    flex-shrink: 0;
}
.exchange-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.exchange-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-text-medium);
}
.exchange-actions button:hover {
    background-color: rgba(255,255,255,0.08);
    color: var(--color-text-light);
}

.exchange-text h4 {
    letter-spacing: 0.3px;
}

.exchange-text h4 {
    font-weight: 600;
    color: var(--color-text-light);
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.exchange-text small {
    font-size: 0.8rem;
    color: var(--color-text-medium);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-btn {
    display: inline-flex;
    align-items: center;
    background-color: var(--error-color);
    color: var(--color-text-light);
    border: 1px solid var(--error-color);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-fast);
}

.delete-btn:hover {
    background-color: #e03838;
    color: white;
    border-color: #e03838;
}

.delete-btn i {
    font-size: 1rem;
    margin-right: 0.5rem;
}

/* No exchanges message */
.exchange-item.text-gray-500.italic {
    text-align: center;
    color: var(--color-text-dark);
    font-style: italic;
    padding: 20px;
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}


/* Notification styles */
.notification {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--color-text-light);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    box-shadow: var(--shadow-md);
    z-index: 1000;
}

.notification.visible {
    opacity: 1;
    transform: translateY(0);
}

.notification.success {
    background-color: var(--success-color);
}

.notification.error {
    background-color: var(--error-color);
}

.notification.info {
    background-color: var(--color-accent-blue-medium);
}

.notification i {
    font-size: 1.25rem;
}

/* Styles for custom confirm dialog */
.fixed.inset-0.bg-gray-900.bg-opacity-75 {
    background-color: rgba(17, 24, 39, 0.75);
    transition: opacity 0.3s ease-out;
    opacity: 1;
}
.fixed.inset-0.bg-gray-900.bg-opacity-75.hidden {
    opacity: 0;
    pointer-events: none;
}
.bg-white.p-6.rounded-lg.shadow-xl {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-light);
    border: 1px solid var(--color-border-subtle);
    animation: popIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.bg-white.p-6.rounded-lg.shadow-xl .text-lg.font-semibold.text-gray-800 {
    color: var(--color-text-light);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Адаптивность - пересматриваем, чтобы Tailwind классы в HTML работали корректно */
/* Некоторые правила из старого адаптива могут быть избыточны или конфликтовать с Tailwind классами */
@media (max-width: 1023px) {
  .exchange-settings {
    gap: 15px;
  }
  .exchange-form, .exchange-list {
    /* flex: 1 1 100%; */
    /* max-width: 100%; */
    padding: 18px 15px;
  }
  
  /* Container for exchange settings */
  .exchange-settings {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* Adjust buttons to stack vertically on smaller screens */
  .flex.flex-col.sm\:flex-row.gap-4.mt-6 {
    flex-direction: column;
    gap: 1rem; /* Adjust gap for stacked buttons */
  }

  .btn-primary, .btn-secondary {
    width: 100%; /* Make buttons full width */
  }

  .description-block, .faq-info-block {
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center items when stacked */
    text-align: center;
  }

  .description-block .description-icon-wrapper, .faq-info-block .info-icon-wrapper {
    margin-bottom: 0.5rem; /* Add some space below icons */
  }
}

@media (max-width: 768px) {
  .exchange-settings-widget {
    padding: 1.25rem 1rem; /* как на арбитраже: меньше горизонтальные отступы */
    width: 100%; /* Full width like arbitrage page */
  }

  header { /* Добавляем z-index для заголовка */
    position: relative;
    z-index: 100; /* Увеличено для гарантированного приоритета на мобильных */
  }

  .section-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .description-block, .faq-info-block {
    padding: 1rem;
    font-size: 0.875rem;
  }

  .description-block h3, .faq-info-block h3 {
    font-size: 1.1rem;
  }

  .exchange-form, .exchange-list {
    padding: 1.5rem;
  }
  /* На мобильных уменьшаем внутренние отступы списков и убираем правый padding у контейнера карт */
  #exchange-settings-widget .exchange-list { width: 100%; margin-left: 0; margin-right: 0; }
  #exchange-settings-widget #cards { padding-right: 0; }

  .form-title, .exchange-list-header h3 {
    font-size: 1.2rem;
  }

  .input-group label {
    font-size: 0.85rem;
  }

  .form-input {
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }

  .btn-primary, .btn-secondary {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  .exchange-item {
    flex-direction: column; /* Stack info and delete button */
    align-items: flex-start; /* Align stacked items to start */
    padding: 1rem;
    gap: 0.5rem;
    width: 100%;
  }

  .delete-btn {
    width: 100%; /* Make delete button full width */
    justify-content: center; /* Center content of delete button */
    margin-top: 0.5rem; /* Space between info and delete button */
  }

  .exchange-info {
    width: 100%;
    justify-content: center; /* Center exchange logo and text */
    text-align: center;
    margin-bottom: 0.5rem;
  }
  .exchange-text {
    width: 100%;
  }

  /* Мобильные правки формы подключений по аналогии с arbitrage_settings */
  #exchange-settings-widget #addForm .flex.gap-3 {
    flex-direction: column;
    gap: 0.8rem;
  }
  #exchange-settings-widget #addForm select,
  #exchange-settings-widget #addForm input {
    width: 100%;
    max-width: none; /* не сужаем поле на высоких масштабах */
    margin-left: 0;
    margin-right: 0;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }
  /* Выровнять контейнер с иконкой глаза по ширине инпута */
  #exchange-settings-widget #addForm .relative {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  #exchange-settings-widget #addForm #saveBtn,
  #exchange-settings-widget #addForm #testBtn {
    width: 100%;
    max-width: none; /* ширина кнопок = ширина контейнера */
    margin-left: 0;
    margin-right: 0;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }

  /* Кнопки действий в карточке подключений на одной линии на мобильных */
  #exchange-settings-widget #cards .glass .flex.items-center.gap-2 {
    flex-wrap: nowrap;
    width: 100%;
    gap: 0.5rem;
    justify-content: flex-start;
  }
  #exchange-settings-widget #cards .glass .flex.items-center.gap-2 > .has-tooltip {
    flex: 0 0 auto; /* не тянуться и не переноситься */
  }
  #exchange-settings-widget #cards .glass .btn-test,
  #exchange-settings-widget #cards .glass .btn-edit,
  #exchange-settings-widget #cards .glass .btn-delete {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .exchange-settings-widget {
    padding: 1rem; /* Reduced padding for very small screens */
    width: 100%; /* Full width on smallest screens */
    border-radius: 0; /* Remove border-radius on smallest screens for edge-to-edge content */
    box-shadow: none; /* Remove shadow on smallest screens */
    border: none; /* Remove border on smallest screens */
  }

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }

  .description-block, .faq-info-block {
    padding: 0.8rem;
    margin-bottom: 1rem;
    font-size: 0.8rem;
  }

  .description-block h3, .faq-info-block h3 {
    font-size: 1rem;
  }

  .exchange-form, .exchange-list {
    padding: 1rem;
    gap: 1rem;
  }

  .form-title, .exchange-list-header h3 {
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
  }

  .input-group {
    margin-bottom: 0.8rem;
    gap: 6px;
  }

  .input-group label {
    font-size: 0.75rem;
  }

  .form-input {
    font-size: 0.8rem;
    padding: 0.5rem 0.6rem;
  }

  .flex.flex-col.sm\:flex-row.gap-4.mt-6 {
    gap: 0.8rem;
  }

  .btn-primary, .btn-secondary {
    padding: 0.6rem 0.8rem;
    font-size: 0.8rem;
    min-width: unset;
  }

  /* Ещё компактнее форма: центрирование и ограничения ширины */
  #exchange-settings-widget #addForm select,
  #exchange-settings-widget #addForm input,
  #exchange-settings-widget #addForm #saveBtn,
  #exchange-settings-widget #addForm #testBtn {
    max-width: none; /* не ограничивать ширину на сверхузких экранах */
    width: 100%;
  }
  /* Синхронизируем ширину обёртки для иконки глаза на сверхузких экранах */
  #exchange-settings-widget #addForm .relative {
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Ещё компактнее: кнопки действий в карточке */
  #exchange-settings-widget #cards .glass .flex.items-center.gap-2 > button {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    font-size: 0.8rem;
  }
  #exchange-settings-widget #cards .glass .btn-delete {
    flex-basis: 100%;
  }

  .exchange-list-header {
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
  }

  #exchangeList {
    gap: 10px;
  }

  .exchange-item {
    padding: 0.8rem;
  }

  .exchange-logo {
    width: 28px;
    height: 28px;
    padding: 3px;
  }

  .exchange-text h4 {
    font-size: 0.9rem;
  }

  .exchange-text small {
    font-size: 0.7rem;
  }

  .delete-btn {
    padding: 5px 10px;
    font-size: 0.7rem;
  }

  .notification {
    bottom: 1rem;
    right: 1rem;
    padding: 0.6rem 1rem;
    font-size: 0.7rem;
    gap: 0.6rem;
  }
}