:root {
        --primary-blue: #1e3a8a; --accent-blue: #0ea5e9; --hover-blue: #e0f2ff;
        --bg-gray: #f9fafb; --surface: #ffffff; --text-main: #111827;
        --text-muted: #6b7280; --border-color: #e5e7eb;
        --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
    }

    /* Стили для темной темы оформления */
    [data-theme="dark"] {
        --bg-gray: #0f172a;       /* Глубокий темно-синий/серый фон */
        --surface: #1e293b;       /* Цвет карточек и панелей */
        --text-main: #f8fafc;     /* Мягкий белый цвет для основного текста */
        --text-muted: #94a3b8;    /* Приглушенный текст */
        --border-color: #334155;  /* Темные границы элементов */
        --hover-blue: #1e3a8a;    /* Фоновое выделение при наведении */
        --primary-blue: #38bdf8;  /* Более яркий голубой для контраста ссылок/акцентов */
    }

/* Полная адаптация медицинских модулей и панелей под темную тему */

    /* 1. Вкладки навигации («Жалобы», «Анамнез», разделы программы и т.д.) */

    [data-theme="dark"] .tab-btn,
    [data-theme="dark"] .tabs-container button {
        background: #111827 !important;
        color: var(--text-muted) !important;
        border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .tab-btn:hover {
        background: #1e293b !important;
        color: var(--text-main) !important;
    }

    [data-theme="dark"] .tab-btn.active,
    [data-theme="dark"] .tabs-container button.active {
        background: var(--hover-blue) !important;
        color: var(--primary-blue) !important;
        border-color: var(--primary-blue) !important;
    }


    [data-theme="dark"] input[type="radio"]:checked + label {
        background: var(--primary-blue) !important;
        color: #0f172a !important;
        border-color: var(--primary-blue) !important;
        font-weight: bold;
    }

    /* 3. Нижняя комбо-панель кнопок «Шаблоны» */
    [data-theme="dark"] .archive-combo-wrapper {
        background: transparent !important;
    }
    [data-theme="dark"] .archive-main,
    [data-theme="dark"] .archive-trigger {
        background: var(--surface) !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .archive-main:hover,
    [data-theme="dark"] .archive-trigger:hover {
        background: var(--hover-blue) !important;
        border-color: var(--primary-blue) !important;
    }
    [data-theme="dark"] .archive-dropup {
        background: var(--surface) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
    }
    [data-theme="dark"] .archive-dropup button {
        background: transparent !important;
        color: var(--text-main) !important;
    }
    [data-theme="dark"] .archive-dropup button:hover {
        background: var(--hover-blue) !important;
    }

    /* 4. Системные кнопки управления («Экспорт», «Очистить всё» и др.) */
    [data-theme="dark"] .control-button,
    [data-theme="dark"] .modal-content button.control-button {
        background: #111827 !important;
        color: var(--text-main) !important;
        border-color: var(--border-color) !important;
    }
    [data-theme="dark"] .control-button:hover {
        background: var(--hover-blue) !important;
        border-color: var(--primary-blue) !important;
    }
    [data-theme="dark"] .control-button[onclick*="clear"],
    [data-theme="dark"] .control-button[style*="red"] {
        color: #f87171 !important; /* Более мягкий красный оттенок для темной темы */
    }
    [data-theme="dark"] .control-button[onclick*="clear"]:hover {
        background: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #f87171 !important;
    }

    /* Стили для кнопки переключения темы */
    .theme-toggle-btn {
        background: var(--bg-gray);
        border: 1px solid var(--border-color);
        color: var(--text-main);
        padding: 8px 12px;
        border-radius: var(--radius-md);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        /* Гарнитуру и кегль задаём явно: <button> берёт системный шрифт
           браузера (~13px), а <a> с тем же классом наследует 16px от body.
           Из-за этого кнопка админ-панели рядом была на 9px выше тумблера
           темы и стояла не по одной линии с ним. */
        font-family: inherit;
        font-size: 0.875rem;
        line-height: 1.25;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.2s ease;
    }
    .theme-toggle-btn:hover {
        background: var(--hover-blue);
        border-color: var(--primary-blue);
    }

    /* Дополнительная оптимизация инпутов и текстареа для темной темы */
    [data-theme="dark"] input,
    [data-theme="dark"] textarea,
    [data-theme="dark"] select {
        background-color: #111827 !important;
        color: #f8fafc !important;
        border-color: #4b5563 !important;
    }
    [data-theme="dark"] .modal-content {
        background-color: var(--surface) !important;
        color: var(--text-main) !important;
    }

    .app-wrapper { background: var(--bg-gray); color: var(--text-main); min-height: calc(100vh - 70px); padding: 15px 0 40px 0; }
    .main-app-container { max-width: 98%; width: 100%; margin: 0 auto; padding: 0 10px; display: flex; flex-direction: column; gap: 15px; box-sizing: border-box; }
    .modern-card, .text-area-container { background: var(--surface); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 16px 20px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); }


    .input-group { display: flex; flex-direction: column; flex-grow: 1; min-width: 140px; }
    .input-group label { font-size: 0.8em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
    .input-group input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 0.95em; box-sizing: border-box; background: var(--bg-gray); transition: all 0.2s; color: var(--text-main); font-family: inherit; height: 40px; }
    .input-group input:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }


    .lang-switch {position: relative; display: flex; background: var(--surface); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); z-index: 1; width: 140px;}
    .lang-switch a {flex: 1; text-align: center; text-decoration: none; padding: 4px 0; border-radius: 4px; color: var(--text-muted); font-size: 0.85em; font-weight: 500;
    transition: color 0.3s ease; z-index: 2; position: relative;
    display: flex; align-items: center; justify-content: center;
}

    .lang-switch::before {content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); background: var(--primary-blue); border-radius: 4px; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); z-index: 1;}
    .lang-switch:has(a[data-lang="ru"].active)::before { transform: translateX(0); }
    .lang-switch:has(a[data-lang="uz_lat"].active)::before { transform: translateX(100%); }
    .lang-switch:has(a[data-lang="uz_cyr"].active)::before { transform: translateX(200%); }
    .lang-switch a.active { color: white; background: transparent !important; box-shadow: none !important; transform: none !important; }
    .lang-switch a:hover { transform: none !important; box-shadow: none !important; background: transparent !important; }
    .lang-switch:has(a:hover) a:hover:not(.active) { color: var(--primary-blue); }

    .auth-panel { font-size: 0.9em; display: flex; gap: 8px; align-items: center; font-weight: 500; }
    .auth-panel span { color: var(--primary-blue); }
    .auth-panel button { padding: 6px 12px; border: 1px solid var(--primary-blue); background: transparent; color: var(--primary-blue); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; transition: all 0.2s; height: 34px; display: flex; align-items: center; gap: 6px; }
    .auth-panel button:hover { background: var(--hover-blue); }


/* --- СОВРЕМЕННЫЕ ВКЛАДКИ (РАСШИРЕНИЕ + ИКОНКА) --- */

/* Контейнер вкладок */
.section-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px);
    padding: 10px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: none !important; /* Убираем тень контейнера для максимального минимализма */
}

/* Базовая кнопка */
.section-button {
    position: relative;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
    box-shadow: none !important; /* Строго без теней */
    transform: none !important; /* Убираем эффекты подпрыгивания */
}

/* --- СКРЫТАЯ ИКОНКА (Готовится к появлению) --- */
.section-button::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; /* Solid стиль иконок */
    font-size: 1.05em;
    opacity: 0;
    max-width: 0; /* Скрываем ширину */
    transform: scale(0.5); /* Уменьшаем для эффекта вырастания */
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    margin-right: 0;
}

/* --- НАЗНАЧЕНИЕ ИКОНОК ПО ТОЧНОМУ ID ВКЛАДКИ ИЗ JS --- */
#tab-jalobi::before { content: '\f06a'; }          /* circle-exclamation (Жалобы) */
#tab-anamnes::before { content: '\f1da'; }         /* history (Анамнез) */
#tab-osmotr::before { content: '\f0f1'; }          /* stethoscope (Осмотр) */
#tab-rezultat::before { content: '\f0c3'; }        /* flask (Обследование) */
#tab-diagnoz::before { content: '\f058'; }         /* circle-check (Диагноз) */
#tab-dorilar::before { content: '\f484'; }    /* pills (Лечение) */
#tab-recomendations::before { content: '\f46d'; }  /* clipboard-list (Рекомендации) */

