/* Школа вожатых — стили раздела (тема «Вожатская»). */

.school-body {
    background: var(--vz-bg-soft);
}

.school-main {
    padding: var(--vz-space-6) 0 var(--vz-space-8);
}

/* --- Поднавигация ------------------------------------------------------- */
.school-subnav {
    background: var(--vz-surface);
    border-bottom: 1px solid var(--vz-line);
}

.school-subnav__inner {
    display: flex;
    align-items: center;
    gap: var(--vz-space-5);
    min-height: 56px;
}

.school-subnav__brand {
    font-weight: 800;
    color: var(--vz-text);
    text-decoration: none;
    white-space: nowrap;
}

.school-subnav__list {
    display: flex;
    gap: var(--vz-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.school-subnav__link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: var(--vz-radius-pill);
    color: var(--vz-text-2);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--vz-fs-sm);
    transition: background var(--vz-dur-fast) var(--vz-ease), color var(--vz-dur-fast) var(--vz-ease);
}

.school-subnav__link:hover {
    background: var(--vz-surface-3);
}

.school-subnav__link.is-active {
    background: var(--vz-primary-soft);
    color: var(--vz-primary-deep);
}

.school-subnav__auth {
    font-weight: 600;
    color: var(--vz-primary-deep);
    text-decoration: none;
}

/* --- Хлебные крошки ----------------------------------------------------- */
.school-breadcrumbs {
    margin-bottom: var(--vz-space-4);
}

.school-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--vz-fs-sm);
}

.school-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    color: var(--vz-muted);
}

.school-breadcrumbs__item + .school-breadcrumbs__item::before {
    content: '/';
    margin-right: 6px;
    color: var(--vz-line-strong);
}

.school-breadcrumbs__link {
    color: var(--vz-muted);
    text-decoration: none;
    transition: color var(--vz-dur-fast) var(--vz-ease);
}

.school-breadcrumbs__link:hover {
    color: var(--vz-primary-deep);
}

.school-breadcrumbs__current {
    color: var(--vz-text);
    font-weight: 600;
}

/* --- Лендинг ------------------------------------------------------------ */
.school-landing__hero {
    text-align: center;
    padding: var(--vz-space-7) var(--vz-space-4);
    background: var(--vz-surface);
    border-radius: var(--vz-radius-lg);
    box-shadow: var(--vz-shadow-1);
    margin-bottom: var(--vz-space-7);
}

.school-landing__title {
    font-size: var(--vz-fs-3xl);
    margin: var(--vz-space-3) 0;
}

.school-landing__lead {
    max-width: 640px;
    margin: 0 auto var(--vz-space-5);
    color: var(--vz-muted);
    font-size: var(--vz-fs-lg);
}

.school-landing__cta {
    display: flex;
    gap: var(--vz-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.school-block {
    margin-bottom: var(--vz-space-7);
}

.school-levels-grid,
.school-reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--vz-space-4);
}

.school-level-card {
    display: block;
    padding: var(--vz-space-5);
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow var(--vz-dur) var(--vz-ease), transform var(--vz-dur) var(--vz-ease);
}

.school-level-card:hover {
    box-shadow: var(--vz-shadow-1);
    transform: translateY(-2px);
}

.school-level-card h3 {
    margin: 0 0 var(--vz-space-2);
}

.school-level-card p {
    color: var(--vz-muted);
    font-size: var(--vz-fs-sm);
}

.school-level-card__count {
    display: inline-block;
    margin-top: var(--vz-space-2);
    font-size: var(--vz-fs-xs);
    font-weight: 700;
    color: var(--vz-primary-deep);
}

.school-review {
    padding: var(--vz-space-4);
    background: var(--vz-surface-2);
    border-radius: var(--vz-radius);
    font-size: var(--vz-fs-sm);
    color: var(--vz-text-2);
}

/* --- Каталог ------------------------------------------------------------ */
.school-catalog__head {
    margin-bottom: var(--vz-space-4);
}

.school-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vz-space-3);
    margin-bottom: var(--vz-space-5);
}

.school-filters input[type="search"],
.school-filters select {
    padding: 10px 14px;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-sm);
    font: inherit;
    background: var(--vz-surface);
}

.school-filters input[type="search"] {
    flex: 1 1 260px;
}

.school-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vz-space-3);
    margin-bottom: var(--vz-space-6);
}

