/* Wave 1 task 1: Inter + Manrope (redesign 2026-04-23) */
body,
button,
input,
select,
textarea {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

h1, h2, h3, h4, h5, h6,
.header__logo,
.block__title,
.modal-section__title {
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--gt-h1); line-height: var(--gt-lh-h1); }
h2 { font-size: var(--gt-h2); line-height: var(--gt-lh-h2); }
h3 { font-size: var(--gt-h3); line-height: var(--gt-lh-h3); }
h4 { font-size: var(--gt-h4); line-height: var(--gt-lh-h4); }
h5 { font-size: var(--gt-h5); line-height: var(--gt-lh-h5); }
h6 { font-size: var(--gt-h6); line-height: var(--gt-lh-h6); }

/* Dark mode: главный переключатель темы на уровне body. */
body {
    background-color: var(--gt-bg);
    color: var(--gt-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.staff__table table .table__setting .option {
    height: auto;
}

.option__link:hover {
    cursor: pointer;
}

.card-body .table-responsive {
    overflow-x: visible;
}


/* Стили для индикаторов загрузки видео */
.upload-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 20px 30px;
    border-radius: 8px;
    z-index: 10000;
    font-size: 16px;
    text-align: center;
}

.upload-loading div {
    margin: 0;
}

.upload-success {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.upload-error {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #f44336;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Анимация для сообщений */
.upload-success,
.upload-error {
    animation: slideInRight 0.3s ease-out;
}


@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Стили для блока прикрепления файлов */
.block-text-add__input--file {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
}

.file-attachment {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.file-preview {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 12px;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.file-icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.file-name {
    flex: 1;
    font-weight: 500;
    color: #333;
}

.file-actions {
    display: flex;
    gap: 8px;
}

.btn-download,
.btn-view {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.2s;
}

.btn-download {
    background: #007bff;
    color: white;
}

.btn-download:hover {
    background: #0056b3;
    color: white;
    text-decoration: none;
}

.btn-view {
    background: #6c757d;
    color: white;
}

.btn-view:hover {
    background: #545b62;
    color: white;
    text-decoration: none;
}

.file-upload {
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    position: relative;
}

.file__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #6c757d;
    font-size: 14px;
}

.upload-icon {
    width: 32px;
    height: 32px;
    opacity: 0.6;
}

.file-upload:hover {
    border-color: #007bff;
    background-color: #f8f9fa;
}

.file-upload:hover .file__text {
    color: #007bff;
}


/* Стили для кнопки создания приглашения */
.staff__add {
    width: auto;
    padding: 10px 20px;
}


/* фикс вёрстки на главной странице */
.main .banner__container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.main .banner {
    margin-bottom: 20px;
}

.main .row__content .item {
    margin-top: 0px;
}

.main .banner {
    position: relative;
    /* Сброс фоновых изображений и стилей */
    background: none;
}

/* Override and style the avatar save button so it fits design */
.cart-info form .cart-info__button {
    background: linear-gradient(94.35deg, #BDF565 4.54%, #09C2C3 96.03%);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 40px;
    border-radius: 36px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #fff;
    border: none;
    transition: all 0.3s ease-in-out;
}

.cart-info form .cart-info__button:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(80, 213, 98, 0.774);
}

/* -------------------------------
   Стилизация полей Email и Даты
   на странице создания приглашения
--------------------------------*/
.staff .text-input {
    display: block;
    height: 42px;
    margin-bottom: 16px;
}

.staff .text-input .input {
    position: relative;
}

/* Базовый вид поля */
.staff .text-input .input input {
    display: flex;
    width: 100%;
    padding: 12px 24px;
    border: 1px solid #c7ddd8;
    /* var(--color-greyC) */
    border-radius: 24px;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #024A46;
    /* var(--color-green) */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Состояние readonly / disabled */
.staff .text-input .input input:disabled,
.staff .text-input .input input[readonly] {
    background-color: #f8f9fa;
}

/* Плавающий label */
.staff .text-input .text {
    position: absolute;
    left: 25px;
    top: 8px;
    transition: all 0.3s ease;
    pointer-events: none;
    color: #a9b6aa;
    background: #ffffff;
    padding: 0 4px;
}

.staff .text-input .input input:not(:placeholder-shown)+.text,
.staff .text-input .input input:focus+.text {
    top: -12px;
    font-size: 12px;
}

/* Доп. правый отступ под иконку календаря для поля даты */
.staff .text-input.date-input .input input {
    padding-right: 40px;
}

/* Стилизация иконки календаря (WebKit) */
.staff .text-input.date-input .input input::-webkit-calendar-picker-indicator {
    filter: invert(60%);
    cursor: pointer;
}

/* Стили для кнопок действий в секциях */
.option-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 10px;
}

.option-wrapper:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.section-actions {
    display: flex;
    gap: 8px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.option-wrapper:hover .section-actions {
    opacity: 1;
}

.section-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.section-action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.section-action-btn.edit-section {
    color: #666;
}

.section-action-btn.edit-section:hover {
    color: #333;
}

.section-action-btn.delete-section {
    color: #dc3545;
}

.section-action-btn.delete-section:hover {
    color: #c82333;
    background-color: rgba(220, 53, 69, 0.1);
}

/* Стили для модальных окон секций */
.modal-delete__content {
    background: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    position: relative;
}

.modal-delete__title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
}

.modal-delete__message {
    margin-bottom: 20px;
    line-height: 1.5;
}

.modal-delete__message p {
    margin-bottom: 10px;
}

.modal-delete__options {
    margin-bottom: 20px;
}

.label-radio {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.fake-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
}

.label-radio input[type="radio"]:checked+.fake-radio::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #BDF565;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.label-radio input[type="radio"] {
    display: none;
}

.transfer-section-wrapper {
    margin-left: 30px;
    margin-bottom: 10px;
}

.form-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
}

.button--delete {
    background: #dc3545 !important;
    color: white;
}

.button--delete:hover {
    background: #c82333 !important;
}

/* Повышаем приоритет отображения модальных окон над подложкой раскрытого меню */
.modal-section,
.modal-delete {
    z-index: 10000001 !important;
}

/* Стили для кнопок «Скачать» и «Открыть» в заданиях */
.file_task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: 36px;
    background: linear-gradient(94.35deg, #BDF565 4.54%, #09C2C3 96.03%);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.006em;
    text-decoration: none;
    border: none;
    transition: all 0.3s ease-in-out;
}

.file_task:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(80, 213, 98, 0.774);
    opacity: 0.9;
}

/* Стилизация формы создания филиала */
.list-tasks__container.create form {
    background: #ffffff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 20px auto;
}

.list-tasks__container.create div.input {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
}

.list-tasks__container.create div.input .text1 {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #024A46;
    margin-bottom: 8px;
    position: absolute;
    left: 25px;
    top: -8px;
    background: #ffffff;
    padding: 0 4px;
    z-index: 1;
}

.list-tasks__container.create div.input [type=text] {
    width: 100%;
    padding: 12px 24px;
    border: 1px solid #c7ddd8;
    border-radius: 24px;
    background: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #024A46;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.list-tasks__container.create div.input [type=text]:focus {
    border-color: #BDF565;
    box-shadow: 0 0 0 3px rgba(189, 245, 101, 0.1);
}

.list-tasks__container.create div.input [type=text]:focus+.text1 {
    color: #BDF565;
}

.list-tasks__head.center {
    justify-content: center;
}

.list-tasks__container.create .list-tasks__title {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #024A46;
    text-align: center;
}

.list-tasks__container.create .buttons {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* Fix: поднять стрелку "Назад" ближе к верхнему краю */
.checking-task__main>.button-back,
.module__main>.button-back {
    margin-bottom: 10px;
    /* Смещаем вверх */
    display: flex;
    padding: 10px;
    width: fit-content;
}

.table-sm>:not(caption)>*>* {
    overflow-wrap: anywhere;
}

/* -------------------------------
   Кнопка "Выбрать файл" в модалке выбора аватарки
--------------------------------*/
.my-image-input {
    position: relative;
}

/* Скрываем стандартный инпут файла */
.my-image-input .download-video__input {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Стилизованная кнопка выбора файла */
.file-select-btn {
    background: linear-gradient(94.35deg, #BDF565 4.54%, #09C2C3 96.03%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    height: 36px;
    border-radius: 36px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: -0.006em;
    color: #fff;
    border: none;
    transition: all 0.3s ease-in-out;
}

.file-select-btn:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(80, 213, 98, 0.774);
    opacity: 0.9;
}

/* Скрытый input в блоке с загрузкой видео/файла ответа */
.download-video__input {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Fix: высота кнопки выбора обложек */
.modal-create__block--switch .switch-item.active {
    height: 36px;
}

@media (max-width: 768px) {
    .checking-task__wrapper .head {
        display: flex;
        flex-direction: column;
        border-radius: 5px;
        align-items: baseline;
    }
}

/* Fix: стили для видео в заданиях */
.answer-video-wrapper {
    display: flex;
}

.answer-video-wrapper__left {
    flex: 1;
}

.answer-video-wrapper__right {
    flex: 1;
}

@media (max-width: 768px) {
    .answer-video-wrapper {
        flex-direction: column;
    }

    .answer-video-wrapper__left {
        margin-bottom: 20px;
    }
}


.file-task-container {
    display: flex;
    gap: 10px;
    margin: 10px;
}

.file-task-container .file_task { 
    margin-right: 10px;
    margin-bottom: 10px;
}

.next-lesson-container {
    margin: 10px;
}

/* Fix: стили для заголовка в общем блоке */

@media (max-width: 1024px) {
    .list-tasks__inputs {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        height: auto;
    }

    .statistic__inputs {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        height: auto;
    }

    .staff__inputs {
        display: flex;
        flex-direction: column;
        align-items: baseline;
        height: auto;
    }
}



@media (max-width: 768px) {
    .general__head {
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .education .statistic__add {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .education__content .statistic__add[data-name=kurs] {
        margin-left: 0 !important;
    }

    .staff__head {
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .staff__head .staff__add {
        margin-left: 0;
        margin-top: 10px;
    }

    .staff__title {
        margin-bottom: 10px;
    }

    .main .banner__title p {
        font-size: 28px;
    }

    .main .banner__container {
        position: relative;
        order: 1;
        background-color: #024A46;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .main .banner {
        display: flex;
        flex-direction: column;
    }

    .menu-content__head {
        width: unset;
    }

    .list-tasks__table .cell-flex {
        white-space: nowrap;
        gap: 10px;
    }

    .list-tasks__table .cell-flex .svgs {
        flex-shrink: 0;
    }
}

/* ============================================================
   Wave 2 — Visible redesign (2026-04-23)
   Задача 1: Новый hero лендинга (gradient-mesh + H1 + floating-mockup)
   ============================================================ */

:root {
    --gt-white: #FFFFFF;
    --gt-black: #0A0A0B;
    --gt-gray-50:  #FAFAFA;
    --gt-gray-100: #F4F4F5;
    --gt-gray-200: #E4E4E7;
    --gt-gray-400: #A1A1AA;
    --gt-gray-600: #52525B;
    --gt-gray-900: #18181B;

    --gt-accent:       #7B61FF;
    --gt-accent-hover: #6B51F0;
    --gt-accent-soft:  #F3F0FF;
    --gt-accent-alt:   #4F46E5;

    --gt-mesh-1: #F3F0FF;
    --gt-mesh-2: #FDF4FF;
    --gt-mesh-3: #EEF2FF;

    --gt-font-display: 'Manrope', 'Inter', system-ui, -apple-system, sans-serif;
    --gt-font-body:    'Inter', system-ui, -apple-system, sans-serif;

    /* Display scale — hero/marketing titles */
    --gt-display-xl: 80px;
    --gt-display-lg: 56px;
    --gt-display-md: 40px;

    /* Semantic heading scale — all <h1>..<h6> across the site */
    --gt-h1: 48px;
    --gt-h2: 36px;
    --gt-h3: 28px;
    --gt-h4: 22px;
    --gt-h5: 18px;
    --gt-h6: 16px;

    --gt-lh-h1: 1.15;
    --gt-lh-h2: 1.2;
    --gt-lh-h3: 1.25;
    --gt-lh-h4: 1.3;
    --gt-lh-h5: 1.35;
    --gt-lh-h6: 1.4;

    --gt-body: 17px;

    --gt-w-medium: 500;
    --gt-w-semibold: 600;
    --gt-w-bold: 700;

    --gt-ls-hero: -0.03em;
    --gt-ls-heading: -0.02em;

    --gt-lh-hero: 1.05;
    --gt-lh-heading: 1.15;
    --gt-lh-body: 1.55;

    --gt-space-80:  80px;
    --gt-space-120: 120px;
    --gt-space-160: 160px;
    --gt-container-max: 1200px;
    --gt-container-wide: 1320px;

    --gt-r-md:   12px;
    --gt-r-lg:   16px;
    --gt-r-pill: 999px;

    --gt-shadow-soft: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    --gt-shadow-lift: 0 20px 60px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
    --gt-shadow-glow: 0 0 80px rgba(123, 97, 255, 0.30);

    --gt-t-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --gt-t-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================================
       Semantic surface tokens — для dark mode.
       Используй их ВМЕСТО raw --gt-white / --gt-black / --gt-gray-*
       на bg/color/border/shadow у новых компонентов.
       ============================================================ */
    --gt-bg:             #FFFFFF;        /* главный фон страницы */
    --gt-bg-elevated:    #FAFAFA;        /* карточки, модалки — чуть светлее фона */
    --gt-bg-sunken:      #F4F4F5;        /* inputs, tabs — чуть темнее фона */
    --gt-text:           #18181B;        /* основной текст */
    --gt-text-muted:     #52525B;        /* подписи, secondary */
    --gt-text-subtle:    #A1A1AA;        /* labels, placeholder */
    --gt-border:         #E4E4E7;
    --gt-border-subtle:  #F4F4F5;
    --gt-accent-bg:      rgba(123, 97, 255, 0.08);
    --gt-accent-text:    var(--gt-accent);
    --gt-shadow-card:    0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
    --gt-shadow-hover:   0 20px 40px rgba(123, 97, 255, 0.22);
}

/* ============================================================
   Dark mode overrides — активируется через [data-theme="dark"]
   на <html>. JS переключатель в layouts/partials/header.blade.php.
   ============================================================ */
[data-theme="dark"] {
    --gt-bg:             #0A0A0B;
    --gt-bg-elevated:    #151517;
    --gt-bg-sunken:      #1F1F23;
    --gt-text:           #FAFAFA;
    --gt-text-muted:     #A1A1AA;
    --gt-text-subtle:    #71717A;
    --gt-border:         #27272A;
    --gt-border-subtle:  #1F1F23;
    --gt-accent-bg:      rgba(123, 97, 255, 0.18);
    --gt-accent-text:    #9F88FF;
    --gt-shadow-card:    0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
    --gt-shadow-hover:   0 20px 40px rgba(123, 97, 255, 0.45);
    --gt-mesh-1:         #1A1530;
    --gt-mesh-2:         #2A1A35;
    --gt-mesh-3:         #171A30;
}

/* Reset старого .banner — перехватываем корневой класс лендинга */
.main > .banner {
    background: transparent;
    padding: 0;
    margin: 0;
    min-height: auto;
    overflow: visible;
}
.main > .banner > video,
.main > .banner .banner__container {
    display: none !important;
}

.gt-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--gt-space-120);
    padding-bottom: var(--gt-space-120);
    background: var(--gt-bg);
    isolation: isolate;
}

.gt-hero__mesh {
    position: absolute;
    inset: -10%;
    z-index: -2;
    background:
        radial-gradient(55% 40% at 18% 20%, var(--gt-mesh-1) 0%, transparent 60%),
        radial-gradient(45% 40% at 85% 15%, var(--gt-mesh-2) 0%, transparent 60%),
        radial-gradient(50% 50% at 60% 95%, var(--gt-mesh-3) 0%, transparent 65%),
        radial-gradient(40% 30% at 10% 85%, #FEF3C7 0%, transparent 60%);
    filter: blur(40px) saturate(1.05);
    opacity: 0.9;
}

.gt-hero__grain {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.gt-hero__container {
    max-width: var(--gt-container-wide);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.gt-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gt-hero__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    font-family: var(--gt-font-body);
    font-size: 13px;
    font-weight: var(--gt-w-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gt-accent);
    background: var(--gt-accent-soft);
    border-radius: var(--gt-r-pill);
    padding: 6px 14px;
    margin: 0;
}

.gt-hero__title {
    font-family: var(--gt-font-display);
    font-size: var(--gt-display-xl);
    font-weight: var(--gt-w-semibold);
    letter-spacing: var(--gt-ls-hero);
    line-height: var(--gt-lh-hero);
    color: var(--gt-black);
    margin: 0;
}

.gt-hero__accent {
    color: var(--gt-accent);
    background: linear-gradient(120deg, var(--gt-accent) 0%, var(--gt-accent-alt) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.gt-hero__subtitle {
    font-family: var(--gt-font-body);
    font-size: 20px;
    line-height: 1.5;
    color: var(--gt-gray-600);
    max-width: 520px;
    margin: 8px 0 0;
}

.gt-hero__actions {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.gt-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--gt-font-body);
    font-size: 17px;
    font-weight: var(--gt-w-semibold);
    color: var(--gt-white);
    background: var(--gt-accent);
    padding: 16px 32px;
    border-radius: var(--gt-r-pill);
    text-decoration: none;
    transition: transform var(--gt-t-fast), box-shadow var(--gt-t-fast), background var(--gt-t-fast);
    box-shadow: 0 4px 14px rgba(123, 97, 255, 0.32);
}
.gt-hero__cta:hover {
    box-shadow: 0 10px 30px rgba(123, 97, 255, 0.42);
    background: var(--gt-accent-hover);
    color: var(--gt-white);
}
.gt-hero__cta::after {
    content: "→";
    font-weight: var(--gt-w-medium);
    transition: transform var(--gt-t-fast);
}
.gt-hero__cta:hover::after {
    transform: translateX(3px);
}

.gt-hero__cta--ghost {
    background: transparent;
    color: var(--gt-gray-900);
    border: 1px solid rgba(10, 10, 11, 0.12);
    box-shadow: none;
}
.gt-hero__cta--ghost:hover {
    background: var(--gt-white);
    color: var(--gt-black);
    border-color: rgba(10, 10, 11, 0.24);
}

.gt-hero__visual {
    position: relative;
    perspective: 1400px;
}

.gt-hero__visual::before {
    content: "";
    position: absolute;
    inset: -10% -5% -5% -5%;
    background: radial-gradient(closest-side, rgba(123, 97, 255, 0.24), transparent 70%);
    filter: blur(30px);
    z-index: 0;
}

/* CSS-mockup фейкового интерфейса LMS — floating-карточка */
.gt-mockup {
    position: relative;
    z-index: 1;
    background: var(--gt-white);
    border-radius: var(--gt-r-lg);
    box-shadow: var(--gt-shadow-lift);
    border: 1px solid rgba(10, 10, 11, 0.06);
    transform: perspective(1400px) rotateY(-7deg) rotateX(4deg) translateZ(0);
    transform-origin: center;
    overflow: hidden;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gt-mockup:hover {
    transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-4px);
}

.gt-mockup__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: #F8F9FC;
    border-bottom: 1px solid rgba(10, 10, 11, 0.06);
}
.gt-mockup__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E4E4E7;
}
.gt-mockup__dot:nth-child(1) { background: #FF5F57; }
.gt-mockup__dot:nth-child(2) { background: #FEBC2E; }
.gt-mockup__dot:nth-child(3) { background: #28C840; }

.gt-mockup__body {
    padding: 24px;
}

.gt-mockup__title {
    font-family: var(--gt-font-display);
    font-size: 18px;
    font-weight: var(--gt-w-bold);
    color: var(--gt-gray-900);
    margin: 0 0 4px;
    letter-spacing: var(--gt-ls-heading);
}
.gt-mockup__caption {
    font-size: 13px;
    color: var(--gt-gray-400);
    margin: 0 0 20px;
}

.gt-mockup__cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.gt-mockup__card {
    background: var(--gt-white);
    border: 1px solid rgba(10, 10, 11, 0.06);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gt-mockup__thumb {
    height: 56px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--gt-accent) 0%, var(--gt-accent-alt) 100%);
    position: relative;
    overflow: hidden;
}
.gt-mockup__card:nth-child(2) .gt-mockup__thumb {
    background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 100%);
}
.gt-mockup__card:nth-child(3) .gt-mockup__thumb {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
}
.gt-mockup__card:nth-child(4) .gt-mockup__thumb {
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%);
}

.gt-mockup__card-title {
    font-size: 13px;
    font-weight: var(--gt-w-semibold);
    color: var(--gt-gray-900);
    line-height: 1.3;
}
.gt-mockup__meta {
    font-size: 11px;
    color: var(--gt-gray-400);
    margin: 0;
}

.gt-mockup__progress {
    height: 4px;
    background: var(--gt-gray-100);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 4px;
}
.gt-mockup__progress > span {
    display: block;
    height: 100%;
    background: var(--gt-accent);
    border-radius: 999px;
}

.gt-mockup__ai {
    margin-top: 16px;
    padding: 12px 14px;
    background: linear-gradient(120deg, var(--gt-accent-soft) 0%, #FDF4FF 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gt-gray-900);
    border: 1px solid rgba(123, 97, 255, 0.14);
}
.gt-mockup__ai-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--gt-accent);
    color: #fff;
    font-size: 13px;
    flex-shrink: 0;
}

/* Tablet и ноутбуки <1024px — не ломаем 13" */
@media (max-width: 1024px) {
    :root {
        --gt-display-xl: 56px;
        --gt-h1: 40px;
        --gt-h2: 30px;
        --gt-space-120: 80px;
    }
    .gt-hero__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .gt-hero__subtitle {
        font-size: 18px;
    }
    .gt-mockup {
        transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    :root {
        --gt-display-xl: 40px;
        --gt-h1: 32px;
        --gt-h2: 26px;
        --gt-h3: 22px;
    }
    .gt-hero {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .gt-mockup__cards {
        grid-template-columns: 1fr;
    }
}

/* Accessibility: motion-sickness safe */
@media (prefers-reduced-motion: reduce) {
    .gt-mockup,
    .gt-hero__cta,
    .gt-hero__cta::after,
    .gt-bento__card {
        transition: none !important;
        animation: none !important;
    }
    .gt-mockup {
        transform: none;
    }
}

/* ============================================================
   Wave 2 — Задача 2: Bento-сетка «Возможности»
   ============================================================ */

/* Подавляем старую секцию .row с 4 линейными карточками */
.main > .row {
    background: transparent;
    padding: 0;
    margin: 0;
}
.main > .row > .row__container {
    display: none !important;
}

.gt-bento {
    background: var(--gt-white);
    padding-top: var(--gt-space-120);
    padding-bottom: var(--gt-space-120);
    position: relative;
}

.gt-bento__container {
    max-width: var(--gt-container-wide);
    margin: 0 auto;
    padding: 0 24px;
}

.gt-bento__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 56px;
    max-width: 680px;
}

.gt-bento__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    font-family: var(--gt-font-body);
    font-size: 13px;
    font-weight: var(--gt-w-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--gt-accent);
    background: var(--gt-accent-soft);
    border-radius: var(--gt-r-pill);
    padding: 6px 14px;
    margin: 0;
}

.gt-bento__title {
    font-family: var(--gt-font-display);
    font-size: var(--gt-display-lg);
    font-weight: var(--gt-w-semibold);
    letter-spacing: var(--gt-ls-heading);
    line-height: var(--gt-lh-heading);
    color: var(--gt-black);
    margin: 0;
}

.gt-bento__subtitle {
    font-family: var(--gt-font-body);
    font-size: 18px;
    line-height: 1.55;
    color: var(--gt-gray-600);
    margin: 0;
}

.gt-bento__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 16px;
}

.gt-bento__card {
    position: relative;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border: 1px solid rgba(10, 10, 11, 0.08);
    border-radius: var(--gt-r-lg);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    transition: transform var(--gt-t-base), border-color var(--gt-t-base), box-shadow var(--gt-t-base);
}
.gt-bento__card:hover {
    transform: translateY(-3px);
    border-color: rgba(123, 97, 255, 0.36);
    box-shadow: var(--gt-shadow-soft);
}

/* Placement */
.gt-bento__card--ai           { grid-column: span 2; grid-row: span 2; }
.gt-bento__card--video        { grid-column: span 2; grid-row: span 1; }
.gt-bento__card--interview    { grid-column: span 2; grid-row: span 1; }
.gt-bento__card--gamification { grid-column: span 2; grid-row: span 1; }
.gt-bento__card--analytics    { grid-column: span 2; grid-row: span 1; }
.gt-bento__card--branding     { grid-column: span 4; grid-row: span 1; }

.gt-bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gt-accent-soft);
    color: var(--gt-accent);
    font-size: 22px;
    flex-shrink: 0;
}
.gt-bento__card--ai .gt-bento__icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
    background: linear-gradient(135deg, var(--gt-accent) 0%, var(--gt-accent-alt) 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(123, 97, 255, 0.28);
}

.gt-bento__card-title {
    font-family: var(--gt-font-display);
    font-size: 22px;
    font-weight: var(--gt-w-bold);
    letter-spacing: var(--gt-ls-heading);
    color: var(--gt-black);
    line-height: 1.2;
    margin: 0;
}
.gt-bento__card--ai .gt-bento__card-title {
    font-size: 28px;
}

.gt-bento__card-text {
    font-family: var(--gt-font-body);
    font-size: 15px;
    line-height: 1.5;
    color: var(--gt-gray-600);
    margin: 0;
}
.gt-bento__card--ai .gt-bento__card-text {
    font-size: 17px;
    max-width: 80%;
}

/* Декоративный фон большой карточки AI */
.gt-bento__card--ai::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(123, 97, 255, 0.18), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.gt-bento__card--ai > * { position: relative; z-index: 1; }

/* Метрика в AI-карточке */
.gt-bento__metric {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding: 10px 14px;
    background: var(--gt-white);
    border: 1px solid rgba(10, 10, 11, 0.08);
    border-radius: 10px;
    font-size: 13px;
    color: var(--gt-gray-900);
    align-self: flex-start;
}
.gt-bento__metric strong {
    color: var(--gt-accent);
    font-weight: var(--gt-w-bold);
}

/* Brand showcase в широкой карточке */
.gt-bento__card--branding {
    background: linear-gradient(120deg, #0A0A0B 0%, #1E1B4B 100%);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    align-items: flex-start;
    justify-content: center;
}
.gt-bento__card--branding:hover {
    border-color: rgba(123, 97, 255, 0.5);
}
.gt-bento__card--branding .gt-bento__card-title,
.gt-bento__card--branding .gt-bento__card-text {
    color: #fff;
}
.gt-bento__card--branding .gt-bento__card-text {
    color: rgba(255, 255, 255, 0.72);
    max-width: 520px;
}
.gt-bento__card--branding .gt-bento__icon {
    background: rgba(123, 97, 255, 0.22);
    color: #E9E4FF;
}

/* Responsive для ноутбуков 13" и планшетов */
@media (max-width: 1024px) {
    .gt-bento__grid {
        grid-auto-rows: minmax(200px, auto);
    }
    .gt-bento__card--ai .gt-bento__card-title { font-size: 22px; }
}

@media (max-width: 768px) {
    .gt-bento {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .gt-bento__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }
    .gt-bento__card--ai           { grid-column: span 2; grid-row: auto; }
    .gt-bento__card--video,
    .gt-bento__card--interview,
    .gt-bento__card--gamification,
    .gt-bento__card--analytics    { grid-column: span 1; grid-row: auto; }
    .gt-bento__card--branding     { grid-column: span 2; grid-row: auto; }
}


/* ============================================================
   WAVE 2: COURSES CATALOG V3 (2026-04-23)
   Семантические секции (Workday/Sana) + бейджи (iSpring) +
   стикеры (GetCourse). Один визуальный язык: soft-shadow, без
   border. Фиолетовый только на прогрессе и focus-ring.
   ============================================================ */

.gt-courses-v3 {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gt-space-120) 24px var(--gt-space-120);
  background: transparent;
}

/* ---------- Hero-шапка ---------- */
.gt-courses-v3__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 32px;
}
.gt-courses-v3__header-main {
  flex: 1 1 auto;
}
.gt-courses-v3__eyebrow {
  display: block;
  font-family: var(--gt-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gt-text-muted);
  margin: 0 0 8px;
}
.gt-courses-v3__title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h1);
  font-weight: 700;
  line-height: var(--gt-lh-h1);
  letter-spacing: -0.02em;
  color: var(--gt-text);
  margin: 0 0 8px;
}
.gt-courses-v3__subtitle {
  font-family: var(--gt-font-body);
  font-size: 16px;
  color: var(--gt-text-muted);
  margin: 0;
  line-height: 1.5;
}
.gt-courses-v3__header-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
}
.gt-courses-v3__btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #7B61FF;
  color: #7B61FF;
  font-family: var(--gt-font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  text-decoration: none;
}
.gt-courses-v3__btn-ghost:hover {
  background: #7B61FF;
  color: #FFFFFF;
}

