@import url("./motion.css");
@import url("./graphics.css");

/* LearnX AI premium LMS visual system */

:root {
    --lxp-ink: #172033;
    --lxp-muted: #667085;
    --lxp-soft: #f6f8fb;
    --lxp-line: #d9e1ec;
    --lxp-panel: #ffffff;
    --lxp-primary: var(--bs-primary, #1f6feb);
    --lxp-primary-strong: color-mix(in srgb, var(--bs-primary, #1f6feb) 84%, #000000);
    --lxp-accent: color-mix(in srgb, var(--bs-secondary, #0f766e) 70%, var(--bs-primary, #1f6feb));
    --lxp-warning: #b45309;
    --lxp-danger: #c2410c;
    --lxp-radius: 8px;
    --lxp-shadow: 0 12px 28px rgba(23, 32, 51, 0.08);
}

.lxp-page {
    color: var(--lxp-ink);
}

.lxp-page .mphb {
    border-radius: var(--lxp-radius);
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 31, 111, 235), 0.1), rgba(var(--app-secondary-rgb, 15, 118, 110), 0.08)),
        #fff;
    border-color: rgba(var(--app-primary-rgb, 31, 111, 235), 0.14);
    box-shadow: var(--lxp-shadow);
}

.lxp-page .card,
.lxp-page .tbl-panel {
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.055);
}

.lxp-page .card:hover,
.lxp-page .tbl-panel:hover {
    transform: none;
}

.lxp-section {
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: var(--lxp-panel);
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.055);
}

.lxp-section__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1rem 0.85rem;
    border-bottom: 1px solid #edf1f6;
}

.lxp-section__title {
    margin: 0;
    color: var(--lxp-ink);
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.25;
}

.lxp-section__sub {
    margin: 0.3rem 0 0;
    color: var(--lxp-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.lxp-section__body {
    padding: 1rem;
}

.lxp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.85rem;
}

.lxp-kpi {
    position: relative;
    overflow: hidden;
    min-height: 116px;
    padding: 1rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background:
        linear-gradient(180deg, rgba(var(--app-primary-rgb, 31, 111, 235), 0.04), rgba(255, 255, 255, 0)),
        #fff;
}

.lxp-kpi::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--lxp-primary), var(--lxp-accent));
}

.lxp-kpi__label {
    color: var(--lxp-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lxp-kpi__value {
    margin-top: 0.55rem;
    color: var(--lxp-ink);
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    font-weight: 900;
    line-height: 1;
}

.lxp-kpi__meta {
    margin-top: 0.55rem;
    color: var(--lxp-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

.lxp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 26px;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--lxp-line);
    color: var(--lxp-ink);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.lxp-chip--success {
    color: #166534;
    border-color: rgba(22, 101, 52, 0.18);
    background: #effaf3;
}

.lxp-chip--info {
    color: var(--lxp-primary-strong);
    border-color: rgba(var(--app-primary-rgb, 31, 111, 235), 0.18);
    background: rgba(var(--app-primary-rgb, 31, 111, 235), 0.08);
}

.lxp-chip--warning {
    color: var(--lxp-warning);
    border-color: rgba(180, 83, 9, 0.18);
    background: #fff7ed;
}

.lxp-chip--danger {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.18);
    background: #fff1f0;
}

.lxp-progress {
    height: 8px;
    border-radius: 999px;
    background: #e9eef5;
    overflow: hidden;
}

.lxp-progress__bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lxp-primary), var(--lxp-accent));
}

.lxp-command-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: #f8fafc;
}

.lxp-command-bar__text {
    min-width: 0;
    color: var(--lxp-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.lxp-master-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
}

.lxp-master-menu__group {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.05);
}

.lxp-master-menu__title {
    margin-bottom: 0.6rem;
    color: var(--lxp-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.lxp-master-menu__items {
    display: grid;
    gap: 0.5rem;
}

.lxp-master-menu__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 64px;
    padding: 0.68rem;
    border: 1px solid transparent;
    border-radius: var(--lxp-radius);
    color: var(--lxp-ink);
    background: #f8fafc;
    text-decoration: none;
    transition:
        background-color 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}

.lxp-master-menu__item:hover,
.lxp-master-menu__item:focus-visible {
    color: var(--lxp-primary-strong);
    border-color: rgba(var(--app-primary-rgb, 31, 111, 235), 0.18);
    background: rgba(var(--app-primary-rgb, 31, 111, 235), 0.06);
    text-decoration: none;
}

.lxp-master-menu__item.is-active {
    color: var(--lxp-primary-strong);
    border-color: rgba(var(--app-primary-rgb, 31, 111, 235), 0.32);
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 31, 111, 235), 0.12), rgba(var(--app-secondary-rgb, 15, 118, 110), 0.08)),
        #ffffff;
}

.lxp-master-menu__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(var(--app-primary-rgb, 31, 111, 235), 0.16);
    border-radius: var(--lxp-radius);
    color: var(--lxp-primary);
    background: rgba(var(--app-primary-rgb, 31, 111, 235), 0.08);
    font-size: 1rem;
}

.lxp-master-menu__copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.lxp-master-menu__copy strong {
    color: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.2;
}

.lxp-master-menu__copy small {
    color: var(--lxp-muted);
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.35;
}

.lxp-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 2rem 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: var(--lxp-radius);
    background: #f8fafc;
    color: var(--lxp-muted);
    text-align: center;
}

.lxp-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 0.85rem;
    border-radius: var(--lxp-radius);
    background: #eef5ff;
    color: var(--lxp-primary);
    font-size: 1.2rem;
}

.lxp-course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: #fff;
    box-shadow: 0 8px 22px rgba(23, 32, 51, 0.055);
}

.lxp-course-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(31, 111, 235, 0.16), rgba(15, 118, 110, 0.14)),
        #eef2f7;
}

.lxp-course-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lxp-course-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    flex: 1 1 auto;
    padding: 1rem;
}

.lxp-course-card__title {
    margin: 0;
    color: var(--lxp-ink);
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.3;
}

.lxp-course-card__meta {
    color: var(--lxp-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.lxp-player {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) minmax(240px, 300px);
    gap: 1rem;
    align-items: start;
}

.lxp-sticky {
    position: sticky;
    top: 1rem;
}

.lxp-theatre {
    overflow: hidden;
    border-radius: var(--lxp-radius);
    border: 1px solid #111827;
    background: #0f172a;
    color: #fff;
}

.lxp-theatre__screen {
    display: grid;
    place-items: stretch;
    min-height: 360px;
    background: #020617;
}

.lxp-theatre__screen > video,
.lxp-theatre__screen iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}

.lxp-theatre__empty,
.lxp-theatre__live {
    display: grid;
    place-items: center;
    min-height: 360px;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.78);
    text-align: center;
}

.lxp-theatre__article {
    min-height: 360px;
    padding: clamp(1rem, 3vw, 2rem);
    overflow: auto;
    color: #172033;
    background: #fff;
    font-size: 0.98rem;
    line-height: 1.8;
}

.lxp-theatre__body {
    padding: 1rem;
}

.lxp-theatre .text-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

.lxp-lesson-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.lxp-lesson-link {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.62rem 0.7rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    color: var(--lxp-ink);
    background: #fff;
    font-size: 0.82rem;
    font-weight: 750;
}

.lxp-lesson-link:hover,
.lxp-lesson-link.is-active {
    color: var(--lxp-primary);
    border-color: rgba(31, 111, 235, 0.28);
    background: #eef5ff;
}

.lxp-lesson-link__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--lxp-radius);
    background: #f1f5f9;
    color: var(--lxp-primary);
}

.lxp-resource-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #edf1f6;
}

.lxp-resource-row:last-child {
    border-bottom: none;
}

.lxp-resource-row__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--lxp-radius);
    background: #f1f5f9;
    color: var(--lxp-primary);
}

.lxp-builder-shell {
    display: grid;
    grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(260px, 340px);
    gap: 1rem;
    align-items: start;
}

.lxp-builder-rail,
.lxp-builder-inspector {
    position: sticky;
    top: 1rem;
}

.lxp-builder-map {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.lxp-builder-map__section {
    padding: 0.75rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: #f8fafc;
}

.lxp-builder-map__lesson {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    margin-top: 0.45rem;
    padding: 0.5rem;
    border-radius: var(--lxp-radius);
    background: #fff;
    border: 1px solid #edf1f6;
    font-size: 0.8rem;
    font-weight: 700;
}

.lxp-assessment-card {
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    padding: 1rem;
    background: #fff;
}

.lxp-question-card {
    border: 1px solid #edf1f6;
    border-radius: var(--lxp-radius);
    padding: 0.9rem;
    background: #f8fafc;
}

@media (max-width: 1199.98px) {
    .lxp-master-menu {
        grid-template-columns: 1fr;
    }

    .lxp-player,
    .lxp-builder-shell {
        grid-template-columns: 1fr;
    }

    .lxp-sticky,
    .lxp-builder-rail,
    .lxp-builder-inspector {
        position: static;
    }

    .lxp-theatre__screen {
        min-height: 260px;
    }
}

@media (max-width: 767.98px) {
    .lxp-command-bar,
    .lxp-section__head {
        align-items: stretch;
        flex-direction: column;
    }

    .lxp-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lxp-resource-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .lxp-resource-row > :last-child {
        grid-column: 1 / -1;
    }

    .lxp-master-menu__item {
        min-height: 58px;
    }
}

[data-bs-theme="dark"] .lxp-page {
    --lxp-ink: #f8fafc;
    --lxp-muted: #a7b3c6;
    --lxp-line: #334155;
    --lxp-panel: #1f2937;
    --lxp-soft: #111827;
}

[data-bs-theme="dark"] .lxp-page .card,
[data-bs-theme="dark"] .lxp-page .tbl-panel,
[data-bs-theme="dark"] .lxp-section,
[data-bs-theme="dark"] .lxp-kpi,
[data-bs-theme="dark"] .lxp-course-card,
[data-bs-theme="dark"] .lxp-assessment-card,
[data-bs-theme="dark"] .lxp-lesson-link,
[data-bs-theme="dark"] .lxp-builder-map__lesson {
    background: #1f2937;
    border-color: #334155;
}

[data-bs-theme="dark"] .lxp-page .mphb {
    background:
        linear-gradient(135deg, rgba(31, 111, 235, 0.16), rgba(15, 118, 110, 0.14)),
        #111827;
    border-color: #334155;
}

[data-bs-theme="dark"] .lxp-page .mphb__title {
    color: #f8fafc;
}

[data-bs-theme="dark"] .lxp-page .mphb__subtitle {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .lxp-page .mphb__badge {
    color: #dbeafe;
    background: rgba(31, 111, 235, 0.22);
    border-color: rgba(147, 197, 253, 0.25);
}

[data-bs-theme="dark"] .lxp-command-bar,
[data-bs-theme="dark"] .lxp-empty,
[data-bs-theme="dark"] .lxp-builder-map__section,
[data-bs-theme="dark"] .lxp-question-card {
    background: #111827;
    border-color: #334155;
}

/* Complete dark-mode pass for LearnX AI LMS surfaces. */
[data-bs-theme="dark"] .lxp-page {
    --lxp-ink: #f8fafc;
    --lxp-muted: #c3ccda;
    --lxp-soft: #0f172a;
    --lxp-line: #334155;
    --lxp-panel: #182235;
    --lxp-primary: #60a5fa;
    --lxp-primary-strong: #3b82f6;
    --lxp-accent: #2dd4bf;
    --lxp-warning: #fbbf24;
    --lxp-danger: #fb7185;
    --lxp-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
    color: var(--lxp-ink);
}

[data-bs-theme="dark"] .lxp-page .card,
[data-bs-theme="dark"] .lxp-page .tbl-panel,
[data-bs-theme="dark"] .lxp-section,
[data-bs-theme="dark"] .lxp-kpi,
[data-bs-theme="dark"] .lxp-course-card,
[data-bs-theme="dark"] .lxp-assessment-card {
    color: var(--lxp-ink);
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.045), rgba(45, 212, 191, 0.025)),
        var(--lxp-panel);
    border-color: var(--lxp-line);
    box-shadow: var(--lxp-shadow);
}

[data-bs-theme="dark"] .lxp-master-menu__group {
    background: var(--lxp-panel);
    border-color: var(--lxp-line);
    box-shadow: var(--lxp-shadow);
}

[data-bs-theme="dark"] .lxp-master-menu__item {
    color: var(--lxp-ink);
    background: #111827;
    border-color: rgba(148, 163, 184, 0.12);
}

[data-bs-theme="dark"] .lxp-master-menu__item:hover,
[data-bs-theme="dark"] .lxp-master-menu__item:focus-visible,
[data-bs-theme="dark"] .lxp-master-menu__item.is-active {
    color: #eaf2ff;
    border-color: rgba(var(--app-primary-rgb, 96, 165, 250), 0.36);
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 96, 165, 250), 0.16), rgba(var(--app-secondary-rgb, 45, 212, 191), 0.1)),
        #111827;
}

[data-bs-theme="dark"] .lxp-page .card-header,
[data-bs-theme="dark"] .lxp-page .card-body,
[data-bs-theme="dark"] .lxp-page .tbl-panel__head,
[data-bs-theme="dark"] .lxp-page .tbl-panel__body {
    color: var(--lxp-ink);
    background: transparent;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-section__head {
    border-bottom-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .text-secondary,
[data-bs-theme="dark"] .lxp-page .text-muted,
[data-bs-theme="dark"] .lxp-page .small,
[data-bs-theme="dark"] .lxp-page small,
[data-bs-theme="dark"] .lxp-page .lxp-kpi__label,
[data-bs-theme="dark"] .lxp-page .lxp-kpi__meta,
[data-bs-theme="dark"] .lxp-page .lxp-command-bar__text,
[data-bs-theme="dark"] .lxp-page .lxp-course-card__meta,
[data-bs-theme="dark"] .lxp-page .lxp-section__sub {
    color: var(--lxp-muted) !important;
}

[data-bs-theme="dark"] .lxp-page h1,
[data-bs-theme="dark"] .lxp-page h2,
[data-bs-theme="dark"] .lxp-page h3,
[data-bs-theme="dark"] .lxp-page h4,
[data-bs-theme="dark"] .lxp-page h5,
[data-bs-theme="dark"] .lxp-page h6,
[data-bs-theme="dark"] .lxp-page .fw-bold,
[data-bs-theme="dark"] .lxp-page .fw-semibold,
[data-bs-theme="dark"] .lxp-page .lxp-kpi__value,
[data-bs-theme="dark"] .lxp-page .lxp-course-card__title,
[data-bs-theme="dark"] .lxp-page .lxp-section__title {
    color: var(--lxp-ink);
}

[data-bs-theme="dark"] .lxp-page .mphb {
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(45, 212, 191, 0.11)),
        #111827;
    border-color: #334155;
}

[data-bs-theme="dark"] .lxp-page .mphb__graphics {
    opacity: 0.22;
}

[data-bs-theme="dark"] .lxp-page .mphb__title,
[data-bs-theme="dark"] .lxp-page .mphb__subtitle {
    text-shadow: none;
}

[data-bs-theme="dark"] .lxp-page .mphb__badge {
    color: #dbeafe;
    background: rgba(96, 165, 250, 0.16);
    border: 1px solid rgba(147, 197, 253, 0.28);
}

[data-bs-theme="dark"] .lxp-command-bar,
[data-bs-theme="dark"] .lxp-empty,
[data-bs-theme="dark"] .lxp-builder-map__section,
[data-bs-theme="dark"] .lxp-question-card {
    color: var(--lxp-ink);
    background: #111827;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-empty {
    border-style: dashed;
}

[data-bs-theme="dark"] .lxp-empty__icon,
[data-bs-theme="dark"] .lxp-lesson-link__icon,
[data-bs-theme="dark"] .lxp-resource-row__icon {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.14);
}

