/* Extracted from course_detail.html inline <style> block (loads after course_detail_redesign.css to preserve cascade order). */
    /* Final course-detail layout guardrails: keep teacher guidance readable in the desktop content rail. */
    .course-container.course-detail-page {
        box-sizing: border-box;
        width: min(100%, 1200px);
        max-width: 100%;
        overflow-x: clip;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .course-detail-page *,
    .course-detail-page *::before,
    .course-detail-page *::after {
        box-sizing: border-box;
    }

    .course-detail-page .course-header-top,
    .course-detail-page .course-header-main,
    .course-detail-page .course-header-content,
    .course-detail-page .course-content-column,
    .course-detail-page .course-sidebar-column,
    .course-detail-page .course-primary-panel,
    .course-detail-page .course-purchase-card {
        min-width: 0;
    }

    .course-detail-page .course-header-main,
    .course-detail-page .course-header-content {
        overflow: visible !important;
    }

    .course-detail-page .course-header {
        background: #173f2f !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .course-detail-page .course-header-top,
    .course-detail-page .course-header-main,
    .course-detail-page .course-header-content {
        background: #173f2f !important;
    }

    .course-detail-page .course-header-top {
        display: none !important;
    }

    .course-detail-page .course-title-block {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start !important;
        gap: 0.75rem 1rem !important;
    }

    .course-detail-page .course-title,
    .course-detail-page .course-header h1.course-title {
        display: block !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #FFFFFF !important;
        font-size: clamp(2rem, 3.2vw, 3.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
    }

    .course-detail-page .course-title-text {
        display: inline !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .course-detail-page .course-title-block .badge {
        position: static !important;
        justify-self: end !important;
        align-self: start !important;
        margin: 0 !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }

    .course-detail-page .course-header-main,
    .course-detail-page .course-header-content {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding: clamp(1.35rem, 2.6vw, 2.35rem) clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.8vw, 2.35rem) !important;
        border-radius: 14px !important;
        margin-top: 0 !important;
        align-self: start !important;
    }

    .course-detail-page .course-content-column,
    .course-detail-page .module-section,
    .course-detail-page .content-section,
    .course-detail-page .content-lock-alert {
        grid-column: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .course-detail-page .course-header-sidebar,
    .course-detail-page .course-sidebar-column,
    .course-detail-page .course-sidebar-stack {
        position: static !important;
        top: auto !important;
        align-self: start !important;
    }

    .course-detail-page .course-header-sidebar {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        margin-bottom: 0 !important;
    }

    .course-detail-page .course-sidebar-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
    }

    .course-detail-page .course-purchase-card,
    .course-detail-page .share-section,
    .course-detail-page .course-primary-panel,
    .course-detail-page .sidebar-section {
        margin-bottom: 0 !important;
    }

    .course-detail-page .course-purchase-card {
        order: 1 !important;
    }

    .course-detail-page .course-primary-panel {
        order: 2 !important;
    }

    .course-detail-page .share-section {
        order: 3 !important;
    }

    .course-detail-page .course-sidebar-stack {
        order: 4 !important;
    }

    .course-detail-page .course-content-panel {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: clamp(1.25rem, 2vw, 2.5rem) !important;
        padding-right: clamp(1.25rem, 2vw, 2.5rem) !important;
        overflow-x: hidden !important;
    }

    .course-detail-page .course-section-header {
        gap: 1rem;
    }

    .course-detail-page .course-reorder-toolbar {
        flex: 0 0 auto;
    }

    .course-detail-page .course-description-card,
    .course-detail-page .course-description-card * {
        text-align: left !important;
        text-align-last: auto !important;
        word-spacing: normal !important;
        letter-spacing: 0 !important;
        hyphens: none !important;
    }

    .course-detail-page .course-description-card {
        display: block !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
        text-overflow: clip !important;
        color: rgba(255, 255, 255, 0.88) !important;
        line-height: 1.45 !important;
        /* Bounded, self-scrolling description panel: keeps the hero a constant
           height and gives the long description its own scrollbar. Page scroll
           (wheel/touch) is redirected to the page in JS so the description only
           moves via its own scrollbar; overscroll is left as default so nothing
           gets trapped. */
        max-height: min(46vh, 360px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding-right: 0.95rem !important;
        scrollbar-gutter: stable;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.55) rgba(255, 255, 255, 0.16);
    }

    .course-detail-page .course-description-card::-webkit-scrollbar {
        width: 10px;
    }

    .course-detail-page .course-description-card::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        margin: 2px 0;
    }

    .course-detail-page .course-description-card::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 999px;
    }

    .course-detail-page .course-description-card::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.7);
    }

    /* ============================================================
       Production polish: hero social proof, module progress bars,
       content-type identity, coming-soon states, micro-interactions.
       ============================================================ */

    /* Hero social-proof strip (under the course title, on the green hero) */
    .course-detail-page .course-hero-proof {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        margin: 2px 0 14px;
        font-size: 12.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.92);
    }

    .course-detail-page .course-hero-proof-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    .course-detail-page .course-hero-proof-item i {
        font-size: 12px;
        color: #FFD166;
    }

    .course-detail-page .course-hero-proof-item .bi-people-fill,
    .course-detail-page .course-hero-proof-item .bi-collection-fill {
        color: rgba(255, 255, 255, 0.75);
    }

    .course-detail-page .course-hero-proof-item .bi-patch-check-fill {
        color: #7BE3A8;
    }

    .course-detail-page .course-hero-proof-sub {
        margin-left: 3px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.65);
    }

    .course-detail-page .course-hero-proof-dot {
        width: 3px;
        height: 3px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.45);
    }

    /* Per-module thin progress bar pinned to the bottom of the accordion header */
    .course-detail-page .accordion-button {
        position: relative;
    }

    .course-detail-page .module-progress-track {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(27, 58, 45, 0.08);
        overflow: hidden;
        pointer-events: none;
    }

    .course-detail-page .module-progress-fill {
        display: block;
        height: 100%;
        background: var(--cd-accent, #4CAF7D);
        border-radius: 0 999px 999px 0;
        transition: width 0.4s ease;
    }

    .course-detail-page .module-progress-fill.is-complete {
        background: linear-gradient(90deg, var(--cd-accent, #4CAF7D), #2E9E62);
    }

    .course-detail-page .module-meta-complete {
        color: var(--cd-accent, #4CAF7D) !important;
        font-weight: 700;
    }

    /* Empty-module "coming soon" badge (beats the generic module-heading badge rule) */
    .course-detail-page .module-heading-meta .badge.module-badge-soon {
        background: rgba(245, 158, 11, 0.16) !important;
        color: #B45309 !important;
        font-weight: 600;
    }

    /* Content-type identity: colored icon chips so learners can scan the list */
    .course-detail-page .content-main > .content-icon.content-icon--video {
        background: rgba(2, 136, 209, 0.1);
        border-color: rgba(2, 136, 209, 0.25);
        color: #0277BD;
    }

    .course-detail-page .content-main > .content-icon.content-icon--quiz {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.3);
        color: #B45309;
    }

    .course-detail-page .content-main > .content-icon.content-icon--assignment {
        background: rgba(139, 92, 246, 0.1);
        border-color: rgba(139, 92, 246, 0.28);
        color: #6D28D9;
    }

    .course-detail-page .content-main > .content-icon.content-icon--document {
        background: rgba(100, 116, 139, 0.1);
        border-color: rgba(100, 116, 139, 0.28);
        color: #475569;
    }

    /* notes/text keep the default green chip from the redesign stylesheet */

    /* Micro-interactions: gentle lift on lesson rows and cards */
    .course-detail-page .content-item {
        transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        border-radius: 10px;
    }

    .course-detail-page .content-item:hover {
        background: rgba(76, 175, 125, 0.05);
        transform: translateY(-1px);
    }

    .course-detail-page .accordion-button {
        transition: background-color 0.2s ease;
    }

    .course-detail-page .btn {
        transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }

    .course-detail-page .btn:hover {
        transform: translateY(-1px);
    }

    .course-detail-page .btn:active {
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {
        .course-detail-page .content-item,
        .course-detail-page .btn,
        .course-detail-page .accordion-button,
        .course-detail-page .module-progress-fill {
            transition: none !important;
        }

        .course-detail-page .content-item:hover,
        .course-detail-page .btn:hover {
            transform: none !important;
        }
    }

    /* ============================================================
       DESKTOP (>= 901px): pin the left hero column so it stays put
       while the course-content column scrolls. The whole hero
       (title, description, badges, what-you-will-learn, ratings)
       lives in .course-header-main here, so it becomes one fixed,
       self-scrolling panel the reader navigates on its own.
       ============================================================ */
    @media (min-width: 901px) {
        .course-detail-page .course-header-main {
            position: sticky;
            top: 72px;                              /* clear the 60px fixed navbar + gap */
            align-self: start;
            /* Span the hero's grid area to full height so it stays pinned for the
               entire course-content scroll instead of unsticking partway down. */
            grid-row: 1 / -1 !important;
            max-height: calc(100vh - 88px);
            overflow-y: auto !important;
            overflow-x: hidden !important;
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.16);
        }

        .course-detail-page .course-header-main::-webkit-scrollbar {
            width: 10px;
        }

        .course-detail-page .course-header-main::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.14);
            border-radius: 999px;
            margin: 8px 0;
        }

        .course-detail-page .course-header-main::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.45);
            border-radius: 999px;
        }

        .course-detail-page .course-header-main::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.65);
        }

        /* The pinned column scrolls as a single unit on desktop, so release the
           description's own cap/scrollbar to avoid a confusing nested scroll. */
        .course-detail-page .course-description-card {
            max-height: none !important;
            overflow: visible !important;
            padding-right: 0 !important;
            scrollbar-gutter: auto;
        }
    }

    .course-detail-page .course-description-card p,
    .course-detail-page .course-description-card div {
        display: block !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-height: none !important;
    }

    .course-detail-page .course-meta-strip {
        max-width: 100%;
        overflow: visible !important;
    }

    .course-detail-page .course-meta-strip .badge {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .course-detail-page .course-learn-card,
    .course-detail-page .course-learn-list,
    .course-detail-page .course-learn-list li,
    .course-detail-page .course-learn-list span {
        min-width: 0;
        max-width: 100%;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none !important;
    }

    .course-detail-page .course-learn-list span {
        display: inline !important;
        -webkit-line-clamp: initial !important;
        -webkit-box-orient: initial !important;
        max-height: none !important;
    }

    .course-detail-page .teacher-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1rem !important;
        border: 1px solid rgba(0, 166, 81, 0.16) !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, #FFFFFF 0%, #F7FCFA 100%) !important;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06) !important;
    }

    .course-detail-page .teacher-card .teacher-card-body::after {
        content: none !important;
        display: none !important;
    }

    .course-detail-page .teacher-profile-head {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.9rem;
        align-items: center;
    }

    .course-detail-page .teacher-card .teacher-card-avatar {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        border-radius: 18px !important;
        border: 2px solid rgba(0, 166, 81, 0.72) !important;
        object-fit: cover;
    }

    .course-detail-page .teacher-card .teacher-card-name {
        margin: 0 0 0.35rem !important;
        color: #10231B !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        line-height: 1.25;
    }

    .course-detail-page .teacher-verify-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        width: fit-content;
        padding: 0.28rem 0.55rem;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 800;
        line-height: 1;
    }

    .course-detail-page .teacher-verify-badge.is-verified {
        background: rgba(0, 166, 81, 0.12);
        color: #047857;
    }

    .course-detail-page .teacher-verify-badge.is-unverified {
        background: #F1F5F9;
        color: #64748B;
    }

    .course-detail-page .teacher-profile-section {
        padding-top: 0.85rem;
        border-top: 1px solid #E2E8F0;
    }

    .course-detail-page .teacher-profile-label {
        display: block;
        margin-bottom: 0.35rem;
        color: #64748B;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .course-detail-page .teacher-profile-text {
        margin: 0;
        color: #334155;
        font-size: 0.88rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .course-detail-page .teacher-profile-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .course-detail-page .teacher-profile-chip {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
        padding: 0.34rem 0.55rem;
        border-radius: 999px;
        background: #EEFDF4;
        color: #065F46;
        font-size: 0.75rem;
        font-weight: 800;
        line-height: 1.1;
        overflow-wrap: anywhere;
    }

    .course-detail-page .teacher-profile-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 0.5rem !important;
        margin-top: 0 !important;
    }

    .course-detail-page .teacher-profile-actions .btn {
        width: 100%;
        min-height: 42px;
        justify-content: center;
        border-radius: 12px !important;
        font-weight: 800;
        white-space: nowrap;
    }

    .course-detail-page .teacher-profile-actions .btn-profile {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.9rem !important;
    }

    .course-detail-page .teacher-profile-actions .btn-profile i {
        display: inline-flex !important;
    }

    .course-detail-page .teacher-profile-actions .btn-profile::after {
        content: none !important;
        display: none !important;
    }

    .course-detail-page .teacher-start-guide {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
    }

    .course-detail-page .teacher-start-copy,
    .course-detail-page .teacher-start-copy h4,
    .course-detail-page .teacher-start-copy p {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .course-detail-page .teacher-start-copy p {
        max-width: 58ch;
    }

    .course-detail-page .teacher-start-steps {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.55rem 1rem !important;
        min-width: 0;
    }

    .course-detail-page .teacher-start-steps li {
        min-width: max-content;
        white-space: nowrap;
    }

    .course-detail-page .teacher-start-action {
        justify-self: start !important;
        width: auto;
    }

    .course-detail-page .teacher-start-action .btn {
        min-width: 180px;
        max-width: 100%;
        white-space: nowrap;
    }

    @media (min-width: 1200px) {
        .course-container.course-detail-page {
            width: min(calc(100vw - 32px), 1680px) !important;
            max-width: calc(100vw - 32px) !important;
            grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) minmax(280px, 320px) !important;
            gap: 0 24px !important;
        }

        .course-detail-page .course-title,
        .course-detail-page .course-header h1.course-title {
            font-size: clamp(2.2rem, 2.35vw, 2.7rem) !important;
            line-height: 1.09 !important;
            text-align: left !important;
        }

        .course-detail-page .course-title-block--main {
            grid-template-columns: minmax(0, 1fr) !important;
            justify-items: start !important;
        }

        .course-detail-page .course-title-block--main .badge {
            order: -1;
            justify-self: start !important;
        }

        .course-detail-page .course-header-main,
        .course-detail-page .course-header-content {
            padding-left: clamp(1.6rem, 2vw, 2.05rem) !important;
            padding-right: clamp(1.6rem, 2vw, 2.05rem) !important;
        }

        .course-detail-page .course-description-card {
            font-size: 0.98rem !important;
            line-height: 1.48 !important;
        }

        .course-detail-page .course-sidebar-stack {
            position: static !important;
        }

        .course-detail-page .course-header-sidebar {
            position: static !important;
            top: auto !important;
            align-self: start !important;
            max-height: none;
            overflow: visible;
        }

        .course-detail-page .sidebar-section[aria-label="Live Classes"] {
            position: static !important;
            top: auto !important;
            z-index: auto;
            max-height: none;
            overflow: visible;
        }
    }

    @media (min-width: 901px) and (max-width: 1199.98px) {
        .course-container.course-detail-page {
            width: min(calc(100vw - 24px), 1180px) !important;
            max-width: calc(100vw - 24px) !important;
            grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(190px, 230px) !important;
            gap: 0 12px !important;
            padding-left: 14px !important;
            padding-right: 14px !important;
        }

        .course-detail-page .course-content-panel {
            padding-left: 1.15rem !important;
            padding-right: 1.15rem !important;
        }

        .course-detail-page .course-sidebar-stack,
        .course-detail-page .course-header-sidebar,
        .course-detail-page .sidebar-section[aria-label="Live Classes"] {
            position: static !important;
            top: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }

    @media (max-width: 1280px) {
        .course-detail-page .accordion-item,
        .course-detail-page .accordion-header,
        .course-detail-page .accordion-body,
        .course-detail-page .content-list,
        .course-detail-page .content-item {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        .course-detail-page .accordion-button {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            gap: 0.75rem !important;
            align-items: center !important;
            white-space: normal !important;
        }

        .course-detail-page .module-heading-copy {
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            word-break: normal !important;
            line-height: 1.35 !important;
        }

        .course-detail-page .module-heading-meta {
            justify-self: end;
            flex-shrink: 0;
        }

        .course-detail-page .module-admin-actions {
            margin-left: 0 !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: center !important;
            gap: 0.55rem !important;
        }

        .course-detail-page .module-admin-actions .btn {
            min-width: 0 !important;
            flex: 0 1 auto !important;
        }

        .course-detail-page .content-line {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 0.9rem !important;
            align-items: start !important;
        }

        .course-detail-page .content-main {
            display: grid !important;
            grid-template-columns: auto auto minmax(0, 1fr) !important;
            align-items: center !important;
            gap: 0.65rem !important;
            width: 100% !important;
        }

        .course-detail-page .content-main > .content-icon,
        .course-detail-page .content-drag-handle {
            margin-right: 0 !important;
            flex-shrink: 0 !important;
        }

        .course-detail-page .content-title {
            overflow-wrap: normal !important;
            word-break: normal !important;
            hyphens: none !important;
        }

        .course-detail-page .content-actions {
            justify-items: stretch !important;
            width: 100% !important;
        }

        .course-detail-page .lesson-action-group {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
            gap: 0.55rem !important;
            width: 100% !important;
        }

        .course-detail-page .lesson-action-group .btn {
            width: 100% !important;
            min-width: 0 !important;
        }
    }

    @media (max-width: 1040px) {
        .course-detail-page .lesson-action-group {
            grid-template-columns: 1fr !important;
        }

        .course-detail-page .module-admin-actions .btn {
            flex: 1 1 150px !important;
        }
    }

    @media (max-width: 1400px) {
        .course-detail-page .course-content-panel,
        .course-detail-page .accordion,
        .course-detail-page .accordion-item,
        .course-detail-page .accordion-header,
        .course-detail-page .accordion-body,
        .course-detail-page .content-list,
        .course-detail-page .content-item {
            min-width: 0 !important;
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        .course-detail-page .accordion-button {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            align-items: start !important;
            gap: 0.75rem !important;
            width: 100% !important;
            min-width: 0 !important;
            white-space: normal !important;
            overflow-x: hidden !important;
        }

        .course-detail-page .accordion-button .module-heading-copy {
            display: flex !important;
            align-items: flex-start !important;
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            line-height: 1.35 !important;
        }

        .course-detail-page .accordion-button .module-heading-meta {
            flex: 0 0 auto !important;
            justify-self: end !important;
        }

        .course-detail-page .accordion-header .module-admin-actions {
            overflow-x: visible !important;
            padding-bottom: 0 !important;
            scrollbar-width: none !important;
        }

        .course-detail-page .accordion-header .module-admin-actions::-webkit-scrollbar {
            display: none !important;
        }

        .course-detail-page .content-line {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            gap: 0.85rem !important;
            width: 100% !important;
            min-width: 0 !important;
            align-items: start !important;
        }

        .course-detail-page .content-main {
            display: grid !important;
            grid-template-columns: auto auto minmax(0, 1fr) !important;
            gap: 0.65rem !important;
            width: 100% !important;
            min-width: 0 !important;
            align-items: start !important;
        }

        .course-detail-page .content-main > div:last-child {
            min-width: 0 !important;
            max-width: 100% !important;
        }

        .course-detail-page .content-title {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            hyphens: none !important;
            line-height: 1.35 !important;
            text-align: left !important;
        }

        .course-detail-page .content-meta {
            display: block !important;
            text-align: left !important;
        }

        .course-detail-page .content-actions {
            width: 100% !important;
            justify-items: stretch !important;
        }

        .course-detail-page .lesson-action-group {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
            gap: 0.55rem !important;
            width: 100% !important;
        }

        .course-detail-page .lesson-action-group .btn {
            width: 100% !important;
            min-width: 0 !important;
        }
    }

    @media (min-width: 768px) and (max-width: 980px) {
        .course-container.course-detail-page {
            display: block !important;
            width: min(100%, 760px) !important;
            max-width: 100% !important;
            padding: 18px 16px !important;
        }

        .course-detail-page .course-header,
        .course-detail-page .course-overview-grid,
        .course-detail-page .course-detail-layout {
            display: block !important;
        }

        .course-detail-page .course-header-top,
        .course-detail-page .course-header-main,
        .course-detail-page .course-header-content,
        .course-detail-page .course-header-sidebar,
        .course-detail-page .course-content-column,
        .course-detail-page .module-section,
        .course-detail-page .content-section,
        .course-detail-page .content-lock-alert {
            grid-column: auto !important;
            grid-row: auto !important;
            position: static !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-bottom: 1rem !important;
        }
    }

    @media (max-width: 900px) {
        .course-container.course-detail-page {
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 18px 14px !important;
        }

        .course-detail-page .course-header-top,
        .course-detail-page .course-header-main,
        .course-detail-page .course-header-content,
        .course-detail-page .course-header-sidebar,
        .course-detail-page .course-content-column,
        .course-detail-page .course-sidebar-column,
        .course-detail-page .module-section,
        .course-detail-page .content-section,
        .course-detail-page .content-lock-alert,
        .course-detail-page .sidebar-section[aria-label="Live Classes"] {
            grid-column: auto !important;
            grid-row: auto !important;
            position: static !important;
            width: 100% !important;
            max-width: 100% !important;
            max-height: none !important;
            overflow: visible !important;
            margin-bottom: 1rem !important;
        }

        .course-detail-page .course-header-top {
            margin-bottom: 0 !important;
            border-radius: 12px 12px 0 0 !important;
            padding-bottom: 0.9rem !important;
        }

        .course-detail-page .course-title-block {
            grid-template-columns: minmax(0, 1fr) !important;
        }

        .course-detail-page .course-title,
        .course-detail-page .course-header h1.course-title {
            font-size: clamp(1.8rem, 8vw, 2.55rem) !important;
        }

        .course-detail-page .course-title-block .badge {
            justify-self: start !important;
        }

        .course-detail-page .course-header-main,
        .course-detail-page .course-header-content {
            margin-top: 0 !important;
            padding-top: 0.9rem !important;
            border-radius: 0 0 12px 12px !important;
        }

        .course-detail-page .course-header-sidebar {
            display: flex !important;
            flex-direction: column !important;
            gap: 1rem !important;
        }

        .course-detail-page .course-sidebar-stack {
            display: flex !important;
            flex-direction: column !important;
            gap: 1rem !important;
        }

        .course-detail-page .teacher-profile-head {
            grid-template-columns: 56px minmax(0, 1fr);
        }

        .course-detail-page .teacher-card .teacher-card-avatar {
            width: 56px !important;
            height: 56px !important;
            min-width: 56px !important;
            min-height: 56px !important;
        }
    }

    @media (min-width: 1400px) {
        .course-detail-page .teacher-start-guide {
            grid-template-columns: minmax(0, 1fr) auto !important;
            grid-template-areas:
                "copy action"
                "steps action";
            align-items: center !important;
        }

        .course-detail-page .teacher-start-copy {
            grid-area: copy;
        }

        .course-detail-page .teacher-start-steps {
            grid-area: steps;
        }

        .course-detail-page .teacher-start-action {
            grid-area: action;
            justify-self: end !important;
        }
    }

    @media (max-width: 575.98px) {
        .course-container.course-detail-page {
            width: 100% !important;
            max-width: 100% !important;
            grid-template-columns: 1fr !important;
            grid-template-rows: auto !important;
            gap: 16px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 12px !important;
            padding-right: 12px !important;
        }

        .course-detail-page .course-header-top,
        .course-detail-page .course-header-main,
        .course-detail-page .course-header-content,
        .course-detail-page .course-header-sidebar,
        .course-detail-page .course-content-column,
        .course-detail-page .course-sidebar-column,
        .course-detail-page .module-section,
        .course-detail-page .content-section,
        .course-detail-page .content-lock-alert,
        .course-detail-page .sidebar-section[aria-label="Live Classes"] {
            grid-column: auto !important;
            grid-row: auto !important;
            position: static !important;
            width: 100% !important;
            max-width: 100% !important;
            max-height: none !important;
            overflow: visible !important;
        }

        .course-detail-page .teacher-start-steps li {
            min-width: 0;
            white-space: normal;
        }

        .course-detail-page .teacher-start-action,
        .course-detail-page .teacher-start-action .btn {
            width: 100%;
        }
    }

    @media (max-width: 1800px) {
        .course-detail-page .course-content-panel,
        .course-detail-page .accordion,
        .course-detail-page .accordion-item,
        .course-detail-page .accordion-header,
        .course-detail-page .accordion-body,
        .course-detail-page .content-list,
        .course-detail-page .content-item {
            max-width: 100% !important;
            overflow-x: hidden !important;
        }

        .course-detail-page .accordion-button {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
            align-items: start !important;
            gap: 0.75rem !important;
            width: 100% !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow: hidden !important;
        }

        .course-detail-page .module-heading-copy {
            display: flex !important;
            align-items: flex-start !important;
            min-width: 0 !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            hyphens: none !important;
            line-height: 1.35 !important;
        }

        .course-detail-page .module-heading-meta {
            justify-self: end !important;
            flex: 0 0 auto !important;
        }

        .course-detail-page .accordion-header .module-admin-actions {
            overflow-x: hidden !important;
            flex-wrap: wrap !important;
            padding-bottom: 0 !important;
        }

        .course-detail-page .accordion-header .module-admin-actions::-webkit-scrollbar {
            display: none !important;
        }

        .course-detail-page .content-line {
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            align-items: start !important;
            gap: 0.8rem !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .course-detail-page .content-main {
            display: grid !important;
            grid-template-columns: auto auto minmax(0, 1fr) !important;
            align-items: center !important;
            gap: 0.7rem !important;
            width: 100% !important;
            min-width: 0 !important;
        }

        .course-detail-page .content-main > .content-icon,
        .course-detail-page .content-drag-handle {
            margin-right: 0 !important;
            flex-shrink: 0 !important;
        }

        .course-detail-page .content-main > div:last-child {
            min-width: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        .course-detail-page .content-title {
            width: 100% !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
            hyphens: none !important;
            line-height: 1.35 !important;
            text-align: left !important;
        }

        .course-detail-page .content-actions {
            width: 100% !important;
            justify-items: stretch !important;
        }

        .course-detail-page .lesson-action-group {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
            gap: 0.55rem !important;
            width: 100% !important;
        }

        .course-detail-page .lesson-action-group .btn {
            width: 100% !important;
            min-width: 0 !important;
        }
    }

    @media (max-width: 760px) {
        .course-detail-page .lesson-action-group {
            grid-template-columns: 1fr !important;
        }
    }

    @media (max-width: 575.98px) {
        .course-detail-page .sidebar-section[aria-label="Course tutor"] {
            padding: 1.15rem !important;
            border-radius: 14px !important;
        }

        .course-detail-page .course-purchase-card {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-align: center !important;
        }

        .course-detail-page .course-purchase-card .course-price-label,
        .course-detail-page .course-purchase-card .course-redesign-price,
        .course-detail-page .course-purchase-card .teacher-earnings-copy {
            text-align: center !important;
            width: 100% !important;
        }

        .course-detail-page .course-purchase-card .edit-price-btn {
            right: 0.75rem !important;
        }

        .course-detail-page .sidebar-section[aria-label="Course tutor"] .sidebar-card-title {
            justify-content: center !important;
            padding-bottom: 0.85rem !important;
            margin-bottom: 1rem !important;
            font-size: 1.2rem !important;
            line-height: 1.2 !important;
        }

        .course-detail-page .teacher-card.teacher-profile-card {
            gap: 0.85rem !important;
            padding: 1rem !important;
            border-radius: 16px !important;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045) !important;
        }

        .course-detail-page .teacher-profile-head {
            grid-template-columns: 52px minmax(0, 1fr) !important;
            gap: 0.75rem !important;
            align-items: center !important;
            text-align: left !important;
        }

        .course-detail-page .teacher-card .teacher-card-avatar {
            width: 52px !important;
            height: 52px !important;
            min-width: 52px !important;
            min-height: 52px !important;
            border-radius: 14px !important;
        }

        .course-detail-page .teacher-card .teacher-card-name {
            margin-bottom: 0.35rem !important;
            font-size: 1rem !important;
            line-height: 1.2 !important;
        }

        .course-detail-page .teacher-verify-badge {
            padding: 0.28rem 0.55rem !important;
            font-size: 0.72rem !important;
        }

        .course-detail-page .teacher-profile-section {
            padding-top: 0.85rem !important;
        }

        .course-detail-page .teacher-profile-label {
            margin-bottom: 0.28rem !important;
            font-size: 0.68rem !important;
            letter-spacing: 0.05em !important;
        }

        .course-detail-page .teacher-profile-text {
            font-size: 0.95rem !important;
            line-height: 1.42 !important;
        }

        .course-detail-page .teacher-profile-chips {
            gap: 0.35rem !important;
        }

        .course-detail-page .teacher-profile-chip {
            padding: 0.3rem 0.55rem !important;
            font-size: 0.72rem !important;
        }

        .course-detail-page .teacher-profile-actions {
            gap: 0.55rem !important;
        }

        .course-detail-page .teacher-profile-actions .btn {
            min-height: 48px !important;
            padding: 0.72rem 0.9rem !important;
            border-radius: 12px !important;
            font-size: 0.95rem !important;
        }
    }