/*
 * Community Line Portal modern frontend layer.
 * Loaded after the original template CSS to polish the existing Blade views.
 */
:root {
    --clp-primary: #5624d0;
    --clp-primary-dark: #401b9c;
    --clp-accent: #f6b100;
    --clp-ink: #101828;
    --clp-muted: #667085;
    --clp-border: #eaecf0;
    --clp-soft: #f8f9fb;
    --clp-shadow: 0 18px 50px rgba(16, 24, 40, .10);
    --clp-shadow-sm: 0 10px 30px rgba(16, 24, 40, .08);
}

body {
    background: #fff;
    color: var(--clp-ink);
    font-family: Inter, Arial, sans-serif;
}

a,
.text-color {
    color: var(--clp-primary);
}

a:hover {
    color: var(--clp-primary-dark);
}

.theme-btn,
.btn.theme-btn {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    border-radius: 10px;
    box-shadow: none;
    font-weight: 800;
    letter-spacing: -.01em;
}

.theme-btn:hover,
.btn.theme-btn:hover {
    background: var(--clp-primary-dark);
    border-color: var(--clp-primary-dark);
}

.theme-btn-white,
.btn.theme-btn-white {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid var(--clp-border);
}

.theme-btn-transparent,
.btn.theme-btn-transparent {
    background: #fff;
    color: var(--clp-primary);
    border: 1px solid rgba(86, 36, 208, .25);
}

.section--padding {
    padding: 84px 0;
}

.section-heading .section__title,
.section__title {
    color: var(--clp-ink);
    font-weight: 850;
    letter-spacing: -.04em;
}

.section-divider {
    background: var(--clp-primary);
}

.bg-gray {
    background: var(--clp-soft) !important;
}

.ribbon,
.ribbon-lg {
    background: rgba(86, 36, 208, .10);
    color: var(--clp-primary);
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .01em;
}

.header-menu-area {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 1px 0 rgba(16, 24, 40, .08);
}

.header-top {
    background: #f9fafb;
}

.header-menu-content {
    min-height: 74px;
}

.header-menu-content .form-control,
.clp-search-input {
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f9fafb;
    height: 46px;
}

.main-menu ul li a,
.menu-category ul li a {
    color: var(--clp-ink);
    font-weight: 750;
}

.main-menu ul li a:hover,
.menu-category ul li a:hover {
    color: var(--clp-primary);
}

.card,
.card-item,
.clp-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.card-item {
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.card-item:hover {
    transform: translateY(-4px);
    border-color: rgba(86, 36, 208, .22);
    box-shadow: var(--clp-shadow);
}

.clp-shell {
    background:
        radial-gradient(circle at 5% 10%, rgba(246, 177, 0, .22), transparent 30%),
        radial-gradient(circle at 85% 0%, rgba(86, 36, 208, .24), transparent 32%),
        linear-gradient(135deg, #160b36 0%, #2a1166 48%, #5624d0 100%);
    color: #fff;
    overflow: hidden;
    position: relative;
}

.clp-shell:before,
.clp-shell:after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}

.clp-shell:before {
    width: 300px;
    height: 300px;
    right: -110px;
    top: 70px;
}

.clp-shell:after {
    width: 180px;
    height: 180px;
    left: 48%;
    bottom: -70px;
}

.clp-shell > .container {
    position: relative;
    z-index: 1;
}

.clp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    font-weight: 850;
    font-size: 14px;
}

.clp-hero-title {
    color: #fff;
    font-size: clamp(42px, 6vw, 72px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.065em;
}

.clp-hero-copy {
    color: rgba(255, 255, 255, .84);
    font-size: 19px;
    line-height: 1.75;
}

.clp-hero-search {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .22);
    padding: 10px;
}

.clp-hero-search .form-control {
    border: 0;
    height: 58px;
    font-size: 16px;
    box-shadow: none;
}

.clp-hero-panel {
    background: rgba(255, 255, 255, .96);
    color: var(--clp-ink);
    border-radius: 26px;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .26);
    padding: 28px;
}

.clp-floating-card {
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--clp-shadow-sm);
}

.clp-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(86, 36, 208, .10);
    color: var(--clp-primary);
    font-size: 28px;
}

.clp-metric {
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--clp-border);
    padding: 22px;
    height: 100%;
}

.clp-metric strong {
    display: block;
    color: var(--clp-ink);
    font-size: 34px;
    line-height: 1;
    letter-spacing: -.04em;
}

