/* ===== ОСНОВНЫЕ СТИЛИ ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== СВЕТЛАЯ ТЕМА - ФИОЛЕТОВАЯ (по умолчанию) ===== */
:root {
    --bg-primary: #f5f3ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #ede9fe;
    --text-primary: #1e1b4b;
    --text-secondary: #6366f1;
    --text-muted: #8b5cf6;
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --border-color: #ddd6fe;
    --shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    --shadow-lg: 0 4px 16px rgba(99, 102, 241, 0.15);
    /* Переключатели: всегда отличимы от фона карточки */
    --switch-track-off: #ddd6fe;
    --switch-track-border: #c4b5fd;
    --switch-knob-off: #ffffff;
    --switch-knob-shadow: 0 1px 4px rgba(30, 27, 75, 0.18);
}

/* ===== Mini app loader ===== */
body.app-booting .content-area {
    visibility: hidden;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

[data-theme="light"] .app-loader {
    background: rgba(255, 255, 255, 0.55);
}

.app-loader-card {
    width: min(360px, 100%);
    border-radius: 16px;
    padding: 16px 16px 14px;
    background: rgba(26, 26, 26, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    text-align: center;
}

[data-theme="light"] .app-loader-card {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.88);
}

.app-loader-spinner {
    position: relative;
    width: 46px;
    height: 46px;
    margin: 2px auto 10px;
    border-radius: 999px;
    background-color: #0b0b0c;
    background-image: image-set(
        url("/static/loader-logo.webp?v=2") type("image/webp"),
        url("/static/loader-logo.jpg?v=2") type("image/jpeg")
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.app-loader-spinner::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 199, 72, 0.95);
    border-right-color: rgba(255, 199, 72, 0.35);
    border-left-color: rgba(255, 255, 255, 0.08);
    animation: app_loader_spin 0.95s linear infinite;
}

[data-theme="light"] .app-loader-spinner {
    /* Важно: НЕ использовать shorthand background — он сбрасывает background-image (логотип). */
    background-color: #ffffff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06) inset;
}

[data-theme="light"] .app-loader-spinner::after {
    border: 3px solid rgba(0, 0, 0, 0.12);
    border-top-color: rgba(17, 17, 17, 0.78);
    border-right-color: rgba(17, 17, 17, 0.32);
    border-left-color: rgba(0, 0, 0, 0.06);
}

.app-loader-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}

.app-loader-progress {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
    margin: 4px 0 6px;
}

[data-theme="light"] .app-loader-progress {
    background: rgba(0, 0, 0, 0.08);
}

.app-loader-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 199, 72, 0.85), rgba(255, 170, 40, 0.95));
    transition: width 0.35s ease;
}

.app-loader-pct {
    font-size: 12px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 4px;
}

.app-loader-sub {
    font-size: 12px;
    opacity: 0.8;
    line-height: 1.3;
}

@keyframes app_loader_spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== Browser auth gate (/app без сессии) ===== */
body.auth-locked .app-container {
    display: none !important;
}

body.is-telegram-webapp .auth-gate,
body.tg-web-app .auth-gate {
    display: none !important;
}

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--bg-primary, #1a1a1a);
}

[data-theme="light"] .auth-gate {
    background: var(--bg-primary, #f5f5f7);
}

.auth-gate-card {
    width: min(400px, 100%);
    padding: 28px 22px;
    border-radius: 18px;
    text-align: center;
    background: var(--card-bg, rgba(30, 30, 30, 0.95));
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

[data-theme="light"] .auth-gate-card {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.08);
}

.auth-gate-logo {
    border-radius: 50%;
    margin-bottom: 12px;
    object-fit: cover;
    border: 2px solid color-mix(in srgb, var(--accent-primary) 45%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.auth-gate-title {
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 8px;
}

.auth-gate-sub {
    font-size: 13px;
    opacity: 0.78;
    line-height: 1.45;
    margin-bottom: 18px;
}

.auth-gate-widget {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.auth-gate-home {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #8b5cf6);
    text-decoration: none;
}

.auth-gate-home:hover {
    text-decoration: underline;
}

/* ===== PIN lock ===== */
.pin-lock {
    position: fixed;
    inset: 0;
    z-index: 10000;
    /* iOS/Telegram: fixed + keyboard can shift; use dynamic viewport units */
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.58);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
}

[data-theme="light"] .pin-lock {
    /* на белом фоне blur незаметен — делаем лёгкое затемнение */
    background: rgba(0, 0, 0, 0.38);
}

.pin-lock-card {
    width: min(360px, 100%);
    border-radius: 16px;
    padding: 16px;
    background: rgba(26, 26, 26, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
    text-align: center;
}

[data-theme="light"] .pin-lock-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.88);
}

.pin-lock-title {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 4px;
}

.pin-lock-sub {
    font-size: 12px;
    opacity: 0.78;
    margin-bottom: 12px;
}

.pin-lock-input {
    width: 100%;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 6px;
    text-align: center;
    padding: 12px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    outline: none;
}

[data-theme="light"] .pin-lock-input {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
}

.pin-lock-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 12px;
}

.pin-lock-actions .btn {
    flex: 1 1 auto;
}

/* ===== ТЕМНАЯ ТЕМА ===== */
[data-theme="dark"] {
    --bg-primary: #0f0e17;
    --bg-secondary: #1a1625;
    --bg-card: #1e1b2e;
    --bg-hover: #2a2540;
    --text-primary: #e0d6ff;
    --text-secondary: #a78bfa;
    --text-muted: #8b5cf6;
    --accent-primary: #8b5cf6;
    --accent-secondary: #a78bfa;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --border-color: #2d2540;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --switch-track-off: #2a2540;
    --switch-track-border: #4c3f6b;
    --switch-knob-off: #e9e5ff;
    --switch-knob-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* ===== ЗОЛОТАЯ ТЕМА ===== */
[data-theme="golden"] {
    --bg-primary: #050505;
    --bg-secondary: #0d0d0d;
    --bg-card: #12100a;
    --bg-hover: #1c1608;
    --text-primary: #f8f6f0;
    --text-secondary: #fde08d;
    --text-muted: rgba(212, 175, 55, 0.78);
    --accent-primary: #d4af37;
    --accent-secondary: #fde08d;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --border-color: rgba(212, 175, 55, 0.38);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.55);
    --switch-track-off: #1c1608;
    --switch-track-border: rgba(212, 175, 55, 0.42);
    --switch-knob-off: #f8f6f0;
    --switch-knob-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

[data-theme="golden"] .theme-option.is-active {
    background: linear-gradient(180deg, #fceabb 0%, #d4af37 100%);
    color: #1a1204;
}

[data-theme="golden"] .history-chip.active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

[data-theme="golden"] .settings-card-v2--pairs {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card)) 0%,
        var(--bg-card) 100%
    );
}

[data-theme="golden"] .exchange-row,
[data-theme="golden"] .trading-pair-row,
[data-theme="golden"] .archived-bot-row {
    background: var(--bg-secondary);
}

[data-theme="golden"] #page-settings .settings-input-one,
[data-theme="golden"] #page-settings .input-group--compact input,
[data-theme="golden"] #page-settings .select-custom {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="golden"] .theme-segmented {
    background: var(--bg-secondary);
}

[data-theme="golden"] .theme-option:not(.is-active) {
    color: var(--text-secondary);
}

[data-theme="golden"] #reserve-modal #reserve-modal-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="golden"] .partner-link-field {
    background: #141008;
    color: #f8f6f0;
    border-color: color-mix(in srgb, #d4af37 55%, #5c4a10);
}

[data-theme="golden"] .home-equity-suite {
    border-color: color-mix(in srgb, #22c55e 28%, var(--border-color));
    box-shadow: 0 10px 32px color-mix(in srgb, #22c55e 12%, transparent);
}

[data-theme="golden"] .home-holding-pct.pos {
    color: #4ade80;
}

[data-theme="golden"] .home-equity-bot-profit-line--pos {
    color: #4ade80;
}

[data-theme="golden"] .ex-tile--active {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent-primary) 80%, transparent);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Telegram Mini App: на всю ширину viewport клиента, модалки шире */
html.tg-web-app,
html.tg-web-app body {
    width: 100%;
    max-width: 100%;
}

/* Desktop (Telegram Desktop / широкие экраны): уменьшить UI примерно в 2 раза */
@media (min-width: 900px) {
    html.tg-web-app body {
        /* Работает в Chromium (Telegram Desktop). Масштабируем весь UI, включая модалки/оверлеи. */
        zoom: 0.55;
    }

    /* Fallback для окружений без zoom */
    @supports not (zoom: 1) {
        html.tg-web-app body {
            zoom: 1;
        }
        .app-container {
            transform: scale(0.55);
            transform-origin: top center;
            /* Компенсация ширины, чтобы контент не обрезался */
            width: calc(100% / 0.55);
        }
    }
}

.tg-web-app .app-container {
    max-width: 100%;
    width: 100%;
}

.tg-web-app .content-area {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
}

.tg-web-app .modal {
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
}

.tg-web-app .modal-content {
    max-width: min(720px, calc(var(--tg-viewport-stable-width, 100vw) - 20px));
    width: 100%;
}

.app-container {
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 70px; /* Место для нижней навигации */
}

/* ===== Браузер: тема и выход (правый верхний угол) ===== */
.browser-top-tools {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 5px 4px 4px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.browser-top-tools.is-visible {
    display: flex;
}

body.auth-locked .browser-top-tools.is-visible {
    display: none !important;
}

.browser-top-tools-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.browser-top-tools-btn:hover {
    background: var(--bg-hover);
}

.browser-top-tools-btn:active {
    background: var(--bg-card);
}

.browser-top-tools-btn--logout {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding: 0 12px;
    color: var(--text-secondary);
}

.browser-top-tools-btn--logout:hover {
    color: var(--text-primary);
}

.settings-browser-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-browser-actions .settings-btn {
    width: 100%;
    text-align: center;
    text-decoration: none;
}

/* ===== ВЕРХНЯЯ ПАНЕЛЬ ===== */
.top-bar.top-bar--hidden-home {
    display: none;
}

.top-bar {
    background: var(--bg-secondary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow);
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.top-bar-title {
    flex: 1;
    text-align: center;
}

.top-bar-title h1 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
}

.btn-icon {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
}

.btn-icon:hover {
    background: var(--bg-hover);
}

.btn-icon:active {
    background: var(--bg-card);
}

/* ===== ОБЛАСТЬ КОНТЕНТА ===== */
.content-area {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.page {
    animation: fadeIn 0.3s ease-in;
}

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

/* ===== КАРТОЧКИ ===== */
.welcome-card,
.status-card,
.balance-card,
.form-card,
.bot-info-card,
.profit-card,
.settings-section {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.welcome-card h2 {
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
}

.welcome-card-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0;
    margin: 0 0 20px 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.welcome-card-toggle span:first-child {
    font-size: 24px;
    font-weight: 600;
}

.welcome-card-toggle__hint {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-primary);
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--bg-hover);
}

.welcome-card.collapsed {
    padding-bottom: 16px;
}

.welcome-card.collapsed .welcome-card-toggle {
    margin-bottom: 0;
}

.welcome-card.collapsed .steps-list {
    display: none;
}

/* ===== ШАГИ НАЧАЛА РАБОТЫ ===== */
.steps-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.step-item.completed .step-icon {
    background: var(--accent-primary);
    color: white;
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 4px;
}

.step-desc {
    font-size: 14px;
    color: var(--text-secondary);
}

.step-link {
    color: var(--accent-secondary);
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-top: 4px;
}

.step-link:hover {
    text-decoration: underline;
}

.step-choice-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.step-choice-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.step-choice-btn:hover {
    border-color: var(--accent-primary);
}

.step-choice-btn--active {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    color: #fff;
}

.step-back-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
}

.step-back-link:hover {
    text-decoration: underline;
}

.step-uid-input {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.step-uid-status {
    font-size: 13px;
    margin-top: 6px;
}

.step-uid-status--pending {
    color: var(--text-secondary);
}

.step-uid-status--own {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ===== СТАТУС И БАЛАНС ===== */
.status-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-danger);
    animation: pulse 2s infinite;
}

.status-indicator.connected {
    background: var(--accent-primary);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.balance-card {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #45a049 100%);
    text-align: center;
    color: white;
}

.balance-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.balance-value {
    font-size: 32px;
    font-weight: 700;
}

/* ===== ПОДКЛЮЧЕННЫЕ БИРЖИ ===== */
.connected-exchanges {
    margin-bottom: 16px;
}

.exchanges-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exchange-item-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.exchange-logo {
    font-size: 20px;
}

.exchange-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.exchange-status-mini {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.exchange-status-mini.connected {
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
}

/* ===== БАЛАНСЫ ПО БИРЖАМ ===== */
.balances-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.balance-hint {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
    padding: 8px 4px 0;
}

.total-balance {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #6366f1 100%);
    text-align: center;
    color: white;
    padding: 20px;
    border-radius: 16px;
}

.exchanges-balances {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exchange-balance-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.exchange-balance-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.exchange-balance-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

/* ===== ВКЛАДКИ ===== */
.tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-card);
    border: none;
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--accent-primary);
    color: white;
}

/* ===== СПИСОК БОТОВ ===== */
.bots-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bot-card {
    background: var(--bg-card);
    border-radius: 18px;
    padding: 18px 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

/* Маркет: Telegram @username (подчёркивание не «теряется» визуально) */
.market-author-handle {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    white-space: nowrap;
}

.bot-card--order-pro {
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}

.bot-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.bot-card-header-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.bot-card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bot-avatar, #6366f1) 16%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--bot-avatar, #6366f1) 30%, var(--border-color));
    box-sizing: border-box;
}

.bot-card-avatar-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: block;
}

.bot-card-avatar-img.is-hidden {
    display: none !important;
}

.bot-card-avatar-fallback {
    display: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--bot-avatar, var(--accent-primary));
    line-height: 1;
}

.bot-card-avatar-fallback.is-visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-card-avatar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    width: 48px;
}

.bot-card-avatar-ticker {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-card-title-text {
    min-width: 0;
    flex: 1;
}

.bot-card-headline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 7px;
    row-gap: 4px;
}

.bot-card-pair {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.bot-card-pair-sep {
    color: var(--text-secondary);
    font-weight: 600;
    margin: 0 3px;
}

.bot-card-strategy {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: lowercase;
}

.bot-card-pair--plain {
    text-transform: none;
    font-weight: 700;
}

.bot-card-id-chip {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    letter-spacing: 0.01em;
}

.bot-market-shared-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.35);
    font-size: 13px;
    line-height: 1;
}

.bot-display-name-badge {
    display: inline-flex;
    align-items: center;
    max-width: min(180px, 58vw);
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 32%, var(--border-color));
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-card-subline {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.bot-card-daynight-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.bot-card-daynight-pill .bot-card-ico {
    width: 14px;
    height: 14px;
}

.bot-card-daynight-pill-text {
    line-height: 1;
}

/* Бейдж «Стиль» — место прежнего День/Ночь pill в шапке карточки. */
.bot-card-style-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.bot-card-style-pill[data-style="crazy"] {
    color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 11%, transparent);
    border-color: color-mix(in srgb, var(--accent-danger) 28%, transparent);
}

.bot-card-style-pill[data-style="off"] {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 11%, transparent);
    border-color: color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.bot-card-style-pill-text {
    line-height: 1;
}

/* Иконка «День/Ночь» (без подписи) — ставится после бейджа «Статус». */
.bot-card-dn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

.bot-card-dn-ico .bot-card-ico {
    width: 14px;
    height: 14px;
}

.bot-card-dn-ico--night {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-secondary) 14%, transparent);
    border-color: color-mix(in srgb, var(--text-secondary) 28%, transparent);
}

/* Иконка бык/медведь — сразу после день/ночь. */
.bot-card-regime-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    background: color-mix(in srgb, var(--text-secondary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-secondary) 22%, transparent);
}

