.mz-page,
.mz-page * {
    box-sizing: border-box;
}

.mz-page {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    background: var(--mz-bg-main);
    color: var(--mz-text-main);
    font-family: inherit;
    line-height: 1.8;
}


@supports not (overflow: clip) {
    .mz-page {
        overflow-x: hidden;
    }
}

.mz-container {
    width: min(1440px, calc(100% - 48px));
    margin-inline: auto;
}


/* Respect hidden attributes even when button/card classes define display. */
.mz-page [hidden],
.mz-btn[hidden],
.mz-quiz-question[hidden],
.mz-quiz-modal[hidden],
.mz-progress-reset-modal[hidden] {
    display: none !important;
}


.mz-btn.is-disabled,
.mz-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    filter: grayscale(.15);
}

.mz-page a {
    color: inherit;
}

.mz-page h1,
.mz-page h2,
.mz-page h3 {
    color: var(--mz-primary);
    line-height: 1.35;
    margin-top: 0;
}

.mz-page h1 {
    font-size: clamp(34px, 4vw, 58px);
    margin-bottom: 14px;
    font-weight: 900;
}

.mz-page h2 {
    font-size: clamp(24px, 3vw, 36px);
    margin-bottom: 16px;
}

.mz-page h3 {
    font-size: 20px;
}

.mz-eyebrow,
.mz-section-mini,
.mz-course-kicker,
.mz-lesson-unit-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mz-catalog-badge-bg, var(--mz-accent-soft));
    color: var(--mz-catalog-badge-text, var(--mz-accent));
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 12px;
}

.mz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    font-weight: 900;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.mz-btn:hover {
    transform: translateY(-1px);
}

.mz-btn-primary {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    border-color: var(--mz-primary);
}

.mz-btn-primary:hover {
    background: var(--mz-primary-dark);
    color: var(--mz-bg-card);
}

.mz-btn-secondary,
.mz-btn-outline,
.mz-btn-ghost {
    background: transparent;
    color: var(--mz-primary);
    border-color: var(--mz-primary);
}

.mz-btn-secondary:hover,
.mz-btn-outline:hover,
.mz-btn-ghost:hover {
    background: var(--mz-catalog-thumb-bg, var(--mz-primary-soft));
    color: var(--mz-primary);
}

/* Courses archive */
.mz-catalog-hero {
    padding: 42px 0 22px;
    background: var(--mz-bg-main);
}

.mz-catalog-hero h1 {
    margin-bottom: 8px;
}

.mz-catalog-hero p {
    max-width: 720px;
    color: var(--mz-text-muted);
    margin: 0;
}

.mz-catalog-section {
    padding: 22px 0 72px;
}

.mz-catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mz-catalog-card {
    background: var(--mz-catalog-card-bg, var(--mz-bg-card));
    border: 1px solid var(--mz-catalog-card-border, var(--mz-text-soft));
    border-radius: 8px;
    padding: 18px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mz-catalog-card:hover {
    background: var(--mz-catalog-card-bg-hover, var(--mz-catalog-card-bg, var(--mz-bg-card)));
    border-color: var(--mz-catalog-card-border-hover, var(--mz-catalog-card-border, var(--mz-text-soft)));
}

.mz-catalog-card-head {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.mz-catalog-thumb {
    width: 68px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--mz-catalog-thumb-bg, var(--mz-primary-soft));
    display: grid;
    place-items: center;
    text-decoration: none;
}

.mz-catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mz-catalog-thumb-placeholder {
    color: var(--mz-catalog-thumb-icon, var(--mz-primary));
    font-size: 34px;
    font-weight: 900;
}

.mz-catalog-title-wrap h2 {
    margin: 0 0 6px;
    font-size: clamp(22px, 2.2vw, 28px);
}

.mz-catalog-title-wrap h2 a {
    text-decoration: none;
    color: var(--mz-catalog-title, var(--mz-primary));
    transition: color .2s ease;
}

.mz-catalog-title-wrap h2 a:hover {
    color: var(--mz-catalog-title-hover, var(--mz-catalog-title, var(--mz-primary)));
}

.mz-catalog-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--mz-catalog-badge-bg, var(--mz-accent-soft));
    color: var(--mz-catalog-badge-text, var(--mz-accent));
    font-size: 13px;
    font-weight: 800;
    transition: background-color .2s ease, color .2s ease;
}

.mz-catalog-badge:hover {
    background: var(--mz-catalog-badge-bg-hover, var(--mz-catalog-badge-bg, var(--mz-accent-soft)));
    color: var(--mz-catalog-badge-text-hover, var(--mz-catalog-badge-text, var(--mz-accent)));
}

.mz-catalog-excerpt {
    color: var(--mz-catalog-excerpt, var(--mz-text-muted));
    font-size: 17px;
    margin: 0;
}

.mz-catalog-card-footer {
    border-top: 1px dotted var(--mz-catalog-card-border, var(--mz-text-soft));
    padding-top: 12px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.mz-catalog-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--mz-catalog-meta, var(--mz-text-soft));
    font-size: 14px;
}

.mz-catalog-link {
    color: var(--mz-catalog-action, var(--mz-accent));
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
    transition: color .2s ease;
}

.mz-catalog-link:hover {
    color: var(--mz-catalog-action-hover, var(--mz-catalog-action, var(--mz-accent)));
}

.mz-catalog-link > span:first-child {
    order: 1;
}

.mz-catalog-link-icon {
    order: 2;
}

.mz-catalog-link::after {
    display: none;
}

.mz-catalog-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.mz-catalog-link-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Course page */
.mz-course-landing-hero {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    padding: 54px 0 56px;
}

.mz-course-landing-grid {
    display: grid;
    grid-template-columns: 450px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}

.mz-course-cover-card {
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
}

.mz-course-cover-card img {
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover;
    display: block;
}

.mz-course-cover-placeholder {
    min-height: 300px;
    display: grid;
    place-items: center;
    position: relative;
    color: var(--mz-bg-card);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 3px, transparent 3px, transparent 14px);
}

.mz-course-cover-placeholder span {
    font-size: 92px;
    opacity: .75;
}

.mz-course-cover-placeholder small {
    position: absolute;
    bottom: 20px;
    background: rgba(255,255,255,.75);
    color: var(--mz-primary);
    padding: 4px 12px;
    border-radius: 3px;
    font-weight: 800;
}

.mz-course-landing-content h1,
.mz-course-landing-content p,
.mz-course-landing-content span {
    color: var(--mz-bg-card);
}

