/*
 * AI Dashboard — Стеклянная тема (слой оформления поверх портала).
 *
 * Ничего не меняет в разметке и логике: только переопределяет вид.
 * Все правила начинаются с html.gx — класс ставит плагин темы; убрали класс — вернулся прежний вид.
 * Токены (--gx-*) лежат в gx-tokens.css.
 *
 * Содержание:
 *   1. Связка токенов портала с токенами темы
 *   2. Основа: шрифт, прокрутка, фокус
 *   3. Каркас на компьютере: оболочка, шапка, вкладки отделов, боковая панель, панель содержимого
 *   4. Шапка: кнопки, язык, колокольчик, пользователь, поиск
 *   5. Боковая панель: приветствие, разделы, карточка ИИ
 *   6. Строка раздела
 *   7. Содержимое разделов: карточки, показатели, списки, таблицы, вкладки, кнопки, поля, ИИ-панель
 *   8. Меню ☰, выпадающие панели, плашка
 *   9. Экран входа
 *  10. Движение
 *  11. Телефон
 *  12. Печать
 */

/* ============================================================ 1. Токены портала → токены темы */
html.gx:root {
    --aip-brand: var(--gx-brand-rgb);
    --aip-accent: var(--gx-blue);
    --aip-accent-h: var(--gx-blue-h);
    --aip-accent-soft: var(--gx-blue-soft);
    --aip-accent-text: var(--gx-blue-ink);
    --aip-on-accent: var(--gx-on-blue);
    --aip-frame: var(--gx-frame);
    --aip-bg: var(--gx-panel);
    --aip-surface: var(--gx-card);
    --aip-border: var(--gx-line);
    --aip-text: var(--gx-ink);
    --aip-text2: var(--gx-ink-2);
    --aip-hover: var(--gx-hover);
    --aip-search: var(--gx-pill);
    --aip-scroll: var(--gx-pill-h);
    --aip-icon: var(--gx-ink-2);
    --aip-shadow: var(--gx-sh-3);
}

/* ============================================================ 2. Основа */
html.gx body { background: var(--gx-frame); }
html.gx #aip-app,
html.gx #aip-screen {
    font-family: var(--gx-font);
    letter-spacing: -.006em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html.gx #aip-app input,
html.gx #aip-app select,
html.gx #aip-app textarea,
html.gx #aip-app button { font-family: inherit; letter-spacing: inherit; }
html.gx #aip-app ::-webkit-scrollbar { width: 10px; height: 10px; }
html.gx #aip-app ::-webkit-scrollbar-thumb { background: var(--gx-pill-h); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
html.gx #aip-app ::-webkit-scrollbar-thumb:hover { background: var(--gx-ink-3); border: 3px solid transparent; background-clip: content-box; }
html.gx #aip-app ::-webkit-scrollbar-track { background: transparent; }
html.gx #aip-app :focus-visible,
html.gx #aip-screen :focus-visible { outline: 2px solid var(--gx-blue); outline-offset: 2px; }
html.gx #aip-app #aip-q:focus-visible,
html.gx #aip-app .aip-sfind input:focus-visible,
html.gx #aip-content .mkt-sf:focus-visible,
html.gx #aip-content input.border:focus-visible,
html.gx #aip-content select.border:focus-visible,
html.gx #aip-content textarea.border:focus-visible,
html.gx #aip-screen input.input:focus-visible { outline: 0; }
html.gx #aip-app ::selection,
html.gx #aip-screen ::selection { background: rgb(var(--gx-brand-rgb) / .22); }

/* ============================================================ 3. Каркас на компьютере */
@media screen and (min-width: 768px) {
    html.gx #aip-app {
        display: grid;
        grid-template-columns: 52px 232px minmax(0, 1fr) auto auto auto;
        grid-template-rows: 72px minmax(0, 1fr);
        padding: 12px;
        background:
            radial-gradient(52% 44% at 88% -6%, rgb(var(--gx-brand-rgb) / .16), transparent 62%),
            radial-gradient(40% 40% at -4% 104%, rgb(var(--gx-brand-rgb) / .12), transparent 62%),
            var(--gx-frame);
    }
    /* Белая оболочка под всем содержимым */
    html.gx #aip-app::before {
        content: '';
        position: absolute;
        inset: 12px;
        z-index: 0;
        border-radius: var(--gx-r-shell);
        background: var(--gx-shell);
        box-shadow: var(--gx-sh-2);
        pointer-events: none;
    }
    /* Шапка и тело перестают быть коробками: их части встают в общую сетку */
    html.gx #aip-top,
    html.gx #aip-body { display: contents; }
    html.gx #aip-app > *,
    html.gx #aip-body > * { position: relative; z-index: 1; }
    /* части шапки — выше тела: их всплывающие окна ложатся поверх панели содержимого */
    html.gx #aip-top > * { position: relative; z-index: 4; }
    html.gx #aip-body > #aip-rail { z-index: 2; }
    html.gx #aip-app > #aip-ovl,
    html.gx #aip-app > #aip-drawer,
    html.gx #aip-app > #aip-fly,
    html.gx #aip-app > #aip-toast,
    html.gx #aip-app > #aip-rfly { position: fixed; }
    /* Слои портала — поверх шапки и тела. Общее правило «z-index: 1» выше сильнее правил портала
       и без этих строк опускает меню ☰ и его затемнение под шапку: шапка просвечивает сквозь меню.
       Панель разделов под вкладкой отдела (#aip-rfly) остаётся на своём слое — ниже вкладок:
       иначе её невидимая «перемычка» перекрывала бы нижний край соседних вкладок. */
    html.gx #aip-app > #aip-ovl { z-index: 100000; }
    html.gx #aip-app > #aip-drawer,
    html.gx #aip-app > #aip-fly { z-index: 100001; }
    html.gx #aip-app > #aip-toast { z-index: 100020; }

    html.gx #aip-burger { grid-column: 1; grid-row: 1; align-self: center; justify-self: end; }
    html.gx .aip-brand { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
    html.gx #aip-rail { grid-column: 3; grid-row: 1; align-self: center; }
    html.gx .aip-org { grid-column: 4; grid-row: 1; align-self: center; }
    html.gx #aip-sbtn { grid-column: 5; grid-row: 1; align-self: center; }
    html.gx .aip-top-r { grid-column: 6; grid-row: 1; align-self: center; }
    html.gx #aip-search { grid-column: 3 / 5; grid-row: 1; align-self: center; }
    html.gx #aip-side { grid-column: 1 / 3; grid-row: 2; }
    html.gx #aip-main { grid-column: 3 / -1; grid-row: 2; }
    html.gx #aip-app.aip-tool #aip-main { grid-column: 1 / -1; margin-left: 12px; }

    /* ---- Вкладки отделов (бывшая полоска значков) ---- */
    html.gx #aip-rail {
        width: auto;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
        margin: 0 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    html.gx #aip-rail::-webkit-scrollbar { display: none; }
    html.gx #aip-app .aip-rail-a {
        width: auto;
        min-width: 40px;
        height: 40px;
        flex-shrink: 0;
        gap: 7px;
        padding: 0 15px 0 12px;
        border-radius: var(--gx-r-pill);
        background: var(--gx-pill);
        color: var(--gx-ink-2) !important;
        font-size: 13px;
        font-weight: 500;
        white-space: nowrap;
        transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring);
    }
    html.gx #aip-app .aip-rail-a svg { width: 18px; height: 18px; flex-shrink: 0; }
    html.gx #aip-app .aip-rail-a::after { content: attr(data-tip); }
    html.gx #aip-app .aip-rail-a:hover { background: var(--gx-pill-h); color: var(--gx-ink) !important; }
    html.gx #aip-app .aip-rail-a:active { transform: scale(.96); }
    html.gx #aip-app .aip-rail-a.on {
        background: var(--gx-blue);
        color: var(--gx-on-blue) !important;
        box-shadow: var(--gx-glow);
        font-weight: 600;
    }
    /* Не помещаются — остаются круглые значки, подпись только у текущего отдела (gx-compact).
       Промежутки при этом не сжимаются: значки стоят с тем же шагом, что и вкладки с подписями.
       Ступени подбирает glass.js (STEPS): сначала место уступают подписи в правой части шапки
       (gx-slim1 — имя пользователя, gx-slim2 — название компании), потом значки становятся меньше
       (gx-snug), потом подпись теряет и текущий отдел (gx-tight), в самом конце — вплотную (gx-packed) и «•••». */
    html.gx #aip-rail.gx-compact .aip-rail-a:not(.on) { min-width: 40px; padding: 0 11px; }
    html.gx #aip-rail.gx-compact .aip-rail-a:not(.on)::after { content: none; }
    html.gx #aip-app.gx-slim1 .gx-user-l { display: none; }
    html.gx #aip-app.gx-slim2 .aip-org { display: none; }
    /* совсем тесно — и текущий отдел остаётся значком (его название есть в боковой панели и в строке раздела) */
    html.gx #aip-rail.gx-tight .aip-rail-a.on { min-width: 40px; padding: 0 11px; }
    html.gx #aip-rail.gx-tight .aip-rail-a.on::after { content: none; }
    /* тесно — значки и промежутки чуть меньше, но не вплотную */
    html.gx #aip-rail.gx-snug { gap: 7px; }
    html.gx #aip-rail.gx-snug .aip-rail-a,
    html.gx #aip-rail.gx-snug .gx-rail-more { height: 36px; }
    html.gx #aip-rail.gx-snug .aip-rail-a:not(.on),
    html.gx #aip-rail.gx-tight.gx-snug .aip-rail-a.on { min-width: 36px; padding: 0 9px; }
    html.gx #aip-rail.gx-snug .gx-rail-more { width: 36px; }
    /* узкое окно: вплотную, но все отделы на виду — это лучше, чем прятать их под «•••» */
    html.gx #aip-rail.gx-packed { gap: 4px; }
    html.gx #aip-rail.gx-packed .aip-rail-a,
    html.gx #aip-rail.gx-packed .gx-rail-more { height: 34px; }
    html.gx #aip-rail.gx-packed .aip-rail-a:not(.on),
    html.gx #aip-rail.gx-tight.gx-packed .aip-rail-a.on { min-width: 34px; padding: 0 8px; }
    html.gx #aip-rail.gx-packed .gx-rail-more { width: 34px; }
    html.gx #aip-app .aip-rail-a.gx-hide { display: none; }
    html.gx #aip-app .gx-rail-more {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: var(--gx-r-pill);
        background: var(--gx-pill);
        color: var(--gx-ink-2);
        cursor: pointer;
        transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring);
    }
    html.gx #aip-app .gx-rail-more:hover { background: var(--gx-pill-h); color: var(--gx-ink); }
    html.gx #aip-app .gx-rail-more:active { transform: scale(.94); }
    html.gx #aip-app .aip-rail-sep { width: 1px; height: 22px; flex-shrink: 0; margin: 0 4px; border: 0; background: var(--gx-line); }

    /* Панель разделов под вкладкой отдела */
    html.gx #aip-app #aip-rfly {
        top: 80px !important;
        left: 300px;
        width: 290px;
        max-height: calc(100vh - 100px);
        padding: 10px;
        border: 1px solid var(--gx-line);
        border-radius: 22px;
        background: var(--gx-glass);
        -webkit-backdrop-filter: var(--gx-blur);
        backdrop-filter: var(--gx-blur);
        box-shadow: var(--gx-sh-3);
        transform-origin: 40px 0;
    }
    html.gx #aip-app #aip-rfly.open { animation: gx-pop var(--gx-t-2) var(--gx-ease-out); }
    html.gx #aip-app #aip-rfly::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }

    /* ---- Боковая панель ---- */
    html.gx #aip-side {
        display: flex;
        flex-direction: column;
        width: auto;
        margin: 0;
        padding: 4px 14px 18px 20px;
        border-radius: 0;
        background: transparent;
        overflow-y: auto;
    }
    html.gx #aip-side > * { flex-shrink: 0; }

    /* ---- Панель содержимого ---- */
    html.gx #aip-main {
        margin: 0 12px 12px 0;
        border-radius: var(--gx-r-panel);
        background: var(--gx-panel);
        box-shadow: inset 0 0 0 1px rgb(var(--gx-brand-rgb) / .04);
    }
    html.gx #aip-body { padding: 0; }
}

