/* ===== ОСНОВНЫЕ СТИЛИ СТРАНИЦЫ ===== */
.education-page {
    padding: 40px 60px 40px 30px;
}

.welcome-edu {
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-primary);
}

.education-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

/* ===== ОСНОВНЫЕ КОМПОНЕНТЫ ===== */
.card {
    background: #fff;
    border: var(--card-border);
    border-radius: 10px;
    padding: 20px;
}

/* Секция прогресса */
.progress-card {
    margin-bottom: 20px;
    padding: 0;
    overflow: hidden;
}

/* Сетка статистики */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    min-width: 330px;
    min-height: 180px;
}

.rank-card {
    min-width: 220px;
}

/* ===== КАРТОЧКА ПРОГРЕССА (КРУГ) ===== */
.stat-progress {
    width: 100%;
    padding: 16px;
}

.statp-title {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: #000000;
}

.statp-body {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: center;
}

/* Круговой индикатор */
.statp-gauge {
    position: relative;
    width: 87px;
    height: 87px;
}

.statp-svg {
    width: 87px;
    height: 87px;
    display: block;
    transform: rotate(-90deg);
}

.statp-track {
    fill: none;
    stroke: #C7D2FE;
    stroke-width: 8;
    stroke-linecap: round;
}

.statp-progress {
    fill: none;
    stroke: #0D4CD3;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 188.4956;
    stroke-dashoffset: 188.4956;
    transition: stroke-dashoffset 0.6s ease;
}

.statp-percent {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
}

/* Легенда прогресса */
.statp-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    justify-items: start;
}

.statp-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    justify-content: space-around;
}

.statp-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
}

/* Бейджи статистики */
.statp-badge {
    display: inline-block;
    min-width: 100px;
    padding: 4px 11px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.statp-badge--primary {
    background: #0D4CD3;
    color: #fff;
}

.statp-badge--ghost {
    background: #EDF2FE;
    color: #0D4CD3;
}

/* Бонусные баллы */
.bonus-amount-wrapper {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.bonus-amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 87px;
    height: 87px;
    min-width: 87px;
    min-height: 87px;
    background-color: var(--color-primary);
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
}

.bonus-amount-label {
    font-size: 10px;
    font-weight: 400;
}

/* Рейтинг пользователя */
.rank-name {
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
}

.rank-stars {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rank-star {
    display: inline-flex;
    line-height: 0;
    color: var(--color-icons);
}

.rank-star.is-filled {
    color: var(--color-primary);
}

/* ===== СЕТКА МОДУЛЕЙ ===== */
.modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Карточка модуля */
.module-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 190px;
    padding: 18px 20px 16px;
    background: #fff;
    border: var(--card-border);
    border-radius: 12px;
}

/* Шапка модуля */
.module-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.module-tag {
    display: inline-block;
    padding: 9px 18px;
    background: var(--color-light);
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
}

.lessons {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-primary);
}

/* Заголовок модуля */
.module-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
}

.module-title-head {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
}

/* Кнопка перехода */
.module-go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: var(--color-primary);
    border: none;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s ease;
}

/* Прогресс-бар */
.progress-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 13px;
    align-items: center;
    max-width: 390px;
}

.progress-val {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
}

