/* ============================================================
               ГЛОБАЛЬНЫЕ СБРОСЫ  БАЗОВЫЕ СТЛ
               ============================================================ */

        /* Убираем стандартные отступы у всех элементов */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* Убираем стандартные отступы и?? */
            //font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
            /* Базовый шрифт для всей страницы */
        }

        @font-face {
    font-family: 'd7m';
    font-style: normal;
    font-weight: 400;
    src: local('d7m'), url('d7m.woff') format('woff');
}

@font-face {font-family: 'logo_top'; src: url("ttf/nbr/mmt.ttf") format("opentype"); }
@font-face {font-family: 'ub'; src: url("ttf/ub.ttf") format("opentype");}

@font-face {
    font-family: 'ai_01';
    font-style: normal;
    font-weight: normal;
    src: local('ai01'), url('ttf/ai_01.woff2') format('woff2');
}

@font-face {
  font-family: "ai_02";
  src: url("ttf/ai_02.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'ai_03';
    font-style: normal;
    font-weight: normal;
    src: local('ai03'), url('ttf/ai_03.woff') format('woff');
}



@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('montserrat.woff2') format('woff2');
  font-display: swap;
}


        /* Настройки body — вся страница без скролла */
        body {
            background: #f4f7fc;
            /* Светло-серый фон */
            height: 100vh;
            /* Высота на весь экран */
            overflow: hidden;
            /* Убираем скролл у body — управляем только через content-area */
        }

        /* ============================================================
               ОСНОВНОЙ КОНТЕЙНЕР (flex-контейнер для всей страницы)
               ============================================================ */

        /* Главный контейнер — располагает панель и основную область горизонтально */
        .app-container {
            display: flex;
            /* Горизонтальное расположение: панель + основная область */
            height: 100vh;
            /* Высота на весь экран */
            width: 100vw;
            /* Ширина на весь экран */
            position: relative;
            /* Для позиционирования дочерних элементов */
        }

        /* ============================================================
               ЛЕВАЯ БОКОВАЯ ПАНЕЛЬ (sidebar)
               ============================================================ */

        /* Боковая панель — тёмная, фиксированной ширины */
        .sidebar {  min-height: 100dvh;
    /* Минимальная высота = высота экрана */
    height: auto;
            width: 76px;
            /* Фиксированная ширина панели */
            min-width: 76px;
            /* Минимальная ширина, чтобы не сжималась */
            background: #1e293b;
            /* Тёмно-сизый фон */
            color: #e2e8f0;
            /* Светлый цвет текста/иконок */
            display: flex;
            /* Flex-контейнер для вертикального расположения */
            flex-direction: column;
            /* Элементы располагаются вертикально */
            align-items: center;
            /* Центрирование по горизонтали */
            padding: 16px 0 12px 0;
            /* Внутренние отступы сверху и снизу */
            height: 100vh;
            /* Высота на весь экран */
            position: sticky;
            /* Прилипает к верху при скролле */
            top: 0;
            /* Прилипает к верхнему краю */
            overflow-y: auto;
            /* Если иконок станет слишком много — скролл внутри панели */
            scrollbar-width: none;
            /* Скрываем скролл для Firefox */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
            /* Тень справа для отделения от контента */
            z-index: 10;
            /* Поверх основного контента */
         //transition: transform 0.1s ease, width 0.1s ease, min-width 0.1s ease, padding 0.1s ease;
            /* Плавная анимация при скрытии/показе */
        }

        /* Скрываем скролл для Chrome/Safari */
        .sidebar::-webkit-scrollbar {
            display: none;
        }

        /* Класс для скрытой боковой панели — уезжает влево */
        .sidebar.hidden {
            transform: translateX(-100%);
            /* Сдвиг влево за пределы экрана */
            width: 0;
            /* Ширина становится нулевой */
            min-width: 0;
            /* Минимальная ширина тоже нулевая */
            padding: 0;
            /* Убираем отступы */
            overflow: hidden;
            /* Скрываем содержимое */
            margin: 0;
            /* Убираем внешние отступы */
            border: none;
            /* Убираем границу */
            box-shadow: none;
            /* Убираем тень */
        }

        /* ============================================================
               БУРГЕР ВНУТР БОКОВОЙ ПАНЕЛ (скрывает панель)
               ============================================================ */

        /* Кнопка-бургер внутри боковой панели — при клике скрывает панель */
        .menu-toggle-sidebar {
            margin-bottom: 24px;
            /* Отступ снизу */
            cursor: pointer;
            /* Курсор-указатель */
            display: flex;
            /* Flex для центрирования */
            align-items: center;
            justify-content: center;
            width: 52px;
            /* Ширина кнопки */
            height: 52px;
            /* Высота кнопки */
            border-radius: 12px;
            /* Скругление углов */
            transition: 0.2s;
            /* Плавное изменение при наведении */
            color: #94a3b8;
            /* Серый цвет иконки */
            font-size: 24px;
            /* Размер иконки */
            flex-shrink: 0;
            /* Не сжимается при нехватке места */
            background: transparent;
            /* Прозрачный фон */
            border: none;
            /* Без рамки */
        }

        /* При наведении на бургер — меняем фон и цвет */
        .menu-toggle-sidebar:hover {
            background: #334155;
            /* Тёмно-серый фон */
            color: #f1f5f9;
            /* Светлый цвет */
        }

        /* ============================================================
               БУРГЕР В ВЕРХНЕЙ ПАНЕЛ (появляется когда панель скрыта)
               ============================================================ */

        /* Бургер в верхней панели — появляется только когда боковая панель скрыта */
        .menu-toggle-topbar {
            display: none;
            /* По умолчанию скрыт */
            cursor: pointer;
            /* Курсор-указатель */
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 8px;
            transition: 0.2s;
            color: #1e293b;
            font-size: 20px;
            background: #f1f5f9;
            border: 1px solid #e2e8f0;
            flex-shrink: 0;
        }

        /* При наведении на бургер в верхней панели */
        .menu-toggle-topbar:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

        /* Когда боковая панель скрыта — показываем бургер в верхней панели */
        .sidebar.hidden~.main-area .menu-toggle-topbar {
            display: flex;
            /* Показываем как flex-элемент */
        }

        /* ============================================================
               КОНТЕЙНЕР КОНОК МЕНЮ (внутри боковой панели)
               ============================================================ */

        /* Контейнер для всех иконок меню */
        .nav-icons {
            display: flex;
            /* Flex-контейнер */
            flex-direction: column;
            /* Вертикальное расположение */
            align-items: center;
            /* Центрирование по горизонтали */
            gap: 4px;
            /* Расстояние между иконками */
            width: 100%;
            /* Ширина на всю панель */
            padding: 0 4px;
            /* Небольшие отступы по бокам */
            flex: 1;
            /* Занимает всё свободное место */
        }

        /* ============================================================
               КАЖДАЯ КНОПКА-КОНКА В МЕНЮ
               ============================================================ */

        /* Каждая иконка в меню — квадратная кнопка */
        .nav-item {
            width: 100%;
            /* Ширина на всю панель */
            aspect-ratio: 1 / 1;
            /* Сохраняем квадратную форму (ширина = высоте) */
            max-width: 52px;
            /* Максимальная ширина */
            max-height: 52px;
            /* Максимальная высота */
            display: flex;
            /* Flex для центрирования */
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            /* Скругление углов */
            cursor: pointer;
            /* Курсор-указатель */
            transition: 0.2s;
            /* Плавное изменение при наведении */
            color: #94a3b8;
            /* Серый цвет по умолчанию */
            font-size: 20px;
            /* Размер иконки */
            background: transparent;
            /* Прозрачный фон */
            border: none;
            /* Без рамки */
            padding: 0;
            /* Без внутренних отступов */
            margin: 2px 0;
            /* Небольшие отступы сверху и снизу */
            position: relative;
            /* Для позиционирования tooltip */
        }

        /* При наведении на иконку — меняем фон и цвет */
        .nav-item:hover {
            background: #334155;
            /* Тёмно-серый фон */
            color: #f1f5f9;
            /* Светлый цвет */
        }

        /* Активная иконка (текущий раздел) — синий фон */
        .nav-item.active {
            background: #3b82f6;
            /* Синий фон */
            color: white;
            /* Белый цвет иконки */
            box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
            /* Тень синего цвета */
        }

        /* ============================================================
               ВСПЛЫВАЮЩАЯ ПОДСКАЗКА (tooltip) при наведении на иконку
               ============================================================ */

        /* Всплывающая подсказка справа от иконки */
        .nav-item[data-tooltip]:hover::after {
            content: attr(data-tooltip);
            /* Берём текст из атрибута data-tooltip */
            position: absolute;
            /* Абсолютное позиционирование */
            left: 64px;
            /* Сдвиг вправо от иконки */
            top: 50%;
            /* Вертикальное центрирование */
            transform: translateY(-50%);
            /* Сдвигаем на половину высоты для точного центрирования */
            background: #0f172a;
            /* Тёмный фон */
            color: #f1f5f9;
            /* Светлый текст */
            padding: 6px 14px;
            /* Внутренние отступы */
            border-radius: 8px;
            /* Скругление углов */
            font-size: 13px;
            /* Размер шрифта */
            font-weight: 500;
            /* Полужирный */
            white-space: nowrap;
            /* Текст в одну строку */
            letter-spacing: 0.2px;
            /* Межбуквенный интервал */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            /* Тень */
            z-index: 20;
            /* Поверх всего */
            pointer-events: none;
            /* Не мешает кликам */
            border: 1px solid #334155;
            /* Тёмная рамка */
        }

        /* Маленькая стрелочка у подсказки (треугольник) */
        .nav-item[data-tooltip]:hover::before {
            content: '';
            /* Пустое содержимое */
            position: absolute;
            /* Абсолютное позиционирование */
            left: 56px;
            /* Сдвиг вправо от иконки */
            top: 50%;
            /* Вертикальное центрирование */
            transform: translateY(-50%);
            /* Сдвигаем на половину высоты */
            border: 6px solid transparent;
            /* Прозрачная рамка */
            border-right-color: #0f172a;
            /* Правая часть — тёмного цвета (создаёт треугольник) */
            z-index: 21;
            /* Поверх подсказки */
            pointer-events: none;
            /* Не мешает кликам */
        }

        /* ============================================================
               ПРАВАЯ ЧАСТЬ (основная область)
               ============================================================ */

        /* Основная область справа от панели */
        .main-area {
            flex: 1;
            /* Занимает всё оставшееся пространство */
            display: flex;
            /* Flex-контейнер */
            flex-direction: column;
            /* Вертикальное расположение */
            height: 100vh;
            /* Высота на весь экран */
            overflow: hidden;
            /* Скрываем overflow, чтобы управлять через content-area */
            background: #f8fafc;
            /* Фон */
            transition: margin-left 0.3s ease;
            /* Плавное изменение отступа */
            margin-left: 0;
            /* Отступ слева */
        }

 /* ============================================================
   ВЕРХНЯЯ ПАНЕЛЬ (top-bar) — ПОЛНЫЙ КОД
   ============================================================ */