/* ============================================================ 4. Шапка */
html.gx #aip-top { background: transparent; }
html.gx #aip-app .aip-ibtn {
    width: 42px;
    height: 42px;
    background: var(--gx-pill);
    color: var(--gx-ink);
    transition: background var(--gx-t-1) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .aip-ibtn svg { color: var(--gx-ink); }
html.gx #aip-app .aip-ibtn:hover { background: var(--gx-pill-h); }
html.gx #aip-app .aip-ibtn:active { transform: scale(.92); }
html.gx #aip-app #aip-burger { background: transparent; }
html.gx #aip-app #aip-burger:hover { background: var(--gx-pill); }

/* Знак и название */
html.gx #aip-app .aip-brand {
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 4px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--gx-ink-2) !important;
    overflow: hidden;
}
html.gx #aip-app .aip-brand::before {
    content: '';
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-right: 3px;
    border-radius: 11px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='3' y='3' width='8' height='8' rx='2.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2.6' opacity='.62'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2.6' opacity='.62'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2.6'/%3E%3C/svg%3E") center / 17px no-repeat,
        linear-gradient(135deg, var(--gx-blue-2), var(--gx-blue));
    box-shadow: var(--gx-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.gx #aip-app .aip-brand b { color: var(--gx-ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.gx #aip-app .aip-brand span { white-space: nowrap; }

html.gx #aip-app .aip-org {
    height: 42px;
    padding: 0 16px;
    margin-right: 8px;
    border: 0;
    border-radius: var(--gx-r-pill);
    background: var(--gx-pill);
    color: var(--gx-ink);
    font-size: 13px;
    font-weight: 600;
}
html.gx #aip-app .aip-org svg { color: var(--gx-ink-2); }
/* На средних экранах место в шапке отдаётся вкладкам отделов (портал и сам прячет плашку на узких) */
@media screen and (min-width: 768px) and (max-width: 1599px) { html.gx #aip-app .aip-org { display: none; } }

html.gx #aip-app .aip-top-r { gap: 6px; padding-right: 14px; }
html.gx #aip-app #aip-sbtn { display: inline-flex; margin: 0 8px 0 0; }

/* Язык — переключатель с «бегунком» */
html.gx #aip-app .aip-lang,
html.gx #aip-screen .aip-lang {
    gap: 2px;
    padding: 4px;
    border: 0;
    border-radius: var(--gx-r-pill);
    background: var(--gx-pill);
    overflow: visible;
}
html.gx #aip-app .aip-lang a,
html.gx #aip-screen .aip-lang a {
    padding: 7px 12px;
    border: 0;
    border-radius: var(--gx-r-pill);
    color: var(--gx-ink-2) !important;
    font-weight: 500;
    transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .aip-lang a:hover,
html.gx #aip-screen .aip-lang a:hover { background: transparent; color: var(--gx-ink) !important; }
html.gx #aip-app .aip-lang a.on,
html.gx #aip-screen .aip-lang a.on { background: var(--gx-card); color: var(--gx-ink) !important; box-shadow: var(--gx-sh-1); font-weight: 600; }

/* Выбор модели ИИ и прочие списки в шапке */
html.gx #aip-app .aip-select {
    height: 42px;
    padding: 0 34px 0 16px;
    border-radius: var(--gx-r-pill);
    background-color: var(--gx-pill);
    color: var(--gx-ink);
    font-size: 13px;
    font-weight: 600;
    transition: background-color var(--gx-t-1) var(--gx-ease);
}
html.gx #aip-app .aip-select:hover { background-color: var(--gx-pill-h); }

/* Колокольчик */
html.gx #aip-app #aip-bell .aip-badge {
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--gx-shell);
    border-radius: 999px;
    background: var(--gx-blue);
    color: var(--gx-on-blue);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 18px;
    animation: gx-ping 2.4s var(--gx-ease) infinite;
}
html.gx #aip-app .aip-dr-bell .aip-badge { background: var(--gx-blue); color: var(--gx-on-blue); }