.bot-card-regime-ico--bull {
    background: color-mix(in srgb, var(--success, #22c55e) 14%, transparent);
    border-color: color-mix(in srgb, var(--success, #22c55e) 28%, transparent);
}

.bot-card-regime-ico--bear {
    background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger, #ef4444) 28%, transparent);
}

.bot-card-follow-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    line-height: 1;
    background: color-mix(in srgb, var(--primary, #3b82f6) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary, #3b82f6) 28%, transparent);
}

.bot-card-profile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.045em;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.bot-card-profile-pill--auto {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 11%, transparent);
    border-color: color-mix(in srgb, var(--success) 24%, transparent);
}

.bot-card-profile-pill--pro {
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 11%, transparent);
    border-color: color-mix(in srgb, var(--accent-primary) 24%, transparent);
}

/* АВТО/ПРОФИ: яркая подсветка по факту запуска бота (зелёный / красный). */
.bot-card-profile-pill.bot-card-profile-pill--state-on {
    color: #fff;
    background: #16a34a;
    border-color: color-mix(in srgb, #15803d 70%, transparent);
}

.bot-card-profile-pill.bot-card-profile-pill--state-off {
    color: #fff;
    background: var(--accent-danger);
    border-color: color-mix(in srgb, var(--accent-danger) 55%, #000);
}

/* FLYTRADER SELL: золотая таблетка в стиле темы (вместо оранжевой). */
.bot-card-profile-pill.bot-card-profile-pill--fly-sell {
    color: color-mix(in srgb, #1a1408 88%, var(--accent-primary));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--accent-primary) 92%, #fff) 0%,
        var(--accent-primary) 100%
    );
    border-color: color-mix(in srgb, var(--accent-primary) 65%, #5c4a10);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 40%, transparent);
}

.bot-card-actions--icons {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    align-items: flex-start;
    max-width: 50%;
}

/* Кросс/Кросс2: заголовок не должен сжиматься или менять порядок из-за кнопок. */
.bot-card--cross-family .bot-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.bot-card--cross-family .bot-card-actions--icons {
    width: auto;
    max-width: none;
    flex-wrap: nowrap;
}

.bot-card--cross-family .bot-card-pair {
    overflow-wrap: anywhere;
}

.bot-card-icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    box-sizing: border-box;
}

.bot-card-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-color));
}

.bot-card-icon-btn:active {
    transform: scale(0.96);
}

.bot-card-icon-btn--danger:hover {
    color: var(--accent-danger);
    border-color: color-mix(in srgb, var(--accent-danger) 42%, var(--border-color));
}

.bot-card-ico {
    display: block;
    flex-shrink: 0;
}

.create-bot-button-container {
    margin-bottom: 16px;
}

.btn-create-bot-cta {
    width: 100%;
    border-radius: 14px;
    font-weight: 700;
}

.btn-create-bot-cta-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-create-bot-cta .bot-card-ico {
    width: 22px;
    height: 22px;
}

.bot-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 16px;
    flex-wrap: wrap;
}

.bot-card-title-asset {
    flex-shrink: 0;
    font-size: 1.15em;
    line-height: 1;
}

.bot-card-title-main {
    min-width: 0;
}

.bot-card-title-sigils {
    flex-shrink: 0;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.bot-card-actions {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* Легаси-кнопки карточек (если остались в старых фрагментах) */
.btn-edit, .btn-delete {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 12px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-edit:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

.btn-delete:hover {
    background: var(--bg-hover);
    color: var(--accent-danger);
}

/* Упрощённая карточка ОрдерБота (профиль Авто) */
.bot-card--simple-auto {
    border: 1px solid var(--border-color);
}

.bot-card-simple-tag {
    font-size: 12px;
    color: var(--text-secondary);
    margin: -4px 0 12px 0;
    line-height: 1.45;
}

.bot-card-simple-metrics {
    margin-bottom: 4px;
}

.bot-card-simple-cap {
    font-size: 12px;
    color: var(--text-primary);
    line-height: 1.45;
}

.bot-card-simple-primary {
    width: 100%;
    font-size: 16px;
    font-weight: 700;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 14px;
}

.bot-card-simple-secondary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bot-card-simple-secondary .btn {
    flex: 1 1 calc(33.333% - 8px);
    min-width: 0;
    font-size: 12px;
    padding: 10px 8px;
    border-radius: 12px;
}

@media (max-width: 360px) {
    .bot-card-simple-secondary .btn {
        flex: 1 1 100%;
    }

    .bot-card-actions--icons {
        max-width: none;
        width: 100%;
        justify-content: flex-start;
    }

    .bot-card--cross-family .bot-card-actions--icons {
        width: auto;
        justify-content: flex-end;
    }
}

.bot-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    margin-bottom: 14px;
}

.bot-card--order-pro .metric-item,
.bot-card--simple-auto .metric-item {
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.metric-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.metric-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.92;
}

.metric-value {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.metric-value.positive {
    color: var(--accent-primary);
}

.metric-value.negative {
    color: var(--accent-danger);
}

/* Профи: слева P&L на высоту двух строк, справа — «Сделки», под ними «Стоимость ордера» + кнопка в один ряд */
.bot-metrics--order-pro-top {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
}

.bot-metrics--order-pro-top .metric-item--pnl-tall {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
}

.bot-metrics--order-pro-top .metric-item--trades-cell {
    grid-column: 2;
    grid-row: 1;
}

.bot-metrics--order-pro-top .metric-item--order-cost-under-trades {
    grid-column: 2;
    grid-row: 2;
}

.metric-item--order-cost .metric-order-cost-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.metric-item--order-cost .metric-order-cost-text {
    flex: 1;
    min-width: 0;
}

.metric-value--order-cost-line {
    font-size: 14px;
    line-height: 1.3;
    word-break: break-word;
}

.metric-item--order-cost .btn-order-deals-inline {
    flex-shrink: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    max-width: 42%;
}

.btn-order-deals-inline__ln {
    display: block;
}

@media (max-width: 360px) {
    .metric-value--order-cost-line {
        font-size: 12px;
    }
    .metric-item--order-cost .btn-order-deals-inline {
        padding: 5px 8px;
        font-size: 10px;
    }
}

.bot-deals-table-wrap {
    overflow-x: auto;
    margin-top: 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
}

.bot-deals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bot-deals-table th,
.bot-deals-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
    vertical-align: top;
}

.bot-deals-table th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.bot-deals-table tr:last-child td {
    border-bottom: none;
}

.bot-deals-pnl-pos {
    color: var(--success, #10b981);
    font-weight: 650;
}

.bot-deals-pnl-neg {
    color: var(--accent-danger);
    font-weight: 650;
}

.deals-hub-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
    border-radius: 22px;
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--accent-primary) 22%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 94%, var(--accent-primary)), var(--bg-secondary));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.deals-hub-eyebrow {
    display: inline-flex;
    margin-bottom: 7px;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.deals-hub-hero h2 {
    margin: 0 0 6px;
    font-size: 23px;
    line-height: 1.05;
}

.deals-hub-hero p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.deals-hub-refresh-wrap {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.deals-hub-refresh {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 38%, var(--border-color));
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    font-weight: 750;
}

.deals-hub-refresh-timer {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.deals-hub-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.deals-hub-summary__item {
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
}

.deals-hub-summary__item span {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
}

.deals-hub-summary__item strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
}

.deals-hub-summary-amount,
.deals-hub-summary-unit {
    display: block;
    line-height: 1.08;
}

.deals-hub-summary-unit {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.08em;
}

.deals-hub-filter-spoiler {
    margin-top: 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-card));
    overflow: hidden;
}

.deals-hub-filter-spoiler summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 800;
    list-style: none;
}

.deals-hub-filter-spoiler summary::-webkit-details-marker {
    display: none;
}

.deals-hub-filter-spoiler summary::after {
    content: '▾';
    color: var(--text-secondary);
    transition: transform 0.18s ease;
}

.deals-hub-filter-spoiler[open] summary::after {
    transform: rotate(180deg);
}

.deals-hub-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0 10px 10px;
}

.deals-hub-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    border-radius: 13px;
    background: color-mix(in srgb, var(--bg-secondary) 94%, var(--bg-card));
    min-width: 0;
}

.deals-hub-filter span {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.deals-hub-filter select {
    width: 100%;
    border: none;
    outline: none;
    color: var(--text-primary);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    min-width: 0;
}

.deals-hub-tabs {
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}

.deals-history-period {
    margin: -4px 0 12px;
    width: 100%;
}

.deals-history-period .segment-btn {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
}

.deals-hub-actions {
    margin: 0 0 12px;
}

.deals-hub-actions .btn {
    width: 100%;
}

.deals-hub-limits-table .deals-hub-cancel-btn {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
}

.deals-hub-table-card {
    margin-top: 14px;
}

.deals-operation-list { display: grid; gap: 8px; }
.deals-operation-row {
    padding: 11px; border: 1px solid var(--border-color); border-radius: 14px;
    background: var(--bg-secondary);
}
.deals-operation-main { display: flex; align-items: center; gap: 7px; min-width: 0; }
.deals-operation-badge { padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.deals-operation-row--buy .deals-operation-badge { color: #20bf6b; background: rgba(32,191,107,.13); }
.deals-operation-row--sell .deals-operation-badge { color: #ef5350; background: rgba(239,83,80,.13); }
.deals-operation-symbol { font-size: 13px; }
.deals-operation-date { margin-left: auto; color: var(--text-secondary); font-size: 10px; white-space: nowrap; }
.deals-operation-values { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 9px; }
.deals-operation-values span { min-width: 0; }
.deals-operation-values small { display: block; color: var(--text-secondary); font-size: 9px; }
.deals-operation-values b { display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; font-size: 11px; white-space: nowrap; }
.deals-operation-meta { margin-top: 7px; color: var(--text-secondary); font-size: 10px; overflow-wrap: anywhere; }
.deals-history-more { width: 100%; margin-top: 10px; }

.deals-hub-table-title {
    margin-top: 0;
}

.metric-item--tap-history {
    cursor: pointer;
}

.metric-item--tap-history:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 35%, var(--border-color));
}

.metric-item--tap-history:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.metric-tap-cue {
    font-size: 12px;
    opacity: 0.65;
    vertical-align: middle;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-text {
    font-size: 16px;
    margin-bottom: 20px;
}

.mini-spinner {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 3px solid color-mix(in srgb, var(--accent-primary) 18%, transparent);
    border-top-color: var(--accent-primary);
    animation: app_loader_spin 0.85s linear infinite;
}

.bots-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 164px;
    padding: 28px 18px;
    color: var(--text-secondary);
    text-align: center;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 18px;
}

.bots-loading-state__title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
}

.bots-loading-state__sub {
    max-width: 280px;
    font-size: 12px;
    line-height: 1.4;
}

.bots-loading-state--error {
    border-style: solid;
}

/* ===== ФОРМЫ ===== */
.input-group {
    margin-bottom: 20px;
    position: relative;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.input-group input,
.select-custom {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s;
}

.input-group input:focus,
.select-custom:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
    font-size: 12px;
}

.select-custom {
    appearance: none;
    padding-right: 40px;
}

/* ===== СЛАЙДЕР ===== */
.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.slider-btn:hover {
    background: var(--bg-hover);
}

.slider-track {
    flex: 1;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: 4px;
    position: relative;
    padding: 0 4px;
}

.slider-dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}

.slider-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.slider-dot.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    transform: scale(1.10);
}

.slider-value {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-primary);
    margin-top: 8px;
}

.slider-value-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.slider-value-input {
    width: 88px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--accent-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    -moz-appearance: textfield;
}

.slider-value-input::-webkit-outer-spin-button,
.slider-value-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.slider-value-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.18);
}

.slider-value-suffix {
    color: var(--accent-primary);
    font-size: 18px;
    font-weight: 600;
}

/* % внутри поля: цифры не наезжают на суффикс */
.slider-value-with-suffix {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 72px;
    flex: 0 0 auto;
}
.slider-value-with-suffix .slider-value-input {
    width: 100%;
    padding-right: 22px;
    box-sizing: border-box;
}
.slider-value-with-suffix .slider-value-suffix {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 14px;
    line-height: 1;
}

.percent-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    justify-content: center;
}

