/* ==========================================
   FOCUS — фирменная тема, ТЁМНАЯ версия (ветка feature/design-dark).
   Единственное место с цветами, шрифтами, радиусами, тенями и свечением.
   Подключается после Bootstrap: в base.html (CRM), public.html (сайт), b2b.html.
   Страницы работают в штатном тёмном режиме Bootstrap: <html data-bs-theme="dark">
   (модалки, списки, календарь дат, btn-close тёмные сами).

   Палитра: фон почти чёрный с синим оттенком, белый текст, фирменные цвета логотипа —
   неоновые акценты. Голографический перелив (--focus-holo) — только тонкие рамки, линии,
   значки, монета; большие площади им не заливать.

   Контраст (WCAG; текст ≥ 4.5:1, крупный ≥ 3:1), фон страницы / карточки / приподнятый блок:
     белый 19.7 / 18.0 / 16.9 · --focus-text-2 12.1 / 11.1 / 10.4 · --focus-muted 7.8 / 7.1 / 6.7
     --focus-link 9.2 / 8.4 / 7.9 · --focus-danger-text 6.5 / 6.0 / 5.6 · зелёный 11.0 / 10.1 / 9.5 · жёлтый 12.8 / 11.7 / 11.0
     кнопки: белый на --focus-blue-strong 5.6, на --focus-red-strong 5.4; тёмный текст на зелёном/жёлтом/голубом ≥ 7.3
     Исходные #0a6cff и #e8203a на тёмном ≈ 4.0 — только свечение, обводки, горох, не текст.

   Светлая версия — ветка feature/design. Ниже блок [data-bs-theme="light"] с теми же токенами
   оставлен резервом (переключатель не подключён, вид в светлом режиме в этой ветке не проверялся).
   ========================================== */