/* Пользователь: кружок + имя и роль */
html.gx #aip-app #aip-user { display: flex; align-items: center; gap: 10px; margin-left: 4px; }
html.gx #aip-app .aip-avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--gx-blue-2), var(--gx-blue));
    color: var(--gx-on-blue);
    font-weight: 600;
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform var(--gx-t-2) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .aip-avatar:hover { transform: scale(1.06); box-shadow: var(--gx-glow), inset 0 1px 0 rgba(255, 255, 255, .35); }
html.gx #aip-app .gx-user-l { display: flex; flex-direction: column; min-width: 0; max-width: 170px; line-height: 1.2; cursor: pointer; text-align: left; background: none; border: 0; padding: 0; color: inherit; }
html.gx #aip-app .gx-user-n { font-size: 13.5px; font-weight: 600; color: var(--gx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.gx #aip-app .gx-user-r { font-size: 12px; color: var(--gx-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
@media (max-width: 1499px) { html.gx #aip-app .gx-user-l { display: none; } }

/* Всплывающие окна шапки */
html.gx #aip-app .aip-pop {
    border: 1px solid var(--gx-line);
    border-radius: 20px;
    background: var(--gx-glass);
    -webkit-backdrop-filter: var(--gx-blur);
    backdrop-filter: var(--gx-blur);
    box-shadow: var(--gx-sh-3);
}
html.gx #aip-app .aip-pop:not([hidden]) { animation: gx-pop var(--gx-t-2) var(--gx-ease-out); }
html.gx #aip-app #aip-umenu { top: 54px; width: 270px; padding: 18px; transform-origin: 100% 0; }
html.gx #aip-app #aip-umenu .n,
html.gx #aip-app #aip-dr-umenu .n { font-size: 15px; font-weight: 600; color: var(--gx-ink); }
html.gx #aip-app #aip-umenu .r,
html.gx #aip-app #aip-dr-umenu .r { color: var(--gx-ink-2); }
html.gx #aip-app #aip-umenu a,
html.gx #aip-app #aip-dr-umenu a {
    border: 0;
    border-radius: var(--gx-r-pill);
    padding: 9px 18px;
    background: var(--gx-black);
    color: var(--gx-on-black);
    font-weight: 600;
    transition: transform var(--gx-t-2) var(--gx-spring), opacity var(--gx-t-1);
}
html.gx #aip-app #aip-umenu a:hover,
html.gx #aip-app #aip-dr-umenu a:hover { background: var(--gx-black); opacity: .88; transform: translateY(-1px); }

/* Поиск: на компьютере открывается по значку и по клавише «/» поверх вкладок */
@media screen and (min-width: 768px) {
    html.gx #aip-search { display: none; max-width: none; margin: 0 10px; z-index: 5 !important; }
    html.gx #aip-top.searching #aip-search { display: block; animation: gx-pop var(--gx-t-2) var(--gx-ease-out); transform-origin: 100% 50%; }
    html.gx #aip-top.searching ~ #aip-body #aip-rail,
    html.gx #aip-top.searching .aip-org { opacity: 0; pointer-events: none; }
}
html.gx #aip-app #aip-search .aip-sbox {
    height: 46px;
    padding: 0 5px 0 18px;
    border: 1px solid transparent;
    border-radius: var(--gx-r-pill);
    background: var(--gx-pill);
    transition: background var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease), border-color var(--gx-t-1);
}
html.gx #aip-app #aip-search .aip-sbox:focus-within { background: var(--gx-card); border-color: var(--gx-line); box-shadow: var(--gx-sh-2); }
html.gx #aip-app #aip-q { font-size: 14.5px; }
html.gx #aip-app .aip-sgo {
    height: 36px;
    padding: 0 16px;
    border-radius: var(--gx-r-pill);
    background: var(--gx-black);
    color: var(--gx-on-black);
    font-weight: 600;
    transition: transform var(--gx-t-2) var(--gx-spring), opacity var(--gx-t-1);
}
html.gx #aip-app .aip-sgo svg { color: var(--gx-on-black); }
html.gx #aip-app .aip-sgo:hover { background: var(--gx-black); opacity: .88; }
html.gx #aip-app #aip-sres { top: 54px; padding: 8px; transform-origin: 50% 0; }
html.gx #aip-app .aip-res { padding: 10px 14px; border-radius: 13px; font-weight: 500; transition: background var(--gx-t-1); }
html.gx #aip-app .aip-res small { color: var(--gx-ink-3); font-weight: 400; margin-top: 2px; }
html.gx #aip-app .aip-res-h { padding: 8px 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gx-ink-3); }
html.gx #aip-app .aip-empty { padding: 12px 14px; color: var(--gx-ink-3); }

/* ============================================================ 5. Боковая панель */
/* Приветствие (добавляет скрипт темы) */
html.gx #aip-app .gx-hello { padding: 10px 6px 14px; }
html.gx #aip-app .gx-hello-t { font-size: 27px; line-height: 1.12; font-weight: 600; letter-spacing: -.035em; color: var(--gx-ink); overflow-wrap: anywhere; }
html.gx #aip-app .gx-hello-s { margin-top: 8px; font-size: 12.5px; color: var(--gx-ink-2); }

/* Текущий отдел */
html.gx #aip-app .aip-dep { gap: 12px; padding: 10px 6px 12px; }
html.gx #aip-app .aip-dep-t { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; color: var(--gx-ink); }
html.gx #aip-app .aip-dep-s { font-size: 12.5px; color: var(--gx-ink-2); margin-top: 4px; }
html.gx #aip-app #aip-side.gx-has-hello .aip-dep {
    align-items: center;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--gx-card-2);
}
html.gx #aip-app #aip-side.gx-has-hello .aip-dep-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: var(--gx-blue-soft);
    color: var(--gx-blue-ink);
}
html.gx #aip-app #aip-side.gx-has-hello .aip-dep-t { font-size: 14.5px; letter-spacing: -.01em; }
html.gx #aip-app #aip-side.gx-has-hello .aip-dep-s { font-size: 12px; color: var(--gx-ink-3); margin-top: 2px; }

/* Поиск по разделам отдела */
html.gx #aip-app .aip-sfind { margin: 0 0 4px; }
html.gx #aip-app .aip-sfind input {
    height: 40px;
    padding: 0 14px 0 40px;
    border: 1px solid transparent;
    border-radius: var(--gx-r-pill);
    background: var(--gx-pill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa0ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z'/%3E%3C/svg%3E") no-repeat 14px center;
    font-size: 13.5px;
    transition: background-color var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease), border-color var(--gx-t-1);
}
html.gx #aip-app .aip-sfind input:focus { border-color: var(--gx-line); background-color: var(--gx-card); box-shadow: var(--gx-sh-2); }
html.gx #aip-app .aip-nf { padding: 10px 12px; color: var(--gx-ink-3); }

/* Группы и пункты */
html.gx #aip-app .aip-gh {
    padding: 18px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gx-ink-3);
}
html.gx #aip-app .aip-nav {
    height: 42px;
    margin: 2px 0;
    padding: 0 14px;
    gap: 12px;
    border-radius: var(--gx-r-pill);
    color: var(--gx-ink) !important;
    font-size: 14px;
    font-weight: 500;
    transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .aip-nav svg { color: var(--gx-ink-2); transition: color var(--gx-t-1), transform var(--gx-t-2) var(--gx-spring); }