.percent-preset-btn {
    appearance: none;
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    background: var(--surface-2, rgba(255,255,255,0.04));
    color: var(--text-primary, #e8e8ea);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.percent-preset-btn:hover {
    border-color: var(--accent-primary, #7c5cff);
    color: var(--accent-primary, #7c5cff);
}

.percent-preset-btn.active {
    background: var(--accent-primary, #7c5cff);
    border-color: var(--accent-primary, #7c5cff);
    color: #fff;
}

.slider-value-hint {
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* ===== КНОПКИ ===== */
.btn {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

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

.btn.is-loading {
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: none;
}

.btn-loading-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.btn-loading-spinner {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.btn-loading-label {
    white-space: nowrap;
}

.bfd-bulk-grid .btn.is-loading {
    opacity: 0.92;
}

@keyframes flytrader-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-primary {
    background: var(--accent-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success {
    background: var(--accent-primary);
    color: white;
}

.btn-success:hover {
    background: var(--accent-secondary);
}

.btn-danger-market-sell {
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.btn-danger-market-sell:hover {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(239, 68, 68, 0.7);
    color: #dc2626;
}

.btn-large {
    padding: 16px 20px;
    font-size: 18px;
}

/* ===== ИНФОРМАЦИОННАЯ КАРТОЧКА ===== */
.bot-info-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.bot-info-section-title {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bot-info-section-title .info-icon {
    margin-left: 2px;
}

.bot-info-divider {
    height: 1px;
    background: var(--border-color);
    margin: 14px 0 10px;
    opacity: 0.7;
}

.bot-info-card--saved {
    margin-top: 4px;
}

.bot-live-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin-top: 8px;
}

.bot-live-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bot-live-stat__label {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.2;
}

.bot-live-stat__value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.bot-info-cap-diff {
    background: rgba(245, 158, 11, 0.10);
    color: var(--text-primary);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    padding: 8px 10px;
    margin: 6px 0 10px;
}

[data-theme="light"] .bot-info-cap-diff {
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.45);
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row span:first-child {
    color: var(--text-secondary);
    font-size: 14px;
}

.info-row span:nth-child(2) {
    font-weight: 600;
    font-size: 16px;
}

/* ===== ИСТОРИЯ ===== */
.profit-card {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    color: white;
    box-shadow: var(--shadow-lg);
    border: none;
}

.profit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.profit-label {
    font-size: 14px;
    opacity: 0.9;
}

.profit-card .profit-label,
.profit-card .profit-period-sub,
.profit-card .profit-item,
.profit-card .profit-roi-line {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.btn-share {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profit-value {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.12;
}

.profit-roi-line {
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
    line-height: 1.25;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}

.profit-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profit-breakdown-wrap {
    margin-top: 4px;
}

.history-breakdown-toggle {
    margin-top: 8px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.history-summary-footnote {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    margin: 12px 0 0;
    line-height: 1.4;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

.history-summary-card .history-summary-info {
    flex-shrink: 0;
    margin-top: 1px;
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.history-summary-footnote-text {
    flex: 1;
    min-width: 0;
}

.history-share-panel {
    max-height: min(92vh, 760px);
    overflow-y: auto;
}

.history-share-period {
    margin: 4px 0 10px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

.history-share-preview {
    position: relative;
    width: min(58vw, 270px);
    aspect-ratio: 9 / 16;
    margin: 0 auto 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: #090909;
}

.history-share-preview img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: opacity .18s ease;
}

.history-share-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

.history-share-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.history-share-actions .btn {
    width: 100%;
}

.profit-item--compact {
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.profit-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.profit-item-pair {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: -0.02em;
}

.history-summary-card .profit-item-pair {
    color: rgba(255, 255, 255, 0.95);
}

.profit-item-nums {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px 8px;
    text-align: right;
}

.profit-item-usd {
    font-weight: 800;
    font-size: 12px;
}

.history-summary-card .profit-item-usd {
    color: rgba(255, 255, 255, 0.98);
}

.profit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.profit-item-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.profit-item-icon .history-coin-img {
    width: 22px;
    height: 22px;
}

.profit-card .profit-item-pct {
    color: rgba(255, 255, 255, 0.88);
    font-size: 12px;
    font-weight: 500;
}

.history-table {
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
}

#page-history .history-table--compact .table-header,
#page-history .history-table--compact .table-row {
    display: grid;
    grid-template-columns: minmax(52px, 0.82fr) minmax(0, 1.12fr) minmax(44px, 0.58fr) minmax(0, 1fr);
    gap: 6px;
    padding: 8px 10px;
    align-items: center;
}

#page-history .history-table--compact .table-header {
    padding: 8px 10px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#page-history .history-table--compact .table-body {
    max-height: min(56vh, 520px);
}

.table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.table-body {
    max-height: 400px;
    overflow-y: auto;
}

.table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}

.table-row:last-child {
    border-bottom: none;
}

.table-col {
    display: flex;
    align-items: center;
}

.profit-positive {
    color: var(--accent-primary);
    font-weight: 600;
}

.profit-negative {
    color: var(--accent-danger);
    font-weight: 600;
}

.history-pnl-pct {
    font-weight: 500;
    font-size: 12px;
    opacity: 0.88;
}

.profit-period-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    margin-top: 4px;
    line-height: 1.35;
}

.history-pnl-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0 0 10px;
    line-height: 1.45;
    padding: 0 4px;
}

.history-col-pnl {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.history-asset-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.history-asset-ticker {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}

.history-pnl-pct-row {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.9;
    color: var(--text-secondary);
}

.history-col-date {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.history-date-line {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
}

.history-time-line {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
}

#page-history .history-col-qty {
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#page-history .history-th-qty {
    justify-content: center;
    text-align: center;
}

#page-history .history-th-pnl,
#page-history .history-col-pnl {
    align-items: flex-end;
    text-align: right;
}

.history-pnl-usdt {
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

#page-history .history-table-row {
    font-size: 12px;
}

.history-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    margin: 0 0 12px;
}

.history-toolbar-field {
    flex: 1 1 140px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
/* Верхний ряд фильтров Истории: Биржа + Тип бота (заменили 5 табов, уезжавших за экран). */
.history-filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}
.history-filter-row .history-toolbar-field {
    flex: 1 1 0;
    min-width: 0;
}

.history-toolbar-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.history-select {
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 10px;
    min-height: 40px;
}

.history-toolbar-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-bottom: 2px;
}

.history-toolbar-mid-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.history-period-pill {
    font-size: 12px;
    font-weight: 900;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--text-primary);
}

.history-filters-btn {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.history-range-chips-wrap {
    margin: 0 0 8px;
}

.history-date-row {
    margin: 0 0 12px;
}

.date-range-selector--compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

button.date-range-selector--compact {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.history-custom-range-panel {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--border-color));
    background: var(--bg-card);
}

.history-custom-range-panel[hidden] {
    display: none !important;
}

.history-custom-range-inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.history-date-field {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.history-date-field__lbl {
    min-width: 28px;
}

.history-date-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
}

.history-custom-range-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.history-custom-range-actions .btn {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

.history-empty-state {
    padding: 28px 16px;
    text-align: center;
}

.history-empty-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.history-empty-sub {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0 0 14px;
}

.history-empty-reset {
    min-width: 180px;
}

.history-sheet {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
}

.history-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.history-sheet-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 78vh;
    overflow: auto;
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    padding: 10px 16px 20px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    border-bottom: none;
}

.history-sheet-grab {
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-color);
    margin: 4px auto 12px;
}

.history-sheet-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.history-sheet-section {
    margin-bottom: 16px;
}

.history-sheet-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.history-sheet-segments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-sheet-chip {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.history-sheet-chip.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-secondary));
}

.history-sheet-done {
    width: 100%;
    margin-top: 4px;
}

.history-cashflow-sub {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.history-cashflow-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.history-cashflow-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 14px;
}

.history-cashflow-row__label {
    color: var(--text-secondary);
}

.history-cashflow-row__value {
    font-weight: 600;
    text-align: right;
}

.history-cashflow-row--saldo .history-cashflow-row__value {
    color: var(--accent-primary);
}

.history-cashflow-error {
    color: var(--danger, #e74c3c);
    font-size: 13px;
    margin: 0;
}

.history-cashflow-loading {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}

.history-cashflow-footnote {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.45;
    margin: 0 0 12px;
}

.history-cashflow-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

body.history-sheet-open {
    overflow: hidden;
}

[data-theme="light"] .history-sheet-backdrop {
    background: rgba(15, 23, 42, 0.35);
}

/* ===== НАСТРОЙКИ ===== */
.settings-section {
    margin-bottom: 20px;
}

.settings-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Изящный outline-«?», тонкий и неброский. */
.info-icon {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', Georgia, serif;
    font-style: italic;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    flex-shrink: 0;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.55;
    transition: opacity 0.15s, color 0.15s, transform 0.05s, border-color 0.15s;
}
/* Расширенная зона тапа — невидимая, без сдвига layout. */
.info-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}
.info-icon:hover,
.info-icon:focus-visible {
    outline: none;
    opacity: 1;
    color: var(--accent-primary);
}
.info-icon:active {
    transform: scale(0.9);
}

/* «?» в правом верхнем углу карточки home-tile — компактный, ненавязчивый. */
.home-tip {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid currentColor;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', Georgia, serif;
    font-style: italic;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    opacity: 0.40;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
    margin: 0;
    z-index: 1;
}
.home-tip::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
}
.home-tip:hover,
.home-tip:focus-visible {
    outline: none;
    opacity: 1;
    color: var(--accent-primary);
}
.home-tip:active {
    transform: scale(0.9);
}

/* ===== INFO POPOVER ===== */
.info-popover-root {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.32);
    pointer-events: auto;
}
.info-popover-root[hidden] {
    display: none;
}
.info-popover-card {
    position: absolute;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.32);
    padding: 16px 18px 14px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
}
.info-popover-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.info-popover-close:hover {
    color: var(--text-primary);
}
.info-popover-title {
    margin: 0 28px 8px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
}
.info-popover-body {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}
.info-popover-body p {
    margin: 0 0 10px;
}
.info-popover-body p:last-child {
    margin-bottom: 0;
}
.info-popover-body strong {
    color: var(--text-primary);
}
.info-popover-body em {
    color: var(--text-secondary);
    font-style: normal;
}
[data-theme="light"] .info-popover-root {
    background: rgba(20, 26, 38, 0.28);
}

/* ===== Кнопка «Рекомендации» во вступлении карточки бота ===== */
.order-intro-recs-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    vertical-align: middle;
}
.order-intro-recs-btn:hover {
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    border-color: var(--accent-primary);
}

/* ===== Контент попапа «Рекомендации» (внутри .info-popover-body) ===== */
.recs-body .recs-level {
    position: relative;
    margin: 0 0 10px;
    padding: 9px 10px 9px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.recs-body .recs-level::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 4px;
    border-radius: 0 3px 3px 0;
}
.recs-body .recs-level--core::before { background: rgba(34, 197, 94, 0.85); }
.recs-body .recs-level--mid::before  { background: var(--accent-warning, #f59e0b); }
.recs-body .recs-level--high::before { background: var(--accent-danger, #ef4444); }
.recs-body .recs-level__head {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
}
.recs-body .recs-level p {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.35;
}
.recs-body .recs-rules-title,
.recs-body .recs-example-title {
    font-weight: 700;
    color: var(--text-primary);
    margin: 12px 0 6px;
}
.recs-body .recs-list {
    margin: 0 0 4px;
    padding-left: 20px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}
.recs-body .recs-list li { margin-bottom: 3px; }
.recs-body .recs-example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    margin: 4px 0 0;
}
.recs-body .recs-example-grid span {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 12px;
    color: var(--text-secondary);
}
.recs-body .recs-example-grid span strong {
    color: var(--text-primary);
    font-weight: 700;
}
.recs-body .recs-example-grid span em {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 11px;
}

/* ===== TOUR ENGINE ===== */
.tour-root {
    position: fixed;
    inset: 0;
    z-index: 1400;
    pointer-events: none;
}
.tour-root[hidden] {
    display: none;
}
.tour-mask {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.tour-mask-bg {
    pointer-events: none;
}
.tour-tooltip {
    position: fixed;
    width: min(360px, calc(100vw - 24px));
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    padding: 14px 16px 12px;
    pointer-events: auto;
}
.tour-tooltip-arrow {
    position: absolute;
    width: 14px;
    height: 14px;
    background: var(--bg-card);
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: translate(-50%, -50%) rotate(45deg);
    top: 0;
}
.tour-tooltip-arrow[data-placement="top"] {
    top: 100%;
    transform: translate(-50%, -50%) rotate(225deg);
}
.tour-tooltip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.tour-tooltip-counter {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 600;
}
.tour-tooltip-close {
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}
.tour-tooltip-close:hover {
    color: var(--text-primary);
}
.tour-tooltip-title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-primary);
}
.tour-tooltip-text {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}
.tour-tooltip-actions {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    align-items: center;
}
.tour-btn {
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 10px;
    line-height: 1;
}
.tour-btn--prev[disabled] {
    opacity: 0.4;
    pointer-events: none;
}
.tour-btn--skip {
    justify-self: center;
}

/* «Пройти обучение заново» */
.tour-replay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}
.tour-replay-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s, transform 0.05s;
}
.tour-replay-btn:hover {
    border-color: var(--accent-primary);
}
.tour-replay-btn:active {
    transform: scale(0.99);
}
.tour-replay-btn__label {
    font-weight: 600;
}
.tour-replay-btn__status {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tour-replay-btn[data-completed="true"] .tour-replay-btn__status {
    color: var(--success, #2ecc71);
}

/* ===== ORDER BOT QUICK CALC ===== */
.bot-quick-calc {
    background: linear-gradient(165deg, rgba(94, 162, 255, 0.08), rgba(94, 162, 255, 0.02));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Шаги 1-2-3 при создании ОрдерБота */
.step-group > label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    background: var(--accent-color, #5ea2ff);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* Сворачиваемая «Тонкая настройка» */
.adv-fold {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0 12px;
    margin: 4px 0 14px;
    background: rgba(127, 127, 127, 0.04);
}
.adv-fold[open] {
    padding-bottom: 6px;
}
.adv-fold__summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 4px;
    font-weight: 600;
    color: var(--text-primary, inherit);
    user-select: none;
}
.adv-fold__summary::-webkit-details-marker { display: none; }
.adv-fold__summary::after {
    content: "▾";
    float: right;
    opacity: 0.6;
    transition: transform 0.15s ease;
}
.adv-fold[open] .adv-fold__summary::after { transform: rotate(180deg); }
.adv-fold__note {
    font-weight: 400;
    color: var(--text-secondary, #888);
    font-size: 13px;
}

/* ===== Сворачиваемые секции режима ПРОФИ в карточке бота ===== */
.order-pro-section {
    margin: 8px 0;
}
.order-pro-section > .adv-fold__summary {
    padding: 10px 12px;
    font-size: 14px;
}
.order-pro-section__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 4px 8px;
}
/* Уплотнить поля внутри секций ПРОФИ */
.order-pro-section__body .form-switch-row { padding: 10px 0; }
.order-pro-section__body .input-group { margin-bottom: 8px; }
.order-pro-section__body .order-risk-advanced-grid { margin: 6px 0 8px; }
.order-pro-section__body .cycle-mode-hint { font-size: 12px; margin: 2px 0 6px; line-height: 1.35; }
.order-pro-section__body .cycle-mode-group { margin-bottom: 4px; }
/* Компактная сетка полей в секциях ПРОФИ: 2 колонки уже на типичных экранах Telegram
   (по умолчанию .order-risk-advanced-grid = 1 колонка до 520px — в ПРОФИ это выглядело
   «в один столбик без пробелов»). Перекрываем до 3 колонок от 520px, 2 — от 360px. */
#page-create-bot .order-pro-section__body .order-risk-advanced-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (min-width: 520px) {
    #page-create-bot .order-pro-section__body .order-risk-advanced-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* Скрыть AUTO-блоки «Итог выбора» и жёлтую плашку в режиме ПРОФИ (form-card--pro).
   Раньше завязывались на :not(.order-auto-compact), но compact теперь включён в обоих режимах. */
#page-create-bot .form-card--pro #order-auto-choice-summary,
#page-create-bot .form-card--pro #order-auto-system-note { display: none !important; }
.bqc-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}
.bqc-hero__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}
.bqc-hero__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.3;
}
.bqc-hero__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    word-break: break-word;
}
.bqc-hero__value[data-state="bad"] {
    color: var(--danger, #e53935);
}
.bqc-hero__value[data-state="warn"] {
    color: #f59e0b;
}
.bqc-summary {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.bqc-summary b {
    color: var(--text-primary);
    font-weight: 700;
}
.bqc-summary-muted {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 11px;
}
.bqc-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.04));
}
.bqc-steps[hidden] {
    display: none !important;
}
.bqc-wf-step {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
}
.bqc-wf-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.bqc-wf-step:first-child {
    padding-top: 0;
}
.bqc-wf-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.bqc-wf-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.bqc-wf-amount {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}
.bqc-wf-step[data-kind="result"] .bqc-wf-label,
.bqc-wf-step[data-kind="result"] .bqc-wf-amount {
    font-weight: 700;
    color: var(--accent-primary);
}
.bqc-wf-step[data-kind="block"] .bqc-wf-label,
.bqc-wf-step[data-kind="block"] .bqc-wf-amount,
.bqc-wf-step[data-kind="warn"] .bqc-wf-label,
.bqc-wf-step[data-kind="warn"] .bqc-wf-amount {
    color: var(--danger, #e53935);
}
.bqc-wf-step[data-kind="cap"] .bqc-wf-amount {
    color: #f59e0b;
}
.bqc-wf-step[data-kind="pass"] .bqc-wf-amount {
    color: var(--success, #43a047);
    font-weight: 600;
}
.bqc-wf-note {
    margin-top: 3px;
    padding-left: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-secondary);
    opacity: 0.85;
}
.bqc-headline-pill {
    flex: 1 1 100%;
    max-width: 100%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    padding: 4px 8px;
    border-radius: 8px;
    text-align: left;
    white-space: normal;
    letter-spacing: 0.02em;
}
@media (min-width: 380px) {
    .bqc-headline-pill {
        flex: 0 0 auto;
        max-width: 48%;
        text-align: right;
    }
}
.bqc-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.bqc-metric {
    min-width: 0;
    padding: 7px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.06));
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bqc-metric__label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    line-height: 1.3;
}
.bqc-metric__value {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.bqc-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.bqc-pill--block {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    white-space: normal;
    text-transform: none;
}
.bqc-pill[data-state="ok"],
.bqc-headline-pill[data-state="ok"] {
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
}
.bqc-pill[data-state="warn"],
.bqc-headline-pill[data-state="warn"] {
    background: rgba(255, 178, 0, 0.16);
    color: #ffb200;
}
.bqc-pill[data-state="bad"],
.bqc-headline-pill[data-state="bad"] {
    background: rgba(255, 80, 80, 0.16);
    color: #ff5050;
}
.bqc-hint {
    margin: 0;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.45;
    padding-top: 2px;
}
/* legacy aliases */
.bqc-result-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.exchange-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exchange-item {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.exchange-item:hover {
    background: var(--bg-hover);
}

.exchange-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exchange-logo {
    font-size: 24px;
}

.exchange-name {
    font-weight: 600;
    font-size: 16px;
}

.exchange-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.exchange-status.connected {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-primary);
}

.exchange-status.disconnected {
    background: rgba(244, 67, 54, 0.2);
    color: var(--accent-danger);
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.settings-col h3 {
    font-size: 14px;
    margin-bottom: 8px;
}

/* ===== ПЕРЕКЛЮЧАТЕЛЬ ===== */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    font-size: 0;
}

.slider-switch {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--switch-track-off);
    border: 1px solid var(--switch-track-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
    border-radius: 28px;
    pointer-events: none;
}

.slider-switch:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: var(--switch-knob-off);
    box-shadow: var(--switch-knob-shadow);
    border: 1px solid var(--switch-track-border);
    transition: transform 0.25s, background-color 0.25s, border-color 0.25s;
    border-radius: 50%;
}

input:checked + .slider-switch {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}

input:checked + .slider-switch:before {
    transform: translateX(22px);
    background-color: #ffffff;
    border-color: rgba(255, 255, 255, 0.65);
}

/* Переключатели внутри формы создания бота (не путать с .settings-row — там grid 1fr 1fr) */
.form-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}

.form-switch-row:last-of-type {
    border-bottom: none;
}

.form-switch-row__text {
    flex: 1;
    min-width: 0;
}

.form-switch-row__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.form-switch-row__title--with-help {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.form-switch-row__title--with-help .info-icon {
    flex-shrink: 0;
}

.form-switch-row__desc {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.form-switch-row .switch {
    flex-shrink: 0;
    margin-top: 2px;
}

/* ===== ИНДИКАТОРЫ ===== */
.input-group__section-title {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.indicator-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}

.indicator-card__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
}

.indicator-card__info {
    flex: 1;
    min-width: 0;
}

.indicator-card__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.indicator-card__desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
}

.indicator-card__settings {
    border-top: 1px solid var(--border-color);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.indicator-card__setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.indicator-card__setting-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.select-custom--sm {
    font-size: 13px;
    padding: 4px 8px;
    min-width: 80px;
}

.indicator-card__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--border-color);
}

.indicator-card__status-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.indicator-card__status-reason {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.75;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== НИЖНЯЯ НАВИГАЦИЯ ===== */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.bottom-nav::-webkit-scrollbar {
    display: none;
}

.bottom-nav-main {
    flex: 1 0 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0 2px;
}

.nav-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 6px 1px;
    cursor: pointer;
    transition: color 0.2s;
}

.nav-item--admin {
    flex: 0 0 auto;
    min-width: 58px;
    padding: 7px 12px;
    border-left: 1px solid var(--border-color);
}

.nav-item.active {
    color: var(--accent-primary);
}

.nav-icon {
    font-size: 20px;
    line-height: 1;
}

.nav-label {
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    text-align: center;
}

@media (max-width: 390px) {
    .nav-icon { font-size: 18px; }
    .nav-label { font-size: 9px; }
    .nav-item { padding: 5px 0; gap: 1px; }
}