/* Верхняя панель — адаптивная по высоте */
.top-bar {
    min-height: 68px;
    /* Минимальная высота +8px (было 60px) */
    height: auto;
    /* Автоматическая высота по содержимому */
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    /* Центрируем по вертикали */
    justify-content: space-between;
    padding: 10px 15px 10px 20px;
    border-bottom: 1px solid #e9edf2;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 5;
    flex-wrap: wrap;
    /* Перенос на новую строку при нехватке места */
    gap: 6px 12px;
}

/* Левая часть */
.top-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Правая часть */
.top-right {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ============================================================
   ЛОГОТИП — ИСПРАВЛЕННЫЙ (красная часть на одной линии)
   ============================================================ */

.logo-block {
    display: flex;
    align-items: center;
    gap: clamp(4px, 0.8vw, 10px);
}

.logo-icon {
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 700;
    color: #0b3b5c;
    display: flex;
    align-items: center;
}

.logo-icon i {
    color: #e11d48;
    font-size: inherit;
}

/*
    ГЛАВНОЕ ИСПРАВЛЕНИЕ:
    Обе части логотипа (MED и LIST) теперь на одной линии
*/
.logo-text {
    font-size: clamp(18px, 2.2vw, 28px);
    font-family: 'logo_top';
    font-weight: 700;
    color: #0b3b5c;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
    display: inline-flex;
    /* ?? inline-flex вместо flex */
    align-items: center;
    /* ?? Центрируем по вертикали */
    height: auto;
    /* ?? Автоматическая высота */
    line-height: 1;
    /* ?? Убираем межстрочный интервал */
    vertical-align: middle;
    /* ?? Вертикальное выравнивание */
    padding: 0;
    margin: 0;
}

/* Красная часть "LIST" — теперь на той же линии */
.logo-text span {
    color: #e11d48;
    letter-spacing: clamp(1px, 0.3vw, 2px);
    display: inline-flex;
    /* ?? inline-flex вместо flex */
    align-items: center;
    /* ?? Центрируем по вертикали */
    height: auto;
    /* ?? Автоматическая высота */
    line-height: 1;
    /* ?? Тот же межстрочный интервал */
    vertical-align: middle;
    /* ?? Вертикальное выравнивание */
    padding: 0;
    margin: 0;
}

/* ============================================================
   ИНФОРМАЦИЯ ОБ АДМИНИСТРАТОРЕ
   ============================================================ */

.admin-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
    border-left: 2px solid #dbe0e8;
    padding-left: 16px;
    transition: all 0.3s ease;
}