.school-track__step {
    display: inline-flex;
    align-items: center;
    gap: var(--vz-space-2);
    padding: 8px 14px;
    border-radius: var(--vz-radius-pill);
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    text-decoration: none;
    color: var(--vz-text-2);
    font-size: var(--vz-fs-sm);
    font-weight: 600;
}

.school-track__step.is-current {
    border-color: var(--vz-primary);
    color: var(--vz-primary-deep);
}

.school-track__step.is-completed .school-track__dot {
    background: var(--vz-success);
    color: #fff;
}

.school-track__step.is-active-filter {
    box-shadow: var(--vz-shadow-orange-sm);
}

.school-track__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vz-surface-3);
    font-size: var(--vz-fs-xs);
}

.school-level-section {
    margin-bottom: var(--vz-space-7);
}

.school-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--vz-space-4);
}

/* --- Карточка курса ----------------------------------------------------- */
.school-course-card {
    display: flex;
    flex-direction: column;
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    overflow: hidden;
    transition: box-shadow var(--vz-dur) var(--vz-ease), transform var(--vz-dur) var(--vz-ease);
}

.school-course-card:hover {
    box-shadow: var(--vz-shadow-1);
    transform: translateY(-2px);
}

.school-course-card--locked {
    opacity: .7;
}

.school-course-card__cover {
    position: relative;
    height: 120px;
    background: linear-gradient(135deg, var(--vz-primary), var(--vz-primary-deep));
    background-size: cover;
    background-position: center;
}

.school-course-card__cover--1 { background: linear-gradient(135deg, #FF8C32, #F97316); }
.school-course-card__cover--2 { background: linear-gradient(135deg, #FB923C, #EA580C); }
.school-course-card__cover--3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.school-course-card__cover--4 { background: linear-gradient(135deg, #F97316, #B91C1C); }

.school-course-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.school-course-card__status {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 10px;
    border-radius: var(--vz-radius-pill);
    background: rgba(255, 255, 255, .92);
    font-size: var(--vz-fs-xs);
    font-weight: 700;
}

.school-course-card__status--completed { color: var(--vz-success); }
.school-course-card__status--exam_available,
.school-course-card__status--failed { color: var(--vz-primary-deep); }
.school-course-card__status--locked { color: var(--vz-muted); }

.school-course-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--vz-space-3);
    padding: var(--vz-space-4);
    flex: 1;
}

.school-course-card__title {
    margin: 0;
    font-size: var(--vz-fs-lg);
}

.school-course-card__desc {
    margin: 0;
    color: var(--vz-muted);
    font-size: var(--vz-fs-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.school-course-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: var(--vz-fs-xs);
    color: var(--vz-muted);
}

.school-course-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--vz-fs-sm);
}

.school-stars {
    color: #F59E0B;
    letter-spacing: 1px;
}

.school-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: var(--vz-fs-xs);
    color: var(--vz-muted);
    margin-bottom: 4px;
}

.school-progress-bar {
    height: 8px;
    background: var(--vz-surface-3);
    border-radius: var(--vz-radius-pill);
    overflow: hidden;
}

.school-progress-bar--sm {
    max-width: 400px;
}

.school-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--vz-primary), var(--vz-primary-deep));
}

.school-course-card__actions {
    display: flex;
    gap: var(--vz-space-2);
    margin-top: auto;
}

/* --- Страница курса ----------------------------------------------------- */
.school-course-hero {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--vz-space-5);
    margin-bottom: var(--vz-space-6);
}

.school-course-hero__cover {
    border-radius: var(--vz-radius);
    min-height: 160px;
    background: linear-gradient(135deg, var(--vz-primary), var(--vz-primary-deep));
    background-size: cover;
    background-position: center;
}