/* --- Шрифты (локальные, OFL: static/fonts/OFL-*.txt) --- */
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/unbounded-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/unbounded-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/unbounded-cyrillic-900-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/unbounded-latin-900-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-cyrillic-400-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-cyrillic-600-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-cyrillic-700-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/manrope-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/manrope-cyrillic-800-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/manrope-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --- Токены: бренд (не зависят от темы) --- */
:root {
    --focus-navy: #003380;
    --focus-navy-rgb: 0, 51, 128;
    --focus-blue: #0a6cff;          /* свечение, обводки, крупные элементы */
    --focus-blue-rgb: 10, 108, 255;
    --focus-blue-strong: #0a5fe0;   /* заливка кнопок под белым текстом */
    --focus-sky: #5b9fff;           /* иконки, графики, акцентный текст на тёмном */
    --focus-sky-rgb: 91, 159, 255;
    --focus-red: #e8203a;           /* горох, свечение, крупный декор */
    --focus-red-rgb: 232, 32, 58;
    --focus-red-strong: #d11a32;    /* заливка кнопок под белым текстом */
    --focus-ink: #070b16;           /* тёмный текст на ярких заливках */
    --focus-coin: #ffd84d;
    --focus-lilac: #b69cff;
    --focus-pink: #ff8fc7;
    --focus-mint: #5ef2c8;

    /* Голографический перелив и декор */
    --focus-holo: linear-gradient(115deg, #7fb3ff 0%, #b69cff 30%, #ff8fc7 55%, #5ef2c8 80%, #7fb3ff 100%);
    --focus-holo-soft: linear-gradient(115deg, rgba(127, 179, 255, .55), rgba(182, 156, 255, .55), rgba(255, 143, 199, .55), rgba(94, 242, 200, .55));
    --focus-dots: radial-gradient(circle, rgba(195, 203, 224, .22) 1.2px, transparent 1.6px);
    --focus-halftone: radial-gradient(circle, var(--focus-navy) 2.6px, transparent 3px);

    /* Шрифты */
    --focus-font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
    --focus-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Радиусы */
    --focus-r-sm: 10px;
    --focus-r: 16px;
    --focus-r-lg: 22px;
    --focus-r-pill: 999px;

    --focus-tap: 44px;
    --focus-focus-ring: 0 0 0 3px rgba(91, 159, 255, .55);
}

/* --- Токены: тёмная тема (основная в этой ветке) --- */
:root, [data-bs-theme="dark"] {
    --focus-bg: #070b16;            /* фон страницы */
    --focus-bg-deep: #050811;       /* меню, шапка */
    --focus-surface: #0f1629;       /* карточки */
    --focus-surface-2: #141c33;     /* приподнятые блоки, модалки, тосты */
    --focus-surface-3: #1b2440;     /* наведение, бейджи */
    --focus-field: #0b1222;         /* поля ввода */
    --focus-text: #ffffff;
    --focus-text-2: #c3cbe0;
    --focus-muted: #98a3c0;
    --focus-line: rgba(195, 203, 224, .12);
    --focus-line-strong: rgba(195, 203, 224, .26);
    --focus-link: #7fb3ff;
    --focus-accent: #5b9fff;
    --focus-danger-text: #ff5a6e;
    --focus-success-text: #3ddc84;
    --focus-warning-text: #ffc93c;
    --focus-danger-soft: rgba(255, 90, 110, .1);
    --focus-success-soft: rgba(61, 220, 132, .09);
    --focus-warning-soft: rgba(255, 201, 60, .09);
    --focus-accent-soft: rgba(91, 159, 255, .1);
    --focus-shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 28px rgba(0, 0, 0, .35);
    --focus-glow-blue: 0 0 0 1px rgba(91, 159, 255, .45), 0 6px 22px rgba(10, 108, 255, .45);
    --focus-glow-red: 0 0 0 1px rgba(255, 90, 110, .45), 0 6px 22px rgba(232, 32, 58, .45);
    --focus-glow-holo: 0 0 18px rgba(182, 156, 255, .28), 0 0 32px rgba(91, 159, 255, .18);
}

/* --- Резерв: те же токены для светлого режима (не используется в этой ветке) --- */
[data-bs-theme="light"] {
    --focus-bg: #f5f8ff; --focus-bg-deep: #ffffff; --focus-surface: #ffffff; --focus-surface-2: #ffffff; --focus-surface-3: #e6efff; --focus-field: #ffffff;
    --focus-text: #0e1424; --focus-text-2: #3b4664; --focus-muted: #5a6785; --focus-line: #d6e0f2; --focus-line-strong: #b6c6e3;
    --focus-link: #0a5fe0; --focus-accent: #0a5fe0; --focus-danger-text: #d11a32; --focus-success-text: #0b7a3b; --focus-warning-text: #8a5a00;
    --focus-danger-soft: #fff1f3; --focus-success-soft: #e3f6ea; --focus-warning-soft: #fff6db; --focus-accent-soft: #e6efff;
    --focus-shadow-card: 0 8px 24px rgba(0, 51, 128, .07); --focus-glow-blue: 3px 3px 0 #003380; --focus-glow-red: 3px 3px 0 #003380; --focus-glow-holo: none;
}

/* --- Переменные Bootstrap из токенов (тёмный режим) --- */
:root, [data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-font-family: var(--focus-font-body);
    --bs-body-color: var(--focus-text-2);
    --bs-body-color-rgb: 195, 203, 224;
    --bs-body-bg: var(--focus-bg);
    --bs-body-bg-rgb: 7, 11, 22;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--focus-muted);
    --bs-secondary-color-rgb: 152, 163, 192;
    --bs-secondary-bg: var(--focus-surface-2);
    --bs-secondary-bg-rgb: 20, 28, 51;
    --bs-tertiary-color: var(--focus-muted);
    --bs-tertiary-bg: var(--focus-surface);
    --bs-tertiary-bg-rgb: 15, 22, 41;
    --bs-heading-color: #ffffff;
    --bs-link-color: var(--focus-link);
    --bs-link-color-rgb: 127, 179, 255;
    --bs-link-hover-color: #ffffff;
    --bs-link-hover-color-rgb: 255, 255, 255;
    --bs-border-color: var(--focus-line-strong);
    --bs-border-color-translucent: var(--focus-line);
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--focus-r);
    --bs-border-radius-xl: var(--focus-r-lg);
    --bs-border-radius-pill: var(--focus-r-pill);
    --bs-focus-ring-color: rgba(91, 159, 255, .55);
    --bs-form-valid-color: var(--focus-success-text);
    --bs-form-valid-border-color: var(--focus-success-text);
    --bs-form-invalid-color: var(--focus-danger-text);
    --bs-form-invalid-border-color: var(--focus-danger-text);

    --bs-primary: var(--focus-blue-strong);
    --bs-primary-rgb: 10, 95, 224;
    --bs-secondary: #3a466b;
    --bs-secondary-rgb: 58, 70, 107;
    --bs-success: var(--focus-success-text);
    --bs-success-rgb: 61, 220, 132;
    --bs-info: var(--focus-sky);
    --bs-info-rgb: var(--focus-sky-rgb);
    --bs-warning: var(--focus-warning-text);
    --bs-warning-rgb: 255, 201, 60;
    --bs-danger: var(--focus-red-strong);
    --bs-danger-rgb: 209, 26, 50;
    --bs-dark: var(--focus-surface-3);
    --bs-dark-rgb: 27, 36, 64;
    --bs-light: var(--focus-surface-2);       /* в тёмном режиме «светлый» фон = приподнятый тёмный блок */
    --bs-light-rgb: 20, 28, 51;
    --bs-white-rgb: 15, 22, 41;               /* bg-white → поверхность карточки, без белых прямоугольников */

    --bs-primary-text-emphasis: var(--focus-link);
    --bs-primary-bg-subtle: rgba(91, 159, 255, .12);
    --bs-primary-border-subtle: rgba(91, 159, 255, .4);
    --bs-info-text-emphasis: var(--focus-link);
    --bs-info-bg-subtle: rgba(91, 159, 255, .12);
    --bs-info-border-subtle: rgba(91, 159, 255, .4);
    --bs-danger-text-emphasis: var(--focus-danger-text);
    --bs-danger-bg-subtle: var(--focus-danger-soft);
    --bs-danger-border-subtle: rgba(255, 90, 110, .45);
    --bs-success-text-emphasis: var(--focus-success-text);
    --bs-success-bg-subtle: var(--focus-success-soft);
    --bs-success-border-subtle: rgba(61, 220, 132, .4);
    --bs-warning-text-emphasis: var(--focus-warning-text);
    --bs-warning-bg-subtle: var(--focus-warning-soft);
    --bs-warning-border-subtle: rgba(255, 201, 60, .4);
    --bs-secondary-text-emphasis: var(--focus-text-2);
    --bs-secondary-bg-subtle: var(--focus-surface-2);
    --bs-secondary-border-subtle: var(--focus-line-strong);
    --bs-dark-text-emphasis: #ffffff;
    --bs-dark-bg-subtle: var(--focus-surface-2);
    --bs-dark-border-subtle: var(--focus-line-strong);
    --bs-light-text-emphasis: #ffffff;
    --bs-light-bg-subtle: var(--focus-surface-2);
    --bs-light-border-subtle: var(--focus-line-strong);
}