.clp-metric span,
.clp-muted {
    color: var(--clp-muted);
}

.clp-category-chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink);
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .04);
}

.clp-category-chip:hover {
    border-color: rgba(86, 36, 208, .28);
    box-shadow: var(--clp-shadow-sm);
}

.clp-course-card {
    height: 100%;
}

.clp-course-thumb {
    height: 190px;
    object-fit: cover;
    width: 100%;
    background:
        linear-gradient(135deg, rgba(86, 36, 208, .10), rgba(246, 177, 0, .16)),
        #f2f4f7;
}

.clp-course-meta {
    color: var(--clp-muted);
    font-size: 14px;
}

.clp-price {
    color: var(--clp-ink);
    font-weight: 900;
    font-size: 21px;
}

.clp-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(86, 36, 208, .10);
    color: var(--clp-primary);
    font-weight: 850;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.clp-university-band {
    background: #101828;
    color: #fff;
    border-radius: 28px;
    padding: 46px;
    overflow: hidden;
    position: relative;
}

.clp-university-band:after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    right: -90px;
    top: -90px;
    background: rgba(246, 177, 0, .16);
}

.clp-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.clp-step-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--clp-primary);
    color: #fff;
    font-weight: 900;
}

.clp-cta {
    background:
        radial-gradient(circle at 15% 10%, rgba(246, 177, 0, .25), transparent 28%),
        linear-gradient(135deg, #101828 0%, #2a1166 100%);
    color: #fff;
    border-radius: 28px;
    padding: 48px;
}

.footer-area {
    background: #f9fafb;
}

.footer-area .footer-item h3,
.footer-area .font-weight-bold {
    color: var(--clp-ink);
}

.pagination .page-link {
    color: var(--clp-primary);
    border-color: var(--clp-border);
}

.pagination .active .page-link,
.page-item.active .page-link {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
}

@media (max-width: 1199px) {
    .header-top,
    .menu-category {
        display: none;
    }

    .header-menu-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (max-width: 767px) {
    .section--padding {
        padding: 58px 0;
    }

    .clp-hero-panel,
    .clp-cta,
    .clp-university-band {
        padding: 28px;
        border-radius: 22px;
    }

    .clp-hero-search {
        border-radius: 14px;
    }
}

/* =========================================================
   Redesigned header / primary navigation
   ========================================================= */
.clp-header-container {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.clp-header-top {
    background: #f9fafb;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
}

.clp-header-top a {
    color: var(--clp-muted);
}

.clp-header-top a:hover {
    color: var(--clp-primary);
}

.clp-header-main {
    min-height: 76px;
    display: flex;
    align-items: center;
}

.clp-nav-bar {
    display: flex;
    align-items: center;
    gap: 22px;
    width: 100%;
}

.clp-nav-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.clp-nav-center {
    flex: 1 1 auto;
    min-width: 0;
}

.clp-nav-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Category dropdown trigger */
.clp-category-menu {
    position: relative;
}

.clp-category-menu > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp-cat-trigger {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 16px;
    border-radius: 12px;
    background: rgba(86, 36, 208, .08);
    color: var(--clp-primary) !important;
    font-weight: 800;
    white-space: nowrap;
}

.clp-cat-trigger:hover {
    background: rgba(86, 36, 208, .14);
}

/* Search field */
.clp-nav-search {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.clp-nav-search .form-group {
    position: relative;
}

.clp-nav-search .form--control {
    width: 100%;
    border: 1px solid var(--clp-border);
    border-radius: 999px;
    background: #f7f8fa;
    height: 46px;
    padding-left: 44px !important;
}

.clp-nav-search .form--control:focus {
    background: #fff;
    border-color: rgba(86, 36, 208, .4);
    box-shadow: 0 0 0 3px rgba(86, 36, 208, .12);
}

.clp-nav-search .search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clp-muted);
}

/* Primary menu */
.clp-main-menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.clp-main-menu > ul > li > a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 750;
    white-space: nowrap;
}

.clp-main-menu > ul > li > a:hover {
    background: rgba(86, 36, 208, .07);
    color: var(--clp-primary) !important;
}

/* "More" dropdown */
.clp-has-dropdown {
    position: relative;
}

.clp-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    box-shadow: var(--clp-shadow);
    padding: 8px;
    margin-top: 8px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1001;
    display: block;
}

.clp-has-dropdown:hover .clp-dropdown-menu,
.clp-has-dropdown.is-open .clp-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.clp-dropdown-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--clp-ink) !important;
    font-weight: 650;
}