.school-course-hero__cover--1 { background: linear-gradient(135deg, #FF8C32, #F97316); }
.school-course-hero__cover--2 { background: linear-gradient(135deg, #FB923C, #EA580C); }
.school-course-hero__cover--3 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.school-course-hero__cover--4 { background: linear-gradient(135deg, #F97316, #B91C1C); }

.school-course-hero__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--vz-radius);
}

.school-h3 {
    font-size: var(--vz-fs-lg);
    margin: var(--vz-space-4) 0 var(--vz-space-2);
}

.school-outcomes {
    list-style: none;
    margin: 0 0 var(--vz-space-4);
    padding: 0;
    display: grid;
    gap: 6px;
}

.school-outcomes li::before {
    content: '✓';
    color: var(--vz-success);
    margin-right: 8px;
}

.school-course-progress {
    max-width: 400px;
    margin-top: var(--vz-space-4);
}

.school-program {
    max-width: 720px;
    margin-bottom: var(--vz-space-5);
}

.school-course-cta {
    margin-top: var(--vz-space-4);
}

/* --- Сайдбар лекции ----------------------------------------------------- */
.school-sidebar {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-4);
}

.school-sidebar__title {
    font-weight: 700;
    font-size: var(--vz-fs-sm);
    margin-bottom: var(--vz-space-3);
}

.school-sidebar__hint {
    color: var(--vz-muted);
    font-size: var(--vz-fs-sm);
    margin: 0;
}

.school-sidebar__section,
.school-sidebar__lesson {
    display: flex;
    align-items: center;
    gap: var(--vz-space-2);
    padding: 8px 10px;
    border-radius: var(--vz-radius-sm);
    text-decoration: none;
    color: var(--vz-text-2);
    font-size: var(--vz-fs-sm);
}

.school-sidebar__section:hover,
.school-sidebar__lesson:hover {
    background: var(--vz-surface-2);
}

.school-sidebar__section.is-active,
.school-sidebar__lesson.is-active {
    background: var(--vz-primary-soft);
    color: var(--vz-primary-deep);
    font-weight: 600;
}

.school-sidebar__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vz-surface-3);
    font-size: var(--vz-fs-xs);
}

.school-sidebar__section-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.school-sidebar__quiz {
    margin-left: auto;
    font-size: 12px;
    line-height: 1;
    opacity: .75;
}

.school-sidebar__quiz.is-passed {
    color: var(--vz-success);
    opacity: 1;
}

.school-sidebar__section.is-done .school-sidebar__num {
    background: var(--vz-success);
    color: #fff;
}

.school-quiz-pending {
    display: flex;
    gap: var(--vz-space-3);
    align-items: flex-start;
    margin-top: var(--vz-space-4);
    padding: 14px 16px;
    border: 1px solid #f0c36d;
    border-radius: var(--vz-radius-sm);
    background: #fff8e6;
}

.school-quiz-pending__icon {
    font-size: 20px;
    line-height: 1.2;
}

.school-quiz-pending__body strong {
    display: block;
    margin-bottom: 6px;
    color: #8a5a00;
}

.school-quiz-pending__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.school-quiz-pending__links a {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #f0c36d;
    color: #8a5a00;
    font-size: var(--vz-fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.school-quiz-pending__links a:hover {
    background: #fdf1d6;
}

.school-sidebar__lessons {
    margin-top: var(--vz-space-4);
    border-top: 1px solid var(--vz-line);
    padding-top: var(--vz-space-3);
}

.school-sidebar__toggle {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    font-size: var(--vz-fs-sm);
}

.school-sidebar__list {
    margin-top: var(--vz-space-2);
    display: grid;
    gap: 2px;
}

.school-sidebar__check {
    color: var(--vz-success);
}

.school-sidebar__lesson.is-done {
    color: var(--vz-muted);
}

.school-sidebar__lesson.is-locked {
    color: var(--vz-muted);
    opacity: .55;
    cursor: not-allowed;
}

.school-sidebar__lesson.is-locked:hover {
    background: transparent;
}

/* --- Лекция ------------------------------------------------------------- */
.school-lesson__head {
    margin-bottom: var(--vz-space-5);
}

.school-lesson__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--vz-space-6);
    align-items: start;
}

.school-lesson__aside {
    position: sticky;
    top: calc(var(--vz-header-h) + 16px);
}

.school-part-progress {
    margin-bottom: var(--vz-space-4);
}

.school-part-progress__bar {
    height: 6px;
    background: var(--vz-surface-3);
    border-radius: var(--vz-radius-pill);
    overflow: hidden;
}

.school-part-progress__fill {
    height: 100%;
    background: var(--vz-primary);
}

.school-lesson__content {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-6);
    line-height: var(--vz-lh);
}

.school-lesson__content img,
.school-lesson__content video,
.school-lesson__content audio {
    max-width: 100%;
    border-radius: var(--vz-radius-sm);
}

.school-lesson__content h2,
.school-lesson__content h3 {
    margin-top: var(--vz-space-5);
}

.school-part-pager,
.school-lesson__actions,
.school-exam__actions,
.school-result__actions,
.school-dashboard__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vz-space-3);
    justify-content: space-between;
    margin-top: var(--vz-space-5);
}

.school-lesson__actions,
.school-exam__actions,
.school-result__actions,
.school-dashboard__actions {
    justify-content: flex-start;
}