[data-bs-theme="dark"] .lxp-progress {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

[data-bs-theme="dark"] .lxp-progress__bar {
    background: linear-gradient(90deg, #60a5fa, #2dd4bf);
}

[data-bs-theme="dark"] .lxp-chip,
[data-bs-theme="dark"] .lxp-page .badge.bg-light,
[data-bs-theme="dark"] .lxp-page .badge.text-dark {
    color: #e5edf8 !important;
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.26) !important;
}

[data-bs-theme="dark"] .lxp-chip--success,
[data-bs-theme="dark"] .lxp-page .badge.bg-success {
    color: #bbf7d0 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(74, 222, 128, 0.28) !important;
}

[data-bs-theme="dark"] .lxp-chip--info,
[data-bs-theme="dark"] .lxp-page .badge.bg-info {
    color: #bfdbfe !important;
    background: rgba(96, 165, 250, 0.16) !important;
    border-color: rgba(147, 197, 253, 0.3) !important;
}

[data-bs-theme="dark"] .lxp-chip--warning,
[data-bs-theme="dark"] .lxp-page .badge.bg-warning {
    color: #fde68a !important;
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
}

[data-bs-theme="dark"] .lxp-chip--danger,
[data-bs-theme="dark"] .lxp-page .badge.bg-danger {
    color: #fecdd3 !important;
    background: rgba(244, 63, 94, 0.16) !important;
    border-color: rgba(251, 113, 133, 0.32) !important;
}

[data-bs-theme="dark"] .lxp-lesson-link {
    color: #e5edf8;
    background: #111827;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-lesson-link:hover,
[data-bs-theme="dark"] .lxp-lesson-link.is-active {
    color: #eff6ff;
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.24), rgba(45, 212, 191, 0.12)),
        #172033;
    border-color: rgba(96, 165, 250, 0.58);
    box-shadow: inset 3px 0 0 #60a5fa;
}

[data-bs-theme="dark"] .lxp-lesson-link:hover .lxp-lesson-link__icon,
[data-bs-theme="dark"] .lxp-lesson-link.is-active .lxp-lesson-link__icon {
    color: #eff6ff;
    background: rgba(96, 165, 250, 0.28);
}

[data-bs-theme="dark"] .lxp-builder-map__lesson {
    color: var(--lxp-ink);
    background: #0f172a;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-resource-row {
    border-bottom-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-theatre {
    background: #050b18;
    border-color: #1e293b;
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
}

[data-bs-theme="dark"] .lxp-theatre__screen {
    background: #020617;
}

[data-bs-theme="dark"] .lxp-theatre__article {
    color: #e5edf8;
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.045), rgba(45, 212, 191, 0.025)),
        #0f172a;
}

[data-bs-theme="dark"] .lxp-theatre__body {
    border-top: 1px solid #1e293b;
    background: #081120;
}

[data-bs-theme="dark"] .lxp-page .table,
[data-bs-theme="dark"] .lxp-page .tbl-table {
    color: var(--lxp-ink);
    --bs-table-color: var(--lxp-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--lxp-line);
    --bs-table-striped-bg: rgba(148, 163, 184, 0.06);
    --bs-table-hover-bg: rgba(96, 165, 250, 0.08);
}

[data-bs-theme="dark"] .lxp-page .table thead th,
[data-bs-theme="dark"] .lxp-page .tbl-table thead th {
    color: #dbeafe;
    background: #0f172a;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .table tbody td,
[data-bs-theme="dark"] .lxp-page .tbl-table tbody td,
[data-bs-theme="dark"] .lxp-page .table tbody th,
[data-bs-theme="dark"] .lxp-page .tbl-table tbody th {
    color: var(--lxp-ink);
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .table-responsive {
    border-color: var(--lxp-line);
}

.lxp-page,
.lxp-page .card,
.lxp-page .tbl-panel,
.lxp-page .table-responsive,
.lxp-page .tbl-wrap {
    max-width: 100%;
    min-width: 0;
}

.lxp-page .table-responsive,
.lxp-page .tbl-wrap {
    overflow-x: clip;
    overflow-y: visible;
}

.lxp-page .table,
.lxp-page .tbl-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.lxp-page .table th,
.lxp-page .table td,
.lxp-page .tbl-table th,
.lxp-page .tbl-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

[data-bs-theme="dark"] .lxp-page .nav-pills .nav-link {
    color: #cbd5e1;
    background: #111827;
    border: 1px solid var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .nav-pills .nav-link:hover,
[data-bs-theme="dark"] .lxp-page .nav-pills .nav-link.active {
    color: #eff6ff;
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.24), rgba(45, 212, 191, 0.14)),
        #172033;
    border-color: rgba(96, 165, 250, 0.58);
}

[data-bs-theme="dark"] .lxp-page .form-control,
[data-bs-theme="dark"] .lxp-page .form-select,
[data-bs-theme="dark"] .lxp-page .mui-input,
[data-bs-theme="dark"] .lxp-page .mui-textarea,
[data-bs-theme="dark"] .lxp-page textarea,
[data-bs-theme="dark"] .lxp-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
[data-bs-theme="dark"] .lxp-page select {
    color: #f8fafc;
    background-color: #111827;
    border-color: #334155;
}

[data-bs-theme="dark"] .lxp-page .form-control::placeholder,
[data-bs-theme="dark"] .lxp-page .mui-input::placeholder,
[data-bs-theme="dark"] .lxp-page textarea::placeholder,
[data-bs-theme="dark"] .lxp-page input::placeholder {
    color: #94a3b8;
}

[data-bs-theme="dark"] .lxp-page .form-control:focus,
[data-bs-theme="dark"] .lxp-page .form-select:focus,
[data-bs-theme="dark"] .lxp-page textarea:focus,
[data-bs-theme="dark"] .lxp-page input:focus,
[data-bs-theme="dark"] .lxp-page select:focus {
    color: #fff;
    background-color: #0f172a;
    border-color: #60a5fa;
    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18);
}

[data-bs-theme="dark"] .lxp-page label,
[data-bs-theme="dark"] .lxp-page .form-label,
[data-bs-theme="dark"] .lxp-page .mui-label,
[data-bs-theme="dark"] .lxp-page .mds-label,
[data-bs-theme="dark"] .lxp-page .mus-switch-card__title {
    color: #e5edf8;
}

[data-bs-theme="dark"] .lxp-page .mui-input-shell,
[data-bs-theme="dark"] .lxp-page .mui-textarea-shell,
[data-bs-theme="dark"] .lxp-page .mfu-dropzone,
[data-bs-theme="dark"] .lxp-page .miu-dropzone,
[data-bs-theme="dark"] .lxp-page .mus-switch-card,
[data-bs-theme="dark"] .lxp-page .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .lxp-page .select2-container--default .select2-selection--multiple {
    color: #f8fafc;
    background: #111827;
    border-color: #334155;
}

[data-bs-theme="dark"] .lxp-page .mui-input-icon-box,
[data-bs-theme="dark"] .lxp-page .mfu-icon,
[data-bs-theme="dark"] .lxp-page .miu-icon {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.14);
}

[data-bs-theme="dark"] .lxp-page .btn-outline-secondary,
[data-bs-theme="dark"] .lxp-page .btn-outline-dark,
[data-bs-theme="dark"] .lxp-page .btn-outline-primary {
    color: #dbeafe;
    background: transparent;
    border-color: rgba(147, 197, 253, 0.32);
}

[data-bs-theme="dark"] .lxp-page .btn-outline-secondary:hover,
[data-bs-theme="dark"] .lxp-page .btn-outline-dark:hover,
[data-bs-theme="dark"] .lxp-page .btn-outline-primary:hover {
    color: #fff;
    background: rgba(96, 165, 250, 0.16);
    border-color: rgba(147, 197, 253, 0.58);
}

[data-bs-theme="dark"] .lxp-page .btn-primary,
[data-bs-theme="dark"] .lxp-page .bg-gradient-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--lxp-primary), var(--lxp-accent)) !important;
    border-color: transparent;
}

.lxp-content-block {
    background: rgba(248, 250, 252, 0.72);
    border-color: rgba(15, 23, 42, 0.08) !important;
}

.lxp-lock-fade {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    color: #0f172a;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.95), rgba(236, 253, 245, 0.95));
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 8px;
    font-weight: 700;
}

.lxp-article-blocks h3,
.lxp-theatre__article h3 {
    margin-top: 1rem;
    font-size: 1.05rem;
    font-weight: 800;
}

.lxp-theatre audio {
    min-height: 44px;
}

[data-bs-theme="dark"] .lxp-page .lxp-content-block {
    color: #e5edf8;
    background: #111827;
    border-color: #334155 !important;
}

[data-bs-theme="dark"] .lxp-page .lxp-lock-fade {
    color: #dbeafe;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 118, 110, 0.36));
    border-color: rgba(96, 165, 250, 0.26);
}

.lxp-insight-card {
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background:
        linear-gradient(180deg, rgba(31, 111, 235, 0.045), rgba(15, 118, 110, 0.025)),
        #fff;
}

.lxp-insight-card__title {
    margin: 0.75rem 0 0.25rem;
    color: var(--lxp-ink);
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.3;
}

.lxp-unlock-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: var(--lxp-radius);
    background: rgba(15, 23, 42, 0.72);
}

.lxp-lesson-link.is-completed {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.lxp-lesson-link.is-locked {
    opacity: 0.78;
}

[data-bs-theme="dark"] .lxp-page .lxp-insight-card {
    color: var(--lxp-ink);
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.06), rgba(45, 212, 191, 0.035)),
        #111827;
    border-color: var(--lxp-line);
}

@media (max-width: 767.98px) {
    .lxp-unlock-panel {
        align-items: stretch;
        flex-direction: column;
    }
}

.lxp-learner-hero,
.lxp-course-hub-strip {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) minmax(140px, 180px);
    gap: 1rem;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background:
        linear-gradient(135deg, rgba(31, 111, 235, 0.07), rgba(15, 118, 110, 0.05)),
        var(--lxp-panel);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}

.lxp-learner-hero__media {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    border-radius: var(--lxp-radius);
    background: rgba(31, 111, 235, 0.08);
}

.lxp-learner-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lxp-learner-hero__media i {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 180px;
    place-items: center;
    color: var(--lxp-primary);
    font-size: 3rem;
}

.lxp-learner-hero__body,
.lxp-course-hub-strip__main {
    min-width: 0;
}

.lxp-learner-hero__body h2,
.lxp-course-hub-strip__main h2 {
    margin: 0.75rem 0 0.45rem;
    color: var(--lxp-ink);
    font-size: clamp(1.35rem, 2vw, 2.15rem);
    font-weight: 900;
    line-height: 1.12;
}

.lxp-learner-hero__body p,
.lxp-course-hub-strip__main p {
    margin: 0;
    color: var(--lxp-muted);
    line-height: 1.55;
}

.lxp-learner-hero__rail,
.lxp-course-hub-strip__rail {
    display: grid;
    gap: 0.75rem;
}

.lxp-learner-hero__rail > div,
.lxp-course-hub-strip__rail > div {
    padding: 0.85rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(255, 255, 255, 0.72);
}

.lxp-learner-hero__rail strong,
.lxp-course-hub-strip__rail strong {
    display: block;
    color: var(--lxp-ink);
    font-size: 1.25rem;
    font-weight: 900;
}

.lxp-learner-hero__rail span,
.lxp-course-hub-strip__rail span {
    color: var(--lxp-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-filterbar {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.lxp-filterbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    padding: 0.65rem 0.85rem;
    color: var(--lxp-muted);
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: var(--lxp-panel);
    font-size: 0.82rem;
    font-weight: 850;
}

.lxp-filterbar__item:hover,
.lxp-filterbar__item.is-active {
    color: var(--lxp-primary);
    border-color: rgba(31, 111, 235, 0.34);
    background: rgba(31, 111, 235, 0.08);
}

.lxp-filterbar__item span {
    display: inline-grid;
    min-width: 1.55rem;
    min-height: 1.55rem;
    place-items: center;
    color: var(--lxp-ink);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
}

.lxp-course-hub-strip {
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
}

.lxp-course-hub-strip__meta,
.lxp-mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lxp-course-hub-strip__meta span,
.lxp-mini-list span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--lxp-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.lxp-mini-list span {
    padding: 0.45rem 0.6rem;
    color: var(--lxp-ink);
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(255, 255, 255, 0.68);
}

.lxp-player-modes {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lxp-player-modes span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
    color: var(--lxp-muted);
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: var(--lxp-panel);
    font-size: 0.8rem;
    font-weight: 850;
}

.lxp-player-modes .is-active {
    color: var(--lxp-primary);
    border-color: rgba(31, 111, 235, 0.34);
    background: rgba(31, 111, 235, 0.08);
}

.lxp-progress--sm {
    height: 0.38rem;
}

.lxp-lesson-link small {
    grid-column: 2 / -1;
    color: var(--lxp-muted);
    font-size: 0.72rem;
}

.lxp-resume-dot {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--lxp-primary);
    box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.12);
}

.lxp-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.lxp-detail-grid > div {
    padding: 0.72rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(248, 250, 252, 0.76);
}

.lxp-detail-grid span {
    display: block;
    color: var(--lxp-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-detail-grid strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--lxp-ink);
    font-size: 0.9rem;
}

.lxp-checklist {
    display: grid;
    gap: 0.55rem;
}

.lxp-checklist > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.1rem 0.55rem;
    align-items: start;
    padding: 0.7rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(248, 250, 252, 0.72);
}

.lxp-checklist i {
    grid-row: span 2;
    color: #94a3b8;
}

.lxp-checklist span {
    color: var(--lxp-ink);
    font-weight: 850;
}

.lxp-checklist small {
    color: var(--lxp-muted);
}

.lxp-checklist .is-passed {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.lxp-checklist .is-passed i {
    color: #16a34a;
}

.lxp-completion-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem;
    border: 1px solid rgba(34, 197, 94, 0.28);
    border-radius: var(--lxp-radius);
    background: rgba(34, 197, 94, 0.08);
}

.lxp-completion-card i {
    color: #16a34a;
    font-size: 1.4rem;
}

.lxp-completion-card strong {
    color: var(--lxp-ink);
}

.lxp-completion-card span {
    color: var(--lxp-muted);
    font-size: 0.82rem;
}

.lxp-artifact-row,
.lxp-hub-section {
    padding: 0.85rem;
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(255, 255, 255, 0.72);
}

.lxp-artifact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 0.65rem;
}

.lxp-hub-section + .lxp-hub-section {
    margin-top: 0.85rem;
}