.admin-name {
    letter-spacing: clamp(0.5px, 0.3vw, 1px);
    font-weight: 600;
    font-family: 'ai_01', 'ub';
    font-size: clamp(15px, 1.5vw, 18px);
    color: #1e293b;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.admin-role {
    font-family: 'ai_01';
    font-size: clamp(14px, 1.5vw, 18px);
    color: #64748b;
    font-weight: 400;
    letter-spacing: 0.2px;
    white-space: nowrap;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

/* ============================================================
   ЧАСЫ
   ============================================================ */

.clock {
    font-size: clamp(18px, 2.7vw, 32px);
    font-weight: 500;
    font-family: 'd7m', sans-serif;  font-family: 'ai_01';
    color: #1e293b;
    letter-spacing: clamp(1px, 0.3vw, 4px);
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
    user-select: none;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================================
   КНОПКА ВЫХОДА
   ============================================================ */

.logout-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.logout-btn i {
    color: #e11d48;
    font-size: 24px;
    transition: color 0.2s;
}

.logout-btn:hover {
    background: transparent;
    border: none;
}

.logout-btn:hover i {
    color: #94a3b8;
}

/* ============================================================
   МЕДИА-ЗАПРОС: СКРЫВАЕМ ПРИ ШИРИНЕ < 750px
   ============================================================ */

@media (max-width: 750px) {
    .admin-info {
        display: none !important;
        /* Скрываем имя и роль */
    }

    .clock {
        display: none !important;
        /* Скрываем часы */
    }
}


        /* ============================================================
               ЦЕНТРАЛЬНЫЙ КОНТЕНТ — улучшенный фон
               ============================================================ */

        /* Центральная область с контентом — скроллится */
        .content-area {
            flex: 1;
            /* Занимает всё свободное место */
            overflow-y: auto;
            /* Скролл по вертикали */
            overflow-x: hidden;
            /* Убираем горизонтальный скролл */
            padding: 28px 32px 40px 32px;
            /* Внутренние отступы */
            /*
                    Улучшенный фон: градиент + радиальные градиенты для объёма
                    Создаёт эффект глубины, как в лучших студиях
                */
            background:
                /* Лёгкое свечение слева сверху (голубое) */
                radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
                /* Лёгкое свечение справа снизу (красное) */
                radial-gradient(circle at 90% 80%, rgba(225, 29, 72, 0.03) 0%, transparent 50%),
                /* Центральное свечение (голубое) */
                radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.02) 0%, transparent 70%),
                /* Основной градиент от светло-голубого к белому */
                linear-gradient(135deg, #f0f7ff 0%, #fafcff 50%, #f8fafc 100%);
            background-attachment: fixed;
            /* Фон фиксирован при скролле */
        }

        /* Скрываем полосу прокрутки в центральном контенте для Chrome/Safari */
        .content-area::-webkit-scrollbar {
            width: 0;
            /* Ширина 0 */
            display: none;
            /* Скрываем */
        }

        /* Скрываем полосу прокрутки для Firefox */
        .content-area {
            scrollbar-width: none;
            /* Убираем скролл */
            -ms-overflow-style: none;
            /* Убираем скролл для IE/Edge */
        }

        /* ============================================================
               ЗАГОЛОВОК РАЗДЕЛА
               ============================================================ */

        /* Заголовок текущего раздела */
       .section-title {     font-family: 'ai_01';
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: #0f172a;
    letter-spacing: clamp(0.5px, 0.2vw, 1.5px);
    border-left: clamp(4px, 0.5vw, 6px) solid #3b82f6;
    padding-left: clamp(12px, 2vw, 24px);
    margin-bottom: clamp(16px, 2.5vw, 28px);
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
        /* ============================================================
               КОНТЕЙНЕР СОДЕРЖМОГО
               ============================================================ */

        /* Карточка с содержимым — белая, полупрозрачная, с тенью */
        .section-content {
            background: rgba(255, 255, 255, 0.92);
            /* Полупрозрачный белый фон */
            backdrop-filter: blur(4px);
            /* Лёгкое размытие фона за карточкой */
            border-radius: 20px;
            /* Скругление углов */
            padding: 28px 30px;
            /* Внутренние отступы */
            box-shadow:
                0 4px 20px rgba(0, 0, 0, 0.04),
                /* Мягкая тень */
                0 1px 3px rgba(0, 0, 0, 0.02);
            /* Лёгкая тень */
            border: 1px solid rgba(255, 255, 255, 0.6);
            /* Полупрозрачная белая рамка */
            //max-width: 1000px;
            /* Ограничиваем ширину для читаемости */
            transition: all 0.2s ease;
            /* Плавное изменение */
        }

        /* Стили для параграфов внутри содержимого */
        .section-content p {
            color: #334155;
            /* Тёмно-серый цвет */
            line-height: 1.7;
            /* Межстрочный интервал */
            margin-bottom: 18px;
            /* Отступ снизу */
            font-size: 15px;
            /* Размер шрифта */
        }

        /* ============================================================
               КНОПКА "НАВЕРХ" с КРАСНЫМ ПОЛУМЕСЯЦЕМ
               ПОЯВЛЯЕТСЯ ТОЛЬКО ПР ПРОКРУТКЕ ВНЗ
               ============================================================ */

        /* Кнопка с полумесяцем — появляется при скролле */
        .scroll-top-btn {
            position: fixed;
            /* Фиксированное позиционирование */
            bottom: 20px;
            /* Отступ снизу */
            right: 20px;
            /* Отступ справа */
            width: 56px;
            /* Ширина кнопки */
            height: 56px;
            /* Высота кнопки */
            border-radius: 50%;
            /* Круглая форма */
            background: transparent;
            /* Прозрачный фон */
            color: #e11d48;
            /* Красный цвет */
            border: none;
            /* Без рамки */
            cursor: pointer;
            /* Курсор-указатель */
            font-size: 34px;
            /* Размер иконки */
            display: flex;
            /* Flex для центрирования */
            align-items: center;
            justify-content: center;
            z-index: 50;
            /* Поверх всего */
            opacity: 0;
            /* По умолчанию скрыта */
            pointer-events: none;
            /* Неактивна, пока не появится */
            transition: opacity 0.4s ease, transform 0.4s ease;
            /* Плавное появление */
            transform: translateY(20px);
            /* Смещена вниз */
            box-shadow: none;
            /* Без тени */
            background: none;
            /* Без фона */
            animation: tiltMoon 4s ease-in-out infinite;
            /* Анимация наклона */
            transform-origin: center center;
            /* Вращение вокруг центра */
        }

        /* Класс для видимой кнопки — появляется при скролле */
        .scroll-top-btn.visible {
            opacity: 1;
            /* Полная видимость */
            transform: translateY(0);
            /* Без смещения */
            pointer-events: auto;
            /* Становится активной */
        }

        /* Полумесяц внутри кнопки — красный */
        .scroll-top-btn i {
            font-size: 34px;
            /* Размер иконки */
            color: #e11d48;
            /* Красный цвет */
            transition: none;
            /* Без анимации при наведении */
        }

        /* Убираем все эффекты при наведении на кнопку */
        .scroll-top-btn:hover {
            transform: none;
            /* Не меняем трансформацию */
            background: transparent;
            /* Прозрачный фон */
            box-shadow: none;
            /* Без тени */
            color: #e11d48;
            /* Красный цвет */
        }

        /* Убираем эффекты при наведении на иконку внутри кнопки */
        .scroll-top-btn:hover i {
            color: #e11d48;
            /* Красный цвет */
            transform: none;
            /* Не меняем размер */
        }

        /*
                АНМАЦЯ НАКЛОНА: полумесяц стоит на месте и плавно наклоняется
                от -15° до 15° и обратно. Длительность 4 секунды.
                transform-origin: center — вращение вокруг центра.
                Очень плавное, едва заметное покачивание.
            */
        @keyframes tiltMoon {
            0% {
                transform: rotate(-15deg);
                /* Начальное положение — наклон влево */
            }
            50% {
                transform: rotate(15deg);
                /* Середина — наклон вправо */
            }
            100% {
                transform: rotate(-15deg);
                /* Конец — возврат влево */
            }
        }

        /*
            ============================================================
            АДАПТВНОСТЬ БЕЗ МЕДА-ЗАПРОСОВ
            спользуем гибкие единицы (%, vw, vh, em, rem, fr, flex, auto).
            Все элементы уже адаптивны благодаря:
            - flex-контейнерам с wrap
            - относительным единицам для отступов
            - auto-размерам
            - min-width / max-width
            - aspect-ratio для иконок
            ============================================================
        */


        /* ============================================================
   ЗАТЕМНЕНИЕ ЭКРАНА (ОВЕРЛЕЙ) — БЕЗ ТЕКСТА
   ============================================================ */

/* Затемняющий слой — поверх центрального контента */
.overlay {
    position: fixed;
    /* Фиксированное позиционирование */

    /* Адаптивное позиционирование */
    top: clamp(60px, 8vh, 84px);
    /* Высота верхней панели: от 60px до 84px */

    left: clamp(64px, 8vw, 76px);
    /* Ширина боковой панели: от 64px до 76px */

    /* Адаптивные ширина и высота */
    width: calc(100% - clamp(64px, 8vw, 76px));
    /* Ширина = весь экран минус боковая панель */

    height: calc(100dvh - clamp(60px, 8vh, 84px));
    /* Высота = весь экран минус верхняя панель */

    background: rgba(0, 0, 0, 0.93);
    /* Тёмный полупрозрачный фон */

    z-index: 50;
    /* Поверх центрального контента */

    display: none;
    /* По умолчанию скрыт */

    pointer-events: auto;
    /* Блокирует клики на контент */

    opacity: 0;
    /* Начинаем с прозрачности 0 */

    transition: opacity 0.3s ease;
    /* Плавное появление */
}

/* Когда оверлей активен — показываем */
.overlay.active {
    display: block;
    opacity: 1;
}

/* ============================================================
   КОГДА БОКОВАЯ ПАНЕЛЬ СКРЫТА — ОВЕРЛЕЙ НА ВЕСЬ ЭКРАН
   ============================================================ */

.sidebar.hidden ~ .main-area .overlay {
    left: 0;
    /* Убираем отступ слева */
    width: 100%;
    /* Растягиваем на всю ширину */
}

/* ============================================================
   БЛОКИРОВКА КОНТЕНТА ПРИ АКТИВНОМ ОВЕРЛЕЕ
   ============================================================ */

/* Когда оверлей активен — запрещаем выделение и клики */
.overlay.active ~ .section-content,
.overlay.active ~ .section-title {
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    /* Блокируем все клики */
}

/* Делаем содержимое размытым, когда оверлей активен */
.overlay.active ~ .section-content {
    filter: blur(4px);
    transition: filter 0.3s ease;
}


/* ============================================================
   РАЗДЕЛ "ПЕРСОНАЛ" — ОПТИМИЗИРОВАННЫЙ РАЗМЕР
   ============================================================ */

/* ============================================================
   ЗАГОЛОВКИ
   ============================================================ */
.page-title {
    font-size: clamp(22px, 2.5vw, 38px);
    font-weight: 700;
    color: #0f172a;
    border-left: clamp(4px, 0.4vw, 6px) solid #3b82f6;
    padding-left: clamp(14px, 1.5vw, 24px);
    margin-bottom: clamp(4px, 0.4vh, 8px);
}

.page-desc {
    font-size: clamp(15px, 1.2vw, 20px);
    color: #64748b;
    padding-left: clamp(14px, 1.5vw, 24px);
    margin-bottom: clamp(16px, 2vh, 32px);
}

/* ============================================================
   ПАНЕЛЬ ИНСТРУМЕНТОВ
   ============================================================ */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(10px, 1vw, 18px);
   margin-bottom: clamp(20px, 2.5vh, 40px);
    padding: 0 clamp(14px, 1.5vw, 24px);
}

.add-btn {
    display: inline-flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 10px);
    padding: clamp(10px, 0.8vw, 16px) clamp(18px, 1.8vw, 32px);
    font-size: clamp(14px, 1.1vw, 20px);
    font-weight: 600;
    border: none;
    border-radius: clamp(8px, 0.8vw, 14px);
    background: #3b82f6;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2);
    white-space: nowrap;
}