.mz-course-landing-content p {
    max-width: 650px;
    font-size: 20px;
    opacity: .86;
    margin-bottom: 24px;
}

.mz-course-kicker {
    background: transparent;
    color: rgba(255,255,255,.82) !important;
    padding: 0;
    border-radius: 0;
    position: relative;
}

.mz-course-kicker::after {
    content: '';
    width: 64px;
    height: 2px;
    background: var(--mz-accent);
    display: inline-block;
    margin-inline-start: 14px;
    vertical-align: middle;
}

.mz-course-landing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: center;
    font-weight: 900;
}

.mz-course-landing-meta span + span::before {
    content: '•';
    margin-inline-end: 18px;
    color: rgba(255,255,255,.55);
}

.mz-course-body-layout {
    display: grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(280px, .95fr);
    gap: 46px;
    align-items: start;
    padding: 64px 0 80px;
}

.mz-course-action-card,
.mz-course-tabs-card,
.mz-lesson-tabs-card,
.mz-sidebar-card,
.mz-nav-card,
.mz-empty-state {
    background: var(--mz-bg-card);
    border: 1px solid var(--mz-border);
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(0, 24, 56, 0.05);
}

.mz-course-action-card {
    padding: 28px;
    position: sticky;
    top: 24px;
}

.mz-action-line {
    height: 3px;
    background: linear-gradient(90deg, var(--mz-accent) 0 34%, var(--mz-border) 34% 70%, var(--mz-primary) 70% 100%);
    margin-bottom: 26px;
}

.mz-course-action-card > span {
    display: block;
    color: var(--mz-text-soft);
    font-weight: 800;
    margin-bottom: 8px;
}

.mz-course-action-card > strong {
    display: block;
    color: var(--mz-primary);
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 22px;
}

.mz-course-action-card .mz-btn {
    width: 100%;
    margin-bottom: 12px;
}

.mz-course-includes {
    border-top: 1px solid var(--mz-border-soft);
    margin-top: 18px;
    padding-top: 20px;
}

.mz-course-includes h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.mz-course-includes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    color: var(--mz-text-muted);
}

.mz-course-includes li span {
    color: var(--mz-primary);
    margin-inline-end: 8px;
}

.mz-course-tabs-card,
.mz-lesson-tabs-card {
    overflow: hidden;
}

.mz-tabs-nav {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--mz-border);
    background: var(--mz-bg-card);
}

.mz-tab-button {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    padding: 16px 24px;
    cursor: pointer;
    color: var(--mz-text-muted);
    font: inherit;
    font-weight: 900;
}

.mz-tab-button.is-active {
    color: var(--mz-primary);
    border-bottom-color: var(--mz-primary);
}

.mz-tab-panel {
    padding: 28px;
}

.mz-tab-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.mz-tab-heading-row h2 {
    margin-bottom: 0;
}

.mz-tab-heading-row p,
.mz-muted-text {
    color: var(--mz-text-muted);
    margin: 0;
}

.mz-rich-text {
    color: var(--mz-text-main);
    font-size: 18px;
}

.mz-rich-text :where(p, li) {
    color: var(--mz-text-main);
}

.mz-rich-text :where(h2, h3, h4, h5, h6) {
    color: var(--mz-primary);
    margin-top: 1.4em;
}

.mz-course-outline,
.mz-sidebar-units {
    display: grid;
    gap: 12px;
}

.mz-outline-unit,
.mz-sidebar-unit {
    border: 1px solid var(--mz-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mz-bg-card);
}

.mz-front-unit-header,
.mz-sidebar-unit-title {
    width: 100%;
    border: 0;
    background: var(--mz-bg-card);
    color: var(--mz-primary);
    cursor: pointer;
    text-align: right;
    font: inherit;
}

.mz-front-unit-header {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 24px;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.mz-outline-unit.is-open .mz-front-unit-header,
.mz-sidebar-unit.is-open .mz-sidebar-unit-title {
    background: var(--mz-bg-card);
}

.mz-unit-square {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    font-weight: 900;
}

.mz-unit-name {
    font-weight: 900;
}

.mz-front-unit-header small,
.mz-sidebar-unit-title small {
    color: var(--mz-text-soft);
}

.mz-unit-chevron {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--mz-primary-soft);
    color: var(--mz-primary);
    font-size: 15px;
    line-height: 1;
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

.mz-outline-unit.is-open .mz-unit-chevron,
.mz-sidebar-unit.is-open .mz-unit-chevron {
    transform: rotate(180deg);
    background: var(--mz-primary);
    color: var(--mz-bg-card);
}

.mz-front-unit-header:hover .mz-unit-chevron,
.mz-sidebar-unit-title:hover .mz-unit-chevron {
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
}

.mz-front-unit-body {
    padding: 0 18px 18px;
}

.mz-course-lessons {
    display: grid;
    gap: 8px;
}

.mz-outline-lesson {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: var(--mz-bg-main);
    color: var(--mz-text-main);
    text-decoration: none;
    border-radius: 7px;
}

.mz-outline-lesson:hover {
    background: var(--mz-accent-soft);
}

.mz-lesson-play {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    font-size: 11px;
}

.mz-lesson-title {
    font-weight: 800;
}

.mz-outline-lesson small {
    color: var(--mz-text-soft);
}

/* Lesson page */
.mz-lesson-topbar {
    background: var(--mz-bg-card);
    border-bottom: 1px solid var(--mz-border);
}

.mz-lesson-topbar-inner {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--mz-text-soft);
    font-weight: 800;
}

.mz-lesson-topbar a {
    color: var(--mz-primary);
    text-decoration: none;
}

.mz-lesson-studio-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr);
    gap: 32px;
    align-items: start;
    padding: 34px 0 72px;
}

.mz-lesson-studio-main {
    display: grid;
    gap: 24px;
}

.mz-lesson-player {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--mz-video-bg);
    box-shadow: 0 26px 60px rgba(0, 24, 56, .14);
}

.mz-video-frame {
    position: relative;
    width: 100%;
    background: var(--mz-video-bg);
}

.mz-video-frame iframe,
.mz-video-frame video {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border: 0;
}

.mz-video-link {
    min-height: 420px;
    display: grid;
    place-items: center;
}

.mz-video-link a {
    color: var(--mz-bg-card);
}

.mz-lesson-title-block {
    text-align: right;
}

.mz-lesson-title-block h1 {
    margin-bottom: 8px;
}

.mz-lesson-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: var(--mz-text-muted);
    font-weight: 800;
}