/* ===== БИРЖА / ГРАФИК ===== */
.exchange-chart-controls { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(86px,.75fr) minmax(104px,.8fr); gap:8px; margin:10px 0 12px; align-items:end; position:relative; z-index:2; }
.exchange-chart-field { min-width:0; display:grid; gap:4px; color:var(--primary-color); font-size:11px; font-weight:700; letter-spacing:.02em; }
.exchange-chart-field .select-custom,
#page-exchange .exchange-chart-controls .select-custom {
    width:100%;
    min-width:0;
    height:44px;
    color:#f8f6f0 !important;
    -webkit-text-fill-color:#f8f6f0;
    background:#0d0d0d !important;
    border:1px solid rgba(212,175,55,.48) !important;
    border-radius:12px;
    padding:10px 28px 10px 12px;
    font-size:15px;
    font-weight:700;
    appearance:none;
    -webkit-appearance:none;
}
.exchange-chart-field .select-custom option,
#page-exchange .exchange-chart-controls .select-custom option { color:#111827; background:#ffffff; }
.exchange-chart-controls .btn { padding:10px 10px; min-height:44px; }
.exchange-chart-price { font-size:18px; font-weight:700; margin:8px 2px 10px; }
.exchange-chart-toolbar { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:-2px 2px 8px; color:var(--text-secondary); font-size:11px; }
.exchange-chart-zoom { width:34px; height:28px; border-radius:999px; border:1px solid rgba(212,175,55,.48); color:var(--text-primary); background:var(--bg-secondary); font-size:18px; line-height:1; }
.exchange-chart-wrap { height:430px; max-height:58vh; border:1px solid var(--border-color); border-radius:14px; overflow:auto hidden; background:var(--bg-secondary); -webkit-overflow-scrolling:touch; }
.exchange-chart-wrap canvas { display:block; min-height:100%; }
.exchange-chart-legend { display:flex; flex-wrap:wrap; gap:8px 12px; padding:10px 2px; font-size:11px; color:var(--text-secondary); }
.exchange-buy,.exchange-pnl-plus { color:var(--success); }.exchange-sell,.exchange-pnl-minus { color:var(--danger); }.exchange-limit { color:#a878ff; }.exchange-average { color:#52a7ff; }
.exchange-chart-bot { padding:12px; border-radius:12px; background:var(--bg-secondary); border:1px solid var(--border-color); line-height:1.65; }
.exchange-bot-summary { margin-bottom:10px; }
.exchange-bot-picker { display:grid; gap:8px; }
.exchange-bot-chip { width:100%; text-align:left; border:1px solid var(--border-color); border-radius:10px; padding:9px 10px; color:var(--text-primary); background:var(--bg-primary); display:grid; gap:2px; }
.exchange-bot-chip.active { border-color:var(--primary-color); box-shadow:0 0 0 1px var(--primary-color) inset; }
.exchange-bot-chip.inactive { opacity:.48; filter:grayscale(.75); }
.exchange-bot-chip.inactive:hover,.exchange-bot-chip.inactive:focus-visible { opacity:.82; filter:none; }
.exchange-chart-indicators { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 2px 8px; }
.exchange-indicator-chip { border:1px solid var(--border-color); border-radius:999px; padding:6px 12px; font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg-secondary); white-space:nowrap; transition:border-color .15s,color .15s,background .15s; }
.exchange-indicator-chip.active { color:#0b0b0b; background:var(--accent-primary); border-color:var(--accent-primary); }
.exchange-indicator-tf { height:30px; padding:0 22px 0 10px; font-size:11px; font-weight:700; border-radius:999px; border:1px solid rgba(212,175,55,.48); background:#0d0d0d; color:#f8f6f0; -webkit-text-fill-color:#f8f6f0; appearance:none; -webkit-appearance:none; }
.exchange-indicator-badge { display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin:0 2px 10px; padding:8px 12px; border-radius:10px; border:1px solid var(--border-color); background:var(--bg-secondary); font-size:12px; }
.exchange-indicator-badge strong { color:var(--text-secondary); font-weight:700; }
.exchange-indicator-badge span { font-weight:700; }
.exchange-indicator-badge em { flex-basis:100%; font-style:normal; color:var(--text-secondary); font-size:11px; }
.exchange-indicator-badge.exchange-signal-buy { border-color:rgba(32,191,107,.5); }
.exchange-indicator-badge.exchange-signal-buy span { color:var(--success); }
.exchange-indicator-badge.exchange-signal-sell { border-color:rgba(239,83,80,.5); }
.exchange-indicator-badge.exchange-signal-sell span { color:var(--danger); }
.exchange-indicator-badge.exchange-signal-neutral span { color:var(--text-secondary); }
.order-auto-system-note { gap:4px; margin:4px 0 16px; padding:14px; border:1px solid rgba(212,175,55,.42); border-radius:14px; background:rgba(212,175,55,.08); }
.order-auto-system-note strong { color:var(--text-primary); font-size:14px; }
.order-auto-system-note span { color:var(--text-secondary); font-size:12px; line-height:1.45; }

/* auto-create-telegram-fit-v4: учитывает safe-area Telegram на iPhone. */
.order-auto-intro { display: none; }
.order-auto-step-one { display: contents; }
#page-create-bot .form-card.order-auto-compact {
    padding: 8px;
    margin-bottom: 4px;
}
#page-create-bot .order-auto-compact .input-group { margin-bottom: 4px; }
/* order-auto-intro-readable-v1: крупная подсказка, компактная кнопка рекомендаций. */
#page-create-bot .order-auto-compact .order-auto-intro {
    display: block; margin: 0 0 4px; padding: 7px 9px; border-radius: 10px;
    color: var(--text-secondary); background: color-mix(in srgb, var(--accent-primary) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    font-size: 10.5px; line-height: 1.3;
}
#page-create-bot .order-auto-compact .bot-edit-id-group {
    display: flex; align-items: baseline; gap: 6px; min-width: 0;
}
#page-create-bot .order-auto-compact .bot-edit-id-group > label {
    flex: 0 0 auto; margin: 0; white-space: nowrap;
}
#page-create-bot .order-auto-compact .bot-edit-id-value {
    min-width: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-secondary, #888); font-family: monospace; font-size: 12.5px; user-select: all;
}
#page-create-bot .order-auto-compact .order-auto-intro strong { color: var(--text-primary); font-weight: 800; }
#page-create-bot .order-auto-compact .order-auto-profi-recs {
    display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap;
}
#page-create-bot .order-auto-compact .order-intro-recs-btn {
    margin-left: 0; padding: 1px 7px; gap: 3px; font-size: 9px; line-height: 1.3;
}
#page-create-bot .order-auto-compact .step-badge {
    width: 20px; height: 20px; flex-basis: 20px; font-size: 11px;
}
#page-create-bot .order-auto-compact .order-auto-step-one {
    display: grid; gap: 4px; margin-bottom: 4px; padding: 6px;
    border: 1px solid var(--border-color); border-radius: 12px;
}
#page-create-bot .order-auto-compact .order-auto-step-one > .input-group { margin-bottom: 0; }
#page-create-bot .order-auto-compact #order-bot-asset-group {
    display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; gap: 8px;
}
#page-create-bot .order-auto-compact #order-bot-asset-group > label { margin: 0; gap: 5px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-selector { position: relative; padding: 4px 8px; min-height: 38px; overflow: hidden; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-info { gap: 7px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-icon { width: 30px; height: 30px; font-size: 18px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-icon .asset-icon-img { width: 22px; height: 22px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-symbol { font-size: 14px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-price { font-size: 11px; }
#page-create-bot .order-auto-compact #order-bot-asset-group .asset-dropdown { grid-column: 1 / -1; }
#page-create-bot #order-bot-asset-group.follow-locked-readonly .asset-selector {
    pointer-events: none;
    cursor: default;
    opacity: 0.92;
}
#page-create-bot #order-bot-asset-group.follow-locked-readonly .asset-chevron {
    display: none;
}
.asset-price-loader { display: none; }
#page-create-bot .order-auto-compact .asset-selector.is-loading .asset-price-loader {
    position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 7px;
    color: var(--text-primary); background: color-mix(in srgb, var(--bg-secondary) 92%, transparent); font-size: 11px; font-weight: 700;
}
#page-create-bot .order-auto-compact .asset-price-loader i {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
    border-top-color: var(--accent-primary); animation: autoAssetSpin .7s linear infinite;
}
@keyframes autoAssetSpin { to { transform: rotate(360deg); } }
#page-create-bot .order-auto-compact #order-profile-mode-block {
    display: grid; grid-template-columns: 78px minmax(0,1fr); align-items: center; gap: 8px;
}
#page-create-bot .order-auto-compact #order-profile-mode-block > label { margin: 0; font-weight: 700; }
#page-create-bot .order-auto-compact .order-profile-mode-hint {
    display: block; grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.2;
}
#page-create-bot .order-auto-compact #order-profile-mode-block .cycle-mode-radios {
    grid-column: 2; grid-row: 1; margin: 0; gap: 6px; flex-wrap: nowrap;
}
#page-create-bot .order-auto-compact #order-profile-mode-block .cycle-mode-option,
#page-create-bot .order-auto-compact .order-capital-mode-options .cycle-mode-option {
    min-width: 0; margin: 0; padding: 6px 8px; border-radius: 9px; font-size: 12px; gap: 5px;
}
#page-create-bot .order-auto-compact #order-profile-mode-block .cycle-mode-option input,
#page-create-bot .order-auto-compact .order-capital-mode-options .cycle-mode-option input { width: 14px; height: 14px; }
#page-create-bot .order-auto-compact #order-profile-mode-block .cycle-mode-option {
    /* flex, не grid: у пункта "Профи" 3 ребёнка (radio + текст + подсказка ✍️),
       а grid-template-columns был рассчитан на 2 — третий проваливался на
       новую строку и торчал из пилюли снизу. */
    display: flex; flex-wrap: nowrap; place-content: center; align-items: center;
    column-gap: 8px; height: 38px; white-space: nowrap;
}
#page-create-bot .order-auto-compact #order-profile-mode-block .cycle-mode-option input {
    flex: 0 0 auto; margin: 0;
}
#page-create-bot .order-auto-compact #order-bot-capital-mode-group {
    display: grid; grid-template-columns: minmax(154px,.95fr) minmax(0,1.05fr); gap: 3px 6px;
    padding: 6px; border: 1px solid var(--border-color); border-radius: 12px;
}
#page-create-bot .order-auto-compact #order-bot-capital-mode-group > label { grid-column: 1 / -1; margin: 0; gap: 5px; }
#page-create-bot .order-auto-compact .order-capital-hint {
    display: block; grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.2;
}
#page-create-bot .order-auto-compact #order-bot-capital-mode-group .info-row { grid-column: 1 / -1; margin-bottom: 0 !important; padding: 3px 0; font-size: 11px; }
#page-create-bot .order-auto-compact .order-capital-mode-options { display: flex; gap: 6px; }
#page-create-bot .order-auto-compact .order-capital-mode-options .cycle-mode-option {
    display: grid; grid-template-columns: 18px max-content; place-content: center; align-items: center;
    column-gap: 8px; height: 38px; white-space: nowrap;
}
#page-create-bot .order-auto-compact .order-capital-mode-options .cycle-mode-option input {
    flex: 0 0 auto; margin: 0; justify-self: center;
}
#page-create-bot .order-auto-compact #order-bot-cap-fixed-wrap,
#page-create-bot .order-auto-compact #order-bot-cap-percent-wrap {
    grid-template-columns: minmax(0,1fr) auto; gap: 5px; margin-top: 0 !important;
}
#page-create-bot .order-auto-compact #order-bot-cap-fixed-wrap .order-risk-advanced-field > span,
#page-create-bot .order-auto-compact #order-bot-cap-percent-wrap .order-risk-advanced-field > span { display: none; }
#page-create-bot .order-auto-compact #order-bot-capital-mode-group input.select-custom { min-height: 38px; padding: 7px 10px; font-size: 14px; }
#page-create-bot .order-auto-compact #order-bot-fixed-cap-from-ex-btn {
    min-height: 38px; padding: 7px 10px; white-space: nowrap; font-size: 11px;
    color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 9px;
}
#page-create-bot .order-auto-compact .order-capital-choice-hint {
    grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.3;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group {
    display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 3px 8px;
    padding: 6px; border: 1px solid var(--border-color); border-radius: 12px;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group > label { grid-column: 1 / -1; margin: 0; gap: 5px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-percent-hint {
    display: block; grid-column: 1 / -1; margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.2;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-container,
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-hint { display: none; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-row { margin: 0; gap: 3px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-auto-field-label {
    color: var(--text-secondary); font-size: 11px; font-weight: 600; white-space: nowrap;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-row,
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-auto-session-orders-row {
    display: grid; grid-template-columns: minmax(0,1fr) 72px; align-items: center; gap: 6px;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-auto-session-orders-row {
    grid-column: 1 / -1; margin-top: 2px;
    display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,auto); align-items: center; gap: 6px;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-auto-session-orders-input {
    width: 56px; min-height: 36px; padding: 5px; font-size: 15px; text-align: center;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-input { width: 100%; height: 36px; padding: 5px 22px 5px 5px; font-size: 15px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-with-suffix { width: 72px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .slider-value-suffix { font-size: 13px; right: 7px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .percent-presets { margin: 0; gap: 4px; flex-wrap: nowrap; justify-content: flex-end; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .percent-preset-btn { padding: 4px 7px; font-size: 10px; }
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-desired-percent-field {
    grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1fr) 76px;
    align-items: center; gap: 8px; margin: 0;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-desired-percent-field > span {
    margin: 0; color: var(--text-secondary); font-size: 11px;
}
#page-create-bot .order-auto-compact #order-bot-order-percent-group .order-desired-percent-field .select-custom {
    min-height: 34px; padding: 5px 8px; text-align: center;
}
#page-create-bot #order-bot-order-percent-group .order-auto-session-orders-row {
    display: grid; grid-template-columns: minmax(0,1fr) 120px minmax(0,auto); align-items: center; gap: 10px;
    margin-top: 10px;
}
#page-create-bot #order-bot-order-percent-group .order-auto-session-orders-hint {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
#page-create-bot #order-bot-order-percent-group .order-auto-session-orders-hint[data-state="warn"] {
    color: var(--warning, #f0b429);
}
#page-create-bot #order-bot-order-percent-group .order-auto-field-label {
    color: var(--text-secondary); font-size: 13px; font-weight: 600;
}
#page-create-bot #order-bot-order-percent-group .order-auto-session-orders-input {
    width: 100%; min-height: 40px;
}
#page-create-bot .form-card--pro #order-bot-order-percent-group .slider-value-row {
    display: grid; grid-template-columns: minmax(0,1fr) 88px; align-items: center; gap: 10px;
    margin-top: 8px;
}
#page-create-bot .form-card--pro #order-bot-order-percent-group .slider-value-with-suffix { width: 88px; }
#page-create-bot .form-card--pro .order-vp-card {
    margin: 0;
    padding: 10px 12px;
}
.grid-floating-switch {
    margin: 8px 0 14px;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
#page-create-bot .order-auto-compact .order-auto-order-facts {
    grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
    padding-top: 2px; border-top: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
}
#page-create-bot .order-auto-compact .order-auto-order-summary,
#page-create-bot .order-auto-compact .order-auto-order-minimum {
    margin: 0; color: var(--accent-primary); font-size: 10px; font-weight: 700; text-align: center; line-height: 1.3;
}
#page-create-bot .order-auto-compact .order-auto-order-summary[data-state="warn"] { color: var(--warning, #f0b429); }
#page-create-bot .order-auto-compact #order-min-amount-hint { grid-column: 1 / -1; margin: 0; }
#page-create-bot .order-auto-compact .order-auto-system-note { display: grid; gap: 1px; margin: 0 0 4px; padding: 5px 8px; border-radius: 10px; }
#page-create-bot .order-auto-compact .order-auto-system-note strong { font-size: 12px; }
#page-create-bot .order-auto-compact .order-auto-system-note span { display: block; font-size: 10px; line-height: 1.2; }
#page-create-bot .order-auto-compact #order-bot-submit-btn { min-height: 44px; padding: 9px 14px; font-size: 14px; }
#page-create-bot .order-auto-compact .order-auto-choice-summary {
    margin: 0 0 4px; padding: 5px 8px; border: 1px solid var(--border-color); border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
}
#page-create-bot .order-auto-compact .order-auto-choice-summary h3 { margin: 0 0 2px; font-size: 12px; line-height: 1.1; color: var(--text-primary); }
#page-create-bot .order-auto-compact .order-auto-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
#page-create-bot .order-auto-compact .order-auto-choice-grid > div { min-width: 0; padding: 4px; border-radius: 8px; background: var(--bg-primary); }
#page-create-bot .order-auto-compact .order-auto-choice-grid span { display: block; color: var(--text-secondary); font-size: 8px; line-height: 1.2; }
#page-create-bot .order-auto-compact .order-auto-choice-grid strong { display: block; margin-top: 3px; color: var(--text-primary); font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; }
.admin-auto-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-auto-summary { margin:0 0 14px; padding:11px 12px; border-radius:12px; color:var(--text-primary); background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.32); font-size:13px; font-weight:700; line-height:1.45; }
.admin-auto-section { margin:12px 0; padding:14px; border:1px solid var(--border-color); border-radius:14px; background:color-mix(in srgb, var(--bg-secondary) 92%, white 8%); }
.admin-auto-section--signal { border-color:color-mix(in srgb, #48a7ff 45%, var(--border-color)); }
.admin-auto-section--rebuy { border-color:color-mix(in srgb, #2fcf86 45%, var(--border-color)); }
.admin-auto-section--exit { border-color:color-mix(in srgb, #d4af37 55%, var(--border-color)); }
.admin-auto-section h3 { margin:0 0 5px; color:var(--text-primary); font-size:15px; }
.admin-auto-section > p { margin:0 0 12px; color:var(--text-secondary); font-size:12px; line-height:1.45; }
.admin-auto-switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; padding:10px 11px; border-radius:10px; background:var(--bg-primary); color:var(--text-primary); font-size:12px; }
.admin-auto-switch-row label { display:flex; align-items:center; gap:8px; font-weight:700; }
.admin-auto-switch-row strong { color:var(--text-secondary); font-size:11px; text-align:right; }
.admin-auto-switch-row--primary { border:1px solid rgba(212,175,55,.42); }
.admin-auto-switches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; color:var(--text-primary); font-size:13px; }
.admin-auto-switches label { display:flex; align-items:center; gap:8px; }
.settings-actions-row { display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width: 430px) { .admin-auto-grid,.admin-auto-switches { grid-template-columns:1fr; } .admin-auto-section { padding:12px; } .admin-auto-switch-row { align-items:flex-start; flex-direction:column; } .admin-auto-switch-row strong { text-align:left; } .settings-actions-row .btn { width:100%; } }
.exchange-bot-chip strong { font-size:13px; }
.exchange-bot-chip span,.exchange-bot-chip em { font-size:11px; color:var(--text-secondary); font-style:normal; }
@media (max-width: 430px) {
    .exchange-chart-controls { grid-template-columns:minmax(0,1fr) 82px; }
    .exchange-chart-controls .btn { grid-column:1 / -1; }
    .exchange-chart-wrap { height:460px; max-height:56vh; }
}
@media (min-width: 760px) {
    .exchange-chart-wrap { height:520px; max-height:62vh; }
}

/* ===== МОДАЛЬНОЕ ОКНО ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: var(--bg-card);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.btn-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 20px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.checkbox-group label {
    font-size: 14px;
    cursor: pointer;
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 480px) {
    .content-area {
        padding: 12px;
    }
    
    .welcome-card,
    .form-card,
    .settings-section {
        padding: 16px;
    }
    
    .balance-value,
    .profit-value {
        font-size: 28px;
    }
}

/* ===== КНОПКИ ПОДДЕРЖКИ ===== */
.support-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-support {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-primary);
}

.btn-support:hover {
    background: var(--bg-hover);
    transform: translateY(-2px);
}

.btn-support .btn-icon {
    font-size: 20px;
}

.btn-support .btn-text {
    font-size: 14px;
    font-weight: 500;
}

/* ===== СЕЛЕКТОР АКТИВА ===== */
.asset-selector {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
}

.asset-selector:hover {
    background: var(--bg-hover);
}

.asset-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.asset-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border-radius: 8px;
    position: relative;
}

.asset-icon .asset-icon-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    display: none;
}

.asset-icon.asset-icon--has-img .asset-icon-img {
    display: block;
}

.asset-icon.asset-icon--has-img .asset-icon-emoji {
    display: none !important;
}

.asset-icon:not(.asset-icon--has-img) .asset-icon-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-symbol {
    font-size: 18px;
    font-weight: 600;
}

.asset-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.asset-price span:first-child {
    font-size: 16px;
    font-weight: 600;
}

.asset-price span:last-child {
    font-size: 14px;
    color: var(--text-secondary);
}

.asset-chevron {
    color: var(--text-secondary);
    font-size: 12px;
}

.asset-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-top: 8px;
    z-index: 1000;
    max-height: min(52vh, 280px);
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
}

@media (min-width: 380px) {
    .asset-dropdown {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.asset-option {
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 8px;
    min-width: 0;
    text-align: center;
}

.asset-option:hover {
    background: var(--bg-hover);
}

.asset-option__sym {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.asset-option-icon {
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 6px;
    flex-shrink: 0;
    position: relative;
}

.asset-option-icon .asset-option-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: none;
}

.asset-option-icon.asset-option-icon--has-img .asset-option-img {
    display: block;
}

.asset-option-icon.asset-option-icon--has-img .asset-option-emoji {
    display: none !important;
}

.bot-card-title-asset--img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
}

.bot-card-coin-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    vertical-align: middle;
    display: block;
}

.history-asset-icon-wrap {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.history-coin-img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* ===== СТАТУС БОТА (ЗЕЛЕНАЯ КАРТОЧКА) ===== */
.bot-status-card {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #45a049 100%);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    color: white;
}

.bot-status-card--warn {
    background: linear-gradient(135deg, #d48806 0%, #b45309 100%);
}

.order-amount-warn {
    color: var(--danger, #e53935);
    font-weight: 600;
}

.order-amount-muted {
    font-size: 0.85em;
    color: var(--text-secondary);
    font-weight: 400;
}

.bot-status-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bot-status-icon {
    font-size: 32px;
}

.bot-status-text {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
}

.bot-status-subline {
    margin: 6px 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
}

.btn-delete-bot {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.2s;
}

.btn-delete-bot:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bot-status-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bot-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.bot-status-row span:first-child {
    opacity: 0.9;
}

.bot-status-row span:last-child {
    font-weight: 600;
    font-size: 16px;
}

/* ===== СЕЛЕКТОР ДАТ ===== */
.date-range-selector {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.date-range-selector:hover {
    background: var(--bg-hover);
}

.date-icon {
    font-size: 20px;
}

.date-range-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

/* ===== БАННЕР УСПЕХА API ===== */
.api-success-banner {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid var(--accent-primary);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--accent-primary);
}

.success-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}

/* ===== ИКОНКИ АКТИВОВ ===== */
.asset-icon-btc {
    color: #f7931a;
}

.asset-icon-eth {
    color: #627eea;
}

.asset-icon-sol {
    color: #9945ff;
}

.asset-icon-ton {
    color: #0088cc;
}

.asset-icon-bnb {
    color: #f3ba2f;
}

/* ===== СПЕЦИФИЧНЫЕ СТИЛИ ДЛЯ СВЕТЛОЙ ТЕМЫ ===== */
[data-theme="light"] .welcome-card,
[data-theme="light"] .form-card,
[data-theme="light"] .settings-section,
[data-theme="light"] .settings-card-v2,
[data-theme="light"] .bot-card,
[data-theme="light"] .history-table {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .status-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .btn-support {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .btn-support:hover {
    background: var(--bg-hover);
}

[data-theme="light"] .exchange-item {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .exchange-item:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

[data-theme="light"] .asset-selector {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .asset-selector:hover {
    border-color: var(--accent-primary);
}

[data-theme="light"] .date-range-selector {
    border: 1px solid var(--border-color);
}

[data-theme="light"] .date-range-selector:hover {
    border-color: var(--accent-primary);
}

[data-theme="light"] .table-header {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

[data-theme="light"] .table-row {
    border-bottom: 1px solid var(--border-color);
}

[data-theme="light"] .table-row:hover {
    background: var(--bg-hover);
}

[data-theme="light"] .bot-info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .slider-dot {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
}

[data-theme="light"] .slider-dot.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="light"] .input-group input,
[data-theme="light"] .select-custom {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .input-group input:focus,
[data-theme="light"] .select-custom:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

[data-theme="light"] .slider-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .slider-btn:hover {
    background: var(--bg-hover);
}

[data-theme="light"] .tab-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .tab-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="light"] .modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .asset-dropdown {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .bottom-nav {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== УТИЛИТЫ ===== */
.hidden {
    display: none !important;
}

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

.mt-16 {
    margin-top: 16px;
}

.mb-16 {
    margin-bottom: 16px;
}

/* ===== СТИЛИ ДЛЯ GRIDBOT ФОРМЫ ===== */
.amount-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 4px;
}

.amount-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 16px;
    font-size: 16px;
    outline: none;
    color: var(--text-primary);
}

.amount-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 4px;
}

.amount-btn {
    width: 32px;
    height: 32px;
    background: var(--bg-hover);
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.amount-btn:hover {
    background: var(--accent-primary);
    color: white;
}

.amount-btn:active {
    transform: scale(0.95);
}

.balance-info-grid {
    font-size: 14px;
}

.balance-info-grid .info-icon {
    margin-left: 4px;
    cursor: help;
    opacity: 0.6;
}

/* Цикл перезакупа (нейтрально / Бычка / Медвежка) */
.cycle-mode-group .cycle-mode-hint {
    font-size: 13px;
    color: var(--accent-secondary);
    margin: 4px 0 10px;
    line-height: 1.35;
}

.cycle-mode-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.cycle-mode-option {
    flex: 1 1 30%;
    min-width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.cycle-mode-option:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.cycle-mode-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.cycle-mode-option:has(input:checked) {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    background: var(--bg-hover);
}

.order-profile-pro-hand {
    margin-left: 6px;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: middle;
}

.cycle-mode-card-example {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px dashed var(--border-color);
    font-variant-numeric: tabular-nums;
}

.cycle-mode-market-panel {
    margin-top: 4px;
}

.cycle-mode-market-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    background: var(--card-bg-secondary, rgba(255, 255, 255, 0.04));
    font-size: 15px;
    font-weight: 600;
}

.cycle-mode-market-badge--bull {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.08);
}

.cycle-mode-market-badge--bear {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.cycle-mode-market-badge--neutral {
    border-color: rgba(148, 163, 184, 0.25);
}

.cycle-mode-market-badge__icon {
    font-size: 22px;
    line-height: 1;
}

.cycle-mode-footnote {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 4px;
}

.order-risk-advanced .cycle-mode-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 4px 0 10px;
    line-height: 1.35;
}

.order-min-amount-hint {
    margin-top: 8px;
    margin-bottom: 10px;
    color: var(--text-primary);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--bg-secondary);
    line-height: 1.45;
    font-size: 13px;
}

.order-min-amount-hint--below-min {
    border-color: rgba(229, 57, 53, 0.55);
    background: rgba(229, 57, 53, 0.08);
}

.order-sizing-bad-value {
    color: var(--danger, #e53935);
    font-weight: 700;
}

.order-sizing-min-value {
    color: var(--text-primary);
    font-weight: 600;
}

.bqc-value--below-min .order-sizing-bad-value {
    font-size: 1.05em;
}

.order-risk-advanced-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 10px 0 12px;
}

@media (min-width: 520px) {
    .order-risk-advanced-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.order-risk-advanced-field span:not(.info-icon) {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.order-risk-advanced-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.35;
}

.order-risk-advanced-field__hint {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.35;
}

.order-risk-advanced-field .select-custom {
    width: 100%;
    box-sizing: border-box;
}

/* История: быстрый выбор периода */
.history-range-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.history-chip {
    flex: 1 1 auto;
    min-width: 40px;
    padding: 7px 8px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.history-chip:hover {
    border-color: var(--accent-primary);
}

.history-chip.active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 22%, transparent);
}

[data-theme="dark"] .history-chip.active {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

.trading-pairs-hint {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    line-height: 1.45;
}

.trading-pairs-hint--admin {
    font-size: 13px;
    margin-bottom: 14px;
}

/* ===== НАСТРОЙКИ (fintech mobile) ===== */
.content-area--settings {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.page--settings {
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
    box-sizing: border-box;
}

.settings-page {
    padding: 12px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    max-width: 100%;
    box-sizing: border-box;
}

.settings-page-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.top-bar--settings .top-bar-actions {
    display: none;
}

.top-bar--settings .top-bar-title h1 {
    font-size: clamp(22px, 5.5vw, 28px);
    font-weight: 700;
}

.top-bar--settings .subtitle {
    display: none;
}

.settings-card.settings-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 16px;
    margin-bottom: 0;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--border-color) 40%, transparent);
}

.settings-card-v2--pairs {
    border-color: color-mix(in srgb, var(--accent-primary) 38%, var(--border-color));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent-primary) 10%, var(--bg-card)) 0%,
        var(--bg-card) 56px
    );
}

.settings-card-v2--admin {
    border-color: color-mix(in srgb, var(--accent-warning, #e6a817) 42%, var(--border-color));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent-warning, #e6a817) 8%, var(--bg-card)) 0%,
        var(--bg-card) 64px
    );
}

.admin-settings-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-subsection__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.admin-subsection__sub {
    margin: 0 0 10px;
}

.admin-subsection--divider {
    padding-top: 18px;
    border-top: 1px solid var(--border-color);
}

.admin-beta-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-beta-list-head__count {
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
    color: var(--text-primary);
}

.admin-beta-testers-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-beta-empty {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-beta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-primary) 8%);
}

.admin-beta-row__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-width: 0;
}

.admin-beta-row__login {
    font-weight: 650;
    font-size: 14px;
}

.admin-beta-row__name {
    font-size: 13px;
    color: var(--text-secondary);
}

.admin-beta-row__note {
    font-size: 12px;
    color: var(--text-secondary);
}

.admin-beta-row__meta {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.85;
}

.admin-beta-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-beta-badge--tg {
    background: color-mix(in srgb, #2aabee 18%, transparent);
    color: color-mix(in srgb, #2aabee 85%, var(--text-primary));
}

.admin-beta-row__btn {
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
}

.settings-card-v2__head {
    margin-bottom: 10px;
}

.settings-card-v2__body {
    min-width: 0;
}

.settings-card-v2 .input-group--compact {
    margin-bottom: 0;
}

.settings-card-v2__title {
    margin: 0 0 4px 0;
    font-size: clamp(20px, 4.5vw, 22px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.2;
}

.settings-card-v2__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.settings-card-v2__body--tight {
    padding-top: 0;
}

.settings-body-text {
    margin: 0 0 8px 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
}

.settings-body-text--muted {
    color: var(--text-secondary);
}

.settings-micro {
    margin: 0 0 8px 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.settings-micro--tight {
    margin-bottom: 6px;
}

.settings-kicker {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.settings-compact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.settings-pin-status {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 8px 0 10px;
}

.security-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.security-actions--single {
    grid-template-columns: 1fr;
}

#page-settings .settings-btn {
    min-height: 48px;
    height: auto;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    box-sizing: border-box;
}

#page-settings .settings-btn--block {
    width: 100%;
    margin-top: 8px;
}

.settings-btn-row--modal,
.reserve-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 12px;
}

.reserve-modal-actions {
    justify-content: stretch;
}

.reserve-modal-actions .reserve-modal-btn {
    flex: 1 1 calc(50% - 5px);
    min-height: 48px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
}

.settings-exchange-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.exchange-row {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px;
    margin-top: 10px;
}

.exchange-row:first-child {
    margin-top: 0;
}

.exchange-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
}

.exchange-row__name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.exchange-row__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
}

.exchange-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.exchange-dot--ok {
    background: #22c55e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 26%, transparent);
}

.exchange-dot--off {
    background: color-mix(in srgb, var(--text-secondary) 55%, var(--bg-primary));
}

.exchange-dot--err {
    background: var(--accent-danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-danger) 25%, transparent);
}