.add-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.35);
}

.add-btn i {
    font-size: clamp(15px, 1.1vw, 22px);
}

.toolbar-count {  font-family: 'ai_01';
    font-size: clamp(14px, 1.2vw, 18px);
    color: #94a3b8;
    font-weight: 500;
}

/* ============================================================
   ТАБЛИЦА (НА БОЛЬШИХ ЭКРАНАХ)
   ============================================================ */
.staff-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: clamp(10px, 1vw, 16px);
    border: 1px solid #e9edf2;
    background: white;
    width: 100%;
    padding: 0 clamp(14px, 1.5vw, 24px);
}

.staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(14px, 1.1vw, 18px);
    background: white;
    min-width: 600px;
    /* Чтобы не сжималась на больших */
}

/* Скрываем заголовки таблицы */
.staff-table thead {
    display: none;
}

.staff-table td {
    padding: clamp(10px, 0.8vw, 16px) clamp(10px, 1vw, 20px);
    border-bottom: 1px solid #e9edf2;
    vertical-align: middle;
    color: #1e293b;
}

.staff-table tbody tr:last-child td {
    border-bottom: none;
}

.staff-table tbody tr:hover {
    background: #f8fafc;
}

/* ============================================================
   ИМЯ + АВАТАР
   ============================================================ */