.mz-lesson-meta-line span + span::before {
    content: '•';
    color: var(--mz-text-soft);
    margin-inline-end: 14px;
}

.mz-lesson-tabs-card .mz-tab-panel {
    min-height: 260px;
}

.mz-lesson-sidebar {
    position: sticky;
    top: 24px;
}

.mz-sidebar-card {
    padding: 0;
    overflow: hidden;
}

.mz-sidebar-heading {
    padding: 26px 20px 18px;
    text-align: center;
}

.mz-sidebar-heading span {
    display: block;
    color: var(--mz-text-soft);
    font-weight: 800;
    margin-bottom: 4px;
}

.mz-sidebar-heading h2 {
    font-size: 22px;
    margin-bottom: 14px;
}

.mz-sidebar-heading p {
    border-top: 4px solid var(--mz-border);
    margin: 0;
    padding-top: 12px;
    color: var(--mz-text-soft);
}

.mz-sidebar-unit {
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--mz-border-soft);
}

.mz-sidebar-unit-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 22px;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-weight: 900;
    background: var(--mz-bg-muted);
    color: var(--mz-text-soft);
}

.mz-sidebar-lessons {
    display: grid;
    gap: 0;
    padding: 0;
}

.mz-sidebar-lesson {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    color: var(--mz-text-muted);
    text-decoration: none;
    border-inline-start: 4px solid transparent;
}

.mz-sidebar-lesson small {
    color: var(--mz-text-soft);
    font-size: 12px;
}

.mz-sidebar-play {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--mz-bg-muted);
    color: var(--mz-text-soft);
    font-size: 10px;
}

.mz-sidebar-lesson.is-current {
    background: var(--mz-primary-soft);
    color: var(--mz-primary);
    border-inline-start-color: var(--mz-primary);
    font-weight: 900;
}

.mz-sidebar-lesson.is-current .mz-sidebar-play {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
}

/* Quiz */
.mz-lesson-quiz {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.mz-section-heading {
    margin-bottom: 18px;
}

.mz-section-heading span {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 8px;
}

.mz-quiz-question {
    padding: 18px;
    margin: 14px 0;
    border: 1px solid var(--mz-border-soft);
    border-radius: 10px;
    background: var(--mz-bg-card);
}

.mz-quiz-question h3 {
    margin-bottom: 12px;
    font-size: 18px;
}

.mz-quiz-answers {
    display: grid;
    gap: 8px;
}

.mz-quiz-answer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 1px solid var(--mz-border-soft);
    border-radius: 8px;
    cursor: pointer;
    color: var(--mz-text-main);
    background: var(--mz-bg-card);
}

.mz-quiz-answer.mz-answer-correct {
    background: #e8f7ee;
    border-color: #22a05a;
    color: #166534;
    font-weight: 900;
}

.mz-quiz-answer.mz-answer-wrong {
    background: var(--mz-accent-soft);
    border-color: var(--mz-accent);
    color: var(--mz-accent);
    font-weight: 900;
}

.mz-quiz-explanation {
    color: #000;
    background: var(--mz-bg-muted);
    padding: 12px;
    border-radius: 8px;
    margin: 12px 0 0;
    font-weight: 400;
}

.mz-quiz-result {
    margin: 12px 0 0;
    color: var(--mz-primary);
    font-weight: 900;
}

.mz-check-quiz {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid var(--mz-primary);
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

/* Navigation and shared */
.mz-lesson-navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.mz-nav-card {
    padding: 14px 16px;
    text-decoration: none;
    display: grid;
    gap: 4px;
}

.mz-nav-card span {
    color: var(--mz-text-soft);
    font-size: 13px;
}

.mz-nav-card strong {
    color: var(--mz-primary);
}

.mz-nav-card.is-disabled {
    opacity: .55;
}

.mz-empty-state {
    padding: 30px;
    text-align: center;
}

.mz-pagination {
    margin-top: 28px;
}

.mz-pagination ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.mz-pagination a,
.mz-pagination span {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--mz-border);
    color: var(--mz-primary);
    text-decoration: none;
    padding: 0 12px;
}

.mz-pagination .current {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
}

@media (max-width: 1040px) {
    .mz-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mz-course-landing-grid,
    .mz-course-body-layout,
    .mz-lesson-studio-layout {
        grid-template-columns: 1fr;
    }

    .mz-course-action-card,
    .mz-lesson-sidebar {
        position: static;
    }

    .mz-course-landing-grid {
        gap: 28px;
    }
}

@media (max-width: 640px) {
    
@supports not (overflow: clip) {
    .mz-page {
        overflow-x: hidden;
    }
}

.mz-container {
        width: min(100% - 20px, 1440px);
    }

    .mz-catalog-grid {
        grid-template-columns: 1fr;
    }

    .mz-catalog-card-head,
    .mz-front-unit-header,
    .mz-outline-lesson,
    .mz-sidebar-lesson,
    .mz-lesson-navigation {
        grid-template-columns: 1fr;
    }

    .mz-catalog-card-footer,
    .mz-tab-heading-row,
    .mz-lesson-topbar-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .mz-course-landing-hero {
        padding: 34px 0;
    }

    .mz-course-cover-card,
    .mz-course-cover-card img,
    .mz-course-cover-placeholder {
        min-height: 220px;
    }

    .mz-course-body-layout,
    .mz-lesson-studio-layout {
        padding-top: 28px;
    }

    .mz-tab-button {
        padding: 13px 14px;
        flex: 1;
    }

    .mz-tab-panel,
    .mz-course-action-card {
        padding: 20px;
    }

    .mz-btn {
        width: 100%;
    }
}

/* Progress and quiz logic enhancements */
.mz-quiz-progress-text {
    margin: -6px 0 18px;
    color: var(--mz-text-muted);
    font-size: 14px;
}

.mz-quiz-question[hidden] {
    display: none !important;
}

.mz-quiz-question-number {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--mz-primary-soft);
    color: var(--mz-primary);
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 10px;
}

.mz-quiz-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding-top: 16px;
    border-top: 1px solid var(--mz-border-soft);
}

.mz-quiz-page-indicator {
    color: var(--mz-text-muted);
    font-weight: 800;
    font-size: 14px;
}

.mz-check-quiz:disabled,
.mz-quiz-prev:disabled,
.mz-quiz-next:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.mz-quiz-modal[hidden] {
    display: none !important;
}

.mz-quiz-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.mz-quiz-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, .58);
    backdrop-filter: blur(3px);
}