.exchange-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.exchange-badge--ok {
    color: #15803d;
    border-color: color-mix(in srgb, #22c55e 45%, var(--border-color));
    background: color-mix(in srgb, #22c55e 12%, var(--bg-secondary));
}

.exchange-badge--err {
    color: var(--accent-danger);
    border-color: color-mix(in srgb, var(--accent-danger) 40%, var(--border-color));
    background: color-mix(in srgb, var(--accent-danger) 10%, var(--bg-secondary));
}

.exchange-badge--muted {
    color: var(--text-secondary);
}

.exchange-row__reserve {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 10px 0 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.exchange-row__reserve strong {
    color: var(--text-primary);
    font-weight: 700;
}

.exchange-row__err {
    font-size: 13px;
    color: var(--accent-danger);
    margin: 0 0 8px;
    line-height: 1.35;
}

.exchange-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.exchange-actions--single {
    grid-template-columns: 1fr;
}

.settings-accordion {
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 4px 10px 8px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--accent-primary));
}

.settings-accordion__summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    padding: 8px 4px;
    list-style: none;
    color: var(--text-primary);
}

.settings-accordion__summary::-webkit-details-marker {
    display: none;
}

.settings-accordion__body {
    padding: 4px 0 6px;
}

.settings-notify-group {
    padding: 0 0 4px;
}

.notification-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}

.notification-row:last-child {
    border-bottom: none;
}

.notification-row__text {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

#page-settings .switch.switch--setting {
    flex-shrink: 0;
    transform: scale(0.95);
    transform-origin: center right;
}

.settings-compact-field {
    margin-bottom: 12px;
}

.settings-label-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

#page-settings .settings-input-one,
#page-settings .input-group--compact input,
#reserve-modal #reserve-modal-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
}

#page-settings .select-custom,
#page-settings .select-custom--compact {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.settings-save-notify {
    margin-top: 12px;
}

.settings-switch-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
}

.settings-switch-row__text {
    flex: 1 1 200px;
    min-width: 0;
}

.settings-switch-row__tail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.switch--compact {
    transform: scale(0.95);
    transform-origin: center right;
}

.settings-interface-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.theme-segmented {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

@media (min-width: 400px) {
    .theme-segmented {
        grid-template-columns: repeat(4, 1fr);
    }
}

.theme-option {
    height: 42px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.theme-option:hover {
    color: var(--text-primary);
}

.theme-option.is-active {
    background: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--accent-primary) 45%, transparent);
}

.settings-pairs-add-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 8px;
}

.settings-pairs-add-grid--simple {
    grid-template-columns: 1fr;
}

.settings-pairs-add-grid > .btn {
    grid-column: 1 / -1;
    width: 100%;
    justify-self: stretch;
}

@media (max-width: 420px) {
    .settings-pairs-add-grid:not(.settings-pairs-add-grid--simple) {
        grid-template-columns: 1fr;
    }
}

#page-settings .input-group--compact label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
}

.trading-pair-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 12px;
    margin-top: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
    gap: 10px;
}

.trading-pair-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 4px;
}

.trading-pair-row__btn {
    width: auto;
    flex: 0 0 auto;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
}

.bots-archived-bar {
    margin: 0;
    flex-shrink: 0;
}

.archived-bots-open-btn {
    width: 100%;
    box-sizing: border-box;
}

.bots-archive-chip {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.bots-archive-chip__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25em;
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}

.modal-content--archived-bots {
    max-width: 420px;
    width: min(420px, 94vw);
    max-height: min(560px, 88vh);
    display: flex;
    flex-direction: column;
}

.modal-content--bulk-configure {
    max-width: 420px;
    width: min(420px, 94vw);
}

.bulk-apply-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.bulk-apply-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-content--bulk-unload {
    max-width: min(520px, 96vw);
    width: min(520px, 96vw);
    max-height: min(640px, 90vh);
    display: flex;
    flex-direction: column;
}

.modal-content--bulk-unload .modal-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.bulk-unload-hint {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 12px;
    line-height: 1.35;
}

.bulk-unload-pct-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 8px 0 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface-2, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.bulk-unload-pct-row__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #aab2c0);
    flex: 1;
    min-width: 0;
}

.bulk-unload-pct-row__input {
    width: 72px;
    max-width: 28vw;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
    background: var(--surface-1, rgba(0, 0, 0, 0.2));
    color: var(--text-primary, #fff);
}

.bulk-unload-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-secondary));
    border: 1px solid var(--border-color);
}

.bulk-unload-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
}

.bulk-unload-toolbar__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.btn--compact {
    padding: 6px 10px;
    font-size: 12px;
    min-height: 32px;
}

.bulk-unload-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    max-height: min(320px, 48vh);
    overflow-y: auto;
    margin-top: 10px;
    padding: 2px 2px 4px;
    -webkit-overflow-scrolling: touch;
}

.bulk-unload-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 10px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bulk-unload-item:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
}

.bulk-unload-item:has(input:checked) {
    border-color: color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
}

.bulk-unload-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}

.bulk-unload-item__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bulk-unload-item__pair {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulk-unload-item__meta {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archived-bots-modal-list {
    margin-top: 10px;
    max-height: min(360px, 52vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.archived-bot-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-primary);
}

.archived-bot-row:last-child {
    margin-bottom: 0;
}

.archived-bot-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.archived-bot-row__pair {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
}

.archived-bot-row__meta {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.archived-bot-row__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

.archived-bot-row__btn {
    width: auto;
    min-width: 118px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
}

.admin-extra-pairs-list--compact {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.modal.modal--settings-sheet {
    align-items: flex-end;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal.modal--settings-sheet .modal-content--reserve {
    max-width: 100%;
    width: 100%;
    border-radius: 18px 18px 0 0;
    margin-top: auto;
}

@media (min-width: 480px) {
    .modal.modal--settings-sheet {
        align-items: center;
        padding-bottom: 12px;
    }

    .modal.modal--settings-sheet .modal-content--reserve {
        border-radius: 18px;
        max-width: 400px;
    }
}

.settings-warn {
    font-size: 13px;
    color: var(--accent-warning);
    margin: 8px 0 0;
}

.settings-toast-host {
    position: fixed;
    left: 50%;
    bottom: 88px;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    max-width: min(420px, 92vw);
}

.settings-toast {
    pointer-events: none;
    background: color-mix(in srgb, var(--bg-secondary) 92%, #111);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    animation: settingsToastIn 0.22s ease-out;
}

.settings-toast--success {
    border-color: color-mix(in srgb, #10b981 55%, var(--border-color));
    color: color-mix(in srgb, #10b981 80%, var(--text-primary));
}

.settings-toast--error {
    border-color: color-mix(in srgb, #ef4444 55%, var(--border-color));
    color: color-mix(in srgb, #ef4444 85%, var(--text-primary));
}

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

[data-theme="dark"] .settings-card-v2--pairs {
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--accent-primary) 14%, var(--bg-card)) 0%,
        var(--bg-card) 64px
    );
}

[data-theme="dark"] .exchange-row,
[data-theme="dark"] .trading-pair-row,
[data-theme="dark"] .archived-bot-row {
    background: var(--bg-secondary);
}

[data-theme="dark"] #page-settings .settings-input-one,
[data-theme="dark"] #page-settings .input-group--compact input,
[data-theme="dark"] #page-settings .select-custom {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .theme-segmented {
    background: var(--bg-secondary);
}

[data-theme="dark"] .theme-option:not(.is-active) {
    color: var(--text-secondary);
}

[data-theme="dark"] #reserve-modal #reserve-modal-input {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.exchange-row__name .exchange-logo {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

@media (max-width: 380px) {
    .exchange-row__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .exchange-badge {
        align-self: flex-start;
    }
}

/* ===== ПАРТНЁРКА ===== */
.partner-how {
    margin-bottom: 14px;
}

.partner-how--fold > summary.partner-how__title {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.partner-how--fold > summary.partner-how__title::-webkit-details-marker {
    display: none;
}

.partner-how--fold > summary.partner-how__title::after {
    content: '▾';
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.partner-how--fold:not([open]) > summary.partner-how__title::after {
    transform: rotate(-90deg);
}

.partner-how__body {
    padding-top: 10px;
}

.partner-how__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.partner-how--fold .partner-how__title {
    margin-bottom: 0;
}

.partner-how__lead,
.partner-how__foot {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}

.partner-how__foot {
    margin-bottom: 0;
}

.partner-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.partner-level {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-color));
}

.partner-level__pct {
    font-size: 20px;
    font-weight: 900;
    color: var(--accent-primary);
    line-height: 1;
}

.partner-level__lbl {
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    color: var(--text-secondary);
    line-height: 1.25;
}

@media (max-width: 380px) {
    .partner-levels {
        grid-template-columns: 1fr;
    }
}

.partner-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 14px;
    color: #ffffff;
    background:
        radial-gradient(circle at 85% 0%, rgba(52, 211, 153, 0.38), transparent 30%),
        linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #111827 100%);
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.28);
}

.partner-hero__glow {
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -80px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.24);
    filter: blur(6px);
}

.partner-hero__top,
.partner-card__header,
.partner-inviter,
.partner-link-box,
.partner-row {
    display: flex;
    align-items: center;
}

.partner-hero__top {
    position: relative;
    margin-bottom: 14px;
}

.partner-kicker {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 6px;
}

.partner-user {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.partner-user-hint {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 2px;
}

.partner-user span {
    color: #34d399;
}

.partner-badge {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(10px);
}

.partner-earn-section {
    position: relative;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.partner-earn-section--trade {
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.14);
}

.partner-earn-label,
.partner-hero__note {
    position: relative;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
}

.partner-earn-value {
    position: relative;
    font-size: 34px;
    line-height: 1.08;
    font-weight: 900;
    margin: 4px 0 8px;
}

.partner-earn-value--compact {
    font-size: 26px;
}

.partner-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.partner-stat {
    padding: 12px 8px;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.partner-stat strong {
    display: block;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 5px;
}

.partner-stat span {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.74);
}

.partner-stat--active strong {
    color: #34d399;
}

.partner-stat--inactive strong {
    color: #f87171;
}

.partner-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: var(--shadow);
}

.partner-card__header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.partner-card h3 {
    margin: 0 0 4px;
    font-size: 17px;
}

.partner-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.35;
}

.partner-copy-btn {
    border: 0;
    border-radius: 10px;
    padding: 6px 10px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    white-space: nowrap;
}

.partner-link-block {
    margin-top: 12px;
}

.partner-link-block:first-of-type {
    margin-top: 0;
}

.partner-link-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 6px;
    min-width: 0;
}

.partner-link-block__title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-secondary);
    line-height: 1.3;
}