html.gx #aip-app .aip-nav:hover { background: var(--gx-pill); }
html.gx #aip-app .aip-nav:hover svg { transform: scale(1.08); color: var(--gx-ink); }
html.gx #aip-app .aip-nav:active { transform: scale(.98); }
html.gx #aip-app .aip-nav.active {
    background: var(--gx-black);
    color: var(--gx-on-black) !important;
    font-weight: 600;
    box-shadow: 0 10px 20px -10px rgba(14, 15, 19, .55);
}
html.gx #aip-app .aip-nav.active svg { color: var(--gx-on-black); }
html.gx #aip-app .aip-nav.active::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Карточка «Спросите ИИ» внизу панели (добавляет скрипт темы, ведёт в AI-чат) */
html.gx #aip-app .gx-promo {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: block;
    margin-top: auto;
    min-height: 152px;
    padding: 16px 16px 14px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff !important;
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(255, 255, 255, .28), transparent 60%),
        linear-gradient(150deg, #2f5bff 0%, #4a72ff 52%, #7f9cff 100%);
    /* первые две тени — «юбка» цвета оболочки: пункты длинного списка не просвечивают под карточкой и над ней */
    box-shadow: 0 22px 0 0 var(--gx-shell), 0 -12px 12px -2px var(--gx-shell), 0 18px 34px -18px rgba(47, 91, 255, .8);
    transition: transform var(--gx-t-3) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .gx-promo-sp { flex: 1 0 18px; min-height: 18px; }
@media (max-height: 700px) { html.gx #aip-app .gx-promo { position: relative; bottom: auto; } }
html.gx #aip-app .gx-promo:hover { transform: translateY(-4px); box-shadow: 0 26px 0 0 var(--gx-shell), 0 -12px 12px -2px var(--gx-shell), 0 26px 40px -18px rgba(47, 91, 255, .9); }
html.gx #aip-app .gx-promo-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .28);
}
html.gx #aip-app .gx-promo-t { display: block; margin-top: 12px; font-size: 17px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; max-width: 118px; }
html.gx #aip-app .gx-promo-s { display: block; margin-top: 4px; font-size: 11.5px; opacity: .78; max-width: 118px; }
html.gx #aip-app .gx-promo-row { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
html.gx #aip-app .gx-promo-pill { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: #0e0f13; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
html.gx #aip-app .gx-promo-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #0e0f13;
    transition: transform var(--gx-t-3) var(--gx-spring);
}
html.gx #aip-app .gx-promo:hover .gx-promo-go { transform: rotate(45deg) scale(1.06); }
html.gx #aip-app .gx-promo-g {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .22);
    border: 1px solid rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 20px -10px rgba(14, 15, 19, .4);
    animation: gx-float 6s ease-in-out infinite;
}
html.gx #aip-app .gx-promo-g1 { right: 12px; top: 14px; width: 54px; height: 46px; transform: rotate(6deg); }
html.gx #aip-app .gx-promo-g2 { right: 38px; top: 52px; width: 58px; height: 40px; transform: rotate(-5deg); animation-delay: -2.2s; }
html.gx #aip-app .gx-promo-g3 { right: 12px; top: 92px; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #2f5bff; animation-delay: -4s; font-weight: 700; font-size: 14px; }

/* ============================================================ 6. Строка раздела */
html.gx #aip-app #aip-pagebar {
    min-height: 0;
    padding: 22px 26px 8px;
    gap: 14px;
    border-bottom: 0;
    background: transparent;
}
html.gx #aip-app #aip-pagebar > div:not(.aip-tools) { display: flex; flex-direction: column-reverse; gap: 3px; }
html.gx #aip-app .aip-h1 { font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
html.gx #aip-app .aip-crumbs { font-size: 12.5px; color: var(--gx-ink-3); }
html.gx #aip-app .aip-tools { gap: 10px; }
html.gx #aip-app .aip-seg {
    gap: 2px;
    padding: 4px;
    border: 0;
    border-radius: var(--gx-r-pill);
    background: var(--gx-card);
    box-shadow: var(--gx-sh-1);
    overflow: visible;
}
html.gx #aip-app .aip-seg a {
    padding: 8px 15px;
    border: 0;
    border-radius: var(--gx-r-pill);
    color: var(--gx-ink-2) !important;
    transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-app .aip-seg a:hover { background: var(--gx-pill); color: var(--gx-ink) !important; }
html.gx #aip-app .aip-seg a.on { background: var(--gx-black); color: var(--gx-on-black) !important; font-weight: 600; }
html.gx #aip-app .aip-btn {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--gx-r-pill);
    background: var(--gx-card);
    color: var(--gx-ink);
    font-weight: 600;
    box-shadow: var(--gx-sh-1);
    transition: transform var(--gx-t-2) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease), background var(--gx-t-1);
}
html.gx #aip-app .aip-btn:hover { background: var(--gx-card); transform: translateY(-2px); box-shadow: var(--gx-sh-2); }
html.gx #aip-app .aip-btn:active { transform: scale(.97); }

/* ============================================================ 7. Содержимое разделов */
html.gx #aip-app #aip-content { background: transparent; color: var(--gx-ink); }

/* Нейтральные цвета Tailwind → токены (сразу для светлой и тёмной темы) */
html.gx #aip-content .bg-white { background-color: var(--gx-card); }
html.gx #aip-content .bg-gray-50,
html.gx #aip-content .bg-gray-100 { background-color: var(--gx-pill); }
html.gx #aip-content .hover\:bg-gray-50:hover { background-color: var(--gx-hover); }
html.gx #aip-content .hover\:bg-gray-100:hover { background-color: var(--gx-pill-h); }
html.gx #aip-content .text-gray-300,
html.gx #aip-content .text-gray-400 { color: var(--gx-ink-3); }
html.gx #aip-content .text-gray-500,
html.gx #aip-content .text-gray-600,
html.gx #aip-content .text-gray-700 { color: var(--gx-ink-2); }
html.gx #aip-content .text-gray-800,
html.gx #aip-content .text-gray-900 { color: var(--gx-ink); }
html.gx #aip-content .border-gray-100,
html.gx #aip-content .border-gray-200,
html.gx #aip-content .border-gray-300,
html.gx #aip-content .border-gray-700,
html.gx #aip-content .border-gray-800 { border-color: var(--gx-line); }
html.gx #aip-app .bg-brandBlue { color: var(--gx-on-blue) !important; }

/* Состояния */
html.gx #aip-content .text-green-500,
html.gx #aip-content .text-green-600,
html.gx #aip-content .text-green-700 { color: var(--gx-good-ink); }
html.gx #aip-content .text-red-500,
html.gx #aip-content .text-red-600,
html.gx #aip-content .text-red-700 { color: var(--gx-bad-ink); }
html.gx #aip-content .text-amber-600,
html.gx #aip-content .text-amber-700,
html.gx #aip-content .text-amber-800,
html.gx #aip-content .text-orange-500 { color: var(--gx-warn-ink); }
html.gx #aip-content .bg-green-100 { background-color: var(--gx-good-soft); }
html.gx #aip-content .bg-red-100 { background-color: var(--gx-bad-soft); }
html.gx #aip-content .bg-amber-100 { background-color: var(--gx-warn-soft); }
html.gx #aip-content .border-red-200 { border-color: color-mix(in srgb, var(--gx-bad) 34%, transparent); }
html.gx #aip-content .border-amber-200 { border-color: color-mix(in srgb, var(--gx-warn) 38%, transparent); }
html.gx #aip-content .border-green-200 { border-color: color-mix(in srgb, var(--gx-good) 34%, transparent); }

/* Значки-пилюли «Критично / Внимание / В норме» */
html.gx #aip-content .rounded-full[class*="text-[11px]"] { padding: 3px 9px; font-weight: 600; letter-spacing: 0; }

/* Карточки */
html.gx #aip-content .rounded-xl.border {
    border-color: transparent;
    border-radius: var(--gx-r-card);
    box-shadow: var(--gx-sh-1);
    transition: transform var(--gx-t-3) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease), border-color var(--gx-t-1);
}
html.gx #aip-content .rounded-xl.border.p-4 { padding: 20px; }
html.gx #aip-content .rounded-xl.border.p-3 { padding: 14px 16px; }
html.gx #aip-content .rounded-xl.border > div.font-medium:first-child,
html.gx #aip-content .rounded-xl.border div.font-medium.p-4 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
/* Карточка внутри карточки (плитки отделов, филиалы) */
html.gx #aip-content .rounded-xl.border .rounded-xl.border {
    border-radius: 18px;
    border-width: 1px;
    border-color: var(--gx-line);
    background-color: var(--gx-card-2);
    box-shadow: none;
}
html.gx #aip-content .rounded-xl.border .rounded-xl.border.border-red-200 { border-color: color-mix(in srgb, var(--gx-bad) 34%, transparent); background-color: color-mix(in srgb, var(--gx-bad-soft) 45%, var(--gx-card)); }
html.gx #aip-content .rounded-xl.border .rounded-xl.border.border-amber-200 { border-color: color-mix(in srgb, var(--gx-warn) 38%, transparent); background-color: color-mix(in srgb, var(--gx-warn-soft) 45%, var(--gx-card)); }
html.gx #aip-content a.rounded-xl:hover,
html.gx #aip-content a.rounded-xl.border:hover { transform: translateY(-4px); box-shadow: var(--gx-sh-2); }
html.gx #aip-content a.rounded-xl:active { transform: translateY(-1px) scale(.99); }