.lxp-hub-section h3 {
    margin: 0;
    color: var(--lxp-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.lxp-hub-section span {
    color: var(--lxp-muted);
    font-size: 0.78rem;
}

.lxp-assignment-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.lxp-assignment-steps > div,
.lxp-assignment-panel,
.lxp-assignment-composer,
.lxp-rubric-row,
.lxp-grade-console,
.lxp-assignment-file,
.lxp-mini-score {
    border: 1px solid var(--lxp-line);
    border-radius: var(--lxp-radius);
    background: rgba(255, 255, 255, 0.78);
}

.lxp-assignment-steps > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.08rem 0.55rem;
    align-items: center;
    padding: 0.78rem;
}

.lxp-assignment-steps i {
    grid-row: span 2;
    color: #64748b;
    font-size: 1rem;
}

.lxp-assignment-steps strong,
.lxp-assignment-panel h4,
.lxp-assignment-composer__head strong,
.lxp-mini-score strong {
    color: var(--lxp-ink);
    font-weight: 900;
}

.lxp-assignment-steps span,
.lxp-assignment-composer__head span,
.lxp-mini-score span {
    color: var(--lxp-muted);
    font-size: 0.76rem;
}

.lxp-assignment-steps .is-active {
    border-color: rgba(31, 111, 235, 0.28);
    background: rgba(31, 111, 235, 0.07);
}

.lxp-assignment-steps .is-active i {
    color: var(--lxp-primary);
}

.lxp-assignment-steps .is-complete {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
}

.lxp-assignment-steps .is-complete i {
    color: #16a34a;
}

.lxp-assignment-panel,
.lxp-assignment-composer {
    padding: 0.95rem;
}

.lxp-assignment-panel h4 {
    margin-bottom: 0.65rem;
    font-size: 0.95rem;
}

.lxp-assignment-composer__head {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.lxp-assignment-files {
    display: grid;
    gap: 0.55rem;
}

.lxp-assignment-file {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.72rem;
    color: var(--lxp-ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.lxp-assignment-file i {
    color: var(--lxp-primary);
}

.lxp-assignment-file small {
    color: var(--lxp-muted);
    font-weight: 750;
}

.lxp-grade-console {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 0.85rem;
}

.lxp-grade-console > div {
    min-width: 0;
}

.lxp-grade-console span,
.lxp-grade-console small,
.lxp-rubric-row small {
    display: block;
    color: var(--lxp-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.lxp-grade-console strong {
    display: block;
    color: var(--lxp-ink);
    font-size: 1.2rem;
    font-weight: 950;
}

.lxp-grade-console__input {
    max-width: 8rem;
    height: 2.45rem;
    font-weight: 900;
}

.lxp-grade-meter__bar {
    height: 0.48rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.2);
}

.lxp-grade-meter__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f6feb, #14b8a6);
    transition: width 0.24s ease;
}

.lxp-grade-meter__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.55rem;
    color: var(--lxp-muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.lxp-rubric-editor {
    display: grid;
    gap: 0.75rem;
}

.lxp-rubric-row {
    padding: 0.85rem;
}

.lxp-rubric-row__head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.lxp-rubric-row__head strong {
    display: block;
    color: var(--lxp-ink);
    font-weight: 900;
}

.lxp-rubric-row__head > span {
    color: var(--lxp-primary);
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.lxp-mini-score {
    padding: 0.72rem;
}

.lxp-mini-score .lxp-grade-meter__bar {
    margin-top: 0.45rem;
}

.lxp-rubric-feedback {
    display: grid;
    gap: 0.55rem;
}

.lxp-rubric-feedback > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: var(--lxp-radius);
    background: rgba(255, 255, 255, 0.52);
}

.lxp-rubric-feedback small {
    grid-column: 1 / -1;
    color: var(--lxp-muted);
}

.lxp-attention-field textarea,
.lxp-attention-field input {
    border-color: rgba(245, 158, 11, 0.75) !important;
    box-shadow: 0 0 0 0.14rem rgba(245, 158, 11, 0.12);
}

.lxp-checklist > div.has-error {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.08);
}

[data-bs-theme="dark"] .lxp-page .lxp-learner-hero,
[data-bs-theme="dark"] .lxp-page .lxp-course-hub-strip,
[data-bs-theme="dark"] .lxp-page .lxp-filterbar__item,
[data-bs-theme="dark"] .lxp-page .lxp-player-modes span,
[data-bs-theme="dark"] .lxp-page .lxp-artifact-row,
[data-bs-theme="dark"] .lxp-page .lxp-hub-section,
[data-bs-theme="dark"] .lxp-page .lxp-assignment-steps > div,
[data-bs-theme="dark"] .lxp-page .lxp-assignment-panel,
[data-bs-theme="dark"] .lxp-page .lxp-assignment-composer,
[data-bs-theme="dark"] .lxp-page .lxp-rubric-row,
[data-bs-theme="dark"] .lxp-page .lxp-grade-console,
[data-bs-theme="dark"] .lxp-page .lxp-assignment-file,
[data-bs-theme="dark"] .lxp-page .lxp-mini-score,
[data-bs-theme="dark"] .lxp-page .lxp-rubric-feedback > div {
    color: var(--lxp-ink);
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.06), rgba(45, 212, 191, 0.035)),
        #111827;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .lxp-learner-hero__rail > div,
[data-bs-theme="dark"] .lxp-page .lxp-course-hub-strip__rail > div,
[data-bs-theme="dark"] .lxp-page .lxp-mini-list span,
[data-bs-theme="dark"] .lxp-page .lxp-detail-grid > div,
[data-bs-theme="dark"] .lxp-page .lxp-checklist > div {
    color: var(--lxp-ink);
    background: #0f172a;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .lxp-filterbar__item span {
    color: #eff6ff;
    background: rgba(96, 165, 250, 0.16);
}

[data-bs-theme="dark"] .lxp-page .lxp-filterbar__item.is-active,
[data-bs-theme="dark"] .lxp-page .lxp-player-modes .is-active,
[data-bs-theme="dark"] .lxp-page .lxp-assignment-steps .is-active {
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(96, 165, 250, 0.14);
}

[data-bs-theme="dark"] .lxp-page .lxp-assignment-steps .is-complete {
    border-color: rgba(74, 222, 128, 0.38);
    background: rgba(34, 197, 94, 0.12);
}

@media (max-width: 991.98px) {
    .lxp-learner-hero,
    .lxp-course-hub-strip {
        grid-template-columns: 1fr;
    }

    .lxp-learner-hero__media {
        min-height: 220px;
    }

    .lxp-assignment-steps,
    .lxp-grade-console {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .lxp-detail-grid {
        grid-template-columns: 1fr;
    }
}

.lxp-cbt-topbar {
    position: sticky;
    top: 76px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(20, 184, 166, .06)),
        var(--lxp-surface);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.lxp-cbt-topbar__main,
.lxp-cbt-topbar__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.lxp-cbt-topbar__main {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.lxp-cbt-topbar__eyebrow {
    color: var(--lxp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-cbt-timer {
    min-width: 70px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

.lxp-cbt-timer.is-warning {
    border-color: rgba(245, 158, 11, .58);
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.lxp-cbt-timer.is-danger {
    animation: lxpCbtPulse 1s ease-in-out infinite;
    border-color: rgba(239, 68, 68, .72);
    background: rgba(239, 68, 68, .16);
    color: #dc2626;
}

.lxp-cbt-question[hidden],
.lxp-cbt-summary[hidden],
#quizSkippedReminder[hidden] {
    display: none !important;
}

.lxp-cbt-question.is-active {
    animation: lxpFadeLift .18s ease both;
}

.lxp-cbt-question.is-reported {
    border-color: rgba(245, 158, 11, .58);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .1);
}

.lxp-cbt-passage {
    position: sticky;
    top: 154px;
    z-index: 3;
    max-height: 260px;
    overflow: auto;
    padding: 14px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: rgba(37, 99, 235, .05);
}

.lxp-option.is-struck span {
    color: var(--lxp-muted);
    opacity: .65;
    text-decoration: line-through;
}

.lxp-cbt-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-surface);
}

.lxp-cbt-palette {
    gap: 8px;
}

.lxp-cbt-palette__item {
    border: 1px solid var(--lxp-line);
    cursor: pointer;
    min-width: 38px;
    justify-content: center;
}

.lxp-cbt-palette__item.is-current {
    border-color: rgba(37, 99, 235, .55);
    background: rgba(37, 99, 235, .14);
    color: var(--lxp-primary);
}

.lxp-cbt-palette__item.is-answered {
    border-color: rgba(34, 197, 94, .45);
    background: rgba(34, 197, 94, .12);
    color: #15803d;
}

.lxp-cbt-palette__item.is-skipped {
    border-color: rgba(245, 158, 11, .48);
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.lxp-cbt-palette__item.is-marked {
    box-shadow: inset 0 -3px 0 rgba(37, 99, 235, .45);
}

.lxp-cbt-palette__item.is-locked {
    cursor: not-allowed;
    opacity: .48;
}

.lxp-cbt-summary {
    animation: lxpFadeLift .2s ease both;
}

@keyframes lxpCbtPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, .28);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
    }
}

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

[data-bs-theme="dark"] .lxp-page .lxp-cbt-topbar,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-controls {
    background:
        linear-gradient(135deg, rgba(96, 165, 250, .08), rgba(45, 212, 191, .06)),
        #111827;
    border-color: var(--lxp-line);
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-palette__item.is-answered {
    color: #86efac;
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-palette__item.is-skipped {
    color: #fbbf24;
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-passage {
    background: rgba(96, 165, 250, .08);
    color: var(--lxp-text);
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-timer.is-warning {
    color: #fbbf24;
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-timer.is-danger {
    color: #fca5a5;
}

@media (max-width: 991.98px) {
    .lxp-cbt-topbar,
    .lxp-cbt-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .lxp-cbt-topbar__stats {
        justify-content: flex-start;
    }
}

.lxp-cbt-command {
    align-items: stretch;
    padding: 16px;
    border-color: rgba(37, 99, 235, .18);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, .09), rgba(20, 184, 166, .08)),
        var(--lxp-surface);
}

.lxp-cbt-command .lxp-cbt-topbar__main {
    flex: 1 1 300px;
    min-width: 260px;
}

.lxp-cbt-command .lxp-cbt-topbar__main strong {
    color: var(--lxp-text);
    font-size: 18px;
    line-height: 1.25;
}

.lxp-cbt-topbar__state {
    color: var(--lxp-muted);
    font-weight: 700;
}

.lxp-cbt-command .lxp-cbt-topbar__main > small:not(.lxp-cbt-topbar__state) {
    display: none;
}

.lxp-cbt-progress-line {
    width: min(100%, 420px);
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, .2);
}

.lxp-cbt-progress-line span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lxp-primary), var(--lxp-accent));
    transition: width .28s ease;
}

.lxp-cbt-command .lxp-cbt-topbar__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, 1fr)) auto;
    gap: 10px;
    min-width: min(100%, 560px);
}

.lxp-cbt-counter {
    display: grid;
    gap: 2px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 -3px 0 rgba(148, 163, 184, .16);
}

.lxp-cbt-counter strong {
    color: var(--lxp-text);
    font-size: 24px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lxp-cbt-counter span {
    color: var(--lxp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-cbt-counter--answered {
    border-color: rgba(34, 197, 94, .32);
    box-shadow: inset 0 -3px 0 rgba(34, 197, 94, .28);
}

.lxp-cbt-counter--skipped {
    border-color: rgba(245, 158, 11, .38);
    box-shadow: inset 0 -3px 0 rgba(245, 158, 11, .3);
}

.lxp-cbt-counter--unanswered {
    border-color: rgba(239, 68, 68, .25);
    box-shadow: inset 0 -3px 0 rgba(239, 68, 68, .18);
}

.lxp-cbt-counter--marked {
    border-color: rgba(37, 99, 235, .3);
    box-shadow: inset 0 -3px 0 rgba(37, 99, 235, .25);
}

.lxp-cbt-timer,
.lxp-cbt-save-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-surface);
    color: var(--lxp-text);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.lxp-cbt-save-state {
    grid-column: span 2;
    min-height: 36px;
    color: var(--lxp-muted);
    font-size: 12px;
    font-weight: 800;
}

.lxp-cbt-question-card {
    min-height: 420px;
    padding: 22px;
    border: 1px solid rgba(37, 99, 235, .14);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(248, 250, 252, .92)),
        var(--lxp-surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.lxp-cbt-question__header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--lxp-line);
}

.lxp-cbt-question__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--lxp-primary), var(--lxp-accent));
    color: #fff;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(var(--app-primary-rgb, 37, 99, 235), .22);
}

.lxp-cbt-rail .lxp-section {
    border-color: rgba(var(--app-primary-rgb, 37, 99, 235), .13);
}

.lxp-cbt-progress-card .lxp-section__body {
    text-align: center;
}

.lxp-cbt-progress-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 132px;
    height: 132px;
    border: 10px solid rgba(var(--app-primary-rgb, 37, 99, 235), .12);
    border-top-color: var(--lxp-primary);
    border-right-color: var(--lxp-accent);
    border-radius: 50%;
    background: var(--lxp-surface);
}

.lxp-cbt-progress-ring strong {
    color: var(--lxp-text);
    font-size: 24px;
    line-height: 1;
}

.lxp-cbt-progress-ring span {
    color: var(--lxp-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-cbt-rail-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.lxp-cbt-rail-counters div {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: rgba(148, 163, 184, .08);
}

.lxp-cbt-rail-counters strong {
    color: var(--lxp-text);
    font-size: 18px;
}

.lxp-cbt-rail-counters span {
    color: var(--lxp-muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.lxp-cbt-palette-legend,
.lxp-cbt-jump-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lxp-cbt-palette-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lxp-muted);
    font-size: 11px;
    font-weight: 800;
}

.lxp-cbt-palette-legend i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--lxp-line);
}

.lxp-cbt-palette-legend .is-current { background: var(--lxp-primary); }
.lxp-cbt-palette-legend .is-answered { background: #22c55e; }
.lxp-cbt-palette-legend .is-skipped { background: #f59e0b; }
.lxp-cbt-palette-legend .is-unanswered { background: #e5e7eb; }
.lxp-cbt-palette-legend .is-marked { background: #8b5cf6; }

.lxp-cbt-palette__item.is-unanswered {
    background: rgba(148, 163, 184, .08);
    color: var(--lxp-muted);
}

.lxp-cbt-jump {
    min-width: 42px;
    min-height: 34px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-surface);
    color: var(--lxp-text);
    font-size: 12px;
    font-weight: 900;
}

.lxp-cbt-jump--skipped {
    border-color: rgba(245, 158, 11, .5);
    background: rgba(245, 158, 11, .14);
    color: #b45309;
}

.lxp-cbt-jump--unanswered {
    border-color: rgba(239, 68, 68, .28);
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}

.lxp-cbt-jump-empty {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--lxp-line);
    border-radius: 8px;
    color: var(--lxp-muted);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.lxp-cbt-final-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lxp-cbt-final-list {
    padding: 14px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: rgba(148, 163, 184, .07);
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-command,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-question-card,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-timer,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-save-state,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-progress-ring,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-jump,
.dark-version .lxp-page .lxp-cbt-command,
.dark-version .lxp-page .lxp-cbt-question-card,
.dark-version .lxp-page .lxp-cbt-timer,
.dark-version .lxp-page .lxp-cbt-save-state,
.dark-version .lxp-page .lxp-cbt-progress-ring,
.dark-version .lxp-page .lxp-cbt-jump {
    background:
        linear-gradient(135deg, rgba(96, 165, 250, .08), rgba(45, 212, 191, .06)),
        #111827;
    border-color: rgba(148, 163, 184, .22);
    color: var(--lxp-text);
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-counter,
.dark-version .lxp-page .lxp-cbt-counter {
    background: rgba(15, 23, 42, .72);
    border-color: rgba(148, 163, 184, .2);
}

[data-bs-theme="dark"] .lxp-page .lxp-cbt-final-list,
[data-bs-theme="dark"] .lxp-page .lxp-cbt-rail-counters div,
.dark-version .lxp-page .lxp-cbt-final-list,
.dark-version .lxp-page .lxp-cbt-rail-counters div {
    background: rgba(15, 23, 42, .58);
    border-color: rgba(148, 163, 184, .2);
}

@media (max-width: 1199.98px) {
    .lxp-cbt-command .lxp-cbt-topbar__stats {
        grid-template-columns: repeat(4, minmax(76px, 1fr));
    }

    .lxp-cbt-save-state,
    .lxp-cbt-command .btn {
        grid-column: span 2;
    }
}

@media (max-width: 575.98px) {
    .lxp-cbt-command .lxp-cbt-topbar__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lxp-cbt-timer,
    .lxp-cbt-save-state,
    .lxp-cbt-command .btn {
        grid-column: span 2;
    }

    .lxp-cbt-final-lists {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lxp-cbt-progress-line span,
    .lxp-cbt-question.is-active,
    .lxp-cbt-summary {
        animation: none !important;
        transition: none !important;
    }
}

.lxp-tutor-page .lxp-section,
.lxp-tutor-page .tbl-panel {
    position: relative;
}

.lxp-tutor-session-list {
    display: grid;
    gap: 10px;
}

.lxp-tutor-session {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-surface);
    color: var(--lxp-ink);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lxp-tutor-session:hover,
.lxp-tutor-session.is-active {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, .38);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .08);
    color: var(--lxp-ink);
}

.lxp-tutor-session__icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(37, 99, 235, .1);
    color: var(--lxp-primary);
}

.lxp-tutor-transcript {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 420px;
    max-height: 660px;
    overflow: auto;
    padding-right: 4px;
}

.lxp-tutor-transcript--staff {
    max-height: none;
}

.lxp-tutor-message {
    display: flex;
}

.lxp-tutor-message.is-pinned .lxp-tutor-message__bubble {
    border-color: rgba(20, 184, 166, .42);
    box-shadow: 0 14px 32px rgba(20, 184, 166, .08);
}

.lxp-tutor-message--typing .lxp-tutor-message__bubble {
    border-style: dashed;
}

.lxp-tutor-message--user {
    justify-content: flex-end;
}

.lxp-tutor-message__bubble {
    width: min(100%, 760px);
    padding: 14px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-surface);
    color: var(--lxp-ink);
}

.lxp-tutor-message--user .lxp-tutor-message__bubble {
    max-width: 82%;
    background: rgba(37, 99, 235, .1);
    border-color: rgba(37, 99, 235, .28);
}

.lxp-tutor-answer-card {
    line-height: 1.65;
}

.lxp-tutor-answer-card--flashcards,
.lxp-tutor-answer-card--revision_quiz,
.lxp-tutor-answer-card--study_plan {
    padding: 12px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 8px;
    background: rgba(37, 99, 235, .055);
}

.lxp-tutor-citation-drawer {
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    padding: 10px;
    background: rgba(20, 184, 166, .045);
}

.lxp-tutor-citation-drawer summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    color: var(--lxp-ink);
    font-weight: 700;
}

.lxp-tutor-citation-drawer summary::marker {
    content: "";
}

.lxp-tutor-citation-drawer summary small {
    color: var(--lxp-muted);
    font-weight: 600;
}

.lxp-tutor-sources {
    display: grid;
    gap: 8px;
}

.lxp-tutor-source {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 9px;
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    background: var(--lxp-bg);
    color: var(--lxp-ink);
}

.lxp-tutor-source:hover {
    border-color: rgba(20, 184, 166, .36);
    color: var(--lxp-ink);
}

.lxp-tutor-source i {
    color: var(--lxp-accent);
}

.lxp-tutor-source small,
.lxp-tutor-source em,
.lxp-tutor-message__meta {
    display: block;
    color: var(--lxp-muted);
    font-size: 12px;
}

.lxp-tutor-source em {
    font-style: normal;
    margin-top: 3px;
}

.lxp-tutor-message__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lxp-tutor-composer {
    border: 1px solid var(--lxp-line);
    border-radius: 8px;
    padding: 14px;
    background: var(--lxp-surface);
}

.lxp-source-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.lxp-source-chip-row .tbl-pill {
    border: 0;
    cursor: pointer;
}

.lxp-tutor-mini-stack {
    display: grid;
    gap: 10px;
}

[data-bs-theme="dark"] .lxp-page .lxp-tutor-session,
[data-bs-theme="dark"] .lxp-page .lxp-tutor-message__bubble,
[data-bs-theme="dark"] .lxp-page .lxp-tutor-composer {
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.06), rgba(45, 212, 191, 0.035)),
        #111827;
    border-color: var(--lxp-line);
    color: var(--lxp-ink);
}

