@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

* {
    font-family: "Onest", Arial, sans-serif;
    box-sizing: border-box;
    color: #333;
    caret-color: transparent;
}

body {
    margin: 0px 0px 0px 0px;
}

footer.container {
    background-color: white;
}

footer hr {
    border-top: 3px solid #f6f7f8;
}

.course-page-content {
    position: relative;

    background-color: #f6f7f8;

    min-height: 100vh;

    display: flex;
    justify-content: center;
}

.course-page-block {
    width: 100%;
    max-width: 63.6rem;
    margin-top: 7rem;

    background: white;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 8rem;
    padding-right: 8rem;

    border-radius: 12px;

    margin-bottom: 3rem;
}

.course-page-block h3 {
    font-weight: 700;
    font-size: 1.5rem;
}

.course-page-block h2 {
    font-weight: 700;
    font-size: 2rem;
}

.course-page-name {
    /* Semantic H1, visually identical to the previous H2. */
    margin-block-start: 0.83em;
    margin-block-end: 0;
    font-size: 2rem;
    font-weight: 700;
}

.course-page-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.course-page-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.course-page-meta__item span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.course-page-meta__item--reading {
    margin-left: auto;
}

.course-page-meta__icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: inherit;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.course-page-meta__icon--level {
    -webkit-mask-image: url("/images/icons/course-level.svg");
    mask-image: url("/images/icons/course-level.svg");
}

.course-page-meta__icon--reading {
    -webkit-mask-image: url("/images/icons/reading-time.svg");
    mask-image: url("/images/icons/reading-time.svg");
}

/* The metadata owns the entire gap to the article body. Remove the first
   content node's native top margin so the visual gap matches the article
   h3 → body rhythm (1em of a 1.5rem h3 = 1.5rem). */
.course-page-text > :first-child {
    margin-top: 0;
}

@media (max-width: 720px) {
    .course-page-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .course-page-meta__item--reading {
        margin-left: 0;
    }
}

.course-page-text {
    line-height: 1.5;
}

.course-page-text p {
    font-weight: 450;
    font-size: 1.1rem;
    text-align: justify;
    text-justify: inter-word;
}

.course-page-text li {
    font-weight: 450;
    font-size: 1.1rem;
}

.course-page-text ul {
    list-style: none;
    padding-left: 1.75rem;
    margin: 0 0 1rem 0;
}

.course-page-text ul li {
    position: relative;
    display: block;
    line-height: 1.5;
    margin-bottom: 0.65rem;
}

.course-page-text ul li::before {
    content: "";
    position: absolute;
    left: -1.75rem;
    top: 0.65em;

    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
}

.course-page-text img.png {
    display: block;          /* делаем блочным элементом */
    margin: 2rem auto;       /* auto по бокам = центр */
    max-width: 100%;         /* чтобы не вылезала за блок */
    height: auto;
    border-radius: 14px;
}

/* Optional image caption. A figure keeps the same 2rem outer spacing as a
   regular course image; the caption lives inside that spacing block. */
.course-page-text .course-image {
    width: fit-content;
    max-width: 100%;
    margin: 2rem auto;
}

.course-page-text .course-image img.png {
    margin: 0;
}

.course-page-text .course-image__caption {
    margin-top: 0.5rem;
    color: #777777;
    font-size: 1rem;
    font-weight: 450;
    line-height: 1.4;
    text-align: left;
}

.progress-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;

    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: white;
    padding: 0.65rem 0.9rem;

    cursor: pointer;
    user-select: none;
}

.course-page-actions{
    margin-top: 2rem;
}

.progress-toggle__text{
    font-weight: 400;
    font-size: 1rem;
    color: #333333;
}

.progress-toggle__state{
    width: 12px;
    height: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 12px;
}

.progress-toggle__dot{
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;
    background: #cbd5e1;

    flex: 0 0 7px;
}

.progress-toggle__check{
    display: none;

    width: 16px;
    height: 16px;

    object-fit: contain;
    flex: 0 0 16px;
}

.progress-toggle.is-completed .progress-toggle__dot{
    display: none;
}

.progress-toggle.is-completed .progress-toggle__check{
    display: block;
}

.course-page-actions{
    margin-top: 5rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}


.complete-hint{
    grid-column: 1 / -1;
}