/* Показатели */
html.gx #aip-content .mkt-kpis { gap: 14px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
html.gx #aip-content .mkt-kpis > a { border-radius: var(--gx-r-card); transition: transform var(--gx-t-3) var(--gx-spring), box-shadow var(--gx-t-2) var(--gx-ease); }
html.gx #aip-content .mkt-kpis > a:hover { box-shadow: none; }
html.gx #aip-content .mkt-kpis > a:hover > .rounded-xl { box-shadow: var(--gx-sh-2); }
html.gx #aip-content .mkt-kpis .rounded-xl > .text-xs:first-child { font-size: 13px; font-weight: 500; color: var(--gx-ink-2); padding-right: 40px; min-height: 34px; }
html.gx #aip-content .mkt-kpis .text-xl {
    margin-top: 10px;
    font-size: 29px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
}
/* длинные значения (полные суммы без сокращения) — мельче, чтобы не переносились; классы ставит скрипт темы */
html.gx #aip-content .mkt-kpis .text-xl.gx-num-m { font-size: 24px; letter-spacing: -.03em; }
html.gx #aip-content .mkt-kpis .text-xl.gx-num-s { font-size: 20px; letter-spacing: -.025em; }
html.gx #aip-content .mkt-kpis .rounded-xl > .text-xs:last-child { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--gx-ink-3); }
/* стрелка-переход в углу карточки */
html.gx #aip-content a.relative > span.absolute[aria-hidden] {
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gx-pill);
    color: var(--gx-ink);
    font-size: 0;
    transition: background var(--gx-t-1), color var(--gx-t-1), transform var(--gx-t-3) var(--gx-spring);
}
html.gx #aip-content a.relative > span.absolute[aria-hidden]::before {
    content: '';
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.gx #aip-content a.relative:hover > span.absolute[aria-hidden] { background: var(--gx-blue); color: var(--gx-on-blue); transform: rotate(45deg); }
/* последняя из четырёх и более карточек — чёрная, как в образце */
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .rounded-xl,
html.gx #aip-content .mkt-kpis > .rounded-xl:last-child:nth-child(n+4) { background: var(--gx-hero); box-shadow: 0 18px 34px -20px rgba(14, 15, 19, .7); }
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-xl,
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-xl span:not([class*="text-"]) { color: #fff; }
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-xs { color: rgba(255, 255, 255, .66) !important; }
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-green-600 { color: #6fe0a0; }
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-amber-600 { color: #f8c876; }
html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .text-red-600 { color: #ff9a9e; }
html.gx #aip-content .mkt-kpis > a:last-child:nth-child(n+4) > span.absolute[aria-hidden] { background: rgba(255, 255, 255, .14); color: #fff; }

/* Строки списков и события */
html.gx #aip-content a.rounded-lg { border-radius: 14px; transition: background var(--gx-t-1) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring); }
html.gx #aip-content a.rounded-lg.border-t { padding-top: 10px; padding-bottom: 10px; }
html.gx #aip-content a.rounded-lg:hover { --tw-ring-color: transparent; transform: translateX(3px); }
html.gx #aip-content a.rounded-lg .truncate { font-weight: 600; }

/* Полосы выполнения */
html.gx #aip-content .h-1\.5 { height: 8px; }
html.gx #aip-content .h-1\.5 > div { border-radius: 999px; animation: gx-grow 1s var(--gx-ease-out) both; transform-origin: 0 50%; }
html.gx #aip-content .h-2 > div { border-radius: 999px; }

/* Таблицы */
html.gx #aip-content table { font-variant-numeric: tabular-nums; }
html.gx #aip-content thead th {
    padding-top: 12px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gx-ink-3);
    background: var(--gx-card) !important;
}
html.gx #aip-content tbody td { padding-top: 13px; padding-bottom: 13px; }
html.gx #aip-content tbody tr { transition: background var(--gx-t-1) var(--gx-ease); }
html.gx #aip-content thead th:first-child,
html.gx #aip-content tbody td:first-child { padding-left: 20px; }
html.gx #aip-content thead th:last-child,
html.gx #aip-content tbody td:last-child { padding-right: 20px; }
html.gx #aip-content tbody td:first-child { font-weight: 600; }

/* Вкладки и кнопки.
   «Таблетками» становятся только вкладки и кнопки действий (синие и серые без рамки);
   строки-кнопки, ячейки календаря и шаги процессов остаются прямоугольными. */
html.gx #aip-content button.rounded-lg { border-radius: 12px; transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1) var(--gx-ease), box-shadow var(--gx-t-2) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring), opacity var(--gx-t-1), border-color var(--gx-t-1); }
html.gx #aip-content button.rounded-lg:is(.bg-brandBlue, .bg-gray-100):not(.border):not(.w-full),
html.gx #aip-content button[data-tab].rounded-lg,
html.gx #aip-content a.rounded-lg.bg-brandBlue {
    border-radius: var(--gx-r-pill);
    font-weight: 600;
}
html.gx #aip-content button.rounded-lg:is(.bg-brandBlue, .bg-gray-100):not(.border):not(.w-full):active,
html.gx #aip-content button[data-tab].rounded-lg:active { transform: scale(.96); }
html.gx #aip-content button.rounded-lg.px-4:is(.bg-brandBlue, .bg-gray-100):not(.border):not(.w-full) { padding: 10px 20px; }
html.gx #aip-content button.rounded-lg.px-3:is(.bg-brandBlue, .bg-gray-100):not(.border):not(.w-full) { padding: 9px 18px; }
html.gx #aip-content button.bg-brandBlue:not(.w-full),
html.gx #aip-content a.rounded-lg.bg-brandBlue { box-shadow: var(--gx-glow); }
html.gx #aip-content button.bg-brandBlue:not(.w-full):hover { transform: translateY(-2px); }
html.gx #aip-content button.rounded-lg.bg-gray-100:not(.border):not(.w-full) { background-color: var(--gx-card); color: var(--gx-ink-2); box-shadow: var(--gx-sh-1); }
html.gx #aip-content button.rounded-lg.bg-gray-100:not(.border):not(.w-full):hover { color: var(--gx-ink); transform: translateY(-1px); box-shadow: var(--gx-sh-2); }
/* строки-кнопки (полосы «что из чего складывается») ведут себя как строки списков */
html.gx #aip-content button.rounded-lg.w-full.text-left { border-radius: 14px; }
html.gx #aip-content button.rounded-lg.w-full.text-left:hover { --tw-ring-color: transparent; transform: translateX(3px); }
/* круглые фильтры-метки («Все», «Критично», источники) */
html.gx #aip-content button.rounded-full.border { transition: background var(--gx-t-1) var(--gx-ease), color var(--gx-t-1), border-color var(--gx-t-1), box-shadow var(--gx-t-2) var(--gx-ease), transform var(--gx-t-2) var(--gx-spring); }
html.gx #aip-content button.rounded-full.border:not(.bg-brandBlue) { background-color: var(--gx-card); border-color: transparent; box-shadow: var(--gx-sh-1); color: var(--gx-ink-2); }
html.gx #aip-content button.rounded-full.border:not(.bg-brandBlue):hover { color: var(--gx-ink); transform: translateY(-1px); box-shadow: var(--gx-sh-2); }
html.gx #aip-content button.rounded-full.bg-brandBlue { box-shadow: var(--gx-glow); }
html.gx #aip-content button.rounded-full:active { transform: scale(.96); }
/* карточки-кнопки (филиалы, шаги процесса) приподнимаются, как карточки-ссылки */
html.gx #aip-content button.rounded-xl.border:hover { transform: translateY(-4px); box-shadow: var(--gx-sh-2); }
html.gx #aip-content button.rounded-xl.border:active { transform: translateY(-1px) scale(.99); }

/* Баннеры-сценарии и предупреждения */
html.gx #aip-content .rounded-xl.border:is(.bg-amber-50, .bg-red-50, .bg-green-50, .bg-orange-50, .bg-gray-50, .bg-yellow-50) { border-radius: 18px; box-shadow: none; }
html.gx #aip-content .bg-amber-50,
html.gx #aip-content .bg-yellow-50,
html.gx #aip-content .bg-orange-50,
html.gx #aip-content .bg-yellow-100 { background-color: var(--gx-warn-soft); }
html.gx #aip-content .bg-red-50 { background-color: var(--gx-bad-soft); }
html.gx #aip-content .bg-green-50 { background-color: var(--gx-good-soft); }
html.gx #aip-content .rounded-xl.border.bg-amber-50,
html.gx #aip-content .rounded-xl.border.bg-orange-50,
html.gx #aip-content .rounded-xl.border.bg-yellow-50 { border-color: color-mix(in srgb, var(--gx-warn) 32%, transparent); }
html.gx #aip-content .rounded-xl.border.bg-red-50 { border-color: color-mix(in srgb, var(--gx-bad) 32%, transparent); }
html.gx #aip-content .rounded-xl.border.bg-green-50 { border-color: color-mix(in srgb, var(--gx-good) 32%, transparent); }
html.gx #aip-content .rounded-xl.border.bg-gray-50 { border-color: var(--gx-line); background-color: var(--gx-card-2); }
html.gx #aip-content .rounded-xl.border.border-red-300 { border-color: color-mix(in srgb, var(--gx-bad) 45%, transparent); }
html.gx #aip-content .text-amber-900,
html.gx #aip-content .text-yellow-700,
html.gx #aip-content .text-yellow-800,
html.gx #aip-content .text-orange-600,
html.gx #aip-content .text-orange-700 { color: var(--gx-warn-ink); }
html.gx #aip-content .text-red-800,
html.gx #aip-content .text-red-900 { color: var(--gx-bad-ink); }
html.gx #aip-content .text-green-800,
html.gx #aip-content .text-green-900 { color: var(--gx-good-ink); }

/* Цвета, зашитые в разметку разделов (полосы, выделение выбранного) → цвета темы */
html.gx #aip-content [style*="background:#0b57d0"],
html.gx #aip-content [style*="background:#8ab4f8"],
html.gx #aip-content [style*="background: rgb(11, 87, 208)"],
html.gx #aip-content [style*="background: rgb(138, 180, 248)"] { background: linear-gradient(90deg, var(--gx-blue-2), var(--gx-blue)) !important; }
html.gx #aip-content [style*="outline"][style*="#8ab4f8"],
html.gx #aip-content [style*="outline"][style*="#0b57d0"],
html.gx #aip-content [style*="outline"][style*="rgb(138, 180, 248)"],
html.gx #aip-content [style*="outline"][style*="rgb(11, 87, 208)"] { outline-color: var(--gx-blue) !important; }
html.gx #aip-content [style*="rgba(11, 87, 208"],
html.gx #aip-content [style*="rgba(11,87,208"],
html.gx #aip-content [style*="rgba(138, 180, 248"],
html.gx #aip-content [style*="rgba(138,180,248"] { background-color: rgb(var(--gx-brand-rgb) / .1) !important; }
html.gx #aip-content [style*="dashed #8ab4f8"],
html.gx #aip-content [style*="dashed #0b57d0"] { border-left-color: var(--gx-blue) !important; }
html.gx #aip-content [style^="color:#8ab4f8"],
html.gx #aip-content [style^="color:#0b57d0"],
html.gx #aip-content [style*=";color:#8ab4f8"],
html.gx #aip-content [style*=";color:#0b57d0"] { color: var(--gx-blue-ink) !important; }

/* Поля и списки */
html.gx #aip-content .mkt-sf,
html.gx #aip-content input.border:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html.gx #aip-content select.border,
html.gx #aip-content textarea.border {
    border-radius: 13px;
    border-color: var(--gx-line);
    background-color: var(--gx-card-2);
    color: var(--gx-ink);
    padding: 9px 12px;
    transition: border-color var(--gx-t-1), box-shadow var(--gx-t-2) var(--gx-ease), background-color var(--gx-t-1);
}
html.gx #aip-content .mkt-sf:focus,
html.gx #aip-content input.border:focus,
html.gx #aip-content select.border:focus,
html.gx #aip-content textarea.border:focus { outline: 0; border-color: var(--gx-blue); background-color: var(--gx-card); box-shadow: 0 0 0 4px rgb(var(--gx-brand-rgb) / .14); }
html.gx #aip-content label.text-xs { color: var(--gx-ink-2); font-weight: 600; }