body { font-family: var(--focus-font-body); color: var(--focus-text-2); background-color: var(--focus-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--focus-text); letter-spacing: -0.01em; }
.focus-display { font-family: var(--focus-font-display); font-weight: 900; letter-spacing: 0; }
::selection { background: var(--focus-lilac); color: var(--focus-ink); }
b, strong { color: var(--focus-text); }

/* Текст-утилиты: цвета, которые читаются на тёмном (фоны bg-* остаются насыщенными) */
.text-primary { color: var(--focus-link) !important; }
.text-info { color: var(--focus-accent) !important; }
.text-danger { color: var(--focus-danger-text) !important; }
.text-success { color: var(--focus-success-text) !important; }
.text-warning { color: var(--focus-warning-text) !important; }
.text-secondary, .text-muted, .text-body-secondary { color: var(--focus-muted) !important; }
.text-light, .text-white, .text-body-emphasis { color: #ffffff !important; }
.text-dark { color: var(--focus-ink) !important; }           /* только на ярких бейджах и кнопках */
.text-body { color: var(--focus-text-2) !important; }
.border-secondary { border-color: var(--focus-line-strong) !important; }
.border-info, .border-primary { border-color: rgba(91, 159, 255, .55) !important; }
.border-warning { border-color: rgba(255, 201, 60, .6) !important; }
.border-success { border-color: rgba(61, 220, 132, .55) !important; }
.border-danger { border-color: rgba(255, 90, 110, .6) !important; }
.bg-body, .bg-body-tertiary { background-color: var(--focus-surface-2) !important; }
.bg-body-secondary { background-color: var(--focus-surface-3) !important; }
a { text-underline-offset: 3px; }
a:hover { color: #ffffff; }
hr { border-color: var(--focus-line-strong); opacity: 1; }

/* --- Фирменный горох (halftone) и декор --- */
.halftone { background-color: var(--focus-red); background-image: var(--focus-halftone), var(--focus-halftone); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.halftone-soft, .dots-bg { background-color: var(--focus-surface-2); background-image: var(--focus-dots); background-size: 14px 14px; }
.holo-line { height: 2px; background: var(--focus-holo); }
/* Голографическая рамка: фон блока внутри, перелив только по краю */
.holo-border { border: 1px solid transparent !important; background: linear-gradient(var(--holo-fill, var(--focus-surface)), var(--holo-fill, var(--focus-surface))) padding-box, var(--focus-holo) border-box !important; }

/* --- Кнопки --- */
.btn {
    --bs-btn-font-weight: 700;
    --bs-btn-border-radius: 12px;
    --bs-btn-border-width: 1px;
    --bs-btn-focus-box-shadow: var(--focus-focus-ring);
    --bs-btn-disabled-opacity: .6;
    transition: transform .08s ease, box-shadow .18s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: 0; box-shadow: var(--focus-focus-ring) !important; }
.btn:active, .btn.active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none !important; }
.btn-sm { --bs-btn-border-radius: 10px; }
.btn-lg { --bs-btn-border-radius: 14px; }

.btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--focus-blue-strong); --bs-btn-border-color: rgba(127, 179, 255, .5);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--focus-blue); --bs-btn-hover-border-color: #7fb3ff;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0850c2; --bs-btn-active-border-color: #7fb3ff;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--focus-blue-strong); --bs-btn-disabled-border-color: var(--focus-blue-strong);
}
.btn-primary:hover, .btn-outline-primary:hover, .btn-outline-info:hover { box-shadow: var(--focus-glow-blue); }
.btn-danger {
    --bs-btn-color: #fff; --bs-btn-bg: var(--focus-red-strong); --bs-btn-border-color: rgba(255, 90, 110, .55);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #c0172e; --bs-btn-hover-border-color: #ff5a6e;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #a8132a; --bs-btn-active-border-color: #ff5a6e;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--focus-red-strong); --bs-btn-disabled-border-color: var(--focus-red-strong);
}
.btn-danger:hover, .btn-outline-danger:hover, .btn-focus-cta:hover { box-shadow: var(--focus-glow-red); }
.btn-success {
    --bs-btn-color: var(--focus-ink); --bs-btn-bg: var(--focus-success-text); --bs-btn-border-color: var(--focus-success-text);
    --bs-btn-hover-color: var(--focus-ink); --bs-btn-hover-bg: #62e69d; --bs-btn-hover-border-color: #62e69d;
    --bs-btn-active-color: var(--focus-ink); --bs-btn-active-bg: #2fc472; --bs-btn-active-border-color: #2fc472;
    --bs-btn-disabled-color: var(--focus-ink); --bs-btn-disabled-bg: var(--focus-success-text); --bs-btn-disabled-border-color: var(--focus-success-text);
}
.btn-success:hover, .btn-outline-success:hover { box-shadow: 0 0 0 1px rgba(61, 220, 132, .45), 0 6px 22px rgba(61, 220, 132, .3); }
.btn-info {
    --bs-btn-color: var(--focus-ink); --bs-btn-bg: var(--focus-sky); --bs-btn-border-color: var(--focus-sky);
    --bs-btn-hover-color: var(--focus-ink); --bs-btn-hover-bg: #7fb3ff; --bs-btn-hover-border-color: #7fb3ff;
    --bs-btn-active-color: var(--focus-ink); --bs-btn-active-bg: #4a90f5; --bs-btn-active-border-color: #4a90f5;
    --bs-btn-disabled-color: var(--focus-ink); --bs-btn-disabled-bg: var(--focus-sky); --bs-btn-disabled-border-color: var(--focus-sky);
}
.btn-info:hover { box-shadow: var(--focus-glow-blue); }
.btn-info.text-white { color: var(--focus-ink) !important; }   /* белый на голубом не читается */
.btn-warning {
    --bs-btn-color: var(--focus-ink); --bs-btn-bg: var(--focus-warning-text); --bs-btn-border-color: var(--focus-warning-text);
    --bs-btn-hover-color: var(--focus-ink); --bs-btn-hover-bg: #ffd666; --bs-btn-hover-border-color: #ffd666;
    --bs-btn-active-color: var(--focus-ink); --bs-btn-active-bg: #f0b522; --bs-btn-active-border-color: #f0b522;
    --bs-btn-disabled-color: var(--focus-ink); --bs-btn-disabled-bg: var(--focus-warning-text); --bs-btn-disabled-border-color: var(--focus-warning-text);
}
.btn-warning:hover, .btn-outline-warning:hover { box-shadow: 0 0 0 1px rgba(255, 201, 60, .45), 0 6px 22px rgba(255, 201, 60, .25); }
.btn-secondary, .btn-dark, .btn-light {
    --bs-btn-color: #fff; --bs-btn-bg: var(--focus-surface-3); --bs-btn-border-color: var(--focus-line-strong);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #26325a; --bs-btn-hover-border-color: rgba(195, 203, 224, .45);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #2e3b68; --bs-btn-active-border-color: rgba(195, 203, 224, .55);
    --bs-btn-disabled-color: var(--focus-text-2); --bs-btn-disabled-bg: var(--focus-surface-3); --bs-btn-disabled-border-color: var(--focus-line);
}
.btn-outline-primary, .btn-outline-info {
    --bs-btn-color: var(--focus-link); --bs-btn-border-color: rgba(127, 179, 255, .55); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--focus-blue-strong); --bs-btn-hover-border-color: #7fb3ff;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #0850c2; --bs-btn-active-border-color: #7fb3ff;
    --bs-btn-disabled-color: var(--focus-link); --bs-btn-disabled-border-color: rgba(127, 179, 255, .4);
}
.btn-outline-danger {
    --bs-btn-color: var(--focus-danger-text); --bs-btn-border-color: rgba(255, 90, 110, .6); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--focus-red-strong); --bs-btn-hover-border-color: #ff5a6e;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #a8132a; --bs-btn-active-border-color: #ff5a6e;
    --bs-btn-disabled-color: var(--focus-danger-text); --bs-btn-disabled-border-color: rgba(255, 90, 110, .4);
}
.btn-outline-success {
    --bs-btn-color: var(--focus-success-text); --bs-btn-border-color: rgba(61, 220, 132, .55); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--focus-ink); --bs-btn-hover-bg: var(--focus-success-text); --bs-btn-hover-border-color: var(--focus-success-text);
    --bs-btn-active-color: var(--focus-ink); --bs-btn-active-bg: #2fc472; --bs-btn-active-border-color: #2fc472;
    --bs-btn-disabled-color: var(--focus-success-text); --bs-btn-disabled-border-color: rgba(61, 220, 132, .4);
}
.btn-outline-warning {
    --bs-btn-color: var(--focus-warning-text); --bs-btn-border-color: rgba(255, 201, 60, .55); --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--focus-ink); --bs-btn-hover-bg: var(--focus-warning-text); --bs-btn-hover-border-color: var(--focus-warning-text);
    --bs-btn-active-color: var(--focus-ink); --bs-btn-active-bg: #f0b522; --bs-btn-active-border-color: #f0b522;
    --bs-btn-disabled-color: var(--focus-warning-text); --bs-btn-disabled-border-color: rgba(255, 201, 60, .4);
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark {
    --bs-btn-color: var(--focus-text-2); --bs-btn-border-color: var(--focus-line-strong); --bs-btn-bg: transparent;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--focus-surface-3); --bs-btn-hover-border-color: rgba(195, 203, 224, .5);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #26325a; --bs-btn-active-border-color: rgba(195, 203, 224, .6);
    --bs-btn-disabled-color: var(--focus-muted); --bs-btn-disabled-border-color: var(--focus-line);
}
.btn-link { --bs-btn-color: var(--focus-link); --bs-btn-hover-color: #fff; font-weight: 700; }

/* Главное действие бренда: красная кнопка */
.btn-focus-cta { background: var(--focus-red-strong); color: #fff !important; border: 1px solid rgba(255, 90, 110, .6); border-radius: 14px; font-weight: 800; }
.btn-focus-cta:hover { background: #c0172e; }

/* --- Карточки, модалки, списки --- */
.card { --bs-card-bg: var(--focus-surface); --bs-card-color: var(--focus-text-2); --bs-card-border-color: var(--focus-line); --bs-card-border-radius: var(--focus-r); --bs-card-cap-bg: var(--focus-surface-2); --bs-card-cap-color: #fff; }
.modal { --bs-modal-bg: var(--focus-surface-2); --bs-modal-color: var(--focus-text-2); --bs-modal-border-color: var(--focus-line-strong); --bs-modal-border-width: 1px; --bs-modal-border-radius: var(--focus-r-lg); --bs-modal-header-border-color: var(--focus-line); --bs-modal-footer-border-color: var(--focus-line); }
.modal-content { box-shadow: 0 24px 60px rgba(0, 0, 0, .6), var(--focus-glow-holo); }
.modal-content::before { content: ''; display: block; height: 2px; background: var(--focus-holo); border-radius: var(--focus-r-lg) var(--focus-r-lg) 0 0; }
.modal-title { font-weight: 800; color: #fff; }
.modal-backdrop { --bs-backdrop-bg: #02040a; --bs-backdrop-opacity: .75; }
.modal-header.bg-dark { background: var(--focus-surface-3) !important; color: #fff; }
.modal-header.bg-dark .modal-title { color: #fff; }
.dropdown-menu { --bs-dropdown-bg: var(--focus-surface-2); --bs-dropdown-color: var(--focus-text-2); --bs-dropdown-border-color: var(--focus-line-strong); --bs-dropdown-border-radius: 12px; --bs-dropdown-link-color: var(--focus-text-2); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: var(--focus-surface-3); --bs-dropdown-link-active-bg: var(--focus-blue-strong); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--focus-text-2); --bs-list-group-border-color: var(--focus-line); --bs-list-group-action-hover-bg: var(--focus-surface-3); --bs-list-group-action-hover-color: #fff; --bs-list-group-active-bg: var(--focus-blue-strong); --bs-list-group-active-border-color: var(--focus-blue-strong); }
.nav-tabs { --bs-nav-tabs-border-color: var(--focus-line-strong); --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: var(--focus-surface); --bs-nav-tabs-link-active-border-color: var(--focus-line-strong) var(--focus-line-strong) var(--focus-surface); --bs-nav-tabs-link-hover-border-color: var(--focus-line); }
.nav-tabs .nav-link { font-weight: 700; color: var(--focus-text-2); }
.nav-tabs .nav-link:hover { color: #fff; }
.nav-tabs .nav-link.active { border-top: 2px solid transparent; border-image: var(--focus-holo) 1 0 0 0; }
.pagination { --bs-pagination-bg: var(--focus-surface); --bs-pagination-color: var(--focus-link); --bs-pagination-border-color: var(--focus-line-strong); --bs-pagination-hover-bg: var(--focus-surface-3); --bs-pagination-hover-color: #fff; --bs-pagination-active-bg: var(--focus-blue-strong); --bs-pagination-active-border-color: var(--focus-blue-strong); }
.progress { --bs-progress-bg: var(--focus-surface-3); --bs-progress-border-radius: var(--focus-r-pill); }
.alert { --bs-alert-border-radius: 14px; font-weight: 500; }
.alert-info, .alert-primary { --bs-alert-color: #dbe7ff; --bs-alert-bg: rgba(91, 159, 255, .1); --bs-alert-border-color: rgba(91, 159, 255, .4); --bs-alert-link-color: #fff; }
.alert-success { --bs-alert-color: #c9f5dc; --bs-alert-bg: var(--focus-success-soft); --bs-alert-border-color: rgba(61, 220, 132, .4); --bs-alert-link-color: #fff; }
.alert-warning { --bs-alert-color: #ffeab0; --bs-alert-bg: var(--focus-warning-soft); --bs-alert-border-color: rgba(255, 201, 60, .4); --bs-alert-link-color: #fff; }
.alert-danger { --bs-alert-color: #ffd0d6; --bs-alert-bg: var(--focus-danger-soft); --bs-alert-border-color: rgba(255, 90, 110, .45); --bs-alert-link-color: #fff; }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-color: var(--focus-text-2); --bs-alert-bg: var(--focus-surface-2); --bs-alert-border-color: var(--focus-line-strong); --bs-alert-link-color: #fff; }
.accordion { --bs-accordion-bg: var(--focus-surface); --bs-accordion-color: var(--focus-text-2); --bs-accordion-border-color: var(--focus-line); --bs-accordion-btn-color: #fff; --bs-accordion-btn-bg: var(--focus-surface); --bs-accordion-active-bg: var(--focus-surface-2); --bs-accordion-active-color: #fff; --bs-accordion-btn-focus-box-shadow: var(--focus-focus-ring); }
.popover, .tooltip { --bs-popover-bg: var(--focus-surface-2); --bs-tooltip-bg: var(--focus-surface-3); --bs-tooltip-color: #fff; }
.offcanvas { --bs-offcanvas-bg: var(--focus-surface); --bs-offcanvas-color: var(--focus-text-2); }

/* --- Формы --- */
.form-control, .form-select {
    border: 1px solid var(--focus-line-strong);
    border-radius: 12px;
    background-color: var(--focus-field);
    color: #fff;
    min-height: var(--focus-tap);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control-sm, .form-select-sm { min-height: 36px; border-radius: 10px; }
textarea.form-control { min-height: 0; }
.form-control::placeholder { color: var(--focus-muted); opacity: 1; }
.form-control:hover, .form-select:hover { border-color: rgba(195, 203, 224, .45); }
.form-control:focus, .form-select:focus { background-color: var(--focus-field); color: #fff; border-color: var(--focus-sky); box-shadow: var(--focus-focus-ring); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--focus-surface-2); color: var(--focus-muted); }
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--focus-danger-text); background-color: rgba(255, 90, 110, .07); }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(255, 90, 110, .35); }
.invalid-feedback { color: var(--focus-danger-text); font-weight: 600; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--focus-success-text); }
.form-select option { background-color: var(--focus-surface-2); color: #fff; }
.form-label, label { font-weight: 600; color: var(--focus-text-2); }
.form-check-input { background-color: var(--focus-field); border: 1px solid rgba(195, 203, 224, .45); width: 1.15em; height: 1.15em; }
.form-check-input:checked { background-color: var(--focus-blue-strong); border-color: #7fb3ff; }
.form-check-input:focus { box-shadow: var(--focus-focus-ring); border-color: var(--focus-sky); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }
.form-range::-webkit-slider-thumb { background: var(--focus-sky); }
.form-range::-moz-range-thumb { background: var(--focus-sky); }
.form-range::-webkit-slider-runnable-track { background: var(--focus-surface-3); }
.form-range::-moz-range-track { background: var(--focus-surface-3); }
.input-group-text { background: var(--focus-surface-3); border: 1px solid var(--focus-line-strong); color: #fff; font-weight: 700; }
input[type="file"].form-control { padding-top: .55rem; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .9; }  /* светлый значок даёт color-scheme: dark */
input[type="color"].form-control { background-color: var(--focus-field); }

/* --- Таблицы --- */
.table { --bs-table-color: var(--focus-text-2); --bs-table-bg: transparent; --bs-table-border-color: var(--focus-line); --bs-table-striped-color: var(--focus-text-2); --bs-table-striped-bg: rgba(255, 255, 255, .025); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(91, 159, 255, .08); --bs-table-active-bg: rgba(91, 159, 255, .12); }
.table > thead { color: #fff; }
.table > thead > tr > th { border-bottom: 1px solid rgba(91, 159, 255, .5); }
.table-dark, .table > thead.table-dark, tr.table-dark, .table-light, .table > thead.table-light {
    --bs-table-color: #fff; --bs-table-bg: #0b1222; --bs-table-border-color: var(--focus-line);
    --bs-table-striped-bg: #0d1528; --bs-table-hover-bg: #111a33; --bs-table-hover-color: #fff;
    color: #fff;
}
tr.table-dark > td { border-top: 1px solid rgba(91, 159, 255, .45); }

/* --- Бейджи --- */
.badge { font-weight: 700; border-radius: var(--focus-r-pill); letter-spacing: .01em; }
/* Яркие заливки — тёмный текст; полупрозрачные (bg-opacity-*) берут свой text-* */
.badge.bg-info:not([class*="bg-opacity"]), .badge.bg-warning:not([class*="bg-opacity"]), .badge.bg-success:not([class*="bg-opacity"]),
.text-bg-info, .text-bg-warning, .text-bg-success { color: var(--focus-ink) !important; }
.badge.bg-primary, .badge.bg-danger, .badge.bg-secondary, .badge.bg-dark, .text-bg-primary, .text-bg-danger, .text-bg-secondary, .text-bg-dark { color: #fff !important; }
.badge.bg-dark, .badge.bg-secondary { border: 1px solid var(--focus-line-strong); }
.badge.bg-light { color: #fff !important; border: 1px solid var(--focus-line-strong); }
/* Текст на полупрозрачных цветных бейджах — светлее, чтобы держать 4.5:1 */
.badge[class*="bg-opacity"].text-info, .badge[class*="bg-opacity"].text-primary { color: #a9cbff !important; }
.bg-danger.bg-opacity-25, .bg-danger.bg-opacity-10 { background-color: rgba(255, 90, 110, .14) !important; }

/* --- Тосты и уведомления --- */
.focus-toast { background: var(--focus-surface-2); color: #fff; border: 1px solid var(--focus-line-strong) !important; border-left-width: 4px !important; border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.focus-toast-success { border-left-color: var(--focus-success-text) !important; }
.focus-toast-success .toast-body i { color: var(--focus-success-text); }
.focus-toast-danger { border-left-color: var(--focus-danger-text) !important; }
.focus-toast-danger .toast-body i { color: var(--focus-danger-text); }
.focus-toast-info { border-left-color: var(--focus-sky) !important; }
.focus-toast-info .toast-body i { color: var(--focus-sky); }
.toast { --bs-toast-bg: var(--focus-surface-2); --bs-toast-color: #fff; }

/* --- Скроллбар --- */
* { scrollbar-color: rgba(195, 203, 224, .25) transparent; scrollbar-width: thin; }

/* --- Лёгкие анимации: только для тех, кто не просил их убрать --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ==========================================
   НЕОН (ветка feature/design-neon): приглушённое сине-сиреневое свечение, стекло, таблетки, сегменты.
   Слой поверх тёмной темы: переопределяет только то, что меняется.
   Контраст: белый на градиенте кнопки #0a5fe0 → #6d4ae8 — 5.64 → 5.53; сиреневый текст #a08bff на стекле — 6.3.
   ========================================== */
:root, [data-bs-theme="dark"] {
    --focus-violet: #6d4ae8;          /* заливка под белым текстом */
    --focus-violet-text: #a08bff;     /* сиреневый текст и свечение на тёмном */
    --focus-grad: linear-gradient(135deg, var(--focus-blue-strong) 0%, var(--focus-violet) 100%);
    --focus-grad-soft: linear-gradient(135deg, rgba(10, 108, 255, .22), rgba(109, 74, 232, .22));
    --focus-glass: rgba(24, 33, 63, .62);
    --focus-glass-strong: rgba(28, 38, 72, .78);
    --focus-glass-line: rgba(255, 255, 255, .08);
    --focus-glass-hi: inset 0 1px 0 rgba(255, 255, 255, .07);
    --focus-glow-neon: 0 0 0 1px rgba(160, 139, 255, .32), 0 10px 30px rgba(10, 108, 255, .16), 0 0 22px rgba(109, 74, 232, .14);
    --focus-r-card: 20px;
}

/* Кнопки — таблетки; основная с градиентом, нажатие — лёгкое сжатие */
.btn { --bs-btn-border-radius: 999px; transition: transform .12s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease, filter .15s ease; }
.btn-sm, .btn-lg { --bs-btn-border-radius: 999px; }
.btn:active, .btn.active { transform: scale(.97); }
.btn-primary { background-image: var(--focus-grad); border-color: rgba(160, 139, 255, .45); }
.btn-primary:hover { background-image: linear-gradient(135deg, #0a6cff, #7a58f0); box-shadow: var(--focus-glow-neon); }
.btn-primary:disabled, .btn-primary.disabled { background-image: var(--focus-grad); }
.btn-danger:hover, .btn-focus-cta:hover { box-shadow: 0 0 0 1px rgba(255, 90, 110, .4), 0 8px 24px rgba(232, 32, 58, .3); }
.btn-outline-primary:hover, .btn-outline-info:hover { background-image: var(--focus-grad); }

/* Сегменты: вкладки, группы кнопок — как «1D 1W 1M» */
.nav-tabs { border: 0; background: rgba(255, 255, 255, .04); border: 1px solid var(--focus-glass-line); border-radius: 999px; padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.nav-tabs .nav-link { border: 0 !important; border-radius: 999px; color: var(--focus-text-2); padding: 7px 14px; font-weight: 700; margin: 0; transition: background-color .2s, color .2s, box-shadow .2s; }
.nav-tabs .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: #fff; background: var(--focus-grad); border-image: none; box-shadow: 0 0 16px rgba(109, 74, 232, .35); }
.btn-group, .btn-group-vertical { background: rgba(255, 255, 255, .04); border: 1px solid var(--focus-glass-line); border-radius: 999px; padding: 3px; gap: 2px; }
.btn-group > .btn, .btn-group > .btn-group > .btn { border-radius: 999px !important; border-color: transparent; }
.btn-check:checked + .btn, .btn-group > .btn.active { background-image: var(--focus-grad); color: #fff; border-color: transparent; }

/* Стекло для модалок, списков, тостов */
.modal { --bs-modal-bg: var(--focus-glass-strong); --bs-modal-border-color: var(--focus-glass-line); --bs-modal-border-radius: 22px; }
.modal-content { background-color: #141c35; box-shadow: var(--focus-glass-hi), 0 24px 60px rgba(0, 0, 0, .6), 0 0 30px rgba(109, 74, 232, .14); }
.modal-content::before { background: var(--focus-grad); opacity: .8; }
.focus-toast { background: #141c35; border-color: var(--focus-glass-line) !important; box-shadow: var(--focus-glass-hi), 0 16px 40px rgba(0, 0, 0, .5); }
.form-control, .form-select { border-radius: 14px; }
.form-control:focus, .form-select:focus { border-color: var(--focus-violet-text); box-shadow: 0 0 0 3px rgba(160, 139, 255, .3); }

/* Подсказка «сколько до следующей зоны KPI» (шаг 4 этапа 2) */
:root {
    --focus-hint-bg: #18213a;
    --focus-hint-line: rgba(160, 139, 255, .45);
    --focus-hint-text: #f2f4fb;
    --focus-hint-muted: #a3adc8;                    /* подписи колонок: 7.4:1 на --focus-hint-bg */
    --focus-hint-sep: rgba(195, 203, 224, .16);     /* тонкие разделители строк */
    --focus-hint-total-bg: rgba(109, 74, 232, .28); /* итоговая строка: белый текст 10:1, --focus-hint-accent 5.2:1 */
    --focus-hint-accent: #b9a8ff;
    --focus-hint-zone-green: #3ddc84;               /* кружки зон — декор, рядом всегда текст */
    --focus-hint-zone-yellow: #ffc93c;
    --focus-hint-zone-red: #ff5a6e;
}
/* Уровни и рамки аватара (этап 6Б). Рамка — фон в отступе аватара и свечение; без анимаций.
   Текст значков (--focus-lvl-N-text) — на --focus-lvl-chip-bg, контраст не ниже 7:1. */
:root {
    --focus-lvl-chip-bg: #121a2e;
    --focus-lvl-1: #5d6680;
    --focus-lvl-1-text: #c3cbe0;
    --focus-lvl-2: linear-gradient(135deg, #6f8fb8, #9fb7d6);
    --focus-lvl-2-text: #a9c3e6;
    --focus-lvl-3: linear-gradient(135deg, #2f7bff, #5b9fff);
    --focus-lvl-3-text: #7fb3ff;
    --focus-lvl-4: linear-gradient(135deg, #16b8a0, #3ddc84);
    --focus-lvl-4-text: #5fe0c0;
    --focus-lvl-4-glow: 0 0 14px rgba(61, 220, 132, .35);
    --focus-lvl-5: linear-gradient(135deg, #6d4ae8, #a08bff);
    --focus-lvl-5-text: #b9a6ff;
    --focus-lvl-5-glow: 0 0 20px rgba(160, 139, 255, .45);
    --focus-lvl-6: linear-gradient(135deg, #c98a14, #ffd36a 50%, #c98a14);
    --focus-lvl-6-text: #ffd36a;
    --focus-lvl-6-glow: 0 0 22px rgba(255, 201, 60, .45);
    --focus-lvl-7: conic-gradient(from 210deg, #2f7bff, #6d4ae8, #ff5ac8, #2f7bff);
    --focus-lvl-7-text: #ff9fd8;
    --focus-lvl-7-glow: 0 0 24px rgba(255, 90, 200, .4), 0 0 8px rgba(109, 74, 232, .5);
    --focus-lvl-8: conic-gradient(from 0deg, #ffd36a, #ff7ab6, #a08bff, #5b9fff, #5fe0c0, #ffd36a);
    --focus-lvl-8-text: #fff2c4;
    --focus-lvl-8-glow: 0 0 0 2px rgba(255, 211, 106, .55), 0 0 30px rgba(255, 211, 106, .45), 0 0 12px rgba(160, 139, 255, .6);
}

/* Мобильная версия (этап 7): фон закреплённой первой колонки широких таблиц (непрозрачный, как стекло карточки на фоне страницы) */
:root {
    --focus-sticky-bg: #121a30;
    --focus-sticky-head-bg: #0b1222;
}

/* Android/Chrome (этап 7): страница уже тёмная — автозатемнение Chrome её не перекрашивает (и meta color-scheme в шаблонах) */
html { color-scheme: dark; }