/* --- Гейт для гостей ---------------------------------------------------- */
.school-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vz-space-4);
    padding: var(--vz-space-4) var(--vz-space-5);
    background: var(--vz-primary-soft);
    border: 1px solid var(--vz-primary-ring);
    border-radius: var(--vz-radius);
    margin-bottom: var(--vz-space-4);
}

.school-gate p {
    margin: 4px 0 0;
    color: var(--vz-text-2);
    font-size: var(--vz-fs-sm);
}

/* --- Квиз --------------------------------------------------------------- */
.school-quiz__head {
    margin-bottom: var(--vz-space-5);
}

.school-quiz__question {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-4) var(--vz-space-5);
    margin-bottom: var(--vz-space-4);
}

.school-quiz__question.is-correct {
    border-color: var(--vz-success);
    background: var(--vz-success-soft);
}

.school-quiz__question.is-wrong {
    border-color: var(--vz-danger);
    background: var(--vz-danger-soft);
}

.school-quiz__legend {
    display: flex;
    gap: var(--vz-space-2);
    font-weight: 700;
    padding: 0;
    margin-bottom: var(--vz-space-3);
}

.school-quiz__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--vz-primary);
    color: #fff;
    font-size: var(--vz-fs-xs);
}

.school-quiz__answers {
    display: grid;
    gap: var(--vz-space-2);
}

.school-quiz__answer {
    display: flex;
    align-items: center;
    gap: var(--vz-space-2);
    padding: 10px 14px;
    border: 1px solid var(--vz-border);
    border-radius: var(--vz-radius-sm);
    cursor: pointer;
    transition: border-color var(--vz-dur-fast) var(--vz-ease), background var(--vz-dur-fast) var(--vz-ease);
}

.school-quiz__answer:hover {
    border-color: var(--vz-primary);
}

.school-quiz__answer.is-correct-answer {
    border-color: var(--vz-success);
    background: var(--vz-success-soft);
}

.school-quiz__answer.is-wrong-answer {
    border-color: var(--vz-danger);
    background: var(--vz-danger-soft);
}

.school-quiz__feedback {
    margin-top: var(--vz-space-3);
    font-size: var(--vz-fs-sm);
}

.school-quiz__feedback--ok { color: var(--vz-success); }
.school-quiz__feedback--fail { color: var(--vz-danger); }

.school-quiz__summary {
    margin-top: var(--vz-space-5);
    padding: var(--vz-space-5);
    border-radius: var(--vz-radius);
    text-align: center;
    border: 1px solid var(--vz-line);
    background: var(--vz-surface);
}

.school-quiz__summary--pass { border-color: var(--vz-success); background: var(--vz-success-soft); }
.school-quiz__summary--fail { border-color: var(--vz-danger); background: var(--vz-danger-soft); }

.school-quiz__summary-actions {
    display: flex;
    gap: var(--vz-space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--vz-space-4);
}

/* Улучшенная читаемость теста */
.school-quiz__legend {
    font-size: var(--vz-fs-lg);
    align-items: flex-start;
}

.school-quiz__answer {
    min-height: 52px;
    font-size: var(--vz-fs-base);
}

.school-quiz__answer input[type="radio"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Плавающая панель действий теста */
.school-quiz__bar {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vz-space-4);
    flex-wrap: wrap;
    margin-top: var(--vz-space-5);
    padding: 14px 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    box-shadow: var(--vz-shadow-2);
}

.school-quiz__progress {
    font-size: var(--vz-fs-sm);
    color: var(--vz-muted);
}

.school-quiz__progress strong {
    color: var(--vz-text);
}

.school-quiz__bar-actions {
    display: flex;
    align-items: center;
    gap: var(--vz-space-3);
    margin-left: auto;
}

#school-quiz-submit.is-ready {
    box-shadow: var(--vz-shadow-orange);
}

/* Callout «Пройти тест» на странице лекции */
.school-quiz-callout {
    display: flex;
    align-items: center;
    gap: var(--vz-space-4);
    flex-wrap: wrap;
    margin-top: var(--vz-space-5);
    padding: var(--vz-space-5);
    background: linear-gradient(135deg, var(--vz-primary-soft), rgba(255, 140, 50, .04));
    border: 1px solid var(--vz-primary-ring);
    border-radius: var(--vz-radius);
}

.school-quiz-callout__icon {
    font-size: 2rem;
    line-height: 1;
}

.school-quiz-callout__body {
    flex: 1 1 260px;
}