/* Панель «ИИ-анализ и рекомендации» — тёмная карточка со свечением (класс gx-ai ставит скрипт темы) */
html.gx #aip-content .gx-ai {
    position: relative;
    padding: 24px;
    border: 0;
    background: var(--gx-hero);
    color: #fff;
    overflow: hidden;
    box-shadow: 0 24px 44px -26px rgba(14, 15, 19, .8);
}
html.gx #aip-content .gx-ai::before {
    content: '';
    position: absolute;
    right: -60px;
    top: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(107, 140, 255, .55), transparent 65%);
    filter: blur(10px);
    animation: gx-breathe 7s ease-in-out infinite;
    pointer-events: none;
}
html.gx #aip-content .gx-ai > * { position: relative; }
html.gx #aip-content .gx-ai > .flex > div > .font-medium { font-size: 21px; font-weight: 600; letter-spacing: -.03em; color: #fff; }
html.gx #aip-content .gx-ai .mkt-ai-cur { margin-top: 6px; color: rgba(255, 255, 255, .68); }
html.gx #aip-content .gx-ai .mkt-ai-cur b { color: #fff; font-weight: 600; }
html.gx #aip-content .gx-ai .mkt-ai-btn {
    padding: 13px 22px;
    background: var(--gx-blue);
    color: #fff !important;
    font-size: 14px;
    box-shadow: 0 12px 26px -8px rgba(47, 91, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
html.gx #aip-content .gx-ai .mkt-ai-btn::after { content: '↗'; display: inline-block; margin-left: 8px; transition: transform var(--gx-t-3) var(--gx-spring); }
html.gx #aip-content .gx-ai .mkt-ai-btn:hover::after { transform: rotate(45deg); }
html.gx #aip-content .gx-ai .mkt-ai-meta { color: rgba(255, 255, 255, .62); margin-top: 14px; }
html.gx #aip-content .gx-ai .mkt-ai-meta > .rounded-lg {
    border-color: rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8);
    padding: 10px 14px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
html.gx #aip-content .gx-ai .text-brandBlue { color: #9db4ff; }
html.gx #aip-content .gx-ai .text-orange-500 { color: #f8c876; }
html.gx #aip-content .gx-ai .mkt-ai-out {
    margin-top: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--gx-card);
    color: var(--gx-ink-2);
    box-shadow: var(--gx-sh-2);
    animation: gx-rise var(--gx-t-3) var(--gx-ease-out) both;
}
html.gx #aip-content .gx-ai .mkt-ai-out .text-brandBlue { color: var(--gx-blue-ink); }
html.gx #aip-content .gx-ai .mkt-ai-out summary { color: var(--gx-ink); font-weight: 600; }
html.gx #aip-content .gx-ai .mkt-ai-hist-tg { margin-top: 14px; }
html.gx #aip-content .gx-ai .mkt-ai-hist { border-color: rgba(255, 255, 255, .14); }
html.gx #aip-content .gx-ai .mkt-ai-item { border-radius: 10px; padding: 8px 10px; }
html.gx #aip-content .gx-ai .mkt-ai-item:hover { background: rgba(255, 255, 255, .08); }
html.gx #aip-content .gx-ai .mkt-ai-item span { color: rgba(255, 255, 255, .72); }