.staff-name {   font-family: 'ai_01';
    display: flex;
    align-items: center;
    gap: clamp(10px, 0.8vw, 16px);
    font-weight: 600;
    font-size: clamp(14px, 1.2vw, 22px);
    white-space: nowrap;
}

.staff-avatar {
    width: clamp(32px, 2.5vw, 44px);
    height: clamp(32px, 2.5vw, 44px);
    font-size: clamp(14px, 1vw, 20px);
    border-radius: 50%;
    background: #eef2ff;
    color: #3b82f6;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ============================================================
   ЛОГИН
   ============================================================ */
.staff-login {
    font-size: clamp(13px, 1.1vw, 18px);
   font-family: 'ai_01';
    color: #64748b;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   ДОЛЖНОСТЬ
   ============================================================ */
.staff-role {  font-family: 'ai_01';
    display: inline-block;
    padding: clamp(4px, 0.4vw, 8px) clamp(12px, 1vw, 20px);
    font-size: clamp(12px, 0.9vw, 18px);
    border-radius: 30px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================================
   СОСТОЯНИЕ
   ============================================================ */
.staff-status {   font-family: 'ai_01';
    display: inline-block;
    padding: clamp(4px, 0.4vw, 8px) clamp(12px, 1vw, 20px);
    font-size: clamp(12px, 0.9vw, 18px);
    border-radius: 30px;
    font-weight: 600;
    white-space: nowrap;
}

.staff-status.status-active {
    background: #dcfce7;
    color: #166534;
}

.staff-status.status-paused {
    background: #fef3c7;
    color: #92400e;
}

/* ============================================================
   КНОПКИ ДЕЙСТВИЙ
   ============================================================ */
.staff-actions {
    display: flex;
    gap: clamp(4px, 0.4vw, 8px);
    flex-wrap: nowrap;
}

.staff-actions button {
    width: clamp(30px, 2.5vw, 40px);
    height: clamp(30px, 2.5vw, 40px);
    font-size: clamp(14px, 1vw, 18px);
    border: none;
    border-radius: clamp(6px, 0.6vw, 10px);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.staff-actions button:hover {
    background: #f1f5f9;
    color: #3b82f6;
    transform: scale(1.05);
}

.staff-actions .btn-edit:hover {
    background: #eef2ff;
    color: #3b82f6;
}

.staff-actions .btn-toggle:hover {
    background: #fef3c7;
    color: #d97706;
}

/* ============================================================
   АДАПТАЦИЯ ДЛЯ МАЛЕНЬКИХ ЭКРАНОВ (КАРТОЧКИ)
   ============================================================ */
@media (max-width: 950px) {
    .staff-table-wrapper {
        padding: 0;
        border: none;
        background: transparent;
        overflow-x: visible;
    }

    .staff-table {
        min-width: unset;
    }

    .staff-table,
    .staff-table tbody,
    .staff-table tr,
    .staff-table td {
        display: block;
        width: 100%;
    }

    .staff-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: clamp(14px, 2vw, 20px);
        margin-bottom: clamp(10px, 1.2vw, 16px);
        background: white;
        border-radius: clamp(10px, 1.2vw, 16px);
        border: 1px solid #e9edf2;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
        gap: clamp(6px, 0.8vw, 12px);
    }

    .staff-table tbody tr:hover {
        background: white;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }

    .staff-table td {
        border: none;
        padding: 0;
        display: flex;
        align-items: center;
        gap: clamp(6px, 0.8vw, 12px);
        flex-wrap: wrap;
    }

    /* Имя в карточке */
    .staff-name {
        font-size: clamp(16px, 2vw, 22px);
        gap: clamp(10px, 1.2vw, 16px);
        white-space: normal;
        width: 100%;
    }

    .staff-avatar {
        width: clamp(36px, 4vw, 48px);
        height: clamp(36px, 4vw, 48px);
        font-size: clamp(14px, 1.5vw, 20px);
    }

    /* Логин, должность, состояние — в одну строку */
    .staff-login,
    .staff-role,
    .staff-status {
        display: inline-flex;
        font-size: clamp(13px, 1.2vw, 17px);
        padding: clamp(3px, 0.4vw, 6px) clamp(10px, 1vw, 16px);
        margin: 0;
    }

    .staff-login {
        color: #64748b;
        font-family: 'ai_01';
        background: transparent;
        padding: 0;
        font-weight: 500;
    }

    /* Действия — отдельная строка */
    .staff-actions {
        width: 100%;
        justify-content: flex-start;
        gap: clamp(6px, 0.8vw, 10px);
        padding-top: clamp(6px, 0.8vw, 12px);
        border-top: 1px solid #e9edf2;
    }

    .staff-actions button {
        width: clamp(32px, 3.5vw, 42px);
        height: clamp(32px, 3.5vw, 42px);
        font-size: clamp(14px, 1.4vw, 18px);
    }

    /* Панель инструментов на маленьких экранах */
    .toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: clamp(8px, 1vw, 14px);
    }

    .add-btn {
        font-size: clamp(13px, 1.2vw, 16px);
        padding: clamp(8px, 0.8vw, 14px) clamp(14px, 1.5vw, 24px);
        width: auto;
        justify-content: center;
    }
}

/* Очень маленькие экраны — панель инструментов в колонку */
@media (max-width: 480px) {
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .add-btn {
        width: 100%;
        justify-content: center;
    }

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


/* ============================================================
   ФОРМА ДОБАВЛЕНИЯ СОТРУДНИКА (ВСТРОЕННАЯ)
   ============================================================ */

/* Контейнер формы — появляется при клике */
.staff-form-container {
   display: block;
    /* По умолчанию скрыта */
    background: white;
    border-radius: 16px;
    padding: clamp(20px, 2.5vw, 36px);
    margin: 0 clamp(14px, 1.5vw, 24px) clamp(20px, 2.5vh, 40px);
    border: 1px solid #e9edf2;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    animation: formSlideDown 0.3s ease;
}

/* Анимация появления */
@keyframes formSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Когда форма активна — показываем */
.staff-form-container.active {
    display: block;
}

/* ============================================================
   ЗАГОЛОВОК ФОРМЫ
   ============================================================ */
.staff-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f1f5f9;
}

.staff-form-header h3 {font-family: 'ai_01';
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-form-header h3 i {
    color: #3b82f6;
}

.staff-form-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 22px;
    cursor: pointer;
    transition: 0.2s;
    padding: 4px 10px;
    border-radius: 8px;
}

.staff-form-close:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ============================================================
   ПОЛЯ ФОРМЫ
   ============================================================ */
.staff-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label { font-family: 'ai_01';
    font-size: clamp(13px, 0.9vw, 15px);
    font-weight: 600;
    color: #1e293b;
}

.form-group input,
.form-group select {font-family: 'ai_01';
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: clamp(14px, 1vw, 17px);
    transition: 0.2s;
    background: #f8fafc;
    color: #1e293b;
    width: 100%;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-group input::placeholder {
    color: #94a3b8;
}

/* ============================================================
   КРАСИВЫЙ СЕЛЕКТ
   ============================================================ */
.form-group select {
    padding: 12px 44px 12px 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    cursor: pointer;
}

.form-group select:hover {
    border-color: #94a3b8;
}

.form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-group select option {
    padding: 10px 16px;
    font-size: clamp(14px, 1vw, 17px);
    background: white;
    color: #1e293b;
}

.form-group select option:checked {
    background: #3b82f6;
    color: white;
}

/* ============================================================
   КНОПКИ ФОРМЫ
   ============================================================ */
.staff-form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding-top: 16px;
    border-top: 2px solid #f1f5f9;
}

.btn-cancel,
.btn-submit {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    flex: 1;
}

.btn-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-submit {
    background: #3b82f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-submit:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.btn-submit i {
    font-size: 16px;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 600px) {
    .staff-form-row {
        grid-template-columns: 1fr;
    }

    .staff-form-container {
        padding: 16px;
        margin: 0 8px 16px;
    }

    .staff-form-actions {
        flex-direction: column;
    }

    .btn-cancel,
    .btn-submit {
        width: 100%;
        padding: 14px;
    }

    .staff-form-header h3 {
        font-size: 18px;
    }
}


/* ============================================================
   НИЖНЯЯ КНОПКА "ДОБАВИТЬ СОТРУДНИКА"
   ============================================================ */

.toolbar-bottom {
    display: flex;
    //justify-content: center;
    padding: clamp(12px, 1.5vw, 24px) clamp(16px, 2vw, 28px);
    margin-top: clamp(8px, 1vw, 16px);
}

.toolbar-bottom .add-btn {
    width: auto;
    min-width: 220px;
    justify-content: center;
}

/* ============================================================
   НИЖНЯЯ ФОРМА — ОТСТУПЫ
   ============================================================ */

#addStaffFormContainerBottom {
    margin-bottom: clamp(20px, 3vh, 40px);
}



/* ============================================================
   СТАТУСНАЯ ПАНЕЛЬ (универсальный компонент)
   ============================================================ */

.status-panel {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 1.5vw, 24px);
    background: #f8fafc;
    border-radius: clamp(12px, 1.5vw, 16px);
    padding: clamp(16px, 2vw, 28px) clamp(20px, 2.5vw, 36px);
    border: 1px solid #e9edf2;
    margin: 0 clamp(14px, 1.5vw, 24px) clamp(20px, 2.5vh, 36px);
    transition: all 0.2s ease;
}