.mz-quiz-modal-card {
    position: relative;
    z-index: 1;
    width: min(100%, 520px);
    background: var(--mz-bg-card);
    border: 1px solid var(--mz-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
    text-align: center;
}

.mz-quiz-modal-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mz-border);
    border-radius: 999px;
    background: var(--mz-bg-card);
    color: var(--mz-text-main);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.mz-quiz-modal-kicker {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mz-primary-soft);
    color: var(--mz-primary);
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 12px;
}

.mz-quiz-modal-title {
    color: var(--mz-primary);
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 30px);
}

.mz-quiz-modal.is-failed .mz-quiz-modal-title {
    color: var(--mz-accent);
}

.mz-quiz-modal-score {
    color: var(--mz-text-muted);
    margin: 0 0 24px;
    font-weight: 800;
}

.mz-quiz-modal-actions {
    display: grid;
    gap: 10px;
}

.mz-quiz-modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .mz-quiz-pagination {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mz-quiz-modal-card {
        padding: 26px 18px;
    }
}

/* Course progress UI */
.mz-outline-lesson.is-viewed .mz-lesson-play,
.mz-sidebar-lesson.is-viewed .mz-sidebar-play {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    font-weight: 900;
}

.mz-outline-lesson.is-viewed .mz-lesson-title,
.mz-sidebar-lesson.is-viewed {
    color: var(--mz-primary);
}

.mz-outline-lesson.is-quiz-complete,
.mz-sidebar-lesson.is-quiz-complete {
    background: var(--mz-primary-soft);
}

.mz-sidebar-lesson.is-current.is-viewed .mz-sidebar-play {
    background: var(--mz-primary);
    color: var(--mz-bg-card);
}

.mz-outline-lesson.is-quiz-passed .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-passed .mz-sidebar-play {
    background: #16a34a;
    color: #fff;
}

.mz-outline-lesson.is-quiz-failed .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-failed .mz-sidebar-play {
    background: #dc2626;
    color: #fff;
}

.mz-outline-lesson.is-quiz-failed,
.mz-sidebar-lesson.is-quiz-failed {
    background: #fff1f2;
}



/* Lesson progress states and lesson meta */
.mz-lesson-meta,
.mz-sidebar-lesson-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--mz-text-soft);
}

.mz-lesson-quiz-status,
.mz-sidebar-quiz-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.mz-lesson-quiz-status.has-quiz,
.mz-sidebar-quiz-status.has-quiz {
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
}

.mz-lesson-quiz-status.no-quiz,
.mz-sidebar-quiz-status.no-quiz {
    background: var(--mz-primary-soft);
    color: var(--mz-text-muted);
}

.mz-outline-lesson.is-quiz-complete .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-complete .mz-sidebar-play {
    font-size: 9px;
    letter-spacing: -2px;
    padding-inline-end: 2px;
}

.mz-sidebar-lesson-title {
    font-weight: 800;
}

/* Reset course progress modal */
.mz-progress-reset-modal[hidden] {
    display: none !important;
}

.mz-progress-reset-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
}

.mz-progress-reset-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, .58);
    backdrop-filter: blur(3px);
}

.mz-progress-reset-card {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    background: var(--mz-bg-card);
    border: 1px solid var(--mz-border);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
    text-align: center;
}

.mz-progress-reset-close {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid var(--mz-border);
    border-radius: 999px;
    background: var(--mz-bg-card);
    color: var(--mz-text-main);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.mz-progress-reset-kicker {
    display: inline-flex;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 12px;
}

.mz-progress-reset-card h3 {
    margin: 0 0 10px;
    font-size: clamp(22px, 3vw, 30px);
}

.mz-progress-reset-card p {
    margin: 0 0 24px;
    color: var(--mz-text-muted);
    font-weight: 700;
}

.mz-progress-reset-actions {
    display: grid;
    gap: 10px;
}

.mz-reset-modal-open {
    overflow: hidden;
}

/* Mobile lesson index shortcut */
.mz-mobile-index-link {
    display: none;
    margin-top: 16px;
    width: fit-content;
    text-decoration: none;
}

@media (max-width: 1040px) {
    .mz-mobile-index-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px 16px;
        border-radius: 10px;
        border: 1px solid var(--mz-primary);
        background: var(--mz-primary-soft);
        color: var(--mz-primary);
        font-weight: 900;
    }

    #mz-lesson-index {
        scroll-margin-top: 24px;
    }
}

@media (max-width: 640px) {
    .mz-progress-reset-card {
        padding: 26px 18px;
    }
}

.mz-front-unit-body[hidden],
.mz-sidebar-lessons[hidden] {
    display: none !important;
}

.mz-front-unit-header:focus-visible,
.mz-sidebar-unit-title:focus-visible {
    outline: 3px solid var(--mz-accent-soft);
    outline-offset: 2px;
}

/* Course comments tab */
.mz-comments-heading-row {
    align-items: flex-start;
}

.mz-course-comments {
    color: var(--mz-text-main);
}

.mz-course-comments .comments-area,
.mz-course-comments #comments {
    margin: 0;
}

.mz-course-comments .comments-title,
.mz-course-comments .comment-reply-title {
    color: var(--mz-primary);
    font-size: clamp(22px, 2.4vw, 30px);
    margin: 0 0 16px;
}

.mz-course-comments .comment-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.mz-course-comments .comment,
.mz-course-comments .pingback,
.mz-course-comments .trackback {
    border: 1px solid var(--mz-border);
    border-radius: 12px;
    background: var(--mz-bg-main);
    padding: 18px;
}

.mz-course-comments .children {
    list-style: none;
    margin: 14px 0 0;
    padding-inline-start: 20px;
    display: grid;
    gap: 14px;
}

.mz-course-comments .comment-meta,
.mz-course-comments .comment-metadata,
.mz-course-comments .logged-in-as,
.mz-course-comments .comment-notes,
.mz-course-comments .form-allowed-tags,
.mz-course-comments .must-log-in,
.mz-course-comments .no-comments {
    color: var(--mz-text-muted);
    font-size: 14px;
}

.mz-course-comments .comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mz-primary);
    font-weight: 900;
}

.mz-course-comments .avatar {
    border-radius: 50%;
}

.mz-course-comments .comment-content {
    margin-top: 12px;
    color: var(--mz-text-main);
    font-size: 16px;
}

.mz-course-comments .reply a,
.mz-course-comments .comment-edit-link {
    color: var(--mz-accent);
    font-weight: 800;
    text-decoration: none;
}