/* Заглушка загрузки раздела */
html.gx #aip-content .mkt-sec-loading {
    height: 430px;
    font-size: 0;
    color: transparent;
    border-radius: var(--gx-r-card);
    background:
        linear-gradient(100deg, transparent 35%, var(--gx-shimmer, rgba(255, 255, 255, .7)) 50%, transparent 65%) 200% 0 / 220% 100% no-repeat,
        linear-gradient(var(--gx-card), var(--gx-card)) 0 0 / calc((100% - 42px) / 4) 118px no-repeat,
        linear-gradient(var(--gx-card), var(--gx-card)) 33.333% 0 / calc((100% - 42px) / 4) 118px no-repeat,
        linear-gradient(var(--gx-card), var(--gx-card)) 66.667% 0 / calc((100% - 42px) / 4) 118px no-repeat,
        linear-gradient(var(--gx-card), var(--gx-card)) 100% 0 / calc((100% - 42px) / 4) 118px no-repeat,
        linear-gradient(var(--gx-card), var(--gx-card)) 0 136px / 100% 294px no-repeat;
    animation: gx-shimmer 1.5s linear infinite;
    opacity: .9;
}
html.gx.dark #aip-content .mkt-sec-loading { --gx-shimmer: rgba(255, 255, 255, .05); }

/* ============================================================ 8. Меню ☰, панели, плашка */
html.gx #aip-app #aip-ovl { background: rgba(14, 15, 19, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.gx #aip-app #aip-drawer {
    top: 12px;
    bottom: 12px;
    left: 12px;
    width: 292px;
    border: 1px solid var(--gx-line);
    border-radius: 26px;
    background: var(--gx-shell);
    box-shadow: var(--gx-sh-3);
    transform: translateX(-112%);
    transition: transform .45s var(--gx-spring);
}
html.gx #aip-app #aip-drawer.open { transform: translateX(0); }
html.gx #aip-app .aip-dr-head { height: 64px; padding: 0 12px; border-bottom: 0; }
html.gx #aip-app .aip-dr-head .aip-brand { flex: 1; min-width: 0; }
html.gx #aip-app .aip-dr-lbl,
html.gx #aip-app .aip-fly-h { padding: 14px 22px 8px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--gx-ink-3); }
html.gx #aip-app .aip-dr-sep { margin: 8px 18px; border-color: var(--gx-line); }
html.gx #aip-app .aip-dr-item {
    width: auto;
    height: 44px;
    margin: 2px 10px;
    padding: 0 12px 0 14px;
    gap: 14px;
    border-radius: 14px;
    font-weight: 500;
    transition: background var(--gx-t-1) var(--gx-ease);
}
html.gx #aip-app button.aip-dr-item { width: calc(100% - 20px); }
html.gx #aip-app .aip-dr-item svg { color: var(--gx-ink-2); }
html.gx #aip-app .aip-dr-item .chev svg { color: var(--gx-ink-3); }
html.gx #aip-app .aip-dr-item.aip-dr-on { color: var(--gx-blue-ink) !important; font-weight: 600; }
html.gx #aip-app #aip-fly {
    top: 12px;
    bottom: 12px;
    left: 312px;
    width: 300px;
    padding: 10px;
    border: 1px solid var(--gx-line);
    border-radius: 26px;
    background: var(--gx-shell);
    box-shadow: var(--gx-sh-3);
}
html.gx #aip-app #aip-fly.open { animation: gx-slide var(--gx-t-2) var(--gx-ease-out); }
html.gx #aip-app .aip-fly-g + .aip-fly-g { border-color: var(--gx-line); }
html.gx #aip-app #aip-fly .aip-fly-h,
html.gx #aip-app #aip-rfly .aip-fly-h { padding: 12px 12px 6px; }
html.gx #aip-app #aip-fly .aip-fly-link,
html.gx #aip-app #aip-rfly .aip-fly-link {
    padding: 10px 12px;
    border-radius: 13px;
    font-weight: 500;
    transition: background var(--gx-t-1) var(--gx-ease);
}
html.gx #aip-app #aip-rfly .aip-fly-link { gap: 12px; }
html.gx #aip-app #aip-rfly .aip-rfly-t { padding: 8px 12px 4px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
html.gx #aip-app #aip-rfly .aip-fly-ic { color: var(--gx-ink-2); }
html.gx #aip-app #aip-rfly .aip-fly-link.on,
html.gx #aip-app #aip-fly .aip-fly-link.on { background: var(--gx-black); color: var(--gx-on-black) !important; font-weight: 600; }
html.gx #aip-app #aip-rfly .aip-fly-link.on .aip-fly-ic { color: var(--gx-on-black); }
html.gx #aip-app .aip-fly-link small { color: var(--gx-ink-3); font-weight: 400; }
html.gx #aip-app .aip-fly-link.aip-fly-more { color: var(--gx-blue-ink) !important; font-weight: 600; }
html.gx #aip-app #aip-toast {
    top: 96px;
    right: 28px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #0e0f13;
    color: #fff;
    box-shadow: var(--gx-sh-3);
    transition: opacity var(--gx-t-2), transform .45s var(--gx-spring);
}

/* ============================================================ 9. Экран входа */
html.gx #aip-screen {
    background:
        radial-gradient(42% 46% at 22% 18%, rgb(var(--gx-brand-rgb) / .28), transparent 62%),
        radial-gradient(38% 44% at 82% 84%, rgb(var(--gx-brand-rgb) / .2), transparent 62%),
        var(--gx-frame);
    overflow: hidden;
}
html.gx #aip-screen::before,
html.gx #aip-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    opacity: .55;
    animation: gx-drift 14s ease-in-out infinite;
    pointer-events: none;
}
html.gx #aip-screen::before { width: 380px; height: 380px; left: 12%; top: 8%; background: rgb(var(--gx-brand-rgb) / .55); }
html.gx #aip-screen::after { width: 300px; height: 300px; right: 10%; bottom: 6%; background: rgba(107, 140, 255, .5); animation-delay: -6s; }
html.gx #aip-screen .aip-card {
    position: relative;
    z-index: 1;
    max-width: 420px;
    padding: 40px 36px 32px;
    border: 1px solid var(--gx-glass-line);
    border-radius: 30px;
    background: var(--gx-glass);
    -webkit-backdrop-filter: var(--gx-blur);
    backdrop-filter: var(--gx-blur);
    box-shadow: var(--gx-sh-3);
    animation: gx-rise .7s var(--gx-ease-out) both;
}
html.gx #aip-screen .aip-logo { font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--gx-ink-2); }
html.gx #aip-screen .aip-logo b { font-weight: 700; color: var(--gx-ink); }
html.gx #aip-screen .aip-logo::before {
    content: '';
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Crect x='3' y='3' width='8' height='8' rx='2.6'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2.6' opacity='.62'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2.6' opacity='.62'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2.6'/%3E%3C/svg%3E") center / 27px no-repeat,
        linear-gradient(135deg, var(--gx-blue-2), var(--gx-blue));
    box-shadow: var(--gx-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.gx #aip-screen .aip-sub { color: var(--gx-ink-2); margin-bottom: 30px; }
html.gx #aip-screen label { font-size: 12.5px; font-weight: 600; color: var(--gx-ink-2); margin-bottom: 8px; }
html.gx #aip-screen input.input {
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--gx-line);
    border-radius: 15px;
    background: var(--gx-card);
    color: var(--gx-ink);
    font-family: inherit;
    transition: border-color var(--gx-t-1), box-shadow var(--gx-t-2) var(--gx-ease);
}
html.gx #aip-screen input.input:focus { border-color: var(--gx-blue); box-shadow: 0 0 0 4px rgb(var(--gx-brand-rgb) / .16); }
html.gx #aip-screen .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; margin: 0; cursor: pointer; }
html.gx #aip-screen .login-remember input { width: 17px; height: 17px; accent-color: var(--gx-blue); }
html.gx #aip-screen .login-submit { text-align: center; }
html.gx #aip-screen #wp-submit {
    width: 100%;
    height: 52px;
    border-radius: var(--gx-r-pill);
    background: var(--gx-blue);
    color: var(--gx-on-blue);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--gx-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform var(--gx-t-2) var(--gx-spring), background var(--gx-t-1);
}
html.gx #aip-screen #wp-submit:hover { background: var(--gx-blue-h); transform: translateY(-2px); }
html.gx #aip-screen #wp-submit:active { transform: scale(.98); }