[data-bs-theme="dark"] .lxp-page .lxp-tutor-source {
    background: #0f172a;
    border-color: var(--lxp-line);
    color: var(--lxp-ink);
}

[data-bs-theme="dark"] .lxp-page .lxp-tutor-citation-drawer,
[data-bs-theme="dark"] .lxp-page .lxp-tutor-answer-card--flashcards,
[data-bs-theme="dark"] .lxp-page .lxp-tutor-answer-card--revision_quiz,
[data-bs-theme="dark"] .lxp-page .lxp-tutor-answer-card--study_plan {
    background: rgba(20, 184, 166, .075);
    border-color: rgba(45, 212, 191, .2);
}

[data-bs-theme="dark"] .lxp-page .lxp-tutor-message--user .lxp-tutor-message__bubble {
    background: rgba(59, 130, 246, .16);
    border-color: rgba(96, 165, 250, .32);
}

@media (max-width: 767.98px) {
    .lxp-tutor-message--user .lxp-tutor-message__bubble {
        max-width: 100%;
    }

    .lxp-tutor-transcript {
        max-height: none;
    }
}

/* Premium public buyer showcase */
.lxp-showcase-body.lxp-page {
    --lxp-showcase-bg: #eef4f8;
    --lxp-showcase-panel: #ffffff;
    --lxp-showcase-panel-strong: #f8fbfd;
    --lxp-showcase-text: #101828;
    --lxp-showcase-muted: #5f6f85;
    --lxp-showcase-line: rgba(23, 32, 51, 0.12);
    --lxp-showcase-grid: rgba(31, 111, 235, 0.08);
    --lxp-showcase-accent: #0f766e;
    --lxp-showcase-warm: #b45309;
    min-height: 100vh;
    background:
        linear-gradient(90deg, var(--lxp-showcase-grid) 1px, transparent 1px),
        linear-gradient(180deg, rgba(15, 118, 110, 0.08), transparent 38%),
        var(--lxp-showcase-bg);
    background-size: 44px 44px, auto, auto;
    color: var(--lxp-showcase-text);
}

.lxp-showcase-body .lxp-showcase {
    width: min(1220px, calc(100% - 32px));
    padding: 1rem 0 3rem;
}

.lxp-showcase-body .lxp-showcase-nav {
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.86);
}

.lxp-showcase-body .lxp-showcase-brand__mark {
    overflow: hidden;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.2), rgba(15, 118, 110, 0.16)),
        #ffffff;
}

.lxp-showcase-body .lxp-showcase-brand__mark img {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
}

.lxp-showcase-body .lxp-showcase-brand strong,
.lxp-showcase-body .lxp-showcase-section__head h2,
.lxp-showcase-body .lxp-showcase-hero h1 {
    color: var(--lxp-showcase-text);
    letter-spacing: 0;
}

.lxp-showcase-hero--premium {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
    gap: 1.25rem;
    align-items: stretch;
    min-height: 620px;
    padding: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.12), rgba(15, 118, 110, 0.08) 52%, rgba(180, 83, 9, 0.08)),
        rgba(255, 255, 255, 0.68);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.lxp-showcase-hero--premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.42) 46%, transparent 72%),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
    background-size: 100% 100%, 26px 26px;
    opacity: 0.58;
    pointer-events: none;
}

.lxp-showcase-hero__content,
.lxp-showcase-product-stage {
    position: relative;
    z-index: 1;
}

.lxp-showcase-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1rem;
}

.lxp-showcase-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: 100%;
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: color-mix(in srgb, var(--bs-primary) 72%, #172033);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
}

.lxp-showcase-live-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--lxp-showcase-accent);
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.34);
    animation: lxpShowcasePulse 2s ease-out infinite;
}

.lxp-showcase-hero h1 {
    margin: 1.2rem 0 0;
    font-size: 4rem;
    line-height: 1.02;
    font-weight: 900;
}

.lxp-showcase-hero p {
    max-width: 680px;
    margin: 1rem 0 0;
    color: var(--lxp-showcase-muted);
    font-size: 1.02rem;
    line-height: 1.7;
}

.lxp-showcase-hero__actions,
.lxp-showcase-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.lxp-showcase-hero__badges span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.48rem 0.68rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.74);
    color: #1f2a3d;
    font-size: 0.82rem;
    font-weight: 800;
}

.lxp-showcase-product-stage {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 560px;
    padding: 0.85rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
        #ffffff;
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.14);
    animation: lxpShowcaseFloat 7s ease-in-out infinite;
}

.lxp-stage-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0 0.35rem 0.65rem;
    border-bottom: 1px solid var(--lxp-showcase-line);
}

.lxp-stage-toolbar span {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    background: #e11d48;
}

.lxp-stage-toolbar span:nth-child(2) {
    background: #d97706;
}

.lxp-stage-toolbar span:nth-child(3) {
    background: #059669;
}

.lxp-stage-toolbar strong {
    margin-left: 0.35rem;
    color: #344054;
    font-size: 0.84rem;
    font-weight: 850;
}

.lxp-stage-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    flex: 1 1 auto;
    padding-top: 0.85rem;
    overflow: hidden;
}

.lxp-stage-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, rgba(var(--app-primary-rgb), 0.08), transparent);
    transform: translateY(-110%);
    animation: lxpShowcaseScan 5.5s ease-in-out infinite;
    pointer-events: none;
}

.lxp-stage-panel {
    position: relative;
    min-width: 0;
    min-height: 218px;
    padding: 0.85rem;
    border: 1px solid var(--lxp-showcase-line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.04), transparent 45%),
        var(--lxp-showcase-panel);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.lxp-stage-panel--wide {
    grid-column: 1 / -1;
    min-height: 230px;
}

.lxp-stage-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.lxp-stage-panel__head span,
.lxp-stage-panel__head strong {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    color: #1f2a3d;
    font-size: 0.82rem;
    font-weight: 850;
}

.lxp-stage-panel__head strong {
    flex: 0 0 auto;
    padding: 0.24rem 0.48rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.1);
    color: #0f766e;
}

.lxp-stage-panel .lxp-graphic {
    width: 100%;
    min-height: 128px;
    box-shadow: none;
}

.lxp-stage-course-map {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lxp-stage-course-map span {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.18);
}

.lxp-stage-course-map .is-done {
    background: rgba(15, 118, 110, 0.38);
}

.lxp-stage-course-map .is-locked {
    background: repeating-linear-gradient(90deg, rgba(180, 83, 9, 0.36), rgba(180, 83, 9, 0.36) 7px, transparent 7px, transparent 13px);
}

.lxp-stage-chat {
    display: grid;
    gap: 0.65rem;
}

.lxp-stage-chat span {
    display: block;
    max-width: 92%;
    padding: 0.68rem 0.75rem;
    border: 1px solid var(--lxp-showcase-line);
    border-radius: 8px;
    color: #344054;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.45;
}

.lxp-stage-chat .is-user {
    justify-self: end;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 58%, #0f766e));
}

.lxp-showcase-body .lxp-showcase-section {
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.lxp-showcase-body .lxp-showcase-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lxp-showcase-body .lxp-showcase-section__head h2 {
    margin: 0;
    max-width: 720px;
    font-size: 2rem;
    line-height: 1.15;
    font-weight: 900;
}

.lxp-feature-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.lxp-feature-preview-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
    min-height: 320px;
    padding: 1rem;
    border: 1px solid var(--lxp-showcase-line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.035), transparent 46%),
        var(--lxp-showcase-panel);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.075);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lxp-feature-preview-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--app-primary-rgb), 0.26);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.1);
}

.lxp-feature-preview-card__top {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
}

.lxp-feature-preview-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #0f766e));
}

.lxp-feature-preview-card h3 {
    margin: 0;
    color: #172033;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.lxp-feature-preview-card p {
    margin: 0;
    color: var(--lxp-showcase-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.lxp-feature-preview-card .lxp-graphic {
    width: 100%;
    min-height: 122px;
    margin-top: auto;
    box-shadow: none;
}

.lxp-showcase-body .lxp-journey-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.lxp-showcase-body .lxp-journey-card {
    border-radius: 8px;
}

.lxp-showcase-body .lxp-proof-panel {
    border-radius: 8px;
}

@keyframes lxpShowcasePulse {
    0% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.34);
    }
    70% {
        box-shadow: 0 0 0 9px rgba(15, 118, 110, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(15, 118, 110, 0);
    }
}

@keyframes lxpShowcaseScan {
    0%,
    58% {
        transform: translateY(-110%);
    }
    100% {
        transform: translateY(110%);
    }
}

@keyframes lxpShowcaseFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

[data-bs-theme="dark"] .lxp-showcase-body.lxp-page {
    --lxp-showcase-bg: #07111f;
    --lxp-showcase-panel: #101c2d;
    --lxp-showcase-panel-strong: #0b1423;
    --lxp-showcase-text: #f8fafc;
    --lxp-showcase-muted: #b8c3d1;
    --lxp-showcase-line: rgba(148, 163, 184, 0.2);
    --lxp-showcase-grid: rgba(148, 163, 184, 0.08);
    background:
        linear-gradient(90deg, var(--lxp-showcase-grid) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.16), transparent 36%),
        var(--lxp-showcase-bg);
    background-size: 44px 44px, auto, auto;
}

[data-bs-theme="dark"] .lxp-showcase-body .lxp-showcase-nav,
[data-bs-theme="dark"] .lxp-showcase-hero--premium,
[data-bs-theme="dark"] .lxp-showcase-product-stage,
[data-bs-theme="dark"] .lxp-showcase-body .lxp-showcase-section,
[data-bs-theme="dark"] .lxp-feature-preview-card,
[data-bs-theme="dark"] .lxp-stage-panel {
    background:
        linear-gradient(180deg, rgba(96, 165, 250, 0.055), rgba(45, 212, 191, 0.028)),
        var(--lxp-showcase-panel);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none;
}

[data-bs-theme="dark"] .lxp-showcase-body .lxp-showcase-brand__mark,
[data-bs-theme="dark"] .lxp-showcase-eyebrow,
[data-bs-theme="dark"] .lxp-showcase-hero__badges span,
[data-bs-theme="dark"] .lxp-stage-chat span,
[data-bs-theme="dark"] .lxp-stage-toolbar {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-bs-theme="dark"] .lxp-showcase-body .lxp-showcase-brand strong,
[data-bs-theme="dark"] .lxp-stage-panel__head span,
[data-bs-theme="dark"] .lxp-stage-toolbar strong,
[data-bs-theme="dark"] .lxp-feature-preview-card h3,
[data-bs-theme="dark"] .lxp-showcase-hero__badges span {
    color: #f8fafc;
}

[data-bs-theme="dark"] .lxp-stage-chat span,
[data-bs-theme="dark"] .lxp-feature-preview-card p {
    color: #cbd5e1;
}

@media (max-width: 1199.98px) {
    .lxp-showcase-hero--premium {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lxp-showcase-product-stage {
        min-height: 0;
    }

    .lxp-feature-preview-grid,
    .lxp-showcase-body .lxp-journey-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .lxp-showcase-body .lxp-showcase {
        width: min(100% - 20px, 1220px);
    }

    .lxp-showcase-hero--premium,
    .lxp-showcase-body .lxp-showcase-section {
        padding: 0.9rem;
    }

    .lxp-showcase-hero__content {
        padding: 0.25rem;
    }

    .lxp-showcase-hero h1 {
        font-size: 2.5rem;
    }

    .lxp-stage-grid,
    .lxp-feature-preview-grid,
    .lxp-showcase-body .lxp-journey-grid {
        grid-template-columns: 1fr;
    }

    .lxp-showcase-body .lxp-showcase-section__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .lxp-showcase-body .lxp-showcase-section__head h2 {
        font-size: 1.45rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lxp-showcase-live-dot,
    .lxp-showcase-product-stage,
    .lxp-stage-grid::after {
        animation: none !important;
    }
}

.lxp-showcase-body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 7%, white), transparent 32%),
        linear-gradient(180deg, #f8fafc 0%, #eef5f3 100%);
    color: #172033;
}

.lxp-showcase {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 1rem 0 3rem;
}

.lxp-showcase-nav {
    position: sticky;
    top: 0.75rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.lxp-showcase-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.lxp-showcase-brand__mark,
.lxp-journey-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 58%, #16a34a));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--bs-primary) 24%, transparent);
    flex: 0 0 auto;
}

.lxp-showcase-brand small {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: #667085;
    font-weight: 700;
}

.lxp-showcase-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lxp-showcase-nav__links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lxp-showcase-nav__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0 0.72rem;
    border-radius: 8px;
    color: var(--lxp-showcase-muted, #5f6f85);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.lxp-showcase-nav__links a:hover,
.lxp-showcase-nav__links a:focus-visible {
    background: color-mix(in srgb, var(--bs-primary) 11%, transparent);
    color: var(--lxp-showcase-text, #101828);
    text-decoration: none;
}

.lxp-showcase-hero,
.lxp-showcase-section {
    margin-top: 1rem;
}

.lxp-showcase-section__head {
    margin-bottom: 1rem;
}

.lxp-showcase-section__head h2 {
    margin: 0.65rem 0 0;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.15;
    font-weight: 900;
    color: #172033;
}

.lxp-proof-panel {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--bs-secondary) 14%, white);
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bs-primary) 9%, white), transparent 36%),
        linear-gradient(180deg, #ffffff, #f8fafc);
    padding: 1.1rem;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.lxp-proof-panel__title {
    font-size: 0.92rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1f2a3d;
}

.lxp-proof-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.lxp-proof-panel__grid span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.55rem 0.65rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.82rem;
    font-weight: 800;
    color: #1f2a3d;
}

.lxp-journey-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}

.lxp-journey-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--bs-secondary) 14%, white);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.lxp-journey-card::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 35%, #16a34a));
    opacity: 0.8;
}

.lxp-journey-card:hover,
.lxp-feature-link:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--bs-primary) 20%, white);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
}

.lxp-journey-card h3 {
    margin: 0.9rem 0 0.45rem;
    font-size: 1rem;
    font-weight: 900;
    color: #172033;
}

.lxp-journey-card p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: #667085;
}

.lxp-code-block {
    display: block;
    width: 100%;
    padding: 0.85rem;
    border-radius: 0.75rem;
    background: #111827;
    color: #e2e8f0;
    white-space: normal;
}