.mz-course-comments .comment-respond {
    border: 1px solid var(--mz-border-soft);
    border-radius: 14px;
    background: var(--mz-bg-card);
    padding: 22px;
    margin-top: 20px;
}

.mz-course-comments .comment-form {
    display: grid;
    gap: 14px;
}

.mz-course-comments .comment-form p {
    margin: 0;
}

.mz-course-comments label {
    display: block;
    color: var(--mz-primary);
    font-weight: 800;
    margin-bottom: 6px;
}

.mz-course-comments input[type="text"],
.mz-course-comments input[type="email"],
.mz-course-comments input[type="url"],
.mz-course-comments textarea {
    width: 100%;
    border: 1px solid var(--mz-border);
    border-radius: 10px;
    background: var(--mz-bg-card);
    color: var(--mz-text-main);
    padding: 12px 14px;
    font: inherit;
}

.mz-course-comments textarea {
    min-height: 150px;
    resize: vertical;
}

.mz-course-comments input:focus,
.mz-course-comments textarea:focus {
    outline: 2px solid var(--mz-primary-soft);
    border-color: var(--mz-primary);
}

.mz-course-comments .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid var(--mz-primary);
    background: var(--mz-primary);
    color: var(--mz-bg-card);
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.mz-course-comments .form-submit .submit:hover {
    background: var(--mz-primary-dark);
}


.mz-course-comments .comment-form-url {
    display: none !important;
}

/* v1.6.0 settings, icons, durations and taxonomy links */
.mz-stat-meta,
.mz-course-landing-meta .mz-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mz-stat-item svg,
.mz-lesson-play svg,
.mz-sidebar-play svg,
.mz-lesson-duration svg,
.mz-sidebar-duration svg,
.mz-lesson-quiz-status svg,
.mz-sidebar-quiz-status svg,
.mz-front-unit-header small svg,
.mz-sidebar-unit-title small svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    fill: currentColor;
}

.mz-course-kicker {
    gap: 12px;
}

.mz-course-kicker::after {
    display: none;
}

.mz-course-kicker i {
    display: inline-block;
    width: 64px;
    height: 2px;
    background: var(--mz-accent);
    order: -1;
}

.mz-course-term-link {
    color: var(--mz-bg-card) !important;
    text-decoration: none;
    font-weight: 900;
    border-bottom: 1px solid rgba(255,255,255,.4);
}

.mz-course-term-link:hover {
    color: var(--mz-accent-soft) !important;
    border-bottom-color: var(--mz-accent);
}

.mz-catalog-badge {
    text-decoration: none;
}

.mz-catalog-badge:hover {
    filter: brightness(.97);
}

.mz-lesson-duration,
.mz-sidebar-duration {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mz-lesson-quiz-status,
.mz-sidebar-quiz-status {
    min-width: 26px;
    min-height: 24px;
    justify-content: center;
    padding: 3px 7px;
}

.mz-lesson-quiz-status.has-quiz,
.mz-sidebar-quiz-status.has-quiz {
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
}

.mz-muted-duration {
    opacity: .75;
}

.mz-stacked-section {
    padding: 30px;
    border-bottom: 1px solid var(--mz-border-soft);
}

.mz-stacked-section:last-child {
    border-bottom: 0;
}

.mz-stacked-section > h2 {
    margin-bottom: 18px;
}

.mz-meta-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (min-width: 1041px) {
    .mz-lesson-studio-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr);
    }
}
.mz-course-includes li span svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: -3px;
    fill: currentColor;
}

/* v1.6.1 course hero alignment and lesson meta cleanup */
@media (min-width: 1041px) {
    .mz-course-landing-grid {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .mz-course-landing-content {
        order: 1;
        flex: 1 1 auto;
        max-width: 720px;
        text-align: right;
    }

    .mz-course-cover-card {
        order: 2;
        flex: 0 0 min(450px, 38%);
    }
}

@media (max-width: 1040px) {
    .mz-course-landing-grid {
        display: flex;
        flex-direction: column;
    }

    .mz-course-landing-content,
    .mz-course-cover-card {
        order: initial;
        width: 100%;
    }
}

.mz-lesson-meta,
.mz-sidebar-lesson-meta {
    direction: ltr;
    justify-content: flex-start;
}

.mz-lesson-duration,
.mz-sidebar-duration {
    direction: ltr;
}

.mz-lesson-title,
.mz-sidebar-lesson-title {
    direction: rtl;
}

/* v1.7.2 configurable icons and progress line */
.mz-unit-chevron svg,
.mz-course-includes li svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: currentColor;
}

.mz-outline-unit.is-open .mz-unit-chevron,
.mz-sidebar-unit.is-open .mz-unit-chevron {
    transform: none;
}

.mz-course-progress-line {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 14px 0 20px;
    direction: rtl;
}

.mz-progress-count {
    min-width: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
    color: var(--mz-primary);
    background: var(--mz-primary-soft);
}

.mz-progress-total {
    color: var(--mz-text-muted);
    background: var(--mz-bg-muted);
}

.mz-progress-track {
    position: relative;
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mz-border-soft);
}

.mz-progress-track > span {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0%;
    border-radius: inherit;
    background: var(--mz-accent);
    transition: width .28s ease;
}

.mz-sidebar-progress-line {
    margin: 12px 0 0;
}

.mz-sidebar-progress-line .mz-progress-count {
    min-width: 24px;
    min-height: 24px;
    font-size: 12px;
}

.mz-outline-lesson.is-quiz-complete .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-complete .mz-sidebar-play {
    letter-spacing: 0;
    padding-inline-end: 0;
}