.status-panel:hover {
    background: #f1f5f9;
    border-color: #dbe0e8;
}

/* ============================================================
   ИКОНКА
   ============================================================ */
.status-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(40px, 4vw, 56px);
    height: clamp(40px, 4vw, 56px);
    flex-shrink: 0;
    background: #eef2ff;
    border-radius: 50%;
    color: #3b82f6;    font-family: 'ai_01';
    font-size: clamp(20px, 2vw, 28px);
    transition: all 0.2s ease;
}

.status-panel:hover .status-panel-icon {
    background: #dbeafe;
    transform: scale(1.05);
}

/* ============================================================
   СОДЕРЖИМОЕ
   ============================================================ */
.status-panel-content {
    flex: 1;
    min-width: 0;
    /* Чтобы текст переносился */
}

.status-panel-title {     font-family: 'ai_01';
    font-size: clamp(15px, 1.4vw, 22px);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: clamp(4px, 0.4vw, 8px);
    letter-spacing: -0.2px;
}

.status-panel-text {   font-family: 'ai_01';
    font-size: clamp(14px, 1.2vw, 19px);
    font-weight: 400;
    color: #475569;
    line-height: 1.6;
    word-wrap: break-word;
}

/* ============================================================
   ВАРИАНТЫ ЦВЕТОВ (для разных статусов)
   ============================================================ */