.lxp-feature-link {
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lxp-demo-tour {
    display: grid;
    gap: 0.8rem;
}

.lxp-demo-tour__step {
    display: grid;
    grid-template-columns: 32px 44px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 0.85rem;
    min-height: 76px;
    padding: 0.85rem;
    border-radius: 0.85rem;
    border: 1px solid var(--lxp-line, rgba(15, 23, 42, 0.08));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bs-primary) 5%, white), transparent 48%),
        var(--lxp-surface, #fff);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.lxp-demo-tour__step:hover {
    transform: translateX(4px);
    color: inherit;
    border-color: color-mix(in srgb, var(--bs-primary) 24%, white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.lxp-demo-tour__number {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bs-primary) 10%, white);
    color: var(--bs-primary);
    font-weight: 900;
}

.lxp-demo-tour__icon {
    width: 44px;
    height: 44px;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 54%, #16a34a));
    color: #fff;
}

.lxp-demo-tour__step strong {
    display: block;
    font-size: 0.92rem;
    color: var(--lxp-ink, #1f2a3d);
}

.lxp-demo-tour__step small {
    display: block;
    margin-top: 0.16rem;
    color: var(--lxp-muted, #667085);
    line-height: 1.45;
}

[data-bs-theme="dark"] .lxp-showcase-body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--bs-primary) 15%, transparent), transparent 34%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: #f8fafc;
}

[data-bs-theme="dark"] .lxp-showcase-nav,
[data-bs-theme="dark"] .lxp-proof-panel,
[data-bs-theme="dark"] .lxp-journey-card {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--bs-primary) 10%, #172033), transparent 34%),
        linear-gradient(180deg, #1f2637 0%, #172033 100%);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-bs-theme="dark"] .lxp-showcase-brand small,
[data-bs-theme="dark"] .lxp-journey-card p {
    color: #aab6c7;
}

[data-bs-theme="dark"] .lxp-showcase-nav__links a {
    color: var(--lxp-showcase-muted, #b8c3d1);
}

[data-bs-theme="dark"] .lxp-showcase-nav__links a:hover,
[data-bs-theme="dark"] .lxp-showcase-nav__links a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--lxp-showcase-text, #f8fafc);
}

[data-bs-theme="dark"] .lxp-showcase-section__head h2,
[data-bs-theme="dark"] .lxp-proof-panel__title,
[data-bs-theme="dark"] .lxp-proof-panel__grid span,
[data-bs-theme="dark"] .lxp-journey-card h3 {
    color: #f8fafc;
}

[data-bs-theme="dark"] .lxp-proof-panel__grid span {
    background: rgba(15, 23, 42, 0.62);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .lxp-demo-tour__step {
    background:
        linear-gradient(135deg, rgba(96, 165, 250, 0.06), transparent 50%),
        #111827;
    border-color: var(--lxp-line, rgba(255, 255, 255, 0.08));
    box-shadow: none;
}

[data-bs-theme="dark"] .lxp-demo-tour__step:hover {
    box-shadow: none;
}

[data-bs-theme="dark"] .lxp-demo-tour__number {
    background: color-mix(in srgb, var(--bs-primary) 24%, #111827);
}

.lxp-kanban-panel {
    overflow: hidden;
}

.lxp-kanban-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(220px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
}

.lxp-kanban-column {
    min-height: 260px;
    min-width: 220px;
    border: 1px solid var(--lxp-line, rgba(15, 23, 42, 0.08));
    border-radius: 8px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bs-primary) 5%, transparent), transparent 42%),
        var(--lxp-panel, #fff);
    scroll-snap-align: start;
    transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.lxp-kanban-column.is-drop-target {
    border-color: color-mix(in srgb, var(--bs-primary) 55%, var(--lxp-line, #d0d5dd));
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.14);
    transform: translateY(-2px);
}

.lxp-kanban-column__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 10px;
    border-bottom: 1px solid var(--lxp-line, rgba(15, 23, 42, 0.08));
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--lxp-muted, #667085);
}

.lxp-kanban-column__head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    color: var(--bs-primary);
}

.lxp-kanban-column__body {
    display: grid;
    gap: 10px;
    padding: 12px;
}

.lxp-kanban-card {
    border: 1px solid var(--lxp-line, rgba(15, 23, 42, 0.08));
    border-left: 4px solid var(--bs-primary);
    border-radius: 8px;
    background: var(--lxp-card, #fff);
    padding: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    cursor: grab;
    animation: lxp-card-rise 360ms ease both;
}

.lxp-kanban-card.is-dragging {
    opacity: 0.72;
    cursor: grabbing;
}

.lxp-kanban-card--critical,
.lxp-kanban-card--high {
    border-left-color: #ef4444;
}

.lxp-kanban-card--medium {
    border-left-color: #f59e0b;
}

.lxp-kanban-card--low {
    border-left-color: #16a34a;
}

.lxp-kanban-card h6 {
    margin: 10px 0 6px;
    font-size: 0.94rem;
    line-height: 1.35;
}

.lxp-kanban-card p,
.lxp-kanban-card__action {
    margin: 0;
    color: var(--lxp-muted, #667085);
    font-size: 0.82rem;
    line-height: 1.45;
}

.lxp-kanban-card__action {
    margin-top: 8px;
    padding: 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bs-primary) 7%, transparent);
    color: var(--lxp-text, #344054);
}

.lxp-kanban-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 120px;
    color: var(--lxp-muted, #667085);
    border: 1px dashed var(--lxp-line, rgba(15, 23, 42, 0.12));
    border-radius: 8px;
    background: color-mix(in srgb, var(--bs-primary) 4%, transparent);
    font-size: 0.86rem;
}

.lxp-kanban-empty i {
    font-size: 1.35rem;
    color: var(--bs-primary);
}

@keyframes lxp-card-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-bs-theme="dark"] .lxp-kanban-column,
[data-bs-theme="dark"] .lxp-kanban-card {
    background: #111827;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

[data-bs-theme="dark"] .lxp-kanban-column__head {
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .lxp-kanban-card__action,
[data-bs-theme="dark"] .lxp-kanban-empty {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
    color: #c7d0dc;
}

@media (prefers-reduced-motion: reduce) {
    .lxp-kanban-card,
    .lxp-kanban-column {
        animation: none;
        transition: none;
    }
}

@media (max-width: 1199.98px) {
    .lxp-journey-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .lxp-showcase {
        width: min(100% - 20px, 1180px);
    }

    .lxp-showcase-nav {
        position: static;
        align-items: flex-start;
        flex-direction: column;
    }

    .lxp-showcase-nav__links {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 0.12rem;
    }

    .lxp-showcase-nav__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .lxp-proof-panel__grid,
    .lxp-journey-grid {
        grid-template-columns: 1fr;
    }

    .lxp-journey-card {
        min-height: 0;
    }
}

/* Public showcase performance, theme toggle, and chart polish */
.lxp-showcase-body.lxp-page .lxp-showcase-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.lxp-showcase-body.lxp-page .lxp-showcase-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    min-width: 5.6rem;
    min-height: 34px;
    white-space: nowrap;
}

.lxp-showcase-body.lxp-page .lxp-showcase-live-dot {
    animation: none;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

.lxp-showcase-body.lxp-page .lxp-showcase-product-stage {
    animation: none;
    will-change: auto;
}

.lxp-showcase-body.lxp-page .lxp-stage-grid::after {
    display: none;
    animation: none;
}

.lxp-showcase-body.lxp-page .mcc {
    overflow: visible;
    border-radius: 8px;
}

.lxp-showcase-body.lxp-page .mcc__chart {
    min-height: 300px;
    border-radius: 8px;
}

[data-bs-theme="dark"] .lxp-showcase-body.lxp-page .mcc {
    background:
        radial-gradient(circle at top right, rgba(var(--app-primary-rgb), 0.12), transparent 32%),
        linear-gradient(180deg, #101c2d 0%, #0b1423 100%);
    border-color: rgba(148, 163, 184, 0.18);
}

[data-bs-theme="dark"] .lxp-showcase-body.lxp-page .mcc__chart {
    background:
        linear-gradient(180deg, rgba(var(--app-primary-rgb), 0.07), rgba(15, 23, 42, 0.18) 72%),
        #0b1423;
}

/* Admin headers must leave space for the actual work, not decoration. */
body.product-ui-v2 .lxp-page .mphb:not(.mphb--card) {
    min-height: 0;
    background: var(--app-surface);
    border-color: var(--app-line);
    box-shadow: var(--app-shadow-xs);
}

body.product-ui-v2 .mphb__graphics,
body.product-ui-v2 .mphb .product-dimension-scene,
body.product-ui-v2 .mphb__right .lxp-graphic {
    display: none !important;
}

body.product-ui-v2 .lxp-page .mphb__content {
    min-height: 0;
}

body.product-ui-v2 .academy-table__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 220px;
}

@media (max-width: 767.98px) {
    .lxp-showcase-body.lxp-page .lxp-showcase-nav__actions .btn,
    .lxp-showcase-body.lxp-page .lxp-showcase-theme-toggle {
        flex: 1 1 9rem;
    }
}

/* Course builder and lesson builder workspace */
.lxp-builder-page {
    --builder-ink: #071126;
    --builder-muted: #667085;
    --builder-line: #dfe6f1;
    --builder-soft: #f7f9fc;
    --builder-blue: var(--bs-primary, #3f6df6);
    --builder-blue-strong: color-mix(in srgb, var(--bs-primary, #3f6df6) 84%, #000000);
    --builder-blue-soft: rgba(var(--app-primary-rgb, 63, 109, 246), 0.09);
    --builder-green: #16a66a;
    --builder-teal: #18aeb2;
    --builder-orange: #ff941f;
    --builder-rose: #f05273;
    --builder-purple: color-mix(in srgb, var(--bs-primary, #3f6df6) 68%, var(--bs-secondary, #7657e8));
}

.lxp-builder-frame {
    overflow: hidden;
    margin-bottom: 24px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

.lxp-builder-topbar {
    display: grid;
    grid-template-columns: minmax(250px, auto) minmax(280px, 520px) auto;
    align-items: center;
    gap: 18px;
    min-height: 72px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--builder-line);
    background: #ffffff;
}

.lxp-builder-topbar__title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.lxp-builder-topbar h1 {
    margin: 0;
    color: var(--builder-ink);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1.2;
}

.lxp-save-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--builder-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.lxp-save-state i {
    color: #16a66a;
    font-size: 0.45rem;
}

.lxp-icon-btn,
.lxp-soft-btn,
.lxp-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.lxp-icon-btn {
    width: 42px;
    padding: 0;
    border: 1px solid transparent;
    color: #44546f;
    background: transparent;
}

.lxp-icon-btn:hover,
.lxp-soft-btn:hover {
    color: var(--builder-blue-strong);
    background: var(--builder-blue-soft);
    text-decoration: none;
}

.lxp-soft-btn {
    padding: 0 14px;
    border: 1px solid var(--builder-line);
    color: #31507a;
    background: #ffffff;
}

.lxp-primary-btn {
    padding: 0 16px;
    border: 1px solid var(--builder-blue-strong);
    color: #ffffff;
    background: linear-gradient(135deg, var(--builder-blue), var(--builder-purple));
    box-shadow: 0 12px 22px rgba(var(--app-primary-rgb, 63, 109, 246), 0.2);
}

.lxp-primary-btn:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(0.98);
}

.lxp-builder-search {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 44px;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.lxp-builder-search i {
    color: #44546f;
}

.lxp-builder-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--builder-ink);
    font-size: 0.9rem;
}

.lxp-builder-search kbd {
    padding: 3px 8px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    color: var(--builder-blue-strong);
    background: var(--builder-blue-soft);
    font-size: 0.74rem;
    box-shadow: none;
}

.lxp-builder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.lxp-map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 690px;
}

.lxp-map-canvas {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(86, 101, 130, 0.22) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff, #fbfcff);
    background-size: 22px 22px, auto;
}

.lxp-canvas-toolbar,
.lxp-zoom-controls {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 12px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    color: #1f2a44;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.lxp-canvas-toolbar {
    top: 16px;
    left: 16px;
}

.lxp-canvas-toolbar span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 850;
    font-size: 0.86rem;
}

.lxp-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #d7deea;
}

.lxp-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.18);
}

.lxp-toggle.is-on {
    background: var(--builder-blue);
}

.lxp-toggle.is-on::after {
    left: 23px;
}

.lxp-canvas-toolbar__info {
    width: 24px;
    justify-content: center;
    color: #64748b;
}

.lxp-zoom-controls {
    top: 16px;
    right: 18px;
}

.lxp-zoom-controls button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: #44546f;
    background: transparent;
}

.lxp-zoom-controls button:hover {
    background: #f1f5ff;
}

.lxp-zoom-controls span {
    min-width: 58px;
    text-align: center;
    font-size: 0.86rem;
    font-weight: 850;
}

.lxp-course-node,
.lxp-map-parent-node,
.lxp-map-child-node,
.lxp-lesson-hero-node,
.lxp-lesson-block {
    border-radius: 8px;
    background: #ffffff;
}

.lxp-course-node--center {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 48%;
    width: 250px;
    min-height: 130px;
    padding: 18px 18px 14px;
    border: 2px solid var(--builder-blue);
    text-align: center;
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 8px rgba(var(--app-primary-rgb, 63, 109, 246), 0.07),
        0 18px 36px rgba(var(--app-primary-rgb, 63, 109, 246), 0.14);
}

.lxp-course-node__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 10px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--builder-blue), var(--builder-purple));
    box-shadow: 0 10px 22px rgba(var(--app-primary-rgb, 63, 109, 246), 0.22);
}

.lxp-course-node strong,
.lxp-course-node small {
    display: block;
}

.lxp-course-node strong {
    color: var(--builder-ink);
    font-size: 1rem;
    line-height: 1.35;
}

.lxp-course-node small {
    margin-top: 4px;
    color: var(--builder-muted);
    font-size: 0.78rem;
}

.lxp-node-drag,
.lxp-node-dots {
    color: #9aa5b8;
}

.lxp-map-branch {
    --branch-color: var(--builder-blue);
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 8px;
    width: 330px;
}

.lxp-map-branch::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 58px;
    width: 190px;
    height: 2px;
    background: var(--branch-color);
    opacity: 0.78;
}

.lxp-map-branch--left-top {
    left: 36px;
    top: 170px;
}

.lxp-map-branch--left-bottom {
    left: 36px;
    bottom: 130px;
}

.lxp-map-branch--right-top {
    right: 36px;
    top: 150px;
}

.lxp-map-branch--right-middle {
    right: 58px;
    top: 350px;
}

.lxp-map-branch--right-bottom {
    right: 36px;
    bottom: 100px;
}

.lxp-map-branch--left-top::before,
.lxp-map-branch--left-bottom::before {
    right: -160px;
    transform: rotate(24deg);
    transform-origin: left center;
}

.lxp-map-branch--right-top::before,
.lxp-map-branch--right-middle::before,
.lxp-map-branch--right-bottom::before {
    left: -160px;
    transform: rotate(-24deg);
    transform-origin: right center;
}

.lxp-map-branch--green {
    --branch-color: var(--builder-green);
}

.lxp-map-branch--teal {
    --branch-color: var(--builder-teal);
}

.lxp-map-branch--orange {
    --branch-color: var(--builder-orange);
}

.lxp-map-branch--rose {
    --branch-color: var(--builder-rose);
}

.lxp-map-parent-node {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    width: 168px;
    min-height: 52px;
    padding: 9px 10px;
    border: 2px solid var(--branch-color);
    color: var(--builder-ink);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.lxp-map-branch--right-top .lxp-map-parent-node,
.lxp-map-branch--right-middle .lxp-map-parent-node,
.lxp-map-branch--right-bottom .lxp-map-parent-node {
    margin-left: auto;
}

.lxp-map-parent-node > i:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--branch-color);
}

.lxp-map-parent-node strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
}

.lxp-map-lesson-list {
    display: grid;
    gap: 8px;
    width: 170px;
}

.lxp-map-branch--right-top .lxp-map-lesson-list,
.lxp-map-branch--right-middle .lxp-map-lesson-list,
.lxp-map-branch--right-bottom .lxp-map-lesson-list {
    margin-left: auto;
}

