.demo-db-banner {
            width: 100%;
            box-sizing: border-box;
            background: #dc2626;
            color: #ffffff;
            padding: 7px 14px;
            text-align: center;
            font-size: 13px;
            line-height: 1.25;
            font-weight: 400;
            letter-spacing: 0;
        }
        .demo-db-banner__sep {
            margin: 0 8px;
            opacity: 0.6;
        }
        .demo-db-banner__link {
            color: #ffffff;
            font-weight: 700;
            text-decoration: underline;
            cursor: pointer;
        }
        .demo-db-banner__link:hover { opacity: 0.85; }

        :root {
            --bg: #f4f6fb;
            --card: #ffffff;
            --text: #111827;
            --muted: #6b7280;
            --border: #e5e7eb;
            --primary: #4f46e5;
            --primary-dark: #3730a3;
            --danger: #b91c1c;
            --success: #047857;
        }

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow: hidden;
        }

        .page {
            max-width: 1180px;
            margin: 0 auto;
            padding: 18px 18px 0;
            height: 100dvh;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .hero {
            position: relative;
            flex: 0 0 auto;
        }

        .hero-inner {
            display: flex;
            justify-content: space-between;
            gap: 24px;
            align-items: flex-start;
        }

        .hero-text {
            min-width: 0;
        }

        .hero-billing__links {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            font-size: 13px;
        }

        .hero-billing__links a {
            color: #2563eb;
            text-decoration: none;
            font-weight: 700;
        }


        @media (max-width: 760px) {
            .hero-inner {
                flex-direction: column;
            }

            .hero-billing__links {
                justify-content: flex-start;
            }
        }

            background: linear-gradient(135deg, #111827, #312e81);
            color: #fff;
            border-radius: 22px;
            padding: 28px;
            margin-bottom: 22px;
            box-shadow: 0 18px 45px rgba(17, 24, 39, 0.18);
        }

        .hero h1 {
            margin: 0 0 10px;
            font-size: 30px;
            line-height: 1.2;
        }

        .hero p {
            margin: 0;
            color: #000;
            font-size: 15px;
            line-height: 1.5;
        }

        .query-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 12px;
            margin: 0 0 8px;
            box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
            order: 4;
            flex: 0 0 auto;
            position: sticky;
            bottom: 0;
            z-index: 10;
        }

        .query-form {
            display: flex;
            gap: 10px;
        }

        .query-input {
            flex: 1;
            border: 1px solid #2d2c76;
            border-radius: 14px;
            padding: 14px 16px;
            font-size: 16px;
            outline: none;
        }

        .query-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }

        .query-button {
            border: 0;
            border-radius: 14px;
            padding: 0 22px;
            background: var(--primary);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
            min-width: 150px;
        }

        .query-button:hover {
            background: var(--primary-dark);
        }

        .query-button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .examples {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
        }

        .example {
            border: 1px solid var(--border);
            background: #f9fafb;
            color: #374151;
            padding: 6px 9px;
            border-radius: 999px;
            font-size: 12px;
            cursor: pointer;
        }

        .example:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .example:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .status {
            display: none;
            margin: 0;
            padding: 12px 14px;
            border-radius: 14px;
            font-size: 14px;
            flex: 0 0 auto;
            order: 2;
        }

        .status.is-visible {
            display: block;
        }

        .status.loading {
            background: #eef2ff;
            color: #3730a3;
            border: 1px solid #c7d2fe;
        }

        .status.error {
            background: #fef2f2;
            color: var(--danger);
            border: 1px solid #fecaca;
        }

        .result {
            order: 3;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 2px 2px 18px;
            scroll-behavior: smooth;
        }

        .result-view {
            display: none;
        }

        .result-view.is-active {
            display: block;
        }

        .chat-feed.is-active {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .service-back {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--border);
            background: #ffffff;
            color: var(--text);
            border-radius: 999px;
            padding: 9px 13px;
            font-weight: 800;
            cursor: pointer;
            margin-bottom: 14px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
        }

        .service-back:hover {
            background: #f9fafb;
        }

        .chat-message {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .chat-message--user {
            align-items: flex-end;
        }

        .chat-message--assistant {
            align-items: flex-start;
        }

        .chat-bubble {
            max-width: min(900px, 100%);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 14px 16px;
            background: #ffffff;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
            min-width: 0;
        }

        .chat-message--user .chat-bubble {
            max-width: min(720px, 88%);
            background: var(--primary);
            color: #ffffff;
            border-color: var(--primary);
        }

        .chat-message--assistant .chat-bubble {
            width: min(100%, 980px);
        }

        .chat-bubble--pending {
            color: var(--muted);
        }

        /* Появление сообщения: простой fade in + лёгкий подъём. Одинаково для входящих/исходящих.
           Анимируется только transform/opacity → не влияет на layout/scrollHeight (автоскролл цел). */
        @keyframes chatFadeIn {
            from { opacity: 0; transform: translateY(9px); }
            to   { opacity: 1; transform: none; }
        }

        .chat-bubble--enter {
            animation: chatFadeIn 0.22s ease-out both;
            will-change: transform, opacity;
        }

        @media (prefers-reduced-motion: reduce) {
            .chat-bubble--enter { animation: none; }
        }

        .chat-progress {
            margin-top: 6px;
            color: var(--muted);
            font-size: 12px;
            line-height: 1.4;
        }
        /* Индикатор обработки «Думаю…»: плавная пульсация текста + бегущие точки. */
        .chat-progress--live { animation: chatThinkPulse 1.4s ease-in-out infinite; }
        .chat-progress__dots::after { content: ''; animation: chatThinkDots 1.2s steps(1, end) infinite; }
        @keyframes chatThinkPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        @keyframes chatThinkDots {
            0% { content: ''; }
            25% { content: '.'; }
            50% { content: '..'; }
            75%, 100% { content: '...'; }
        }
        @media (prefers-reduced-motion: reduce) {
            .chat-progress--live { animation: none; }
            .chat-progress__dots::after { content: '…'; animation: none; }
        }

        .chat-bubble--error {
            border-color: #fecaca;
            background: #fef2f2;
            color: var(--danger);
        }

        .chat-bubble--stopped {
            border-color: #fde68a;
            background: #fffbeb;
            color: #92400e;
        }

        /* Системное уведомление (напр. «Баланс пополнен») — нейтральный центрированный бабл. */
        .chat-message--system { justify-content: center; }
        .chat-bubble--system {
            border-color: #bbf7d0;
            background: #f0fdf4;
            color: #166534;
            text-align: center;
            font-size: 13px;
            box-shadow: none;
        }

        .chat-cancel {
            margin-top: 8px;
            border: 1px solid #fecaca;
            border-radius: 10px;
            background: #ffffff;
            color: var(--danger);
            cursor: pointer;
            font-size: 12px;
            font-weight: 700;
            padding: 6px 9px;
        }

        .chat-cancel:hover {
            background: #fef2f2;
        }

        .chat-text {
            line-height: 1.5;
            white-space: pre-wrap;
        }

        .chat-bubble .ai-report {
            margin-top: 4px;
            max-width: 100%;
            overflow: hidden;
        }

        /* D2: веб-тред уточнений */
        .refine-thread {
            margin-top: 0;
        }
        /* toggle = .report-feedback__button (тот же вид, что Да/Частично/Нет); только прижимаем вправо */
        .refine-toggle {
            margin-left: auto;
        }
        .refine-panel {
            margin-top: 8px;
            padding-left: 12px;
            border-left: 3px solid #1f6feb;   /* левая линия-акцент ветки */
            min-width: 0;                      /* мобайл: позволяем содержимому сжиматься, не распирать */
            max-width: 100%;
        }
        .refine-context {
            font-size: 12px;
            color: var(--muted, #57606a);
            background: rgba(31, 111, 235, 0.07);
            border-radius: 8px;
            padding: 4px 10px;
            margin-bottom: 8px;
        }
        .refine-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
        .refine-item {
            background: rgba(0, 0, 0, 0.03);
            border-radius: 8px;
            padding: 8px 10px;
            min-width: 0;
            max-width: 100%;
        }
        /* Заголовок блока уточнения — КРУПНЫЙ (как заголовок отчёта), содержимое = текст уточнения. */
        .refine-q { font-weight: 700; font-size: 18px; line-height: 1.3; margin-bottom: 8px; }
        /* Мобайл: вложенный отчёт уточнения не клиппим (как .chat-bubble .ai-report{overflow:hidden}),
           а даём горизонтальный скролл — иначе на узком экране контент обрезался «в ноль». */
        .refine-a { font-size: 13px; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .refine-a--pending { color: var(--muted, #57606a); font-style: italic; }
        .refine-a--error { color: #d1242f; }
        .refine-cost { font-size: 11px; color: var(--muted, #57606a); margin-top: 6px; }
        /* Баланс < 500 руб — сумма красным (веб). */
        .balance--low { color: #d1242f; font-weight: 700; }
        .refine-a .ai-report { font-size: 12px; overflow-x: auto; overflow-y: visible; max-width: 100%; }
        /* Заголовок блока уточнения = текст запроса пользователя (.refine-q). Внутренний заголовок
           вложенного отчёта (унаследованный от корня) в компактном виде НЕ показываем. */
        .refine-a .ai-report__title { display: none; }
        .refine-form { display: flex; gap: 6px; margin-top: 8px; }
        .refine-input {
            flex: 1;
            border: 1px solid var(--border, #d0d7de);
            border-radius: 8px;
            padding: 6px 10px;
            font-size: 13px;
        }
        .refine-send {
            border: none;
            background: #1f6feb;
            color: #fff;
            border-radius: 8px;
            padding: 6px 14px;
            font-size: 13px;
            cursor: pointer;
        }
        .refine-send:hover { background: #1a5fd0; }

        .chat-message-time {
            margin-top: 4px;
            color: var(--muted);
            font-size: 11px;
            line-height: 1;
        }

        .chat-message--user .chat-message-time {
            margin-right: 8px;
            text-align: right;
        }

        .chat-message--assistant .chat-message-time {
            margin-left: 8px;
            text-align: left;
        }

        .chat-date-separator {
            align-self: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid var(--border);
            color: var(--muted);
            font-size: 12px;
            line-height: 1;
        }

        /* Ленивая подгрузка истории: спиннер сверху + маркер начала переписки. */
        .chat-older-spinner {
            align-self: center;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            color: var(--muted);
            font-size: 12px;
        }
        .chat-older-spinner__dot {
            width: 12px;
            height: 12px;
            border: 2px solid var(--border);
            border-top-color: var(--muted);
            border-radius: 50%;
            animation: chatOlderSpin 0.7s linear infinite;
        }
        @keyframes chatOlderSpin { to { transform: rotate(360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .chat-older-spinner__dot { animation: none; }
        }
        .chat-history-start {
            align-self: center;
            padding: 4px 12px;
            color: var(--muted);
            font-size: 12px;
            opacity: 0.75;
        }

        .report-feedback {
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .report-feedback__label {
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
        }

        .report-feedback__button {
            border: 1px solid var(--border);
            border-radius: 999px;
            background: #f9fafb;
            color: #374151;
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            padding: 7px 10px;
            position: relative; /* якорь для кастомного тултипа */
        }

        .report-feedback__button:hover:not(:disabled) {
            border-color: var(--primary);
            color: var(--primary);
        }

        .report-feedback__button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Кастомный тултип фидбэка — появляется МГНОВЕННО (без браузерной задержки title). */
        .report-feedback__button[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            background: #111827;
            color: #fff;
            font-size: 11px;
            font-weight: 600;
            padding: 4px 8px;
            border-radius: 6px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity .08s ease;
            z-index: 60;
        }
        .report-feedback__button[data-tooltip]:hover::after {
            opacity: 1;
        }

        .report-feedback__status {
            color: var(--muted);
            font-size: 12px;
        }

        .empty-state {
            background: var(--card);
            border: 1px dashed #cbd5e1;
            border-radius: 18px;
            padding: 34px;
            text-align: center;
            color: var(--muted);
        }

        .meta {
            margin-top: 14px;
            color: var(--muted);
            font-size: 13px;
        }

        .billing-details {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
        }

        .billing-details h2 {
            margin: 0 0 14px;
            font-size: 22px;
        }

        .billing-details table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 12px;
        }

        .billing-details th,
        .billing-details td {
            border-bottom: 1px solid var(--border);
            padding: 10px 8px;
            text-align: left;
            vertical-align: top;
            font-size: 13px;
        }

        .billing-details th {
            background: #f9fafb;
            color: #374151;
            font-weight: 800;
        }

        .billing-details__cost {
            white-space: nowrap;
            font-weight: 800;
        }
        .billing-details__cost--in {
            color: #1a7f37; /* зачисление (возврат/пополнение) — зелёным со знаком + */
        }

        /* Таблица «Контроль сделок» — те же токены, что .billing-details (стиль чата, без ad-hoc цветов). */
        .deals-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .deals-table th, .deals-table td {
            border-bottom: 1px solid var(--border);
            padding: 10px 8px;
            text-align: left;
            vertical-align: top;
            font-size: 13px;
        }
        .deals-table th { background: #f9fafb; color: #374151; font-weight: 800; }
        .deals-table td.deals-table__num { white-space: nowrap; }
        .deals-table td.deals-table__action { text-align: right; white-space: nowrap; }
        .deals-table__detail { color: var(--muted); }
        .deals-table__badge { display: inline-block; font-size: 12px; font-weight: 700; color: #1a7f37; } /* «задача поставлена» (вариант А: одна задача на заказ) */

        .billing-details__pager {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 14px;
        }

        .billing-details__pager button {
            border: 0;
            border-radius: 12px;
            padding: 9px 12px;
            background: #2563eb;
            color: #fff;
            font-weight: 800;
            cursor: pointer;
        }

        .billing-details__pager button:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

        .billing-details__pager span {
            color: var(--muted);
            font-size: 13px;
        }


        .user-settings {
            /* контейнер: карточками теперь являются сами разделы-панели (.user-settings__panel) */
        }

        .user-settings h2 {
            margin: 0 0 14px;
            font-size: 22px;
        }

        .user-settings__tabs {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 16px;
        }

        .user-settings__tab {
            border: 1px solid var(--border);
            background: #f8fafc;
            color: #111827;
            border-radius: 999px;
            padding: 8px 12px;
            cursor: pointer;
            font-weight: 700;
        }

        .user-settings__tab.is-active {
            background: #2563eb;
            color: #ffffff;
            border-color: #2563eb;
        }

        .user-settings__panel {
            display: none;
        }

        .user-settings__panel.is-active {
            display: block;
        }

        .user-settings__grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .user-settings label {
            display: block;
            margin: 10px 0 6px;
            font-size: 13px;
            font-weight: 700;
            color: #334155;
        }

        .user-settings input,
        .user-settings select,
        .user-settings textarea {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 10px 12px;
            font-size: 14px;
            background: #ffffff;
        }
        .user-settings textarea { resize: vertical; font-family: inherit; line-height: 1.5; }

        .user-settings input[disabled] {
            background: #f8fafc;
            color: #64748b;
        }

        .user-settings__buttons {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 14px;
        }

        /* ===== Общие классы редизайна настроек (палитра из :root, единый язык) ===== */
        .card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }
        .btn, .user-settings__buttons button {
            border: 0;
            border-radius: 12px;
            padding: 11px 16px;
            background: var(--primary);
            color: #fff;
            font-weight: 700;
            cursor: pointer;
            font-size: 14px;
        }
        .btn:hover, .user-settings__buttons button:hover { filter: brightness(1.06); }
        .btn:disabled, .user-settings__buttons button:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
        .btn--secondary, .user-settings__buttons button.btn--secondary { background: #e2e8f0; color: #111827; }
        .btn--danger, .user-settings__buttons button.btn--danger { background: #d1242f; color: #fff; }
        /* Кнопка «Что делать?» в таблице сигналов — родная .btn .btn--secondary, но компактнее под ячейку. */
        .signal-howto { padding: 5px 12px; font-size: 13px; border-radius: 8px; white-space: nowrap; margin-left: 4px; }
        /* Кнопка «Поставить задачу» в окне сделок — компактная как .signal-howto, но СВОЙ класс (howto-делегат её не ловит). */
        .deals-task-btn { padding: 5px 12px; font-size: 13px; border-radius: 12px; white-space: nowrap; }
        /* Ячейка «задача поставлена»: бейдж + НИЖЕ кнопка «Отменить задачу» (.btn .btn--danger, компактная). Отмена — только главному. */
        .deals-task-set { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
        .deals-cancel-task-btn { padding: 5px 12px; font-size: 13px; white-space: nowrap; } /* размер; цвет/радиус/вес — от .btn .btn--danger */
        /* Возраст в бейдже: КРАСНЫЙ (токен --danger), если задача висит не с сегодня (overdue) — сигнал. */
        .deals-task-age--overdue { color: var(--danger); }
        /* Инлайн-подтверждение отмены В СТИЛЕ приложения (вместо системного confirm): «Отменить задачу? [Да][Отмена]» */
        .deals-confirm { display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start; }
        .deals-confirm__q { font-size: 13px; color: var(--text); font-weight: 600; }
        .deals-confirm__row { display: flex; gap: 6px; }
        .deals-confirm__btn { padding: 5px 14px; font-size: 13px; }

        .badge {
            display: inline-flex; align-items: center; gap: 4px;
            padding: 2px 9px; border-radius: 999px;
            font-size: 12px; font-weight: 600; line-height: 1.7; vertical-align: middle;
        }
        .badge--ok { background: #dcfce7; color: #166534; }
        .badge--off { background: #eef0f4; color: #64748b; }
        .badge--warn { background: #fef3c7; color: #92400e; }

        /* Раздел = активная панель-карточка; внутри — заголовок + описание-обоснование. */
        .user-settings__panel.is-active {
            display: block;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
        }
        .section-head { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: #111827; }
        .section-desc { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

        /* Под-карточки внутри раздела (гейт / шаги / 2FA / пароль / удаление). */
        .subcard, .user-settings__panel .onb-step {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 14px 16px;
            background: #fbfcfe;
            margin-top: 14px;
        }
        .subcard__title, .user-settings__panel .onb-step h3 {
            margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #111827;
        }

        .user-settings__status {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            border-radius: 12px;
            font-size: 13px;
        }

        .user-settings__status.is-ok {
            display: block;
            background: #ecfdf5;
            color: #047857;
        }

        .user-settings__status.is-error {
            display: block;
            background: #fef2f2;
            color: #b91c1c;
        }

        @media (max-width: 760px) {
            .user-settings__grid {
                grid-template-columns: 1fr;
            }
        }

        .auth-screen {
            position: fixed;
            inset: 0;
            z-index: 50;
            background: linear-gradient(135deg, #111827, #312e81);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
        }

        .auth-screen.is-hidden {
            display: none;
        }

        .auth-card {
            width: 100%;
            max-width: 420px;
            background: #ffffff;
            border-radius: 22px;
            padding: 24px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
        }

        .auth-card h2 {
            margin: 0 0 8px;
            font-size: 24px;
        }

        .auth-card p {
            margin: 0 0 18px;
            color: var(--muted);
            line-height: 1.5;
        }

        .auth-field {
            margin-bottom: 12px;
        }

        .auth-field label {
            display: block;
            font-size: 13px;
            color: #374151;
            margin-bottom: 6px;
        }

        .auth-field input {
            width: 100%;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 13px 14px;
            font-size: 15px;
            outline: none;
        }

        .auth-field input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
        }

        .auth-button {
            width: 100%;
            height: 46px;
            border: 0;
            border-radius: 14px;
            background: var(--primary);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            cursor: pointer;
        }

        .auth-button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .auth-error {
            display: none;
            margin-top: 12px;
            padding: 10px 12px;
            background: #fef2f2;
            color: var(--danger);
            border: 1px solid #fecaca;
            border-radius: 12px;
            font-size: 14px;
        }

        .auth-error.is-visible {
            display: block;
        }

        .auth-notice {
            margin-top: 12px;
            padding: 10px 12px;
            background: #f0fdf4;
            color: #166534;
            border: 1px solid #bbf7d0;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
        }

        .onboarding-screen {
            /* В ПОТОКЕ внутри .page (под шапкой): заполняет область ниже шапки и центрирует карту.
               Раньше был fixed-оверлей inset:0 → накрывал шапку.
               order:2 — ПОСЛЕ шапки (.app-header order:1). Без order карта получала default 0 → вставала
               ПЕРЕД шапкой, а flex:1 раздувал её и толкал шапку вниз. */
            order: 2;
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        /* При онбординге прячем чат-блоки (ввод/статус/результат) — остаётся шапка + карта выбора. */
        .page.is-onboarding .query-card,
        .page.is-onboarding .status,
        .page.is-onboarding .result { display: none; }
        .onboarding-card {
            max-width: 560px;
            width: 100%;
            background: #fff;
            border-radius: 18px;
            padding: 28px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .1);
        }
        .onboarding-card h2 { margin: 0 0 6px; font-size: 20px; }
        .onboarding-sub { margin: 0 0 18px; color: #57606a; font-size: 14px; }
        .onboarding-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        @media (max-width: 520px) { .onboarding-options { grid-template-columns: 1fr; } }
        .onboarding-option {
            text-align: left;
            border: 1px solid #d0d7de;
            border-radius: 14px;
            padding: 16px;
            background: #fff;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .onboarding-option:hover { border-color: #1f6feb; box-shadow: 0 4px 14px rgba(31, 111, 235, .12); }
        .onboarding-option__title { font-weight: 700; font-size: 15px; }
        .onboarding-option__desc { color: #57606a; font-size: 13px; }
        .onboarding-notice { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: #eff6ff; color: #1f3a8a; font-size: 14px; }

        .page.is-locked {
            display: none;
        }

        .history-total {
            background: #f9fafb;
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 6px 9px;
            font-size: 12px;
            color: #374151;
        }

        @media (max-width: 720px) {
            .page {
                padding: 12px 10px 0;
                gap: 10px;
            }

            .query-form {
                flex-direction: row;   /* поле + иконки одной строкой и на мобайле */
            }

            .query-card {
                padding: 12px;
                margin-bottom: 10px;
                border-radius: 14px;
            }

            .query-button {
                height: 48px;
                width: 100%;
            }

            .examples {
                max-height: 84px;
                overflow-y: auto;
            }

            .hero {
                padding: 22px;
            }

            .hero h1 {
                font-size: 24px;
            }
        }
        .hero-billing {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 10px 12px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .hero-billing__main {
            display: flex;
            align-items: baseline;
            gap: 6px;
            white-space: nowrap;
        }

        .hero-billing__label {
            font-size: 13px;
            color: var(--muted);
        }

        .hero-billing__balance {
            font-size: inherit;
            line-height: 1;
            font-weight: 800;
            color: #111827;
        }

        .hero-billing__actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: nowrap;
        }

        .billing-action {
            border: 1px solid var(--border);
            background: #ffffff;
            color: #111827;
            border-radius: 14px;
            padding: 7px 9px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            min-width: 0;
            white-space: nowrap;
        }

        .billing-action__icon {
            font-size: 15px;
            line-height: 1;
        }

        .billing-action__text {
            font-size: 12px;
            line-height: 1;
            color: #374151;
            white-space: nowrap;
        }

        .billing-action:hover {
            border-color: #2563eb;
        }

        @media (max-width: 720px) {
            .hero-billing {
                justify-content: flex-start;
            }

            .hero-billing__actions {
                width: 100%;
                justify-content: space-between;
            }

            .billing-action {
                flex: 1;
                justify-content: center;
            }
        }

    
        .hero-billing__balance-line {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            white-space: nowrap;
            font-size: 18px;
            line-height: 1.2;
            font-weight: 400;
            color: #6b7280;
        }

        .hero-billing__balance-line #billingBalance {
            font-weight: 800;
            color: #111827;
            font-size: 20px;
        }

    
        .label-note {
            color: #64748b;
            font-weight: 400;
            font-size: 12px;
        }
        .req-star { color: #d1242f; font-weight: 700; } /* звёздочка обязательного поля */
        /* Inline-чекбокс «Показать пароли»: квадрат перед надписью, кликается весь label. */
        .checkbox-inline {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-weight: 400;
        }
        .checkbox-inline input[type="checkbox"] { margin: 0; cursor: pointer; }
        /* Информационная строка настроек (read-only, без рамки/инпута): «Лейбл: значение». */
        .settings-info-row {
            margin-bottom: 12px;
            font-size: 14px;
            line-height: 1.4;
        }
        .settings-info-row__label { color: #64748b; }
        .settings-info-row__value { color: #111827; font-weight: 600; }

        .app-header {
            order: 1;
            flex: 0 0 auto;
            min-height: 44px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 6px 8px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
            position: relative;
            z-index: 30;
        }

        .app-brand {
            min-width: 0;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            color: #111827;
        }

        .app-brand__mark {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #111827;
            color: #fff;
            font-size: 12px;
            letter-spacing: 0;
        }

        .app-brand__title {
            font-size: 15px;
            line-height: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-shell {
            position: relative;
            flex: 0 0 auto;
        }

        .profile-button {
            width: 36px;
            height: 36px;
            border: 1px solid var(--border);
            border-radius: 50%;
            background: #ffffff;
            color: #111827;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
        }

        .profile-button:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .profile-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 44px;
            width: min(320px, calc(100vw - 24px));
            padding: 12px;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
            z-index: 60;
        }

        .profile-menu.is-open {
            display: block;
        }

        .profile-menu__user {
            padding: 2px 2px 10px;
            border-bottom: 1px solid var(--border);
            margin-bottom: 10px;
        }

        .profile-menu__name {
            font-size: 14px;
            font-weight: 800;
            color: #111827;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .profile-menu__hint,
        .profile-menu__label {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.35;
        }

        .profile-menu__billing {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
            border-radius: 12px;
            background: #f8fafc;
            margin-bottom: 10px;
        }

        .profile-menu__balance {
            font-weight: 800;
            color: #111827;
        }

        .profile-menu__actions {
            display: grid;
            gap: 8px;
        }

        .profile-menu .billing-action {
            width: 100%;
            justify-content: flex-start;
            border-radius: 12px;
            padding: 10px 11px;
        }

        .profile-menu .billing-action--danger {
            color: var(--danger);
        }

        .profile-menu .billing-action--danger:hover {
            border-color: #fecaca;
            background: #fef2f2;
        }

        .profile-menu .billing-action--danger .billing-action__text {
            color: var(--danger);
        }

        .profile-menu__status {
            display: none;
            margin-top: 10px;
            padding: 8px 10px;
            border-radius: 10px;
            background: #fef2f2;
            color: var(--danger);
            font-size: 12px;
            line-height: 1.35;
        }

        .profile-menu__status.is-visible {
            display: block;
        }

        .page {
            max-width: 1180px;
            padding: 8px 10px 0;
            gap: 8px;
            height: 100dvh;
        }

        .has-demo-banner .page {
            height: calc(100dvh - 28px);
        }

        .result {
            order: 3;
            padding: 2px 2px 8px;
        }

        .query-card {
            order: 4;
            padding: 8px;
            margin: 0;
            border-radius: 14px 14px 0 0;
            position: sticky;
            bottom: 0;
        }

        .query-form {
            display: flex;             /* поле + иконки в одном ряду; колокольчик не выталкивает «Отправить» */
            align-items: center;
            gap: 6px;
            flex-wrap: nowrap;
        }

        .query-form .composer-icon,
        .query-form .query-button {
            flex: 0 0 auto;            /* фикс-иконки не сжимаются и не переносятся */
        }

        .query-form .query-input {
            flex: 1 1 auto;            /* поле занимает остаток ширины */
        }

        .query-input {
            width: 100%;
            min-width: 0;
            height: 42px;
            border-radius: 12px;
            padding: 0 12px;
            font-size: 15px;
        }

        .composer-icon,
        .query-button {
            width: 42px;
            min-width: 42px;
            height: 42px;
            padding: 0;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            line-height: 1;
            cursor: pointer;
        }

        .composer-icon {
            border: 1px solid var(--border);
            background: #ffffff;
            color: #374151;
        }

        .composer-icon:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .composer-icon:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }

        .examples {
            display: none;
            position: absolute;
            left: 8px;
            bottom: calc(100% + 8px);
            width: min(520px, calc(100vw - 20px));
            max-height: min(280px, 42dvh);
            overflow: auto;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0;
            padding: 10px;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
            z-index: 40;
        }

        .examples.is-open {
            display: flex;
        }

        .status.is-visible {
            display: none;
        }

        @media (max-width: 720px) {
            .page {
                padding: 6px 8px 0;
                gap: 6px;
            }

            .demo-db-banner {
                padding: 5px 10px;
                font-size: 12px;
            }

            .app-header {
                min-height: 42px;
                max-height: 44px;
                padding: 4px 6px;
                border-radius: 12px;
            }

            .app-brand__mark {
                width: 30px;
                height: 30px;
            }

            .app-brand__title {
                max-width: 150px;
            }

            .profile-button {
                width: 34px;
                height: 34px;
            }

            .profile-menu {
                position: fixed;
                left: 8px;
                right: 8px;
                top: auto;
                bottom: 68px;
                width: auto;
                max-height: 70dvh;
                overflow: auto;
                border-radius: 16px;
            }

            .query-card {
                padding: 7px;
            }

            .query-form {
                gap: 5px;              /* flex-ряд сохраняется и на мобайле */
            }

            .query-input,
            .composer-icon,
            .query-button {
                height: 40px;
                min-width: 40px;
                border-radius: 11px;
            }

            .query-button {
                width: 40px;
            }

            .examples {
                left: 7px;
                right: 7px;
                width: auto;
                max-height: 36dvh;
            }
        }

        /* Прогресс-бар обучения (клиентский кабинет, шаг 4) */
        .onb-bar {
            height: 10px;
            background: #eef2f7;
            border-radius: 999px;
            overflow: hidden;
            margin: 8px 0 6px;
        }
        .onb-bar__fill {
            height: 100%;
            background: var(--primary, #4f46e5);
            border-radius: 999px;
            transition: width .4s ease;
        }
        .onb-bar--done .onb-bar__fill { background: #1a7f37; }
        .onb-bar.is-indeterminate .onb-bar__fill {
            width: 40%;
            animation: onbIndeterminate 1.2s ease-in-out infinite;
        }
        @keyframes onbIndeterminate {
            0%   { margin-left: -40%; }
            100% { margin-left: 100%; }
        }
        .onb-bar__label { color: var(--muted, #57606a); }