/* ---------- Chip-tabs ---------- */
.gt-courses-v3__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}
.gt-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  font-family: var(--gt-font-body);
  font-size: 13px;
  font-weight: 500;
  color: #52525B;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.gt-chip:hover {
  background: #F4F4F5;
  border-color: #D4D4D8;
  color: #18181B;
}
.gt-chip--active {
  background: #7B61FF;
  border-color: #7B61FF;
  color: #FFFFFF;
}
.gt-chip--active:hover {
  background: #6B51F0;
  border-color: #6B51F0;
  color: #FFFFFF;
}

/* ---------- Тулбар (поиск + фильтр разделов) ---------- */
.gt-courses-v3__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0 0 32px;
}
.gt-courses-v3__toolbar .form-search,
.gt-courses-v3__toolbar .filter-form {
  flex: 1 1 260px;
  min-width: 240px;
}
.gt-courses-v3__toolbar .input,
.gt-courses-v3__toolbar .accardeon-input .input {
  height: 40px !important;
  background: #FFFFFF !important;
  border: 1px solid #E4E4E7 !important;
  border-radius: 10px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
  display: flex;
  align-items: center;
}
.gt-courses-v3__toolbar .input input[type="text"],
.gt-courses-v3__toolbar .accardeon-input .input input[type="text"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: var(--gt-font-body) !important;
  font-size: 14px !important;
  color: #18181B !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
.gt-courses-v3__toolbar .input:focus-within,
.gt-courses-v3__toolbar .accardeon-input .input:focus-within {
  border-color: #7B61FF !important;
  box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.12) !important;
}

/* ---------- Секции ---------- */
.gt-courses-v3__section {
  margin: 0 0 var(--gt-space-80);
  scroll-margin-top: 24px;
}
.gt-courses-v3__section:last-child {
  margin-bottom: 0;
}
.gt-courses-v3__section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
  position: relative;
}
.gt-courses-v3__section-title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h3);
  font-weight: 700;
  line-height: var(--gt-lh-h3);
  letter-spacing: -0.01em;
  color: var(--gt-text);
  margin: 0;
}
.gt-courses-v3__section-count {
  font-family: var(--gt-font-body);
  font-size: 14px;
  color: #9CA3AF;
  font-weight: 400;
}

/* ---------- Меню у заголовка раздела (админ) ---------- */
.gt-courses-v3__section-menu {
  position: relative;
  margin-left: auto;
}
.gt-courses-v3__section-menu-btn {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background 160ms ease;
}
.gt-courses-v3__section-menu-btn:hover {
  background: rgba(24, 24, 27, 0.06);
}
.gt-courses-v3__section-menu-btn span {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9CA3AF;
}
.gt-courses-v3__section-menu-list {
  display: none;
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 20;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.10);
  padding: 8px;
  min-width: 180px;
}
.gt-courses-v3__section-menu.open .gt-courses-v3__section-menu-list {
  display: block;
}
.gt-courses-v3__section-menu-list .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--gt-font-body);
  font-size: 14px;
  color: #18181B;
  transition: background 140ms ease;
}
.gt-courses-v3__section-menu-list .row:hover {
  background: #F4F4F5;
}

/* ---------- Завершённые (свёрнуто) ---------- */
.gt-courses-v3__section--completed {
  border-top: 1px solid #E4E4E7;
  padding-top: 32px;
  margin-top: 16px;
}
.gt-courses-v3__section--completed details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0;
}
.gt-courses-v3__section--completed details > summary::-webkit-details-marker {
  display: none;
}
.gt-courses-v3__section--completed details > summary::before {
  content: "▸";
  display: inline-block;
  color: #9CA3AF;
  font-size: 14px;
  transition: transform 160ms ease;
}
.gt-courses-v3__section--completed details[open] > summary::before {
  transform: rotate(90deg);
}
.gt-courses-v3__section--completed details[open] > .gt-courses-v3__grid {
  margin-top: 20px;
}

/* ---------- Сетка карточек ---------- */
.gt-courses-v3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

/* ---------- Карточка ---------- */
.gt-course-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gt-bg-elevated);
  border: none;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--gt-text);
  box-shadow: var(--gt-shadow-card);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 0.3s ease, color 0.3s ease;
}
.gt-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.08);
}
.gt-course-card:focus-visible {
  outline: 3px solid rgba(123, 97, 255, 0.35);
  outline-offset: 2px;
}

/* ---------- Обложка с уникальным градиентом ---------- */
.gt-course-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gradient-a, #F3F0FF), var(--gradient-b, #E8E3FF));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gt-course-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px 28px;
  display: block;
}
.gt-course-card__cover img.is-photo {
  object-fit: cover;
  padding: 0;
}