/* ============================================================ 10. Движение */
/* Появление блоков раздела: снизу, из размытия, по очереди */
html.gx #aip-content .mkt-sec-body:not(.hidden) > * { animation: gx-rise .7s var(--gx-ease-out) both; }
html.gx #aip-content .mkt-sec-body > :nth-child(2) { animation-delay: .05s; }
html.gx #aip-content .mkt-sec-body > :nth-child(3) { animation-delay: .11s; }
html.gx #aip-content .mkt-sec-body > :nth-child(4) { animation-delay: .17s; }
html.gx #aip-content .mkt-sec-body > :nth-child(5) { animation-delay: .23s; }
html.gx #aip-content .mkt-sec-body > :nth-child(6) { animation-delay: .29s; }
html.gx #aip-content .mkt-sec-body > :nth-child(7) { animation-delay: .34s; }
html.gx #aip-content .mkt-sec-body > :nth-child(n+8) { animation-delay: .38s; }
html.gx #aip-content .mkt-kpis > * { animation: gx-rise .7s var(--gx-ease-out) both; }
html.gx #aip-content .mkt-kpis > :nth-child(2) { animation-delay: .07s; }
html.gx #aip-content .mkt-kpis > :nth-child(3) { animation-delay: .14s; }
html.gx #aip-content .mkt-kpis > :nth-child(4) { animation-delay: .21s; }
html.gx #aip-content .mkt-kpis > :nth-child(n+5) { animation-delay: .27s; }
/* Счётчик показателя: настоящее число скрыто, пока поверх бежит копия */
html.gx #aip-content .gx-counting { position: relative; color: transparent !important; }
html.gx #aip-content .gx-counting * { color: transparent !important; }
html.gx #aip-content .gx-count { position: absolute; inset: 0; white-space: nowrap; pointer-events: none; color: var(--gx-count-c, var(--gx-ink)) !important; }

html.gx #aip-app .gx-hello,
html.gx #aip-app #aip-side .aip-nav,
html.gx #aip-app #aip-side .aip-gh,
html.gx #aip-app .gx-promo { animation: gx-rise .6s var(--gx-ease-out) both; }
html.gx #aip-app .gx-promo { animation-delay: .2s; }

@keyframes gx-rise {
    from { opacity: 0; transform: translateY(16px); filter: blur(8px); }
    to { opacity: 1; transform: none; filter: none; }
}
@keyframes gx-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes gx-slide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
}
@keyframes gx-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes gx-shimmer {
    from { background-position: 200% 0, 0 0, 33.333% 0, 66.667% 0, 100% 0, 0 136px; }
    to { background-position: -120% 0, 0 0, 33.333% 0, 66.667% 0, 100% 0, 0 136px; }
}
@keyframes gx-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}
@keyframes gx-breathe {
    0%, 100% { opacity: .75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
@keyframes gx-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40px, 28px); }
}
@keyframes gx-ping {
    0%, 70%, 100% { box-shadow: 0 0 0 0 rgb(var(--gx-brand-rgb) / 0); }
    35% { box-shadow: 0 0 0 6px rgb(var(--gx-brand-rgb) / .22); }
}

/* Плавный переход между разделами: чёрная и синяя «таблетки» переезжают на новое место */
@view-transition { navigation: auto; }
html.gx .aip-nav.active { view-transition-name: gx-nav-active; }
html.gx .aip-rail-a.on { view-transition-name: gx-dep-active; }
html.gx #aip-content { view-transition-name: gx-content; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; }
::view-transition-group(gx-nav-active),
::view-transition-group(gx-dep-active) { animation-duration: .5s; animation-timing-function: var(--gx-spring); }
::view-transition-old(gx-content) { animation: gx-vt-out .18s var(--gx-ease) both; }
::view-transition-new(gx-content) { animation: gx-vt-in .42s var(--gx-ease-out) both; }
@keyframes gx-vt-out { to { opacity: 0; filter: blur(6px); } }
@keyframes gx-vt-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

@media (prefers-reduced-motion: reduce) {
    html.gx #aip-app *,
    html.gx #aip-screen * { animation-duration: .01s !important; animation-delay: 0s !important; }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================ 11. Телефон */
@media screen and (max-width: 767px) {
    html.gx #aip-app { background: var(--gx-shell); }
    html.gx #aip-app #aip-top { height: 60px; padding: 0 10px 0 6px; background: var(--gx-shell); }
    html.gx #aip-app .aip-ibtn { width: 38px; height: 38px; }
    html.gx #aip-app .aip-brand { font-size: 15px; min-width: 34px; padding: 0 2px; }
    html.gx #aip-app .aip-brand::before { width: 28px; height: 28px; margin-right: 4px; border-radius: 10px; background-size: 15px, auto; }
    html.gx #aip-app .aip-top-r { gap: 4px; padding-right: 0; }
    html.gx #aip-app .aip-avatar { width: 36px; height: 36px; }
    html.gx #aip-app .aip-select { height: 36px; padding: 0 24px 0 11px; font-size: 12px; }
    html.gx #aip-app .aip-lang { padding: 3px; }
    html.gx #aip-app .aip-lang a { padding: 5px 8px; font-size: 11.5px; }
    html.gx #aip-app .gx-user-l { display: none; }
    html.gx #aip-app #aip-main { border-radius: 24px 24px 0 0; background: var(--gx-panel); }
    html.gx #aip-app #aip-pagebar { padding: 16px 16px 6px; }
    html.gx #aip-app .aip-h1 { font-size: 21px; }
    html.gx #aip-app .aip-tools .aip-seg a { padding: 8px 4px; }
    html.gx #aip-app .aip-btn { height: 40px; padding: 0 14px; }
    html.gx #aip-app #aip-drawer { top: 0; bottom: 0; left: 0; border-radius: 0 26px 26px 0; }
    html.gx #aip-app .aip-dr-sub .aip-fly-link { border-radius: 13px; margin: 0 10px 0 0; }
    html.gx #aip-app .aip-dr-sub .aip-fly-link.on { background: var(--gx-black); color: var(--gx-on-black) !important; }
    html.gx #aip-app .aip-dr-sub .aip-fly-link.on .aip-fly-ic { color: var(--gx-on-black); }
    html.gx #aip-app #aip-toast { top: 68px; right: 12px; }
    html.gx #aip-content .mkt-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    html.gx #aip-content .mkt-kpis .text-xl { font-size: clamp(17px, 5.2vw, 23px); }
    html.gx #aip-content .mkt-kpis .text-xl.gx-num-m { font-size: clamp(15px, 4.4vw, 20px); }
    html.gx #aip-content .mkt-kpis .text-xl.gx-num-s { font-size: clamp(13px, 3.8vw, 17px); }
    html.gx #aip-content .rounded-xl.border.p-4 { padding: 16px; }
    html.gx #aip-content .gx-ai { padding: 18px; }
    html.gx #aip-content .mkt-sec-loading {
        background:
            linear-gradient(100deg, transparent 35%, var(--gx-shimmer, rgba(255, 255, 255, .7)) 50%, transparent 65%) 200% 0 / 220% 100% no-repeat,
            linear-gradient(var(--gx-card), var(--gx-card)) 0 0 / calc(50% - 5px) 110px no-repeat,
            linear-gradient(var(--gx-card), var(--gx-card)) 100% 0 / calc(50% - 5px) 110px no-repeat,
            linear-gradient(var(--gx-card), var(--gx-card)) 0 120px / 100% 310px no-repeat;
        animation-name: gx-shimmer-m;
    }
}
@keyframes gx-shimmer-m {
    from { background-position: 200% 0, 0 0, 100% 0, 0 120px; }
    to { background-position: -120% 0, 0 0, 100% 0, 0 120px; }
}

/* ============================================================ 12. Печать: оформление экрана не мешает листу */
@media print {
    html.gx #aip-content .rounded-xl.border { box-shadow: none; border-color: #dadce0; }
    html.gx #aip-content .gx-ai,
    html.gx #aip-content .mkt-kpis > :last-child:nth-child(n+4) .rounded-xl { background: #fff; color: #000; }
    html.gx #aip-content .gx-ai * { color: #000 !important; }
    html.gx #aip-content .mkt-sec-body > *,
    html.gx #aip-content .mkt-kpis > * { animation: none !important; }
}