.lxp-map-child-node {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--branch-color) 55%, #d9e1ec);
    color: #15223a;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.lxp-map-child-node:hover {
    color: var(--branch-color);
    text-decoration: none;
    background: color-mix(in srgb, var(--branch-color) 8%, white);
}

.lxp-map-child-node span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxp-add-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 112px;
    min-height: 32px;
    border: 1px solid color-mix(in srgb, var(--branch-color) 55%, #d9e1ec);
    border-radius: 999px;
    color: var(--branch-color);
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
    text-decoration: none;
}

.lxp-map-branch--right-top .lxp-add-child,
.lxp-map-branch--right-middle .lxp-add-child,
.lxp-map-branch--right-bottom .lxp-add-child {
    margin-left: auto;
    margin-right: 28px;
}

.lxp-add-child:hover {
    color: var(--branch-color);
    background: color-mix(in srgb, var(--branch-color) 8%, white);
    text-decoration: none;
}

.lxp-map-empty {
    position: absolute;
    left: 50%;
    top: 68%;
    display: grid;
    gap: 4px;
    min-width: 220px;
    padding: 14px;
    border: 1px dashed #b8c2d6;
    border-radius: 8px;
    color: #667085;
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
    transform: translateX(-50%);
}

.lxp-node-panel {
    border-left: 1px solid var(--builder-line);
    background: #ffffff;
}

.lxp-node-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid var(--builder-line);
}

.lxp-node-panel__head strong {
    color: var(--builder-ink);
    font-size: 0.92rem;
    font-weight: 900;
}

.lxp-node-panel__head button {
    border: 0;
    color: #44546f;
    background: transparent;
}

.lxp-node-panel__body {
    display: grid;
    gap: 16px;
    padding: 20px 18px;
}

.lxp-panel-label {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 850;
}

.lxp-selected-node {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
}

.lxp-selected-node > span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    color: #ffffff;
    background: var(--builder-blue);
}

.lxp-selected-node strong,
.lxp-selected-node small {
    display: block;
}

.lxp-selected-node strong {
    color: var(--builder-ink);
    font-size: 0.88rem;
    font-weight: 850;
}

.lxp-selected-node small {
    margin-top: 6px;
    width: max-content;
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--builder-blue-strong);
    background: var(--builder-blue-soft);
    font-size: 0.7rem;
    font-weight: 850;
}

.lxp-panel-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.lxp-panel-field span {
    color: #35435c;
    font-size: 0.78rem;
    font-weight: 850;
}

.lxp-panel-field input,
.lxp-panel-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    color: #172033;
    background: #ffffff;
    font-size: 0.82rem;
    resize: vertical;
}

.lxp-panel-field small {
    color: #7a879c;
    font-size: 0.72rem;
}

.lxp-color-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.lxp-color-tags span {
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: var(--tag-color);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.lxp-color-tags span.is-active {
    outline: 2px solid var(--builder-blue);
    outline-offset: 3px;
}

.lxp-panel-tip {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border: 1px solid #dfe6ff;
    border-radius: 8px;
    color: #40506b;
    background: #f6f9ff;
    font-size: 0.78rem;
    line-height: 1.45;
}

.lxp-panel-tip i {
    color: var(--builder-blue-strong);
}

.lxp-lesson-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    min-height: 620px;
}

.lxp-lesson-outline {
    border-right: 1px solid var(--builder-line);
    background: #fbfcff;
}

.lxp-lesson-outline__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 0 16px;
    border-bottom: 1px solid var(--builder-line);
}

.lxp-lesson-outline__head strong {
    color: var(--builder-ink);
    font-size: 0.9rem;
    font-weight: 900;
}

.lxp-lesson-outline__head span {
    color: #667085;
    font-size: 0.74rem;
    font-weight: 850;
}

.lxp-lesson-outline__list {
    display: grid;
    gap: 14px;
    padding: 16px;
    max-height: 560px;
    overflow: auto;
}

.lxp-outline-section {
    display: grid;
    gap: 8px;
}

.lxp-outline-section > span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 0.76rem;
    font-weight: 850;
}

.lxp-outline-lesson {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 9px;
    border: 1px solid #e5eaf2;
    border-radius: 8px;
    color: #26344d;
    background: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.lxp-outline-lesson span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxp-outline-lesson:hover,
.lxp-outline-lesson.is-active {
    color: var(--builder-blue-strong);
    border-color: rgba(var(--app-primary-rgb, 63, 109, 246), 0.18);
    background: var(--builder-blue-soft);
    text-decoration: none;
}

.lxp-lesson-canvas {
    position: relative;
    min-height: 620px;
    padding: 76px 30px 30px;
    background:
        radial-gradient(circle, rgba(86, 101, 130, 0.2) 1px, transparent 1px),
        linear-gradient(180deg, #ffffff, #fbfcff);
    background-size: 22px 22px, auto;
}

.lxp-canvas-toolbar--inline {
    top: 18px;
    left: 30px;
    right: 30px;
    justify-content: space-between;
}

.lxp-lesson-hero-node {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    max-width: 560px;
    margin: 34px auto 28px;
    padding: 18px;
    border: 2px solid var(--builder-blue);
    box-shadow: 0 0 0 8px rgba(var(--app-primary-rgb, 63, 109, 246), 0.07), 0 18px 36px rgba(var(--app-primary-rgb, 63, 109, 246), 0.12);
}

.lxp-lesson-hero-node strong,
.lxp-lesson-hero-node small {
    display: block;
    min-width: 0;
}

.lxp-lesson-hero-node strong {
    overflow-wrap: anywhere;
    color: var(--builder-ink);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1.3;
}

.lxp-lesson-hero-node small {
    margin-top: 4px;
    color: var(--builder-muted);
    font-size: 0.8rem;
}

.lxp-lesson-block-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 0 auto;
}

.lxp-lesson-block {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    border: 1px solid #e5eaf2;
    color: #26344d;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.lxp-lesson-block i {
    color: var(--builder-blue);
    font-size: 1.3rem;
}

.lxp-lesson-block strong {
    color: var(--builder-ink);
    font-size: 0.9rem;
    line-height: 1.3;
}

.lxp-lesson-block span {
    color: var(--builder-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.lxp-lesson-block--primary {
    border-color: #dce4ff;
    background: #f5f7ff;
}

.lxp-lesson-preview-strip {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.lxp-lesson-preview-strip span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid #dce4ff;
    border-radius: 999px;
    color: var(--builder-blue-strong);
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 850;
}

[data-bs-theme="dark"] .lxp-builder-page {
    --builder-ink: #f8fafc;
    --builder-muted: #b8c3d1;
    --builder-line: #253043;
    --builder-soft: #111827;
}

[data-bs-theme="dark"] .lxp-builder-frame,
[data-bs-theme="dark"] .lxp-builder-topbar,
[data-bs-theme="dark"] .lxp-node-panel,
[data-bs-theme="dark"] .lxp-lesson-outline {
    background: #111827;
    border-color: var(--builder-line);
}

[data-bs-theme="dark"] .lxp-map-canvas,
[data-bs-theme="dark"] .lxp-lesson-canvas {
    background:
        radial-gradient(circle, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
        linear-gradient(180deg, #0f172a, #111827);
    background-size: 22px 22px, auto;
}

[data-bs-theme="dark"] .lxp-builder-search,
[data-bs-theme="dark"] .lxp-soft-btn,
[data-bs-theme="dark"] .lxp-canvas-toolbar,
[data-bs-theme="dark"] .lxp-zoom-controls,
[data-bs-theme="dark"] .lxp-course-node,
[data-bs-theme="dark"] .lxp-map-parent-node,
[data-bs-theme="dark"] .lxp-map-child-node,
[data-bs-theme="dark"] .lxp-add-child,
[data-bs-theme="dark"] .lxp-panel-field input,
[data-bs-theme="dark"] .lxp-panel-field textarea,
[data-bs-theme="dark"] .lxp-outline-lesson,
[data-bs-theme="dark"] .lxp-lesson-hero-node,
[data-bs-theme="dark"] .lxp-lesson-block,
[data-bs-theme="dark"] .lxp-lesson-preview-strip span {
    color: #e5edf8;
    background: #172033;
    border-color: #253043;
}

[data-bs-theme="dark"] .lxp-panel-tip,
[data-bs-theme="dark"] .lxp-lesson-block--primary {
    color: #dbe4f0;
    background: #161f34;
    border-color: #33415a;
}

[data-bs-theme="dark"] .lxp-selected-node small {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.18);
}

@media (max-width: 1399.98px) {
    .lxp-builder-topbar {
        grid-template-columns: minmax(220px, auto) minmax(240px, 1fr);
    }

    .lxp-builder-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .lxp-map-shell,
    .lxp-lesson-shell {
        grid-template-columns: 1fr;
    }

    .lxp-node-panel,
    .lxp-lesson-outline {
        border-left: 0;
        border-right: 0;
        border-top: 1px solid var(--builder-line);
    }

    .lxp-lesson-outline {
        order: 2;
    }
}

@media (max-width: 991.98px) {
    .lxp-builder-topbar {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .lxp-builder-actions {
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .lxp-map-canvas,
    .lxp-lesson-canvas {
        min-height: 0;
        padding: 18px;
    }

    .lxp-map-canvas {
        display: grid;
        gap: 14px;
    }

    .lxp-canvas-toolbar,
    .lxp-zoom-controls,
    .lxp-course-node--center,
    .lxp-map-branch {
        position: static;
        transform: none;
    }

    .lxp-course-node--center {
        width: 100%;
    }

    .lxp-map-branch {
        width: 100%;
    }

    .lxp-map-branch::before {
        display: none;
    }

    .lxp-map-parent-node,
    .lxp-map-lesson-list,
    .lxp-map-branch--right-top .lxp-map-parent-node,
    .lxp-map-branch--right-middle .lxp-map-parent-node,
    .lxp-map-branch--right-bottom .lxp-map-parent-node,
    .lxp-map-branch--right-top .lxp-map-lesson-list,
    .lxp-map-branch--right-middle .lxp-map-lesson-list,
    .lxp-map-branch--right-bottom .lxp-map-lesson-list {
        width: 100%;
        margin: 0;
    }

    .lxp-add-child,
    .lxp-map-branch--right-top .lxp-add-child,
    .lxp-map-branch--right-middle .lxp-add-child,
    .lxp-map-branch--right-bottom .lxp-add-child {
        margin: 0;
    }

    .lxp-canvas-toolbar--inline {
        margin-bottom: 16px;
    }

    .lxp-lesson-block-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .lxp-builder-topbar {
        padding: 12px;
    }

    .lxp-builder-actions .lxp-soft-btn,
    .lxp-builder-actions .lxp-primary-btn {
        flex: 1 1 9rem;
    }

    .lxp-builder-search kbd {
        display: none;
    }

    .lxp-lesson-block-grid {
        grid-template-columns: 1fr;
    }

}

/* Functional course curriculum canvas */
.lxp-curriculum-shell {
    grid-template-columns: minmax(0, 1fr) 340px;
    min-height: 680px;
}

.lxp-curriculum-canvas {
    min-height: 680px;
    padding: 22px;
    overflow: auto;
}

.lxp-curriculum-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.lxp-curriculum-toolbar > span:not(.lxp-chip) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--builder-line);
    border-radius: 999px;
    color: #44546f;
    background: rgba(255, 255, 255, 0.92);
    font-size: 0.76rem;
    font-weight: 850;
}

.lxp-curriculum-canvas .lxp-course-node--center {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    width: min(720px, 100%);
    min-height: 96px;
    margin: 0 auto 24px;
    padding: 18px;
    border: 2px solid var(--builder-blue);
    text-align: left;
    transform: none;
    cursor: pointer;
}

.lxp-curriculum-canvas .lxp-course-node--center strong,
.lxp-curriculum-canvas .lxp-course-node--center small {
    overflow-wrap: anywhere;
}

.lxp-curriculum-canvas .lxp-course-node--center .lxp-course-node__icon {
    grid-row: 1 / span 2;
}

.lxp-curriculum-canvas .lxp-course-node--center > strong {
    grid-column: 2;
    grid-row: 1;
}

.lxp-curriculum-canvas .lxp-course-node--center > small {
    grid-column: 2;
    grid-row: 2;
}

.lxp-curriculum-canvas .lxp-course-node--center .lxp-node-drag {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: center;
}

.lxp-curriculum-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
    align-items: start;
}

.lxp-curriculum-section.lxp-map-branch {
    position: relative;
    z-index: auto;
    display: grid;
    gap: 10px;
    width: auto;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.lxp-curriculum-section.lxp-map-branch::before {
    display: none;
}

.lxp-curriculum-section.is-dragging,
.lxp-map-child-node.is-dragging {
    opacity: 0.42;
}

.lxp-curriculum-section.is-filtered {
    display: none;
}

.lxp-curriculum-section .lxp-map-parent-node {
    width: 100%;
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr) 22px;
    border-color: #cfd9f0;
    background: #ffffff;
    cursor: pointer;
}

.lxp-curriculum-section .lxp-map-parent-node span,
.lxp-curriculum-section .lxp-map-child-node span {
    min-width: 0;
}

.lxp-curriculum-section .lxp-map-parent-node strong,
.lxp-curriculum-section .lxp-map-parent-node small,
.lxp-curriculum-section .lxp-map-child-node strong,
.lxp-curriculum-section .lxp-map-child-node small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxp-curriculum-section .lxp-map-parent-node small,
.lxp-curriculum-section .lxp-map-child-node small {
    margin-top: 3px;
    color: var(--builder-muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.lxp-curriculum-section .lxp-map-lesson-list {
    display: grid;
    gap: 8px;
    width: 100%;
    min-height: 42px;
}

.lxp-curriculum-section .lxp-map-child-node {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    width: 100%;
    min-height: 46px;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.lxp-curriculum-section .lxp-map-child-node em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    color: var(--builder-blue-strong);
    background: var(--builder-blue-soft);
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 900;
}

.lxp-builder-node.is-selected,
.lxp-builder-node:focus-visible {
    outline: 3px solid rgba(var(--app-primary-rgb, 63, 109, 246), 0.18);
    outline-offset: 3px;
}

.lxp-curriculum-section .lxp-add-child {
    width: max-content;
    min-height: 34px;
    margin: 0;
    padding: 0 12px;
    cursor: pointer;
}

.lxp-map-empty-node {
    padding: 12px;
    border: 1px dashed #c5cedd;
    border-radius: 8px;
    color: var(--builder-muted);
    background: #fbfcff;
    font-size: 0.78rem;
    font-weight: 750;
}

.lxp-curriculum-canvas .lxp-map-empty {
    position: relative;
    left: auto;
    top: auto;
    display: grid;
    gap: 10px;
    justify-items: center;
    max-width: 360px;
    margin: 34px auto 0;
    transform: none;
}

.lxp-node-panel {
    min-width: 0;
}

.lxp-node-panel__body.lxp-builder-panel {
    display: none;
    max-height: 622px;
    overflow: auto;
}

.lxp-node-panel__body.lxp-builder-panel.is-active {
    display: grid;
}

.lxp-panel-form {
    display: grid;
    gap: 13px;
}

.lxp-panel-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.lxp-panel-field select,
.lxp-panel-field input,
.lxp-panel-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    color: #172033;
    background: #ffffff;
    font-size: 0.82rem;
}

.lxp-panel-field select {
    appearance: auto;
}

.lxp-panel-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    margin: 0;
    color: #35435c;
    font-size: 0.78rem;
    font-weight: 850;
}

.lxp-panel-check input {
    width: 1rem;
    height: 1rem;
}

.lxp-panel-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.lxp-panel-stats span {
    display: grid;
    gap: 2px;
    min-height: 62px;
    padding: 12px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    color: var(--builder-muted);
    background: #fbfcff;
    font-size: 0.72rem;
    font-weight: 800;
}

.lxp-panel-stats strong {
    overflow: hidden;
    color: var(--builder-ink);
    font-size: 1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxp-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.lxp-panel-actions .lxp-soft-btn,
.lxp-panel-actions .lxp-primary-btn,
.lxp-panel-actions .lxp-danger-btn,
.lxp-panel-form .lxp-soft-btn,
.lxp-panel-form .lxp-primary-btn {
    width: max-content;
    min-width: 0;
    border: 0;
}

.lxp-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #ffd4dc;
    border-radius: 8px;
    color: #c91f45;
    background: #fff4f6;
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
}

.lxp-danger-btn:hover {
    color: #a81637;
    background: #ffe9ee;
}

.lxp-panel-rule {
    height: 1px;
    background: var(--builder-line);
}

.lxp-save-state.is-dirty i {
    color: #ff941f;
}

[data-bs-theme="dark"] .lxp-curriculum-toolbar > span:not(.lxp-chip),
[data-bs-theme="dark"] .lxp-curriculum-section.lxp-map-branch,
[data-bs-theme="dark"] .lxp-curriculum-section .lxp-map-parent-node,
[data-bs-theme="dark"] .lxp-map-empty-node,
[data-bs-theme="dark"] .lxp-panel-field select,
[data-bs-theme="dark"] .lxp-panel-field input,
[data-bs-theme="dark"] .lxp-panel-field textarea,
[data-bs-theme="dark"] .lxp-panel-stats span {
    color: #e5edf8;
    background: #172033;
    border-color: #253043;
}

[data-bs-theme="dark"] .lxp-curriculum-section .lxp-map-child-node em {
    color: #bfdbfe;
    background: rgba(96, 165, 250, 0.18);
}

@media (max-width: 1399.98px) {
    .lxp-curriculum-shell {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

    .lxp-curriculum-flow {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199.98px) {
    .lxp-curriculum-shell {
        grid-template-columns: 1fr;
    }

    .lxp-node-panel__body.lxp-builder-panel {
        max-height: none;
    }
}

@media (max-width: 767.98px) {
    .lxp-curriculum-canvas {
        padding: 16px;
    }

    .lxp-curriculum-canvas .lxp-course-node--center,
    .lxp-panel-field-grid,
    .lxp-panel-stats {
        grid-template-columns: 1fr;
    }

    .lxp-course-node__icon {
        margin-bottom: 0;
    }

    .lxp-curriculum-canvas .lxp-course-node--center .lxp-course-node__icon,
    .lxp-curriculum-canvas .lxp-course-node--center > strong,
    .lxp-curriculum-canvas .lxp-course-node--center > small,
    .lxp-curriculum-canvas .lxp-course-node--center .lxp-node-drag {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }
}

/* Course create/edit wizard */
.lxp-course-wizard {
    --builder-ink: #071126;
    --builder-muted: #667085;
    --builder-line: #dfe6f1;
    --builder-soft: #f7f9fc;
    --builder-blue: var(--bs-primary, #3f6df6);
    --builder-blue-strong: color-mix(in srgb, var(--bs-primary, #3f6df6) 84%, #000000);
    --builder-blue-soft: rgba(var(--app-primary-rgb, 63, 109, 246), 0.09);
    --builder-green: #16a66a;
    --builder-teal: #18aeb2;
    --builder-orange: #ff941f;
    --builder-rose: #f05273;
    --builder-purple: color-mix(in srgb, var(--bs-primary, #3f6df6) 68%, var(--bs-secondary, #7657e8));
    overflow: hidden;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
}

body.admin-layout:has(.lxp-course-wizard) {
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto;
}

body.admin-layout:has(.lxp-course-wizard) .main-content {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    overflow: visible;
}

.lxp-course-wizard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--builder-line);
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 63, 109, 246), 0.07), rgba(var(--app-secondary-rgb, 115, 115, 115), 0.04)),
        #ffffff;
}

.lxp-course-wizard__head h2 {
    margin: 4px 0 6px;
    color: var(--builder-ink);
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.25;
}

.lxp-course-wizard__head p {
    max-width: 720px;
    margin: 0;
    color: var(--builder-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.lxp-course-wizard__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 240px;
}

.lxp-course-wizard__status > span:not(.lxp-save-state) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--builder-line);
    border-radius: 999px;
    color: var(--builder-muted);
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.76rem;
    font-weight: 850;
}

.lxp-course-wizard__status strong {
    color: var(--builder-ink);
    font-size: 0.9rem;
}

.lxp-course-wizard__layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    min-height: 720px;
}

.lxp-course-wizard__rail {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 18px 14px;
    border-right: 1px solid var(--builder-line);
    background: #fbfcff;
}

.lxp-course-wizard__rail button {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 60px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #44546f;
    background: transparent;
    text-align: left;
}

.lxp-course-wizard__rail button > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    color: #65728a;
    background: #ffffff;
    border: 1px solid var(--builder-line);
}

.lxp-course-wizard__rail strong,
.lxp-course-wizard__rail small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lxp-course-wizard__rail strong {
    color: var(--builder-ink);
    font-size: 0.84rem;
    font-weight: 900;
}

.lxp-course-wizard__rail small {
    margin-top: 4px;
    color: var(--builder-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.lxp-course-wizard__rail button:hover,
.lxp-course-wizard__rail button.is-active {
    border-color: rgba(var(--app-primary-rgb, 63, 109, 246), 0.18);
    color: var(--builder-blue-strong);
    background: var(--builder-blue-soft);
}

.lxp-course-wizard__rail button.is-active {
    box-shadow: inset 3px 0 0 var(--builder-blue);
}

.lxp-course-wizard__rail button.is-active > i,
.lxp-course-wizard__rail button.is-complete > i {
    color: #ffffff;
    background: linear-gradient(135deg, var(--builder-blue), var(--builder-purple));
    border-color: transparent;
}

.lxp-course-wizard__stage {
    min-width: 0;
    padding: 22px;
}

.lxp-wizard-panel {
    display: none;
}

.lxp-wizard-panel.is-active {
    display: block;
}

.lxp-wizard-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.lxp-wizard-panel__head h3 {
    margin: 4px 0 6px;
    color: var(--builder-ink);
    font-size: 1.05rem;
    font-weight: 900;
}

.lxp-wizard-panel__head p {
    margin: 0;
    color: var(--builder-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.lxp-wizard-panel__head > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--builder-blue), var(--builder-purple));
    box-shadow: 0 12px 22px rgba(var(--app-primary-rgb, 63, 109, 246), 0.16);
}

.lxp-course-wizard__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--builder-line);
}

.lxp-draft-gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--app-primary-rgb, 63, 109, 246), 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 63, 109, 246), 0.09), rgba(var(--app-secondary-rgb, 115, 115, 115), 0.05)),
        #ffffff;
}