/* --- АНИМАЦИЯ РАСШИРЕНИЯ (ПРИ HOVER И АКТИВНОЙ ВКЛАДКЕ) --- */
/* Показываем иконку не только при наведении, но и оставляем её на выбранной вкладке */
.section-button:hover::before,
.section-button.active::before {
    opacity: 1;
    max-width: 24px; /* Даем место иконке (кнопка плавно расширяется) */
    transform: scale(1);
    margin-right: 8px; /* Плавно отодвигаем текст вправо */
}

/* --- ЦВЕТА СОСТОЯНИЙ --- */
/* При наведении */
.section-button:hover {
    background: var(--hover-blue);
    color: var(--primary-blue);
}

/* Ранее заполненная вкладка */
.section-button.selected:not(.active) {
    color: var(--primary-blue);
    background: #f0f9ff;
}

/* Активная вкладка */
.section-button.active {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}


    .text-area-container { position: relative; padding-top: 50px; display: none; }
    .text-area-container.active { display: block; animation: fadeIn 0.3s ease; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

    .text-area-container h3 { position: absolute; top: 16px; left: 20px; margin: 0; font-size: 1.1em; color: var(--primary-blue); }
    .textarea-controls { position: absolute; top: 12px; right: 20px; display: flex; gap: 8px; }

    .control-button { background: var(--bg-gray); border: 1px solid var(--border-color); height: 34px; min-width: 34px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); transition: all 0.2s; display: flex; align-items: center; justify-content: center; padding: 0 10px; }
    .control-button:hover { background: var(--hover-blue); color: var(--primary-blue); border-color: var(--accent-blue); }


    textarea.main-area { width: 100%; min-height: 320px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1em; font-family: inherit; resize: vertical; box-sizing: border-box; line-height: 1.6; color: var(--text-main); background: var(--bg-gray); transition: border-color 0.2s; }
    textarea.main-area:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); }

    .list-builder { display: flex; flex-direction: column; gap: 15px; width: 100%; margin-top: 5px; }
    .list-input-group { display: flex; gap: 10px; }
    .list-input-group input { flex-grow: 1; padding: 12px 16px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 1em; background: var(--bg-gray); transition: all 0.2s; color: var(--text-main); font-family: inherit; }
    .list-input-group input:focus { border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); outline: none; }
    .btn-add { padding: 0 24px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-size: 0.95em; transition: 0.2s; display: flex; align-items: center; gap: 8px; }
    .btn-add:hover { background: #172a6b; }

    .sortable-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-height: 120px; }
    .sortable-item { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid transparent; padding: 4px 8px; border-radius: var(--radius-sm); transition: 0.2s; border-bottom: 1px solid var(--border-color); }
    .sortable-item:hover { background: var(--bg-gray); border-color: var(--border-color); }

    .sortable-item .drag-handle { color: #cbd5e1; cursor: grab; display: flex; align-items: center; justify-content: center; width: 20px; font-size: 1.1em; transition: 0.2s; }
    .sortable-item:hover .drag-handle { color: #94a3b8; }
    .sortable-item .drag-handle:active { cursor: grabbing; color: var(--primary-blue); }

    .item-text { flex-grow: 1; display: grid; gap: 6px; align-items: center; }
    .grid-mode1 { grid-template-columns: 1.2fr 1fr 1fr 150px 110px 0.7fr 1.5fr 1.5fr; }
    .item-text.mode2 { grid-template-columns: 1fr 4fr 1.5fr; }
    .item-text.mode3 { grid-template-columns: 1fr; }

    .item-cell { padding: 6px 8px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 0.9em; line-height: 1.4; word-break: break-word; outline: none; transition: 0.2s; display: flex; align-items: center; }
    .item-cell[contenteditable="true"]:focus, .item-cell[contenteditable="true"]:hover { background: #fff; border-color: var(--accent-blue); box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.2); }

    .compact-input { width: 100%; border: 1px solid transparent; background: transparent; padding: 6px 8px; font-size: 0.9em; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.2s; color: var(--text-main); font-family: inherit; }
    .compact-input:focus, .compact-input:hover { border-color: #cbd5e1; background: #fff; }
    .compact-input:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14,165,233,0.1); outline: none; }

    .time-toggles { display: flex; gap: 2px; background: #e2e8f0; padding: 2px; border-radius: 6px; justify-content: space-between; align-items: center;}
    .time-btn { flex-grow: 1; border: none; background: transparent; padding: 4px; border-radius: 4px; cursor: pointer; transition: 0.2s; font-size: 1.1em; filter: grayscale(100%); opacity: 0.4; display: flex; align-items:center; justify-content:center;}
    .time-btn.active { filter: grayscale(0%); opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
    .time-btn:hover { opacity: 0.8; }

    .time-inputs { display: flex; width: 100%; gap: 2px; justify-content: space-between; }
    .time-inputs input[type="time"] { flex: 1; min-width: 0; padding: 2px 0; text-align: center; font-size: 0.75em; border: 1px solid transparent; border-radius: 4px; outline: none; background: transparent; transition: 0.2s; color: var(--text-muted); font-weight: 600; }
    .time-inputs input[type="time"]:focus, .time-inputs input[type="time"]:hover { border-color: #cbd5e1; background: #fff; color: var(--text-main); }
    .time-inputs input[type="time"]::-webkit-calendar-picker-indicator, .time-inputs input[type="time"]::-webkit-inner-spin-button, .time-inputs input[type="time"]::-webkit-clear-button { display: none; }

    .sortable-item .delete-btn { background: transparent; border: none; color: #DC2626; cursor: pointer; transition: 0.2s; padding: 6px; font-size: 1.1em; opacity: 0; pointer-events: none; }
    .sortable-item:hover .delete-btn { opacity: 0.6; pointer-events: auto; }
    .sortable-item .delete-btn:hover { opacity: 1; background: #fee2e2; border-radius: 4px; }

    .empty-list-msg { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); font-size: 0.9em; min-height: 220px; padding: 25px; box-sizing: border-box; border: 2px dashed var(--border-color); border-radius: var(--radius-sm); background: var(--bg-gray); }

    .action-buttons-footer { background: var(--surface); padding: 15px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; position: sticky; bottom: 15px; flex-wrap: wrap; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 100; }
    .action-buttons-footer button { padding: 10px 20px; border-radius: 50px; cursor: pointer; font-weight: 600; border: 1px solid transparent; transition: all 0.2s; display: flex; align-items: center; gap: 8px; font-size: 0.9em; }


    #copy-all-button { background: var(--primary-blue); color: white; }
    #copy-all-button:hover { background: #172a6b; box-shadow: 0 4px 10px rgba(30, 58, 138, 0.3); transform: translateY(-2px); }
    #clear-all-button { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
    #clear-all-button:hover { background: #fca5a5; color: #991b1b; }

    .modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(4px); z-index: 2000; align-items: center; justify-content: center; padding: 15px;}
    .modal-content { background: #fff; padding: 30px; border-radius: var(--radius-lg); width: 100%; max-width: 450px; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}
    .modal-content.large { max-width: 900px; }
    .modal-content h2 { margin-top: 0; margin-bottom: 25px; color: var(--primary-blue); font-size: 1.5em; }
    .modal-content label { display: block; font-size: 0.85em; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
    .modal-content input[type="text"], .modal-content input[type="password"], .modal-content input[type="number"], .modal-content input[type="email"], .modal-content textarea, .modal-content select { width: 100%; padding: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-sizing: border-box; font-family: inherit; background: var(--bg-gray); transition: all 0.2s;}
    .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus { outline: none; border-color: var(--accent-blue); background: var(--surface); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);}
    .modal-content button.btn-primary { width: 100%; padding: 14px; background: var(--accent-blue); color: #fff; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: bold; font-size: 1em; transition: background 0.2s;}
    .modal-content button.btn-primary:hover { background: #0284c7; }
    .close-modal { position: absolute; top: 20px; right: 20px; cursor: pointer; font-size: 1.2em; color: #9ca3af; transition: color 0.2s;}
    .close-modal:hover { color: var(--text-main); }

/* ==========================================================================
   АНИМАЦИИ МОДАЛЬНЫХ ОКОН
   --------------------------------------------------------------------------
   Окна .modal переключаются через display:none/flex из openModal/closeModal,
   поэтому анимировать их можно только входной анимацией: transition на
   display не работает.

   ВАЖНО про разделение .is-open и .is-entering.
   Раньше входная анимация висела на .is-open, то есть на всё время, пока
   окно открыто, и держала видимое состояние через fill-mode: forwards.
   Из-за этого качание головой ломалось: свойство animation — единое, и
   правило .is-shaking ЗАМЕНЯЛО собой входную анимацию. Пока шло качание,
   окно теряло удерживаемое forwards состояние, а в момент снятия класса
   входная анимация запускалась заново — окно мигало и заново «влетало».

   Теперь .is-entering живёт только на время влёта и снимается по
   animationend. После этого окно стоит на собственных базовых стилях
   (opacity:1, transform:none), и качание можно включать и выключать
   сколько угодно раз — гасить и перезапускать больше нечего.
   ========================================================================== */
    .modal.is-entering { animation: modal-fade-in .18s ease both; }
    .modal.is-entering > .modal-content { animation: modal-pop-in .22s cubic-bezier(.16, 1, .3, 1) both; }

@keyframes modal-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in   { from { opacity: 0; transform: translateY(14px) scale(.97); }
                            to   { opacity: 1; transform: translateY(0)    scale(1);   } }

/* «Нет» — короткое покачивание по горизонтали.

   Анимируется ТОЛЬКО transform: translateX. Ни opacity, ни visibility, ни
   scale здесь не участвуют — именно примесь этих свойств давала мерцание.
   По той же причине нет fill-mode: forwards — после окончания элемент
   обязан вернуться к своему обычному виду сам.

   Селектор .modal > .modal-content.is-shaking нужен на случай промаха в
   первые 220 мс, пока ещё не снят .is-entering: у того правила
   специфичность (0,2,1), и короткий .modal-content.is-shaking (0,2,0)
   проигрывал бы ему. */
    .modal > .modal-content.is-shaking,
    .modal-content.is-shaking,
    .app-modal-box.is-shaking { animation: modal-shake .4s cubic-bezier(.36, .07, .19, .97); }

@keyframes modal-shake {
    10%, 90%      { transform: translateX(-2px); }
    20%, 80%      { transform: translateX(4px);  }
    30%, 50%, 70% { transform: translateX(-7px); }
    40%, 60%      { transform: translateX(7px);  }
}

/* Пользователям, попросившим убрать анимации, отдаём статичное окно. */
@media (prefers-reduced-motion: reduce) {
    .modal.is-entering,
    .modal.is-entering > .modal-content,
    .modal > .modal-content.is-shaking,
    .modal-content.is-shaking,
    .app-modal-box.is-shaking { animation-duration: .01ms !important; }
}

    .export-card { border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 15px; cursor: pointer; transition: 0.2s; flex: 1; text-align: center; background: var(--bg-gray); }
    .export-card:hover { border-color: var(--primary-blue); background: var(--hover-blue); box-shadow: 0 4px 10px rgba(14,165,233,0.1); }
    .export-card:hover span { color: var(--primary-blue); font-weight: bold; }
    .exp-preview { height: 70px; background: #fff; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 10px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
    .exp-preview.mode1 .h { background: #e0f2ff; height: 8px; width: 100%; border-radius: 2px; }
    .exp-preview.mode1 .r { border: 1px solid #e2e8f0; height: 6px; width: 100%; border-radius: 2px; }
    .exp-preview.mode2 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2px; }
    .exp-preview.mode2 .c { border: 1px solid #e2e8f0; height: 100%; border-radius: 2px; }
    .exp-preview.mode2 .c.hd { background: #f1f5f9; }
    .exp-preview.mode3 .l { display: flex; align-items: center; gap: 4px; height: 8px; }
    .exp-preview.mode3 .l:before { content: ''; display: block; width: 4px; height: 4px; background: #94a3b8; border-radius: 50%; }
    .exp-preview.mode3 .l:after { content: ''; display: block; height: 4px; width: 80%; background: #e2e8f0; border-radius: 2px; }


    @keyframes pulse-red { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
    .recording { background: #DC2626 !important; color: white !important; animation: pulse-red 1.5s infinite; border-color: #DC2626 !important; }
    .ui-autocomplete { z-index: 3000 !important; max-height: 250px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid var(--border-color); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }

/* ==========================================================================
   АВТОКОМПЛИТ: подсветка совпадений и оформление списка подсказок
   ========================================================================== */
.ui-autocomplete {
    padding: 4px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 24px -8px rgba(15, 23, 42, .28);
}

.ui-autocomplete .ac-item {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 5px;
}
.ui-autocomplete .ac-item .ui-menu-item-wrapper,
.ui-autocomplete .ac-item > .ac-line,
.ui-autocomplete .ac-item > .ac-med {
    display: block;
    padding: 7px 10px;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-main);
    cursor: pointer;
}

/* Активный пункт (автофокус на первом, наведение мышью, переход стрелками).
   jQuery UI вешает ui-state-active на ВНУТРЕННИЙ .ui-menu-item-wrapper,
   а не на <li> — поэтому целимся именно в него. */
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item-wrapper:hover {
    margin: 0;
    border: none;
    background: var(--hover-blue);
    color: var(--text-main);
    font-weight: inherit;
    box-shadow: inset 3px 0 0 var(--primary-blue);
}

/* подсветка совпавших букв */
.ac-match {
    color: var(--primary-blue);
    font-weight: 700;
    background: rgba(37, 99, 235, .10);
    border-radius: 3px;
    padding: 0 1px;
}

/* --- пункт списка лекарств: наименование + МНН + цель --- */
.ui-autocomplete .ac-med-name {
    font-weight: 600;
    color: var(--text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-autocomplete .ac-med-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 3px;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.ui-autocomplete .ac-med-meta span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui-autocomplete .ac-med-meta i {
    font-size: 0.72rem;
    opacity: .65;
    flex-shrink: 0;
}
.ui-autocomplete .ac-med-inn { font-style: italic; }
.ui-autocomplete .ac-med-goal { color: var(--text-muted); }

/* --- тёмная тема --- */
[data-theme="dark"] .ui-autocomplete {
    background: var(--surface);
    border-color: var(--border-color);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .6);
}
[data-theme="dark"] .ac-match {
    color: #93c5fd;
    background: rgba(96, 165, 250, .16);
}
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
[data-theme="dark"] .ui-autocomplete .ui-menu-item-wrapper:hover {
    background: rgba(96, 165, 250, .12);
}

/* --- телефоны --- */
@media (max-width: 600px) {
    .ui-autocomplete .ac-med-meta { gap: 2px 10px; font-size: 0.74rem; }
    .ui-autocomplete .ac-item .ui-menu-item-wrapper,
    .ui-autocomplete .ac-item > .ac-line,
    .ui-autocomplete .ac-item > .ac-med { padding: 8px 10px; }
}

    .template-list-btn { background: var(--bg-gray); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 16px; cursor: pointer; color: var(--text-main); transition: all 0.2s; display: flex; align-items: center; justify-content: space-between; flex-grow: 1; text-align: left; font-size: 1.05em; margin-bottom:8px;}
    .template-list-btn:hover { background: var(--hover-blue); border-color: var(--accent-blue); }
    .template-list-btn b { color: var(--primary-blue); font-weight: 600; }

/* --- Меню автоперевода --- */
.translate-btn-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 10; }
.translate-btn-wrapper .translate-btn { position: relative; z-index: 2; cursor: default; }
.translate-edit-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
    background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); z-index: 110; padding: 4px; min-width: 45px;
    opacity: 0; visibility: hidden; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; gap: 2px;
}
.translate-btn-wrapper.active .translate-edit-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(5px); }
.translate-edit-dropdown button {
    background: transparent; border: none; color: var(--text-main); cursor: pointer;
    font-size: 0.9em; font-weight: 600; display: flex; align-items: center; justify-content: center;
    border-radius: 4px; transition: all 0.2s; width: 100%; height: 30px; padding: 0 10px;
}
.translate-edit-dropdown button:hover { background: var(--hover-blue); color: var(--primary-blue); }
.translate-edit-dropdown .divider { height: 1px; background: var(--border-color); margin: 2px 0; width: 100%; }

    .edit-row-input { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 4px; font-family: monospace; font-size: 14px; background: var(--surface); color: var(--text-main); margin-bottom: 5px; }
    .edit-row-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14,165,233,0.1); }
    .edit-row-wrapper { display:flex; align-items:center; gap:8px; margin-bottom:5px; background:var(--bg-gray); padding:5px 10px; border-radius:4px; border:1px solid var(--border-color); }

/* --- СТИЛИ КНОПКИ "АРХИВ" (Прозрачный стиль с анимацией вибрации) --- */

.archive-combo-wrapper {
    position: relative;
    display: flex;
    border-radius: 15px;
    background: transparent;
    border: 1px solid #f3f4f6;
    transition: all 0.3s ease;
    height: 40px;
}

.archive-combo-wrapper:hover {
    background: #f3f4f6;
    border-color: #e5e7eb;
    box-shadow: 0 5px 12px rgba(156, 163, 175, 0.2);
    z-index: 2;
}

.archive-combo-wrapper > button {
    background: transparent !important;
    border: none !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    transform: none !important; /* Отключаем любые сдвиги */
    font-size: 0.85em !important;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.archive-combo-wrapper:hover > button {
    color: #4b5563 !important;
}

.archive-combo-wrapper .archive-main { padding: 8px 8px 8px 16px; border-radius: 15px 0 0 15px; }
.archive-combo-wrapper .archive-trigger { padding: 8px 12px 8px 6px; border-radius: 0 15px 15px 0; }

/* Вращение стрелочки при открытии меню (оставляем, так как это функциональная анимация) */
.archive-combo-wrapper .archive-trigger i { transition: transform 0.3s ease; }
.archive-combo-wrapper.active .archive-trigger i { transform: rotate(180deg); }

@keyframes archive-shake {
    0% { transform: rotate(-12deg) scale(1.1); }
    100% { transform: rotate(12deg) scale(1.1); }
}

/* Вращение стрелочки при открытии меню */
.archive-combo-wrapper .archive-trigger i { transition: transform 0.3s ease; }
.archive-combo-wrapper.active .archive-trigger i { transform: rotate(180deg); }

/* --- Выпадающее меню (Dropup) --- */
.archive-dropup {
    position: absolute;
    bottom: 100%;
    right: 50%; /* Центрирование над кнопкой */
    transform: translateX(50%) translateY(15px);
    margin-bottom: 15px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
}

.archive-combo-wrapper.active .archive-dropup {
    opacity: 1;
    visibility: visible;
    transform: translateX(50%) translateY(0);
    z-index: 110;
}

/* Кнопки внутри выпадающего меню */
.archive-dropup button {
    background: transparent !important;
    color: var(--text-main) !important;
    width: 100%;
    justify-content: flex-start;
    padding: 10px 15px;
    border-radius: var(--radius-sm) !important;
    font-weight: 600;
    font-size: 1em !important;
    border: none !important;
}

.archive-dropup button:hover {
    background: var(--hover-blue) !important;
    color: var(--primary-blue) !important;
}

/* Списки внутри модального окна Архива (остаются как были) */
.archive-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--border-color); transition: 0.2s; }
.archive-item:hover { background: var(--bg-gray); }

/* Увеличение ширины модального окна / меню архива */
#archive-combo .translate-edit-dropdown{
    min-width: 600px !important; /* Увеличено примерно в 2 раза (подстройте при необходимости) */
    width: 60vw !important;
    max-width: 800px;
}

/* Если архив реализован через классическое модальное окно (.modal-content) */
#archiveModal .modal-content {
    max-width: 800px !important;
}

/* --- Стили для панели Экспорта / Печати --- */
.export-combo-wrapper { position: relative; display: flex; }


.export-dropup {
    position: absolute; bottom: 100%; right: 0; margin-bottom: 15px;
    background: var(--surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 0; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 110; width: 280px; overflow: hidden;
}
.export-combo-wrapper.active .export-dropup { opacity: 1; visibility: visible; transform: translateY(0); }

.exp-views-container { display: flex; width: 200%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.exp-view { width: 50%; flex-shrink: 0; padding: 15px; box-sizing: border-box; }

.exp-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Две колонки одинаковой ширины */
    gap: 12px; /* Слегка увеличенный отступ для визуального "воздуха" */
}
.export-card-mini {
    position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 12px 5px; text-align: center; cursor: pointer; transition: 0.2s; background: var(--bg-gray);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 85px;
}
.export-card-mini:hover { border-color: var(--primary-blue); background: var(--hover-blue); box-shadow: 0 4px 6px rgba(14,165,233,0.1); }
.export-card-mini span { font-size: 0.75em; line-height: 1.1; font-weight: 600; color: var(--text-main); }

.exp-badge {
    position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
    background: var(--primary-blue); color: white; font-size: 0.65em; padding: 3px 8px;
    border-radius: 10px; white-space: nowrap; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.exp-clear-btn {
    position: absolute; top: -8px; right: -8px; background: #DC2626; color: white;
    border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    font-size: 0.75em; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.2); transition: 0.2s; z-index: 2;
}
.exp-clear-btn:hover { background: #dc2626; transform: scale(1.15); }

    .diag-tab-btn { padding: 8px 16px; border: none; background: transparent; border-bottom: 2px solid transparent; cursor: pointer; font-weight: 600; color: var(--text-muted); transition: 0.2s; font-size:0.95em; }
    .diag-tab-btn:hover { color: var(--primary-blue); }
    .diag-tab-btn.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }

    .calc-tab-btn { padding:8px 16px; border:none; background:var(--bg-gray); border-radius:var(--radius-sm); cursor:pointer; font-weight:600; color:var(--text-muted); transition:0.2s; }
    .calc-tab-btn.active { background:var(--primary-blue); color:white; }
    .calc-nav-btn { display:block; width:100%; text-align:left; padding:10px; border:1px solid transparent; background:transparent; border-radius:var(--radius-sm); cursor:pointer; color:var(--text-main); font-size:0.95em; transition:0.2s; }
    .calc-nav-btn:hover { background:var(--hover-blue); }
    .calc-nav-btn.active { background:var(--hover-blue); border-color:var(--accent-blue); color:var(--primary-blue); font-weight:600; }
    .calc-result-box { background:#f0fdf4; border:1px solid #bbf7d0; padding:15px; border-radius:var(--radius-sm); margin-top:15px; display:none; }
    .calc-result-box.danger { background:#fef2f2; border-color:#fecaca; }
    .calc-result-box.warn { background:#fffbeb; border-color:#fde68a; }
    .calc-checkbox-label { display:flex; align-items:center; gap:8px; margin-bottom:8px; cursor:pointer; font-size:0.95em; }
    .calc-checkbox-label input { width:auto; margin:0; }
    .score-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; margin-top:12px; border: 1px solid rgba(0,0,0,0.1); position:relative; }
    .score-bar div { transition: 0.3s; }
    .score-marker { position:absolute; top:-2px; bottom:-2px; width:4px; background:#000; border-radius:2px; box-shadow:0 0 4px rgba(0,0,0,0.5); transition: 0.3s; }


    .diag-group-title { font-size: 0.9em; font-weight: bold; color: var(--primary-blue); margin: 10px 0 5px 0; border-bottom: 1px solid var(--hover-blue); padding-bottom: 3px; }


    .badge-norm { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; font-weight: bold; margin-left: 8px; }
    .badge-high { background: #fee2e2; color: #dc2626; }
    .badge-low { background: #dbeafe; color: #2563eb; }
    .badge-ok { background: #dcfce3; color: #16a34a; }

    .struct-item-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border-color); transition:0.2s;}
    .struct-item-row:hover { background: var(--hover-blue); }
    .struct-item-row .info { display:flex; flex-direction:column; gap:4px; }


    .obs-compact-input { width: 100%; padding: 4px 6px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 0.9em; text-align: center; color: var(--primary-blue); font-weight: 600; background: #ffffff; height: 28px; transition: all 0.2s ease; }
    .obs-compact-input:focus { outline: none; border-color: var(--accent-blue); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.15); }
    .obs-compact-norm { font-size: 0.8em; color: var(--text-muted); text-align: right; line-height: 1.2; }

/* ==========================================================================
   МОДУЛЬ «ОБСЛЕДОВАНИЕ» — строка как строка таблицы.
   Пять колонок на всех строках сразу, отмечена строка или нет:
   [чекбокс] [название] [статус] [дата] [результат]
   Колонки статуса и даты фиксированы по ширине — поэтому дата и поле
   результата стоят на одной вертикали во всём списке и ничто не «плавает».
   ========================================================================== */
:root {
    --obs-row-h: 30px;      /* высота контрола = высота строки */
    --obs-col-status: 154px;
    --obs-col-date: 122px;
}

.obs-rows {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 560px;
    overflow-y: auto;
    padding-right: 6px;
}
/* КРИТИЧНО: у flex-контейнера с ограниченной высотой дети по умолчанию
   сжимаются (flex-shrink: 1) ниже собственной высоты — из-за этого развёрнутые
   textarea вылезали за пределы своей строки и наезжали на соседнюю. */
.obs-rows > * { flex: 0 0 auto; }

.obs-rows .diag-group-title { margin: 14px 0 6px 0; }
.obs-rows .diag-group-title:first-child { margin-top: 0; }

.obs-row {
    display: grid;
    /* чекбокс | название | статус | дата | результат */
    grid-template-columns: 18px minmax(150px, 1.05fr) var(--obs-col-status) var(--obs-col-date) minmax(190px, 2.1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 38px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    transition: background-color .18s ease, border-color .18s ease;
}
/* при развёрнутом textarea остальные ячейки прижимаются к верху, а не «висят» по центру */
.obs-row.row-expanded { align-items: start; position: relative; z-index: 2; }

.obs-row:hover { background: var(--hover-blue); }
.obs-row.checked { background: #f0f9ff; border-color: #bae6fd; }
.obs-row.checked.has-result { background: #f0fdf4; border-color: #bbf7d0; }

/* --- 1. чекбокс --- */
.obs-cb {
    width: 17px; height: 17px;
    margin: 0;
    justify-self: center;
    cursor: pointer;
    accent-color: var(--primary-blue);
}
.obs-row.row-expanded .obs-cb { margin-top: 7px; }

/* --- 2. название: label и input выглядят одинаково и текст стартует с одной точки --- */
.obs-name {
    min-width: 0;
    height: var(--obs-row-h);
    margin: 0;
    padding: 4px 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 20px;
    font-weight: 500;
    color: var(--text-main);
    text-transform: none;        /* гасим глобальное label { text-transform: uppercase } */
    letter-spacing: normal;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.obs-name-label { display: block; cursor: pointer; }
.obs-name-label:hover { color: var(--primary-blue); }
input.obs-name-input {
    display: block;
    width: 100%;
    font-weight: 600;
    border-style: dashed;
    border-color: transparent;
    transition: border-color .15s ease, background-color .15s ease;
}
input.obs-name-input:hover { border-color: var(--border-color); }
input.obs-name-input:focus {
    outline: none;
    border-style: solid;
    border-color: var(--accent-blue);
    background: var(--surface);
}

/* --- 3. бейдж статуса: фиксированная колонка, одинаковая ширина чипов --- */
.obs-status {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--obs-row-h);
}
.obs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    min-height: 23px;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .2px;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
}
.obs-badge-plan { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.obs-badge-done { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.obs-badge-done i { font-size: 0.9em; }

/* --- 4. дата --- */
input.obs-date {
    width: 100%;
    height: var(--obs-row-h);
    padding: 0 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    color: var(--text-main);
    box-sizing: border-box;
}

/* --- 5. результат --- */
.obs-result { min-width: 0; }

/* многострочный: компактно -> авто-рост при фокусе */
.obs-res-area {
    display: block;
    width: 100%;
    height: var(--obs-row-h);
    min-height: var(--obs-row-h);
    max-height: 320px;
    padding: 4px 8px;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 20px;
    color: var(--text-main);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    resize: none;
    overflow: hidden;
    transition: height .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.obs-res-area.expanded {
    overflow: auto;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}

/* числовой: значение (под 3-4 знака) | стрелка нормы | референс */
.obs-result-num {
    display: grid;
    grid-template-columns: 58px 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
}
input.obs-val {
    width: 100%;
    height: var(--obs-row-h);
    padding: 0 4px;
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
    box-sizing: border-box;
}
.obs-result-num .badge-norm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 21px;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    border-radius: 5px;
}
.obs-result-num .obs-compact-norm {
    font-size: 0.76rem;
    line-height: 1.25;
    color: var(--text-muted);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* мягкое появление полей при отметке чекбокса */
.obs-row.checked > .obs-date,
.obs-row.checked > .obs-result { animation: obsFieldIn .2s ease; }
@keyframes obsFieldIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* --- тёмная тема --- */
[data-theme="dark"] .obs-row.checked { background: rgba(56, 189, 248, .10); border-color: rgba(56, 189, 248, .30); }
[data-theme="dark"] .obs-row.checked.has-result { background: rgba(34, 197, 94, .10); border-color: rgba(34, 197, 94, .28); }
[data-theme="dark"] .obs-badge-plan { background: rgba(56, 189, 248, .15); color: #7dd3fc; border-color: rgba(56, 189, 248, .35); }
[data-theme="dark"] .obs-badge-done { background: rgba(34, 197, 94, .15); color: #86efac; border-color: rgba(34, 197, 94, .35); }
[data-theme="dark"] .obs-res-area { background: var(--surface); color: var(--text-main); border-color: var(--border-color); }
[data-theme="dark"] .obs-name,
[data-theme="dark"] input.obs-name-input { color: var(--text-main); }
[data-theme="dark"] input.obs-name-input:focus { background: var(--surface); }

/* --- планшет: сжимаем служебные колонки --- */
@media (max-width: 1200px) {
    .obs-row {
        grid-template-columns: 18px minmax(120px, 1fr) 140px 112px minmax(150px, 1.8fr);
        column-gap: 9px;
    }
    .obs-badge { font-size: 0.6rem; letter-spacing: 0; padding: 3px 8px; }
    .obs-result-num { grid-template-columns: 54px 22px minmax(0, 1fr); column-gap: 8px; }
}

/* --- узкий экран: строка раскладывается в две ступени --- */
@media (max-width: 900px) {
    .obs-row {
        grid-template-columns: 18px minmax(0, 1fr) var(--obs-col-date);
        grid-template-areas:
            "cb   name   status"
            ".    result date";
        row-gap: 7px;
        column-gap: 10px;
        padding: 7px 10px;
        align-items: center;
    }
    .obs-row.row-expanded { align-items: center; }
    .obs-row.row-expanded .obs-cb { margin-top: 0; }
    .obs-cb     { grid-area: cb; }
    .obs-name   { grid-area: name; }
    .obs-status { grid-area: status; }
    .obs-date   { grid-area: date; }
    .obs-result { grid-area: result; }
    .obs-rows { max-height: none; }
}

@media (max-width: 600px) {
    .obs-row {
        grid-template-columns: 18px minmax(0, 1fr);
        grid-template-areas:
            "cb   name"
            ".    status"
            ".    date"
            ".    result";
        row-gap: 6px;
    }
    .obs-status { justify-content: flex-start; height: auto; }
    .obs-badge { width: auto; }
    input.obs-date { max-width: 140px; }
    .obs-result-num { grid-template-columns: 58px 24px minmax(0, 1fr); }
}

/* --- печать самой страницы приложения --- */
@media print {
    .obs-rows { max-height: none; overflow: visible; }
    .obs-row { page-break-inside: avoid; break-inside: avoid; }
    .obs-res-area { height: auto !important; overflow: visible !important; }
}

/* --- документ (предпросмотр печати / Word): 2 колонки плана и таблицы --- */
.obs-plan-table { table-layout: fixed; width: 100%; border: none; }
.obs-plan-table td { border: none; vertical-align: top; }
.obs-res-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.obs-res-table th, .obs-res-table td { border: 1px solid #000; padding: 2px 4px; vertical-align: top; word-wrap: break-word; }
.obs-plan-table, .obs-res-block, .obs-res-table tr { page-break-inside: avoid; break-inside: avoid; }


    .btn-modal-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primary-blue); color: #ffffff; border: none; border-radius: var(--radius-sm); padding: 0 20px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: background 0.2s ease; height: 40px; box-sizing: border-box; flex-shrink: 0; }
    .btn-modal-add:hover { background: #172a6b; }

    .sort-disabled .drag-handle { display: none !important; }

    .toggle-switch { position: relative; display: flex !important; align-items: center; cursor: pointer; gap: 8px; font-size: 0.95em; font-weight: 600; color: var(--text-main); user-select: none; margin: 0 !important; height: 40px; }
    .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; margin: 0; }
    .toggle-slider { position: relative; display: block; flex-shrink: 0; width: 44px; height: 24px; background-color: var(--border-color); border-radius: 34px; transition: background-color 0.3s; }
    .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
    .toggle-switch input:checked + .toggle-slider { background-color: var(--primary-blue); }
    .toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }
    .toggle-switch span[data-i18n] { display: block; line-height: 1; transform: translateY(1px); }

    .global-loader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(3px); z-index: 9999; display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease-in-out; }
    .global-loader.active { opacity: 1; }

.text-loader {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--primary-blue);
    animation: text-pulse 1.5s infinite ease-in-out;
}
.text-loader::after {
    content: '';
    display: inline-block;
    width: 1.5em; /* Фиксируем ширину, чтобы текст не прыгал */
    text-align: left;
    animation: text-dots 1.5s infinite steps(4, end);
}

/* Анимация пульсации (прозрачность) */
@keyframes text-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Бегущие точки */
@keyframes text-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* --- Новая стилистика нижней панели кнопок --- */
.action-buttons-footer {
    display: flex;
    justify-content: center; /* Центрируем всё */
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 30px;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
    position: sticky;
    bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/* Общий стиль для второстепенных кнопок (Архив и Очистить) */
.btn-secondary-minimal {
    background: #f3f4f6 !important;
    color: #4b5563 !important;
    border: 1px solid #e5e7eb !important;
    padding: 8px 16px !important;
    font-size: 0.85em !important;
    border-radius: 15px !important;
    height: 40px !important;
    box-shadow: none !important;
}
.btn-secondary-minimal:hover {
    background: #e5e7eb !important;
    color: #1f2937 !important;
    transform: none !important;
}

/* Особый стиль для "Очистить всё" (еще более тусклый) */
#clear-all-button {
    background: transparent !important;
    color: #9ca3af !important;
    border: 1px solid #f3f4f6 !important;
    transform: none !important;
}

/* Ховер: только изменение цвета на красноватый, без сдвига */
#clear-all-button:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
    box-shadow: 0 5px 12px rgba(220, 38, 38, 0.15) !important;
    transform: none !important;
}

#clear-all-button:hover i {
    color: #DC2626; /* Иконка просто меняет цвет без вибрации */
}

#clear-all-button:active {
    transform: none !important; /* Отключаем эффект прожатия, если он был */
}
/* --- ВАРИАНТ 3: МЕДИЦИНСКИЙ РАДАР (SONAR PULSE) --- */
.export-btn-float {
    position: relative;
    width: 65px;
    height: 65px;
    border-radius: 50% !important;
    background: #0284c7 !important;
    color: white !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4) !important;
}

/* Создаем два невидимых круга для волн */
.export-btn-float::before,
.export-btn-float::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #38bdf8; /* Голубой контур */
    z-index: -1;
    opacity: 0;
}

/* Запуск волн при наведении */
.export-btn-float:hover {
    background: #0369a1 !important;
    transform: translateY(-3px);
}

.export-btn-float:hover::before {
    animation: sonar-wave 1.5s ease-out infinite;
}
.export-btn-float:hover::after {
    animation: sonar-wave 1.5s ease-out 0.75s infinite; /* Вторая волна с задержкой */
}

.export-btn-float i { font-size: 1.6em; transition: 0.3s; }
.export-btn-float:hover i { transform: scale(1.1); text-shadow: 0 0 8px rgba(255,255,255,0.8); }

@keyframes sonar-wave {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.export-dropup, .archive-dropup {right: 50%; transform: translateX(50%) translateY(15px);}
.export-combo-wrapper.active .export-dropup,
.archive-combo-wrapper.active .archive-dropup { transform: translateX(50%) translateY(0);}

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

.auth-panel button[onclick*="settingsModal"] i {    transition: transform 0.3s ease-in-out;    display: inline-block;}
.auth-panel button[onclick*="settingsModal"]:hover i {    animation: spin-gear-smooth 2.5s linear infinite;}
.auth-panel button[onclick*="logout"] i {    transition: transform 0.3s ease-in-out;    display: inline-block;}
.auth-panel button[onclick*="logout"]:hover i {    transform: translateX(4px);}

.skeleton-box {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.skeleton-box::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: shimmer 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* --- СОВРЕМЕННЫЙ ДИЗАЙН ДЛЯ ПОЛЕЙ ДАТЫ В ОБСЛЕДОВАНИЯХ --- */
input[type="date"].obs-compact-input {
    /* Современный системный шрифт (Apple, Windows, Android) */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;

    /* Аккуратный фон и границы */
    background-color: #f1f5f9 !important; /* Очень мягкий серо-голубой оттенок */
    border: 1px solid transparent !important;
    border-radius: 6px !important; /* Мягкие скругления */
    padding: 4px 8px !important;
    outline: none !important;

    /* Плавная анимация */
    transition: all 0.2s ease-in-out !important;
    cursor: pointer;
}

/* Эффект при наведении и клике */
input[type="date"].obs-compact-input:hover,
input[type="date"].obs-compact-input:focus {
    background-color: #ffffff !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important; /* Легкое свечение */
}

/* Стилизация самой иконки календарика (для Chrome/Safari) */
input[type="date"].obs-compact-input::-webkit-calendar-picker-indicator {
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.2s ease;
}

input[type="date"].obs-compact-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
    transform: scale(1.1); /* Иконка слегка увеличивается */
}

:root {
  /* Цвета лоадера */
  --loader-bg: #f9fafb;
  --loader-primary: #030303;
  --loader-accent: #DC2626;  /* = --color-danger; было #c70000 вне палитры */
}

#modern-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--loader-bg);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999; /* Поверх всех элементов */
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Класс для плавного скрытия */
#modern-preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Внешнее кольцо */
.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--loader-primary);
  border-right-color: var(--loader-primary);
  animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Внутреннее кольцо */
.spinner-ring.inner {
  width: 65%;
  height: 65%;
  border-top-color: var(--loader-accent);
  border-right-color: transparent;
  border-left-color: var(--loader-accent);
  border-bottom-color: transparent;
  animation: spin-reverse 0.9s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

/* Пульсирующий центр */
.pulse-dot {
  width: 12px;
  height: 12px;
  background: var(--loader-accent);
  border-radius: 50%;
  animation: pulse 1.2s ease-in-out infinite;
}

/* Ключевые кадры анимации */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
}

/* Принудительное расширение окна (флаг !important перебьет любые старые стили) */
#calcModal .modal-content {
    max-width: 1300px !important;
    width: 98% !important;
    padding: 30px !important;
    transition: all 0.3s ease;
}

/* Оптимизация распределения колонок на большой ширине */


/* Левая колонка (Ввод) — теперь чуть шире для комфортного расположения чекбоксов */


/* Правая колонка (Результат и Инфо) */


/* Сетка чекбоксов теперь может быть в 3 колонки на очень широких экранах */


/* Правая колонка: Информация и результат (закреплена при скролле) */


/* 2. Эффект Lightbox для изображений */
.lightbox-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.9); /* Глубокий темный фон */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000000;
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.lightbox-img {
    max-width: 95%;
    max-height: 95%;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lightbox-overlay.active { display: flex; }
.lightbox-overlay.active .lightbox-img { transform: scale(1); }

/* Индикатор возможности клика на матрицу */
.zoom-trigger {
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.zoom-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Стили для водяного знака при печати */
@media print {
    /* Фоновый водяной знак (диагональный) */
    .has-watermark::before {
        content: "CARDIOGRAM.UZ";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 80pt;
        color: rgba(0, 0, 0, 0.04) !important; /* Очень бледный, чтобы не мешать тексту */
        z-index: -1;
        white-space: nowrap;
        pointer-events: none;
    }

    /* Подпись в футере каждой страницы */
    .has-watermark::after {
        content: "Документ сформирован на платформе CARDIOGRAM.UZ";
        position: fixed;
        bottom: 10mm;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 9pt;
        color: #888 !important;
        border-top: 0.5pt solid #eee;
        padding-top: 5px;
    }
}

/* Скрываем эти элементы в обычном интерфейсе браузера */


/* Простая и надежная кнопка PRO */
.btn-pro-simple {
    background-color: #D97706 !important; /* Классический золотой/янтарный */
    color: #ffffff !important;
    border: 1px solid #d97706 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    margin: 0 5px;
    height: auto !important; /* Защита от сплющивания */
}

.btn-pro-simple:hover {
    background-color: #d97706 !important;
}

/* --- COOKIE BANNER --- */
.cookie-banner {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 650px;
    background: var(--surface); /* Белый фон */
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); /* Мягкая тень как на скриншоте */
    border-radius: var(--radius-md);
    padding: 12px 20px;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    z-index: 1900;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner-text {
    font-size: 0.85em;
    line-height: 1.4;
    color: var(--text-main);
    margin: 0;
    flex-grow: 1;
}

.cookie-banner-btn {
    background: var(--primary-blue); /* Темно-синяя кнопка */
    color: white;
    border: none;
    padding: 8px 18px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
    transition: all 0.2s;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-banner-btn:hover {
    background: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

@media (max-width: 600px) {
    .cookie-banner {
        flex-direction: column;
        text-align: center;
        padding: 15px;
        bottom: 15px;
    }
    .cookie-banner-btn {
        width: 100%;
    }
}

/* ========================================================= */
/* ИНТЕРАКТИВНАЯ СЕТКА ВЫБОРА РЕЖИМОВ (С ЕДИНОЙ ВЫСОТОЙ) */
/* ========================================================= */


/* Рамка эскизов */


/* === МАГИЯ АНИМАЦИИ БЕЗ СКАЧКОВ === */
/* 1. Исходное состояние: контент полностью свернут */


/* 2. При наведении на ЛЮБУЮ часть сетки — раздвигаем высоту у ВСЕХ карточек */


/* 3. Текст и линия появляются ТОЛЬКО у карточки, на которую навели */


/* --- ИСПРАВЛЕНИЕ СПИСКА ПРЕПАРАТОВ (SORTABLE LIST) ДЛЯ ТЕМНОЙ ТЕМЫ --- */

/* 1. Ячейки с текстом (названия препаратов, дозировки) */
[data-theme="dark"] .item-cell {
    background-color: #111827 !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}

/* Ячейки при наведении и редактировании */
[data-theme="dark"] .item-cell[contenteditable="true"]:focus,
[data-theme="dark"] .item-cell[contenteditable="true"]:hover {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
}

/* 2. Компактные инпуты внутри строк при наведении */
[data-theme="dark"] .compact-input:focus,
[data-theme="dark"] .compact-input:hover {
    background-color: #111827 !important;
    border-color: var(--primary-blue) !important;
}

/* 3. Блок переключения времени (утро/день/вечер/ночь) */
[data-theme="dark"] .time-toggles {
    background-color: #1e293b !important; /* Темный фон подложки кнопок */
}

/* Активная кнопка времени (выбранная) */
[data-theme="dark"] .time-btn.active {
    background-color: var(--primary-blue) !important;
    color: white !important;
}

/* 4. Поля ввода точного времени (часы:минуты) */
[data-theme="dark"] .time-inputs input[type="time"]:focus,
[data-theme="dark"] .time-inputs input[type="time"]:hover {
    background-color: #111827 !important;
    border-color: var(--primary-blue) !important;
    color: var(--text-main) !important;
}


/* 1. Блок выбора пола (.gender-toggle) */

/* Ползунок внутри уже использует var(--surface), поэтому он станет правильного темно-синего цвета #1e293b автоматически */


/* 2. Контейнер современных вкладок (.section-tabs) */
[data-theme="dark"] .section-tabs {
    background: rgba(30, 41, 59, 0.85) !important; /* Темный полупрозрачный фон (вместо белого rgba) */
    border-color: var(--border-color) !important;
}
/* Ранее заполненная вкладка (которая была светло-голубой #f0f9ff) */
[data-theme="dark"] .section-button.selected:not(.active) {
    background: #0f172a !important;
    color: var(--primary-blue) !important;
}

/* 3. Нижняя плавающая панель с кнопками (.action-buttons-footer) */
[data-theme="dark"] .action-buttons-footer {
    background: rgba(30, 41, 59, 0.95) !important; /* Глубокий темный полупрозрачный цвет */
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

/* Второстепенные кнопки внутри футера (Архив, Очистить) */
[data-theme="dark"] .btn-secondary-minimal,
[data-theme="dark"] #clear-all-button {
    background: #0f172a !important;
    color: var(--text-main) !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .btn-secondary-minimal:hover {
    background: #334155 !important;
    color: #ffffff !important;
}
[data-theme="dark"] #clear-all-button:hover {
    background: #7f1d1d !important;
    color: #fca5a5 !important;
    border-color: #f87171 !important;
}

/* --- ИСПРАВЛЕНИЕ ПОЛЕЙ ОБСЛЕДОВАНИЙ И ВЫБРАННЫХ ДИАГНОЗОВ ДЛЯ ТЕМНОЙ ТЕМЫ --- */

/* 2. Элементы списка в разделе "Диагноз" */


/* --- Поля «Обследования» в тёмной теме -----------------------------------
   Единственный источник правды. Раньше этот селектор описывался тремя
   идущими подряд блоками с !important, которые расходились по `color`
   (--text-main против --primary-blue). --------------------------------- */

/* Основное состояние для всех типов полей (текст, селекты, даты) */
[data-theme="dark"] .obs-compact-input,
[data-theme="dark"] input.obs-compact-input,
[data-theme="dark"] select.obs-compact-input,
[data-theme="dark"] input[type="date"].obs-compact-input {
    background-color: #111827 !important;
    color: var(--primary-blue) !important;
    border-color: var(--border-color) !important;
}

/* Состояние при наведении курсора (hover) и фокусе */
[data-theme="dark"] .obs-compact-input:hover,
[data-theme="dark"] .obs-compact-input:focus,
[data-theme="dark"] input.obs-compact-input:hover,
[data-theme="dark"] input.obs-compact-input:focus,
[data-theme="dark"] select.obs-compact-input:hover,
[data-theme="dark"] select.obs-compact-input:focus,
[data-theme="dark"] input[type="date"].obs-compact-input:hover,
[data-theme="dark"] input[type="date"].obs-compact-input:focus {
    background-color: #1e293b !important;
    border-color: var(--primary-blue) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2) !important;
}

/* На всякий случай затемним и текст нормы рядом с полями */
[data-theme="dark"] .obs-compact-norm {
    color: var(--text-muted) !important;
}

/* --- ИСПРАВЛЕНИЕ КАРТОЧЕК РЕЖИМОВ (MODE-CARD И MODE-HOVER-DETAILS) --- */


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

/* ==========================================================================
   МОДАЛЬНОЕ ОКНО «ЭКСПОРТ И ПЕЧАТЬ»
   ========================================================================== */
.pe-modal { max-width: 470px; width: 100%; }

/* Заголовок и подзаголовок: раньше h2 нёс инлайновый margin-bottom:4px, а
   .pe-sub — отрицательный margin-top:-10px. Два правила тянули текст друг
   к другу, и строки почти слипались. Теперь ритм задаётся в одном месте.
   padding-right оставляет место под крестик закрытия (он position:absolute
   и из потока выпадает, поэтому длинный заголовок наезжал на него). */
.pe-modal h2 {
    margin: 0 0 6px 0;
    padding-right: 34px;
    font-size: 1.32em;
    line-height: 1.3;
}
.pe-sub {
    margin: 0 0 18px 0;
    padding-right: 34px;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
}

/* --- 4 крупные кнопки действий --- */
.pe-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 18px;
}
.pe-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 82px;
    padding: 10px 4px;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    color: var(--text-main);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .12s ease, background-color .16s ease;
}
.pe-action i { font-size: 1.45rem; }
.pe-action:hover {
    border-color: var(--accent-blue);
    background: var(--hover-blue);
    box-shadow: 0 6px 14px -8px rgba(15, 23, 42, .45);
    transform: translateY(-1px);
}
.pe-action:active { transform: translateY(0); }

/* --- нижний блок: два столбца настроек формата ---
   Общая подпись занимает всю ширину сетки и отделяет блок от ряда кнопок
   выше — без неё два смысловых блока читались как один сплошной. */
.pe-formats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 14px;
    background: var(--bg-gray);
    border: 1px solid var(--border-color);
    border-radius: 10px;
}
.pe-formats__caption {
    grid-column: 1 / -1;
    margin-bottom: 2px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pe-fmt-col { min-width: 0; }
.pe-fmt-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}
.pe-fmt-label i { font-size: 0.8rem; opacity: .65; color: var(--accent-blue); }

/* Чипы — грид с равными колонками: при flex-раскладке ряд из двух чипов
   («Обследование») и ряд из трёх («Лечение») давали разную ширину кнопок,
   и колонки выглядели несимметрично. minmax(max-content, 1fr) вместо
   голого 1fr: жёсткие равные доли обрезали «Таблица» в ряду из трёх до
   «Табл…», а так строка сперва вмещает текст и лишь потом делит остаток. */
.pe-chips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(max-content, 1fr);
    gap: 5px;
}
.pe-chip {
    min-width: 0;
    padding: 7px 6px;
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .15s ease;
}
.pe-chip:hover { border-color: var(--accent-blue); color: var(--text-main); }
.pe-chip.active {
    color: #fff;
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 3px 8px -4px var(--primary-blue);
}

/* --- тёмная тема --- */
[data-theme="dark"] .pe-action { background: var(--surface); border-color: var(--border-color); }
[data-theme="dark"] .pe-action:hover { background: rgba(96, 165, 250, .10); border-color: var(--accent-blue); }
[data-theme="dark"] .pe-formats { background: rgba(148, 163, 184, .07); border-color: var(--border-color); }
[data-theme="dark"] .pe-chip { background: var(--surface); }
[data-theme="dark"] .pe-chip.active { color: #0f172a; background: #60a5fa; border-color: #60a5fa; }

/* --- мобильные --- */
@media (max-width: 560px) {
    .pe-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .pe-action { min-height: 74px; font-size: 0.72rem; }
    .pe-action i { font-size: 1.3rem; }
    .pe-formats { grid-template-columns: 1fr; gap: 14px; }
}


/* ==========================================================================
   ВКЛАДКИ ВТОРОГО УРОВНЯ — БЕЗ АНИМАЦИЙ
   --------------------------------------------------------------------------
   Состояния переключаются мгновенно: раскрытие иконки по ховеру меняло ширину
   кнопки на лету, соседние вкладки сдвигались и курсор «прыгал» между ними.

   ВАЖНО: .section-button здесь намеренно ОТСУТСТВУЕТ. Его внешний вид и
   единственная разрешённая анимация (подъём закладки) заданы в
   consultation-header.css, который подключается позже. Раньше оба файла
   описывали одни и те же состояния через !important и противоречили друг
   другу: здесь стояло «transition:none», там — «transition:transform .25s».
   ========================================================================== */
.diag-tab-btn,
.diag-tab-btn::before,
.diag-tab-btn::after,
.diag-tab-btn:hover,
.diag-tab-btn.active,
.dorilar-mode-tab,
.dorilar-mode-tab:hover,
.dorilar-mode-tab.active,
.calc-tab-btn,
.calc-tab-btn:hover,
.calc-tab-btn.active,
.obs-tab-btn,
.obs-tab-btn:hover,
.obs-tab-btn.active {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}
/* =============================================================================
   ВЕРСИЯ 2.0 — РОЛИ, ЗАМКИ ДЕМО, АДМИН-КНОПКА
   ========================================================================== */

/* --- Бейджи ролей в виджете врача -----------------------------------------
   Единая система на все четыре роли: сплошная заливка + белый текст.
   Раньше tier-demo/tier-pro переопределялись в consultation-header.css
   насыщенным цветом, а tier-super/tier-admin оставались бледными чипами —
   две роли из четырёх выглядели по другому дизайн-языку. Оттенки разведены
   по смыслу: серый — нет подписки, синий — база, фиолетовый — расширенный,
   красный — администратор (раньше demo и admin делили один янтарный).
   ------------------------------------------------------------------------- */
.doctor-widget__badge.tier-demo  { background: var(--color-neutral, #475569); color: #fff; }
.doctor-widget__badge.tier-pro   { background: var(--color-primary, #1D4ED8); color: #fff; }
.doctor-widget__badge.tier-super { background: #7C3AED;                       color: #fff; }
.doctor-widget__badge.tier-admin { background: var(--color-danger,  #DC2626); color: #fff; }
/* --- Заблокированные для ДЕМО элементы в подсказках ----------------------- */
.ui-autocomplete .ac-item-locked            { opacity:.62; cursor:not-allowed; }
.ui-autocomplete .ac-item-locked .ac-line,
.ui-autocomplete .ac-item-locked .ac-med-name { color:var(--text-muted); }
.ui-autocomplete .ac-item-locked:hover,
.ui-autocomplete .ac-item-locked.ui-state-active {
  background:#fff7ed; border-color:#fed7aa; color:inherit;
}
.ui-autocomplete .ac-lock { font-size:.92em; margin-right:2px; filter:grayscale(.15); }

/* --- Баннеры модулей уровня СУПЕР ---------------------------------------- */
.action-banner.is-locked          { opacity:.72; }
.action-banner.is-locked:hover    { opacity:.9; }
.action-banner.is-locked .action-banner__icon { background:#f1f5f9; color:#94a3b8; }
.action-banner.is-locked .action-banner__soon {
  background:#ede9fe; color:#6d28d9; font-weight:800;
}

/* --- Кнопка перехода в админ-панель (только для роли АДМИН) ---------------
   Живёт в шапке настроек рядом с тумблером темы и наследует его геометрию
   через класс .theme-toggle-btn. Здесь переопределяем только то, что
   отличает её визуально: янтарный акцент вместо нейтрального фона.
   Прежний вариант был отдельной крупной кнопкой в подвале со своим
   градиентом и паддингами — рядом с тумблером он смотрелся чужеродно. */
.settings-admin-btn {
  text-decoration: none;
  color: var(--color-warning-text, #92400E);
  background: var(--color-warning-subtle, #FEF3C7);
  border-color: var(--color-warning, #D97706);
}
.settings-admin-btn:hover {
  background: var(--color-warning, #D97706);
  border-color: var(--color-warning, #D97706);
  color: #fff;
}
.settings-admin-btn i { font-size: .95em; }

[data-theme="dark"] .settings-admin-btn {
  color: #FCD34D;
  background: rgba(217, 119, 6, .16);
  border-color: rgba(217, 119, 6, .55);
}
[data-theme="dark"] .settings-admin-btn:hover {
  background: var(--color-warning, #D97706);
  color: #1f2937;
}

/* --- Мобильная адаптация подвала настроек -------------------------------- */
@media (max-width:640px){
  .settings-modal__footer { flex-wrap:wrap; gap:10px; }
  .settings-modal__footer > * { flex:1 1 auto; justify-content:center; text-align:center; }
}