/* ---------- Стикер-статус (угол слева) ---------- */
.gt-course-card__sticker {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gt-course-card__sticker svg {
  width: 20px;
  height: 20px;
}

/* ---------- Бейдж статуса (угол справа) ---------- */
.gt-course-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-family: var(--gt-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
}
.gt-course-card__badge--required { background: #FEE2E2; color: #991B1B; }
.gt-course-card__badge--overdue  { background: #FEE2E2; color: #991B1B; }
.gt-course-card__badge--assigned { background: #EEF2FF; color: #3730A3; }
.gt-course-card__badge--new      { background: #D1FAE5; color: #065F46; }
.gt-course-card__badge--done     { background: #F3F4F6; color: #374151; }

/* ---------- Прогресс-бар ---------- */
.gt-course-card__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.05);
  z-index: 1;
}
.gt-course-card__progress > span {
  display: block;
  height: 100%;
  background: #7B61FF;
  transition: width 220ms ease;
}

/* ---------- Тело карточки ---------- */
.gt-course-card__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gt-course-card__eyebrow {
  font-family: var(--gt-font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #9CA3AF;
  margin: 0 0 8px;
}
.gt-course-card__title {
  font-family: var(--gt-font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: #18181B;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  min-height: 50px;
}
.gt-course-card__caption {
  font-family: var(--gt-font-body);
  font-size: 13px;
  color: #6B7280;
  margin: 12px 0 0;
  line-height: 1.4;
  font-weight: 400;
}

/* ---------- Меню точек (для admin) ---------- */
.gt-course-card .item__close {
  position: absolute;
  top: 12px;
  right: 52px; /* слева от бейджа */
  z-index: 3;
  width: 32px;
  height: 32px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.gt-course-card:hover .item__close {
  opacity: 1;
  pointer-events: auto;
}
.gt-course-card .item__close .points {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.12);
}
.gt-course-card .item__close .points > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4B5563;
  display: inline-block;
}
.gt-course-card .item__close .mini-modal { z-index: 4; }

/* ---------- Пустое состояние ---------- */
.gt-courses-v3__empty {
  padding: 64px 24px;
  text-align: center;
}
.gt-courses-v3__empty-title {
  font-family: var(--gt-font-display);
  font-size: 20px;
  font-weight: 600;
  color: #18181B;
  margin: 0 0 8px;
}
.gt-courses-v3__empty-subtitle {
  font-family: var(--gt-font-body);
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* ---------- Responsive (до 768px не ломаемся) ---------- */
@media (max-width: 1024px) {
  .gt-courses-v3__grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .gt-courses-v3 { padding: 24px 16px 48px; }
  .gt-courses-v3__title { font-size: 28px; }
  .gt-courses-v3__section-title { font-size: 20px; }
  .gt-courses-v3__grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  .gt-course-card__title { font-size: 16px; min-height: 44px; }
}

/* ---------- Фон страницы ---------- */
body:has(.gt-courses-v3) .main,
body:has(.gt-courses-v3) .content {
  background: #FAFAFA;
}

/* ============================================================
   Wave 1 v2 · Задача 5 — Motion (scroll-reveal + magnetic CTA)
   ============================================================ */

.gt-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.gt-reveal.gt-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

[data-gt-magnetic] {
  --gt-mag-x: 0px;
  --gt-mag-y: 0px;
  transform: translate3d(var(--gt-mag-x), var(--gt-mag-y), 0);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (hover: none) {
  [data-gt-magnetic] {
    --gt-mag-x: 0px !important;
    --gt-mag-y: 0px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-gt-magnetic] {
    --gt-mag-x: 0px !important;
    --gt-mag-y: 0px !important;
    transition: none !important;
  }
}

/* ============================================================
   Dark mode toggle (floating button)
   ============================================================ */
.gt-theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--gt-border);
  border-radius: 999px;
  background: var(--gt-bg-elevated);
  color: var(--gt-text);
  cursor: pointer;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.gt-theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.12);
}
.gt-theme-toggle:focus-visible {
  outline: 3px solid rgba(123, 97, 255, 0.35);
  outline-offset: 2px;
}
.gt-theme-toggle__icon {
  position: absolute;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease;
}
/* Light: показываем луну (клик → dark) */
[data-theme="light"] .gt-theme-toggle__icon--sun {
  transform: rotate(90deg) scale(0);
  opacity: 0;
}
[data-theme="light"] .gt-theme-toggle__icon--moon {
  transform: rotate(0) scale(1);
  opacity: 1;
}
/* Dark: показываем солнце (клик → light) */
[data-theme="dark"] .gt-theme-toggle__icon--sun {
  transform: rotate(0) scale(1);
  opacity: 1;
}
[data-theme="dark"] .gt-theme-toggle__icon--moon {
  transform: rotate(-90deg) scale(0);
  opacity: 0;
}

/* ============================================================
   Wave 3 — Netflix feed (горизонтальные ряды + hover-preview)
   ============================================================ */

.gt-netflix-row {
  position: relative;
  margin: 0 0 56px;
}

.gt-netflix-row__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 4px;
  scroll-margin-top: calc(var(--gt-header-height, 72px) + 24px);
}

.gt-netflix-row__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gt-text, #18181B);
  margin: 0;
  line-height: 1.2;
}

.gt-netflix-row__count {
  color: var(--gt-text-muted, #52525B);
  font-size: 14px;
  font-weight: 500;
}

.gt-netflix-row__arrows {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.gt-netflix-row__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gt-bg-elevated, #FFFFFF);
  color: var(--gt-text, #18181B);
  border: 1px solid var(--gt-border, #E4E4E7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  font-size: 20px;
  line-height: 1;
  padding: 0;
}

.gt-netflix-row__arrow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.gt-netflix-row__arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767px) {
  .gt-netflix-row__arrows { display: none; }
  .gt-netflix-row__head { gap: 8px; }
  .gt-netflix-row__title { font-size: 22px; }
  .gt-netflix-row__scroller { padding: 16px 4px 24px; }
}

.gt-netflix-row__scroller {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 24px 4px 32px;
  scroll-snap-type: x proximity;
  scroll-snap-stop: always;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.gt-netflix-row__scroller::-webkit-scrollbar { display: none; }

.gt-netflix-row__item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
  border-radius: 16px;
}

@media (min-width: 1024px) { .gt-netflix-row__item { flex-basis: 300px; } }
@media (min-width: 1440px) { .gt-netflix-row__item { flex-basis: 320px; } }

@media (hover: hover) {
  .gt-netflix-row__item:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: var(--gt-shadow-hover, 0 20px 40px rgba(123, 97, 255, 0.22));
    z-index: 5;
  }
  .gt-netflix-row__item:hover .gt-course-card__meta {
    max-height: 140px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gt-netflix-row__item,
  .gt-netflix-row__arrow { transition: none; }
  .gt-netflix-row__scroller { scroll-snap-type: none; }
  .gt-netflix-row__item:hover { transform: none; }
}

/* Fade-маски по краям через ::before/::after (не mask-image — overflow-y:visible не ломается) */
.gt-netflix-row::before,
.gt-netflix-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 3;
  transition: opacity .2s ease;
}
.gt-netflix-row::before {
  left: 0;
  background: linear-gradient(90deg, var(--gt-bg, #FAFAFA), transparent);
}
.gt-netflix-row::after {
  right: 0;
  background: linear-gradient(270deg, var(--gt-bg, #FAFAFA), transparent);
}
.gt-netflix-row[data-at-start="true"]::before { opacity: 0; }
.gt-netflix-row[data-at-end="true"]::after { opacity: 0; }

/* Meta-preview внутри карточки (раскрывается на hover) */
.gt-course-card__meta {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .3s ease, opacity .2s ease .08s;
  padding: 0 16px;
  font-size: 13px;
  color: var(--gt-text-muted, #52525B);
}
.gt-course-card__meta-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
  line-height: 1.35;
}
.gt-course-card__meta-row svg {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  opacity: 0.65;
}
.gt-course-card__meta-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chip-tabs для новых якорей (используют уже существующий .gt-chip) */
.gt-courses-v3__tabs .gt-chip[href="#recommended"],
.gt-courses-v3__tabs .gt-chip[href="#popular"],
.gt-courses-v3__tabs .gt-chip[href="#new"] {
  /* стили наследуются от .gt-chip */
}

/* ============================================================
   Wave 3 task 2 — HR Insights Dashboard
   ============================================================ */

.gt-insights {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 1023px) {
  .gt-insights { padding: 0 24px; }
}

.gt-insights__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.gt-insights__eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.gt-insights__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gt-text, #18181B);
  margin: 0;
  line-height: 1.05;
}

.gt-insights__subtitle {
  color: var(--gt-text-muted, #52525B);
  margin: 8px 0 0;
  font-size: 16px;
}

.gt-insights__filter {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gt-insights__filter-select {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--gt-border, #E4E4E7);
  background: var(--gt-bg-elevated, #FFFFFF);
  color: var(--gt-text, #18181B);
  font-size: 14px;
  min-width: 200px;
  cursor: pointer;
}

/* KPI-карточки */

.gt-insights__kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

@media (max-width: 1023px) {
  .gt-insights__kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

.gt-insights__kpi-card {
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gt-insights__kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--gt-shadow-card, 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06));
  border-color: var(--gt-accent, #7B61FF);
}

.gt-insights__kpi-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, var(--gt-accent-bg, rgba(123,97,255,.08)) 0%, transparent 70%);
  pointer-events: none;
}

.gt-insights__kpi-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gt-text-muted, #52525B);
  margin-bottom: 8px;
}

.gt-insights__kpi-value {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  color: var(--gt-text, #18181B);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 12px;
  word-break: keep-all;
}

.gt-insights__kpi-value-suffix {
  font-size: 0.4em;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  margin-left: 4px;
}

.gt-insights__kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.gt-insights__kpi-trend--up {
  background: #DCFCE7; color: #15803D;
}
.gt-insights__kpi-trend--down {
  background: #FEE2E2; color: #B91C1C;
}
.gt-insights__kpi-trend--flat {
  background: var(--gt-bg-sunken, #F4F4F5); color: var(--gt-text-muted, #52525B);
}
.gt-insights__kpi-trend--new {
  background: var(--gt-accent-bg, rgba(123,97,255,.08)); color: var(--gt-accent, #7B61FF);
}

[data-theme="dark"] .gt-insights__kpi-trend--up { background: rgba(21, 128, 61, .2); color: #4ADE80; }
[data-theme="dark"] .gt-insights__kpi-trend--down { background: rgba(185, 28, 28, .2); color: #F87171; }

/* График активности */

.gt-insights__chart {
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 40px;
}

.gt-insights__chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.gt-insights__chart-title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  margin: 0;
}

.gt-insights__chart-subtitle {
  font-size: 13px;
  color: var(--gt-text-muted, #52525B);
}

.gt-insights__chart-canvas {
  position: relative;
  height: 220px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 16px 0 32px;
}

.gt-insights__chart-bar {
  flex: 1 1 0;
  min-width: 0;
  background: linear-gradient(180deg, var(--gt-accent, #7B61FF) 0%, var(--gt-accent-hover, #6B51F0) 100%);
  border-radius: 4px 4px 0 0;
  min-height: 2px;
  position: relative;
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}

.gt-insights__chart-bar:hover {
  opacity: .8;
  transform: scaleY(1.03);
  transform-origin: bottom;
}

.gt-insights__chart-bar[data-count="0"] {
  background: var(--gt-bg-sunken, #F4F4F5);
  min-height: 4px;
}

.gt-insights__chart-tooltip {
  position: absolute;
  background: var(--gt-text, #18181B);
  color: var(--gt-bg, #FFFFFF);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
  z-index: 10;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.gt-insights__chart-tooltip.is-visible {
  opacity: 1;
}

.gt-insights__chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 11px;
  color: var(--gt-text-subtle, #A1A1AA);
}

.gt-insights__chart-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--gt-text-muted, #52525B);
  font-size: 14px;
}

/* Топ-списки + лента */

.gt-insights__bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1023px) {
  .gt-insights__bottom-grid { grid-template-columns: 1fr; }
}

.gt-insights__block {
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 16px;
  padding: 24px;
}

.gt-insights__block-title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  margin: 0 0 20px;
}

.gt-insights__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gt-insights__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  transition: background .15s ease;
}

.gt-insights__list-item:hover {
  background: var(--gt-bg-sunken, #F4F4F5);
}

.gt-insights__list-rank {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gt-accent-bg, rgba(123,97,255,.08));
  color: var(--gt-accent, #7B61FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.gt-insights__list-item:nth-child(1) .gt-insights__list-rank {
  background: linear-gradient(135deg, #FEF3C7 0%, #FCD34D 100%);
  color: #92400E;
}

.gt-insights__list-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gt-text, #18181B);
  font-size: 14px;
  font-weight: 500;
}

.gt-insights__list-count {
  flex: 0 0 auto;
  color: var(--gt-text-muted, #52525B);
  font-size: 13px;
  font-weight: 600;
}

/* Лента достижений */

.gt-insights__feed {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.gt-insights__feed-item {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gt-border-subtle, #F4F4F5);
}
.gt-insights__feed-item:last-child { border-bottom: none; }

.gt-insights__feed-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gt-accent, #7B61FF);
  margin-top: 8px;
}

.gt-insights__feed-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: var(--gt-text, #18181B);
  line-height: 1.4;
}
.gt-insights__feed-text strong { font-weight: 600; }

.gt-insights__feed-time {
  font-size: 11px;
  color: var(--gt-text-subtle, #A1A1AA);
  margin-top: 4px;
}

/* Пустое состояние */

.gt-insights__empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--gt-text-muted, #52525B);
}
.gt-insights__empty-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  margin-bottom: 8px;
}

/* ============================================================
   Wave 3 — Shared Redesign Primitives
   Общие компоненты для редизайна всех страниц (фазы A-F).
   Каждый агент переиспользует эти классы вместо дублирования.
   НЕ МЕНЯТЬ без согласования — ломается общий стиль.
   ============================================================ */

/* ---------- Page container (общая оболочка страницы) ---------- */
.gt-page {
  max-width: var(--gt-container-max, 1200px);
  margin: 0 auto;
  padding: 32px 24px 80px;
}
@media (max-width: 768px) {
  .gt-page { padding: 20px 16px 48px; }
}

/* ---------- Page hero (унифицированный заголовок любой страницы) ---------- */
.gt-page-hero {
  margin-bottom: 40px;
}
.gt-page-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gt-text-muted, #52525B);
  margin-bottom: 12px;
}
.gt-page-hero__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: var(--gt-ls-heading, -0.02em);
  line-height: 1.1;
  color: var(--gt-text, #18181B);
  margin: 0 0 12px;
}
.gt-page-hero__subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--gt-text-muted, #52525B);
  max-width: 640px;
  margin: 0;
}
.gt-page-hero__actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ---------- Breadcrumb ---------- */
.gt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.gt-breadcrumb__item {
  color: inherit;
  text-decoration: none;
  transition: color var(--gt-t-fast, 160ms);
}
.gt-breadcrumb__item:hover {
  color: var(--gt-accent, #7B61FF);
}
.gt-breadcrumb__separator {
  color: var(--gt-text-subtle, #A1A1AA);
  font-size: 12px;
}
.gt-breadcrumb__current {
  color: var(--gt-text, #18181B);
  font-weight: 500;
}

/* ---------- Card v4 — универсальная карточка ---------- */
.gt-card-v4 {
  background: var(--gt-bg-elevated, #FAFAFA);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-lg, 16px);
  padding: 24px;
  transition: border-color var(--gt-t-base, 220ms), box-shadow var(--gt-t-base, 220ms), transform var(--gt-t-base, 220ms);
}
.gt-card-v4--interactive {
  cursor: pointer;
}
.gt-card-v4--interactive:hover {
  border-color: transparent;
  box-shadow: var(--gt-shadow-hover, 0 20px 40px rgba(123,97,255,0.22));
  transform: translateY(-2px);
}
.gt-card-v4__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  margin: 0 0 8px;
  line-height: 1.3;
}
.gt-card-v4__subtitle {
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
  margin: 0 0 16px;
  line-height: 1.5;
}
.gt-card-v4__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--gt-text-subtle, #A1A1AA);
}

/* ---------- Chip (бейдж / фильтр-тег) ---------- */
.gt-chip-v4 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--gt-r-pill, 999px);
  font-size: 13px;
  font-weight: 500;
  background: var(--gt-bg-sunken, #F4F4F5);
  color: var(--gt-text, #18181B);
  border: 1px solid transparent;
  white-space: nowrap;
}
.gt-chip-v4--accent {
  background: var(--gt-accent-bg, rgba(123,97,255,0.08));
  color: var(--gt-accent, #7B61FF);
}
.gt-chip-v4--success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}
.gt-chip-v4--warning {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}
.gt-chip-v4--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

/* ---------- Button v4 ---------- */
.gt-btn-v4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--gt-r-md, 12px);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--gt-t-fast, 160ms), border-color var(--gt-t-fast, 160ms), color var(--gt-t-fast, 160ms), transform var(--gt-t-fast, 160ms);
  text-decoration: none;
}
.gt-btn-v4--primary {
  background: var(--gt-accent, #7B61FF);
  color: #fff;
}
.gt-btn-v4--primary:hover {
  background: var(--gt-accent-hover, #6B51F0);
  transform: translateY(-1px);
}
.gt-btn-v4--secondary {
  background: var(--gt-bg-sunken, #F4F4F5);
  color: var(--gt-text, #18181B);
  border-color: var(--gt-border, #E4E4E7);
}
.gt-btn-v4--secondary:hover {
  background: var(--gt-bg-elevated, #FAFAFA);
  border-color: var(--gt-accent, #7B61FF);
}
.gt-btn-v4--ghost {
  background: transparent;
  color: var(--gt-text-muted, #52525B);
}
.gt-btn-v4--ghost:hover {
  background: var(--gt-bg-sunken, #F4F4F5);
  color: var(--gt-text, #18181B);
}
.gt-btn-v4--danger {
  background: transparent;
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}
.gt-btn-v4--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #dc2626;
}
.gt-btn-v4--lg {
  height: 56px;
  padding: 0 28px;
  font-size: 16px;
}

/* ---------- Form field (унифицированный инпут) ---------- */
.gt-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.gt-form-field__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-text-muted, #52525B);
}
.gt-form-field__label--required::after {
  content: " *";
  color: #dc2626;
}
.gt-form-field__input,
.gt-form-field__textarea,
.gt-form-field__select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  font-family: inherit;
  font-size: 15px;
  color: var(--gt-text, #18181B);
  transition: border-color var(--gt-t-fast, 160ms), box-shadow var(--gt-t-fast, 160ms);
}
.gt-form-field__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2352525B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.gt-form-field__select::-ms-expand { display: none; }
.gt-form-field__textarea {
  height: auto;
  min-height: 120px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.5;
}
.gt-form-field__input:focus,
.gt-form-field__textarea:focus,
.gt-form-field__select:focus {
  outline: none;
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.15);
}
.gt-form-field__input:disabled,
.gt-form-field__textarea:disabled {
  background: var(--gt-bg-sunken, #F4F4F5);
  color: var(--gt-text-muted, #52525B);
  cursor: not-allowed;
}
.gt-form-field__hint {
  font-size: 13px;
  color: var(--gt-text-subtle, #A1A1AA);
}
.gt-form-field__error {
  font-size: 13px;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 4px;
}
.gt-form-field--error .gt-form-field__input,
.gt-form-field--error .gt-form-field__textarea,
.gt-form-field--error .gt-form-field__select {
  border-color: #dc2626;
}
.gt-form-field--error .gt-form-field__input:focus {
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.12);
}

/* ==================================================
   Nav sidebar v4 — лёгкий светлый с индиго-акцентом.
   Фон: off-white с мягкой индиго-нотой (#F6F5FB).
   Активный пункт: приподнятая белая карточка с индиго-текстом.
   На desktop меню всегда раскрыто (248px).
   Клик по лого-плашке → collapse (до 76px, только иконки).
   Состояние сохраняется в localStorage.
   ================================================== */

/* Контейнер sidebar — постоянно раскрыт на desktop */
@media (min-width: 1024px) {
    .row-global .row-global__menu,
    .row-global__menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 264px !important;
        height: 100vh !important;
        background: #F6F5FB !important;
        border-right: 1px solid #E7E4F0 !important;
        box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.02), 4px 0 20px rgba(10, 10, 11, 0.04);
        z-index: 50 !important;
        overflow-y: auto;
        transition: width .22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    /* Нейтрализуем .active overlay на desktop */
    .row-global__menu.active {
        width: 264px !important;
        background: #F6F5FB !important;
    }
    .row-global__menu.active .menu-content {
        max-width: none !important;
        width: 100% !important;
    }
    /* Контент справа — сдвигаем под sidebar */
    .row-global__content {
        padding-left: 264px !important;
        transition: padding-left .22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Collapsed state — клик по логотипу */
    .row-global__menu.is-collapsed {
        width: 76px !important;
    }
    .row-global__menu.is-collapsed ~ .row-global__content,
    body:has(.row-global__menu.is-collapsed) .row-global__content {
        padding-left: 76px !important;
    }
    .row-global__menu.is-collapsed .item__content,
    .row-global__menu.is-collapsed .item__text,
    .row-global__menu.is-collapsed .item__vector,
    .row-global__menu.is-collapsed .item__count,
    .row-global__menu.is-collapsed .item__select {
        display: none !important;
    }
    .row-global__menu.is-collapsed .item__head {
        justify-content: center !important;
        padding: 10px !important;
    }
    .row-global__menu.is-collapsed .menu-content__head {
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex;
        justify-content: center;
    }
}

/* Общие стили sidebar (работают и на мобилке) */
.row-global .row-global__menu,
.row-global__menu {
    background: #F6F5FB !important;
    border-right: 1px solid #E7E4F0 !important;
    z-index: 50;
}

.menu-content {
    background: transparent !important;
    color: #3F3F46 !important;
    padding: 22px 14px 22px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 100% !important;
    align-items: stretch !important;
}

/* На desktop показываем текст всегда (переопределяем display:none) */
@media (min-width: 1024px) {
    .row-global__menu:not(.is-collapsed) .menu-content .item__content {
        display: flex !important;
        flex: 1 1 0% !important;
    }
    .row-global__menu:not(.is-collapsed) .menu-content .item__text {
        display: block !important;
    }
}

/* Шапка с логотипом — кликабельная плашка (toggle sidebar) */
.menu-content__head {
    padding: 0 4px 18px !important;
    margin: 0 0 10px !important;
    border-bottom: 1px solid #E7E4F0 !important;
    background: transparent !important;
}
.menu-content__head .item.item--main,
.menu-content__head .item--main {
    background: linear-gradient(135deg, #7B61FF 0%, #4F46E5 100%) !important;
    border-radius: 10px !important;
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
    padding: 0 !important;
    cursor: pointer;
    user-select: none;
}
.menu-content__head .item.item--main:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.menu-content__head .item.item--main:active {
    transform: translateY(0);
}
.menu-content__head .item--main svg {
    width: 18px !important;
    height: 18px !important;
}
.menu-content__head .item--main svg rect,
.menu-content__head .item--main svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

.menu-content__wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: transparent !important;
}

/* Пункт меню — сброс old layout */
.menu-content .menu-content__wrapper .item,
.menu-content .item {
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative;
    overflow: visible;
}

/* Голова item — flex-row, принудительный layout */
.menu-content .menu-content__wrapper .item > .item__head,
.menu-content .item > .item__head,
.menu-content .item__head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    color: #52525B !important;
    font-weight: 500 !important;
    cursor: pointer;
    width: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
    min-height: 40px;
    position: relative;
}

.menu-content .item:hover > .item__head {
    background: #fff !important;
    color: #18181B !important;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04);
}

/* Активный пункт — приподнятая белая карточка с индиго-акцентом */
.menu-content .item.active > .item__head,
.menu-content .item.active .item__head {
    background: #fff !important;
    color: var(--gt-accent, #7B61FF) !important;
    box-shadow:
        0 1px 2px rgba(79, 70, 229, 0.06),
        0 4px 14px rgba(79, 70, 229, 0.12),
        inset 0 0 0 1px rgba(123, 97, 255, 0.12);
}
.menu-content .item.active > .item__head::before {
    content: '';
    position: absolute;
    left: -14px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #7B61FF, #4F46E5);
    box-shadow: 0 0 8px rgba(123, 97, 255, 0.45);
}

/* Иконки — currentColor override для fill/stroke внутри svg */
.menu-content .item__image {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
.menu-content .item__image svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
}
.menu-content .item__image svg path,
.menu-content .item__image svg rect,
.menu-content .item__image svg circle {
    fill: currentColor !important;
}
.menu-content .item__image svg path[stroke],
.menu-content .item__image svg rect[stroke],
.menu-content .item__image svg line[stroke] {
    stroke: currentColor !important;
}

/* Контент (текст) пункта */
.menu-content .item__content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
}
.menu-content .item__text {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.menu-content .item.active .item__text {
    font-weight: 600 !important;
    color: var(--gt-accent, #7B61FF) !important;
}

/* Стрелка аккордеона */
.menu-content .item__vector {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: transform .2s ease;
}
.menu-content .item.accardeon-active .item__vector,
.menu-content .item.open .item__vector {
    transform: rotate(180deg);
}
.menu-content .item__vector svg {
    width: 10px !important;
    height: 6px !important;
}
.menu-content .item__vector svg path {
    stroke: currentColor !important;
    stroke-width: 1.5;
}

/* Аккордеон — подпункты (sections / settings / reviews)
   Более компактные плоские ссылки, а не "лестница карточек".
   ВАЖНО: уважаем .accardeon-hidden — иначе JS toggle ломается. */
.menu-content .item__select.accardeon-hidden,
.menu-content .item__select--sections.accardeon-hidden,
.menu-content .item__select--sections-review.accardeon-hidden {
    display: none !important;
}
.menu-content .item__select:not(.accardeon-hidden),
.menu-content .item__select--sections:not(.accardeon-hidden),
.menu-content .item__select--sections-review:not(.accardeon-hidden) {
    background: transparent !important;
    padding: 4px 0 8px 42px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    border: 0 !important;
    position: relative;
}
/* Соединительная вертикальная линия слева от подпунктов */
.menu-content .item__select:not(.accardeon-hidden)::before,
.menu-content .item__select--sections:not(.accardeon-hidden)::before,
.menu-content .item__select--sections-review:not(.accardeon-hidden)::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 8px;
    width: 1px;
    background: rgba(79, 70, 229, 0.12);
}
.menu-content .item__select .option {
    display: block !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #71717A !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
    line-height: 1.35;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    position: relative;
}
.menu-content .item__select .option:hover {
    background: rgba(79, 70, 229, 0.06) !important;
    color: #18181B !important;
    box-shadow: none !important;
}
.menu-content .item__select .option.active {
    color: var(--gt-accent, #7B61FF) !important;
    background: rgba(79, 70, 229, 0.08) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
/* "+ Добавить секцию" — явный CTA в самом верху списка */
.menu-content .item__select .option.open-modal,
.menu-content .item__select .option[data-name="create-section-nav"] {
    color: var(--gt-accent, #7B61FF) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    letter-spacing: 0.02em;
    border-bottom: 1px dashed rgba(79, 70, 229, 0.2) !important;
    margin-bottom: 4px !important;
    padding-bottom: 8px !important;
    border-radius: 6px 6px 0 0 !important;
}
.menu-content .item__select .option.open-modal:hover {
    background: rgba(79, 70, 229, 0.08) !important;
    color: var(--gt-accent-hover, #4F46E5) !important;
}

/* Контент справа — полотно */
.row-global__content,
.row-global main.row-global__content {
    background: #FAFAFA;
    min-height: 100vh;
}

/* Скроллбар sidebar — минимализм */
.row-global__menu::-webkit-scrollbar { width: 6px; }
.row-global__menu::-webkit-scrollbar-track { background: transparent; }
.row-global__menu::-webkit-scrollbar-thumb { background: rgba(79, 70, 229, 0.12); border-radius: 3px; }
.row-global__menu::-webkit-scrollbar-thumb:hover { background: rgba(79, 70, 229, 0.22); }

/* Dark mode — sidebar тёмный, контент тёмный */
body.dark-mode .row-global__content,
[data-theme="dark"] .row-global__content {
    background: var(--gt-bg, #0A0A0B);
}
body.dark-mode .row-global__menu,
[data-theme="dark"] .row-global__menu {
    background: #0F0F12 !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .menu-content__head,
[data-theme="dark"] .menu-content__head {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .menu-content .item__head,
[data-theme="dark"] .menu-content .item__head {
    color: rgba(255, 255, 255, 0.65) !important;
}
body.dark-mode .menu-content .item:hover > .item__head,
[data-theme="dark"] .menu-content .item:hover > .item__head {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    box-shadow: none;
}
body.dark-mode .menu-content .item.active > .item__head,
[data-theme="dark"] .menu-content .item.active > .item__head {
    background: rgba(123, 97, 255, 0.14) !important;
    color: #C7B9FF !important;
    box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.28);
}
body.dark-mode .menu-content .item.active .item__text,
[data-theme="dark"] .menu-content .item.active .item__text {
    color: #C7B9FF !important;
}
body.dark-mode .menu-content .item__select .option,
[data-theme="dark"] .menu-content .item__select .option {
    color: rgba(255, 255, 255, 0.55) !important;
}
body.dark-mode .menu-content .item__select .option:hover,
[data-theme="dark"] .menu-content .item__select .option:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #fff !important;
    box-shadow: none;
}
body.dark-mode .menu-content .item__select .option.active,
[data-theme="dark"] .menu-content .item__select .option.active {
    background: rgba(123, 97, 255, 0.14) !important;
    color: #C7B9FF !important;
    box-shadow: inset 0 0 0 1px rgba(123, 97, 255, 0.28);
}

/* ---------- Permissions grid (страница роли) ---------- */
.gt-perm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.gt-perm-group {
  background: var(--gt-bg-elevated, #FAFAFA);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  padding: 18px 20px;
}
.gt-perm-group__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
}
.gt-perm-group__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gt-perm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  color: var(--gt-text, #18181B);
}
.gt-perm-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--gt-accent, #7B61FF);
  flex-shrink: 0;
}
.gt-perm-item__label {
  flex: 1;
}

/* Tooltip-значок (?) — CSS-only, на hover/focus показывается подсказка */
.gt-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gt-bg-sunken, #F4F4F5);
  color: var(--gt-text-muted, #52525B);
  font-size: 12px;
  font-weight: 600;
  cursor: help;
  position: relative;
  flex-shrink: 0;
  border: 1px solid var(--gt-border, #E4E4E7);
  transition: background-color .15s ease, color .15s ease;
}
.gt-tip:hover,
.gt-tip:focus-visible {
  background: var(--gt-accent-bg, rgba(123, 97, 255, 0.1));
  color: var(--gt-accent, #7B61FF);
  outline: none;
}
.gt-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 280px;
  padding: 8px 12px;
  background: #18181B;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  white-space: normal;
  text-align: left;
  z-index: 100;
}
.gt-tip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #18181B;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 100;
}
.gt-tip:hover::after,
.gt-tip:hover::before,
.gt-tip:focus-visible::after,
.gt-tip:focus-visible::before {
  opacity: 1;
}

body.dark-mode .gt-perm-group,
[data-theme="dark"] .gt-perm-group {
  background: var(--gt-bg-elevated);
  border-color: var(--gt-border);
}

/* ---------- Custom select (gt-select-v4) ----------
   Кастомный combobox поверх нативного <select> с data-gt-select.
   Native-select скрыт, но остаётся в форме — submit работает как прежде.
*/
.gt-select-v4 {
  position: relative;
  width: 100%;
}
.gt-select-v4__native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.gt-select-v4__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  font-family: inherit;
  font-size: 15px;
  color: var(--gt-text, #18181B);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--gt-t-fast, 160ms), box-shadow var(--gt-t-fast, 160ms);
}
.gt-select-v4__trigger:hover {
  border-color: var(--gt-border-strong, #D4D4D8);
}
.gt-select-v4.is-open .gt-select-v4__trigger,
.gt-select-v4__trigger:focus {
  outline: none;
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.15);
}
.gt-select-v4__value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-select-v4__chev {
  color: var(--gt-text-muted, #52525B);
  transition: transform .18s ease;
  flex-shrink: 0;
}
.gt-select-v4.is-open .gt-select-v4__chev { transform: rotate(180deg); }

.gt-select-v4__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  box-shadow: 0 12px 32px rgba(10, 10, 11, 0.12), 0 2px 6px rgba(10, 10, 11, 0.06);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  animation: gtSelectIn .14s ease-out;
}
@keyframes gtSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.gt-select-v4__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gt-select-v4__option {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 15px;
  color: var(--gt-text, #18181B);
  cursor: pointer;
  outline: none;
  transition: background-color .12s ease, color .12s ease;
}
.gt-select-v4__option:hover,
.gt-select-v4__option:focus {
  background: var(--gt-bg-sunken, #F4F4F5);
}
.gt-select-v4__option.is-selected {
  background: var(--gt-accent-bg, rgba(123, 97, 255, 0.08));
  color: var(--gt-accent, #7B61FF);
  font-weight: 600;
}
.gt-select-v4--disabled .gt-select-v4__trigger {
  opacity: .6;
  cursor: not-allowed;
}

/* Dark mode */
body.dark-mode .gt-select-v4__trigger,
[data-theme="dark"] .gt-select-v4__trigger {
  background: var(--gt-bg-elevated);
  border-color: var(--gt-border);
  color: var(--gt-text);
}
body.dark-mode .gt-select-v4__panel,
[data-theme="dark"] .gt-select-v4__panel {
  background: var(--gt-bg-elevated);
  border-color: var(--gt-border);
}

/* ---------- Form actions (sticky footer для форм create/edit) ---------- */
.gt-form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 20px 0;
  margin-top: 24px;
  border-top: 1px solid var(--gt-border-subtle, #F4F4F5);
  flex-wrap: wrap;
}
.gt-form-actions--sticky {
  position: sticky;
  bottom: 0;
  background: var(--gt-bg, #fff);
  padding: 20px 24px;
  margin: 32px -24px 0;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.04);
}

/* ---------- Empty state ---------- */
.gt-empty-state {
  padding: 80px 24px;
  text-align: center;
  background: var(--gt-bg-elevated, #FAFAFA);
  border-radius: var(--gt-r-lg, 16px);
  border: 1px dashed var(--gt-border, #E4E4E7);
}
.gt-empty-state__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  color: var(--gt-text-subtle, #A1A1AA);
}
.gt-empty-state__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  margin: 0 0 8px;
}
.gt-empty-state__text {
  font-size: 15px;
  color: var(--gt-text-muted, #52525B);
  max-width: 420px;
  margin: 0 auto 20px;
  line-height: 1.5;
}

/* ---------- Loading skeleton ---------- */
@keyframes gtSkeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.gt-skeleton {
  background: linear-gradient(90deg, var(--gt-bg-sunken, #F4F4F5) 0%, var(--gt-bg-elevated, #FAFAFA) 50%, var(--gt-bg-sunken, #F4F4F5) 100%);
  background-size: 200% 100%;
  border-radius: var(--gt-r-md, 12px);
  animation: gtSkeletonPulse 1.4s ease-in-out infinite;
}
.gt-skeleton--text {
  height: 14px;
  margin-bottom: 8px;
}
.gt-skeleton--title {
  height: 28px;
  margin-bottom: 16px;
  width: 60%;
}
.gt-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
@media (prefers-reduced-motion: reduce) {
  .gt-skeleton { animation: none; }
}

/* ---------- Error state ---------- */
.gt-error-state {
  padding: 60px 24px;
  text-align: center;
  background: rgba(239, 68, 68, 0.04);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--gt-r-lg, 16px);
}
.gt-error-state__title {
  font-size: 20px;
  font-weight: 600;
  color: #dc2626;
  margin: 0 0 8px;
}
.gt-error-state__text {
  font-size: 15px;
  color: var(--gt-text-muted, #52525B);
  margin: 0 0 20px;
}

/* ---------- Flash message (success/error/info) ---------- */
.gt-flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--gt-r-md, 12px);
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.gt-flash--success {
  background: rgba(34, 197, 94, 0.08);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.2);
}
.gt-flash--error {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.gt-flash--info {
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

/* ---------- Table v4 (для списков) ---------- */
.gt-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--gt-bg-elevated, #FAFAFA);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-lg, 16px);
  overflow: hidden;
}
.gt-table thead tr {
  background: var(--gt-bg-sunken, #F4F4F5);
}
.gt-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--gt-border, #E4E4E7);
}
.gt-table td {
  padding: 16px 20px;
  font-size: 15px;
  color: var(--gt-text, #18181B);
  border-bottom: 1px solid var(--gt-border-subtle, #F4F4F5);
  vertical-align: middle;
}
.gt-table tbody tr:last-child td {
  border-bottom: none;
}
.gt-table tbody tr:hover {
  background: var(--gt-bg-sunken, #F4F4F5);
}

/* Mobile: таблица превращается в стек карточек */
@media (max-width: 768px) {
  .gt-table,
  .gt-table thead,
  .gt-table tbody,
  .gt-table tr,
  .gt-table td {
    display: block;
    width: 100%;
  }
  .gt-table thead { display: none; }
  .gt-table tr {
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: var(--gt-r-md, 12px);
    margin-bottom: 12px;
    padding: 8px 0;
    background: var(--gt-bg-elevated, #FAFAFA);
  }
  .gt-table td {
    border: none;
    padding: 8px 16px;
  }
  .gt-table td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--gt-text-muted, #52525B);
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
  }
}

/* ---------- Search input (унифицированный поиск в тулбарах) ---------- */
.gt-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
}
.gt-search__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 44px;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  font-size: 14px;
  color: var(--gt-text, #18181B);
  transition: border-color var(--gt-t-fast, 160ms), box-shadow var(--gt-t-fast, 160ms);
}
.gt-search__input:focus {
  outline: none;
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12);
}
.gt-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--gt-text-subtle, #A1A1AA);
  pointer-events: none;
}

/* ---------- Toolbar (hero + search + filters + actions) ---------- */
.gt-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gt-toolbar__spacer { flex: 1 1 auto; }

/* ---------- Grid layouts (общие 2/3/4 колоночные) ---------- */
.gt-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.gt-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gt-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1024px) {
  .gt-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gt-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gt-grid-2, .gt-grid-3, .gt-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Dark mode overrides (эти примитивы тоже в dark) ---------- */
body.dark-mode {
  --gt-bg:             #0B0B0F;
  --gt-bg-elevated:    #15151A;
  --gt-bg-sunken:      #0F0F14;
  --gt-text:           #F5F5F7;
  --gt-text-muted:     #A1A1AA;
  --gt-text-subtle:    #71717A;
  --gt-border:         #27272F;
  --gt-border-subtle:  #1E1E25;
  --gt-accent-bg:      rgba(123, 97, 255, 0.16);
  --gt-shadow-card:    0 1px 3px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3);
  --gt-shadow-hover:   0 20px 40px rgba(123, 97, 255, 0.28);
}
body.dark-mode .gt-flash--success { background: rgba(34, 197, 94, 0.12); color: #86efac; }
body.dark-mode .gt-flash--error { background: rgba(239, 68, 68, 0.12); color: #fca5a5; }
body.dark-mode .gt-flash--info { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }

/* ---------- End of Wave 3 Shared Primitives ---------- */


/* ============================================================
   Wave 3 Phase E — People & Directories (карточки вместо таблиц)
   Стиль совпадает с .gt-course-card из Netflix-каталога:
   градиентные обложки, large headings, hover translateY + shadow,
   цветные chip-статусы, meta-preview on hover.
   ============================================================ */

/* ---------- Hero раздела (большой заголовок + eyebrow + CTA) ---------- */
.gt-people-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  padding: 40px 0 0;
}
.gt-people-hero__lead { max-width: 760px; }
.gt-people-hero__eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.gt-people-hero__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--gt-text, #18181B);
  margin: 0;
}
.gt-people-hero__title em {
  font-style: normal;
  background: linear-gradient(135deg, #7B61FF 0%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gt-people-hero__subtitle {
  font-size: 18px;
  line-height: 1.5;
  color: var(--gt-text-muted, #52525B);
  margin: 16px 0 0;
  max-width: 620px;
}
.gt-people-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Toolbar фильтров (2 явные строки: поиск → селекты) ---------- */
.gt-people-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 48px;
  padding: 20px;
  background: #FFFFFF;
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-lg, 16px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  height: auto;
}
body.dark-mode .gt-people-toolbar { background: var(--gt-bg-elevated); }

.gt-people-toolbar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.gt-people-toolbar__row--primary .gt-search {
  flex: 1 1 auto;
  max-width: none;
}
.gt-people-toolbar__row--filters .gt-people-toolbar__select {
  flex: 1 1 200px;
  min-width: 160px;
}
.gt-people-toolbar .gt-search { flex: 1 1 280px; max-width: none; }
.gt-people-toolbar__select {
  height: 44px;
  padding: 0 36px 0 14px;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-md, 12px);
  font-family: inherit;
  font-size: 14px;
  color: var(--gt-text, #18181B);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  transition: border-color 160ms, box-shadow 160ms;
}
.gt-people-toolbar__select:focus {
  outline: none;
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12);
}

/* ---------- Grid карточек сотрудников ---------- */
.gt-people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0 0 40px;
  padding-top: 8px;
}
@media (max-width: 1200px) { .gt-people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .gt-people-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 480px)  { .gt-people-grid { grid-template-columns: 1fr; } }

/* ---------- Карточка сотрудника ---------- */
.gt-person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--gt-bg-elevated, #FFFFFF);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--gt-shadow-card, 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06));
  transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1), box-shadow 280ms ease;
  cursor: pointer;
}
.gt-person-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(123, 97, 255, 0.2);
  z-index: 2;
}
.gt-person-card:focus-visible {
  outline: 3px solid rgba(123, 97, 255, 0.4);
  outline-offset: 2px;
}

/* Градиентная обложка (цвет зависит от роли) */
.gt-person-card__cover {
  position: relative;
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, var(--person-a, #EEF2FF) 0%, var(--person-b, #FDF4FF) 100%);
  overflow: hidden;
}
.gt-person-card__cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.4), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.3), transparent 50%);
}

/* Цветовые варианты по ролям — насыщенные пастели */
.gt-person-card--role-admin     { --person-a: #C7D2FE; --person-b: #FBCFE8; }
.gt-person-card--role-super     { --person-a: #A5B4FC; --person-b: #C4B5FD; }
.gt-person-card--role-mentor    { --person-a: #A7F3D0; --person-b: #99F6E4; }
.gt-person-card--role-course    { --person-a: #FDE68A; --person-b: #FED7AA; }
.gt-person-card--role-employee  { --person-a: #E4E4E7; --person-b: #CBD5E1; }

/* Chip роли в углу обложки */
.gt-person-card__role {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 26px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  color: var(--gt-text, #18181B);
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

/* Avatar — круг 88px, выступает вверх над body (margin-top: -44px) */
.gt-person-card__avatar {
  position: relative;
  margin: -44px auto 12px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #F4F4F5;
  border: 4px solid var(--gt-bg-elevated, #fff);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--gt-text-muted, #52525B);
  z-index: 2;
  flex-shrink: 0;
  overflow: hidden;
}
.gt-person-card__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Тело карточки */
.gt-person-card__body {
  padding: 0 20px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gt-person-card__name {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gt-text, #18181B);
  margin: 0;
  line-height: 1.25;
  min-height: 50px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gt-person-card__position {
  font-size: 13px;
  color: var(--gt-text-muted, #52525B);
  margin: 2px 0 0;
  min-height: 18px;
}
.gt-person-card__email {
  font-size: 13px;
  color: var(--gt-text-subtle, #A1A1AA);
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-person-card__meta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--gt-border-subtle, #F4F4F5);
  display: flex;
  justify-content: space-around;
  gap: 8px;
  font-size: 11px;
  color: var(--gt-text-muted, #52525B);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.gt-person-card__meta strong {
  display: block;
  font-size: 14px;
  color: var(--gt-text, #18181B);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  margin-bottom: 2px;
}

/* Actions — появляются на hover (delete/edit) */
.gt-person-card__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms, transform 200ms;
  z-index: 3;
}
@media (hover: hover) {
  .gt-person-card:hover .gt-person-card__actions {
    opacity: 1;
    transform: translateY(0);
  }
}
.gt-person-card__action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gt-text, #18181B);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background 160ms, transform 160ms;
}
.gt-person-card__action-btn:hover {
  background: #fff;
  transform: scale(1.08);
}
.gt-person-card__action-btn--danger { color: #DC2626; }

/* ============================================================
   Invitations cards (карточки приглашений)
   ============================================================ */

.gt-invite-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 40px;
}
@media (max-width: 1024px) { .gt-invite-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .gt-invite-grid { grid-template-columns: 1fr; } }

.gt-invite-card {
  position: relative;
  background: var(--gt-bg-elevated, #FFFFFF);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--gt-shadow-card, 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06));
  transition: transform 220ms ease, box-shadow 220ms ease;
  overflow: hidden;
}
.gt-invite-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(123, 97, 255, 0.16);
}
.gt-invite-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--invite-accent, #A1A1AA);
}
.gt-invite-card--active    { --invite-accent: linear-gradient(180deg, #7B61FF, #EC4899); }
.gt-invite-card--permanent { --invite-accent: linear-gradient(180deg, #3B82F6, #06B6D4); }
.gt-invite-card--used      { --invite-accent: linear-gradient(180deg, #10B981, #059669); }
.gt-invite-card--expired   { --invite-accent: linear-gradient(180deg, #EF4444, #DC2626); }

.gt-invite-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.gt-invite-card__id {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-subtle, #A1A1AA);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gt-invite-card__email {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gt-text, #18181B);
  margin: 0 0 4px;
  word-break: break-word;
}
.gt-invite-card__company {
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
}
.gt-invite-card__details {
  margin: 16px 0;
  padding: 14px;
  background: var(--gt-bg-sunken, #F4F4F5);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
  color: var(--gt-text-muted, #52525B);
}
.gt-invite-card__details dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--gt-text-subtle, #A1A1AA);
  margin-bottom: 2px;
}
.gt-invite-card__details dd {
  margin: 0;
  color: var(--gt-text, #18181B);
  font-weight: 500;
}
.gt-invite-card__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--gt-border-subtle, #F4F4F5);
}
.gt-invite-card__footer .gt-btn-v4 {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  font-size: 13px;
  padding: 0 14px;
}

/* ============================================================
   Parameter tiles (филиалы, должности)
   ============================================================ */

.gt-param-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 40px;
}
@media (max-width: 768px) { .gt-param-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .gt-param-grid { grid-template-columns: 1fr; } }

.gt-param-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  padding: 24px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--tile-a, #EEF2FF), var(--tile-b, #FDF4FF));
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease;
  color: var(--gt-text, #18181B);
  text-decoration: none;
}
.gt-param-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.4), transparent 45%),
    radial-gradient(circle at 10% 100%, rgba(255,255,255,.3), transparent 55%);
  pointer-events: none;
}
.gt-param-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(123, 97, 255, 0.18);
}

/* Цветовые варианты плиток (чередуются по индексу) */
.gt-param-tile:nth-child(6n+1) { --tile-a: #EEF2FF; --tile-b: #FCE7F3; }
.gt-param-tile:nth-child(6n+2) { --tile-a: #D1FAE5; --tile-b: #CCFBF1; }
.gt-param-tile:nth-child(6n+3) { --tile-a: #FEF3C7; --tile-b: #FED7AA; }
.gt-param-tile:nth-child(6n+4) { --tile-a: #DBEAFE; --tile-b: #E0E7FF; }
.gt-param-tile:nth-child(6n+5) { --tile-a: #FCE7F3; --tile-b: #FBCFE8; }
.gt-param-tile:nth-child(6n+6) { --tile-a: #FEE2E2; --tile-b: #FED7AA; }

.gt-param-tile__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.gt-param-tile__icon svg { width: 22px; height: 22px; color: var(--gt-text, #18181B); }
.gt-param-tile__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gt-text, #18181B);
  margin: 16px 0 4px;
  position: relative;
  z-index: 1;
}
.gt-param-tile__count {
  font-size: 13px;
  color: var(--gt-text-muted, #52525B);
  position: relative;
  z-index: 1;
}
.gt-param-tile__actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 200ms;
  z-index: 2;
}
@media (hover: hover) {
  .gt-param-tile:hover .gt-param-tile__actions { opacity: 1; }
}
.gt-param-tile__action-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gt-text, #18181B);
  transition: background 160ms, transform 160ms;
}
.gt-param-tile__action-btn:hover { background: #fff; transform: scale(1.08); }
.gt-param-tile__action-btn--danger { color: #DC2626; }
.gt-param-tile__action-btn svg { width: 16px; height: 16px; }

/* ---------- Dark mode ---------- */
body.dark-mode .gt-person-card__avatar { background: #27272F; border-color: #15151A; color: #E4E4E7; }
body.dark-mode .gt-person-card__role { background: rgba(23, 23, 27, 0.9); color: #F5F5F7; }
body.dark-mode .gt-person-card__action-btn { background: rgba(23, 23, 27, 0.92); color: #F5F5F7; }
body.dark-mode .gt-person-card--role-admin     { --person-a: #312E81; --person-b: #4C1D95; }
body.dark-mode .gt-person-card--role-super     { --person-a: #1E3A8A; --person-b: #312E81; }
body.dark-mode .gt-person-card--role-mentor    { --person-a: #064E3B; --person-b: #134E4A; }
body.dark-mode .gt-person-card--role-course    { --person-a: #78350F; --person-b: #7C2D12; }
body.dark-mode .gt-person-card--role-employee  { --person-a: #27272A; --person-b: #3F3F46; }
body.dark-mode .gt-param-tile::before { opacity: 0.5; }
body.dark-mode .gt-param-tile__icon { background: rgba(255, 255, 255, 0.12); }
body.dark-mode .gt-param-tile__icon svg { color: #F5F5F7; }
body.dark-mode .gt-param-tile__title { color: #F5F5F7; }
body.dark-mode .gt-param-tile__action-btn { background: rgba(15, 15, 20, 0.85); color: #F5F5F7; }
body.dark-mode .gt-param-tile:nth-child(6n+1) { --tile-a: #2E1065; --tile-b: #831843; }
body.dark-mode .gt-param-tile:nth-child(6n+2) { --tile-a: #064E3B; --tile-b: #134E4A; }
body.dark-mode .gt-param-tile:nth-child(6n+3) { --tile-a: #78350F; --tile-b: #7C2D12; }
body.dark-mode .gt-param-tile:nth-child(6n+4) { --tile-a: #1E3A8A; --tile-b: #312E81; }
body.dark-mode .gt-param-tile:nth-child(6n+5) { --tile-a: #831843; --tile-b: #9D174D; }
body.dark-mode .gt-param-tile:nth-child(6n+6) { --tile-a: #7F1D1D; --tile-b: #7C2D12; }

@media (prefers-reduced-motion: reduce) {
  .gt-person-card, .gt-invite-card, .gt-param-tile { transition: none; }
  .gt-person-card:hover, .gt-invite-card:hover, .gt-param-tile:hover { transform: none; }
}

/* ---------- Pagination (красиво: круглые кнопки + per_page select) ---------- */
.gt-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--gt-bg-elevated, #FAFAFA);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: var(--gt-r-lg, 16px);
}
.gt-pagination__info {
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
}
.gt-pagination__info strong {
  color: var(--gt-text, #18181B);
  font-weight: 600;
}
.gt-pagination__per {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
}
.gt-pagination__per-select {
  height: 36px;
  padding: 0 32px 0 12px;
  background: var(--gt-bg, #fff);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--gt-text, #18181B);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2352525B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 160ms;
}
.gt-pagination__per-select:hover { border-color: var(--gt-accent, #7B61FF); }
.gt-pagination__per-select:focus {
  outline: none;
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.12);
}

.gt-pagination__nav {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gt-pagination__btn,
.gt-pagination__page {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--gt-text, #18181B);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms, color 160ms, border-color 160ms, transform 160ms;
}
.gt-pagination__btn:hover,
.gt-pagination__page:hover {
  background: var(--gt-bg-sunken, #F4F4F5);
  border-color: var(--gt-border, #E4E4E7);
  transform: translateY(-1px);
}
.gt-pagination__page--active {
  background: var(--gt-accent, #7B61FF);
  color: #fff;
  font-weight: 600;
  cursor: default;
  box-shadow: 0 6px 16px rgba(123, 97, 255, 0.25);
}
.gt-pagination__page--active:hover {
  background: var(--gt-accent, #7B61FF);
  color: #fff;
  transform: none;
  border-color: transparent;
}
.gt-pagination__dots {
  min-width: 28px;
  color: var(--gt-text-subtle, #A1A1AA);
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
  user-select: none;
}
.gt-pagination__btn svg {
  width: 16px;
  height: 16px;
}
.gt-pagination__btn--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

body.dark-mode .gt-pagination__btn:hover,
body.dark-mode .gt-pagination__page:hover {
  background: var(--gt-bg-sunken);
  border-color: var(--gt-border);
}
body.dark-mode .gt-pagination__page--active {
  box-shadow: 0 6px 16px rgba(123, 97, 255, 0.4);
}

@media (max-width: 640px) {
  .gt-pagination { flex-direction: column; align-items: stretch; }
  .gt-pagination__nav { justify-content: center; }
  .gt-pagination__per { justify-content: center; }
}

/* ---------- End of Wave 3 Phase E — People & Directories ---------- */

/* ---------- Landing — gt-steps «Как это работает» (replace legacy .how/.way) ---------- */
.gt-steps {
  position: relative;
  padding: clamp(64px, 9vw, 128px) 0;
  background: var(--gt-bg, #ffffff);
  overflow: hidden;
}
.gt-steps::before {
  content: "";
  position: absolute;
  inset: auto -10% -40% 30%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(123,97,255,0.08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.gt-steps__container {
  position: relative;
  z-index: 1;
  max-width: var(--gt-container-wide);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}
.gt-steps__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5vw, 72px);
}
.gt-steps__eyebrow {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gt-accent-soft, #F3F0FF);
  color: var(--gt-accent, #7B61FF);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gt-steps__title {
  margin: 0 0 16px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--gt-text, #0E0F12);
}
.gt-steps__accent {
  background: linear-gradient(120deg, var(--gt-accent, #7B61FF) 0%, var(--gt-accent-alt, #4F46E5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.gt-steps__subtitle {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--gt-text-soft, #4B4F5A);
}
.gt-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}
.gt-steps__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: 24px;
  background: var(--gt-surface, #ffffff);
  border: 1px solid var(--gt-border, rgba(14,15,18,0.08));
  box-shadow: 0 2px 12px rgba(14,15,18,0.04);
  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
  overflow: hidden;
}
.gt-steps__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(123,97,255,0) 0%, rgba(123,97,255,0) 60%, rgba(123,97,255,0.35) 100%);
  -webkit-mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.gt-steps__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(79,70,229,0.12), 0 2px 8px rgba(14,15,18,0.04);
  border-color: transparent;
}
.gt-steps__card:hover::before { opacity: 1; }
.gt-steps__num {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(44px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--gt-accent, #7B61FF) 0%, var(--gt-accent-alt, #4F46E5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}
.gt-steps__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--gt-accent-soft, #F3F0FF);
  margin-bottom: 20px;
  transition: background 0.28s ease, transform 0.28s ease;
}
.gt-steps__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}
.gt-steps__card:hover .gt-steps__icon {
  background: linear-gradient(135deg, var(--gt-accent, #7B61FF) 0%, var(--gt-accent-alt, #4F46E5) 100%);
  transform: rotate(-3deg) scale(1.04);
}
.gt-steps__card:hover .gt-steps__icon svg { filter: brightness(0) invert(1); }
.gt-steps__card-title {
  margin: 0 0 10px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--gt-text, #0E0F12);
}
.gt-steps__card-text {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gt-text-soft, #4B4F5A);
}
.gt-steps__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 4vw, 56px);
}
.gt-steps__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--gt-accent, #7B61FF);
  color: #ffffff;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(123,97,255,0.35);
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}
.gt-steps__cta:hover {
  background: var(--gt-accent-hover, #6B51F0);
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(123,97,255,0.45);
  color: #ffffff;
  text-decoration: none;
}

/* Tablet */
@media (max-width: 960px) {
  .gt-steps__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Dark mode */
[data-theme="dark"] .gt-steps,
body.dark-mode .gt-steps {
  background: var(--gt-bg, #0E0F12);
}
[data-theme="dark"] .gt-steps::before,
body.dark-mode .gt-steps::before {
  background: radial-gradient(circle at center, rgba(123,97,255,0.18) 0%, transparent 60%);
}
[data-theme="dark"] .gt-steps__eyebrow,
body.dark-mode .gt-steps__eyebrow {
  background: rgba(123,97,255,0.18);
  color: #B7A7FF;
}
[data-theme="dark"] .gt-steps__title,
body.dark-mode .gt-steps__title { color: #F5F5F7; }
[data-theme="dark"] .gt-steps__subtitle,
body.dark-mode .gt-steps__subtitle { color: #A5A8B2; }
[data-theme="dark"] .gt-steps__card,
body.dark-mode .gt-steps__card {
  background: #17181D;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
[data-theme="dark"] .gt-steps__card-title,
body.dark-mode .gt-steps__card-title { color: #F5F5F7; }
[data-theme="dark"] .gt-steps__card-text,
body.dark-mode .gt-steps__card-text { color: #A5A8B2; }
[data-theme="dark"] .gt-steps__icon,
body.dark-mode .gt-steps__icon { background: rgba(123,97,255,0.14); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gt-steps__card,
  .gt-steps__icon,
  .gt-steps__cta { transition: none; }
  .gt-steps__card:hover { transform: none; }
  .gt-steps__card:hover .gt-steps__icon { transform: none; }
}
/* ---------- End of Landing — gt-steps ---------- */



/* ============================================================
   Wave 3 Phase B — Profile (/user и /users/{id})
   Один Blade-файл обслуживает self и other-режимы.
   Переиспользует: .gt-page, .gt-page-hero, .gt-insights__kpi-card,
   .gt-insights__feed, .gt-chip-v4, .gt-btn-v4, .gt-empty-state.
   ============================================================ */

/* Главная обёртка страницы профиля — в self один столбец,
   в other добавляется правая колонка activity-feed. */
.gt-profile {
  max-width: var(--gt-container-max, 1200px);
  margin: 0 auto;
  padding: 32px 24px 80px;
}
@media (max-width: 768px) {
  .gt-profile { padding: 20px 16px 48px; }
}

/* ---------- Hero ---------- */
.gt-profile__hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px;
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 20px;
  box-shadow: var(--gt-shadow-card, 0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06));
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
}
.gt-profile__hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--gt-accent-bg, rgba(123,97,255,.08)) 0%, transparent 65%);
  pointer-events: none;
}
@media (max-width: 768px) {
  .gt-profile__hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px 20px;
    gap: 16px;
  }
}

.gt-profile__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gt-bg-sunken, #F4F4F5);
  border: 3px solid var(--gt-bg-elevated, #FFFFFF);
  box-shadow: 0 6px 24px rgba(17, 17, 26, 0.08), 0 0 0 1px var(--gt-border, #E4E4E7);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.gt-profile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1/1;
}
.gt-profile__avatar-placeholder {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--gt-accent, #7B61FF);
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .gt-profile__avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto;
  }
  .gt-profile__avatar-placeholder { font-size: 36px; }
}

.gt-profile__info {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.gt-profile__eyebrow {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gt-text-muted, #52525B);
  margin-bottom: 6px;
}
.gt-profile__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--gt-text, #18181B);
  margin: 0 0 14px;
  word-break: break-word;
}
.gt-profile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
@media (max-width: 768px) {
  .gt-profile__chips { justify-content: center; }
}

.gt-profile__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--gt-text-muted, #52525B);
}
.gt-profile__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gt-profile__meta-item strong {
  color: var(--gt-text, #18181B);
  font-weight: 600;
}
@media (max-width: 768px) {
  .gt-profile__meta { justify-content: center; }
}

.gt-profile__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 1;
  align-self: start;
}
@media (max-width: 768px) {
  .gt-profile__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- Layout — main + aside ---------- */
.gt-profile__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.gt-profile__grid--with-aside {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
@media (max-width: 1023px) {
  .gt-profile__grid--with-aside { grid-template-columns: 1fr; }
}

.gt-profile__main { min-width: 0; }
.gt-profile__aside { min-width: 0; }

/* ---------- KPI ---------- */
.gt-profile__kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 768px) {
  .gt-profile__kpi-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* Более крупные цифры — как просил план */
.gt-profile__kpi-grid .gt-insights__kpi-value {
  font-size: clamp(40px, 6vw, 72px);
}

/* ---------- Section header для блоков курсов/активности ---------- */
.gt-profile__section {
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
}
.gt-profile__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.gt-profile__section-title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gt-text, #18181B);
  margin: 0;
}
.gt-profile__section-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--gt-text-muted, #52525B);
  padding: 4px 10px;
  background: var(--gt-bg-sunken, #F4F4F5);
  border-radius: 999px;
}
.gt-profile__category {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gt-text-muted, #52525B);
  margin: 18px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gt-border-subtle, #F4F4F5);
}
.gt-profile__category:first-child { margin-top: 0; }

/* ---------- Карточка курса ---------- */
.gt-profile__courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gt-profile__course-card {
  background: var(--gt-bg, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.gt-profile__course-card:hover {
  transform: translateY(-2px);
  border-color: var(--gt-accent, #7B61FF);
  box-shadow: 0 10px 28px rgba(123, 97, 255, 0.08);
}
.gt-profile__course-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.gt-profile__course-cover {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--gt-accent-bg, rgba(123,97,255,.12)) 0%, rgba(236, 72, 153, .08) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gt-profile__course-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gt-profile__course-cover-fallback {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--gt-accent, #7B61FF);
  opacity: .5;
}
.gt-profile__course-body { min-width: 0; flex: 1; }
.gt-profile__course-title {
  display: block;
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gt-text, #18181B);
  text-decoration: none;
  margin-bottom: 6px;
  line-height: 1.3;
}
.gt-profile__course-title:hover { color: var(--gt-accent, #7B61FF); }
.gt-profile__course-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gt-profile__course-status--new      { background: var(--gt-accent-bg, rgba(123,97,255,.12)); color: var(--gt-accent, #7B61FF); }
.gt-profile__course-status--progress { background: #FEF3C7; color: #92400E; }
.gt-profile__course-status--done     { background: #DCFCE7; color: #15803D; }
[data-theme="dark"] .gt-profile__course-status--progress,
body.dark-mode .gt-profile__course-status--progress { background: rgba(234, 179, 8, .18); color: #FCD34D; }
[data-theme="dark"] .gt-profile__course-status--done,
body.dark-mode .gt-profile__course-status--done { background: rgba(21, 128, 61, .2); color: #4ADE80; }

.gt-profile__progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gt-profile__progress-track {
  flex: 1;
  height: 6px;
  background: var(--gt-bg-sunken, #F4F4F5);
  border-radius: 999px;
  overflow: hidden;
}
.gt-profile__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gt-accent, #7B61FF) 0%, #EC4899 100%);
  border-radius: 999px;
  transition: width .4s ease;
}
.gt-profile__progress-value {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--gt-text, #18181B);
  min-width: 40px;
  text-align: right;
}

.gt-profile__course-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  font-size: 12px;
  color: var(--gt-text-muted, #52525B);
}
.gt-profile__course-meta-item strong {
  display: block;
  color: var(--gt-text, #18181B);
  font-weight: 600;
  font-size: 13px;
  margin-top: 2px;
}

.gt-profile__course-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--gt-border-subtle, #F4F4F5);
}
.gt-profile__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--gt-bg-sunken, #F4F4F5);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--gt-text-muted, #52525B);
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease;
}
.gt-profile__icon-btn:hover {
  background: var(--gt-accent-bg, rgba(123,97,255,.08));
  color: var(--gt-accent, #7B61FF);
  border-color: var(--gt-accent, #7B61FF);
}
.gt-profile__icon-btn--danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border-color: #DC2626;
}
.gt-profile__icon-btn img {
  width: 14px;
  height: 14px;
  opacity: .7;
}

/* ---------- Activity feed (только other) ---------- */
.gt-profile__aside .gt-profile__section { position: sticky; top: 80px; }
@media (max-width: 1023px) {
  .gt-profile__aside .gt-profile__section { position: static; }
}

/* ---------- Calendar (модернизация существующего) ---------- */
.gt-profile__calendar-card {
  background: var(--gt-bg-elevated, #FFFFFF);
  border: 1px solid var(--gt-border, #E4E4E7);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 24px;
  overflow: hidden;
}
.gt-profile__calendar-card .cart-user-admin__container {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.gt-profile__calendar-card .cart-user-admin__title {
  font-family: var(--gt-font-display, 'Manrope', sans-serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gt-text, #18181B);
  margin-bottom: 16px;
}
.gt-profile__calendar-card .cart-user-admin__info {
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* ---------- Dark mode ---------- */
body.dark-mode .gt-profile__hero,
body.dark-mode .gt-profile__section,
body.dark-mode .gt-profile__calendar-card {
  background: var(--gt-bg-elevated);
  border-color: var(--gt-border);
}
body.dark-mode .gt-profile__avatar {
  border-color: var(--gt-bg-elevated);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--gt-border);
}
body.dark-mode .gt-profile__course-card {
  background: var(--gt-bg-sunken);
  border-color: var(--gt-border);
}
body.dark-mode .gt-profile__course-card:hover {
  border-color: var(--gt-accent);
}
body.dark-mode .gt-profile__icon-btn {
  background: var(--gt-bg);
  color: var(--gt-text-muted);
}
body.dark-mode .gt-profile__progress-track {
  background: var(--gt-bg);
}
body.dark-mode .gt-profile__section-count {
  background: var(--gt-bg);
  color: var(--gt-text-muted);
}

/* End Wave 3 Phase B */

/* ============================================================
   Landing — gt-proof (social proof)
   Wave 2 Task 2 (2026-04-23): клиент + цифры + отзывы
   ============================================================ */
.gt-proof {
  padding: var(--gt-space-120) 0;
  background: linear-gradient(180deg, var(--gt-bg-elevated) 0%, var(--gt-bg) 100%);
  position: relative;
  overflow: hidden;
}
.gt-proof::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 420px at 18% 12%, rgba(123, 97, 255, 0.10), transparent 60%),
    radial-gradient(520px 360px at 82% 88%, rgba(167, 139, 250, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.gt-proof__container {
  position: relative;
  z-index: 1;
  max-width: var(--gt-container-wide);
  margin: 0 auto;
  padding: 0 24px;
}
.gt-proof__head {
  text-align: center;
  margin-bottom: 64px;
}
.gt-proof__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gt-accent);
  margin: 0 0 14px;
}
.gt-proof__title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h2);
  line-height: var(--gt-lh-h2);
  font-weight: var(--gt-w-bold);
  letter-spacing: var(--gt-ls-heading);
  color: var(--gt-text);
  margin: 0 0 14px;
}
.gt-proof__subtitle {
  font-size: 18px;
  color: var(--gt-text-muted);
  margin: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.gt-proof__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 72px;
  padding: 56px 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--gt-border);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--gt-shadow-soft);
}
.gt-proof__stat {
  text-align: center;
  position: relative;
}
.gt-proof__stat + .gt-proof__stat::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--gt-border) 30%, var(--gt-border) 70%, transparent 100%);
}
.gt-proof__stat-number {
  font-family: var(--gt-font-display);
  font-size: 72px;
  line-height: 1;
  font-weight: var(--gt-w-bold);
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A78BFA 60%, #C4B5FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  display: inline-block;
}
.gt-proof__stat-sub {
  font-size: 0.55em;
  vertical-align: top;
  margin-left: 2px;
  line-height: 1;
}
.gt-proof__stat-label {
  font-size: 15px;
  color: var(--gt-text-muted);
  font-weight: var(--gt-w-medium);
  letter-spacing: 0.01em;
}

.gt-proof__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  margin-bottom: 80px;
  padding: 36px 24px;
  border-top: 1px solid var(--gt-border);
  border-bottom: 1px solid var(--gt-border);
  flex-wrap: wrap;
}
.gt-proof__logos-label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--gt-w-semibold);
  color: var(--gt-text-subtle);
  margin-right: 8px;
}
.gt-proof__logo {
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(24, 24, 27, 0.4);
  text-transform: uppercase;
  transition: color var(--gt-t-base);
  white-space: nowrap;
}
.gt-proof__logo:hover { color: rgba(24, 24, 27, 0.75); }
.gt-proof__logo--placeholder {
  color: rgba(24, 24, 27, 0.22);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-size: 14px;
  font-style: italic;
}

.gt-proof__testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.gt-proof__quote {
  background: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: 20px;
  padding: 40px;
  margin: 0;
  box-shadow: var(--gt-shadow-soft);
  transition: transform var(--gt-t-base), box-shadow var(--gt-t-base);
  position: relative;
}
.gt-proof__quote::before {
  content: "“";
  position: absolute;
  top: 12px;
  left: 24px;
  font-family: 'Manrope', Georgia, serif;
  font-size: 96px;
  line-height: 1;
  color: var(--gt-accent);
  opacity: 0.16;
  pointer-events: none;
}
.gt-proof__quote:hover {
  transform: translateY(-4px);
  box-shadow: var(--gt-shadow-lift);
}
.gt-proof__quote-text {
  font-size: 19px;
  line-height: 1.55;
  font-weight: var(--gt-w-medium);
  color: var(--gt-text);
  margin: 0 0 24px;
  position: relative;
}
.gt-proof__quote-caption {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gt-proof__author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A78BFA 100%);
  color: #FFFFFF;
  font-family: var(--gt-font-display);
  font-weight: var(--gt-w-bold);
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(123, 97, 255, 0.28);
}
.gt-proof__author-name {
  font-weight: var(--gt-w-semibold);
  font-size: 15px;
  color: var(--gt-text);
  margin-bottom: 2px;
  line-height: 1.3;
}
.gt-proof__author-role {
  font-size: 13px;
  color: var(--gt-text-muted);
  line-height: 1.3;
}

/* Responsive */
@media (max-width: 1024px) {
  .gt-proof__stat-number { font-size: 56px; }
  .gt-proof__stats { padding: 40px 24px; gap: 12px; }
  .gt-proof__stat + .gt-proof__stat::before { left: -6px; }
}
@media (max-width: 768px) {
  .gt-proof__stats { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  .gt-proof__stat + .gt-proof__stat::before {
    left: 20%; right: 20%; top: -14px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--gt-border) 40%, var(--gt-border) 60%, transparent 100%);
  }
  .gt-proof__testimonials { grid-template-columns: 1fr; }
  .gt-proof__stat-number { font-size: 52px; }
  .gt-proof__title { font-size: 28px; }
  .gt-proof__logos { gap: 24px; padding: 24px 12px; }
  .gt-proof__logo { font-size: 16px; letter-spacing: 0.18em; }
  .gt-proof__quote { padding: 32px 24px; }
}

/* Dark mode */
[data-theme="dark"] .gt-proof,
body.dark-mode .gt-proof {
  background: linear-gradient(180deg, var(--gt-bg-elevated) 0%, var(--gt-bg) 100%);
}
[data-theme="dark"] .gt-proof__stats,
body.dark-mode .gt-proof__stats {
  background: rgba(21, 21, 26, 0.72);
  border-color: var(--gt-border);
}
[data-theme="dark"] .gt-proof__stat + .gt-proof__stat::before,
body.dark-mode .gt-proof__stat + .gt-proof__stat::before {
  background: linear-gradient(180deg, transparent 0%, var(--gt-border) 30%, var(--gt-border) 70%, transparent 100%);
}
[data-theme="dark"] .gt-proof__logo,
body.dark-mode .gt-proof__logo {
  color: rgba(245, 245, 247, 0.38);
}
[data-theme="dark"] .gt-proof__logo:hover,
body.dark-mode .gt-proof__logo:hover {
  color: rgba(245, 245, 247, 0.75);
}
[data-theme="dark"] .gt-proof__logo--placeholder,
body.dark-mode .gt-proof__logo--placeholder {
  color: rgba(245, 245, 247, 0.22);
}
[data-theme="dark"] .gt-proof__quote,
body.dark-mode .gt-proof__quote {
  background: var(--gt-bg-elevated);
}

@media (prefers-reduced-motion: reduce) {
  .gt-proof__quote { transition: none; }
  .gt-proof__quote:hover { transform: none; }
}
/* ---------- End of Landing — gt-proof ---------- */

/* ============================================================
   gt-3d — 3D illustrations (Fluentui Emoji, MIT)
   Wave 3 Task 5 (2026-04-23): /custom/images/3d/*.png
   ============================================================ */
.gt-3d {
  display: inline-block;
  width: auto;
  max-width: 100%;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.16)) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.08));
  will-change: transform;
}
.gt-3d--sm   { width: 36px;  height: 36px; }
.gt-3d--md   { width: 56px;  height: 56px; }
.gt-3d--lg   { width: 72px;  height: 72px; }
.gt-3d--xl   { width: 96px;  height: 96px; }
.gt-3d--2xl  { width: 128px; height: 128px; }
.gt-3d--3xl  { width: 160px; height: 160px; }

.gt-3d--glow {
  filter:
    drop-shadow(0 12px 24px rgba(15, 23, 42, 0.16))
    drop-shadow(0 0 36px rgba(123, 97, 255, 0.32));
}

@keyframes gt-3d-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@keyframes gt-3d-float-alt {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50%      { transform: translateY(-10px) rotate(-3deg); }
}
.gt-3d--float     { animation: gt-3d-float 5.5s ease-in-out infinite; }
.gt-3d--float-alt { animation: gt-3d-float-alt 6s ease-in-out infinite; }

/* Decorative floating 3D icons in hero */
.gt-hero__visual { position: relative; }
.gt-hero__deco {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.gt-hero__deco--rocket {
  top: -28px;
  right: -28px;
  width: 120px; height: 120px;
}
.gt-hero__deco--cap {
  bottom: -24px;
  left: -32px;
  width: 96px; height: 96px;
}
.gt-hero__deco--bulb {
  top: 50%;
  right: -64px;
  width: 72px; height: 72px;
  transform: translateY(-50%);
}

/* Bento cards — 3D icon replacement */
.gt-bento__icon--3d {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-bottom: 16px;
  display: block;
}
.gt-bento__icon--3d img {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.14)) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.06));
  transition: transform var(--gt-t-base);
}
.gt-bento__card:hover .gt-bento__icon--3d img {
  transform: translateY(-4px) rotate(-4deg);
}
.gt-bento__card--ai .gt-bento__icon--3d img {
  width: 108px;
  height: 108px;
}

/* Steps cards — 3D icon */
.gt-steps__icon--3d {
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 20px;
  display: block;
}
.gt-steps__icon--3d img {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.14)) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.06));
  transition: transform var(--gt-t-base);
}
.gt-steps__card:hover .gt-steps__icon--3d img {
  transform: translateY(-4px) scale(1.05);
}

/* Social proof — decorative 3D bulb */
.gt-proof__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
}
.gt-proof__deco--left {
  top: 28px;
  left: 4%;
  width: 88px; height: 88px;
}
.gt-proof__deco--right {
  bottom: 56px;
  right: 5%;
  width: 96px; height: 96px;
}

/* Responsive */
@media (max-width: 1024px) {
  .gt-hero__deco--rocket { width: 84px; height: 84px; top: -16px; right: -8px; }
  .gt-hero__deco--cap    { width: 72px; height: 72px; bottom: -12px; left: -12px; }
  .gt-hero__deco--bulb   { display: none; }
  .gt-proof__deco--left  { width: 64px; height: 64px; }
  .gt-proof__deco--right { width: 72px; height: 72px; }
  .gt-bento__icon--3d img { width: 72px; height: 72px; }
  .gt-bento__card--ai .gt-bento__icon--3d img { width: 88px; height: 88px; }
  .gt-steps__icon--3d img { width: 72px; height: 72px; }
}
@media (max-width: 640px) {
  .gt-hero__deco--rocket,
  .gt-hero__deco--cap { display: none; }
  .gt-proof__deco { display: none; }
  .gt-bento__icon--3d img,
  .gt-bento__card--ai .gt-bento__icon--3d img,
  .gt-steps__icon--3d img { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .gt-3d--float,
  .gt-3d--float-alt { animation: none; }
  .gt-bento__card:hover .gt-bento__icon--3d img,
  .gt-steps__card:hover .gt-steps__icon--3d img { transform: none; }
}
/* ---------- End of gt-3d ---------- */

/* ============================================================
   Certificate — verify page
   Wave 3 Task 3 (2026-04-23)
   ============================================================ */
.gt-verify {
  padding: var(--gt-space-120) 0;
  background: linear-gradient(180deg, var(--gt-bg-elevated) 0%, var(--gt-bg) 100%);
  min-height: 70vh;
}
.gt-verify__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}
.gt-verify__card {
  background: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: 24px;
  padding: 56px 48px;
  box-shadow: var(--gt-shadow-soft);
  text-align: center;
}
.gt-verify__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--gt-r-pill);
  font-family: var(--gt-font-display);
  font-weight: var(--gt-w-bold);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}
.gt-verify__badge svg { width: 16px; height: 16px; }
.gt-verify__badge--ok {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.gt-verify__badge--fail {
  background: rgba(239, 68, 68, 0.08);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.gt-verify__title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h2);
  line-height: var(--gt-lh-h2);
  font-weight: var(--gt-w-bold);
  letter-spacing: var(--gt-ls-heading);
  color: var(--gt-text);
  margin: 0 0 14px;
}
.gt-verify__subtitle {
  font-size: 16px;
  color: var(--gt-text-muted);
  margin: 0 0 36px;
  line-height: 1.55;
}
.gt-verify__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-align: left;
  margin: 0 0 36px;
  border-top: 1px solid var(--gt-border);
}
.gt-verify__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gt-border);
}
.gt-verify__row dt {
  font-size: 13px;
  color: var(--gt-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: var(--gt-w-semibold);
  margin: 0;
  align-self: center;
}
.gt-verify__row dd {
  font-size: 16px;
  color: var(--gt-text);
  font-weight: var(--gt-w-medium);
  margin: 0;
}
.gt-verify__row code {
  background: var(--gt-accent-bg);
  color: var(--gt-accent);
  padding: 2px 10px;
  border-radius: 6px;
  font-family: 'Manrope', ui-monospace, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.gt-verify__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--gt-r-pill);
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A855F7 100%);
  color: #FFFFFF;
  font-weight: var(--gt-w-semibold);
  font-size: 15px;
  text-decoration: none;
  transition: transform var(--gt-t-fast), box-shadow var(--gt-t-fast);
  box-shadow: 0 8px 24px rgba(123, 97, 255, 0.32);
}
.gt-verify__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(123, 97, 255, 0.42);
}
.gt-verify__uuid {
  font-size: 13px;
  color: var(--gt-text-subtle);
}
.gt-verify__uuid code {
  background: var(--gt-bg-sunken);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: ui-monospace, monospace;
}

@media (max-width: 640px) {
  .gt-verify__card { padding: 36px 24px; }
  .gt-verify__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .gt-verify__row dt { font-size: 12px; }
  .gt-verify__title { font-size: 26px; }
}

[data-theme="dark"] .gt-verify__card,
body.dark-mode .gt-verify__card {
  background: var(--gt-bg-elevated);
}
/* ---------- End of Certificate verify ---------- */

/* ============================================================
   Info pages — FAQ / About / Contacts (Wave 3 Task 4, 2026-04-23)
   ============================================================ */
.gt-info {
  padding: var(--gt-space-120) 0;
  background: linear-gradient(180deg, var(--gt-bg) 0%, var(--gt-bg-elevated) 100%);
  min-height: 70vh;
}
.gt-info__container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
.gt-info__head {
  text-align: center;
  margin-bottom: 64px;
}
.gt-info__eyebrow,
.gt-info__eyebrop {
  font-size: 13px;
  font-weight: var(--gt-w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gt-accent);
  margin: 0 0 14px;
}
.gt-info__title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h1);
  line-height: var(--gt-lh-h1);
  font-weight: var(--gt-w-bold);
  letter-spacing: var(--gt-ls-heading);
  color: var(--gt-text);
  margin: 0 0 18px;
}
.gt-info__subtitle {
  font-size: 18px;
  line-height: 1.55;
  color: var(--gt-text-muted);
  margin: 0;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* FAQ accordion */
.gt-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 64px;
}
.gt-faq__item {
  background: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-r-lg);
  overflow: hidden;
  transition: border-color var(--gt-t-base), box-shadow var(--gt-t-base);
}
.gt-faq__item[open] {
  border-color: rgba(123, 97, 255, 0.36);
  box-shadow: var(--gt-shadow-soft);
}
.gt-faq__item summary {
  list-style: none;
  padding: 22px 28px;
  cursor: pointer;
  font-family: var(--gt-font-display);
  font-size: 18px;
  font-weight: var(--gt-w-semibold);
  color: var(--gt-text);
  position: relative;
  padding-right: 56px;
  transition: color var(--gt-t-base);
}
.gt-faq__item summary::-webkit-details-marker { display: none; }
.gt-faq__item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gt-text-muted);
  border-bottom: 2px solid var(--gt-text-muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--gt-t-base), border-color var(--gt-t-base);
}
.gt-faq__item[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
  border-color: var(--gt-accent);
}
.gt-faq__item summary:hover { color: var(--gt-accent); }
.gt-faq__a {
  padding: 0 28px 24px;
  color: var(--gt-text-muted);
  font-size: 16px;
  line-height: 1.65;
}
.gt-faq__a p { margin: 0 0 12px; }
.gt-faq__a p:last-child { margin-bottom: 0; }
.gt-faq__a a {
  color: var(--gt-accent);
  font-weight: var(--gt-w-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 97, 255, 0.32);
}
.gt-faq__a a:hover { border-bottom-color: var(--gt-accent); }

/* About blocks */
.gt-about__blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 64px;
}
.gt-about__block {
  position: relative;
  padding: 40px 40px 40px 80px;
  background: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-r-lg);
  box-shadow: var(--gt-shadow-soft);
}
.gt-about__num {
  position: absolute;
  top: 32px;
  left: 32px;
  font-family: var(--gt-font-display);
  font-size: 32px;
  font-weight: var(--gt-w-bold);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A855F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.gt-about__block h2 {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h3);
  line-height: var(--gt-lh-h3);
  font-weight: var(--gt-w-bold);
  letter-spacing: var(--gt-ls-heading);
  color: var(--gt-text);
  margin: 0 0 14px;
}
.gt-about__block p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gt-text-muted);
  margin: 0 0 12px;
}
.gt-about__block p:last-child { margin-bottom: 0; }
.gt-about__block ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.gt-about__block ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: var(--gt-text-muted);
  font-size: 16px;
  line-height: 1.55;
}
.gt-about__block ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A855F7 100%);
  box-shadow: 0 2px 6px rgba(123, 97, 255, 0.3);
}
.gt-about__block strong { color: var(--gt-text); font-weight: var(--gt-w-semibold); }
.gt-about__block a {
  color: var(--gt-accent);
  font-weight: var(--gt-w-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 97, 255, 0.32);
}

/* Contacts */
.gt-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.gt-contacts__card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 28px;
  background: var(--gt-bg);
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-r-lg);
  box-shadow: var(--gt-shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform var(--gt-t-base), box-shadow var(--gt-t-base), border-color var(--gt-t-base);
}
.gt-contacts__card:hover:not(.gt-contacts__card--static) {
  transform: translateY(-4px);
  box-shadow: var(--gt-shadow-lift);
  border-color: rgba(123, 97, 255, 0.32);
}
.gt-contacts__card img { flex-shrink: 0; }
.gt-contacts__label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gt-text-subtle);
  font-weight: var(--gt-w-semibold);
  margin-bottom: 6px;
}
.gt-contacts__value {
  font-family: var(--gt-font-display);
  font-size: 18px;
  font-weight: var(--gt-w-bold);
  color: var(--gt-text);
  margin-bottom: 6px;
  word-break: break-word;
}
.gt-contacts__hint {
  font-size: 14px;
  color: var(--gt-text-muted);
  line-height: 1.55;
}

/* Contact form */
.gt-contact-form__wrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  padding: 48px;
  background: linear-gradient(135deg, var(--gt-accent-bg) 0%, rgba(236, 72, 153, 0.04) 100%);
  border: 1px solid var(--gt-border);
  border-radius: 24px;
  margin-bottom: 64px;
}
.gt-contact-form__title {
  font-family: var(--gt-font-display);
  font-size: var(--gt-h3);
  line-height: var(--gt-lh-h3);
  font-weight: var(--gt-w-bold);
  color: var(--gt-text);
  margin: 0 0 16px;
  letter-spacing: var(--gt-ls-heading);
}
.gt-contact-form__intro p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gt-text-muted);
  margin: 0 0 16px;
}
.gt-contact-form__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gt-contact-form__bullets li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--gt-text-muted);
  line-height: 1.5;
}
.gt-contact-form__bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gt-accent);
  font-weight: var(--gt-w-bold);
}
.gt-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.gt-contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gt-contact-form__field span {
  font-size: 13px;
  font-weight: var(--gt-w-semibold);
  color: var(--gt-text);
  letter-spacing: 0.02em;
}
.gt-contact-form__field input,
.gt-contact-form__field textarea {
  padding: 12px 16px;
  border: 1px solid var(--gt-border);
  border-radius: 10px;
  background: var(--gt-bg);
  color: var(--gt-text);
  font-family: var(--gt-font-body);
  font-size: 15px;
  transition: border-color var(--gt-t-fast), box-shadow var(--gt-t-fast);
}
.gt-contact-form__field input:focus,
.gt-contact-form__field textarea:focus {
  outline: none;
  border-color: var(--gt-accent);
  box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.14);
}
.gt-contact-form__field textarea { resize: vertical; min-height: 120px; }
.gt-contact-form__submit {
  margin-top: 8px;
  padding: 14px 28px;
  border-radius: var(--gt-r-pill);
  border: none;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A855F7 100%);
  color: #FFFFFF;
  font-family: var(--gt-font-display);
  font-weight: var(--gt-w-semibold);
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--gt-t-fast), box-shadow var(--gt-t-fast);
  box-shadow: 0 8px 24px rgba(123, 97, 255, 0.32);
  align-self: flex-start;
}
.gt-contact-form__submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(123, 97, 255, 0.42);
}
.gt-contact-form__note {
  font-size: 13px;
  color: var(--gt-text-subtle);
  margin: 4px 0 0;
}
.gt-contact-form__note a { color: var(--gt-accent); text-decoration: none; }

/* Big CTA box */
.gt-info__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 36px 40px;
  background: linear-gradient(135deg, var(--gt-accent) 0%, #A855F7 100%);
  border-radius: 24px;
  color: #FFFFFF;
  box-shadow: 0 20px 60px rgba(123, 97, 255, 0.28);
}
.gt-info__cta h3 {
  font-family: var(--gt-font-display);
  font-size: 24px;
  font-weight: var(--gt-w-bold);
  margin: 0 0 4px;
  letter-spacing: var(--gt-ls-heading);
}
.gt-info__cta p {
  margin: 0;
  opacity: 0.9;
  font-size: 15px;
}
.gt-info__cta-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: var(--gt-r-pill);
  background: #FFFFFF;
  color: var(--gt-accent);
  font-family: var(--gt-font-display);
  font-weight: var(--gt-w-semibold);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--gt-t-fast), box-shadow var(--gt-t-fast);
}
.gt-info__cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}

@media (max-width: 768px) {
  .gt-info__title { font-size: 32px; }
  .gt-about__block { padding: 32px 24px 32px 24px; }
  .gt-about__num { position: static; display: inline-block; margin-bottom: 8px; }
  .gt-contact-form__wrap { grid-template-columns: 1fr; padding: 32px 24px; gap: 28px; }
  .gt-info__cta { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px 24px; }
  .gt-faq__item summary { font-size: 16px; padding: 18px 24px; padding-right: 48px; }
  .gt-faq__a { padding: 0 24px 20px; font-size: 15px; }
}

[data-theme="dark"] .gt-faq__item,
body.dark-mode .gt-faq__item,
[data-theme="dark"] .gt-about__block,
body.dark-mode .gt-about__block,
[data-theme="dark"] .gt-contacts__card,
body.dark-mode .gt-contacts__card {
  background: var(--gt-bg-elevated);
}
[data-theme="dark"] .gt-contact-form__field input,
[data-theme="dark"] .gt-contact-form__field textarea,
body.dark-mode .gt-contact-form__field input,
body.dark-mode .gt-contact-form__field textarea {
  background: var(--gt-bg-sunken);
  color: var(--gt-text);
}

@media (prefers-reduced-motion: reduce) {
  .gt-contacts__card,
  .gt-faq__item summary::after { transition: none; }
  .gt-contacts__card:hover:not(.gt-contacts__card--static) { transform: none; }
}
/* ---------- End of Info pages ---------- */

/* ============================================================
   Auth page — Login / Register / Forgot (Wave 3 Task 6, 2026-04-23)
   Переверстка старого modal-registrate в единый визуальный язык
   Hero-подобная сцена + glassmorphism-карточка формы
   ============================================================ */

.gt-auth-main {
    background: linear-gradient(160deg, #0A0A0B 0%, #1E1B4B 55%, #312E81 100%);
    min-height: calc(100vh - 80px);
    padding: 0;
}

.gt-auth {
    position: relative;
    min-height: calc(100vh - 80px);
    padding: 80px 24px 120px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gt-auth__mesh {
    position: absolute;
    inset: -20% -10%;
    background:
        radial-gradient(600px 480px at 18% 22%, rgba(123, 97, 255, 0.45), transparent 60%),
        radial-gradient(640px 520px at 82% 78%, rgba(79, 70, 229, 0.42), transparent 60%),
        radial-gradient(480px 420px at 55% 42%, rgba(34, 211, 238, 0.18), transparent 65%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.gt-auth__grain {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
    opacity: 0.35;
    z-index: 0;
}

.gt-auth__deco {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
    opacity: 0.9;
}
.gt-auth__deco--rocket {
    top: 8%;
    left: 6%;
    width: 96px;
    height: 96px;
}
.gt-auth__deco--bulb {
    bottom: 10%;
    right: 7%;
    width: 88px;
    height: 88px;
}

.gt-auth__container {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
    max-width: 1100px;
    width: 100%;
}

.gt-auth__intro {
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gt-auth__eyebrow {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    font-family: var(--gt-font-body);
    font-size: 13px;
    font-weight: var(--gt-w-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #E9E4FF;
    background: rgba(123, 97, 255, 0.22);
    border: 1px solid rgba(123, 97, 255, 0.35);
    border-radius: var(--gt-r-pill);
    margin: 0;
}

.gt-auth__title {
    font-family: var(--gt-font-display);
    font-size: clamp(44px, 6vw, 72px);
    font-weight: var(--gt-w-bold);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #fff;
    margin: 0;
}
.gt-auth__accent {
    background: linear-gradient(120deg, #A78BFA 0%, #22D3EE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.gt-auth__subtitle {
    font-family: var(--gt-font-body);
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    max-width: 460px;
    margin: 0;
}

.gt-auth__card {
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    padding: 44px 40px 40px;
    box-shadow:
        0 30px 80px rgba(10, 10, 11, 0.35),
        0 2px 8px rgba(123, 97, 255, 0.15);
}

.gt-auth__alert {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #991B1B;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: var(--gt-font-body);
}
.gt-auth__alert p { margin: 0; }
.gt-auth__alert p + p { margin-top: 4px; }

.gt-auth__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gt-auth__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gt-auth__field-label {
    font-family: var(--gt-font-body);
    font-size: 13px;
    font-weight: var(--gt-w-semibold);
    color: var(--gt-gray-900);
    letter-spacing: 0.01em;
}

.gt-auth__input {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--gt-font-body);
    font-size: 16px;
    color: var(--gt-gray-900);
    background: #F8F8FA;
    border: 1.5px solid #E4E4E7;
    border-radius: 12px;
    outline: none;
    transition: border-color var(--gt-t-base), background-color var(--gt-t-base), box-shadow var(--gt-t-base);
    box-sizing: border-box;
}
.gt-auth__input::placeholder { color: #A1A1AA; }
.gt-auth__input:hover { border-color: #D4D4D8; }
.gt-auth__input:focus {
    border-color: var(--gt-accent);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.14);
}

.gt-auth__password { position: relative; }
.gt-auth__input--password { padding-right: 48px; }
.gt-auth__eye {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #A1A1AA;
    border-radius: 8px;
    cursor: pointer;
    transition: color var(--gt-t-base), background-color var(--gt-t-base);
}
.gt-auth__eye:hover { color: var(--gt-accent); background: var(--gt-accent-soft); }
.gt-auth__eye--on { color: var(--gt-accent); }

.gt-auth__row {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 4px;
}
.gt-auth__forgot {
    font-family: var(--gt-font-body);
    font-size: 14px;
    color: var(--gt-accent);
    text-decoration: none;
    transition: color var(--gt-t-base);
}
.gt-auth__forgot:hover {
    color: var(--gt-accent-hover);
    text-decoration: underline;
}

.gt-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    font-family: var(--gt-font-body);
    font-size: 16px;
    font-weight: var(--gt-w-semibold);
    letter-spacing: 0.01em;
    color: #fff;
    background: linear-gradient(120deg, var(--gt-accent) 0%, var(--gt-accent-alt) 100%);
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(123, 97, 255, 0.35);
    transition: transform var(--gt-t-base), box-shadow var(--gt-t-base), filter var(--gt-t-base);
    margin-top: 6px;
}
.gt-auth__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(123, 97, 255, 0.45);
    filter: brightness(1.05);
}
.gt-auth__submit:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(123, 97, 255, 0.3);
}

@media (max-width: 960px) {
    .gt-auth__container {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 520px;
    }
    .gt-auth__intro { text-align: center; align-items: center; }
    .gt-auth__eyebrow { align-self: center; }
    .gt-auth__subtitle { margin: 0 auto; }
    .gt-auth__deco { display: none; }
}

@media (max-width: 520px) {
    .gt-auth { padding: 48px 16px 72px; }
    .gt-auth__card { padding: 32px 24px 28px; border-radius: 20px; }
    .gt-auth__title { font-size: 40px; }
    .gt-auth__subtitle { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .gt-auth__submit,
    .gt-auth__input,
    .gt-auth__eye,
    .gt-auth__forgot { transition: none; }
    .gt-auth__submit:hover { transform: none; }
}

[data-theme="dark"] .gt-auth__card,
body.dark-mode .gt-auth__card {
    background: rgba(24, 24, 27, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(123, 97, 255, 0.2);
}
[data-theme="dark"] .gt-auth__field-label,
body.dark-mode .gt-auth__field-label { color: #E4E4E7; }
[data-theme="dark"] .gt-auth__input,
body.dark-mode .gt-auth__input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
    color: #F4F4F5;
}
[data-theme="dark"] .gt-auth__input:focus,
body.dark-mode .gt-auth__input:focus {
    background: rgba(255, 255, 255, 0.06);
    border-color: #9F88FF;
}
[data-theme="dark"] .gt-auth__input::placeholder,
body.dark-mode .gt-auth__input::placeholder { color: #71717A; }
/* ---------- End of Auth page ---------- */


/* ============================================================
   Statistics page — /statistics
   Wave 3 Phase F (2026-04-23): hero + toolbar + таблица с progress-клеткой
   Переиспользует: .gt-page, .gt-page-hero, .gt-table, .gt-chip-v4,
   .gt-btn-v4, .gt-pagination, .gt-empty-state, .gt-search, .gt-form-field
   ============================================================ */

.gt-stats {
    max-width: var(--gt-container-max, 1200px);
    margin: 0 auto;
    padding: 32px 24px 80px;
}
@media (max-width: 768px) {
    .gt-stats { padding: 20px 16px 48px; }
}

.gt-stats__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ---------- Export button (на hero-actions) ---------- */
.gt-stats__export {
    gap: 8px;
}
.gt-stats__export svg {
    flex-shrink: 0;
}

/* ---------- .gt-search внутри .gt-form-field в toolbar — сбросить max-width ---------- */
.gt-stats__toolbar .gt-form-field .gt-search {
    display: block;
    position: relative;
    flex: none;
    max-width: none;
    width: 100%;
}

/* ---------- Toolbar с фильтрами ---------- */
.gt-stats__toolbar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    background: var(--gt-bg-elevated, #FFFFFF);
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: 16px;
    box-shadow: var(--gt-shadow-card, 0 1px 3px rgba(0,0,0,.04));
}
.gt-stats__toolbar-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}
.gt-stats__toolbar-row--secondary {
    grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.6fr) auto;
}
@media (max-width: 900px) {
    .gt-stats__toolbar-row,
    .gt-stats__toolbar-row--secondary {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 560px) {
    .gt-stats__toolbar-row,
    .gt-stats__toolbar-row--secondary {
        grid-template-columns: 1fr;
    }
}
.gt-stats__toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: end;
    justify-content: flex-end;
}
.gt-stats__toolbar-actions .gt-btn-v4 {
    white-space: nowrap;
}

/* ---------- Таблица ---------- */
.gt-stats__table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 8px 24px rgba(10, 10, 11, 0.04);
}
.gt-stats__table {
    min-width: 900px;
    background: #fff;
}
.gt-stats__table tbody tr {
    transition: background-color .15s ease;
}
.gt-stats__table tbody tr:nth-child(even) td {
    background: #FAFAFA;
}
.gt-stats__table tbody tr:hover td {
    background: rgba(123, 97, 255, 0.06);
}
.gt-stats__table td {
    border-bottom: 1px solid #EDEDF0;
}
body.dark-mode .gt-stats__table,
[data-theme="dark"] .gt-stats__table {
    background: var(--gt-bg-elevated);
}
body.dark-mode .gt-stats__table tbody tr:nth-child(even) td,
[data-theme="dark"] .gt-stats__table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02);
}
body.dark-mode .gt-stats__table tbody tr:hover td,
[data-theme="dark"] .gt-stats__table tbody tr:hover td {
    background: rgba(123, 97, 255, 0.12);
}
body.dark-mode .gt-stats__table td,
[data-theme="dark"] .gt-stats__table td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.gt-stats__col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.gt-stats__col-progress {
    min-width: 180px;
}
.gt-stats__user-link {
    color: var(--gt-text, #18181B);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
.gt-stats__user-link:hover {
    color: var(--gt-accent, #7B61FF);
}
.gt-stats__course {
    color: var(--gt-text-muted, #52525B);
    font-size: 14px;
}
.gt-stats__muted {
    color: var(--gt-text-muted, #A1A1AA);
}

/* ---------- Кнопка сортировки в thead ---------- */
.gt-stats__sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-transform: inherit;
    letter-spacing: inherit;
    transition: color .15s ease;
}
.gt-stats__sort:hover {
    color: var(--gt-accent, #7B61FF);
}
.gt-stats__sort-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: relative;
    opacity: 0.4;
}
.gt-stats__sort-icon::before,
.gt-stats__sort-icon::after {
    content: '';
    position: absolute;
    left: 1px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.gt-stats__sort-icon::before {
    top: 0;
    border-bottom: 4px solid currentColor;
}
.gt-stats__sort-icon::after {
    bottom: 0;
    border-top: 4px solid currentColor;
}
.gt-stats__sort-icon--asc {
    opacity: 1;
    color: var(--gt-accent, #7B61FF);
}
.gt-stats__sort-icon--asc::after { display: none; }
.gt-stats__sort-icon--desc {
    opacity: 1;
    color: var(--gt-accent, #7B61FF);
}
.gt-stats__sort-icon--desc::before { display: none; }

/* ---------- Progress-клетка ---------- */
.gt-stats__progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}
.gt-stats__progress-track {
    flex: 1;
    height: 6px;
    background: var(--gt-bg-sunken, #F4F4F5);
    border-radius: 999px;
    overflow: hidden;
}
.gt-stats__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gt-accent, #7B61FF) 0%, #EC4899 100%);
    border-radius: 999px;
    transition: width .4s ease;
}
.gt-stats__progress-value {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gt-text, #18181B);
    min-width: 40px;
    text-align: right;
}

/* ---------- Dark mode ---------- */
body.dark-mode .gt-stats__toolbar,
[data-theme="dark"] .gt-stats__toolbar {
    background: var(--gt-bg-elevated);
    border-color: var(--gt-border);
}
body.dark-mode .gt-stats__progress-track,
[data-theme="dark"] .gt-stats__progress-track {
    background: var(--gt-bg);
}
body.dark-mode .gt-stats__user-link,
[data-theme="dark"] .gt-stats__user-link {
    color: var(--gt-text);
}

/* ---------- Mobile: таблица в карточки (reuse .gt-table mobile rules) ---------- */
@media (max-width: 768px) {
    .gt-stats__table { min-width: 0; }
    .gt-stats__progress { min-width: 0; }
    .gt-stats__col-num,
    .gt-stats__col-progress {
        text-align: left;
    }
}
/* ---------- End of Statistics page ---------- */

/* =========================================================================
   Reviews page (/reviews) — B-13/B-20 редизайн в netflix-стиле
   Переиспользует .gt-stats__toolbar, .gt-table, .gt-chip-v4, .gt-pagination.
   ========================================================================= */
.gt-reviews {
    max-width: var(--gt-container-max, 1200px);
    margin: 0 auto;
    padding: 32px 24px 80px;
}
@media (max-width: 768px) {
    .gt-reviews { padding: 20px 16px 48px; }
}
/* ---------- End of Reviews page ---------- */

/* =========================================================================
   Lesson editor (/lessons/{id}/edit) — B-LES-EDIT редизайн
   Сохраняем JS-хуки .button--save / .block-text-add__button / .redacting-module__buttons.
   Через .gt-lesson-editor scope перекрываем старые .button/.header__button стили.
   ========================================================================= */
.gt-lesson-editor {
    max-width: var(--gt-container-max, 1200px);
    margin: 0 auto;
    padding: 32px 24px 80px;
}
@media (max-width: 768px) {
    .gt-lesson-editor { padding: 20px 16px 48px; }
}
.gt-lesson-editor__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    transition: color .15s ease;
}
.gt-lesson-editor__back:hover { color: var(--gt-accent, #7B61FF); }

/* Override старых зелёных кнопок редактора: когда на элементе одновременно
   есть .button/.header__button и .gt-btn-v4 — уважаем gt-btn-v4. */
.gt-lesson-editor .button.button--save,
.gt-lesson-editor .button.button--eye,
.gt-lesson-editor .header__button.block-text-add__button {
    background-image: none !important;
    border: 1px solid transparent;
    box-shadow: none;
    min-height: 0;
    height: auto;
    line-height: normal;
    text-transform: none;
    letter-spacing: normal;
}
.gt-lesson-editor .gt-btn-v4.gt-btn-v4--primary {
    background: var(--gt-accent, #7B61FF);
    color: #fff;
    border-color: transparent;
}
.gt-lesson-editor .gt-btn-v4.gt-btn-v4--primary:hover {
    background: #6b51e6;
    color: #fff;
}
.gt-lesson-editor .gt-btn-v4.gt-btn-v4--ghost {
    background: transparent;
    color: var(--gt-text, #18181B);
}

/* Submit внутри формы — отделим визуально от блоков. */
.gt-lesson-editor .gt-lesson-editor__submit {
    margin: 24px 0 16px;
    gap: 8px;
}

/* Старые .redacting-module__centr и __title в gt-lesson-editor скрываем —
   title ушёл в .gt-page-hero, дублирование не нужно. */
.gt-lesson-editor .redacting-module__centr { display: none; }
/* ---------- End of Lesson editor ---------- */

/* =========================================================================
   Wave 4a — «Убрать зелёный остаток из админки» (2026-04-24)
   Основано на gtteach/product/wave4-admin-audit.md
   Задачи: P0-2 preloader, P0-5 modal buttons, P0-6 reviews, P0-7 partial
   lesson-edit, P1-1 status chips, P1-3 lesson show, P1-5 dark theme off.
   Акцент v2 — indigo #4F46E5 (вместо прежнего fallback #7B61FF).
   ========================================================================= */
:root {
    /* Переключаем глобальный accent на indigo v2 и добавляем недостающие
       токены (--gt-accent-soft, --gt-gray-*) — они используются в Wave 4a
       overrides и нужны как глобальные fallback-ы. */
    --gt-accent:        #4F46E5;
    --gt-accent-hover:  #4338CA;
    --gt-accent-soft:   #EEF2FF;
    --gt-accent-bg:     rgba(79, 70, 229, 0.10);

    --gt-gray-50:  #FAFAFA;
    --gt-gray-100: #F4F4F5;
    --gt-gray-200: #E4E4E7;
    --gt-gray-400: #A1A1AA;
    --gt-gray-600: #52525B;
    --gt-gray-900: #18181B;

    --gt-r-sm: 8px;
    --gt-r-md: 12px;
    --gt-r-lg: 16px;
    --gt-r-pill: 999px;

    --gt-shadow-soft: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

/* ----------------------------------------------------------------------------
   P0-2. Preloader — вместо чёрного экрана с мятно-зелёными квадратиками
   делаем полупрозрачный белый фон + индиго-спиннер на месте .preloader-4.
   .preloader-4 > div (9 квадратиков DOM) прячем, сам контейнер превращаем
   в круглый спиннер через border-top-color.
---------------------------------------------------------------------------- */
.preloader,
.preloader-video {
    background: rgba(250, 250, 250, 0.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 16px;
}
.preloader-video__title,
.preloader__title {
    color: var(--gt-gray-900) !important;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    background: transparent !important;
}
.preloader-4 {
    width: 44px !important;
    height: 44px !important;
    display: inline-block !important;
    position: relative !important;
    border: 3px solid var(--gt-gray-200) !important;
    border-top-color: var(--gt-accent) !important;
    border-radius: 50% !important;
    background: transparent !important;
    animation: gt-wave4-spin 0.8s linear infinite !important;
}
.preloader-4 > div {
    display: none !important;
}
@keyframes gt-wave4-spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   P0-5. Кнопки в модалках и глобальных формах.
   Перекрашиваем все унаследованные «зелёно-бирюзовые» primary-кнопки
   (.button--save) и outline «Отмена» (.button--eye / .modal__close)
   в единый indigo-pill.
   JS-хуки .button--save / modal__close сохраняем — меняем только визуал.
---------------------------------------------------------------------------- */
.button.button--save,
button.button--save,
a.button--save,
.modal-section .button.button--save,
.modal-video__buttons .button.button--save,
.form-review .button.button--save,
.block-task__button,
.block-test__button {
    background: var(--gt-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    border-radius: var(--gt-r-pill) !important;
    padding: 12px 28px !important;
    font-weight: 600 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    box-shadow: none !important;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.button.button--save:hover,
button.button--save:hover,
a.button--save:hover,
.block-task__button:hover,
.block-test__button:hover {
    background: var(--gt-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--gt-shadow-soft);
}

.button.button--eye,
a.button--eye,
button.button--eye,
.button.modal__close,
button.modal__close.button,
a.modal__close.button,
.modal-section .button.modal__close,
.modal-create .button.modal__close,
.modal .button.modal__close,
.form-review .button.button--eye {
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--gt-gray-900) !important;
    border: 1px solid var(--gt-gray-200) !important;
    border-radius: var(--gt-r-pill) !important;
    padding: 12px 28px !important;
    font-weight: 500 !important;
}
.button.button--eye:hover,
.button.modal__close:hover,
.modal-section .button.modal__close:hover,
.modal-create .button.modal__close:hover,
.modal .button.modal__close:hover {
    background: var(--gt-gray-50) !important;
    border-color: var(--gt-gray-400) !important;
    box-shadow: none !important;
}

/* Активный таб «Мои обложки / Выбрать файл» — перекрасить на indigo */
.select-image__nav .option.active,
.select-image .option.active,
.select-image__tabs .active,
.tabs .tab.active {
    background: var(--gt-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* ----------------------------------------------------------------------------
   P0-6. Reviews detail (/reviews/{id}) — checking-task.
   - Убираем зелёно-бирюзовый градиент с .checking-task__wrapper .head
     (заменяем на soft-shadow белую карточку).
   - Звёзды: серые неактивные + индиго активные/hover.
   - «Прикрепить файл» (.wrapper__add) — индиго акцент.
---------------------------------------------------------------------------- */
.checking-task__main .checking-task__wrapper > .head,
.checking-task__main > .checking-task__wrapper > .head {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--gt-gray-200) !important;
    border-radius: var(--gt-r-lg) !important;
    box-shadow: var(--gt-shadow-soft) !important;
    color: var(--gt-gray-900) !important;
}
.checking-task__main .checking-task__wrapper > .head .head__title,
.checking-task__main .checking-task__wrapper > .head .head__name {
    color: var(--gt-gray-900) !important;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
}
.checking-task__main .checking-task__wrapper > .head .head__gear img {
    filter: none !important;
    opacity: .7;
}
.checking-task__main .checking-task__wrapper > .head .head__img {
    background: #fff !important;
    color: var(--gt-gray-900) !important;
    border: 1px solid var(--gt-gray-200) !important;
    border-radius: var(--gt-r-pill) !important;
}
.checking-task__main .checking-task__wrapper > .head .head__img img {
    filter: invert(12%) sepia(7%) saturate(250%) hue-rotate(200deg);
}

/* Звёзды — убрать старый «мятно-серый» #AACEC6, заменить на серый по умолчанию,
   индиго на активных и при наведении (CSS :hover даёт визуальный отклик
   даже если JS не проставил .active). */
.form-review .stars .star svg path,
.form-review .rating .stars .star svg path {
    fill: var(--gt-gray-200) !important;
    stroke: var(--gt-gray-200) !important;
    transition: fill 120ms ease, stroke 120ms ease;
}
.form-review .stars .star.active svg path,
.form-review .stars .star:hover svg path,
.form-review .stars:hover .star:hover ~ .star svg path {
    /* fallback: без JS подсвечиваем от наведения до конца подряд */
    fill: var(--gt-accent) !important;
    stroke: var(--gt-accent) !important;
}
.form-review .stars:hover .star svg path {
    fill: var(--gt-accent) !important;
    stroke: var(--gt-accent) !important;
}
.form-review .stars:hover .star:hover ~ .star svg path {
    fill: var(--gt-gray-200) !important;
    stroke: var(--gt-gray-200) !important;
}

/* Прикрепить файл — цвет акцент */
.form-review .wrapper__add {
    color: var(--gt-accent) !important;
    cursor: pointer;
}
.form-review .wrapper__add .text {
    color: var(--gt-accent) !important;
    font-weight: 500 !important;
}
.form-review .wrapper__add .img img {
    filter: invert(24%) sepia(87%) saturate(4127%) hue-rotate(236deg) brightness(91%) contrast(92%);
}

/* Комментарий-placeholder — привести к токену */
.form-review .textarea textarea {
    border-radius: var(--gt-r-md) !important;
    border-color: var(--gt-gray-200) !important;
}
.form-review .textarea textarea::placeholder {
    color: var(--gt-gray-400) !important;
}

/* ----------------------------------------------------------------------------
   P0-7 (часть). Lessons/edit — «+» между блоками и карточки испытаний.
   Editor toolbar (B I S H1..) — не трогаем в этой волне, отложено.
---------------------------------------------------------------------------- */
.block-text-add__add {
    background: var(--gt-accent-soft) !important;
    color: var(--gt-accent) !important;
    border: 1px dashed var(--gt-gray-200) !important;
    border-radius: 999px !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.block-text-add__add:hover {
    background: var(--gt-accent) !important;
    color: #fff !important;
    border-color: var(--gt-accent) !important;
}

/* Карточки испытаний (Тест / Задание / Видео задание / Видео интервью) */
.redacting-module__trials .block {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--gt-gray-200) !important;
    border-radius: var(--gt-r-md) !important;
    box-shadow: var(--gt-shadow-soft) !important;
    overflow: hidden;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.redacting-module__trials .block:hover {
    border-color: var(--gt-accent) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, .10), 0 12px 32px rgba(79, 70, 229, .10) !important;
}
.redacting-module__trials .block__top {
    background: var(--gt-accent-soft) !important;
    background-image: none !important;
}
.redacting-module__trials .block__bottom {
    background: #fff !important;
    background-image: none !important;
    color: var(--gt-gray-900) !important;
}
.redacting-module__trials .block__bottom .text {
    color: var(--gt-gray-900) !important;
    font-weight: 600 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
.redacting-module__trials .block:hover .block__bottom .text {
    color: var(--gt-accent) !important;
}

/* Кнопка «Сохранить» внутри редактора (.gt-lesson-editor)
   раньше окрашивалась в --gt-accent=#7B61FF (фиолет). Мы уже подняли переменную
   до #4F46E5 (indigo) в :root выше — этого достаточно.
   Но подстрахуемся: на случай инлайн background-image у legacy-кнопок. */
.gt-lesson-editor .gt-btn-v4.gt-btn-v4--primary,
.gt-lesson-editor .block-text-add__button,
.gt-lesson-editor .block-task__button {
    background: var(--gt-accent) !important;
    background-image: none !important;
    color: #fff !important;
}
.gt-lesson-editor .gt-btn-v4.gt-btn-v4--primary:hover,
.gt-lesson-editor .block-text-add__button:hover,
.gt-lesson-editor .block-task__button:hover {
    background: var(--gt-accent-hover) !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------------------
   P1-1. Страница сотрудника /users/{id} — чипы статусов.
   В Wave 3 Phase B .gt-chip-v4--success / course-status--done окрасили
   в зелёный, .course-status--progress — в янтарный. Приводим к системе:
   accent-soft+accent для положительных, gray-100+gray-600 для нейтральных.
---------------------------------------------------------------------------- */
.gt-chip-v4--success {
    background: var(--gt-accent-soft) !important;
    color: var(--gt-accent) !important;
}
.gt-chip-v4--accent {
    /* уже accent, но добиваем консистентный soft fon */
    background: var(--gt-accent-soft) !important;
    color: var(--gt-accent) !important;
}

.gt-insights__kpi-trend--up {
    background: var(--gt-accent-soft) !important;
    color: var(--gt-accent) !important;
}
.gt-insights__kpi-trend--flat {
    background: var(--gt-gray-100) !important;
    color: var(--gt-gray-600) !important;
}
.gt-insights__kpi-trend--down {
    background: var(--gt-gray-100) !important;
    color: var(--gt-gray-600) !important;
}

/* Карточки курсов сотрудника */
.gt-profile__course-status--done {
    background: var(--gt-accent-soft) !important;
    color: var(--gt-accent) !important;
}
.gt-profile__course-status--progress {
    background: var(--gt-gray-100) !important;
    color: var(--gt-gray-600) !important;
}
.gt-profile__progress-fill {
    background: var(--gt-accent) !important;
    background-image: none !important;
}

/* ----------------------------------------------------------------------------
   P1-3. Lesson show (/lessons/{id}/-1) — CTA, progress, breadcrumb.
---------------------------------------------------------------------------- */
.lesson-v2__breadcrumb a,
.lesson-v2__breadcrumb a:visited {
    color: var(--gt-accent) !important;
    text-decoration: none;
}
.lesson-v2__breadcrumb a:hover {
    color: var(--gt-accent-hover) !important;
    text-decoration: underline;
}
.lesson-v2__back {
    color: var(--gt-accent) !important;
}

.lesson-v2__progress-fill {
    background: var(--gt-accent) !important;
    background-image: none !important;
}

.lesson-v2__cta--primary {
    background: var(--gt-accent) !important;
    background-image: none !important;
    color: #fff !important;
    border-radius: var(--gt-r-pill) !important;
    border: 1px solid transparent !important;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.lesson-v2__cta--primary:hover {
    background: var(--gt-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--gt-shadow-soft);
}

/* ----------------------------------------------------------------------------
   P1-5. Dark theme временно выключаем.
   Кнопку-«луну» (.gt-theme-toggle) скрываем через CSS как страховку —
   DOM и init-скрипт убираются в layouts/default.blade.php отдельно.
---------------------------------------------------------------------------- */
.gt-theme-toggle {
    display: none !important;
}

/* ---------- End of Wave 4a ---------- */

/* ============================================================================
   Wave 4b — схема блоков курса, параметры-справочники, invitations/create
   2026-04-24
   ============================================================================ */

/* ----------------------------------------------------------------------------
   P0-3. Страница курса /courses/{id} — схема блоков.
   Убираем старые градиенты (мятно-зелёный/синий/фиолетовый) и волновой SVG-фон.
   Карточки — белые, soft-shadow, индиго-бордер у активного/доступного блока.
   Соединительные стрелки — серые токены.
---------------------------------------------------------------------------- */

/* Фон страницы курса — убираем background-main.png, ставим светлую mesh-подложку */
.redacting-track {
    background-image: none !important;
    background-color: var(--gt-bg-sunken, #F6F5FB) !important;
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(79, 70, 229, 0.06), transparent 60%),
        radial-gradient(900px 500px at 110% 20%, rgba(236, 72, 153, 0.04), transparent 60%),
        var(--gt-bg-sunken, #F6F5FB) !important;
}

/* Заголовок курса — крупный Manrope display */
.redacting-track .redacting-track__head {
    font-family: var(--gt-font-display, 'Manrope', 'Inter', sans-serif) !important;
    font-size: var(--gt-h2, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    color: var(--gt-text, #18181B) !important;
    margin: 24px auto 32px !important;
    padding: 0 16px;
}
@media (max-width: 1024px) {
    .redacting-track .redacting-track__head {
        font-size: 40px !important;
    }
}

/* Карточка-блок урока — белая, без wave-pattern, без градиентов */
.redacting-track__wrapper .block,
.redacting-track__wrapper .block--default,
.redacting-track__wrapper .block--created,
.redacting-track__wrapper .block--completed,
.redacting-track__wrapper .block--reviewed,
.redacting-track__wrapper .block--rejected,
.redacting-track__wrapper .block--purple,
.redacting-track__wrapper .block--progress {
    background-image: none !important;
    background-color: var(--gt-bg, #FFFFFF) !important;
    border: 1px solid var(--gt-border, #E4E4E7) !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 6px 20px rgba(10, 10, 11, 0.05) !important;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

/* Заголовок блока — тёмно-серый */
.redacting-track__wrapper .block .block__title,
.redacting-track__wrapper .block--created .block__title,
.redacting-track__wrapper .block--completed .block__title,
.redacting-track__wrapper .block--reviewed .block__title,
.redacting-track__wrapper .block--rejected .block__title,
.redacting-track__wrapper .block--purple .block__title {
    color: var(--gt-text, #18181B) !important;
    font-family: var(--gt-font-display, 'Manrope', sans-serif) !important;
    font-weight: 600 !important;
}

/* Статусы — оставляем различимость, но в единой палитре (только бордер-акцент) */
.redacting-track__wrapper .block--completed {
    border-color: var(--gt-accent, #7B61FF) !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.06), 0 6px 20px rgba(79, 70, 229, 0.12) !important;
}
.redacting-track__wrapper .block--created {
    background-color: var(--gt-bg-elevated, #FAFAFA) !important;
}
.redacting-track__wrapper .block--reviewed {
    border-color: #10B981 !important;
    background-color: rgba(16, 185, 129, 0.04) !important;
}
.redacting-track__wrapper .block--rejected {
    border-color: #EF4444 !important;
    background-color: rgba(239, 68, 68, 0.04) !important;
}
.redacting-track__wrapper .block--purple {
    border-color: rgba(79, 70, 229, 0.35) !important;
}

/* Доступный для прохождения — hover-лифт */
.redacting-track__wrapper .block--passing-true:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.12), 0 12px 32px rgba(79, 70, 229, 0.16) !important;
    border-color: var(--gt-accent, #7B61FF) !important;
}

/* Недоступный — серый и приглушённый (вместо кислотной desaturate) */
.redacting-track__wrapper .block--passing-false {
    filter: none !important;
    opacity: 0.55 !important;
    border-color: var(--gt-border, #E4E4E7) !important;
    background-color: var(--gt-bg-sunken, #F6F5FB) !important;
    box-shadow: none !important;
}

/* Service-элементы внутри блока — полупрозрачный серый вместо мятного */
.redacting-track__wrapper .block__list .item {
    background-color: rgba(244, 244, 245, 0.9) !important;
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: 6px;
}

/* Zoom-controls (setting__plus / __minus / __lupe) — индиго pill с лёгкой тенью */
.redacting-track .setting__lupe,
.redacting-track .setting__info,
.redacting-track .setting__plus,
.redacting-track .setting__minus {
    background: var(--gt-bg, #FFFFFF) !important;
    border: 1px solid var(--gt-border, #E4E4E7) !important;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 4px 12px rgba(10, 10, 11, 0.06) !important;
    border-radius: var(--gt-r-md, 12px) !important;
    width: 40px !important;
    height: 40px !important;
    transition: border-color 160ms ease, transform 160ms ease;
}
.redacting-track .setting__lupe:hover,
.redacting-track .setting__info:hover,
.redacting-track .setting__plus:hover,
.redacting-track .setting__minus:hover {
    border-color: var(--gt-accent, #7B61FF) !important;
    transform: translateY(-1px);
}
.redacting-track .setting__column {
    background: var(--gt-bg, #FFFFFF) !important;
    border: 1px solid var(--gt-border, #E4E4E7) !important;
    border-radius: var(--gt-r-md, 12px) !important;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04), 0 4px 12px rgba(10, 10, 11, 0.06) !important;
}
.redacting-track .setting__resolution {
    color: var(--gt-text-muted, #52525B) !important;
    font-weight: 600;
}

/* SVG canvas линии между блоками — тонкие серые */
.redacting-track__canvas path,
.redacting-track__canvas line {
    stroke: var(--gt-border, #E4E4E7) !important;
    stroke-width: 1.5 !important;
}

/* Стрелки навигации «назад» — в стиле pill */
.redacting-track .redacting-module__back {
    background: var(--gt-bg, #FFFFFF) !important;
    border: 1px solid var(--gt-border, #E4E4E7) !important;
    border-radius: var(--gt-r-pill, 999px) !important;
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04);
}

/* ----------------------------------------------------------------------------
   P1-7. Параметры-справочники (/parameters/{roles,permissions,branches,positions_employees}).
   Переопределяем радужные градиенты tile-ов на единый нейтральный стиль.
---------------------------------------------------------------------------- */

.gt-param-tile {
    background: var(--gt-bg, #FFFFFF) !important;
    border: 1px solid var(--gt-border, #E4E4E7);
    box-shadow: 0 1px 2px rgba(10, 10, 11, 0.04);
}
.gt-param-tile::before {
    display: none !important;
}
.gt-param-tile:nth-child(6n+1),
.gt-param-tile:nth-child(6n+2),
.gt-param-tile:nth-child(6n+3),
.gt-param-tile:nth-child(6n+4),
.gt-param-tile:nth-child(6n+5),
.gt-param-tile:nth-child(6n+6) {
    --tile-a: var(--gt-bg, #FFFFFF);
    --tile-b: var(--gt-bg, #FFFFFF);
}
.gt-param-tile:hover {
    border-color: var(--gt-accent, #7B61FF);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08), 0 12px 32px rgba(79, 70, 229, 0.08);
    transform: translateY(-2px);
}
.gt-param-tile__icon {
    background: var(--gt-accent-soft, #EEF2FF) !important;
    border: 1px solid rgba(79, 70, 229, 0.12);
}
.gt-param-tile__icon svg {
    color: var(--gt-accent, #7B61FF) !important;
}
.gt-param-tile__title {
    color: var(--gt-text, #18181B) !important;
}
.gt-param-tile__count {
    color: var(--gt-text-subtle, #A1A1AA) !important;
}
.gt-param-tile__action-btn {
    background: var(--gt-bg-sunken, #F6F5FB);
    border: 1px solid var(--gt-border, #E4E4E7);
}

/* ----------------------------------------------------------------------------
   P2-2. /invitations/create — toggle-чекбокс + стилизованный datetime-local.
---------------------------------------------------------------------------- */

/* Toggle-чекбокс «Постоянная ссылка» */
.gt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.gt-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.gt-toggle__switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--gt-border, #E4E4E7);
    border-radius: 999px;
    transition: background 160ms ease;
    flex-shrink: 0;
}
.gt-toggle__switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(10, 10, 11, 0.15);
    transition: transform 160ms ease;
}
.gt-toggle input[type="checkbox"]:checked + .gt-toggle__switch {
    background: var(--gt-accent, #7B61FF);
}
.gt-toggle input[type="checkbox"]:checked + .gt-toggle__switch::after {
    transform: translateX(20px);
}
.gt-toggle input[type="checkbox"]:focus-visible + .gt-toggle__switch {
    box-shadow: 0 0 0 4px rgba(123, 97, 255, 0.15);
}
.gt-toggle__label {
    font-size: 15px;
    font-weight: 500;
    color: var(--gt-text, #18181B);
}

/* datetime-local инпут — применяем те же токены, что и у текстовых */
.gt-form-field__input[type="datetime-local"] {
    font-family: inherit;
    color-scheme: light;
    min-height: 48px;
    padding: 0 16px;
}
.gt-form-field__input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(30%) sepia(93%) saturate(2344%) hue-rotate(232deg) brightness(92%) contrast(95%);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 160ms ease;
}
.gt-form-field__input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* ---------- End of Wave 4b ---------- */

/* ============================================================================
   Wave 4c — последний остаток админки: companies/* + parameters/contact-settings,
   календарь активности (heatmap) и тулбар редактора урока (Tiptap).
   2026-04-25
   ============================================================================

   Скоуп для companies/contact-settings — body.gt-app-bootstrap-page, который
   ставится из обновлённого layouts/app.blade.php. Это даёт нам право
   переопределять Bootstrap-классы (.btn-*, .alert, .card, .table) только
   на этих страницах, не задевая остальной портал.
*/

/* ----------------------------------------------------------------------------
   P0-1. Bootstrap-страницы (companies/*, parameters/contact-settings/*)
   Подгоняем .card / .btn-* / .alert / .table под токены v2.
---------------------------------------------------------------------------- */

body.gt-app-bootstrap-page .gt-app-content {
    padding: 32px 0 80px;
    min-height: calc(100vh - 240px);
}

body.gt-app-bootstrap-page .container,
body.gt-app-bootstrap-page .container-fluid {
    max-width: 1200px;
}

/* Card — soft shadow, серая рамка, скруглённые углы */
body.gt-app-bootstrap-page .card {
    background: var(--gt-bg, #fff);
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: var(--gt-r-lg, 16px);
    box-shadow: var(--gt-shadow-soft, 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06));
    overflow: hidden;
}
body.gt-app-bootstrap-page .card-header {
    background: var(--gt-bg, #fff);
    border-bottom: 1px solid var(--gt-border-subtle, #F4F4F5);
    padding: 24px 28px;
}
body.gt-app-bootstrap-page .card-header h4 {
    font-family: var(--gt-font-display, 'Manrope', 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--gt-text, #18181B);
    margin: 0;
}
body.gt-app-bootstrap-page .card-body {
    padding: 24px 28px;
}

/* Кнопки в админке — превращаем Bootstrap-классы в pill v2 */
body.gt-app-bootstrap-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--gt-r-md, 12px);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    box-shadow: none;
    transition: background var(--gt-t-fast, 160ms), border-color var(--gt-t-fast, 160ms),
                color var(--gt-t-fast, 160ms), transform var(--gt-t-fast, 160ms);
}
body.gt-app-bootstrap-page .btn-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: var(--gt-r-sm, 10px);
}
body.gt-app-bootstrap-page .btn-primary {
    background: var(--gt-accent, #7B61FF);
    border-color: var(--gt-accent, #7B61FF);
    color: #fff;
}
body.gt-app-bootstrap-page .btn-primary:hover,
body.gt-app-bootstrap-page .btn-primary:focus {
    background: var(--gt-accent-hover, #6B51F0);
    border-color: var(--gt-accent-hover, #6B51F0);
    transform: translateY(-1px);
}
body.gt-app-bootstrap-page .btn-secondary {
    background: var(--gt-bg-sunken, #F4F4F5);
    color: var(--gt-text, #18181B);
    border-color: var(--gt-border, #E4E4E7);
}
body.gt-app-bootstrap-page .btn-secondary:hover {
    background: var(--gt-bg-elevated, #FAFAFA);
    border-color: var(--gt-accent, #7B61FF);
    color: var(--gt-text, #18181B);
}
body.gt-app-bootstrap-page .btn-info {
    background: var(--gt-bg-sunken, #F4F4F5);
    color: var(--gt-text, #18181B);
    border-color: var(--gt-border, #E4E4E7);
}
body.gt-app-bootstrap-page .btn-info:hover {
    background: var(--gt-accent-soft, #EEF2FF);
    border-color: var(--gt-accent, #7B61FF);
    color: var(--gt-accent, #7B61FF);
}
body.gt-app-bootstrap-page .btn-warning {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}
body.gt-app-bootstrap-page .btn-warning:hover {
    background: #FDE68A;
    border-color: #F59E0B;
    color: #78350F;
}
body.gt-app-bootstrap-page .btn-danger {
    background: transparent;
    color: #DC2626;
    border-color: rgba(220, 38, 38, 0.3);
}
body.gt-app-bootstrap-page .btn-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: #DC2626;
    color: #DC2626;
}

/* Алерты — единый стиль gt-flash, цвета по типу */
body.gt-app-bootstrap-page .alert {
    border: 1px solid transparent;
    border-radius: var(--gt-r-md, 12px);
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 20px;
}
body.gt-app-bootstrap-page .alert-success {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
    color: #15803D;
}
body.gt-app-bootstrap-page .alert-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #B91C1C;
}
body.gt-app-bootstrap-page .alert-warning {
    background: rgba(234, 179, 8, 0.08);
    border-color: rgba(234, 179, 8, 0.2);
    color: #854D0E;
}
body.gt-app-bootstrap-page .alert-info {
    background: rgba(123, 97, 255, 0.06);
    border-color: rgba(123, 97, 255, 0.18);
    color: var(--gt-accent, #7B61FF);
}
body.gt-app-bootstrap-page .alert-link,
body.gt-app-bootstrap-page .alert a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}

/* Таблицы — гладкий вид без zebra-полос, тонкие серые границы */
body.gt-app-bootstrap-page .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--gt-bg-elevated, #FAFAFA);
    --bs-table-hover-bg: var(--gt-accent-soft, #EEF2FF);
    color: var(--gt-text, #18181B);
    margin-bottom: 0;
}
body.gt-app-bootstrap-page .table > :not(caption) > * > * {
    border-bottom-color: var(--gt-border-subtle, #F4F4F5);
    padding: 14px 16px;
    vertical-align: middle;
}
body.gt-app-bootstrap-page .table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gt-text-muted, #52525B);
    border-bottom: 1px solid var(--gt-border, #E4E4E7) !important;
    background: var(--gt-bg-sunken, #F4F4F5);
}
body.gt-app-bootstrap-page .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: transparent;
}
body.gt-app-bootstrap-page .table tbody tr:hover > * {
    background: var(--gt-bg-elevated, #FAFAFA);
}

/* Формы внутри Bootstrap-страниц */
body.gt-app-bootstrap-page .form-control,
body.gt-app-bootstrap-page .form-select {
    height: 48px;
    padding: 0 16px;
    background: var(--gt-bg, #fff);
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: var(--gt-r-md, 12px);
    color: var(--gt-text, #18181B);
    font-size: 15px;
    box-shadow: none;
    transition: border-color var(--gt-t-fast, 160ms), box-shadow var(--gt-t-fast, 160ms);
}
body.gt-app-bootstrap-page textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 12px 16px;
}
body.gt-app-bootstrap-page .form-control:focus,
body.gt-app-bootstrap-page .form-select:focus {
    border-color: var(--gt-accent, #7B61FF);
    box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.12);
}
body.gt-app-bootstrap-page .form-group label,
body.gt-app-bootstrap-page label {
    font-size: 14px;
    font-weight: 500;
    color: var(--gt-text-muted, #52525B);
    margin-bottom: 6px;
}
body.gt-app-bootstrap-page .form-control-plaintext {
    color: var(--gt-text, #18181B);
    font-size: 15px;
    padding: 6px 0;
}

/* Бейджи Bootstrap (pendingUsersCount и т.п.) — мягкие пилюли */
body.gt-app-bootstrap-page .badge {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--gt-r-pill, 999px);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
body.gt-app-bootstrap-page .badge.bg-danger {
    background: rgba(239, 68, 68, 0.14) !important;
    color: #B91C1C !important;
}
body.gt-app-bootstrap-page .badge.bg-warning {
    background: rgba(234, 179, 8, 0.14) !important;
    color: #854D0E !important;
}
body.gt-app-bootstrap-page .badge.bg-primary {
    background: var(--gt-accent-soft, #EEF2FF) !important;
    color: var(--gt-accent, #7B61FF) !important;
}

/* Dropdown в companies/show — лёгкое скругление, тонкая тень */
body.gt-app-bootstrap-page .dropdown-menu {
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: var(--gt-r-md, 12px);
    box-shadow: var(--gt-shadow-soft, 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06));
    padding: 6px;
}
body.gt-app-bootstrap-page .dropdown-item {
    border-radius: var(--gt-r-sm, 10px);
    padding: 8px 12px;
    font-size: 14px;
}
body.gt-app-bootstrap-page .dropdown-item:hover,
body.gt-app-bootstrap-page .dropdown-item:focus {
    background: var(--gt-accent-soft, #EEF2FF);
    color: var(--gt-accent, #7B61FF);
}

/* Pagination Bootstrap — pill-style v2 */
body.gt-app-bootstrap-page .pagination {
    gap: 4px;
}
body.gt-app-bootstrap-page .page-item .page-link {
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: var(--gt-r-sm, 10px) !important;
    color: var(--gt-text, #18181B);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 14px;
}
body.gt-app-bootstrap-page .page-item.active .page-link {
    background: var(--gt-accent, #7B61FF);
    border-color: var(--gt-accent, #7B61FF);
}
body.gt-app-bootstrap-page .page-item .page-link:hover {
    background: var(--gt-accent-soft, #EEF2FF);
    color: var(--gt-accent, #7B61FF);
    border-color: var(--gt-accent, #7B61FF);
}
body.gt-app-bootstrap-page .page-item.disabled .page-link {
    color: var(--gt-text-subtle, #A1A1AA);
    background: transparent;
}

/* Чтобы container внутри основного main не съезжал из-за sidebar */
body.gt-app-bootstrap-page .row-global__content > .gt-app-content > .container {
    margin-top: 0;
}

/* Текстовые утилиты — на наши токены */
body.gt-app-bootstrap-page .text-muted {
    color: var(--gt-text-muted, #52525B) !important;
}
body.gt-app-bootstrap-page .text-warning {
    color: #B45309 !important;
}
body.gt-app-bootstrap-page .text-danger {
    color: #B91C1C !important;
}
body.gt-app-bootstrap-page .text-primary {
    color: var(--gt-accent, #7B61FF) !important;
}

/* Заголовки внутри Bootstrap-страниц подтянем под Manrope display */
body.gt-app-bootstrap-page h1,
body.gt-app-bootstrap-page h2,
body.gt-app-bootstrap-page h3,
body.gt-app-bootstrap-page h4,
body.gt-app-bootstrap-page h5,
body.gt-app-bootstrap-page h6 {
    font-family: var(--gt-font-display, 'Manrope', 'Inter', sans-serif);
    color: var(--gt-text, #18181B);
    letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------------------
   P1-2. Календарь активности (heatmap) — три оттенка индиго.
   Файл: resources/views/pages/users/partials/profile/calendar.blade.php
   Раньше: бирюзовые точки + красные, теперь GitHub-подобный heatmap
   на акцент-индиго (10% / 40% / 100%).
---------------------------------------------------------------------------- */

/* Реальные классы heatmap (см. calendar.blade.php → шаблоны:
     reviewed = «Проходил уроки» (employee, самый плотный)
     created  = «Проверял/Обнулял Задания» (admin, плотный)
     completed = «Заходил в курсы» (средний)
     rejected = «Заходил на портал» (поверхностный) */
.cart-user-admin .calendar .day.day-color--reviewed,
.cart-user-staff .calendar .day.day-color--reviewed,
.cart-user-admin .calendar .day.day-color--created,
.cart-user-staff .calendar .day.day-color--created {
    background: var(--gt-accent, #7B61FF) !important;
}
.cart-user-admin .calendar .day.day-color--completed,
.cart-user-staff .calendar .day.day-color--completed {
    background: rgba(123, 97, 255, 0.42) !important;
}
.cart-user-admin .calendar .day.day-color--rejected,
.cart-user-staff .calendar .day.day-color--rejected {
    background: rgba(123, 97, 255, 0.18) !important;
}

/* Легенда (точки рядом с подписями) */
.cart-user-admin__info .item__img.day-color--reviewed,
.cart-user-staff__info .item__img.day-color--reviewed,
.cart-user-admin__info .item__img.day-color--created,
.cart-user-staff__info .item__img.day-color--created {
    background: var(--gt-accent, #7B61FF) !important;
}
.cart-user-admin__info .item__img.day-color--completed,
.cart-user-staff__info .item__img.day-color--completed {
    background: rgba(123, 97, 255, 0.42) !important;
}
.cart-user-admin__info .item__img.day-color--rejected,
.cart-user-staff__info .item__img.day-color--rejected {
    background: rgba(123, 97, 255, 0.18) !important;
}

/* ----------------------------------------------------------------------------
   P0-7 (хвост 4a). Тулбар Tiptap-редактора урока.
   Раньше active state = чёрный квадрат (#000), теперь — индиго-soft фон
   с индиго-обводкой; иконки `ri-*` подкрашиваем под токены.
---------------------------------------------------------------------------- */

.cm-tiptap--toolbar {
    background: var(--gt-bg, #fff) !important;
    border-color: var(--gt-border-subtle, #F4F4F5) !important;
    gap: 4px;
    padding: 10px 12px !important;
}
.cm-tiptap--toolbar button {
    background: transparent !important;
    color: var(--gt-text-muted, #52525B) !important;
    border: 1px solid transparent !important;
    border-radius: var(--gt-r-sm, 10px) !important;
    width: 36px;
    height: 36px;
    transition: background var(--gt-t-fast, 160ms), color var(--gt-t-fast, 160ms),
                border-color var(--gt-t-fast, 160ms);
}
.cm-tiptap--toolbar button:hover {
    background: var(--gt-bg-sunken, #F4F4F5) !important;
    color: var(--gt-text, #18181B) !important;
    border-color: var(--gt-border, #E4E4E7) !important;
}
.cm-tiptap--toolbar button.is-active,
.cm-tiptap--toolbar button[aria-pressed="true"] {
    background: var(--gt-accent-soft, #EEF2FF) !important;
    color: var(--gt-accent, #7B61FF) !important;
    border-color: rgba(123, 97, 255, 0.25) !important;
}
.cm-tiptap--toolbar button:disabled {
    background: transparent !important;
    color: var(--gt-text-subtle, #A1A1AA) !important;
    border-color: transparent !important;
    cursor: default;
}

.cm-tiptap--content,
.cm-tiptap--default {
    background: var(--gt-bg, #fff);
    border-radius: var(--gt-r-md, 12px);
    border: 1px solid var(--gt-border, #E4E4E7);
}
.cm-tiptap--default .cm-tiptap--toolbar {
    border-bottom: 1px solid var(--gt-border-subtle, #F4F4F5);
    border-top-right-radius: var(--gt-r-md, 12px);
    border-top-left-radius: var(--gt-r-md, 12px);
}

/* ---------- End of Wave 4c ---------- */

/* ============================================================
   Wave 4d — Mobile/visual finishes (2026-04-25)
   1) Drawer-меню на мобиле: подменю аккордеона в потоке
      (template style.min.css ставит .item__select в @media
       max-width:768px на position:absolute top:100% — оно
       перекрывает соседние пункты).
   2) Pill-кнопки в шапке (.header__button: «Выйти», «Вадим»):
      вертикально центрируем текст через inline-flex.
   ============================================================ */

@media (max-width: 768px) {
    body.gt-drawer-open .row-global__menu .menu-content .item__select,
    body.gt-drawer-open .row-global__menu .menu-content .item__select--sections,
    body.gt-drawer-open .row-global__menu .menu-content .item__select--sections-review {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        background-color: transparent !important;
        margin-left: 0 !important;
        width: auto !important;
    }
}

.header__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Wave 4d (2026-04-26 patch) — горизонтальный overflow на /insights.
   Корень: .gt-insights__block (grid-item) имеет min-width:auto по умолчанию,
   а .gt-insights__feed-text без min-width:0 раздвигает блок min-content'ом
   из-за длинных строк ("Светлана Паршуткина завершил(а) урок Модуль 2.5...").
   Bottom-grid 1fr тогда расширяется до 475px > viewport 430. */
.gt-insights__block { min-width: 0 !important; }
.gt-insights__feed-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

/* Safety net против горизонтального overflow на любых страницах.
   Sticky header не ломается: его scroll-контейнер — <main class="row-global__content">,
   а не body. */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- End of Wave 4d ---------- */

/* ============================================================
   Calendar-redesign v2 — GitHub-style heatmap в дизайн-системе G Teach
   ============================================================ */

/* Карточка не обрезает tooltip */
.gt-profile__calendar-card {
    overflow: visible !important;
}

/* .calendar — рамка + убираем старый clip */
.gt-profile__calendar-card .calendar {
    border-radius: 12px;
    border: 1px solid var(--gt-border, #E4E4E7);
    overflow: visible;
    margin-bottom: 0;
    gap: 0;
    padding: 16px 12px;
}

/* Метки дней недели скрываем — убирают лишнее выравнивание */
.gt-profile__calendar-card .calendar .day-name {
    display: none !important;
}

/* Колонка месяца: тонкий разделитель справа */
.gt-profile__calendar-card .month {
    border: none !important;
    border-right: 1px solid var(--gt-border, #E4E4E7) !important;
    padding: 0 10px;
    background: transparent;
    flex: 0 0 auto;
}
.gt-profile__calendar-card .month:first-child { padding-left: 0; }
.gt-profile__calendar-card .month:last-child  { padding-right: 0; border-right: none !important; }

/* Название месяца: обычный регистр, muted */
.gt-profile__calendar-card .month-name {
    background: transparent !important;
    color: var(--gt-text-muted, #71717A);
    font-family: var(--gt-font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    height: auto;
    line-height: 1.4;
    padding: 0 0 8px;
    margin: 0;
    text-align: left;
}

/* Сетка дней */
.gt-profile__calendar-card .days {
    row-gap: 4px;
    grid-column-gap: 4px;
}

/* Ячейка дня — квадрат 13×13 с мягким indigo-tint фоном */
.gt-profile__calendar-card .day {
    width: 13px;
    max-width: 13px;
    height: 13px;
    border-radius: 3px !important;
    background-color: #EEF2FF !important;
    position: relative;
    transition: filter 0.1s;
    cursor: pointer;
}
.gt-profile__calendar-card .day:hover {
    filter: brightness(0.88);
    z-index: 200;
}

/* Легенда */
.gt-profile__calendar-card .cart-user-admin__info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.gt-profile__calendar-card .cart-user-admin__info .item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gt-profile__calendar-card .cart-user-admin__info .item__img {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.gt-profile__calendar-card .cart-user-admin__info .item__text {
    font-size: 13px;
    color: var(--gt-text-muted);
    font-family: var(--gt-font-body);
}

/* Tooltip — вниз от точки, поверх всего */
.gt-profile__calendar-card .calendar .day .show-case {
    font-family: var(--gt-font-body, 'Inter', sans-serif);
    background: #fff !important;
    border: 1px solid var(--gt-border, #E4E4E7);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    z-index: 1000 !important;
    white-space: nowrap;
}
.gt-profile__calendar-card .calendar .day .show-case__date .value,
.gt-profile__calendar-card .calendar .day .show-case__courses .value,
.gt-profile__calendar-card .calendar .day .show-case__lessons .value {
    color: var(--gt-accent, #7B61FF) !important;
}
.gt-profile__calendar-card .calendar .day .show-case div .name {
    color: var(--gt-text-muted, #71717A);
    font-weight: 500;
}

/* ---------- End of calendar-redesign v2 ---------- */