.school-quiz-callout__body strong {
    display: block;
    font-size: var(--vz-fs-lg);
    margin-bottom: 4px;
}

.school-quiz-callout__body p {
    margin: 0;
    color: var(--vz-muted);
    font-size: var(--vz-fs-sm);
}

.school-quiz-callout__btn {
    flex-shrink: 0;
}

.school-quiz-callout.is-passed {
    background: linear-gradient(135deg, rgba(34, 197, 94, .1), rgba(34, 197, 94, .03));
    border-color: rgba(34, 197, 94, .35);
}

@media (max-width: 640px) {
    .school-quiz-callout__btn {
        width: 100%;
    }

    .school-quiz__bar-actions {
        width: 100%;
    }

    .school-quiz__bar-actions .btn {
        flex: 1;
    }
}

/* --- Экзамен ------------------------------------------------------------ */
.school-exam__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vz-space-4);
    margin-bottom: var(--vz-space-5);
}

.school-exam__timer {
    font-size: var(--vz-fs-2xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--vz-primary-deep);
    background: var(--vz-primary-soft);
    padding: var(--vz-space-2) var(--vz-space-4);
    border-radius: var(--vz-radius);
}

.school-exam__intro {
    background: var(--vz-surface-2);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-4) var(--vz-space-5);
    margin-bottom: var(--vz-space-5);
}

/* --- Результат ---------------------------------------------------------- */
.school-result {
    text-align: center;
    padding: var(--vz-space-8) var(--vz-space-4);
    max-width: 560px;
    margin: 0 auto;
}

.school-result__icon {
    font-size: 3.5rem;
    margin-bottom: var(--vz-space-3);
}

.school-result__icon.is-pass { color: var(--vz-success); }
.school-result__icon.is-fail { color: var(--vz-danger); }

.school-result__score {
    font-size: var(--vz-fs-2xl);
    font-weight: 800;
    color: var(--vz-primary-deep);
}

.school-certificate {
    display: inline-block;
    margin-top: var(--vz-space-4);
    padding: var(--vz-space-5);
    border: 2px dashed var(--vz-primary);
    border-radius: var(--vz-radius);
    background: var(--vz-surface);
}

.school-result__actions {
    justify-content: center;
}

/* --- Кабинет ------------------------------------------------------------ */
.school-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--vz-space-4);
    margin: var(--vz-space-5) 0;
}

.school-stat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--vz-space-5);
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
}

.school-stat-card__label {
    font-size: var(--vz-fs-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--vz-muted);
}

.school-stat-card strong {
    font-size: var(--vz-fs-2xl);
}

.school-stat-card small {
    color: var(--vz-muted);
}

.school-progress-card {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-5);
    margin-bottom: var(--vz-space-5);
}

.school-current {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-5);
    margin-bottom: var(--vz-space-6);
}

.school-achievements__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--vz-space-4);
}

.school-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--vz-space-4);
}

.school-achievement-card {
    padding: var(--vz-space-4);
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    text-align: center;
}

.school-achievement-card.is-secret {
    opacity: .65;
}

.school-achievement-card.is-earned {
    border-color: var(--vz-primary);
    box-shadow: var(--vz-shadow-orange-sm);
}

.school-achievement-card__icon {
    font-size: 2rem;
}

.school-achievement-card h3 {
    font-size: var(--vz-fs-base);
    margin: var(--vz-space-2) 0;
}

.school-achievement-card p {
    font-size: var(--vz-fs-sm);
    color: var(--vz-muted);
    margin: 0 0 var(--vz-space-2);
}

.school-achievement-card small {
    color: var(--vz-text-light);
}

/* --- Рейтинг ------------------------------------------------------------ */
.school-leaderboard {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--vz-space-5);
    align-items: start;
}

.school-leaderboard__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vz-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--vz-space-4);
}

.school-period-tabs {
    display: inline-flex;
    background: var(--vz-surface-3);
    border-radius: var(--vz-radius-pill);
    padding: 4px;
}

.school-period-tabs a {
    padding: 6px 14px;
    border-radius: var(--vz-radius-pill);
    text-decoration: none;
    color: var(--vz-text-2);
    font-size: var(--vz-fs-sm);
    font-weight: 600;
}

.school-period-tabs a.is-active {
    background: var(--vz-surface);
    box-shadow: var(--vz-shadow-1);
    color: var(--vz-primary-deep);
}