/* Информация (синий) — по умолчанию */
.status-panel.info .status-panel-icon {
    background: #eef2ff;
    color: #3b82f6;
}

/* Успех (зелёный) */
.status-panel.success .status-panel-icon {
    background: #dcfce7;
    color: #22c55e;
}

.status-panel.success {
    border-left: 4px solid #22c55e;
}

/* Предупреждение (жёлтый) */
.status-panel.warning .status-panel-icon {
    background: #fef3c7;
    color: #eab308;
}

.status-panel.warning {
    border-left: 4px solid #eab308;
}

/* Ошибка (красный) */
.status-panel.error .status-panel-icon {
    background: #fee2e2;
    color: #ef4444;
}

.status-panel.error {
    border-left: 4px solid #ef4444;
}

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width: 600px) {
    .status-panel {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: clamp(14px, 2vw, 20px);
        margin: 0 8px clamp(16px, 2vh, 24px);
    }

    .status-panel-icon {
        width: clamp(44px, 10vw, 56px);
        height: clamp(44px, 10vw, 56px);
        font-size: clamp(22px, 5vw, 28px);
    }

    .status-panel-title {
        font-size: clamp(16px, 4vw, 22px);
        text-align: center;
    }

    .status-panel-text {
        font-size: clamp(14px, 3.5vw, 19px);
        text-align: center;
    }
}