.clp-dropdown-menu li a:hover {
    background: rgba(86, 36, 208, .08);
    color: var(--clp-primary) !important;
}

/* Wishlist + cart icons */
.clp-nav-icons {
    gap: 4px;
    margin-left: 6px;
}

.clp-icon-link .shop-cart-btn,
.clp-icon-link .product-count {
    color: var(--clp-ink);
}

.clp-icon-link {
    position: relative;
    padding: 8px;
}

.clp-mobile-toggles {
    display: none;
}

/* Responsive: collapse to mobile toggles */
@media (max-width: 1199px) {
    .clp-header-top,
    .clp-category-menu,
    .clp-main-menu,
    .clp-nav-icons {
        display: none;
    }

    .clp-nav-bar {
        justify-content: space-between;
        gap: 12px;
    }

    .clp-nav-center {
        display: none;
    }

    .clp-mobile-toggles {
        display: flex;
        align-items: center;
    }

    .clp-header-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* =========================================================
   Dark mode (night) readability for the modern layer.
   The base theme toggles `.dark-theme` on <body>; the clp-*
   components below set their own light colors, so they need
   explicit dark overrides or text becomes invisible.
   ========================================================= */
.dark-theme {
    --clp-ink: #f3f4f6;
    --clp-muted: #a8b0bd;
    --clp-border: rgba(255, 255, 255, .10);
    --clp-soft: #1f1f24;
}

.dark-theme body,
.dark-theme {
    background-color: #161618;
}

/* Headings & body copy on dark sections */
.dark-theme .section__title,
.dark-theme .section-heading .section__title,
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme h4,
.dark-theme h5,
.dark-theme h6,
.dark-theme .card-title,
.dark-theme .card-title a,
.dark-theme .clp-price,
.dark-theme .clp-metric strong {
    color: #f3f4f6 !important;
}

.dark-theme p,
.dark-theme .lh-30,
.dark-theme .clp-muted,
.dark-theme .clp-metric span,
.dark-theme .clp-course-meta,
.dark-theme .text-muted {
    color: #a8b0bd !important;
}

/* Card / panel surfaces */
.dark-theme .card,
.dark-theme .card-item,
.dark-theme .clp-card,
.dark-theme .clp-floating-card,
.dark-theme .clp-metric,
.dark-theme .clp-category-chip {
    background: #1f1f24 !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

.dark-theme .clp-category-chip,
.dark-theme .clp-category-chip span {
    color: #e9eaee !important;
}

.dark-theme .clp-course-thumb {
    background:
        linear-gradient(135deg, rgba(86, 36, 208, .25), rgba(246, 177, 0, .18)),
        #2a2a31;
}

.dark-theme .clp-badge,
.dark-theme .ribbon,
.dark-theme .ribbon-lg {
    background: rgba(124, 92, 255, .22);
    color: #c4b5fd;
}

/* The hero/CTA/university bands are dark-on-purpose; keep their
   white text but ensure inner cards adapt. */
.dark-theme .clp-hero-panel {
    background: #1f1f24;
    color: #f3f4f6;
}

.dark-theme .clp-hero-panel .clp-muted {
    color: #a8b0bd !important;
}

/* Feature/“dashboards for everyone” sections sit on .bg-white */
.dark-theme .bg-white,
.dark-theme .clp-header-main {
    background-color: #161618 !important;
}

.dark-theme .clp-header,
.dark-theme .header-menu-area {
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

.dark-theme .clp-header-top {
    background: #131315;
}

.dark-theme .clp-header-top a {
    color: #9aa1ac;
}

/* Header logo + nav text (logo uses inline colors → need !important) */
.dark-theme .logo .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .clp-main-menu > ul > li > a {
    color: #e5e7eb !important;
}

.dark-theme .clp-main-menu > ul > li > a:hover,
.dark-theme .clp-dropdown-menu li a:hover {
    background: rgba(124, 92, 255, .16);
    color: #c4b5fd !important;
}

.dark-theme .clp-dropdown-menu {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .08);
}

.dark-theme .clp-dropdown-menu li a {
    color: #e5e7eb !important;
}

.dark-theme .clp-nav-search .form--control {
    background: #1f1f24;
    border-color: rgba(255, 255, 255, .10);
    color: #f3f4f6;
}

.dark-theme .clp-cat-trigger {
    background: rgba(124, 92, 255, .18);
    color: #c4b5fd !important;
}

.dark-theme .clp-icon-link .shop-cart-btn,
.dark-theme .clp-icon-link .product-count {
    color: #e5e7eb;
}

/* Footer */
.dark-theme .footer-area {
    background: #131315;
}

.dark-theme .footer-area .footer-item h3,
.dark-theme .footer-area .font-weight-bold {
    color: #f3f4f6 !important;
}

.dark-theme .footer-area p,
.dark-theme .footer-area .generic-list-item li a {
    color: #a8b0bd;
}

.dark-theme .footer-area .generic-list-item li a:hover {
    color: #c4b5fd;
}

/* =========================================================
   Modern lesson player (LearnWorlds-style)
   ========================================================= */
.clp-player-body {
    margin: 0;
    background: #0f0a24;
}

.clp-player {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: Inter, Arial, sans-serif;
}

/* ----- Sidebar ----- */
.clp-player-sidebar {
    width: 350px;
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 100% 0%, rgba(246, 177, 0, .18), transparent 40%),
        linear-gradient(160deg, #2a1166 0%, #5624d0 100%);
    color: #fff;
    transition: margin-left .25s ease;
}

.clp-player.sidebar-collapsed .clp-player-sidebar {
    margin-left: -350px;
}

.clp-player-sidebar-head {
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.clp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .82) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.clp-back-link:hover {
    color: #fff !important;
}

.clp-player-course-title {
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 14px 0 18px;
}

.clp-progress-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clp-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    overflow: hidden;
}

.clp-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #f6b100;
}