.progress-bar {
    height: 8px;
    background: var(--color-icons);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar .progress {
    height: 100%;
    background: var(--color-primary);
    border-radius: inherit;
}

/* ===== СОСТОЯНИЯ МОДУЛЕЙ ===== */

/* Текущий модуль */
.module-card.is-current {
    background: var(--color-primary);
    border-color: #CFC6CE;
    color: #fff;
}

.module-card.is-current .lessons,
.module-card.is-current .module-title,
.module-card.is-current .progress-val {
    color: #fff;
}

.module-card.is-current .module-go {
    background: #fff;
    color: var(--color-primary);
}

/* ВАЖНО: фон шкалы белый, заполнение var(--color-icons) */
.module-card.is-current .progress-bar {
    background: #fff;
}
.module-card.is-current .progress-bar .progress {
    background: var(--color-icons);
}

/* Пройденный модуль */
.module-card.is-completed {
    background: var(--color-primary);
    border-color: #CFC6CE;
    color: #fff;
}

.module-card.is-completed .lessons,
.module-card.is-completed .module-title,
.module-card.is-completed .progress-val {
    color: #fff;
}

.module-card.is-completed .module-go {
    background: #fff;
    color: var(--color-primary);
}

/* ВАЖНО: фон шкалы белый, заполнение var(--color-icons) */
.module-card.is-completed .progress-bar {
    background: #fff;
}
.module-card.is-completed .progress-bar .progress {
    background: var(--color-icons);
}

/* Экзамен */
.module-card.exam {
    position: relative;
    grid-column: 1 / -1;
    background: var(--color-gray);
    color: #fff;
}

.module-card.exam .module-tag {
    padding: 9px 13px;
    background: #A8A8A8;
    color: #fff;
}

.module-card.exam .module-title {
    color: #fff;
    margin-right: 0;
}

.module-card.exam .progress-bar {
    background: #A8A8A8;
    max-width: 350px;
}

.module-card.exam .progress-bar .progress {
    background: #fff;
}

.module-card.exam .progress-val {
    color: #fff;
}

.exam-pattern {
    position: absolute;
    inset: 0;
    background: url(/static/img/bg_exam.png) no-repeat;
    background-size: 482px auto;
    background-position: 100% 48%;
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ ===== */
.card.resources-card {
    position: relative;
    min-height: 190px;
    border: none;
    background-image: url('/static/img/bg_extra_material.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 20px;
}

.extra-material-head {
    margin: 0;
    max-width: 228px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.extra-material-head:after {
    content: "";
    display: block;
    clear: both;
}

.wrap-icon {
    float: left;
    width: 0.6em;
    height: 0.6em;
    margin: 0.50em 4px 0 0;
    display: block;
    shape-outside: circle(48% at 50% 50%);
    -webkit-shape-outside: circle(48% at 50% 50%);
}

.module-tag-extra {
    padding: 9px;
    background: var(--color-light);
    border-radius: 3px;
    margin-bottom: 20px;
    color: var(--color-primary);
}

/* Бонусная карточка */
.card.bonus-card {
    position: relative;
    min-width: 285px;
    min-height: 211px;
    background-color: var(--color-primary);
}

.module-tag-bonus-lesson {
    display: inline-block;
    padding: 9px;
    background: var(--color-light);
    border-radius: 3px;
    margin-bottom: 20px;
    color: var(--color-primary);
}

/* Кнопки действий */
.resources-card-extra-button {
    position: absolute;
    right: 20px;
    bottom: 67px;
}

.resources-go {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: #fff;
    border: none;
    border-radius: 999px;
    color: var(--color-primary);
    cursor: pointer;
    transition: transform 0.12s ease;
}

.bonuses-go {
    bottom: 20px;
    right: 20px;
}

/* ===== БОКОВАЯ ПАНЕЛЬ ===== */
.education-sidebar .card + .card {
    margin-top: 20px;
}

/* Кураторы */
.curators-card {
    padding: 20px 20px 37px 20px;
}

.curators-card h3 {
    margin-bottom: 20px;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.mentors-list-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mentors-list-info-item {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.avatar {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    object-fit: cover;
}

.curator-name {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-gray);
}

.curator-tag {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-primary);
}

/* Поддержка */
.support-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
}

.support-card h3 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

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

@media (max-width: 420px) {
    .statp-body {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

.module-progress-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 288px;
    justify-content: space-around;
}

.module-progress-circle h3 {
    color: #000;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
}

/* Круговой индикатор */
.statp-gauge-module {
    position: relative;
    width: 134px;
    height: 134px;
}

.statp-svg-module {
    width: 134px;
    height: 134px;
    display: block;
    transform: rotate(-90deg);
}

.statp-track-module {
    fill: none;
    stroke: #C7D2FE;
    stroke-width: 10.72px;
    stroke-linecap: round;
}

.statp-progress-module {
    fill: none;
    stroke: #0D4CD3;
    stroke-width: 10.72px;
    stroke-linecap: round;
    stroke-dasharray: 387.36;
    stroke-dashoffset: 387.36;
    transition: stroke-dashoffset 0.6s ease;
}

.statp-percent-module {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
}

.module-page-header {
    border: none;
    background-color: var(--color-primary);
    margin-bottom: 20px;
    min-height: 250px;
    padding: 30px;
}

.back-to-main {
    display: inline-flex;
    gap: 10px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 16px;
}

.module-page-header h1 {
    font-family: var(--font-body);
    font-size: 50px;
    font-weight: 600;
    color: #fff;
    max-width: 664px;
}

.module-order {
    color: var(--color-icons);
    margin-right: 10px;
}

.module-page-lesson-card {
    min-height: 301px;
    position: relative;
    justify-content: flex-start;
}

.lesson-state-tag {
    position: absolute;
    display: inline-flex;
    top: 0;
    right: 0;
    border-radius: 0 10px;
    height: 40px;
    min-width: 167px;
    padding: 0 10px;
    flex-direction: row;
    align-items: center;
    gap: 8.5px;
    font-family: var(--font-body);
    font-size: 14px;
}

.lesson-state-tag.seen {
    background-color: #E9FFED;
    color: #39734F;
}

.lesson-state-tag.not-seen {
    background-color: var(--color-light);
    color: var(--color-gray);
}

.module-page-lesson-title {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    max-width: 330px;
}

.module-page-lesson-title h3 {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
}

.module-page-lesson-title p {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-gray);
}

.lesson-card-bottom {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: auto;
}

.watch-a-lesson {
    display: flex;
    flex-direction: row;
    gap: 10px;
    height: 50px;
    padding: 0 15px;
    align-items: center;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 16px;
    background-color: var(--color-light);
    border-radius: 10px;
    transition: all .2s ease;
}

.watch-a-lesson:hover {
    color: #fff;
    background-color: var(--color-primary);
    transition: all .2s ease;
}

.duration-block {
    display: flex;
    flex-direction: row;
    gap: 5px;
    height: 50px;
    align-items: center;
    color: #A7A7A7;
    font-family: var(--font-body);
    font-size: 14px;
}

.modules-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.modules-navigation h3 {
    margin-bottom: 10px;
}

.modules-navigation a {
    color: #000;
    font-family: var(--font-body);
    font-size: 10px;
    transition: color .2s ease;
}

.modules-navigation a:hover {
    color: var(--color-primary);
    transition: color .2s ease;
}

.modules-navigation a:not(:last-child) {
    margin-bottom: 20px;
}

/* Стили для галочки отметки урока */
.lesson-completion-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lesson-completion-toggle:hover .checkmark {
    opacity: 1;
}

.lesson-completion-toggle.completed {
    color: #39734F;
}

.completion-checkbox {
    transition: all 0.2s ease;
}

.checkmark {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.checkmark.visible {
    opacity: 1;
}

.lesson-completion-toggle.completed .checkbox-circle {
    stroke: #39734F;
    fill: #f0f9f0;
}

.completion-text {
    font-weight: 500;
    font-size: 16px;
}

/* Кнопки навигации */
.nav-button {
    height: 19px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 400;
    font-size: 16px;
    min-width: 140px;
}

.nav-button.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.nav-button.prev-lesson {
    justify-content: flex-start;
}

.nav-button.next-lesson {
    justify-content: flex-end;
}

/* Центральная информация */
.lesson-info h1 {
    font-family: var(--font-body);
    font-size: 50px;
    font-weight: 600;
    color: #fff;
    max-width: 632px;
    text-align: left;
}

.lesson-order {
    color: var(--color-icons);
}

.lesson-progress {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.progress-text {
    font-family: var(--font-body);
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    white-space: nowrap;
}


.lesson-page-header {
    display: flex;
    padding: 30px;
    background-color: var(--color-primary);
    min-height: 250px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 20px;
}

.navigation-lessons-buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    height: 19px;
    align-items: center;
    margin-bottom: 30px;
}

.lesson-description {
    font-family: var(--font-body);
    max-width: 460px;
    font-size: 14px;
    color: #000;
    font-weight: 400;
    margin-bottom: 25px;
}

.have-a-nice-lesson {
    font-family: var(--font-body);
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
}

.video-container {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 30px;
}

.simple-heading {
    font-family: var(--font-body);
    margin-bottom: 10px;
    color: #000;
    font-size: 20px;
    font-weight: 700;
}

.simple-text {
    font-family: var(--font-body);
    margin-bottom: 18px;
    color: #000;
    font-size: 14px;
    font-weight: 400;
}

/* video-player */
.video-player-wrapper {
    position: relative;
    margin: 2rem 0;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    background: #000;
}

/* Стили превью */
.video-preview {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.thumbnail-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 10px;
}

.video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    border-radius: 10px;
}

/* Кнопка воспроизведения */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
    transition: transform 0.2s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.play-icon {
    width: 87px;
    height: 87px;
    transition: transform 0.3s ease;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

/* Бейдж длительности */
.video-duration {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    z-index: 2;
}

/* Бейдж источника видео */
.video-source-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
}

/* Стили плеера */
.video-player-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}

/* Кастомный видеоплеер */
.custom-video-player {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.custom-video-player video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Контейнер для embed видео */
.embed-container {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.embed-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

/* Кнопка закрытия */
.close-player {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-player:hover {
    background: rgba(0,0,0,0.9);
    transform: scale(1.1);
}

/* Анимации */
.video-preview {
    animation: fadeIn 0.5s ease;
}

.video-player-container {
    animation: slideUp 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Адаптивность */
@media (max-width: 768px) {
    .video-player-wrapper {
        margin: 1rem 0;
        border-radius: 10px;
    }

    .play-icon {
        width: 64px;
        height: 64px;
    }

    .video-duration,
    .video-source-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    .close-player {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
}

/* Гарантированно блочные элементы */
.video-player-wrapper,
.video-preview,
.thumbnail-container,
.video-player-container,
.embed-container {
    display: block;
    width: 100%;
}

/* Соотношение сторон для превью и плеера одинаково */
.thumbnail-container,
.video-player-container,
.embed-container {
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Картинка занимает весь контейнер */
.video-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Iframe на всю площадь */
.embed-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}