/* MZ Learning v1.8.8: hidden/locked lesson display */
.mz-outline-lesson.is-locked,
.mz-sidebar-lesson.is-locked {
    opacity: 0.72;
    cursor: not-allowed;
    background: var(--mz-bg-muted, #f0ebe1);
}

.mz-outline-lesson.is-locked .mz-lesson-play,
.mz-sidebar-lesson.is-locked .mz-sidebar-play {
    background: var(--mz-primary-soft, #e8edf4);
    color: var(--mz-primary, #002654);
}

.mz-lesson-locked-status,
.mz-sidebar-locked-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mz-accent, #ce1126);
    font-weight: 700;
}

.mz-lesson-locked-card {
    background: var(--mz-bg-card, #fff);
    border: 1px solid var(--mz-border, #e6e3dc);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
    margin-bottom: 24px;
}

.mz-lesson-locked-card h1 {
    color: var(--mz-primary, #002654);
    margin: 12px 0 8px;
}

.mz-lesson-locked-card p {
    color: var(--mz-text-muted, #4a5260);
    font-weight: 700;
}

.mz-lesson-locked-icon {
    display: inline-flex;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mz-primary-soft, #e8edf4);
    color: var(--mz-primary, #002654);
}

.mz-lesson-locked-icon svg {
    width: 28px;
    height: 28px;
}

/* v1.8.15 extended configurable UI colors */
.mz-course-landing-hero { background: var(--mz-course-hero-bg, var(--mz-primary)); }
.mz-course-landing-content h1 { color: var(--mz-course-hero-title, var(--mz-bg-card)) !important; }
.mz-course-landing-content p { color: var(--mz-course-hero-text, var(--mz-bg-card)) !important; }
.mz-course-kicker { color: var(--mz-course-level, var(--mz-bg-card)) !important; }
.mz-course-kicker i { background: var(--mz-course-level-line, var(--mz-accent)); }
.mz-course-term-link { color: var(--mz-course-term, var(--mz-bg-card)) !important; }
.mz-course-term-link:hover { color: var(--mz-course-term-hover, var(--mz-accent-soft)) !important; }
.mz-course-landing-meta { color: var(--mz-course-hero-meta, var(--mz-bg-card)); }
.mz-course-cover-card { background: var(--mz-course-cover-bg, var(--mz-primary-dark)); border-color: var(--mz-course-cover-border, rgba(255,255,255,.18)); }

.mz-course-action-card { background: var(--mz-course-action-card-bg, var(--mz-bg-card)); border-color: var(--mz-course-action-card-border, var(--mz-border)); }
.mz-action-line { background: linear-gradient(90deg, var(--mz-course-action-line-accent, var(--mz-accent)) 0 34%, var(--mz-border) 34% 70%, var(--mz-course-action-line-primary, var(--mz-primary)) 70% 100%); }
.mz-course-action-card > span { color: var(--mz-course-action-caption, var(--mz-text-soft)); }
.mz-course-action-card > strong { color: var(--mz-course-action-price, var(--mz-primary)); }

.mz-btn-primary, .mz-check-quiz { background: var(--mz-button-primary-bg, var(--mz-primary)); color: var(--mz-button-primary-text, var(--mz-bg-card)); border-color: var(--mz-button-primary-border, var(--mz-primary)); }
.mz-btn-primary:hover, .mz-check-quiz:hover { background: var(--mz-button-primary-bg-hover, var(--mz-primary-dark)); color: var(--mz-button-primary-text-hover, var(--mz-bg-card)); }
.mz-btn-outline, .mz-btn-secondary, .mz-btn-ghost { background: var(--mz-button-outline-bg, transparent); color: var(--mz-button-outline-text, var(--mz-primary)); border-color: var(--mz-button-outline-border, var(--mz-primary)); }
.mz-btn-outline:hover, .mz-btn-secondary:hover, .mz-btn-ghost:hover { background: var(--mz-button-outline-bg-hover, var(--mz-primary-soft)); color: var(--mz-button-outline-text-hover, var(--mz-primary)); }
.mz-btn.is-disabled, .mz-btn[aria-disabled="true"] { background: var(--mz-button-disabled-bg, var(--mz-bg-muted)); color: var(--mz-button-disabled-text, var(--mz-text-soft)); }

.mz-course-tabs-card, .mz-lesson-tabs-card { background: var(--mz-tab-panel-bg, var(--mz-bg-card)); border-color: var(--mz-tabs-border, var(--mz-border)); }
.mz-tabs-nav { background: var(--mz-tabs-bg, var(--mz-bg-card)); border-bottom-color: var(--mz-tabs-border, var(--mz-border)); }
.mz-tab-button { color: var(--mz-tab-inactive-text, var(--mz-text-muted)); }
.mz-tab-button:hover { background: var(--mz-tab-hover-bg, transparent); color: var(--mz-tab-hover-text, var(--mz-primary)); }
.mz-tab-button.is-active { color: var(--mz-tab-active-text, var(--mz-primary)); border-bottom-color: var(--mz-tab-active-line, var(--mz-primary)); }
.mz-section-mini, .mz-eyebrow, .mz-lesson-unit-label { background: var(--mz-section-mini-bg, var(--mz-accent-soft)); color: var(--mz-section-mini-text, var(--mz-accent)); }
.mz-rich-text, .mz-lesson-text { color: var(--mz-lesson-content-text, var(--mz-text-main)); }
.mz-rich-text :where(h2,h3,h4,h5,h6) { color: var(--mz-lesson-content-heading, var(--mz-primary)); }
.mz-rich-text a { color: var(--mz-lesson-content-link, var(--mz-accent)); }
.mz-rich-text a:hover { color: var(--mz-lesson-content-link-hover, var(--mz-primary)); }
.mz-tab-panel { background: var(--mz-lesson-content-bg, transparent); }

.mz-course-outline { background: var(--mz-course-outline-bg, transparent); }
.mz-outline-unit, .mz-sidebar-unit { background: var(--mz-unit-bg, var(--mz-bg-card)); border-color: var(--mz-unit-border, var(--mz-border)); }
.mz-front-unit-header { background: var(--mz-unit-bg, var(--mz-bg-card)); color: var(--mz-unit-title, var(--mz-primary)); }
.mz-outline-unit.is-open .mz-front-unit-header { background: var(--mz-unit-bg-open, var(--mz-bg-card)); }
.mz-unit-square { background: var(--mz-unit-number-bg, var(--mz-primary)); color: var(--mz-unit-number-text, var(--mz-bg-card)); }
.mz-unit-chevron { background: var(--mz-unit-chevron-bg, var(--mz-primary-soft)); color: var(--mz-unit-chevron-text, var(--mz-primary)); }
.mz-front-unit-header:hover .mz-unit-chevron, .mz-sidebar-unit-title:hover .mz-unit-chevron { background: var(--mz-unit-chevron-bg-hover, var(--mz-accent-soft)); color: var(--mz-unit-chevron-text-hover, var(--mz-accent)); }
.mz-outline-unit.is-open .mz-unit-chevron, .mz-sidebar-unit.is-open .mz-unit-chevron { background: var(--mz-unit-chevron-bg-open, var(--mz-primary)); color: var(--mz-unit-chevron-text-open, var(--mz-bg-card)); }

.mz-outline-lesson { background: var(--mz-lesson-row-bg, var(--mz-bg-main)); color: var(--mz-lesson-title, var(--mz-text-main)); }
.mz-outline-lesson:hover { background: var(--mz-lesson-row-bg-hover, var(--mz-accent-soft)); }
.mz-outline-lesson:hover .mz-lesson-title { color: var(--mz-lesson-title-hover, var(--mz-primary)); }
.mz-lesson-meta, .mz-sidebar-lesson-meta, .mz-outline-lesson small { color: var(--mz-lesson-meta, var(--mz-text-soft)); }
.mz-lesson-play { background: var(--mz-lesson-icon-bg, var(--mz-primary)); color: var(--mz-lesson-icon-text, var(--mz-bg-card)); }
.mz-outline-lesson.is-locked, .mz-sidebar-lesson.is-locked { background: var(--mz-lesson-locked-bg, var(--mz-bg-muted)); color: var(--mz-lesson-locked-text, var(--mz-text-muted)); }
.mz-lesson-locked-status, .mz-sidebar-locked-status { color: var(--mz-lesson-locked-status, var(--mz-accent)); }
.mz-outline-lesson.is-locked .mz-lesson-play, .mz-sidebar-lesson.is-locked .mz-sidebar-play, .mz-lesson-locked-icon { background: var(--mz-lesson-locked-icon-bg, var(--mz-primary-soft)); color: var(--mz-lesson-locked-icon-text, var(--mz-primary)); }
.mz-lesson-quiz-status.has-quiz, .mz-sidebar-quiz-status.has-quiz { background: var(--mz-quiz-badge-bg, var(--mz-accent-soft)); color: var(--mz-quiz-badge-text, var(--mz-accent)); }
.mz-outline-lesson.is-quiz-passed .mz-lesson-play, .mz-sidebar-lesson.is-quiz-passed .mz-sidebar-play { background: var(--mz-success, #16a34a); }
.mz-outline-lesson.is-quiz-failed .mz-lesson-play, .mz-sidebar-lesson.is-quiz-failed .mz-sidebar-play { background: var(--mz-failed, #dc2626); }
.mz-outline-lesson.is-quiz-failed, .mz-sidebar-lesson.is-quiz-failed { background: var(--mz-failed-bg, #fff1f2); }

.mz-progress-track { background: var(--mz-progress-track, var(--mz-border-soft)); }
.mz-progress-track > span { background: var(--mz-progress-fill, var(--mz-accent)); }
.mz-progress-count { background: var(--mz-progress-count-bg, var(--mz-primary-soft)); color: var(--mz-progress-count-text, var(--mz-primary)); }
.mz-progress-total { background: var(--mz-progress-total-bg, var(--mz-bg-muted)); color: var(--mz-progress-total-text, var(--mz-text-muted)); }
.mz-course-includes { border-top-color: var(--mz-includes-border, var(--mz-border-soft)); background: var(--mz-includes-bg, transparent); }
.mz-course-includes h3 { color: var(--mz-includes-title, var(--mz-primary)); }
.mz-course-includes ul { color: var(--mz-includes-text, var(--mz-text-muted)); }
.mz-course-includes li span { color: var(--mz-includes-icon, var(--mz-primary)); }

.mz-course-comments { background: var(--mz-comments-bg, transparent); }
.mz-course-comments .comment, .mz-course-comments .pingback, .mz-course-comments .trackback { background: var(--mz-comments-box-bg, var(--mz-bg-main)); border-color: var(--mz-comments-border, var(--mz-border)); }
.mz-course-comments .comments-title, .mz-course-comments .comment-reply-title, .mz-course-comments label { color: var(--mz-comments-title, var(--mz-primary)); }
.mz-course-comments .comment-content { color: var(--mz-comments-text, var(--mz-text-main)); }
.mz-course-comments .comment-meta, .mz-course-comments .comment-metadata, .mz-course-comments .logged-in-as, .mz-course-comments .comment-notes, .mz-course-comments .no-comments { color: var(--mz-comments-meta, var(--mz-text-muted)); }
.mz-course-comments .reply a, .mz-course-comments .comment-edit-link { color: var(--mz-comments-link, var(--mz-accent)); }
.mz-course-comments .comment-respond { background: var(--mz-comments-bg, var(--mz-bg-card)); border-color: var(--mz-comments-border, var(--mz-border-soft)); }
.mz-course-comments input[type="text"], .mz-course-comments input[type="email"], .mz-course-comments textarea { background: var(--mz-comments-field-bg, var(--mz-bg-card)); border-color: var(--mz-comments-field-border, var(--mz-border)); }
.mz-course-comments input:focus, .mz-course-comments textarea:focus { border-color: var(--mz-comments-field-focus, var(--mz-primary)); }
.mz-course-comments .form-submit .submit { background: var(--mz-comments-button-bg, var(--mz-primary)); color: var(--mz-comments-button-text, var(--mz-bg-card)); }
.mz-course-comments .form-submit .submit:hover { background: var(--mz-comments-button-bg-hover, var(--mz-primary-dark)); }

.mz-lesson-topbar { background: var(--mz-lesson-topbar-bg, var(--mz-bg-card)); border-bottom-color: var(--mz-lesson-topbar-border, var(--mz-border)); }
.mz-lesson-topbar-inner { color: var(--mz-lesson-topbar-text, var(--mz-text-soft)); }
.mz-lesson-topbar a { color: var(--mz-lesson-topbar-link, var(--mz-primary)); }
.mz-lesson-title-block h1, .mz-lesson-locked-card h1 { color: var(--mz-lesson-title, var(--mz-primary)); }
.mz-lesson-meta-line { color: var(--mz-lesson-meta-text, var(--mz-text-muted)); }
.mz-mobile-index-link { background: var(--mz-mobile-index-bg, var(--mz-primary-soft)); color: var(--mz-mobile-index-text, var(--mz-primary)); border-color: var(--mz-mobile-index-border, var(--mz-primary)); }
.mz-mobile-index-link:hover { background: var(--mz-mobile-index-bg-hover, var(--mz-primary)); color: var(--mz-mobile-index-text-hover, var(--mz-bg-card)); }
.mz-lesson-player, .mz-video-frame { background: var(--mz-ui-video-bg, var(--mz-video-bg)); border-color: var(--mz-video-border, transparent); }
.mz-video-link a { color: var(--mz-video-link, var(--mz-bg-card)); }

.mz-quiz-question { background: var(--mz-quiz-question-bg, var(--mz-bg-card)); border-color: var(--mz-quiz-question-border, var(--mz-border-soft)); color: var(--mz-quiz-question-text, var(--mz-text-main)); }
.mz-quiz-question h3, .mz-section-heading h2 { color: var(--mz-quiz-title, var(--mz-primary)); }
.mz-quiz-answer { background: var(--mz-quiz-answer-bg, var(--mz-bg-card)); border-color: var(--mz-quiz-answer-border, var(--mz-border-soft)); color: var(--mz-quiz-answer-text, var(--mz-text-main)); }
.mz-quiz-answer:hover { background: var(--mz-quiz-answer-bg-hover, var(--mz-primary-soft)); }
.mz-quiz-answer:has(input:checked) { background: var(--mz-quiz-answer-selected-bg, var(--mz-primary-soft)); border-color: var(--mz-quiz-answer-selected-border, var(--mz-primary)); }
.mz-quiz-answer.mz-answer-correct { background: var(--mz-quiz-correct-bg, #e8f7ee); border-color: var(--mz-quiz-correct-border, #22a05a); color: var(--mz-quiz-correct-text, #166534); }
.mz-quiz-answer.mz-answer-wrong { background: var(--mz-quiz-wrong-bg, var(--mz-accent-soft)); border-color: var(--mz-quiz-wrong-border, var(--mz-accent)); color: var(--mz-quiz-wrong-text, var(--mz-accent)); }
.mz-quiz-explanation { background: var(--mz-quiz-explanation-bg, var(--mz-bg-muted)); color: var(--mz-quiz-explanation-text, #000); }
.mz-quiz-result { color: var(--mz-quiz-result-text, var(--mz-primary)); }
.mz-quiz-modal-backdrop { background: color-mix(in srgb, var(--mz-quiz-modal-overlay, var(--mz-video-bg)) 58%, transparent); }
.mz-quiz-modal-card { background: var(--mz-quiz-modal-bg, var(--mz-bg-card)); border-color: var(--mz-quiz-modal-border, var(--mz-border)); }
.mz-quiz-modal-title { color: var(--mz-quiz-modal-title, var(--mz-primary)); }
.mz-quiz-modal.is-failed .mz-quiz-modal-title { color: var(--mz-quiz-modal-failed-title, var(--mz-accent)); }
.mz-quiz-modal-score { color: var(--mz-quiz-modal-score, var(--mz-text-muted)); }
.mz-quiz-modal-close { background: var(--mz-quiz-modal-close-bg, var(--mz-bg-card)); color: var(--mz-quiz-modal-close-text, var(--mz-text-main)); }

.mz-sidebar-card { background: var(--mz-sidebar-bg, var(--mz-bg-card)); border-color: var(--mz-sidebar-border, var(--mz-border)); }
.mz-sidebar-heading span { color: var(--mz-sidebar-heading-text, var(--mz-text-soft)); }
.mz-sidebar-heading h2 { color: var(--mz-sidebar-title, var(--mz-primary)); }
.mz-sidebar-unit-title { background: var(--mz-sidebar-unit-bg, var(--mz-bg-muted)); color: var(--mz-sidebar-unit-text, var(--mz-text-soft)); }
.mz-sidebar-lesson { color: var(--mz-sidebar-lesson-text, var(--mz-text-muted)); }
.mz-sidebar-lesson:hover { background: var(--mz-sidebar-lesson-bg-hover, var(--mz-primary-soft)); }
.mz-sidebar-lesson.is-current { background: var(--mz-sidebar-lesson-current-bg, var(--mz-primary-soft)); color: var(--mz-sidebar-lesson-current-text, var(--mz-primary)); border-inline-start-color: var(--mz-sidebar-lesson-current-border, var(--mz-primary)); }
.mz-sidebar-play { background: var(--mz-sidebar-icon-bg, var(--mz-bg-muted)); color: var(--mz-sidebar-icon-text, var(--mz-text-soft)); }
.mz-sidebar-lesson.is-current .mz-sidebar-play { background: var(--mz-sidebar-icon-current-bg, var(--mz-primary)); color: var(--mz-sidebar-icon-current-text, var(--mz-bg-card)); }
.mz-nav-card { background: var(--mz-nav-card-bg, var(--mz-bg-card)); border-color: var(--mz-nav-card-border, var(--mz-border)); }
.mz-nav-card:hover { background: var(--mz-nav-hover-bg, var(--mz-primary-soft)); }
.mz-nav-card span { color: var(--mz-nav-label, var(--mz-text-soft)); }
.mz-nav-card strong { color: var(--mz-nav-title, var(--mz-primary)); }
.mz-nav-card.is-disabled { color: var(--mz-nav-disabled-text, var(--mz-text-soft)); }
.mz-empty-state { background: var(--mz-empty-state-bg, var(--mz-bg-card)); border-color: var(--mz-empty-state-border, var(--mz-border)); }
.mz-empty-state h2 { color: var(--mz-empty-state-title, var(--mz-primary)); }
.mz-empty-state p { color: var(--mz-empty-state-text, var(--mz-text-muted)); }


.mz-sidebar-empty-unit {
    margin: 8px 14px 14px;
    padding: 10px 12px;
    border: 1px dashed var(--mz-empty-state-border, var(--mz-border));
    border-radius: 12px;
    color: var(--mz-empty-state-text, var(--mz-text-muted));
    background: var(--mz-empty-state-bg, var(--mz-bg-card));
    font-size: 13px;
    line-height: 1.7;
}

/* MZ Learning v1.8.19: restore durable quiz result icons. */
.mz-outline-lesson.is-quiz-passed .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-passed .mz-sidebar-play,
.mz-lesson-play[data-mz-progress-icon-state="passed"],
.mz-sidebar-play[data-mz-progress-icon-state="passed"] {
    background: var(--mz-success, #16a34a) !important;
    color: #fff !important;
}

.mz-outline-lesson.is-quiz-failed .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-failed .mz-sidebar-play,
.mz-lesson-play[data-mz-progress-icon-state="failed"],
.mz-sidebar-play[data-mz-progress-icon-state="failed"] {
    background: var(--mz-failed, #dc2626) !important;
    color: #fff !important;
}

.mz-outline-lesson.is-quiz-complete .mz-lesson-play,
.mz-sidebar-lesson.is-quiz-complete .mz-sidebar-play {
    font-weight: 900;
}

.mz-catalog-paid-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border-radius: 8px;
    background: var(--mz-accent-soft);
    color: var(--mz-accent);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin-inline-start: 6px;
}

.mz-paid-course-label {
    display: block;
}