.partner-copy-btn--sm {
    padding: 6px 10px;
    font-size: 11px;
}

.partner-link-box {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.partner-link-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.14);
}

.partner-links-card {
    margin-bottom: 10px;
}

.partner-card__title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 6px;
    color: var(--text-primary);
}

.partner-links-lead {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.partner-link-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    background: #ffffff;
    color: #1e1b4b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
    cursor: text;
    opacity: 1;
    min-height: 48px;
}

[data-theme="dark"] .partner-link-field {
    background: #1e1630;
    color: #f5f3ff;
    border-color: color-mix(in srgb, #a78bfa 55%, #4c1d95);
}

.partner-link-field--err {
    color: var(--accent-danger);
    border-color: color-mix(in srgb, var(--accent-danger) 50%, transparent);
}

.partner-small-note {
    color: var(--accent-primary) !important;
    margin-top: 8px !important;
    font-weight: 600;
}

.partner-inviter {
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    color: var(--text-secondary);
    font-size: 13px;
}

.partner-inviter strong {
    color: var(--text-primary);
}

.partner-inviter__btn {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partner-inviter__btn:disabled {
    opacity: 0.65;
    cursor: default;
}

.partner-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.partner-row {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.partner-row__chat {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.partner-row__chat-title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.partner-row__mine-tag {
    margin-left: 6px;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
    color: var(--text-secondary);
    vertical-align: middle;
}

.partner-trunc-note {
    margin: 10px 4px 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.partner-row__chat-sub {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.partner-row__chat:active .partner-row__chat-title {
    opacity: 0.85;
}

.partner-row__status {
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    cursor: pointer;
    border: none;
    appearance: none;
}

.partner-row__status.is-active {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
}

.partner-empty {
    padding: 22px 12px;
    text-align: center;
    color: var(--text-secondary);
    border-radius: 14px;
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
}

.partner-empty__icon {
    font-size: 30px;
    margin-bottom: 8px;
}

.partner-empty strong,
.partner-empty span {
    display: block;
}

.partner-empty strong {
    color: var(--text-primary);
    margin-bottom: 4px;
}

.partner-info-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.partner-info-card__icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
}

.partner-info-card__single {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.45;
}

.partner-admin-filter {
    margin: 0 0 12px;
}

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

    .partner-earn-value {
        font-size: 30px;
    }
}

.admin-extra-pairs-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-extra-pair-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
}

.admin-extra-pair-row button {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.admin-extra-pair-row button:hover {
    border-color: var(--accent-primary);
}

/* ===== Режимы карточек «Мои боты» + ордера ===== */
.bots-top-toolbar {
    margin-bottom: 4px;
}

#page-bots .bots-type-tabs {
    margin: 0 0 8px;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
}

#page-bots .bots-type-tabs .tab-btn {
    flex: 1 1 auto;
    min-width: 108px;
    min-height: 48px;
    max-height: 52px;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

#page-bots .bots-type-tabs .tab-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-primary) 35%, transparent);
}

#page-bots .bots-type-tabs .tab-btn.active .bots-tab-count {
    color: inherit;
    opacity: 0.95;
}

.bots-tab-count {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

.bots-view-mode-bar {
    display: flex;
    align-items: stretch;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    width: 100%;
}

.bots-mode-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

@media (min-width: 520px) {
    .bots-mode-stack {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
    }

    .bots-mode-stack > .bots-field-label {
        flex: 0 0 auto;
        padding-top: 0;
    }

    .bots-mode-stack > .bots-mode-row {
        flex: 1 1 200px;
        min-width: 0;
    }
}

.bots-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, var(--text-secondary) 86%, var(--accent-primary) 14%);
    letter-spacing: 0.01em;
}

@media (min-width: 380px) {
    .bots-field-label {
        font-size: 14px;
    }
}

#page-bots #bots-exchange-filter-bar.exchange-filter-bar.bots-exchange-filter {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}

#page-bots .bots-exchange-filter-label {
    margin: 0;
}

#page-bots .bots-exchange-filter-list.segmented {
    display: flex;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 4px;
}

#page-bots .bots-exchange-filter-list:not(.bots-exchange-chips--scroll) .segment-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#page-bots .bots-exchange-filter-list.bots-exchange-chips--scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

#page-bots .bots-exchange-filter-list.bots-exchange-chips--scroll::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

#page-bots .bots-exchange-filter-list.bots-exchange-chips--scroll .segment-btn {
    flex: 0 0 auto;
    min-width: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bots-mode-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.bots-mode-segmented {
    flex: 1 1 auto;
    min-width: 0;
}

.bots-mode-info-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 800;
    font-style: italic;
    font-family: ui-serif, Georgia, serif;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.bots-mode-info-btn:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    color: var(--accent-primary);
}

.bots-view-mode-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.bots-view-mode-hint {
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
}

.bots-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 8px;
}

.bots-quick-actions-row--primary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}

.bots-quick-actions-row--primary .bots-archived-bar {
    flex-shrink: 0;
}

.bots-quick-actions-row--create {
    display: flex;
    width: 100%;
}

.bots-quick-actions-row--create .bots-toolbar-create-btn {
    width: 100%;
    flex: 1 1 auto;
    box-sizing: border-box;
}

.bots-bulk-controls-wrap {
    flex: 1 1 200px;
    min-width: 0;
}

.bots-bulk-details {
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    overflow: hidden;
}

.bots-bulk-summary {
    list-style: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--accent-primary) 12%);
    border: none;
    width: 100%;
    box-sizing: border-box;
}

.bots-bulk-summary::-webkit-details-marker {
    display: none;
}

.bots-bulk-panel {
    padding: 10px 10px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.bots-bulk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bots-bulk-btn {
    min-height: 50px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    line-height: 1.2;
}

.bots-bulk-btn--sellall {
    grid-column: 1 / -1;
    border-width: 2px;
    border-color: color-mix(in srgb, #ef4444 55%, var(--border-color));
    box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 18%, transparent);
}

.bots-how-it-works-link {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 6px 2px;
    border: none;
    background: transparent;
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bots-toolbar-create-btn {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.segmented {
    display: inline-flex;
    border-radius: 12px;
    padding: 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    gap: 2px;
}

.segmented--sm .segment-btn {
    padding: 6px 12px;
    font-size: 13px;
}

.segment-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
}

.segment-btn.active {
    background: var(--accent-primary);
    color: #fff;
}

.bot-deals-tabs {
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    flex-wrap: wrap;
}

.bot-orders-table {
    font-size: 12px;
}

.bot-order-deal-sell-btn {
    width: auto;
    min-width: 76px;
    margin-top: 0;
    padding: 7px 10px;
    font-size: 12px;
    white-space: nowrap;
}

.bot-orders-section-head {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 14px 0 8px;
    letter-spacing: 0.01em;
}

.bot-orders-section-head:first-of-type {
    margin-top: 0;
}

.bot-orders-section-hint {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

/* Закладка «биржа · #id» над компактными карточками ордер-бота */
.ob-card-with-bookmark {
    position: relative;
    padding-top: 0;
    margin-left: 0;
    box-sizing: border-box;
}

.ob-card-bookmark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 4px 8px;
    min-height: 36px;
    position: relative;
}

.ob-card-bookmark {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 5px 12px 5px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: left;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent-primary) 8%);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border-color) 55%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ob-card-bookmark:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
}

.ob-card-bookmark:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 70%, transparent);
    outline-offset: 2px;
}

.ob-card-bookmark__main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-card-collapsed-summary {
    display: none;
    width: 100%;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--text-secondary);
    white-space: normal;
}

.ob-card-bookmark__main--collapsed {
    display: none;
}

.ob-card-bookmark__main--expanded {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-card-collapsed-headline {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text-primary);
}

.ob-card-collapsed-headline__left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
}

.ob-card-collapsed-headline__text {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ob-card-collapsed-headline__badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    margin-left: auto;
}

.ob-card-collapsed-headline__badges .bot-card-profile-pill {
    margin: 0;
}

.ob-card-collapsed-headline__badges .bot-market-shared-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 10px;
    margin: 0;
}

.ob-card-collapsed-headline__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 12px;
    line-height: 1;
    margin: 0;
}

.ob-card-collapsed-name {
    font-weight: 700;
    color: var(--text-primary);
}

.ob-card-collapsed-pair {
    font-weight: 600;
    color: var(--text-secondary);
}

.ob-card-collapsed-sep {
    opacity: 0.42;
    font-weight: 500;
    padding: 0 1px;
}