/* ============================================================
   ИНСТРУКЦИЯ — ПОЛНОСТЬЮ АДАПТИВНАЯ (БЕЗ МЕДИА-ЗАПРОСОВ)
   ============================================================ */

.instruction {
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.4vw, 10px);
    padding: clamp(8px, 1vw, 18px) clamp(12px, 1.5vw, 28px);
    margin: 0 clamp(8px, 1.5vw, 28px) clamp(12px, 1.5vh, 24px);
    background: #f8fafc;
    border-radius: clamp(8px, 0.8vw, 14px);
    border-left: clamp(3px, 0.3vw, 5px) solid #3b82f6;
}

.instruction p {
    display: flex;
    align-items: flex-start;
    gap: clamp(6px, 0.6vw, 12px);
    font-size: clamp(11px, 0.9vw, 16px);
    font-weight: 400;
    color: #475569;
    line-height: 1.5;
    margin: 0;
    flex-wrap: wrap;
    /* 👈 Автоматический перенос на маленьких экранах */
    word-break: break-word;
}

.instruction p i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: clamp(12px, 0.9vw, 17px);
}

.instruction .status-active {
    font-weight: 600;
    color: #166534;
    background: #dcfce7;
    padding: 0px clamp(4px, 0.4vw, 10px);
    border-radius: 4px;
    white-space: nowrap;
}

.instruction .status-paused {
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    padding: 0px clamp(4px, 0.4vw, 10px);
    border-radius: 4px;
    white-space: nowrap;
}

/* ============================================================
   ДОПОЛНИТЕЛЬНАЯ АДАПТАЦИЯ ДЛЯ ОЧЕНЬ МАЛЕНЬКИХ ЭКРАНОВ
   (через clamp, без медиа-запросов)
   ============================================================ */

.instruction p span {
    display: inline;
    /* Текст переносится естественно */
}

/* Гарантируем, что иконки не разъезжаются */
.instruction p i {
    min-width: clamp(16px, 1.5vw, 22px);
    text-align: center;
}

/* ============================================================
   РАЗДЕЛ "ШАБЛОНЫ ЛЕЧЕНИЯ"
   ============================================================ */

.template-card {
    background: white;
    border-radius: clamp(10px, 1.2vw, 16px);
    border: 1px solid #e9edf2;
    margin: 0 clamp(8px, 1.5vw, 24px) clamp(16px, 2vh, 24px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
}

.template-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.template-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 16px);
    padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.8vw, 24px);
    background: #f8fafc;
    border-bottom: 1px solid #e9edf2;
}

.template-card-title {
    display: flex;
    align-items: center;
    gap: clamp(6px, 0.6vw, 12px);
    font-size: clamp(16px, 1.4vw, 22px);
    font-family: 'ai_01';
    font-weight: 700;
    color: #0f172a;
    flex-wrap: wrap;
}

.template-card-code {
    font-size: clamp(11px, 0.8vw, 14px);
    font-family: 'ai_01';
    color: #94a3b8;
    font-weight: 500;
    background: #f1f5f9;
    padding: clamp(1px, 0.2vw, 4px) clamp(6px, 0.6vw, 12px);
    border-radius: 4px;
}

.template-card-actions {
    display: flex;
    gap: clamp(4px, 0.5vw, 8px);
    flex-wrap: wrap;
}

.template-card-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3vw, 42px);
    height: clamp(32px, 3vw, 42px);
    border: none;
    border-radius: clamp(6px, 0.6vw, 10px);
    background: transparent;
    color: #94a3b8;
    font-size: clamp(14px, 1.1vw, 18px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-card-actions button:hover {
    background: #f1f5f9;
    transform: scale(1.05);
}

.template-btn-collapse:hover {
    background: #eef2ff;
    color: #3b82f6;
}

.template-btn-edit:hover {
    background: #fef3c7;
    color: #d97706;
}

.template-btn-send:hover {
    background: #dcfce7;
    color: #22c55e;
}

.template-card-body {
    padding: clamp(14px, 1.5vw, 22px) clamp(16px, 1.8vw, 24px);
}

.template-description {
    font-size: clamp(14px, 1.2vw, 20px) !important;
    font-family: 'ai_01';
    color: #334155;
    line-height: 1.7;
}

.template-description,
.template-description p {
    font-size: clamp(14px, 1.2vw, 20px) !important;
}

.template-description p {
    margin: 0 0 clamp(8px, 0.8vw, 14px) 0;
}

.template-description b {
    color: #0f172a;
    font-weight: 600;
}

.template-description i {
    color: #475569;
    font-style: italic;
}

.template-description u {
    text-decoration: underline;
    text-decoration-color: #3b82f6;
    text-underline-offset: 2px;
}

/* ============================================================
   СВЁРНУТЫЙ ШАБЛОН
   ============================================================ */

/* Скрываем тело карточки у свёрнутых шаблонов */
.template-card.collapsed .template-card-body {
    display: none;
}

/* Адаптивность без медиа-запросов */
.template-card-title {
    font-size: clamp(15px, 2.2vw, 22px);
}

.template-card-actions button {
    width: clamp(30px, 4vw, 42px);
    height: clamp(30px, 4vw, 42px);
    font-size: clamp(13px, 1.6vw, 18px);
}

.template-description {
    font-size: clamp(13px, 1.8vw, 17px);
}