.clp-progress-pct {
    font-weight: 800;
    font-size: 14px;
}

.clp-progress-meta {
    margin: 8px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, .7);
}

/* ----- Curriculum list ----- */
.clp-curriculum {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 40px;
}

.clp-curriculum-section {
    padding: 6px 0;
}

.clp-curriculum-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px 8px;
}

.clp-section-num {
    font-size: 13px;
    font-weight: 900;
    color: #f6b100;
    letter-spacing: .04em;
}

.clp-section-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
}

.clp-lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.clp-lesson-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 22px 11px 24px;
    color: rgba(255, 255, 255, .82) !important;
    border-left: 3px solid transparent;
    transition: background .15s ease;
    cursor: pointer;
}

a.clp-lesson-item:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

.clp-lesson-item.is-active {
    background: rgba(255, 255, 255, .14);
    border-left-color: #f6b100;
}

.clp-lesson-item.is-locked {
    color: rgba(255, 255, 255, .45) !important;
    cursor: not-allowed;
}

.clp-lesson-status {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .15);
    font-size: 14px;
}

.clp-lesson-item.is-done .clp-lesson-status {
    background: #1fbf75;
    color: #fff;
}

.clp-lesson-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.clp-lesson-name {
    font-size: 14px;
    font-weight: 650;
    line-height: 1.3;
}

.clp-lesson-type {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
}

/* ----- Main area ----- */
.clp-player-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
}

.clp-player-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--clp-border);
    flex-shrink: 0;
}

.clp-sidebar-toggle {
    border: 1px solid var(--clp-border);
    background: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    color: var(--clp-ink);
    cursor: pointer;
    flex-shrink: 0;
}

.clp-sidebar-toggle:hover {
    background: var(--clp-soft);
}

.clp-topbar-title {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.clp-topbar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(86, 36, 208, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    flex-shrink: 0;
}

.clp-topbar-lesson {
    font-weight: 700;
    color: var(--clp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clp-topbar-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.clp-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--clp-border);
    background: #fff;
    color: var(--clp-ink) !important;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
}

.clp-nav-btn:hover {
    border-color: rgba(86, 36, 208, .35);
    color: var(--clp-primary) !important;
}

.clp-nav-btn.is-primary {
    background: var(--clp-primary);
    border-color: var(--clp-primary);
    color: #fff !important;
}

.clp-nav-btn.is-primary:hover {
    background: var(--clp-primary-dark);
    color: #fff !important;
}

.clp-nav-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
}

/* ----- Scrollable content ----- */
.clp-player-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px 80px;
}

.clp-player-content {
    max-width: 900px;
    margin: 0 auto;
}

.clp-content-title {
    font-size: 30px;
    font-weight: 850;
    letter-spacing: -.03em;
    color: var(--clp-ink);
    margin-bottom: 22px;
}

.clp-media-frame {
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: var(--clp-shadow);
    margin-bottom: 26px;
}