.ob-card-collapsed-problem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 2px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.ob-card-collapsed-problem--warn {
    color: #7a4d00;
    background: color-mix(in srgb, #f5a623 28%, transparent);
    border: 1px solid color-mix(in srgb, #d48806 55%, transparent);
}

.ob-card-collapsed-problem--error {
    color: #fff;
    background: var(--accent-danger, #ef4444);
    border: 1px solid color-mix(in srgb, var(--accent-danger, #ef4444) 80%, #000 20%);
}

.ob-card-with-bookmark--collapsed.ob-card-with-bookmark--problem-warn .ob-card-bookmark {
    border-color: color-mix(in srgb, #d48806 50%, var(--border-color));
    background: color-mix(in srgb, #f5a623 10%, var(--bg-secondary) 90%);
    box-shadow:
        inset 4px 0 0 #d48806,
        0 1px 0 color-mix(in srgb, var(--border-color) 55%, transparent);
}

.ob-card-with-bookmark--collapsed.ob-card-with-bookmark--problem-error .ob-card-bookmark {
    border-color: color-mix(in srgb, var(--accent-danger, #ef4444) 50%, var(--border-color));
    background: color-mix(in srgb, var(--accent-danger, #ef4444) 9%, var(--bg-secondary) 91%);
    box-shadow:
        inset 4px 0 0 var(--accent-danger, #ef4444),
        0 1px 0 color-mix(in srgb, var(--border-color) 55%, transparent);
}

.ob-card-with-bookmark--collapsed.ob-card-with-bookmark--problem-warn .ob-card-collapsed-summary,
.ob-card-with-bookmark--collapsed.ob-card-with-bookmark--problem-error .ob-card-collapsed-summary {
    color: var(--text-primary);
}

.ob-card-with-bookmark--collapsed .ob-card-bookmark {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    max-width: none;
    padding: 8px 12px;
    border-radius: 14px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    position: relative;
}

.ob-card-with-bookmark--collapsed .ob-card-bookmark__main--expanded {
    display: none !important;
}

.ob-card-with-bookmark--collapsed .ob-card-bookmark__main--collapsed {
    display: block;
    width: 100%;
    padding-right: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
}

.ob-card-with-bookmark--collapsed .ob-card-collapsed-summary {
    display: block;
    width: 100%;
    margin-top: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--text-secondary);
    white-space: normal;
}

.ob-card-with-bookmark--collapsed > .bot-card {
    display: none;
}

.ob-card-bookmark__pin {
    margin-left: 4px;
    font-size: 12px;
    line-height: 1;
}

.ob-card-bookmark__sep {
    opacity: 0.55;
    flex-shrink: 0;
}

.ob-card-bookmark__exch {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ob-card-bookmark__id {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.ob-card-bookmark__cap {
    flex-shrink: 0;
    color: var(--accent-primary);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.bot-card--beginner,
.bot-card--order-pro-compact {
    border-radius: 22px;
}

.bot-card--beginner-compact {
    padding: 12px 14px 14px;
}

.bot-card-header--simple {
    display: block;
    margin-bottom: 12px;
}

.ob-simple-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ob-simple-head__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ob-simple-head__row1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ob-simple-head__row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ob-simple-head__row1--title-only {
    justify-content: center;
}

.ob-simple-head__row1--title-badges {
    justify-content: flex-start;
}

.ob-simple-head__dn-ico {
    align-self: center;
}

.ob-simple-head__title {
    margin: 0;
    text-align: left;
    min-width: 0;
    line-height: 1.2;
}

.ob-simple-head__row1--title-only .ob-simple-head__title {
    text-align: center;
    flex: 1;
}

.ob-simple-head__title .bot-card-pair {
    font-size: 0.97rem;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.ob-simple-head__avatar-wrap {
    flex-shrink: 0;
    align-self: center;
}

.ob-simple-head__avatar-wrap .bot-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.ob-simple-head__avatar-wrap .bot-card-avatar-img {
    width: 22px;
    height: 22px;
}

.ob-simple-head__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-primary);
    letter-spacing: -0.02em;
    min-width: 0;
    line-height: 1.25;
}

.ob-simple-head__dn {
    align-self: center;
}

.ob-simple-head__profile {
    align-self: center;
}

.bot-card-header--compact .bot-card-header-main {
    gap: 8px;
    align-items: center;
}

.ob-kpi-grid--compact {
    gap: 10px;
    margin-bottom: 10px;
}

.ob-kpi-grid--compact .ob-kpi-cell {
    padding: 8px 10px;
    border-radius: 12px;
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.ob-kpi-grid--compact .ob-kpi-cell.kpi-tile {
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    border-radius: 18px;
    min-height: 72px;
    gap: 6px;
    align-items: flex-start;
    justify-content: flex-start;
}

.ob-kpi-cell--wide {
    grid-column: 1 / -1;
}

.ob-kpi-grid--compact .ob-kpi-label {
    font-size: 10px;
    margin-bottom: 2px;
}

.ob-kpi-grid--compact .ob-kpi-value {
    font-size: 14px;
}

.ob-action-row--beginner-cta {
    margin-bottom: 0;
}

.ob-action-row--beginner-cta .btn {
    font-size: 13px;
    font-weight: 800;
    padding: 10px 10px;
    min-height: 44px;
}

.btn--simple-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn--simple-card-settings .btn-simple-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn--simple-card-settings .btn-simple-ico .bot-card-ico {
    width: 17px;
    height: 17px;
}

.ob-happen-box--pro {
    margin-bottom: 10px;
}

.ob-exchange-pill {
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    margin-right: 8px;
}

.bot-card--beginner .bot-card-header-main {
    flex-wrap: wrap;
}

.ob-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 8px 0 10px;
}

.ob-status-row--tight {
    margin-top: 6px;
}

.ob-rise-streak {
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
}

.ob-rise-streak__text {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary, #cbd5e1);
}

.ob-rise-streak__btn {
    margin-top: 8px;
    font-size: 11px;
    padding: 4px 10px;
}

.ob-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.ob-badge--ok {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.ob-badge--wait {
    background: rgba(234, 179, 8, 0.18);
    color: #ca8a04;
}

.ob-badge--off {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.ob-badge--warn {
    background: color-mix(in srgb, #d48806 22%, transparent);
    color: #b45309;
    border: 1px solid color-mix(in srgb, #d48806 45%, transparent);
}

.metric-value--order-cost-line--warn {
    color: var(--accent-warning, #d48806);
    font-weight: 650;
}

.ob-simple-head__price--warn {
    color: var(--accent-warning, #d48806);
}

.ob-badge--bad {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.ob-badge--asset {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.ob-status-detail {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 8px;
}

.ob-desync-banner {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.35);
    color: var(--text-primary);
    margin-bottom: 10px;
}

.ob-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.ob-kpi-cell {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 12px;
}

.ob-kpi-cell--tap {
    cursor: pointer;
}

.ob-kpi-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.ob-kpi-value {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.ob-kpi-value--wrap {
    font-size: 14px;
    font-weight: 700;
}

.ob-kpi-sub {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ob-kpi-fee {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}

.ob-happen-box {
    border-radius: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    margin-bottom: 12px;
}

.ob-happen-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.ob-happen-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-primary);
}

.ob-action-row {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.ob-action-row--2 {
    grid-template-columns: 1fr 1fr;
}

/* До ~520px — 2×2, иначе на типичном телефоне 400–430px четыре колонки не влезают и режется «Продать». */
.ob-action-row--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

@media (min-width: 520px) {
    .ob-action-row--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.ob-action-row--4 .btn {
    min-width: 0;
    box-sizing: border-box;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.2;
    min-height: 44px;
    text-align: center;
}

.ob-action-row--4 .btn-danger-market-sell {
    margin-top: 0;
    width: 100%;
    min-height: 44px;
    padding: 10px 8px;
    font-size: 13px;
    align-self: stretch;
}

.ob-btn-wide {
    width: 100%;
    margin-bottom: 10px;
}

.ob-details {
    margin-top: 4px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    padding: 0 12px 8px;
}

.ob-details summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 0;
    list-style: none;
}

.ob-details summary::-webkit-details-marker {
    display: none;
}

.ob-details-body p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-primary);
}

.ob-card-footer-icons {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.ob-pro-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

@media (min-width: 520px) {
    .ob-pro-kpi {
        grid-template-columns: repeat(4, 1fr);
    }
}

.ob-pro-kpi--3col {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 520px) {
    .ob-pro-kpi--3col {
        grid-template-columns: repeat(3, 1fr);
    }
}

.ob-pro-usdt-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border-color));
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.ob-pro-usdt-summary__item {
    white-space: nowrap;
}

.ob-pro-usdt-summary__sep {
    color: var(--text-secondary);
    opacity: 0.5;
}

.ob-pro-usdt-summary .kpi-tile__help-btn {
    min-width: 18px;
    min-height: 18px;
    margin: 0;
    font-size: 10px;
}

.ob-pro-kpi-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 10px 12px;
    min-height: 72px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}

.ob-pro-kpi-item--tap {
    cursor: default;
}

.ob-pro-kpi-item--tap .kpi-tile__tap-area {
    cursor: pointer;
}

/* Универсальные KPI-плашки (ОрдерБот: простой и профи) */
.kpi-tile__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.kpi-tile__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.2;
    min-width: 0;
    flex: 1;
    white-space: normal;
    overflow-wrap: anywhere;
}

.kpi-tile__help-btn {
    flex-shrink: 0;
    position: relative;
    z-index: 5;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    margin: -6px -4px -6px 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-card) 65%, var(--border-color));
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.kpi-tile__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.kpi-tile__tap-area {
    flex: 1;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border-radius: 12px;
    margin: 0 -4px;
    padding: 4px;
}

.kpi-tile__tap-area:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.kpi-tile__value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kpi-tile__value--no-clip {
    overflow: visible;
    text-overflow: clip;
}

.kpi-tile__capital-value {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 380px) {
    .kpi-tile__capital-value {
        font-size: 15px;
    }

    .kpi-tile__value {
        font-size: 15px;
    }
}

.kpi-tile__value.positive {
    color: var(--accent-primary);
}

.kpi-tile__value.negative {
    color: var(--accent-danger);
}

.kpi-tile__value--wrap {
    white-space: normal;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    max-height: none;
    overflow: visible;
    display: block;
}

.kpi-tile__line {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kpi-tile__line--muted {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-tile__line--fee {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-tile__line--primary {
    font-size: 13px;
}

.kpi-tile__line--orders-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

.kpi-tile__ord-slash {
    margin: 0 1px;
    color: var(--text-secondary);
    font-weight: 700;
}

.kpi-tile__ord-sp {
    flex: 0 0 8px;
    width: 8px;
}

.ob-order-lim {
    color: #3b82f6;
    font-weight: 800;
    white-space: nowrap;
}

.kpi-tile__sub,
.kpi-tile__sub.order-meta {
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-secondary);
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.kpi-tile__order-meta {
    font-size: 11px;
}

.kpi-tile__slash {
    margin: 0 2px;
    color: var(--text-secondary);
    font-weight: 700;
}

.kpi-tile__tap-cue {
    margin-left: 2px;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.92em;
}

.kpi-tile__ord-strong {
    font-weight: 800;
}

.bot-metrics .metric-item.kpi-tile {
    min-height: 72px;
    max-height: none;
    border-radius: 18px;
    justify-content: flex-start;
    align-items: stretch;
    gap: 6px;
}

.ob-pro-fee {
    display: inline;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
}

.ob-lim--buy {
    color: var(--accent-primary);
    font-weight: 800;
}

.ob-lim--sell {
    color: var(--accent-danger);
    font-weight: 800;
}

.ob-lim--planned {
    color: var(--accent-warning);
    font-weight: 800;
}

.ob-pro-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.ob-pro-price-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
}

.ob-pro-price-pair__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.ob-pro-price-pair__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.ob-pro-price-pair__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    word-break: break-all;
}

.ob-pro-price-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    width: 100%;
}

@media (max-width: 360px) {
    .ob-pro-price-grid {
        grid-template-columns: 1fr;
    }
}

.ob-pro-price-cell {
    text-align: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    min-width: 0;
}

.ob-pro-price-cell__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.25;
    white-space: normal;
}

.ob-pro-price-cell__value {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ob-coin-account-line {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 650;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.ob-pro-mark-line {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 0 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.kpi-tile__line--orders-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    text-align: center;
}

.kpi-tile__line--orders-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.ob-orders-compact-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-secondary);
}

.ob-orders-compact-sep {
    opacity: .35;
}

.ob-pro-summary__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.ob-top-up-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.45);
    font-size: 12px;
    line-height: 1.35;
}

.ob-top-up-banner__label {
    font-weight: 800;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}

.ob-top-up-banner__amt {
    font-weight: 800;
    color: #fde68a;
    font-size: 13px;
}

.ob-top-up-banner__sub {
    flex: 1 1 100%;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
}

.ob-top-up-form-hint {
    color: #fbbf24 !important;
    font-weight: 600;
}

.kpi-tile__line.ob-top-up-cap-line {
    margin-top: 5px;
    padding: 5px 7px;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #fde68a;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}

.ob-pro-deviation-bar {
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
}

/* Итог бота (реализовано + позиция в рынке) — see webapp/static/app.js orderBotProCardHtml */
.ob-pro-deviation-bar--pos {
    color: var(--success, #2ecc71);
    border-color: color-mix(in srgb, var(--success, #2ecc71) 45%, transparent);
    background: color-mix(in srgb, var(--success, #2ecc71) 10%, var(--bg-secondary));
}

.ob-pro-deviation-bar--neg {
    color: var(--danger, #e53935);
    border-color: color-mix(in srgb, var(--danger, #e53935) 45%, transparent);
    background: color-mix(in srgb, var(--danger, #e53935) 10%, var(--bg-secondary));
}

.ob-pro-result-breakdown__total {
    font-size: 14px;
    font-weight: 800;
}

.ob-pro-result-breakdown__rows {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.ob-pro-result-breakdown__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: 12px;
    line-height: 1.35;
}

.ob-pro-result-breakdown__row > span {
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
}

.ob-pro-result-breakdown__row > strong {
    white-space: nowrap;
    font-weight: 800;
}

@media (max-width: 600px) {
    .ob-pro-result-breakdown {
        padding: 9px 8px;
    }

    .ob-pro-result-breakdown__row {
        font-size: 11px;
    }
}

.ob-pro-summary__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.ob-pro-summary__item {
    min-width: 0;
}

.ob-pro-summary__coin {
    font-weight: 600;
    color: var(--text-primary);
}

.ob-pro-sep {
    margin: 0 4px;
    opacity: 0.5;
}

.ob-desync-pill {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #ca8a04;
}

.ob-spot-free-blocked-banner {
    margin: 8px 0 4px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid rgba(234, 88, 12, 0.45);
    background: rgba(234, 88, 12, 0.12);
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-primary);
}

.ob-pro-menu {
    position: relative;
    margin-left: auto;
}

.ob-pro-menu-btn {
    list-style: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    color: var(--text-primary);
}

.ob-pro-menu-btn::-webkit-details-marker {
    display: none;
}

.ob-pro-menu[open] .ob-pro-menu-btn {
    border-color: var(--accent-primary);
}

.ob-pro-menu-list {
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 200px;
    z-index: 20;
    padding: 6px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ob-pro-menu-list button {
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.ob-pro-menu-list button:hover {
    background: var(--bg-secondary);
}

.ob-pro-menu-danger {
    color: var(--accent-danger) !important;
}

.ob-card-settings-btn--icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    justify-content: center;
    border-radius: 12px;
    box-sizing: border-box;
}

.ob-card-settings--compact {
    flex-shrink: 0;
}

.bfd-bulk-btn--full-stop {
    grid-column: 1 / -1;
    font-size: 13px;
}

.bot-card--order-pro-compact .bot-card-header {
    align-items: flex-start;
}

.bot-card-header--pro-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    margin-bottom: 12px;
}

.bot-card-header-main--pro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    min-width: 0;
}

.bot-card--order-pro-compact .bot-card-header-main--pro > .bot-card-avatar,
.bot-card--order-pro-compact .bot-card-header-main--pro > .bot-card-avatar-col {
    grid-column: 1;
    grid-row: 1;
}

.bot-card--order-pro-compact .bot-card-header-main--pro > .bot-card-title-text {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-headline-row {
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-pair {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-id-chip {
    flex-shrink: 0;
}

.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-daynight-pill,
.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-style-pill,
.bot-card--order-pro-compact .bot-card-header-main--pro .bot-card-dn-ico {
    flex-shrink: 0;
}

.bot-card--order-pro-compact .ob-pro-menu {
    margin-left: 0;
    align-self: start;
}

/* ===== Главный экран (панель состояния) ===== */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.content-area--home {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    align-items: center;
}

.page--home {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.home-dash {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.home-dash-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 4px;
    width: 100%;
}

.welcome-card--home-bottom {
    flex-shrink: 0;
    margin-bottom: 0;
    padding: 12px 14px;
}

.top-bar-menu {
    position: relative;
    list-style: none;
}

.top-bar-menu-summary {
    list-style: none;
    font-size: 22px;
    line-height: 1;
    letter-spacing: 0;
}

.top-bar-menu-summary::-webkit-details-marker {
    display: none;
}

.top-bar-menu-list {
    position: absolute;
    right: 0;
    top: 44px;
    min-width: 180px;
    z-index: 200;
    padding: 6px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.top-bar-menu-list button {
    text-align: left;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.top-bar-menu-list button:hover {
    background: var(--bg-hover);
}

.home-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    width: 100%;
    box-sizing: border-box;
}

/* strategy-health-v1: ленивый срез ledger, не блокирующий основной баланс. */
.home-card.home-strategy-health {
    padding: 16px;
}

.home-strategy-health-ranges {
    display: flex;
    gap: 4px;
}

.home-strategy-health-ranges button {
    min-width: 38px;
    min-height: 30px;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg-card) 88%, #000);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

.home-strategy-health-ranges button.is-active {
    color: #111;
    border-color: var(--accent-primary);
    background: var(--accent-primary);
}

.home-strategy-health-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.home-strategy-health-metric {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card) 92%, #000);
}

.home-strategy-health-metric span {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.25;
}

.home-strategy-health-metric strong {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-strategy-health-metric strong.is-positive {
    color: #22c55e;
}

.home-strategy-health-metric strong.is-negative,
.home-strategy-health-metric strong.is-warning {
    color: #ef4444;
}

.home-strategy-health-note {
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.4;
}

.home-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    flex-shrink: 0;
}

.home-chip--muted {
    opacity: 0.75;
    font-weight: 600;
}

.home-chip--required {
    color: var(--accent-warning);
    background: color-mix(in srgb, var(--accent-warning) 12%, var(--bg-secondary));
}

.home-equity-suite {
    padding: 12px 12px 10px;
    background: linear-gradient(
        168deg,
        color-mix(in srgb, #22c55e 8%, var(--bg-card)) 0%,
        var(--bg-card) 48%,
        color-mix(in srgb, var(--accent-primary) 6%, var(--bg-card)) 100%
    );
    border: 1px solid color-mix(in srgb, #22c55e 18%, var(--border-color));
    box-shadow: 0 8px 28px color-mix(in srgb, #22c55e 6%, transparent);
}

[data-theme="dark"] .home-equity-suite {
    border-color: color-mix(in srgb, #22c55e 28%, var(--border-color));
    box-shadow: 0 10px 32px color-mix(in srgb, #22c55e 12%, transparent);
}

.home-equity-kpis {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 10px;
    align-items: end;
}

.home-equity-kpi-label {
    display: block;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.home-equity-kpi-value {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.15;
}

.home-equity-kpi--main .home-equity-kpi-value {
    font-size: 22px;
}

.home-equity-kpi-value--delta {
    font-size: 12px;
}

.home-equity-kpi-value--pos {
    color: #22c55e;
}

.home-equity-kpi-value--neg {
    color: #ef4444;
}

.home-equity-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.home-equity-chart-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.home-equity-period-tabs {
    display: flex;
    gap: 4px;
    padding: 2px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-secondary) 75%, transparent);
}

.home-equity-period-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.home-equity-period-btn.active {
    color: #052e16;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    box-shadow: 0 0 12px color-mix(in srgb, #22c55e 45%, transparent);
}

.home-equity-chart {
    width: 100%;
    margin: 0;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg-secondary) 40%, transparent);
}

.home-equity-chart-svg {
    width: 100%;
    height: auto;
    display: block;
    min-height: 108px;
}

.home-equity-chart-ylabel {
    font-size: 9px;
    font-weight: 700;
    fill: var(--text-secondary);
}

.home-equity-chart-grid {
    stroke: color-mix(in srgb, var(--border-color) 50%, transparent);
    stroke-width: 1;
    stroke-dasharray: 4 6;
}

.home-equity-chart-area {
    opacity: 1;
}

.home-equity-chart-line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-equity-chart-line--glow {
    stroke-width: 4;
    opacity: 0.35;
}

.home-equity-chart-dot {
    stroke: var(--bg-card);
    stroke-width: 2;
}

.home-equity-chart-empty {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    padding: 28px 8px;
}

.home-equity-xaxis {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 4px;
    padding: 0 4px 0 52px;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.home-equity-status {
    margin-top: 8px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-equity-status--ok {
    color: #16a34a;
}

.home-equity-status--warn {
    color: var(--accent-warning);
}

.home-equity-status--err {
    color: var(--accent-danger);
}

.home-equity-status--muted {
    color: var(--text-muted);
}

.home-equity-perf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
}

.home-equity-perf-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 3px;
    max-width: 100%;
}

.home-equity-perf-tip {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    font-size: 8px;
    opacity: 0.55;
}

.home-equity-perf-value {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.home-equity-bot-profit-wrap {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
    text-align: center;
}

.home-equity-bot-profit-line {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.35;
}

.home-equity-bot-profit-line--pos {
    color: #16a34a;
}

.home-equity-bot-profit-line--neg {
    color: var(--accent-danger);
}

.home-equity-bot-note {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.35;
}

.home-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    align-items: start;
}

.home-tile {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 6px 5px 7px;
    box-shadow: var(--shadow);
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.home-tile-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 3px;
    line-height: 1.2;
    width: 100%;
}

.home-tip {
    opacity: 0.45;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    margin: -4px -2px;
    padding: 4px 2px;
    vertical-align: middle;
}

.home-tile-value {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 360px) {
    .home-tile-value {
        font-size: 11px;
    }
}

.home-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-bottom: 2px;
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.home-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-section-sub {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.home-section-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, transparent);
}

.home-card.home-top-bots,
.home-card.home-trade-candidates,
.home-card.home-vol-table {
    padding: 12px 14px;
}

.home-trade-candidates-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.home-trade-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) minmax(74px, auto) 40px;
    grid-template-areas:
        "rank symbol price score"
        "rank metrics metrics metrics"
        "rank signals signals verdict";
    column-gap: 7px;
    row-gap: 5px;
    align-items: center;
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
}

.home-trade-row--ready {
    border-color: color-mix(in srgb, #22c55e 42%, var(--border-color));
    background: linear-gradient(100deg, color-mix(in srgb, #22c55e 7%, var(--bg-primary)), var(--bg-primary) 58%);
}

.home-trade-rank {
    grid-area: rank;
    grid-row: 1 / -1;
    align-self: start;
    width: 25px;
    height: 25px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
    font-size: 11px;
    font-weight: 900;
}

.home-trade-symbol {
    grid-area: symbol;
    min-width: 0;
    font-size: 14px;
    font-weight: 900;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-trade-symbol small,
.home-trade-price small,
.home-trade-score small {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
}

.home-trade-price {
    grid-area: price;
    justify-self: end;
    font-size: 12px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    text-align: right;
}

.home-trade-score {
    grid-area: score;
    justify-self: end;
    text-align: right;
    color: var(--accent-primary);
    white-space: nowrap;
}

.home-trade-score b {
    font-size: 14px;
    font-weight: 900;
}

.home-trade-metrics {
    grid-area: metrics;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

.home-trade-signals {
    grid-area: signals;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.home-trade-metric {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 9px;
    color: var(--text-muted);
    white-space: nowrap;
}

.home-trade-metric b {
    font-size: 10px;
    color: var(--text-secondary);
}

.home-trade-metric--up b {
    color: #10b981;
}

.home-trade-metric--down b {
    color: #ef4444;
}

.home-trade-signal {
    flex: 0 0 auto;
    min-width: 34px;
    padding: 2px 5px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 8px;
    font-weight: 900;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    white-space: nowrap;
}

.home-trade-signal small {
    font-size: 7px;
    opacity: 0.75;
}

.home-trade-signal--buy {
    color: #10b981;
    border-color: color-mix(in srgb, #10b981 38%, var(--border-color));
    background: color-mix(in srgb, #10b981 9%, var(--bg-secondary));
}

.home-trade-signal--sell {
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 38%, var(--border-color));
    background: color-mix(in srgb, #ef4444 9%, var(--bg-secondary));
}

.home-trade-verdict {
    grid-area: verdict;
    justify-self: end;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.home-trade-verdict--ready {
    color: #10b981;
    background: color-mix(in srgb, #10b981 12%, var(--bg-secondary));
}

.home-trade-verdict--watch {
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 12%, var(--bg-secondary));
}

.home-trade-candidates-note {
    margin-top: 7px;
    min-height: 12px;
    font-size: 9px;
    color: var(--text-muted);
    text-align: right;
}

.home-top-bots-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.home-top-bot-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, transform 0.12s ease;
}

.home-top-bot-row:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
}

.home-top-bot-row:active {
    transform: scale(0.99);
}

.home-top-bot-rank {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
}

.home-top-bot-body {
    flex: 1 1 auto;
    min-width: 0;
}

.home-top-bot-line1 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.home-top-bot-pair-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.home-top-bot-pair {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-top-bot-dd {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
}

.home-top-bot-dd--warn {
    color: #a855f7;
}

.home-top-bot-roi {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    text-align: right;
    line-height: 1.2;
}

.home-top-bot-roi {
    white-space: nowrap;
}

.home-top-bot-roi-usd,
.home-top-bot-roi-pct {
    font-size: inherit;
    font-weight: inherit;
}

.home-top-bot-roi.home-top-bot-pnl--pos,
.home-top-bot-pnl--pos {
    color: #10b981;
}

.home-top-bot-roi.home-top-bot-pnl--neg,
.home-top-bot-pnl--neg {
    color: #ef4444;
}

.home-top-bot-line2 {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
}

.home-vol-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.home-vol-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.home-vol-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.home-vol-table tbody td {
    padding: 9px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    color: var(--text-primary);
    vertical-align: middle;
}

.home-vol-table tbody tr:last-child td {
    border-bottom: none;
}

.home-vol-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-secondary) 55%, transparent);
}

.home-vol-table .home-vol-rank {
    width: 28px;
    font-weight: 800;
    color: var(--text-muted);
}

.home-vol-table .home-vol-sym {
    font-weight: 800;
}

.home-vol-table .home-vol-val {
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.home-vol-table .home-vol-val--hot {
    color: #f59e0b;
}

.home-vol-table .home-vol-tp {
    color: var(--accent-primary, #6366f1);
    font-weight: 700;
    font-size: 12px;
}

.home-vol-table .home-vol-chg--up {
    color: #10b981;
    font-weight: 700;
}

.home-vol-table .home-vol-chg--down {
    color: #ef4444;
    font-weight: 700;
}

.home-card.home-mcap-streak {
    padding: 12px 14px;
    overflow: hidden;
}

.home-mcap-streak__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
}

.home-mcap-streak-section {
    margin-top: 4px;
}

.home-mcap-streak-section-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.home-mcap-streak-section-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.home-mcap-inline-tip {
    position: relative;
    top: auto;
    right: auto;
    flex-shrink: 0;
    opacity: 0.55;
}

.home-mcap-streak__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-mcap-streak__body {
    min-height: 0;
}

.home-mcap-visual {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.home-mcap-col--gauge {
    flex: 0 0 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-mcap-col--info {
    flex: 1 1 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.home-mcap-gauge-wrap {
    width: 120px;
}

.home-mcap-gauge-svg {
    display: block;
    width: 120px;
    height: auto;
}

.home-mcap-gauge-val {
    font-size: 15px;
    font-weight: 800;
    fill: var(--text-primary);
}

.home-mcap-gauge-cap {
    font-size: 10px;
    font-weight: 700;
    fill: var(--text-muted);
}

.home-mcap-gauge-empty {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 20px 0;
}

.home-mcap-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    width: fit-content;
    max-width: 100%;
}

.home-mcap-trend-badge--up {
    color: #10b981;
    background: color-mix(in srgb, #10b981 16%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #10b981 35%, transparent);
}

.home-mcap-trend-badge--down {
    color: #ef4444;
    background: color-mix(in srgb, #ef4444 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, #ef4444 32%, transparent);
}

.home-mcap-trend-badge--flat {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-muted) 12%, var(--bg-secondary));
    border: 1px solid var(--border-color);
}

.home-mcap-trend-icon {
    font-size: 11px;
    line-height: 1;
}

.home-mcap-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 44px;
    padding: 0 2px;
}

.home-mcap-bar {
    flex: 1;
    height: var(--bar-h, 20%);
    min-height: 4px;
    border-radius: 5px 5px 3px 3px;
    transition: height 0.25s ease, background 0.2s ease;
}

.home-mcap-bar--idle {
    background: color-mix(in srgb, var(--text-muted) 22%, var(--bg-secondary));
    opacity: 0.55;
}

.home-mcap-bar--up {
    background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 0 10px color-mix(in srgb, #10b981 35%, transparent);
}

.home-mcap-bar--down {
    background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 0 10px color-mix(in srgb, #ef4444 30%, transparent);
}

.home-mcap-bar--flat {
    background: linear-gradient(180deg, var(--text-muted) 0%, var(--border-color) 100%);
}

.home-mcap-cap-pill {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

.home-mcap-cap-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.home-mcap-cap-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-mcap-streak__hint {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
}

.home-mcap-streak--up {
    border-color: color-mix(in srgb, #10b981 40%, var(--border-color));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #10b981 6%, var(--bg-card)) 0%,
        var(--bg-card) 55%
    );
}

.home-mcap-streak--down {
    border-color: color-mix(in srgb, #ef4444 38%, var(--border-color));
    background: linear-gradient(
        145deg,
        color-mix(in srgb, #ef4444 5%, var(--bg-card)) 0%,
        var(--bg-card) 55%
    );
}

.home-mcap-streak--flat {
    border-color: var(--border-color);
}

.home-card.home-fng {
    padding: 10px 12px;
}

.home-card.home-btc-trend {
    padding: 10px 12px;
}

.home-btc-trend__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.home-btc-trend__title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-btc-trend__sub {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.home-btc-trend__body {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.home-btc-trend__badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--surface-2, rgba(255, 255, 255, 0.06));
    color: var(--text-muted);
}

.home-btc-trend__badge--buy {
    background: rgba(34, 197, 94, 0.16);
    color: var(--success, #22c55e);
}

.home-btc-trend__badge--sell {
    background: rgba(239, 68, 68, 0.16);
    color: var(--danger, #ef4444);
}

.home-btc-trend__badge--neutral {
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-muted);
}

.home-btc-trend__detail {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.home-fng-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.home-fng-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-fng-sub {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.home-fng-body {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
}

.home-fng-col {
    min-width: 0;
}

.home-fng-col--gauge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
}

.home-fng-col--ls {
    flex: 1 1 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 4px 0 2px;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
    padding-left: 12px;
}

@media (max-width: 420px) {
    .home-fng-col--ls {
        border-left: none;
        padding-left: 0;
        padding-top: 8px;
        border-top: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
        width: 100%;
    }
}

.home-ls-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.home-ls-bar-track {
    display: flex;
    width: 100%;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 4px;
    background: var(--bg-secondary);
}

.home-ls-bar {
    height: 100%;
    min-width: 3px;
    transition: width 0.2s ease;
}

.home-ls-bar--long {
    background: color-mix(in srgb, #22c55e 82%, var(--bg-secondary));
}

.home-ls-bar--short {
    background: color-mix(in srgb, var(--accent-danger) 78%, var(--bg-secondary));
}

.home-ls-empty {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

.home-ls-pcts {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-top: 2px;
}

.home-fng-gauge {
    flex-shrink: 0;
    width: 120px;
}

.home-fng-svg {
    display: block;
    width: 120px;
    height: auto;
}

.home-fng-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-fng-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-fng-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-primary);
}

.home-holdings-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.home-holdings-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
}

.home-holdings-link {
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: underline;
    padding: 4px;
}

.home-holdings-list {
    max-height: min(220px, 38vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-holding-empty {
    font-size: 13px;
    color: var(--text-muted);
    padding: 12px 4px;
    text-align: center;
}

.home-holding-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(100px, 1.15fr);
    align-items: center;
    column-gap: 8px;
    padding: 8px 8px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 92%, var(--accent-primary) 8%);
    border: 1px solid color-mix(in srgb, var(--border-color) 75%, transparent);
}

.home-holding-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.home-holding-ico {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

.home-holding-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.home-holding-sym {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.15;
}

.home-holding-qtysub {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-holding-mid {
    text-align: center;
    justify-self: center;
}

.home-holding-center {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-holding-right {
    text-align: right;
    min-width: 0;
    justify-self: end;
}

.home-holding-right-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.home-holding-val {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-primary);
    display: block;
    line-height: 1.25;
    white-space: nowrap;
}

.home-holding-pct {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px 6px;
    font-size: 12px;
    font-weight: 800;
}

.home-holding-pct-prefix {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
}

.home-holding-pct.pos {
    color: #16a34a;
}

.home-holding-pct.neg {
    color: var(--accent-danger);
}

.home-holding-pct.neutral {
    color: var(--text-muted);
}

.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}

.home-qa-btn {
    font-size: 11px;
    font-weight: 800;
    padding: 8px 4px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
}

.home-qa-btn:active {
    transform: scale(0.98);
}

.home-balance-hint {
    font-size: 11px;
    color: var(--accent-warning);
    margin-top: 4px;
    padding: 0 4px;
}

@media (max-width: 360px) {
    .home-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

[data-theme="dark"] .home-holding-pct.pos {
    color: #4ade80;
}

[data-theme="dark"] .home-equity-bot-profit-line--pos {
    color: #4ade80;
}

/* --- Exchange switcher (home) --- */
.home-exchange-switcher-wrap {
    width: 100%;
    margin-bottom: 6px;
}

.exchange-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    align-items: start;
}

.ex-tile {
    flex: none;
    max-width: none;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    border-radius: 10px;
    padding: 4px 4px 5px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    background: var(--bg-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ex-tile--disconnected {
    opacity: 0.72;
    background: color-mix(in srgb, var(--bg-secondary) 88%, var(--bg-card));
    border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
    cursor: pointer;
}

.ex-tile--disconnected:hover {
    opacity: 0.88;
}

.ex-tile--active {
    border-color: var(--accent-primary);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 28%, transparent),
        0 0 0 1px var(--accent-primary);
}

[data-theme="dark"] .ex-tile--active {
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-primary) 45%, transparent),
        0 0 0 1px color-mix(in srgb, var(--accent-primary) 80%, transparent);
}

.ex-tile-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-bottom: 3px;
}

.ex-tile-name {
    font-size: 12px;
    font-weight: 800;
}

.ex-tile-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--text-muted);
}

.ex-tile-dot--ok {
    background: #22c55e;
}

.ex-tile-dot--warn {
    background: var(--accent-warning);
}

.ex-tile-dot--err {
    background: var(--accent-danger);
}

.ex-tile-dot--off {
    background: var(--text-muted);
}

.ex-tile-dot--load {
    background: var(--text-muted);
    animation: ex-tile-dot-pulse 1.2s ease-in-out infinite;
}

@keyframes ex-tile-dot-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.ex-tile-badge {
    font-size: 7.5px;
    font-weight: 700;
    margin-bottom: 1px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-tile-badge--ok,
.ex-tile-badge--muted {
    color: var(--text-muted);
}

.ex-tile-badge--err {
    color: var(--accent-danger);
}

.ex-tile-badge--warn {
    color: var(--accent-warning);
}

.ex-tile-bal {
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-tile-sub {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.2;
}

.exchange-filter-bar {
    margin: 0 0 10px;
}

.bots-exchange-chips .segment-btn {
    min-height: 40px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 10px;
}

.segmented--scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.exchange-pill {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
    flex-shrink: 0;
}

/* =========================================================
   BOTS COMPACT TOOLBAR + FILTER DRAWER (v2)
   ========================================================= */
.bots-compact-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 10px 14px;
    margin: 10px 0;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    min-height: 48px;
}

.bots-compact-toolbar:hover {
    border-color: color-mix(in srgb, var(--accent-primary) 50%, var(--border-color));
}

.bots-compact-toolbar--open {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.bcto-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bcto-line--primary {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
}

.bcto-line--secondary {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.bcto-ico {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.bcto-summary {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bcto-chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--text-secondary);
    transition: transform 0.18s ease;
}

.bots-compact-toolbar--open .bcto-chevron {
    transform: rotate(180deg);
}

.bots-filter-drawer {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px 14px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bots-filter-drawer[hidden] {
    display: none;
}

.bfd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.bfd-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.bfd-close {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1;
}

.bfd-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.bfd-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bfd-section { display: flex; flex-direction: column; gap: 6px; }

.bfd-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.bfd-help-btn {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1;
    cursor: help;
}

.bfd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bfd-chips--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.bfd-chips--coins {
    flex-wrap: wrap;
    max-height: 120px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
}

.bfd-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
    flex-shrink: 0;
}

.bfd-chip:hover { border-color: color-mix(in srgb, var(--accent-primary) 40%, var(--border-color)); }

.bfd-chip--active {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 14%, var(--bg-secondary));
    color: var(--text-primary);
}

.bfd-chip--muted { opacity: 0.6; }

.bfd-chip__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-secondary));
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 800;
}

.bfd-chip__hint {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    margin-left: 4px;
}

.bfd-empty-line {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 4px;
}

.bfd-search { display: flex; }
.bfd-search__input {
    flex: 1;
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
}
.bfd-search__input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.bfd-quick {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
}

.bfd-quick-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--text-primary);
    text-align: left;
    transition: border-color 0.14s, background 0.14s;
}

.bfd-quick-item:hover {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-secondary));
}

.bfd-quick-item--error { border-left: 3px solid #ef4444; }
.bfd-quick-item--running { border-left: 3px solid #22c55e; }
.bfd-quick-item--paused { border-left: 3px solid #eab308; }
.bfd-quick-item--stopped { border-left: 3px solid color-mix(in srgb, var(--text-secondary) 70%, transparent); }

.bfd-quick-item__pair { font-size: 13px; font-weight: 700; }
.bfd-quick-item__meta { font-size: 11px; color: var(--text-secondary); }

.bfd-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
}
.bfd-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.bfd-link {
    border: none;
    background: transparent;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
}
.bfd-link:hover { background: var(--bg-hover); }

.bfd-bulk { margin-top: 6px; border-top: 1px dashed var(--border-color); padding-top: 8px; }
.bfd-bulk summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 6px 0;
}
.bfd-bulk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 6px;
    margin-top: 6px;
}
.bfd-bulk-btn {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 12px;
}
.bfd-hint {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.bfd-foot {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}
.bfd-reset, .bfd-done { flex: 1 1 0; }

/* Создать-бота кнопка под toolbar */
.bots-create-row { display: flex; margin: 0 0 12px; }
.bots-create-row .bots-toolbar-create-btn { width: 100%; }

/* Empty state (фильтры не нашли ничего) */
.bots-empty-state {
    text-align: center;
    padding: 32px 16px;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: 18px;
    margin: 12px 0;
}
.bots-empty-state[hidden] { display: none; }
.bes-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; }
.bes-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.bes-sub { font-size: 12px; color: var(--text-secondary); margin: 4px 0 14px; }
.bes-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Quick-jump highlight */
.bot-card--highlight {
    outline: 2px solid var(--accent-primary);
    outline-offset: 4px;
    transition: outline-color 0.6s ease;
    border-radius: 22px;
}

/* =========================================================
   OB-CARD-SETTINGS (новое меню «Настройка» в шапке карточки)
   ========================================================= */
.ob-card-settings {
    position: relative;
    flex-shrink: 0;
}

.ob-card-settings-btn {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    line-height: 1;
}

.ob-card-settings-btn::-webkit-details-marker { display: none; }
.ob-card-settings-btn::marker { display: none; content: ''; }

.ob-card-settings-btn .bot-card-ico {
    width: 14px;
    height: 14px;
}

.ob-card-settings-btn__lbl { letter-spacing: 0.02em; }

.ob-card-settings[open] .ob-card-settings-btn {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.ob-card-settings-list {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 200px;
    z-index: 100;
    padding: 6px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Когда меню открыто — поднимаем всю карточку поверх соседних,
   чтобы выпадашка перекрывала «?»-кнопки и текст под ней (в т.ч. в соседних карточках). */
.ob-card-with-bookmark:has(.ob-card-settings[open]) {
    position: relative;
    z-index: 100;
}

.ob-card-settings-list > button {
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.ob-card-settings-list > button:hover { background: var(--bg-hover); }

.ob-card-settings-list > button.ob-card-settings-danger {
    color: #ef4444;
}

.ob-card-settings-list > button.ob-card-settings-danger:hover {
    background: color-mix(in srgb, #ef4444 14%, transparent);
}

/* Pro-compact header снова однокол. (без кебаба) */
.bot-card-header--pro-compact-single {
    display: block;
}

/* Mobile-tweaks */
@media (max-width: 480px) {
    .bots-compact-toolbar { padding: 10px 12px; }
    .bcto-line--primary { font-size: 13px; }
    .bfd-chip { height: 34px; padding: 0 10px; font-size: 11.5px; }
    .ob-card-settings-btn { padding: 5px 10px; font-size: 10.5px; }
    .ob-card-settings-btn__lbl { display: inline; }
}

/* Beta badge + subscription read-only block */
.app-beta-pill {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent, #6366f1) 22%, transparent);
    color: var(--text-primary, #111);
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 35%, transparent);
}
.app-beta-pill--lg { font-size: 12px; padding: 4px 10px; }
.app-beta-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent, #6366f1) 10%, var(--bg-card, #fff));
    border: 1px solid color-mix(in srgb, var(--accent, #6366f1) 22%, transparent);
    margin-bottom: 4px;
}
.app-beta-banner__text {
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-secondary, #555);
}
.subscription-status-block {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary, #111);
}
.subscription-status-block .sub-line { margin: 6px 0; }
.subscription-status-block .sub-muted {
    font-size: 13px;
    color: var(--text-secondary, #666);
    margin-top: 10px;
}
/* Smart Unload v2: compact status shared by mobile and desktop bot cards. */
.ob-smart-unload-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    border: 1px solid color-mix(in srgb, var(--success-color, #22a06b) 45%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--success-color, #22a06b) 12%, transparent);
    color: var(--success-color, #178653);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.history-operation-badge {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--success-color, #22a06b) 14%, transparent);
    color: var(--success-color, #178653);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
/* Кросс2Бот: бейдж направления ротации (A→B / B→A) + строка потока */
.history-rotation-badge {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-primary, #6366f1) 16%, transparent);
    color: var(--accent-primary, #6366f1);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.history-rotation-flow {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.35;
    word-break: break-word;
}
.history-rotation-flow b { color: var(--text-primary); font-weight: 700; }
.history-row-cross2 .history-asset-col { flex-direction: column; align-items: flex-start; gap: 3px; }
/* Подпись «оценка» рядом с ориентировочным USDT-итогом ротации */
.history-est-hint {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    opacity: 0.75;
    margin-left: 3px;
}

@media (max-width: 640px) {
    .ob-smart-unload-badge {
        min-height: 22px;
        padding-inline: 6px;
        font-size: 11px;
    }
}
.finance-allocation-summary {
    display: grid;
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid rgba(218, 184, 47, .38);
    border-radius: 14px;
    background: rgba(218, 184, 47, .07);
}

.trading-assets-modal__content { max-height: min(82vh, 720px); overflow-y: auto; }
.trading-assets-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.trading-assets-tabs button { min-height: 42px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); font-weight: 700; }
.trading-assets-tabs button.active { border-color: var(--accent-primary); color: var(--accent-primary); background: rgba(218, 184, 47, .1); }
.finance-bot-card { border-color: rgba(53, 190, 138, .45); }

/* Launch wizard: проценты распределения — читаемый контраст в Telegram WebView */
#launch-wizard-modal .launch-wizard-coin-row .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    width: 100%;
}

#launch-wizard-modal .launch-wizard-pct-input,
#launch-wizard-modal input.launch-wizard-pct-input.select-custom {
    flex: 0 0 92px;
    width: 92px;
    min-width: 92px;
    max-width: 110px;
    padding: 10px 8px;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--accent-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    appearance: textfield;
    -moz-appearance: textfield;
}

#launch-wizard-modal .launch-wizard-pct-input::-webkit-outer-spin-button,
#launch-wizard-modal .launch-wizard-pct-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#launch-wizard-modal .launch-wizard-pct-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
}

[data-theme="golden"] #launch-wizard-modal .launch-wizard-pct-input,
[data-theme="golden"] #launch-wizard-modal input.launch-wizard-pct-input.select-custom {
    background: #141008;
    color: #f8f6f0;
    -webkit-text-fill-color: #f8f6f0;
    border-color: color-mix(in srgb, #d4af37 55%, #5c4a10);
}

[data-theme="dark"] #launch-wizard-modal .launch-wizard-pct-input,
[data-theme="dark"] #launch-wizard-modal input.launch-wizard-pct-input.select-custom {
    background: #1a1625;
    color: #e0d6ff;
    -webkit-text-fill-color: #e0d6ff;
}

[data-theme="light"] #launch-wizard-modal .launch-wizard-pct-input,
[data-theme="light"] #launch-wizard-modal input.launch-wizard-pct-input.select-custom {
    background: #ffffff;
    color: #1e1b4b;
    -webkit-text-fill-color: #1e1b4b;
}