.school-my-rank {
    display: flex;
    align-items: center;
    gap: var(--vz-space-3);
    padding: var(--vz-space-4) var(--vz-space-5);
    background: var(--vz-primary-soft);
    border: 1px solid var(--vz-primary-ring);
    border-radius: var(--vz-radius);
    margin-bottom: var(--vz-space-4);
}

.school-my-rank__icon {
    font-size: 1.75rem;
}

.school-leaderboard-card {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    overflow: hidden;
}

.school-lb-row {
    display: grid;
    grid-template-columns: 48px 1fr auto auto auto;
    align-items: center;
    gap: var(--vz-space-3);
    padding: var(--vz-space-3) var(--vz-space-4);
    border-bottom: 1px solid var(--vz-line);
}

.school-lb-row:last-child {
    border-bottom: 0;
}

.school-lb-row.is-me {
    background: var(--vz-primary-soft);
}

.school-lb-row__rank {
    font-weight: 800;
    text-align: center;
    color: var(--vz-muted);
}

.school-lb-row__rank.is-top {
    color: var(--vz-primary-deep);
    font-size: var(--vz-fs-lg);
}

.school-lb-row__user {
    display: flex;
    align-items: center;
    gap: var(--vz-space-3);
}

.school-lb-row__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vz-surface-3);
    font-weight: 700;
    overflow: hidden;
}

.school-lb-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.school-lb-row__name {
    font-weight: 600;
}

.school-lb-row__level {
    font-size: var(--vz-fs-xs);
    color: var(--vz-muted);
}

.school-lb-row__stat {
    font-weight: 700;
    text-align: right;
}

.school-lb-row__stat small {
    font-weight: 400;
    color: var(--vz-muted);
}

.school-profile-card {
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-radius: var(--vz-radius);
    padding: var(--vz-space-5);
    text-align: center;
}

.school-profile-card__level {
    font-weight: 700;
}

.school-profile-card__xp {
    font-size: var(--vz-fs-2xl);
    font-weight: 800;
    color: var(--vz-primary-deep);
    margin: var(--vz-space-2) 0;
}

/* --- Тосты достижений --------------------------------------------------- */
.school-toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.school-toast {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 260px;
    max-width: 360px;
    padding: 14px 16px;
    background: var(--vz-surface);
    border: 1px solid var(--vz-line);
    border-left: 4px solid var(--vz-primary);
    border-radius: var(--vz-radius-sm);
    box-shadow: var(--vz-shadow-2);
    animation: school-toast-in .3s var(--vz-ease-out);
}

.school-toast.is-hiding {
    animation: school-toast-out .3s var(--vz-ease) forwards;
}

.school-toast__icon {
    font-size: 1.5rem;
}

.school-toast__title {
    font-weight: 700;
    font-size: var(--vz-fs-sm);
}

.school-toast__desc {
    font-size: var(--vz-fs-xs);
    color: var(--vz-muted);
}

@keyframes school-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes school-toast-out {
    to { opacity: 0; transform: translateY(12px); }
}

/* --- Адаптив ------------------------------------------------------------ */
@media (max-width: 900px) {
    .school-lesson__layout,
    .school-leaderboard {
        grid-template-columns: 1fr;
    }

    .school-lesson__aside {
        position: static;
    }

    .school-course-hero {
        grid-template-columns: 1fr;
    }

    .school-lb-row {
        grid-template-columns: 40px 1fr auto;
    }

    .school-lb-row__stat--hide {
        display: none;
    }
}

/* --- Финальный экзамен уровня ------------------------------------------- */
.school-final-exam-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--vz-space-4);
    flex-wrap: wrap;
    margin-top: var(--vz-space-5);
    padding: var(--vz-space-4) var(--vz-space-5);
    border: 1px dashed var(--vz-primary-ring);
    border-radius: var(--vz-radius);
    background: var(--vz-primary-soft);
}

.school-final-exam-card__body strong {
    display: block;
    margin-bottom: 4px;
    font-size: var(--vz-fs-lg);
}

.school-final-exam-card__body p {
    margin: 0;
}

.school-level-card {
    border-left: 4px solid var(--vz-primary);
}

/* --- Последовательное прохождение разделов ------------------------------ */
.school-sidebar__section.is-locked {
    color: var(--vz-muted);
    opacity: .55;
    cursor: not-allowed;
}

.school-sidebar__section.is-locked:hover {
    background: transparent;
}

.school-quiz-callout.is-locked {
    background: linear-gradient(135deg, var(--vz-surface-2), rgba(30, 41, 59, .03));
    border-color: var(--vz-line);
}