.nav-btn{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;

    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: white;
    padding: 0.65rem 0.9rem;

    text-decoration: none;
    cursor: pointer;
    user-select: none;

    transition:
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow       0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:active{
    transform: translateY(1px);
}

.nav-btn__text{
    font-weight: 400;
    font-size: 1rem;
    color: #333333;
}

.nav-btn__icon{
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
    color: #333333;
}

.nav-btn--prev{
    grid-column: 1;
    justify-self: start;
}

.progress-toggle{
    grid-column: 2;
    justify-self: center;
}

.nav-btn--next{
    grid-column: 3;
    justify-self: end;
}

.nav-btn--prev, .nav-btn--next{
    white-space: nowrap;
}

.nav-btn__icon {
    flex-shrink: 0;
    position: relative;
}

.nav-btn--next .nav-btn__icon {
    display: inline-block;
    transition: transform 220ms ease, opacity 220ms ease;
    will-change: transform, opacity;
}

.nav-btn--next.is-arrow-anim .nav-btn__icon {
    transform: translateX(10px);
    opacity: 0;
}

.nav-btn--prev .nav-btn__icon {
    display: inline-block;
    transition: transform 220ms ease, opacity 220ms ease;
    will-change: transform, opacity;
}

.nav-btn--prev.is-arrow-anim .nav-btn__icon {
    transform: translateX(-10px);
    opacity: 0;
}

.nav-btn.is-arrow-anim{
    pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {
  .nav-btn--next .nav-btn__icon {
    transition: none;
  }
  .nav-btn--prev .nav-btn__icon {
    transition: none;
  }
}

@media (max-width: 900px){
    .course-page-block{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .course-page-actions{
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .nav-btn,
    .progress-toggle{
        padding: 0.55rem 0.7rem;
        font-size: 0.95rem;
    }
}



/* =========================================================
   ЗАМЕТКА ВНУТРИ КУРСА
   ========================================================= */

.course-note {
    margin: 2rem 0 0;
    padding: 1rem 1.1rem;

    border-left: 4px solid #3b82f6;
    border-radius: 0 10px 10px 0;

    background: #f1f5f9;
    color: #333333;

    font-size: 1.05rem;
    font-weight: 450;

    line-height: 1.5;
}

.course-note strong {
    color: #333333;
}

.dark-theme .course-note {
    border-left-color: #3b82f6;
    background: #f1f5f9;
    color: #333333;
}

.dark-theme .course-note strong {
    color: #333333;
}


a.question-link,
a.question-link {
    color: #3b82f6;
    text-decoration: none;

    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

a.question-link:hover,
a.question-link:hover {
    color: #1d4ed8;
}


/* =========================================================
   НАВИГАЦИЯ ПО H3
   НЕ ВЛИЯЕТ НА ЦЕНТРИРОВАНИЕ СТРАНИЦЫ
   И НЕ ЗАХОДИТ В FOOTER
   ========================================================= */

.course-page-navigation {
    position: absolute;

    top: 7rem;
    bottom: 3rem;

    left:
        calc(
            50% + 34.3rem
        );

    width: 16rem;

    /*
     * Сам aside растянут только внутри
     * .course-page-content.
     * Поэтому его нижняя граница заканчивается
     * ДО footer.
     */
    pointer-events: none;
}

.course-page-navigation__inner {
    position: sticky;

    top: 7rem;

    width: 100%;

    max-height:
        calc(
            100vh - 8rem
        );

    overflow-y: auto;

    /* The link rows already have their own vertical padding. Keeping an
       extra bottom inset here made the navigation appear to stop above the
       lower edge of the theory card. */
    padding-bottom: 0;

    pointer-events: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.course-page-navigation__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.course-page-navigation__title {
    margin-bottom: 0.9rem;

    color: #4b5563;

    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.course-page-navigation__link {
    position: relative;

    display: block;

    padding:
        0.5rem
        0rem;

    border-radius: 8px;

    color: #6b7280;

    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;

    text-decoration: none;

    transition:
        color 140ms ease,
        background-color 140ms ease;
}

.course-page-navigation__link:hover {
    color: #111827;
    background: transparent;
}

.course-page-navigation__link.is-active {
    color: #3b82f6;
    font-weight: 600;
}

.course-page-text h2 {
    /* Course article sections are H2 semantically, but keep the old H3 appearance. */
    margin-block-start: 1em;
    margin-block-end: 1em;
    font-size: 1.5rem;
    font-weight: 700;
    scroll-margin-top: 7.5rem;
}


/* =========================================================
   НАВИГАЦИЯ — DARK THEME
   ========================================================= */

body.dark-theme
.course-page-navigation__title {
    color: #cbd5e1;
}

body.dark-theme
.course-page-navigation__link {
    color: #94a3b8;
}

body.dark-theme
.course-page-navigation__link:hover {
    color: #f8fafc;
    background: transparent;
}

body.dark-theme
.course-page-navigation__link.is-active {
    color: #7db4f6;
    font-weight: 600;
}

/*
 * Если справа физически не хватает места,
 * скрываем меню. Основная страница при этом
 * вообще не меняет положение.
 */
@media (max-width: 1620px) {
    .course-page-navigation {
        display: none;
    }
}

/* =========================================================
   ЛЕВАЯ ДВУХУРОВНЕВАЯ НАВИГАЦИЯ ПО КУРСУ

   Уровень 1: список крупных тем курса.
   Уровень 2: название выбранной темы + её подтемы.
   ========================================================= */

.course-course-navigation {
    position: absolute;
    top: 7rem;
    bottom: 3rem;
    right: calc(50% + 34.3rem);
    width: 16rem;
    pointer-events: none;
}

.course-course-navigation__inner {
    position: sticky;
    top: 7rem;
    width: 100%;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overflow-x: hidden;
    /* Match the right article navigation: the outer sticky boundary itself
       now lands on the theory card edge, without an extra visual gap. */
    padding-bottom: 0;
    pointer-events: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.course-course-navigation__inner::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.course-course-navigation__overview[hidden],
.course-course-navigation__topic-panel[hidden] {
    display: none !important;
}

.course-course-navigation__title {
    margin-bottom: 1rem;
    color: #4b5563;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.course-course-navigation__levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.course-course-navigation__level {
    min-width: 0;
}

.course-course-navigation__level-title {
    margin-bottom: 0.35rem;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}

.course-course-navigation__topics,
.course-course-navigation__subtopics {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.course-course-navigation__topic,
.course-course-navigation__subtopic {
    min-width: 0;
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.15rem;
    padding: 0.42rem 0;
    border-radius: 7px;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: color 140ms ease;
}

.course-course-navigation__subtopic {
    grid-template-columns: 1rem minmax(0, 1fr);
}

.course-course-navigation__topic:hover,
.course-course-navigation__subtopic:hover {
    color: #111827;
}

.course-course-navigation__topic.is-current,
.course-course-navigation__subtopic.is-current {
    color: #3b82f6;
    font-weight: 600;
}

.course-course-navigation__enter {
    flex: 0 0 14px;
    color: #cbd5e1;
}

.course-course-navigation__topic:hover .course-course-navigation__enter {
    color: #94a3b8;
}

.course-course-navigation__state {
    width: 1rem;
    min-width: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}

.course-course-navigation__check {
    display: block;
    width: 12px;
    height: 12px;
    object-fit: contain;
    flex: 0 0 12px;
}

.course-course-navigation__dot {
    display: block;
    width: 7px;
    height: 7px;
    margin: 2px;
    border-radius: 50%;
    background: #cbd5e1;
    flex: 0 0 7px;
}

.course-course-navigation__name {
    min-width: 0;
    color: inherit;
    overflow-wrap: break-word;
}

.course-course-navigation__topic-panel {
    width: 100%;
}

.course-course-navigation__back {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0 0 0.55rem;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}

.course-course-navigation__back:hover {
    color: #111827;
}

.course-course-navigation__back:focus-visible,
.course-course-navigation__topic:focus-visible,
.course-course-navigation__subtopic:focus-visible,
.course-course-navigation__topic-title:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    border-radius: 6px;
}

.course-course-navigation__topic-title {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.65rem;
    color: #4b5563;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.course-course-navigation__topic-title-text {
    min-width: 0;
    color: inherit;
    overflow-wrap: break-word;
}

.course-course-navigation__topic-title:hover,
.course-course-navigation__topic-title.is-current {
    color: #3b82f6;
}

.course-course-navigation__subtopics {
    padding-top: 0.8rem;
    border-top: 1px solid #e5e7eb;
}

body.dark-theme .course-course-navigation__title,
body.dark-theme .course-course-navigation__topic-title {
    color: #cbd5e1;
}

body.dark-theme .course-course-navigation__level-title,
body.dark-theme .course-course-navigation__topic,
body.dark-theme .course-course-navigation__subtopic,
body.dark-theme .course-course-navigation__back {
    color: #94a3b8;
}

body.dark-theme .course-course-navigation__topic:hover,
body.dark-theme .course-course-navigation__subtopic:hover,
body.dark-theme .course-course-navigation__back:hover {
    color: #f8fafc;
}

body.dark-theme .course-course-navigation__topic.is-current,
body.dark-theme .course-course-navigation__subtopic.is-current,
body.dark-theme .course-course-navigation__topic-title.is-current,
body.dark-theme .course-course-navigation__topic-title:hover {
    color: #7db4f6;
}

body.dark-theme .course-course-navigation__dot {
    background: #475569;
}

body.dark-theme .course-course-navigation__enter {
    color: #475569;
}

body.dark-theme .course-course-navigation__topic:hover .course-course-navigation__enter {
    color: #94a3b8;
}

body.dark-theme .course-course-navigation__subtopics {
    border-top-color: #374151;
}

@media (max-width: 1620px) {
    .course-course-navigation {
        display: none;
    }
}

/* =========================================================
   ПРАКТИКА ВНУТРИ УРОКА
   ========================================================= */

.course-practice {
    margin-top: 4.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.course-practice[hidden] {
    display: none !important;
}

.course-practice__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.course-practice__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.course-practice__progress {
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 1.1rem;
    font-weight: 600;
}

.course-practice__progress span {
    color: inherit;
}

.course-practice__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.85fr);
    align-items: start;
    gap: 1.5rem;
}

.course-practice__layout[hidden] {
    display: none !important;
}

.course-practice .exercise-block {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 1.4rem;
    gap: 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: none;
}

.course-practice .exercise-text,
.course-practice .exercise-answer,
.course-practice .exercise-controls {
    max-width: none;
}

/* Static code blocks in course-page exercises match the matching-task width. */
.course-practice .exercise-text .code-block,
.course-practice .exercise-answer .code-block {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.course-practice .exercise-text {
    margin: 0;
}

.course-practice .exercise-controls {
    margin-top: 0rem;
}

.course-practice__solution {
    --solution-surface: #ffffff;

    width: 100%;
    min-width: 0;
    padding: 1.4rem;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: var(--solution-surface);
    box-shadow: none;
}

.course-practice__solution .solution-head {
    margin-bottom: 0.85rem;
}

.course-practice__solution .solution-locked {
    min-height: 0;
    max-height: none;
    overflow: visible;
}

.course-practice__solution .solution-content {
    font-size: 1.1rem;
    line-height: 1.55;
}















.course-practice__error {
    margin-top: 1rem;
    color: #dc2626;
    font-size: 0.95rem;
}

.course-practice__error[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .course-practice__layout {
        grid-template-columns: 1fr;
    }
}


.course-practice__head-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.practice-navigator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.practice-navigator__button {
    width: 36px;
    height: 36px;

    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 9px;

    background: transparent;
    color: #6b7280;

    cursor: pointer;

    transition:
        background-color 140ms ease,
        color 140ms ease;
}

.practice-navigator__button:hover:not(:disabled) {
    background: rgba(148, 163, 184, 0.08);
    color: #111827;
}



.practice-navigator__button:disabled {
    opacity: 0.35;
    cursor: default;
}





@media (max-width: 720px) {
    .course-practice__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .course-practice__head-right {
        width: 100%;
        justify-content: space-between;
    }
}

.course-practice__head-right {
    width: 14rem;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
}

.course-practice__progress {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    color: #6b7280;
}

.course-practice__head-right .meta-progress-bar {
    width: 9rem;
    height: 0.5rem;

    overflow: hidden;

    background: #eef0f2;
    border-radius: 999px;
}

.course-practice__head-right .meta-progress-fill {
    width: 0;
    height: 100%;

    background: #7cb261;
    border-radius: inherit;

    transition: width 0.3s ease;
}

.course-practice__solution .solution-content--preview,
.course-practice__solution .solution-preview {
    width: 100%;
    min-height: 180px;

    padding: 0;

    background: transparent !important;
    border: 0;
    box-shadow: none;
}

.course-practice__solution .solution-preview__code {
    padding: 0;

    background: transparent !important;
    border: 0;
    border-radius: 0;
}

.course-practice__solution .solution-locked.locked {
    min-height: 180px;
    max-height: none;
    overflow: hidden;
}
/* Code Lab expands the practice workspace; solution moves below it. */
.course-practice__layout.is-code-lab {
    grid-template-columns: minmax(0, 1fr);
}

.course-practice__layout.is-code-lab .course-practice__solution {
    width: 100%;
}

.course-practice__layout.is-code-lab .course-practice__exercise {
    max-width: none;
}

.course-practice.has-code-lab {
    margin-left: -6rem;
    margin-right: -6rem;
}

@media (max-width: 980px) {
    .course-practice.has-code-lab {
        margin-left: 0;
        margin-right: 0;
    }
}

/* =========================================================
   COURSE PRACTICE — WIDE EXERCISE + SOLUTION BELOW CHECK
   ========================================================= */
.course-practice__layout,
.course-practice__layout.is-code-lab {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

/* Убираем тонкую рамку вокруг условия / Code Lab / Проверить. */
.course-practice .exercise-block,
.course-practice__layout.is-code-lab .course-practice__exercise {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.course-practice .exercise-text,
.course-practice .exercise-answer,
.course-practice .exercise-controls {
    width: 100%;
    max-width: none;
}

.course-practice .exercise-text {
    margin-left: 0;
    margin-right: 0;
}

.course-practice .exercise-controls {
    align-items: center;
}

.course-practice .action-slot {
    display: flex;
    justify-content: center;
}

.course-practice #checkButton {
    left: 50%;
    transform: translateX(-50%);
}

/* Решение теперь отдельной секцией под кнопкой Проверить. */
.course-practice__solution {
    width: 100%;
    min-width: 0;
    margin-top: 2rem;
}

/* =========================================================
   COURSE PRACTICE — SAME CONTENT WIDTH AS THEORY
   ========================================================= */

/*
 * Практика больше не вылезает за внутренние границы страницы.
 * Слева и справа те же отступы, что у теоретического текста.
 */
.course-practice.has-code-lab {
    margin-left: 0;
    margin-right: 0;
}

/*
 * Перебиваем более специфичные правила из exercise.css,
 * которые центрируют Code Lab condition в 520px.
 */
.course-practice
.course-practice__layout.is-code-lab
.exercise-text,
.course-practice
.course-practice__layout.is-code-lab
.exercise-answer {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}

/* Code Lab занимает всю доступную ширину контента. */
.course-practice
.course-practice__layout.is-code-lab
.code-lab {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Проверка тоже занимает общую ширину, кнопка остаётся по центру. */
.course-practice
.course-practice__layout.is-code-lab
.exercise-controls {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    align-items: center;
}

.course-practice
.course-practice__layout.is-code-lab
.action-slot {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Решение — ровно по той же сетке. */
.course-practice__solution {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}
/* =========================================================
   COURSE PRACTICE — NAMED EXERCISE SELECTOR
   ========================================================= */
.course-practice__navigator {
    width: 100%;

    margin: 0 0 1rem;

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;

    gap: 0.65rem;
}

.course-practice__navigator .practice-exercise-selector {
    position: relative;

    width: 100%;
    min-width: 0;
    max-width: none;
}

/* The task selector itself intentionally uses the shared rules from
   exercise.css so /course and /practice stay pixel-identical,
   including status spacing and dark theme. */

/* =========================================================
   COURSE PRACTICE — INLINE PROGRESS IN HEADER
   ========================================================= */
.course-practice__head {
    align-items: center;
}

.course-practice__head-right {
    margin-left: auto;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    gap: 0.8rem;
    width: auto;
}

.course-practice__head-right .meta-progress-bar {
    flex: 0 0 9rem;
    width: 9rem;
    min-width: 9rem;
    max-width: 9rem;
}

.course-practice__progress {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    color: #6b7280;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .course-practice__head-right {
        width: 100%;
    }
}

/* =========================================================
   COURSE PRACTICE VERTICAL RHYTHM
   ---------------------------------------------------------
   Те же явные расстояния, что и на странице практики.
   Основные смысловые блоки больше не зависят от gap exercise-block.
   ========================================================= */

.course-practice .exercise-block,
.course-practice__layout.is-code-lab .course-practice__exercise {
    gap: 0;
}

/* Название задачи -> условие */
.course-practice__navigator {
    margin-bottom: 2rem;
}

/* Не даём внутреннему первому/последнему элементу условия менять ритм. */
.course-practice .exercise-text,
.course-practice__layout.is-code-lab .exercise-text {
    margin-top: 0;
    margin-bottom: 0;
}

.course-practice .exercise-text > :first-child,
.course-practice__layout.is-code-lab .exercise-text > :first-child {
    margin-top: 0;
}

.course-practice .exercise-text > :last-child,
.course-practice__layout.is-code-lab .exercise-text > :last-child {
    margin-bottom: 0;
}

/* Условие -> блок ответа */
.course-practice .exercise-answer,
.course-practice__layout.is-code-lab .exercise-answer {
    margin-top: 2rem;
    margin-bottom: 0;
}

/* Блок ответа -> Проверить */
.course-practice .exercise-controls,
.course-practice__layout.is-code-lab .exercise-controls {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* Проверить -> Подробное решение */
.course-practice__solution {
    margin-top: 2rem;
    margin-bottom: 0;
}

/* =========================================================
   COURSE SIDE NAVIGATION — MUTED VISUAL HIERARCHY
   ========================================================= */

/* Заголовки левой и правой колонок. */
.course-page-navigation__title,
.course-course-navigation__title,
.course-page-navigation__practice-jump {
    color: #64748b;
}

/* Неактивная навигация уходит на второй план. */
.course-page-navigation__link,
.course-course-navigation__topic,
.course-course-navigation__subtopic,
.course-course-navigation__level-title,
.course-course-navigation__back {
    color: #94a3b8;
}

/* Hover чуть возвращает контраст, но не становится почти чёрным. */
.course-page-navigation__link:hover,
.course-course-navigation__topic:hover,
.course-course-navigation__subtopic:hover,
.course-course-navigation__back:hover {
    color: #475569;
    background: transparent;
}

/* Активные пункты остаются единственным сильным цветовым акцентом. */
.course-page-navigation__link.is-active,
.course-course-navigation__topic.is-current,
.course-course-navigation__subtopic.is-current {
    color: #3b82f6;
    font-weight: 600;
}


/* =========================================================
   COURSE PRACTICE — SOLUTION LIKE QUESTIONS
   ========================================================= */

.course-practice__solution {
    width: 100%;
    min-width: 0;

    margin-top: 2rem;
    margin-bottom: 0;
    padding: 0;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.course-practice__solution .solution-head {
    margin-top: 0;
    margin-bottom: 0.85rem;
}

body.dark-theme .course-practice__solution {
    background: transparent !important;
    border-color: transparent !important;
}

/* =========================================================
   CODE LAB — LINE NUMBERS
   Same as /exercise
   ========================================================= */

.course-practice .code-lab__line-numbers {
    background: #f8fafc;
    color: #94a3b8;
}

.course-practice .code-lab__line-numbers-inner,
.course-practice .code-lab__line-numbers-inner span {
    color: #94a3b8 !important;
}

/* DARK THEME */

body.dark-theme
.course-practice
.code-lab__line-numbers {
    background: var(--cl-surface-soft);
    border-right-color: #334155;
    color: #64748b;
}

body.dark-theme
.course-practice
.code-lab__line-numbers-inner,
body.dark-theme
.course-practice
.code-lab__line-numbers-inner span {
    color: #64748b !important;
}

/* =========================================================
   COURSE CODE LAB — ACTIVE LINE LAYERING
   ========================================================= */





.course-practice .code-lab__editor {
    z-index: 4 !important;
    background: transparent !important;
}

.course-practice .code-lab__line-numbers {
    z-index: 5 !important;
}




/* =========================================================
   COURSE PAGE — CODE LAB HORIZONTAL FILE TABS
   Only neutralizes course-specific layout rules.
   ========================================================= */

.course-practice .code-lab__topbar {
    display: flex !important;
    width: 100% !important;
}

.course-practice .code-lab__files {
    display: flex !important;
    flex-direction: row !important;

    width: auto !important;
    min-width: 0 !important;

    border-right: 0 !important;
}

.course-practice .code-lab__workspace {
    display: block !important;
    grid-template-columns: none !important;
}

.course-practice .code-lab__editor-wrap {
    width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
}


/* =========================================================
   COURSE PAGE — HORIZONTAL TABS: PRESERVE OLD EDITOR BEHAVIOR
   ========================================================= */

.course-practice .code-lab__workspace {
    height: var(--cl-editor-height) !important;
    min-height: 0 !important;
    max-height: none !important;
}



.course-practice .code-lab__editor-highlight {
    z-index: 2 !important;
    background: transparent !important;
}

.course-practice .code-lab__editor-highlight code,
.course-practice .code-lab__editor-highlight code.hljs,
.course-practice .code-lab__editor-highlight .hljs {
    background: transparent !important;
    background-color: transparent !important;
}

.course-practice .code-lab__editor {
    z-index: 3 !important;
    background: transparent !important;
}

.course-practice .code-lab__line-numbers {
    z-index: 4 !important;
}


/* =========================================================
   COURSE PAGE — ACTIVE CARET ROW
   ========================================================= */

.course-practice .code-lab {
    --cl-active-line-bg: rgba(148, 163, 184, 0.24);
}

body.dark-theme .course-practice .code-lab {
    --cl-active-line-bg: rgba(148, 163, 184, 0.10);
}

/* ===== RESPONSIVE PASS: inset white lesson card without touching header/footer ===== */
.course-page-content {
    padding-left: clamp(1.25rem, 2.5vw, 2rem);
    padding-right: clamp(1.25rem, 2.5vw, 2rem);
}

.course-page-block {
    min-width: 0;
}

@media (max-width: 700px) {
    .course-page-block {
        margin-top: 6.25rem;
        margin-bottom: 2rem;
        padding: 1.5rem 1.25rem;
    }

    .course-page-block h2 {
        font-size: 1.65rem;
        overflow-wrap: anywhere;
    }

    .course-page-block h3 {
        font-size: 1.3rem;
        overflow-wrap: anywhere;
    }

    .course-page-name {
        font-size: 1.65rem;
        overflow-wrap: anywhere;
    }

    .course-page-text h2 {
        font-size: 1.3rem;
        overflow-wrap: anywhere;
    }

    .course-page-text p {
        font-size: 1rem;
        text-align: left;
    }

    .course-page-text .course-image__caption {
        font-size: 0.9rem;
    }

    .course-page-text li {
        font-size: 1rem;
    }

    .course-page-text ul,
    .course-page-text ol {
        padding-left: 1.4rem;
    }

    .course-page-actions {
        gap: 0.5rem;
        margin-top: 3rem;
    }

    .course-practice__solution {
        padding: 1.1rem;
    }
}

@media (max-width: 520px) {
    .course-page-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .course-page-actions {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .nav-btn__text {
        display: none;
    }

    .nav-btn,
    .progress-toggle {
        min-width: 0;
    }

    .course-practice__head-right {
        flex-wrap: wrap;
    }

    .course-practice__head-right .meta-progress-bar {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}


/* =========================================================
   COURSE PAGE — THEORY CARD + SPLIT PRACTICE / MENTOR
   2026-10-04
   ========================================================= */

.course-page-view .course-page-content {
    align-items: flex-start;
}

.course-page-main {
    width: 100%;
    max-width: 63.6rem;
    min-width: 0;
    margin: 7rem 0 3rem;
}

.course-page-main .course-page-block {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
}

.course-page-main .course-page-actions {
    margin-top: 1.75rem;
    margin-bottom: 0;
}

.course-practice--split {
    margin-top: 2.25rem;
    padding-top: 0;
    border-top: 0;
}

.course-practice--split .course-practice__head {
    margin: 0 0 1rem;
    padding: 0 0.15rem;
}

.course-practice--split .course-practice__title {
    color: #1f2937;
    font-size: 1.45rem;
    font-weight: 650;
}

.course-practice--split .course-practice__workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.95fr);
    gap: 1rem;
    align-items: stretch;
    height: clamp(32rem, 68vh, 42rem);
    min-height: 0;
}

.course-practice--split .course-practice__card,
.course-practice--split .course-practice-assistant {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ---------- Left exercise card ---------- */

.course-practice--split .course-practice__task-card {
    display: flex;
    flex-direction: column;
}

.course-practice--split .course-practice__task-header {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}

.course-practice--split .course-practice__navigator {
    margin: 0;
}

.course-practice--split .course-practice__navigator .practice-exercise-selector__toggle {
    min-height: 38px;
}

.course-practice--split .course-practice__task-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.2rem 1.25rem 1.35rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.course-practice--split .course-practice__task-scroll::-webkit-scrollbar,
.course-practice--split .course-practice-mentor-conversation::-webkit-scrollbar,
.course-practice--split .course-practice-solution-scroll::-webkit-scrollbar {
    width: 6px;
}

.course-practice--split .course-practice__task-scroll::-webkit-scrollbar-thumb,
.course-practice--split .course-practice-mentor-conversation::-webkit-scrollbar-thumb,
.course-practice--split .course-practice-solution-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.course-practice--split .course-practice__layout,
.course-practice--split .course-practice__layout.is-code-lab {
    display: block;
    width: 100%;
    min-width: 0;
}

.course-practice--split .course-practice__exercise,
.course-practice--split .course-practice__layout.is-code-lab .course-practice__exercise {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.course-practice--split .exercise-text,
.course-practice--split .exercise-answer,
.course-practice--split .exercise-controls,
.course-practice--split .course-practice__layout.is-code-lab .exercise-text,
.course-practice--split .course-practice__layout.is-code-lab .exercise-answer,
.course-practice--split .course-practice__layout.is-code-lab .exercise-controls {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

.course-practice--split .exercise-text {
    margin-top: 0;
}

.course-practice--split .exercise-answer {
    margin-top: 1.7rem;
}

.course-practice--split .exercise-controls {
    margin-top: 1.35rem;
}

.course-practice--split .action-slot {
    width: 100%;
    display: flex;
    justify-content: center;
}

.course-practice--split #checkButton {
    left: auto;
    transform: none;
}

.course-practice--split .course-practice__error {
    margin: 1rem 0 0;
}

.course-practice--split.has-code-lab {
    margin-left: 0;
    margin-right: 0;
}

.course-practice--split .course-practice__layout.is-code-lab .code-lab {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Right Mentor / Solution card ---------- */

.course-practice--split .course-practice-assistant {
    display: flex;
    flex-direction: column;
}

.course-practice-assistant__header {
    min-height: 5.45rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem 0.55rem;
    border-bottom: 0;
}

.course-practice-assistant__heading {
    min-width: 0;
    display: flex;
    align-items: center;
}

.course-practice-assistant__header h3 {
    margin: 0;
    color: #20242b;
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.3;
}

.course-practice-mode-switch {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 13rem;
    padding: 0.2rem;
    background: #f5f6f8;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.course-practice-mode-switch__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #7b8491;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

.course-practice-mode-switch__button.is-active {
    background: #ffffff;
    color: #20242b;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}



.course-practice-mode-switch__button::before {
    content: "";
    width: 1.28rem;
    height: 1.28rem;
    flex: 0 0 1.28rem;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.course-practice-mode-switch__button[data-course-practice-mode="mentor"]::before {
    -webkit-mask-image: url('/images/icons/mentor-robot.svg');
    mask-image: url('/images/icons/mentor-robot.svg');
    transform: translateY(-1px);
}

.course-practice-mode-switch__button[data-course-practice-mode="solution"]::before {
    -webkit-mask-image: url('/images/icons/solution-document-check.svg');
    mask-image: url('/images/icons/solution-document-check.svg');
}

.course-practice-mode-panel {
    min-height: 0;
    flex: 1 1 auto;
}

.course-practice-mode-panel[hidden] {
    display: none !important;
}

.course-practice-mode-panel--mentor {
    display: flex;
    flex-direction: column;
}

.course-practice-mentor-description,
.course-practice-solution-intro {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.15rem 1rem 0.8rem;
    border-bottom: 1px solid #eef0f2;
}

.course-practice-mentor-description span,
.course-practice-solution-intro span {
    color: #7b8491;
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.45;
}


.course-practice-mentor-quick-actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0;
}

.course-practice-mentor-secondary {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid #e1e5ea;
    border-radius: 9px;
    background: #ffffff;
    color: #4b5563;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
}

.course-practice-mentor-secondary:hover:not(:disabled) {
    background: #f8fafc;
    border-color: #d7dce3;
}

.course-practice-mentor-secondary:disabled {
    opacity: 0.5;
    cursor: default;
}

.course-practice-mentor-conversation {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem 1rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.course-practice-mentor-message {
    width: fit-content;
    max-width: 92%;
    padding: 0.72rem 0.82rem;
    border-radius: 12px;
}

.course-practice-mentor-message--assistant {
    align-self: flex-start;
    background: #f5f6f8;
    border: 1px solid #e7e9ed;
}

.course-practice-mentor-message--user {
    align-self: flex-end;
    background: #eaf3ff;
    border: 1px solid #d8e9ff;
}

.course-practice-mentor-message__author {
    margin-bottom: 0.28rem;
    color: #7b8491;
    font-size: 0.72rem;
    font-weight: 600;
}

.course-practice-mentor-message__content {
    color: #343a43;
    font-size: 0.9rem;
    line-height: 1.48;
    overflow-wrap: anywhere;
}

.course-practice-mentor-message__content p {
    margin: 0 0 0.55rem;
}

.course-practice-mentor-message__content p:last-child {
    margin-bottom: 0;
}

.course-practice-mentor-message__content ul,
.course-practice-mentor-message__content ol {
    margin: 0.45rem 0 0.55rem 1.15rem;
    padding: 0;
}

.course-practice-mentor-message__content li {
    margin-bottom: 0.25rem;
}

.course-practice-mentor-message__content :not(pre) > code {
    padding: 0.08rem 0.3rem;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.17);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.84em;
}

.course-practice-mentor-message__content pre {
    margin: 0.65rem 0 0;
    padding: 0.75rem;
    overflow-x: auto;
    border-radius: 9px;
    background: #eef1f4;
}

.course-practice-mentor-message__content pre code {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
}

.course-practice-mentor-composer {
    flex: 0 0 auto;
    padding: 0.75rem 0.85rem 0.85rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.course-practice-mentor-composer textarea {
    display: block;
    width: 100%;
    min-height: 74px;
    max-height: 126px;
    resize: none;
    padding: 0.7rem 0.75rem;
    border: 1px solid #dfe4ea;
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #303640;
    caret-color: auto;
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.45;
}

.course-practice-mentor-composer textarea:focus {
    border-color: #8ab8ff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.course-practice-mentor-composer textarea::placeholder {
    color: #a1a9b4;
}

.course-practice-mentor-composer__bottom {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.55rem;
}

.course-practice-mentor-status {
    min-width: 0;
    color: #7b8491;
    font-size: 0.77rem;
    line-height: 1.35;
}

.course-practice-mentor-status.is-error {
    color: #dc2626;
}

.course-practice-mentor-send,
.course-practice-mentor-access__button {
    min-height: 2.35rem;
    padding: 0.5rem 0.85rem;
    border: 0;
    border-radius: 9px;
    background: #3b82f6;
    color: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

.course-practice-mentor-send:hover:not(:disabled),
.course-practice-mentor-access__button:hover {
    background: #2563eb;
}

.course-practice-mentor-send:disabled {
    opacity: 0.55;
    cursor: default;
}

.course-practice-mentor-access {
    margin: auto 1rem 1rem;
    padding: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    border: 1px solid #e7e9ed;
    border-radius: 11px;
    background: #f7f8fa;
}

.course-practice-mentor-access > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
}

.course-practice-mentor-access strong {
    color: #343a43;
    font-size: 0.88rem;
    font-weight: 600;
}

.course-practice-mentor-access span {
    color: #7b8491;
    font-size: 0.78rem;
    line-height: 1.4;
}

.course-practice-mentor-access__button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: #ffffff;
    gap: 0.4rem;
}

.course-practice-mentor-access__button:hover {
    background: #2563eb;
}

.course-practice-mentor-access__button img {
    width: 1rem;
    height: 1rem;
}

.course-practice-mentor-typing {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    min-height: 1rem;
}

.course-practice-mentor-typing span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #94a3b8;
    animation: course-mentor-dot 1s infinite ease-in-out;
}

.course-practice-mentor-typing span:nth-child(2) {
    animation-delay: 0.12s;
}

.course-practice-mentor-typing span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes course-mentor-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-3px); opacity: 1; }
}

.course-practice-mentor-inline-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
}

/* ---------- Solution tab ---------- */

.course-practice-mode-panel--solution {
    display: flex;
    flex-direction: column;
}

.course-practice-solution-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.course-practice-assistant .solution-block,
.course-practice-assistant__solution-block {
    --solution-surface: #ffffff;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}

.course-practice-assistant .solution-locked {
    min-height: 0;
}

.course-practice-assistant .solution-locked.locked {
    min-height: 10rem;
    max-height: 22rem;
}

.course-practice-assistant .solution-content {
    min-height: 0;
    color: #343a43;
    font-size: 0.93rem;
    line-height: 1.55;
}

/* ---------- Focus ---------- */

.course-practice-mode-switch__button:focus-visible,
.course-practice-mentor-secondary:focus-visible,
.course-practice-mentor-send:focus-visible,
.course-practice-mentor-access__button:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.45);
    outline-offset: 2px;
}

/* ---------- Dark theme ---------- */

body.dark-theme.course-page-view .course-practice--split .course-practice__title {
    color: #e5e7eb;
}

body.dark-theme.course-page-view .course-practice--split .course-practice__card,
body.dark-theme.course-page-view .course-practice--split .course-practice-assistant,
body.dark-theme.course-page-view .course-practice--split .course-practice__task-header,
body.dark-theme.course-page-view .course-practice-mentor-composer {
    background: #1f2937;
    border-color: #374151;
}

body.dark-theme.course-page-view .course-practice-mentor-description,
body.dark-theme.course-page-view .course-practice-solution-intro,
body.dark-theme.course-page-view .course-practice-mentor-composer {
    border-color: #374151;
}

body.dark-theme.course-page-view .course-practice-mentor-description span,
body.dark-theme.course-page-view .course-practice-solution-intro span,
body.dark-theme.course-page-view .course-practice-mentor-message__author,
body.dark-theme.course-page-view .course-practice-mentor-status,
body.dark-theme.course-page-view .course-practice-mentor-access span {
    color: #9ca3af;
}

body.dark-theme.course-page-view .course-practice-assistant__header h3,
body.dark-theme.course-page-view .course-practice-mentor-message__content,
body.dark-theme.course-page-view .course-practice-mentor-access strong,
body.dark-theme.course-page-view .course-practice-assistant .solution-content {
    color: #e5e7eb;
}

body.dark-theme.course-page-view .course-practice-mode-switch {
    background: #182231;
    border-color: #374151;
}

body.dark-theme.course-page-view .course-practice-mode-switch__button {
    color: #9ca3af;
}

body.dark-theme.course-page-view .course-practice-mode-switch__button.is-active {
    background: #1f2937;
    color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(31, 41, 55, 0.08);
}

body.dark-theme.course-page-view .course-practice-mentor-secondary {
    background: #1f2937;
    border-color: #374151;
    color: #e5e7eb;
}

body.dark-theme.course-page-view .course-practice-mentor-composer textarea {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-theme.course-page-view .course-practice-mentor-message--assistant,
body.dark-theme.course-page-view .course-practice-mentor-access {
    background: #182231;
    border-color: #374151;
}

body.dark-theme.course-page-view .course-practice-mentor-message--user {
    background: #172b49;
    border-color: #24436c;
}

body.dark-theme.course-page-view .course-practice-mentor-message__content :not(pre) > code,
body.dark-theme.course-page-view .course-practice-mentor-message__content pre {
    background: #111827;
}

body.dark-theme.course-page-view .course-practice-assistant .solution-block,
body.dark-theme.course-page-view .course-practice-assistant__solution-block {
    --solution-surface: #1f2937;
}

body.dark-theme.course-page-view .course-practice__task-scroll,
body.dark-theme.course-page-view .course-practice-mentor-conversation,
body.dark-theme.course-page-view .course-practice-solution-scroll {
    scrollbar-color: #4b5563 transparent;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .course-practice--split .course-practice__workspace {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .course-practice--split .course-practice__task-card {
        min-height: 30rem;
        max-height: none;
    }

    .course-practice--split .course-practice__task-scroll {
        max-height: 38rem;
    }

    .course-practice--split .course-practice-assistant {
        min-height: 34rem;
        height: min(42rem, 75vh);
    }
}

@media (max-width: 700px) {
    .course-page-main {
        margin-top: 6.25rem;
        margin-bottom: 2rem;
    }

    .course-page-main .course-page-block {
        margin-top: 0;
        margin-bottom: 0;
    }

    .course-practice--split {
        margin-top: 1.75rem;
    }

    .course-practice--split .course-practice__head {
        align-items: flex-start;
        gap: 0.7rem;
    }

    .course-practice--split .course-practice__head-right {
        width: auto;
        margin-left: 0;
    }

    .course-practice-assistant__header {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
    }

    .course-practice-mode-switch {
        width: 100%;
        min-width: 0;
    }

    .course-practice--split .course-practice__task-header,
    .course-practice--split .course-practice__task-scroll,
    .course-practice-mentor-description,
    .course-practice-solution-intro,
    .course-practice-mentor-conversation,
    .course-practice-mentor-quick-actions,
    .course-practice-solution-scroll {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .course-practice-mentor-access {
        flex-direction: column;
        align-items: stretch;
    }

    .course-practice-mentor-access__button {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .course-practice--split .course-practice__workspace {
        gap: 0.8rem;
    }

    .course-practice--split .course-practice__task-card,
    .course-practice--split .course-practice-assistant {
        border-radius: 10px;
    }

    .course-practice-mentor-quick-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .course-practice-mentor-secondary {
        width: 100%;
    }

    .course-practice-mentor-composer__bottom {
        align-items: flex-end;
    }

    .course-practice-mentor-send {
        flex: 0 0 auto;
    }
}

/* =========================================================
   COURSE — SIDE NAVIGATION ENDS WITH THEORY CARD
   2026-10-05
   ========================================================= */

/* Height is synchronized to .course-page-block--theory by
   course-page-navigation.js. Sticky inner navigation can no longer continue
   alongside the practice section below the white theory card. */
.course-course-navigation,
.course-page-navigation {
    bottom: auto;
}

/* =========================================================
   COURSE PRACTICE — SAME WORKSPACE GEOMETRY AS /practice
   2026-10-05
   ========================================================= */

@media (min-width: 981px) {
    /*
     * /practice has a 98rem desktop shell with a 14.5rem left navigation
     * and a 1rem gap. The working pair therefore occupies 82.5rem.
     * The course practice has no left navigation, so center that same
     * 82.5rem workspace under the theory card.
     */
    .course-practice--split,
    .course-practice--split.has-code-lab {
        width: min(calc(100vw - 3rem), 82.5rem);
        max-width: none;
        margin-left: 50%;
        margin-right: 0;
        transform: translateX(-50%);
    }

    .course-practice--split .course-practice__workspace {
        grid-template-columns: minmax(0, 1.7fr) minmax(24rem, 0.9fr);
        gap: 1rem;

        /* Same usable screen height as the cards on /practice. */
        height: calc(100dvh - 6rem);
        min-height: 36rem;
        max-height: none;
    }

    .course-practice--split .course-practice__card,
    .course-practice--split .course-practice-assistant {
        height: 100%;
        border-radius: 14px;
    }

    /* Standard tasks use the same readable content width as /practice. */
    .course-practice--split .exercise-text,
    .course-practice--split .exercise-answer,
    .course-practice--split .exercise-controls {
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    /* CodeLab still needs the full width of the enlarged task card. */
    .course-practice--split .course-practice__layout.is-code-lab .exercise-text,
    .course-practice--split .course-practice__layout.is-code-lab .exercise-answer,
    .course-practice--split .course-practice__layout.is-code-lab .exercise-controls,
    .course-practice--split .course-practice__layout.is-code-lab .code-lab {
        max-width: 100%;
    }
}

/* =========================================================
   COURSE PRACTICE — FIXED BOTTOM CHECK FOOTER
   ========================================================= */
.course-practice--split .course-practice__task-footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.9rem 1.15rem;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
    align-items: flex-start;
}

.course-practice--split .course-practice__task-footer .action-slot {
    position: relative;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
}

.course-practice--split .course-practice__task-footer .action-slot button,
.course-practice--split .course-practice__task-footer #checkButton {
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    transform: none;
}


body.dark-theme.course-page-view .course-practice--split .course-practice__task-footer {
    background: #1f2937;
    border-top-color: #374151;
}

/* =========================================================
   COURSE PRACTICE — CODE LAB FILLS THE SPACE ABOVE FIXED FOOTER
   ========================================================= */
.course-practice--split.has-code-lab .course-practice__task-scroll {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.course-practice--split.has-code-lab .course-practice__layout.is-code-lab {
    flex: 1 1 auto;
    min-height: 0;
}

.course-practice--split.has-code-lab .course-practice__layout.is-code-lab .course-practice__exercise {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.course-practice--split.has-code-lab .course-practice__layout.is-code-lab .exercise-text {
    flex: 0 0 auto;
}

.course-practice--split.has-code-lab .course-practice__layout.is-code-lab .exercise-answer {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    margin-top: 1rem;
}

.course-practice--split.has-code-lab .course-practice__layout.is-code-lab .exercise-answer > .code-lab {
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 980px) {
    .course-practice--split.has-code-lab .course-practice__task-scroll {
        overflow-y: auto;
    }

    .course-practice--split.has-code-lab .course-practice__layout.is-code-lab .exercise-answer {
        min-height: 34rem;
    }
}



/* CodeLab uses the same fixed footer geometry as every other course task. */
.course-practice--split.has-code-lab .course-practice__task-footer {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.9rem 1.15rem !important;
    box-sizing: border-box;
}

.course-practice--split.has-code-lab .course-practice__task-footer .action-slot {
    width: 100% !important;
    height: 40px !important;
    margin: 0 !important;
}

/* ===== Course mentor composer: icon send button inside input ===== */
.course-practice-mentor-composer {
    padding: 0.75rem 0.85rem 0.85rem;
}

.course-practice-mentor-composer__field {
    position: relative;
    border: 1px solid #dfe4ea;
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.course-practice-mentor-composer__field:focus-within {
    border-color: #8ab8ff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}

.course-practice-mentor-composer textarea {
    display: block;
    width: 100%;
    min-height: 74px;
    max-height: 150px;
    resize: none;
    overflow-y: hidden;
    padding: 0.74rem 3.85rem 0.8rem 0.82rem;
    border: 0;
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    background: transparent;
}

.course-practice-mentor-composer textarea:focus {
    border-color: transparent;
    box-shadow: none;
}

.course-practice-mentor-status {
    display: block;
    margin-top: 0.5rem;
    min-height: 1rem;
}

.course-practice-mentor-send {
    position: absolute;
    right: 0.7rem;
    bottom: 0.65rem;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: #ffffff;
}

.course-practice-mentor-send:hover:not(:disabled) {
    background: #2563eb;
}

.course-practice-mentor-send:disabled {
    opacity: 1;
    cursor: default;
}

.course-practice-mentor-send svg {
    width: 18px;
    height: 18px;
    display: block;
}

body.dark-theme.course-page-view .course-practice-mentor-composer__field {
    border-color: #4b5563;
    background: #1f2937;
}

body.dark-theme.course-page-view .course-practice-mentor-composer__field:focus-within {
    border-color: #a9c7fb;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

body.dark-theme.course-page-view .course-practice-mentor-composer textarea {
    background: transparent;
    color: #e5e7eb;
}

body.dark-theme.course-page-view .course-practice-mentor-composer textarea::placeholder {
    color: #9aa1ab;
}

body.dark-theme.course-page-view .course-practice-mentor-send {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

body.dark-theme.course-page-view .course-practice-mentor-send:hover:not(:disabled) {
    background: #2563eb;
    border-color: #2563eb;
}


/* ===== Mentor composer alignment correction: text above send button ===== */
.course-practice-mentor-composer__field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.course-practice-mentor-composer textarea {
    padding-right: 0.88rem;
    padding-bottom: 0.55rem;
}

.course-practice-mentor-send {
    position: static;
    flex: 0 0 auto;
    align-self: flex-end;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0.1rem 0.55rem 0.55rem 0;
}

.course-practice-mentor-send svg {
    width: 18px;
    height: 18px;
}


/* ===== Mentor composer focus correction: one unified focus ring ===== */
.course-practice-mentor-composer textarea:focus,
.course-practice-mentor-composer textarea:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ===== Course mentor composer spacing correction ===== */
.course-practice-mentor-composer {
    padding: 0.85rem;
}

.course-practice-mentor-status:empty {
    display: none;
}

.course-practice-mentor-status:not(:empty) {
    display: block;
    margin-top: 0.5rem;
    min-height: 0;
}

/* ===== Course mentor composer controls row ===== */
.course-practice-mentor-composer textarea {
    padding-bottom: 0.45rem;
}

.course-practice-mentor-composer__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.55rem 0.55rem;
}

.course-practice-mentor-composer__controls .course-practice-mentor-quick-actions {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
}

.course-practice-mentor-composer__controls .course-practice-mentor-secondary {
    min-height: 34px;
    height: 34px;
    padding: 0 0.58rem;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.course-practice-mentor-composer__controls .course-practice-mentor-send {
    position: static;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    min-height: 34px;
    margin: 0;
}

.course-practice-mentor-send[data-state="loading"] {
    background: #9ca3af;
    color: #ffffff;
    opacity: 1;
}

.course-practice-mentor-send[data-state="loading"]:hover {
    background: #9ca3af;
}

body.dark-theme.course-page-view .course-practice-mentor-send[data-state="loading"] {
    background: #6b7280;
}

body.dark-theme.course-page-view .course-practice-mentor-send[data-state="loading"]:hover {
    background: #6b7280;
}

/* ===== Course mentor send icon color correction ===== */
.course-practice-mentor-send,
.course-practice-mentor-send:hover,
.course-practice-mentor-send:focus,
.course-practice-mentor-send:focus-visible,
.course-practice-mentor-send:disabled {
    color: #ffffff !important;
}

.course-practice-mentor-send svg,
.course-practice-mentor-send svg path {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* =========================================================
   COURSE SIDE NAVIGATION — VISUAL BOTTOM EDGE ALIGNMENT
   =========================================================
   The sticky containers already stop exactly at the theory card's border.
   The remaining visual gap came from the bottom padding of the final row
   inside each navigation. Remove only that final bottom inset instead of
   shifting the sticky boundary past the card.
*/
.course-page-navigation__list > .course-page-navigation__link:last-child {
    padding-bottom: 0;
}

.course-course-navigation__overview:not([hidden])
.course-course-navigation__level:last-child
.course-course-navigation__topics > .course-course-navigation__topic:last-child,
.course-course-navigation__topic-panel:not([hidden])
.course-course-navigation__subtopics > .course-course-navigation__subtopic:last-child {
    padding-bottom: 0;
}

/* =========================================================
   COURSE PRACTICE — SYNC SERVICE GEOMETRY WITH /practice
   ---------------------------------------------------------
   Keep the embedded practice workspace on /course visually
   identical to the standalone /practice workspace after the
   2026-10-07 spacing pass.
   ========================================================= */
.course-practice--split {
    --practice-workspace-gap: 1rem;
}

/* Left task header: the selector has the same 1rem air above
   and below it as on /practice, with the same horizontal inset. */
.course-practice--split .course-practice__task-header {
    padding: var(--practice-workspace-gap) 1.35rem;
}

/* The task body starts at the same visual offset as /practice.
   The slightly larger right inset leaves room for the scrollbar,
   mirroring the standalone task card geometry. */
.course-practice--split .course-practice__task-scroll {
    padding: 0.3rem 1.7rem 0.35rem 1.35rem;
}

/* Right header: same service inset and same compact switch size
   as on /practice so both header centres stay aligned. */
.course-practice--split .course-practice-assistant__header {
    min-height: 0;
    padding: var(--practice-workspace-gap);
}

.course-practice--split .course-practice-assistant__header h3 {
    font-size: 1.12rem;
    font-weight: 550;
    line-height: 1.25;
}

.course-practice--split .course-practice-mode-switch {
    min-width: 0;
    padding: 0.16rem;
}

.course-practice--split .course-practice-mode-switch__button {
    min-width: 6.1rem;
    min-height: 0;
    padding: 0.38rem 0.61rem;
    font-size: 0.9rem;
    font-weight: 550;
}

/* Intro/conversation/composer use the exact same workspace rhythm. */
.course-practice--split .course-practice-mentor-description,
.course-practice--split .course-practice-solution-intro {
    padding: 0 var(--practice-workspace-gap) var(--practice-workspace-gap);
}

.course-practice--split .course-practice-mentor-description span,
.course-practice--split .course-practice-solution-intro span {
    font-size: 0.88rem;
}

.course-practice--split .course-practice-mentor-conversation {
    padding: var(--practice-workspace-gap);
}

.course-practice--split .course-practice-mentor-composer {
    padding: var(--practice-workspace-gap);
}

.course-practice--split .course-practice-mentor-composer__controls .course-practice-mentor-secondary {
    font-size: 0.76rem;
}

/* Bottom check bar: exactly the same 1rem inset and compact
   37px action button used by /practice. */
.course-practice--split .course-practice__task-footer {
    padding: var(--practice-workspace-gap);
}

.course-practice--split .course-practice__task-footer .action-slot {
    height: 37px;
}

.course-practice--split .course-practice__task-footer #checkButton,
.course-practice--split .course-practice__task-footer #nextButton {
    height: 37px;
    font-size: 1.12rem;
}

.course-practice--split .course-practice__task-footer #checkButton:disabled {
    height: 37px;
}

/* CodeLab has more specific footer rules above; keep it pixel-identical
   to the other task types and to standalone /practice as well. */
.course-practice--split.has-code-lab .course-practice__task-footer {
    padding: var(--practice-workspace-gap) !important;
}

.course-practice--split.has-code-lab .course-practice__task-footer .action-slot {
    height: 37px !important;
}

/* =========================================================
   COURSE — ARTICLE NAVIGATION → PRACTICE JUMP
   2026-10-08
   ========================================================= */
.course-page-navigation__practice-jump {
    width: auto;
    margin-top: 1.4rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    border: 0;
    background: transparent;
    /* Typography/color intentionally match .course-page-navigation__title exactly. */
    color: #64748b;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.course-page-navigation__practice-jump[hidden] {
    display: none !important;
}

.course-page-navigation__practice-jump span,
.course-page-navigation__practice-jump svg,
.course-page-navigation__practice-jump svg path {
    color: inherit;
}

.course-page-navigation__practice-jump svg path {
    stroke: currentColor;
}

.course-page-navigation__practice-jump svg {
    flex: 0 0 auto;
    transition: transform 180ms ease;
}

.course-page-navigation__practice-jump:hover {
    /* Same hover color as article topic links. */
    color: #475569;
}

.course-page-navigation__practice-jump:hover svg {
    transform: translateY(2px);
}

.course-page-navigation__practice-jump:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 4px;
    border-radius: 6px;
}

/* Dark theme: match the "Статья" heading exactly. Hover still follows
   the article links below it. */
body.dark-theme .course-page-navigation__practice-jump {
    /* Match the actually rendered dark-theme "Статья" color exactly. */
    color: #94a3b8;
}

body.dark-theme .course-page-navigation__practice-jump:hover {
    color: #f8fafc;
}

/* =========================================================
   COURSE PRACTICE — ONE-VIEWPORT GEOMETRY
   ---------------------------------------------------------
   When the practice section is brought into view, the three
   vertical gaps are identical:
   1) header → "Проверь себя"
   2) heading → cards
   3) cards → viewport bottom

   Only the flexible task/conversation/solution areas become
   shorter. Task header/footer and mentor header/composer keep
   their existing heights.
   ========================================================= */
@media (min-width: 981px) {
    .course-practice--split {
        --course-practice-screen-gap: 1rem;
        --course-fixed-header-height: 4.5rem;

        height: calc(100dvh - var(--course-fixed-header-height) - var(--course-practice-screen-gap) - var(--course-practice-screen-gap));
        min-height: 0;
        display: flex;
        flex-direction: column;
        scroll-margin-top: calc(var(--course-fixed-header-height) + var(--course-practice-screen-gap));
    }

    .course-practice--split .course-practice__head {
        flex: 0 0 auto;
        margin-bottom: var(--course-practice-screen-gap);
    }

    .course-practice--split .course-practice__workspace {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        max-height: none;
    }
}