.clp-pdf-frame {
    width: 100%;
    height: 78vh;
    border: 0;
    display: block;
}

.clp-html5-frame {
    width: 100%;
    height: 70vh;
    border: 0;
    display: block;
    background: #fff;
}

.clp-embed-frame {
    background: #000;
}

.clp-embed-frame iframe,
.clp-embed-frame video {
    width: 100%;
    display: block;
}

.clp-audio {
    width: 100%;
    margin-top: 14px;
}

.clp-media-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(86, 36, 208, .1);
    color: var(--clp-primary);
    font-size: 30px;
}

.clp-callout {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 24px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(225, 29, 72, .12);
    color: #e11d48;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
}

.clp-attachment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--clp-soft);
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-weight: 600;
}

.clp-article {
    color: var(--clp-ink);
    font-size: 17px;
    line-height: 1.8;
    margin-bottom: 26px;
}

.clp-article h1, .clp-article h2, .clp-article h3 { font-weight: 800; margin: 1.2em 0 .5em; }
.clp-article img { max-width: 100%; border-radius: 12px; }
.clp-article ul, .clp-article ol { padding-left: 1.4em; }

.clp-activity-card {
    background: #fff;
    border: 1px solid var(--clp-border);
    border-radius: 18px;
    padding: 26px;
    box-shadow: var(--clp-shadow-sm);
    margin-bottom: 26px;
}

.clp-question {
    border: 1px solid var(--clp-border);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 16px;
}

.clp-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--clp-border);
    border-radius: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.clp-option:hover {
    border-color: rgba(86, 36, 208, .35);
    background: rgba(86, 36, 208, .03);
}

.clp-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(86, 36, 208, .1);
    color: var(--clp-primary);
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}

.clp-chip-warn { background: rgba(245, 158, 11, .15); color: #b45309; }
.clp-chip-dark { background: rgba(16, 24, 40, .85); color: #fff; }

.clp-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--clp-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.clp-alert {
    padding: 14px 18px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-weight: 600;
}

.clp-alert-info { background: rgba(37, 99, 235, .1); color: #1d4ed8; }
.clp-alert-success { background: rgba(31, 191, 117, .14); color: #047857; }
.clp-alert-danger { background: rgba(225, 29, 72, .12); color: #be123c; }

.clp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    background: var(--clp-soft);
    color: var(--clp-ink);
}

.clp-btn-sm { padding: 7px 14px; font-size: 13px; }
.clp-btn-primary { background: var(--clp-primary); color: #fff !important; }
.clp-btn-primary:hover { background: var(--clp-primary-dark); color: #fff !important; }
.clp-btn-success { background: #1fbf75; color: #fff !important; }
.clp-btn-success:hover { background: #189a5e; }
.clp-btn-done { background: #e6f7ef; color: #047857 !important; }
.clp-btn-ghost { background: #fff; border-color: var(--clp-border); color: var(--clp-ink) !important; }
.clp-btn-ghost:hover { border-color: rgba(86, 36, 208, .35); color: var(--clp-primary) !important; }

.clp-complete-row { margin: 26px 0; }

.clp-footer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--clp-border);
    padding-top: 24px;
    margin-top: 10px;
}

@media (max-width: 991px) {
    .clp-player-sidebar {
        position: fixed;
        z-index: 1100;
        height: 100%;
        box-shadow: 0 0 60px rgba(0, 0, 0, .4);
    }
    .clp-content-title { font-size: 24px; }
    .clp-topbar-nav .clp-nav-btn { padding: 9px 12px; }
}

/* Lesson player dark mode (main area; sidebar is already dark) */
.dark-theme .clp-player-main { background: #161618; }
.dark-theme .clp-player-topbar { background: #1f1f24; border-color: rgba(255,255,255,.08); }
.dark-theme .clp-sidebar-toggle { background: #1f1f24; color: #e5e7eb; border-color: rgba(255,255,255,.1); }
.dark-theme .clp-callout,
.dark-theme .clp-activity-card,
.dark-theme .clp-question,
.dark-theme .clp-nav-btn,
.dark-theme .clp-btn-ghost { background: #1f1f24; border-color: rgba(255,255,255,.08); color: #e5e7eb !important; }
.dark-theme .clp-content-title,
.dark-theme .clp-article { color: #f3f4f6; }
.dark-theme .clp-attachment-row { background: #1f1f24; border-color: rgba(255,255,255,.08); }