.lxp-draft-gate h4 {
    margin: 4px 0 6px;
    color: var(--builder-ink);
    font-size: 0.98rem;
    font-weight: 900;
}

.lxp-draft-gate p {
    max-width: 820px;
    margin: 0;
    color: var(--builder-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.lxp-wizard-studio-layout {
    display: grid;
    grid-template-columns: minmax(520px, 0.9fr) minmax(520px, 1.1fr);
    gap: 16px;
    align-items: start;
}

.lxp-wizard-canvas-shell {
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 680px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    overflow: hidden;
}

.lxp-wizard-canvas-shell .lxp-curriculum-canvas,
.lxp-wizard-canvas-shell .lxp-node-panel {
    min-height: 680px;
}

.lxp-wizard-canvas-shell .lxp-curriculum-toolbar {
    position: relative;
    z-index: 2;
}

.lxp-wizard-canvas-shell .lxp-curriculum-flow {
    grid-template-columns: 1fr;
}

.lxp-curriculum-section.is-selected {
    border-color: rgba(var(--app-primary-rgb, 63, 109, 246), 0.32);
}

.lxp-map-child-node.is-ready {
    border-color: rgba(22, 101, 52, 0.24);
    background: #f3fbf6;
}

.lxp-map-child-node.is-draft em {
    color: var(--lxp-warning);
    background: #fff7ed;
}

.lxp-wizard-studio-pane {
    min-width: 0;
    max-height: 78vh;
    overflow: auto;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.lxp-wizard-studio-empty,
.lxp-wizard-studio-loading {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 680px;
    padding: 28px;
    color: var(--builder-muted);
    text-align: center;
}

.lxp-wizard-studio-empty strong,
.lxp-wizard-studio-loading span {
    color: var(--builder-ink);
    font-size: 0.95rem;
    font-weight: 900;
}

.lxp-wizard-studio-empty > span:last-child {
    max-width: 520px;
    font-size: 0.84rem;
    line-height: 1.55;
}

.lxp-wizard-studio-loading i {
    color: var(--builder-blue);
    font-size: 1.5rem;
    animation: lxp-spin 900ms linear infinite;
}

@keyframes lxp-spin {
    to {
        transform: rotate(360deg);
    }
}

.lxp-lesson-studio-embed {
    padding: 0;
}

.lxp-lesson-studio-embed .lxp-builder-frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.lxp-lesson-studio-embed .lxp-builder-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.lxp-lesson-studio-embed .lxp-lesson-shell {
    grid-template-columns: 220px minmax(0, 1fr);
}

.lxp-lesson-studio-embed .lxp-node-panel--lesson {
    display: none;
}

.lxp-lesson-studio-embed .row {
    --bs-gutter-x: 0.9rem;
}

.lxp-soft-btn--danger,
.lxp-soft-btn--danger:hover {
    color: #c91f45;
    background: #fff4f6;
}

.lxp-review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 16px;
}

.lxp-review-card {
    display: grid;
    gap: 12px;
    min-height: 180px;
    padding: 16px;
    border: 1px solid var(--builder-line);
    border-radius: 8px;
    background: #ffffff;
}

.lxp-review-card--primary {
    background:
        linear-gradient(135deg, rgba(var(--app-primary-rgb, 63, 109, 246), 0.08), rgba(var(--app-secondary-rgb, 115, 115, 115), 0.04)),
        #ffffff;
}

.lxp-review-card > strong {
    color: var(--builder-ink);
    font-size: 1.08rem;
    font-weight: 900;
    line-height: 1.3;
}

.lxp-review-card p {
    margin: 0;
    color: var(--builder-muted);
    font-size: 0.84rem;
    line-height: 1.5;
}

.lxp-review-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
}

.lxp-review-card dl > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #edf1f6;
}

.lxp-review-card dt {
    color: var(--builder-muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.lxp-review-card dd {
    margin: 0;
    color: var(--builder-ink);
    font-size: 0.82rem;
    font-weight: 850;
    text-align: right;
}

.lxp-readiness-list {
    display: grid;
    gap: 9px;
}

.lxp-readiness-list > div {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--builder-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.lxp-readiness-list > div.is-passed {
    color: #166534;
}

.lxp-readiness-list i {
    color: currentColor;
}

[data-bs-theme="dark"] .lxp-course-wizard {
    --builder-ink: #f8fafc;
    --builder-muted: #b8c3d1;
    --builder-line: #253043;
    --builder-soft: #111827;
    background: #111827;
}

[data-bs-theme="dark"] .lxp-course-wizard__head,
[data-bs-theme="dark"] .lxp-course-wizard__rail,
[data-bs-theme="dark"] .lxp-course-wizard__status > span:not(.lxp-save-state),
[data-bs-theme="dark"] .lxp-review-card {
    color: #e5edf8;
    background: #111827;
    border-color: var(--builder-line);
}

@media (max-width: 1199.98px) {
    .lxp-course-wizard__layout,
    .lxp-wizard-studio-layout,
    .lxp-wizard-canvas-shell,
    .lxp-review-grid {
        grid-template-columns: 1fr;
    }

    .lxp-wizard-studio-pane {
        max-height: none;
    }

    .lxp-course-wizard__rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-right: 0;
        border-bottom: 1px solid var(--builder-line);
    }
}

@media (max-width: 767.98px) {
    .lxp-course-wizard__head,
    .lxp-wizard-panel__head,
    .lxp-course-wizard__nav {
        flex-direction: column;
    }

    .lxp-course-wizard__status,
    .lxp-course-wizard__nav .lxp-soft-btn,
    .lxp-course-wizard__nav .lxp-primary-btn {
        width: 100%;
    }

    .lxp-course-wizard__rail {
        grid-template-columns: 1fr;
    }

    .lxp-course-wizard__stage {
        padding: 16px;
    }

    .lxp-draft-gate {
        align-items: stretch;
        flex-direction: column;
    }

    .lxp-lesson-studio-embed .lxp-lesson-shell {
        grid-template-columns: 1fr;
    }
}

/* Course Studio */
.lxp-course-starter-page,
.lxp-course-studio-page,
.lxp-course-assessment-page {
    --studio-surface: #ffffff;
    --studio-muted: #f4f7fb;
    --studio-line: #dce3eb;
    --studio-ink: #172033;
    --studio-secondary: #687386;
    --studio-accent: #106a70;
}

.lxp-course-starter {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    min-height: 520px;
    overflow: hidden;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: 8px;
}

.lxp-course-starter__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 6vw, 72px);
    color: #edf9f7;
    background: #163c43;
}

.lxp-course-starter__intro h1,
.lxp-course-starter__form h2,
.lxp-course-studio h1,
.lxp-studio-workbench-head h2,
.lxp-course-assessment-header h1 {
    margin: 8px 0 12px;
    color: inherit;
    font-weight: 700;
    letter-spacing: 0;
}

.lxp-course-starter__intro h1 { font-size: 2.25rem; line-height: 1.1; }
.lxp-course-starter__intro p { max-width: 35rem; margin: 0; color: #b8d6d3; font-size: 1rem; line-height: 1.65; }
.lxp-course-starter__steps { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; color: #d6eeea; }
.lxp-course-starter__steps span { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; }
.lxp-course-starter__steps i { color: #7dd3c7; font-size: 1.125rem; }
.lxp-course-starter__form { padding: clamp(28px, 5vw, 56px); }
.lxp-course-starter__form-head,
.lxp-course-starter__form-footer,
.lxp-studio-panel__head,
.lxp-studio-workbench-head,
.lxp-course-assessment-header,
.lxp-course-assessment-header__stats,
.lxp-studio-assessment-callout,
.lxp-course-studio__readiness-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lxp-course-starter__form-head { margin-bottom: 28px; color: var(--studio-ink); }
.lxp-course-starter__form-head h2 { font-size: 1.35rem; }
.lxp-course-starter__form-head > i { font-size: 2rem; color: var(--studio-accent); }
.lxp-course-starter__form-footer { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--studio-line); }
.lxp-course-starter__form-footer p { max-width: 18rem; margin: 0; color: var(--studio-secondary); font-size: .875rem; }

.lxp-course-studio { overflow: hidden; background: var(--studio-surface); border: 1px solid var(--studio-line); border-radius: 8px; }
.lxp-course-studio__topbar { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(260px, 400px) auto; align-items: center; gap: 24px; padding: 18px 22px; border-bottom: 1px solid var(--studio-line); }
.lxp-course-studio__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lxp-course-studio__title h1 { max-width: 28rem; overflow: hidden; color: var(--studio-ink); font-size: 1.2rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.lxp-course-studio__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.lxp-course-studio__nav { display: flex; gap: 2px; padding: 0 22px; border-bottom: 1px solid var(--studio-line); background: #fbfcfd; }
.lxp-course-studio__nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; color: var(--studio-secondary); border-bottom: 2px solid transparent; font-size: .875rem; font-weight: 700; }
.lxp-course-studio__nav a:hover,
.lxp-course-studio__nav a.is-active { color: var(--studio-accent); border-bottom-color: var(--studio-accent); }
.lxp-course-studio__body { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; min-height: 700px; }
.lxp-course-studio__outline { min-width: 0; padding: 16px 12px; background: #fbfcfd; border-right: 1px solid var(--studio-line); }
.lxp-course-studio__outline-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 14px; }
.lxp-course-studio__outline-head strong { display: block; color: var(--studio-ink); font-size: .92rem; }
.lxp-course-studio__outline-head span { display: block; margin-top: 2px; color: var(--studio-secondary); font-size: .72rem; }
.lxp-studio-outline-course,
.lxp-studio-outline-section__head,
.lxp-studio-outline-lesson { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; color: #39465a; border-radius: 5px; }
.lxp-studio-outline-course { padding: 10px; margin-bottom: 8px; background: #eef5f5; font-size: .82rem; font-weight: 700; }
.lxp-studio-outline-course.is-selected,
.lxp-studio-outline-section__head.is-selected,
.lxp-studio-outline-lesson.is-selected { color: #0c565c; background: #dff2ef; }
.lxp-course-studio__outline-list { display: grid; gap: 8px; }
.lxp-studio-outline-section { padding: 3px; border: 1px solid transparent; border-radius: 6px; }
.lxp-studio-outline-section.is-dragging,
.lxp-studio-outline-lesson.is-dragging { opacity: .45; }
.lxp-studio-outline-section.is-filtered { display: none; }
.lxp-studio-outline-section__head { padding: 8px 7px; font-size: .8rem; font-weight: 700; }
.lxp-studio-outline-section__head > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxp-studio-outline-section__head small { display: grid; min-width: 18px; height: 18px; place-items: center; color: #4b6274; background: #e8edf3; border-radius: 50%; font-size: .65rem; }
.lxp-studio-drag-handle { color: #9aa6b5; }
.lxp-studio-outline-lessons { display: grid; gap: 2px; padding-left: 16px; }
.lxp-studio-outline-lesson { padding: 7px 8px; font-size: .77rem; }
.lxp-studio-outline-lesson > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lxp-studio-outline-lesson em { width: 7px; height: 7px; border-radius: 50%; }
.lxp-studio-outline-lesson em.is-ready { background: #1d9a6c; }.lxp-studio-outline-lesson em.is-draft { background: #d89b29; }
.lxp-studio-outline-empty { display: grid; gap: 6px; padding: 28px 14px; color: var(--studio-secondary); text-align: center; font-size: .78rem; }.lxp-studio-outline-empty i { color: var(--studio-accent); font-size: 1.6rem; }.lxp-studio-outline-empty strong { color: var(--studio-ink); }

.lxp-course-studio__workbench { min-width: 0; padding: 28px; background: #fff; }
.lxp-studio-workbench-head { align-items: flex-start; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--studio-line); color: var(--studio-ink); }.lxp-studio-workbench-head h2 { font-size: 1.5rem; }.lxp-studio-workbench-head p { max-width: 50rem; margin: 0; color: var(--studio-secondary); }.lxp-studio-workbench-head > i { color: #197076; font-size: 2rem; }
.lxp-studio-form-section { padding: 22px 0; border-bottom: 1px solid var(--studio-line); }.lxp-studio-form-section > div:first-child { margin-bottom: 17px; }.lxp-studio-form-section h3 { margin: 4px 0 0; color: var(--studio-ink); font-size: 1rem; }
.lxp-studio-form-save { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 22px; color: var(--studio-secondary); font-size: .84rem; }
.lxp-studio-ai-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }.lxp-studio-ai-actions .lxp-soft-btn { font-size: .72rem; }
.lxp-studio-panel { padding: 20px; margin-bottom: 18px; border: 1px solid var(--studio-line); border-radius: 6px; background: #fff; }.lxp-studio-panel__head { margin-bottom: 18px; color: var(--studio-ink); }.lxp-studio-panel__head h3,.lxp-studio-panel__head h2 { margin: 4px 0 0; font-size: 1rem; }.lxp-studio-panel__head > i { color: var(--studio-accent); font-size: 1.45rem; }.lxp-studio-panel--compact { padding-bottom: 16px; }.lxp-studio-panel--embedded { overflow: hidden; padding: 0; }.lxp-studio-panel--embedded > .lxp-studio-panel__head { padding: 18px 20px; margin: 0; border-bottom: 1px solid var(--studio-line); }
.lxp-studio-curriculum-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px; margin-bottom: 18px; background: var(--studio-muted); border: 1px solid var(--studio-line); border-radius: 6px; }.lxp-studio-curriculum-overview div { display: grid; gap: 3px; padding: 4px 10px; border-left: 2px solid #92ccc6; }.lxp-studio-curriculum-overview strong { color: var(--studio-ink); font-size: 1.35rem; }.lxp-studio-curriculum-overview span { color: var(--studio-secondary); font-size: .75rem; }
.lxp-studio-assessment-callout { align-items: flex-start; padding: 22px; border: 1px solid #b8dcd8; border-radius: 6px; background: #eef8f6; }.lxp-studio-assessment-callout > div { display: flex; gap: 14px; }.lxp-studio-assessment-callout > div > i { color: #0c6a70; font-size: 1.55rem; }.lxp-studio-assessment-callout h3 { margin: 4px 0; color: var(--studio-ink); font-size: 1rem; }.lxp-studio-assessment-callout p { margin: 0; color: #52706f; font-size: .84rem; }
.lxp-embedded-studio { min-height: 340px; }.lxp-embedded-studio__loading { display: grid; place-items: center; min-height: 340px; color: var(--studio-secondary); }.lxp-embedded-studio__loading i { margin-right: 8px; }

.lxp-course-studio__readiness { padding: 20px 16px; background: #fbfcfd; border-left: 1px solid var(--studio-line); }.lxp-course-studio__readiness-head { align-items: flex-start; padding: 2px 4px 18px; border-bottom: 1px solid var(--studio-line); }.lxp-course-studio__readiness-head h2 { margin: 4px 0; color: var(--studio-ink); font-size: 1.5rem; }.lxp-course-studio__readiness-head p { max-width: 10rem; margin: 0; color: var(--studio-secondary); font-size: .74rem; line-height: 1.45; }.lxp-readiness-ring { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; background: conic-gradient(#18797c calc(var(--readiness) * 1%), #dfe7ed 0); }.lxp-readiness-ring::before { grid-area: 1 / 1; width: 44px; height: 44px; content: ''; background: #fbfcfd; border-radius: 50%; }.lxp-readiness-ring span { grid-area: 1 / 1; z-index: 1; color: var(--studio-ink); font-size: .72rem; font-weight: 800; }
.lxp-course-studio__readiness-list { display: grid; gap: 3px; padding: 16px 0; }.lxp-course-studio__readiness-list > div { display: flex; align-items: flex-start; gap: 8px; padding: 8px 4px; }.lxp-course-studio__readiness-list i { margin-top: 2px; }.lxp-course-studio__readiness-list strong,.lxp-course-studio__readiness-list small { display: block; }.lxp-course-studio__readiness-list strong { color: var(--studio-ink); font-size: .78rem; }.lxp-course-studio__readiness-list small { margin-top: 2px; color: var(--studio-secondary); font-size: .68rem; line-height: 1.35; }.lxp-course-studio__readiness-list .is-passed i { color: #1b956a; }.lxp-course-studio__readiness-list .is-blocked i { color: #c98321; }
.lxp-course-studio__warnings { padding: 14px 4px; border-top: 1px solid var(--studio-line); }.lxp-course-studio__warnings p { display: flex; gap: 6px; margin: 9px 0 0; color: var(--studio-secondary); font-size: .7rem; line-height: 1.35; }.lxp-course-studio__warnings i { color: #bd8525; }.lxp-course-studio__warnings strong { display: block; color: var(--studio-ink); font-size: .72rem; }.lxp-course-studio__publish-action { padding: 16px 4px 0; margin-top: 4px; border-top: 1px solid var(--studio-line); }

.lxp-course-assessment-header { align-items: flex-end; padding: 28px 32px; margin-bottom: 18px; color: #eafff9; background: #163c43; border-radius: 7px; }.lxp-course-assessment-header h1 { font-size: 1.7rem; }.lxp-course-assessment-header p { max-width: 45rem; margin: 0; color: #b8d6d3; }.lxp-course-assessment-header .lxp-icon-btn { margin-bottom: 14px; color: #eafff9; border-color: #4d777a; }.lxp-course-assessment-header__stats { flex-wrap: wrap; }.lxp-course-assessment-header__stats span { display: grid; gap: 2px; min-width: 84px; padding-left: 13px; border-left: 2px solid #7dd3c7; color: #b8d6d3; font-size: .72rem; }.lxp-course-assessment-header__stats strong { color: #fff; font-size: 1rem; }.lxp-course-assessment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }.lxp-studio-panel--wide { max-width: 980px; }.lxp-question-list { display: grid; gap: 8px; }.lxp-question-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px; background: var(--studio-muted); border-radius: 5px; }.lxp-question-list article > span { display: grid; width: 24px; height: 24px; place-items: center; color: #0d5c61; background: #d8eeeb; border-radius: 50%; font-size: .7rem; font-weight: 800; }.lxp-question-list strong,.lxp-question-list small { display: block; }.lxp-question-list strong { color: var(--studio-ink); font-size: .8rem; }.lxp-question-list small { margin-top: 3px; color: var(--studio-secondary); font-size: .7rem; }

@media (max-width: 1199.98px) { .lxp-course-studio__body { grid-template-columns: 250px minmax(0, 1fr); }.lxp-course-studio__readiness { grid-column: 1 / -1; border-top: 1px solid var(--studio-line); border-left: 0; }.lxp-course-studio__readiness-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }.lxp-course-starter { grid-template-columns: 1fr; }.lxp-course-starter__intro { min-height: 260px; }.lxp-course-assessment-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .lxp-course-studio__topbar { grid-template-columns: 1fr; gap: 14px; padding: 16px; }.lxp-course-studio__search { max-width: none; }.lxp-course-studio__actions { justify-content: flex-start; flex-wrap: wrap; }.lxp-course-studio__nav { padding: 0 12px; overflow-x: auto; }.lxp-course-studio__body { grid-template-columns: 1fr; }.lxp-course-studio__outline { border-right: 0; border-bottom: 1px solid var(--studio-line); }.lxp-course-studio__workbench { padding: 18px; }.lxp-course-studio__readiness-list,.lxp-studio-curriculum-overview { grid-template-columns: 1fr 1fr; }.lxp-studio-workbench-head,.lxp-studio-form-save,.lxp-course-starter__form-footer,.lxp-studio-assessment-callout,.lxp-course-assessment-header { align-items: stretch; flex-direction: column; }.lxp-course-starter__form { padding: 28px 20px; }.lxp-course-assessment-header { padding: 24px; }.lxp-course-starter__intro h1 { font-size: 1.8rem; } }

/* Professional workspace refinement */
.lxp-course-studio-page {
    --studio-surface: #ffffff;
    --studio-muted: #f7f9fc;
    --studio-line: #e3e8ef;
    --studio-ink: #172033;
    --studio-secondary: #667085;
    --studio-accent: var(--bs-primary, #2563eb);
}

.lxp-course-studio-page .lxp-course-studio {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
}

.lxp-course-studio-page .lxp-course-studio__topbar {
    min-height: 82px;
    padding: 16px 20px;
    background: var(--studio-surface);
}

.lxp-course-studio-page .lxp-course-studio__title h1 {
    margin: 3px 0 4px;
    font-size: 1.12rem;
    font-weight: 760;
    letter-spacing: -.025em;
}

.lxp-course-studio-page .lxp-save-state {
    color: var(--studio-secondary);
    font-size: .68rem;
    font-weight: 650;
}

.lxp-course-studio-page .lxp-save-state i {
    color: #12b76a;
    font-size: .42rem;
    vertical-align: middle;
}

.lxp-course-studio-page .lxp-course-studio__nav {
    gap: 18px;
    padding: 0 22px;
    background: var(--studio-muted);
}

.lxp-course-studio-page .lxp-course-studio__nav a {
    min-height: 50px;
    padding: 0 2px;
    color: var(--studio-secondary);
    border-bottom-width: 2px;
    font-size: .79rem;
    font-weight: 680;
}

.lxp-course-studio-page .lxp-course-studio__nav a:hover,
.lxp-course-studio-page .lxp-course-studio__nav a.is-active {
    color: var(--studio-accent);
}

.lxp-course-studio-page .lxp-course-studio__body {
    grid-template-columns: 292px minmax(0, 1fr) 304px;
}

.lxp-course-studio-page .lxp-course-studio__outline,
.lxp-course-studio-page .lxp-course-studio__readiness {
    background: var(--studio-muted);
}

.lxp-course-studio-page .lxp-course-studio__outline {
    padding: 18px 12px;
}

.lxp-course-studio-page .lxp-studio-outline-course,
.lxp-course-studio-page .lxp-studio-outline-section__head,
.lxp-course-studio-page .lxp-studio-outline-lesson {
    min-height: 36px;
    color: #475467;
    border: 1px solid transparent;
    border-radius: 7px;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.lxp-course-studio-page .lxp-studio-outline-course {
    background: var(--studio-surface);
    border-color: var(--studio-line);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.lxp-course-studio-page .lxp-studio-outline-course:hover,
.lxp-course-studio-page .lxp-studio-outline-section__head:hover,
.lxp-course-studio-page .lxp-studio-outline-lesson:hover {
    color: var(--studio-accent);
    background: color-mix(in srgb, var(--studio-accent) 5%, var(--studio-surface));
}

.lxp-course-studio-page .lxp-studio-outline-course.is-selected,
.lxp-course-studio-page .lxp-studio-outline-section__head.is-selected,
.lxp-course-studio-page .lxp-studio-outline-lesson.is-selected {
    color: color-mix(in srgb, var(--studio-accent) 85%, #000);
    border-color: color-mix(in srgb, var(--studio-accent) 20%, var(--studio-line));
    background: color-mix(in srgb, var(--studio-accent) 9%, var(--studio-surface));
}

.lxp-course-studio-page .lxp-studio-outline-section {
    padding: 2px;
    border-radius: 9px;
}

.lxp-course-studio-page .lxp-studio-outline-lessons {
    gap: 3px;
    padding: 3px 0 3px 14px;
}

.lxp-course-studio-page .lxp-course-studio__workbench {
    padding: 30px clamp(22px, 3vw, 38px);
    background: var(--studio-surface);
}

.lxp-course-studio-page .lxp-studio-workbench-head {
    margin-bottom: 8px;
    padding-bottom: 24px;
}

.lxp-course-studio-page .lxp-studio-workbench-head h2 {
    margin-bottom: 7px;
    font-size: 1.45rem;
    font-weight: 740;
    letter-spacing: -.035em;
}

.lxp-course-studio-page .lxp-studio-workbench-head p {
    font-size: .84rem;
    line-height: 1.6;
}

.lxp-course-studio-page .lxp-studio-form-section {
    padding: 26px 0;
}

.lxp-course-studio-page .lxp-studio-panel,
.lxp-course-studio-page .lxp-studio-curriculum-overview,
.lxp-course-studio-page .lxp-studio-assessment-callout {
    border-radius: 10px;
}

.lxp-course-studio-page .lxp-studio-panel {
    border-color: var(--studio-line);
    background: var(--studio-surface);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.lxp-course-studio-page .lxp-studio-curriculum-overview {
    gap: 0;
    padding: 16px 10px;
}

.lxp-course-studio-page .lxp-studio-curriculum-overview div {
    padding: 5px 14px;
    border-left-color: color-mix(in srgb, var(--studio-accent) 42%, var(--studio-line));
}

.lxp-course-studio-page .lxp-course-studio__readiness {
    padding: 20px 18px;
}

.lxp-course-studio-page .lxp-course-studio__readiness-list > div {
    padding: 9px 6px;
    border-radius: 7px;
}

.lxp-course-studio-page .lxp-course-studio__readiness-list > div:hover {
    background: var(--studio-surface);
}

.lxp-course-studio-page .lxp-readiness-ring {
    width: 60px;
    height: 60px;
    background: conic-gradient(var(--studio-accent) calc(var(--readiness) * 1%), var(--studio-line) 0);
}

.lxp-course-studio-page .lxp-readiness-ring::before {
    width: 48px;
    height: 48px;
    background: var(--studio-muted);
}

html[data-bs-theme="dark"] .lxp-course-studio-page {
    --studio-surface: #151e2e;
    --studio-muted: #111827;
    --studio-line: #293548;
    --studio-ink: #f0f4fa;
    --studio-secondary: #9eacc0;
    --studio-accent: #7aa2ff;
}

html[data-bs-theme="dark"] .lxp-course-studio-page .lxp-studio-outline-course,
html[data-bs-theme="dark"] .lxp-course-studio-page .lxp-studio-outline-section__head,
html[data-bs-theme="dark"] .lxp-course-studio-page .lxp-studio-outline-lesson {
    color: #c3cedd;
}

html[data-bs-theme="dark"] .lxp-course-studio-page .lxp-studio-assessment-callout {
    color: var(--studio-ink);
    border-color: #315b5d;
    background: #152c31;
}

@media (max-width: 1199.98px) {
    .lxp-course-studio-page .lxp-course-studio__body { grid-template-columns: 260px minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .lxp-course-studio-page .lxp-course-studio { border-radius: 10px; }
    .lxp-course-studio-page .lxp-course-studio__nav { gap: 16px; padding: 0 14px; }
    .lxp-course-studio-page .lxp-course-studio__body { grid-template-columns: 1fr; }
    .lxp-course-studio-page .lxp-course-studio__workbench { padding: 22px 18px; }
}