/* Course detail UI refresh scoped to course.php. */
body.course-page {
    --course-green-900: #066335;
    --course-green-800: #08723a;
    --course-green-700: #0a8f49;
    --course-green-600: #11a85d;
    --course-mint-100: #e9f8f0;
    --course-mint-050: #f5fbf7;
    --course-amber-500: #f4b82e;
    --course-amber-100: #fff4ce;
    --course-ink-900: #18231f;
    --course-ink-700: #364640;
    --course-ink-500: #6a7671;
    --course-line: #dce9e2;
    --course-line-strong: #bfd8cb;
    --course-surface: #ffffff;
    --course-page-bg: #f7faf8;
    --course-shadow-soft: 0 18px 40px rgba(17, 49, 32, 0.08);
    --course-shadow-panel: 0 24px 54px rgba(17, 49, 32, 0.12);
    background: var(--course-page-bg) !important;
    color: var(--course-ink-900) !important;
}

body.course-page .course-shell {
    min-height: 100vh;
    padding: 0 0 4rem !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 250, 248, 0.96) 46%, #ffffff 100%) !important;
}

body.course-page .container {
    width: min(100% - 4rem, 1220px) !important;
    max-width: 1220px !important;
    margin-inline: auto !important;
}

body.course-page .course-shell-head {
    min-height: 102px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 1.25rem !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(8, 114, 58, 0.1) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.course-page .course-shell-head__main {
    min-width: 0;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 2.5rem !important;
}

body.course-page .course-center-logo {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
}

body.course-page .course-center-logo img {
    display: block;
    width: 120px !important;
    height: auto;
}

body.course-page .course-breadcrumb {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--course-ink-500);
    font-family: 'Google Sans Flex', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

body.course-page .course-breadcrumb a {
    color: var(--course-ink-500) !important;
    text-decoration: none !important;
}

body.course-page .course-breadcrumb a:hover,
body.course-page .course-breadcrumb a:focus-visible {
    color: var(--course-green-800) !important;
    outline: none;
}

body.course-page .course-breadcrumb__current {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.course-page .course-breadcrumb__lesson {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--course-green-800);
    font-weight: 800;
}

body.course-page .course-title {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

body.course-page .course-back {
    position: static !important;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.65rem 1.1rem !important;
    border: 1px solid rgba(8, 114, 58, 0.16) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--course-green-800) !important;
    box-shadow: 0 8px 20px rgba(17, 49, 32, 0.09) !important;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

body.course-page .course-back:hover,
body.course-page .course-back:focus-visible {
    background: linear-gradient(135deg, #0a8f49, #08723a) !important;
    border-color: #08723a !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(8, 114, 58, 0.32) !important;
    outline: none !important;
}

body.course-page .course-back::before {
    content: none !important;
}

body.course-page .course-back__icon {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
}

body.course-page .course-back__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (min-width: 769px) {
    body.course-page .course-shell-head > .course-todo-trigger {
        position: absolute !important;
        left: -10000px !important;
        top: auto !important;
        width: 1px !important;
        height: 1px !important;
        min-width: 1px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 768px) {
    body.course-page .course-shell-head__main {
        row-gap: 0.75rem !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        margin-top: 0.35rem !important;
        padding: 0.5rem 0.75rem !important;
        gap: 0.6rem !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 18px rgba(17, 17, 17, 0.08) !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) .course-todo-trigger__icon {
        width: 1.85rem !important;
        height: 1.85rem !important;
        border-radius: 10px !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) .course-todo-trigger__icon svg {
        width: 0.95rem !important;
        height: 0.95rem !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) .course-todo-trigger__label {
        font-size: 0.82rem !important;
        line-height: 1.15 !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) .course-todo-trigger__meta {
        display: none !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) .course-todo-trigger__count {
        min-width: 1.55rem !important;
        height: 1.55rem !important;
        font-size: 0.72rem !important;
        margin-left: auto !important;
    }
}

body.course-page .course-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 420px !important;
    align-items: start !important;
    gap: 1.75rem !important;
    margin-top: 1.35rem !important;
    padding-bottom: 5.25rem !important;
}

body.course-page .course-player-column,
body.course-page .course-side-column {
    min-width: 0;
}

body.course-page .course-side-column {
    display: grid;
    gap: 1.5rem;
    position: sticky;
    top: 1.25rem;
    align-self: start;
}

body.course-page .course-player-card {
    position: relative !important;
    top: auto !important;
    overflow: hidden !important;
    border: 1px solid var(--course-line) !important;
    border-radius: 18px !important;
    background: var(--course-surface) !important;
    box-shadow: var(--course-shadow-soft) !important;
    padding: 0 !important;
    color: var(--course-ink-900) !important;
}

body.course-page .course-video-wrapper {
    position: relative;
    display: block !important;
    width: 100%;
    aspect-ratio: var(--course-player-media-ratio, 16 / 9);
    min-height: 320px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    background:
        linear-gradient(135deg, rgba(233, 248, 240, 0.95) 0%, rgba(255, 255, 255, 0.96) 52%, rgba(218, 242, 229, 0.95) 100%) !important;
    box-shadow: none !important;
    overflow: hidden;
}

body.course-page .course-video-wrapper iframe,
body.course-page .course-video-wrapper video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    background: #eef7f1;
}

body.course-page .course-video-wrapper [hidden] {
    display: none !important;
}

body.course-page .course-video-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 2rem;
    text-align: center;
    background:
        linear-gradient(135deg, rgba(232, 248, 240, 0.9), rgba(255, 255, 255, 0.82));
}

body.course-page .course-video-placeholder img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.18;
}

body.course-page .course-video-placeholder p,
body.course-page .course-video-locked p,
body.course-page .course-video-fallback p {
    position: relative;
    max-width: 34rem;
    margin: 0;
    color: var(--course-ink-700) !important;
    font-weight: 700;
    line-height: 1.55;
}

body.course-page .course-video-locked,
body.course-page .course-video-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.4rem;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(180deg, #f6fbf7 0%, #eaf5ee 100%) !important;
}

body.course-page .course-video-locked::before {
    content: "";
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2308723a'><path d='M12 2a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-2V7a5 5 0 0 0-5-5zm-3 5a3 3 0 0 1 6 0v3H9V7zm3 7a2 2 0 0 1 1 3.7V19h-2v-1.3A2 2 0 0 1 12 14z'/></svg>") center / 2.2rem 2.2rem no-repeat,
        linear-gradient(145deg, #ffffff, #e8f6ee);
    box-shadow: 0 8px 20px rgba(8, 116, 67, 0.14);
}

body.course-page .course-video-fallback.is-hidden,
body.course-page .course-video-placeholder.is-hidden,
body.course-page .course-video-locked.is-hidden {
    display: none !important;
}

body.course-page .course-player-header {
    display: grid !important;
    gap: 0.55rem !important;
    padding: 1.35rem 2rem 0 !important;
    background: #ffffff !important;
    border: 0 !important;
}

body.course-page .course-player-badge {
    width: fit-content;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--course-green-800) !important;
    box-shadow: none !important;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
}

body.course-page .course-player-title {
    max-width: none !important;
    margin: 0 !important;
    color: var(--course-ink-900) !important;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
}

body.course-page .course-player-header.is-empty {
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 1.15rem !important;
    margin: 1.5rem 1.5rem 1.75rem !important;
    padding: 1.4rem 1.5rem !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 244, 206, 0.55), transparent 58%),
        linear-gradient(135deg, rgba(232, 248, 240, 0.95), rgba(255, 255, 255, 0.96)) !important;
    border: 1px dashed rgba(8, 114, 58, 0.28) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

body.course-page .course-player-empty-icon {
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308723a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>") center / 1.7rem 1.7rem no-repeat,
        linear-gradient(145deg, #ffffff, #e8f6ee);
    box-shadow: 0 6px 16px rgba(8, 116, 67, 0.14);
}

body.course-page .course-player-empty-text {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

body.course-page .course-player-header.is-empty .course-player-badge {
    color: var(--course-green-700) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.08em !important;
}

body.course-page .course-player-header.is-empty .course-player-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body.course-page .course-player-empty-desc {
    margin: 0 !important;
    color: var(--course-ink-700) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    font-weight: 500;
}

body.course-page .course-player-source-note {
    margin: 1rem 2rem 0 !important;
    padding: 0.85rem 1rem !important;
    border: 1px solid rgba(244, 184, 46, 0.4) !important;
    border-radius: 12px !important;
    background: var(--course-amber-100) !important;
    box-shadow: none !important;
}

body.course-page .course-player-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.8rem !important;
    padding: 1.2rem 2rem 1.5rem !important;
    border: 0 !important;
    background: #ffffff !important;
}

body.course-page .course-player-watched {
    margin-right: auto;
}

body.course-page .course-btn {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.18rem !important;
    border: 1px solid rgba(8, 114, 58, 0.22) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--course-green-800) !important;
    box-shadow: none !important;
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    cursor: pointer;
}

body.course-page .course-btn:hover,
body.course-page .course-btn:focus-visible {
    border-color: rgba(8, 114, 58, 0.38) !important;
    background: var(--course-mint-100) !important;
    color: var(--course-green-900) !important;
    outline: none !important;
}

body.course-page .course-btn.primary {
    border-color: var(--course-green-700) !important;
    background: linear-gradient(180deg, var(--course-green-600), var(--course-green-800)) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(8, 114, 58, 0.22) !important;
}

body.course-page .course-btn.primary:hover,
body.course-page .course-btn.primary:focus-visible {
    background: linear-gradient(180deg, #12b765, var(--course-green-900)) !important;
    color: #ffffff !important;
}

body.course-page .course-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

body.course-page .course-btn.is-watched {
    border-color: transparent !important;
    background: var(--course-mint-100) !important;
    color: var(--course-green-800) !important;
    box-shadow: none !important;
}

body.course-page .course-player-resources {
    margin: 0 2rem 2rem !important;
    padding: 1.05rem !important;
    border: 1px solid rgba(8, 114, 58, 0.1) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f0faf4, #f7fcf9) !important;
    box-shadow: none !important;
}

body.course-page .course-player-resource-tabs {
    display: inline-flex !important;
    width: fit-content !important;
    margin: 0 0 0.95rem !important;
    padding: 0.25rem !important;
    border: 1px solid rgba(8, 114, 58, 0.12) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

body.course-page .course-player-resource-tab {
    min-height: 36px !important;
    padding: 0.5rem 0.95rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--course-ink-500) !important;
    box-shadow: none !important;
    font-size: 0.86rem !important;
    font-weight: 900 !important;
}

body.course-page .course-player-resource-tab.is-active {
    background: var(--course-green-800) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.course-page .course-player-resource-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.course-page .course-player-review-lab {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.course-page .course-player-review-lab__rail {
    width: 100% !important;
    min-width: 0 !important;
}

body.course-page .course-player-review-header {
    margin-bottom: 0.9rem;
}

body.course-page .course-player-attachments-title,
body.course-page .course-player-review-title {
    margin: 0 0 0.2rem !important;
    color: var(--course-green-800) !important;
    font-size: 1.08rem !important;
    font-weight: 900 !important;
    line-height: 1.25;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body.course-page .course-player-review-subtitle {
    margin: 0 !important;
    max-width: 40rem;
    color: var(--course-ink-500) !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

body.course-page .course-player-review-list,
body.course-page .course-player-attachments-list {
    display: grid !important;
    gap: 0.35rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.course-page .course-player-review-item,
body.course-page .course-player-attachments-list li a {
    width: 100%;
    min-height: 64px;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.55rem 0.75rem !important;
    border: 1px solid rgba(16, 42, 30, 0.1) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--course-ink-900) !important;
    box-shadow: 0 8px 18px rgba(17, 49, 32, 0.04) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.course-page .course-player-review-item:hover,
body.course-page .course-player-review-item:focus-visible,
body.course-page .course-player-attachments-list li a:hover,
body.course-page .course-player-attachments-list li a:focus-visible {
    border-color: rgba(8, 114, 58, 0.24) !important;
    box-shadow: 0 12px 24px rgba(17, 49, 32, 0.08) !important;
    outline: none !important;
}

body.course-page .course-player-review-item-thumb {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--course-amber-100) !important;
    overflow: hidden;
}

body.course-page .course-player-review-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.course-page .course-player-review-item-thumb-fallback {
    color: var(--course-amber-500) !important;
    font-weight: 900 !important;
}

body.course-page .course-player-review-item-copy {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

body.course-page .course-player-review-item-kicker {
    color: var(--course-ink-500) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

body.course-page .course-player-review-item-title {
    color: var(--course-ink-900) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
}

body.course-page .course-player-review-item-meta {
    color: var(--course-ink-500) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
}

body.course-page .course-player-review-item-arrow {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--course-green-800) !important;
    background: var(--course-mint-100) !important;
    font-size: 1.25rem !important;
    line-height: 1;
}

body.course-page .course-player-review-stage {
    display: none !important;
}

body.course-page .course-outline-panel {
    width: 100% !important;
    min-width: 0 !important;
    height: min(var(--course-outline-height, 760px), calc(100vh - 2.5rem)) !important;
    max-height: calc(100vh - 2.5rem) !important;
    position: static !important;
    align-self: stretch !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.course-page .course-outline-sheet {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--course-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: var(--course-shadow-soft) !important;
    padding: 0 !important;
}

body.course-page .course-outline-topline {
    display: none !important;
}

body.course-page .course-outline-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.9rem !important;
    padding: 1.15rem 1.25rem !important;
    border: 0 !important;
    background: linear-gradient(180deg, var(--course-green-600), var(--course-green-800)) !important;
    color: #ffffff !important;
}

body.course-page .course-outline-icon {
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.course-page .course-outline-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

body.course-page .course-outline-header-copy h2,
body.course-page .course-outline-header h2 {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.12rem !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

body.course-page .course-outline-header-percent {
    min-width: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 900;
}

body.course-page .course-outline-header-actions {
    grid-column: 1 / -1 !important;
    display: none !important;
}

body.course-page .course-outline-summary {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 1.2rem !important;
    padding: 1.1rem 1.25rem 0.8rem !important;
    border-bottom: 1px solid rgba(8, 114, 58, 0.08) !important;
    background: #ffffff !important;
}

body.course-page .course-outline-summary-chip {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--course-ink-500) !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

body.course-page .course-outline-summary-chip strong {
    color: var(--course-ink-900) !important;
    font-weight: 900 !important;
}

body.course-page .course-outline-progressbar {
    padding: 0 1.25rem 1rem !important;
    background: #ffffff !important;
}

body.course-page .course-outline-progressbar-track {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: #d9d9d9 !important;
    overflow: hidden;
}

body.course-page .course-outline-progressbar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--course-green-600), var(--course-green-800)) !important;
}

body.course-page .course-outline-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    align-content: start !important;
    gap: 1.15rem !important;
    overflow-y: auto !important;
    padding: 1.15rem 1rem 1.25rem !important;
    background: #f8fbf9 !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 114, 58, 0.36) transparent;
}

body.course-page .course-outline-list::-webkit-scrollbar {
    width: 8px;
}

body.course-page .course-outline-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(8, 114, 58, 0.32);
}

body.course-page .outline-section {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.course-page .outline-section-title {
    margin: 0 0 0.75rem !important;
    padding: 0 0.35rem !important;
    color: var(--course-green-800) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase;
    opacity: 1 !important;
}

body.course-page .outline-section-title::before {
    content: none !important;
}

body.course-page .outline-lessons {
    display: grid !important;
    gap: 0.55rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.course-page .outline-lesson {
    width: 100%;
    min-height: 62px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.72rem 0.78rem !important;
    border: 1px solid rgba(16, 42, 30, 0.1) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--course-ink-900) !important;
    box-shadow: 0 8px 18px rgba(17, 49, 32, 0.04) !important;
    transform: none !important;
}

body.course-page .outline-lesson::before,
body.course-page .outline-lesson::after {
    content: none !important;
}

body.course-page .outline-lesson:hover,
body.course-page .outline-lesson:focus-visible {
    border-color: rgba(8, 114, 58, 0.24) !important;
    background: #ffffff !important;
    box-shadow: 0 12px 24px rgba(17, 49, 32, 0.08) !important;
    outline: none !important;
}

body.course-page .outline-lesson.is-active,
body.course-page .outline-lesson.is-active:hover,
body.course-page .outline-lesson.is-active:focus-visible {
    background: linear-gradient(180deg, var(--course-green-700), var(--course-green-800)) !important;
    border-color: var(--course-green-800) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(8, 114, 58, 0.28) !important;
}

body.course-page .outline-lesson.is-active .outline-lesson-title-text {
    color: #ffffff !important;
}

body.course-page .outline-lesson.is-active .outline-lesson-number,
body.course-page .outline-lesson.is-active .outline-lesson-preview-badge,
body.course-page .outline-lesson.is-active .outline-lesson-attachment-icon,
body.course-page .outline-lesson.is-active .outline-lesson-review-icon {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.course-page .outline-lesson.is-active .outline-lesson-state,
body.course-page .outline-lesson.is-active.is-watched .outline-lesson-state {
    background: linear-gradient(180deg, #0a8f49, #08723a) !important;
    color: #ffffff !important;
}

body.course-page .outline-lesson.is-active .outline-lesson-state svg,
body.course-page .outline-lesson.is-active .outline-lesson-state svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

body.course-page .outline-lesson.is-active.is-watched .outline-lesson-state::before {
    color: #ffffff !important;
}

body.course-page .outline-lesson.is-active .outline-lesson-go,
body.course-page .outline-lesson.is-active .outline-lesson-go[data-go-state="arrow"],
body.course-page .outline-lesson.is-active .outline-lesson-go[data-go-state="check"] {
    background: linear-gradient(180deg, #0a8f49, #08723a) !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    font-size: 1rem !important;
}

body.course-page .outline-lesson.is-watched:not(.is-active) {
    background: #ffffff !important;
    border-color: rgba(8, 114, 58, 0.16) !important;
}

body.course-page .outline-lesson-state {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef1ef;
    color: #8a948f;
    flex: 0 0 auto;
}

body.course-page .outline-lesson-state svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

body.course-page .outline-lesson[data-lesson-open="1"] .outline-lesson-state {
    background: var(--course-mint-100);
    color: var(--course-green-800);
}

body.course-page .outline-lesson.is-watched:not(.is-active) .outline-lesson-state {
    background: linear-gradient(180deg, var(--course-green-600), var(--course-green-800));
    color: #ffffff;
}

body.course-page .outline-lesson.is-watched .outline-lesson-state svg {
    display: none;
}

body.course-page .outline-lesson.is-watched .outline-lesson-state::before {
    content: "\2713";
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

body.course-page .outline-lesson-text {
    min-width: 0;
    display: grid !important;
    gap: 0.18rem !important;
}

body.course-page .outline-lesson-number {
    width: fit-content;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--course-ink-500) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.course-page .outline-lesson-title-text {
    color: var(--course-ink-900) !important;
    font-size: 0.9rem !important;
    font-weight: 900 !important;
    line-height: 1.28 !important;
}

body.course-page .outline-lesson-tail {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.4rem !important;
}

body.course-page .outline-lesson-go {
    --course-lock-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M7 10V8a5 5 0 0 1 10 0v2h1.2c.7 0 1.3.6 1.3 1.3v7.4c0 .7-.6 1.3-1.3 1.3H5.8c-.7 0-1.3-.6-1.3-1.3v-7.4c0-.7.6-1.3 1.3-1.3H7Zm2.5 0h5V8a2.5 2.5 0 0 0-5 0v2Z'/%3E%3C/svg%3E");
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--course-green-800) !important;
    box-shadow: none !important;
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.course-page .outline-lesson[data-lesson-open="0"] .outline-lesson-go {
    font-size: 0 !important;
    color: #9ba39f !important;
}

body.course-page .outline-lesson[data-lesson-open="0"] .outline-lesson-go::before {
    content: "";
    width: 15px;
    height: 15px;
    background: currentColor;
    -webkit-mask: var(--course-lock-icon) center / contain no-repeat;
    mask: var(--course-lock-icon) center / contain no-repeat;
}

body.course-page .outline-lesson-go[data-go-state="check"] {
    width: 26px !important;
    height: 26px !important;
    background: var(--course-green-700) !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
}

body.course-page .outline-lesson-attachment-icon,
body.course-page .outline-lesson-review-icon {
    width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 0.22rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--course-amber-100) !important;
    color: #a26f00 !important;
}

body.course-page .outline-lesson-attachment-icon svg,
body.course-page .outline-lesson-review-icon svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

body.course-page .outline-lesson-preview-badge {
    padding: 0.22rem 0.45rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--course-amber-100) !important;
    color: #8a6100 !important;
    box-shadow: none !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
}

body.course-page .course-achievement-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 1.05rem;
    padding: 1.35rem 1.45rem;
    border: 1px solid var(--course-line);
    border-radius: 18px;
    background: linear-gradient(135deg, #eff9f4 0%, #ffffff 100%);
    box-shadow: var(--course-shadow-soft);
}

body.course-page .course-achievement-card__icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--course-amber-500);
}

body.course-page .course-achievement-card__icon svg {
    width: 64px;
    height: 64px;
    fill: currentColor;
}

body.course-page .course-achievement-card__copy {
    min-width: 0;
    display: grid;
    gap: 0.45rem;
}

body.course-page .course-achievement-card h2 {
    margin: 0;
    color: var(--course-ink-900);
    font-family: 'Google Sans Flex', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0;
}

body.course-page .course-achievement-card p {
    margin: 0;
    color: var(--course-ink-500);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
}

body.course-page .course-achievement-card a {
    width: fit-content;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.9rem;
    border: 1px solid rgba(8, 114, 58, 0.2);
    border-radius: 8px;
    background: #ffffff;
    color: var(--course-green-800) !important;
    font-size: 0.84rem;
    font-weight: 900;
    text-decoration: none !important;
}

body.course-page .course-achievement-card a:hover,
body.course-page .course-achievement-card a:focus-visible {
    background: var(--course-mint-100);
    outline: none;
}

body.course-page .course-outline-fab {
    position: fixed !important;
    right: 2rem !important;
    bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px)) !important;
    left: auto !important;
    z-index: 1185 !important;
    min-width: 148px !important;
    width: auto !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    padding: 0.7rem 0.95rem !important;
    border: 1px solid rgba(8, 114, 58, 0.18) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--course-green-800) !important;
    box-shadow: 0 12px 28px rgba(17, 49, 32, 0.14) !important;
    transform: none !important;
}

body.course-page .course-outline-fab:hover,
body.course-page .course-outline-fab:focus-visible {
    border-color: rgba(8, 114, 58, 0.32) !important;
    background: var(--course-mint-100) !important;
    color: var(--course-green-900) !important;
    outline: none !important;
}

body.course-page .course-outline-fab__icon {
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

body.course-page .course-outline-fab__label {
    color: currentColor !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    line-height: 1.2;
}

body.course-page .course-outline-fab__count {
    min-width: 26px !important;
    height: 26px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.42rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--course-green-600) !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

body.course-page .course-outline-fab__count strong {
    color: inherit !important;
}

body.course-page.course-outline-mobile-open .course-outline-fab,
body.course-page.course-game-active .course-outline-fab,
body.course-page.course-review-overlay-open .course-outline-fab,
body.course-page.course-todo-open .course-outline-fab {
    opacity: 0 !important;
    pointer-events: none !important;
}

@media (min-width: 769px) {
    body.course-page .course-outline-fab:not([data-desktop-todo-mode="1"]) {
        display: none !important;
    }
}

body.course-page .course-message-card {
    border: 1px solid var(--course-line) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: var(--course-shadow-soft) !important;
}

@media (max-width: 1100px) {
    body.course-page .container {
        width: min(100% - 2rem, 980px) !important;
    }

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

    body.course-page .course-side-column {
        position: static;
    }

    body.course-page .course-outline-panel {
        height: auto !important;
        max-height: none !important;
    }

    body.course-page .course-outline-sheet {
        max-height: none !important;
    }

    body.course-page .course-outline-list {
        max-height: 560px !important;
    }
}

@media (max-width: 768px) {
    body.course-page .course-shell {
        padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.course-page .container {
        width: min(100% - 1.25rem, 720px) !important;
    }

    body.course-page .course-shell-head {
        min-height: 92px;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.75rem !important;
        padding: 0.75rem 0 !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger {
        grid-column: 1 / 3 !important;
        justify-self: stretch !important;
    }

    body.course-page .course-shell-head > .course-todo-trigger:not(.is-mobile-sticky) {
        width: 100% !important;
        max-width: none !important;
    }

    body.course-page .course-shell-head__main {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 0.95rem 0.8rem !important;
    }

    body.course-page .course-center-logo img {
        width: 106px !important;
    }

    body.course-page .course-breadcrumb {
        grid-column: 1 / -1;
        max-width: 100%;
        gap: 0.45rem;
        overflow-x: auto;
        margin-top: 0.1rem;
        padding-bottom: 0.1rem;
        font-size: 0.82rem;
        scrollbar-width: none;
    }

    body.course-page .course-breadcrumb::-webkit-scrollbar {
        display: none;
    }

    body.course-page .course-breadcrumb__current {
        max-width: 210px;
    }

    body.course-page .course-back {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        justify-self: end !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 0 !important;
    }

    body.course-page .course-back__icon {
        width: 1.2rem;
        height: 1.2rem;
    }

    body.course-page .course-layout {
        margin-top: 0.85rem !important;
        gap: 1rem !important;
    }

    body.course-page .course-video-wrapper {
        min-height: 0;
        border-radius: 14px 14px 0 0 !important;
    }

    body.course-page .course-player-card,
    body.course-page .course-outline-sheet,
    body.course-page .course-achievement-card {
        border-radius: 14px !important;
    }

    body.course-page .course-player-header {
        padding: 1rem 1rem 0 !important;
    }

    body.course-page .course-player-header.is-empty {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        text-align: center !important;
        margin: 1rem 1rem 1.25rem !important;
        padding: 1.2rem !important;
        gap: 0.85rem !important;
    }

    body.course-page .course-player-header.is-empty .course-player-empty-text {
        justify-items: center;
    }

    body.course-page .course-player-header.is-empty .course-player-badge {
        margin: 0 auto;
    }

    body.course-page .course-player-title {
        font-size: 1.25rem !important;
    }

    body.course-page .course-player-controls {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 1rem !important;
        gap: 0.65rem !important;
    }

    body.course-page .course-player-watched {
        grid-column: 1 / -1;
        margin-right: 0;
    }

    body.course-page .course-btn {
        width: 100% !important;
    }

    body.course-page .course-player-resources {
        margin: 0 1rem 1rem !important;
        padding: 0.85rem !important;
        width: auto !important;
        min-width: 0 !important;
    }

    body.course-page .course-player-resource-tabs {
        width: 100% !important;
    }

    body.course-page .course-player-resource-tab {
        flex: 1 1 0;
    }

    body.course-page .course-player-review-item {
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
    }

    body.course-page .course-player-review-item-thumb {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    body.course-page .course-outline-panel,
    body.course-page.course-outline-mobile-open .course-outline-panel {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2200 !important;
        display: flex !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: rgba(12, 26, 20, 0.42) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    body.course-page.course-outline-mobile-open .course-outline-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.course-page .course-outline-sheet,
    body.course-page.course-outline-mobile-open .course-outline-sheet {
        width: min(100%, 440px) !important;
        height: 100% !important;
        margin-left: auto !important;
        border-radius: 18px 0 0 18px !important;
        transform: translateX(100%) !important;
        transition: transform 0.22s ease !important;
    }

    body.course-page.course-outline-mobile-open .course-outline-sheet {
        transform: translateX(0) !important;
    }

    body.course-page .course-outline-header {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
    }

    body.course-page .course-outline-header-actions {
        grid-column: 1 / -1 !important;
        display: flex !important;
        justify-content: flex-start !important;
        gap: 0.5rem !important;
        padding-top: 0.25rem;
    }

    body.course-page .course-outline-scroll-bottom,
    body.course-page .course-outline-close {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 34px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        padding: 0.45rem 0.75rem !important;
        border: 1px solid rgba(255, 255, 255, 0.34) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }

    body.course-page .course-outline-scroll-bottom::before {
        width: 0.85rem !important;
        height: 0.85rem !important;
        opacity: 1 !important;
    }

    body.course-page .course-outline-summary {
        flex-wrap: wrap !important;
        gap: 0.55rem 1rem !important;
    }

    body.course-page .course-outline-list {
        max-height: none !important;
    }

    body.course-page .course-achievement-card {
        grid-template-columns: 56px minmax(0, 1fr);
        padding: 1rem;
    }

    body.course-page .course-achievement-card__icon,
    body.course-page .course-achievement-card__icon svg {
        width: 52px;
        height: 52px;
    }

    body.course-page .course-outline-fab {
        left: 0.75rem !important;
        right: 0.75rem !important;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 56px !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: center !important;
        justify-content: stretch !important;
        gap: 0.7rem !important;
        padding: 0.6rem 0.78rem !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, var(--course-green-700), var(--course-green-900)) !important;
        color: #ffffff !important;
        box-shadow: 0 16px 34px rgba(6, 99, 53, 0.32) !important;
    }

    body.course-page .course-outline-fab:hover,
    body.course-page .course-outline-fab:focus-visible {
        border-color: rgba(255, 255, 255, 0.42) !important;
        background: linear-gradient(180deg, var(--course-green-600), var(--course-green-900)) !important;
        color: #ffffff !important;
        outline: none !important;
    }

    body.course-page .course-outline-fab__icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
    }

    body.course-page .course-outline-fab__label {
        min-width: 0;
        text-align: left;
        color: #ffffff !important;
        font-size: 0.94rem !important;
        line-height: 1.18 !important;
    }

    body.course-page .course-outline-fab__count {
        min-width: 48px !important;
        height: 32px !important;
        padding: 0 0.58rem !important;
        background: #ffffff !important;
        color: var(--course-green-800) !important;
        font-size: 0.82rem !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1) !important;
    }
}

@media (max-width: 520px) {
    body.course-page .course-video-wrapper {
        min-height: 0;
    }

    body.course-page .course-player-controls {
        grid-template-columns: 1fr !important;
    }

    body.course-page .outline-lesson {
        grid-template-columns: 34px minmax(0, 1fr) auto !important;
        gap: 0.6rem !important;
        padding: 0.68rem !important;
    }

    body.course-page .outline-lesson-state {
        width: 32px;
        height: 32px;
    }
}

/* Course to-do dialog UX pass. Keep overrides here because course-modern.css loads last. */
body.course-page .course-todo-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(1rem, 3vw, 1.5rem) !important;
}

body.course-page .course-todo-dialog {
    width: min(680px, calc(100vw - 2rem)) !important;
    max-height: min(92dvh, 820px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

body.course-page .course-todo-dialog__head {
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 1.25rem 1.5rem 1rem !important;
    background: #ffffff !important;
}

body.course-page .course-todo-dialog__head h2 {
    font-size: clamp(1.28rem, 2.4vw, 1.6rem) !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

body.course-page .course-todo-dialog__subtitle {
    margin-top: 0.34rem !important;
    font-size: 0.92rem !important;
    line-height: 1.35 !important;
}

body.course-page .course-todo-dialog__close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    flex: 0 0 auto !important;
    font-size: 1.08rem !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18) !important;
}

body.course-page .course-todo-mood {
    flex: 0 0 auto !important;
    margin: 0.85rem 1.5rem 0 !important;
    width: auto !important;
    padding: 0.72rem 0.85rem !important;
    border-radius: 16px !important;
}

body.course-page .course-todo-mood__icon {
    width: 2.18rem !important;
    height: 2.18rem !important;
}

body.course-page .course-todo-mood__text {
    font-size: 0.9rem !important;
    line-height: 1.32 !important;
}

body.course-page .course-todo-tabs {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 1rem 1.5rem 0 !important;
    padding: 0.36rem !important;
}

body.course-page .course-todo-tab {
    min-height: 46px !important;
    padding: 0.58rem 0.95rem !important;
    gap: 0.45rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

body.course-page .course-todo-tab__count {
    min-width: 1.72rem !important;
    min-height: 1.72rem !important;
    padding: 0 0.42rem !important;
    font-size: 0.78rem !important;
}

body.course-page .course-todo-panels {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding-top: 0.45rem !important;
}

body.course-page .course-todo-panel {
    min-height: 0 !important;
}

body.course-page .course-todo-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0.7rem 1.5rem 1.35rem !important;
    gap: 0.72rem !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 114, 58, 0.28) transparent;
}

body.course-page .course-todo-list::-webkit-scrollbar {
    width: 6px !important;
}

body.course-page .course-todo-list::-webkit-scrollbar-track {
    background: transparent !important;
}

body.course-page .course-todo-list::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(8, 114, 58, 0.24) !important;
}

body.course-page .course-todo-list > li {
    min-width: 0;
}

body.course-page .course-todo-item {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    gap: 0.78rem !important;
    align-items: start !important;
    padding: 0.95rem 1rem !important;
    border-radius: 18px !important;
}

body.course-page .course-todo-item__state {
    width: 38px !important;
    height: 38px !important;
    margin-top: 0 !important;
}

body.course-page .course-todo-item__body {
    gap: 0.42rem !important;
}

body.course-page .course-todo-item__title {
    font-size: 1.02rem !important;
    line-height: 1.24 !important;
    letter-spacing: 0 !important;
}

body.course-page .course-todo-item__meta {
    gap: 0.38rem !important;
}

body.course-page .course-todo-item__meta-chip {
    min-width: 0;
    max-width: 100%;
    padding: 0.24rem 0.58rem !important;
    font-size: 0.74rem !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere;
}

body.course-page .course-todo-item__reward {
    max-width: 100% !important;
    min-width: 0;
    padding: 0.2rem 0.52rem 0.2rem 0.24rem !important;
}

body.course-page .course-todo-item__reward span {
    max-width: 100% !important;
    min-width: 0 !important;
}

@media (max-width: 640px) {
    body.course-page .course-todo-overlay {
        align-items: flex-end !important;
        padding: 0.85rem 0.65rem 0 !important;
    }

    body.course-page .course-todo-dialog {
        width: 100% !important;
        max-height: calc(100dvh - 1rem) !important;
        border-radius: 24px 24px 0 0 !important;
        border-bottom: 0 !important;
    }

    body.course-page .course-todo-dialog__head {
        padding: 1rem 1.1rem 0.8rem !important;
    }

    body.course-page .course-todo-dialog__head h2 {
        font-size: 1.38rem !important;
    }

    body.course-page .course-todo-dialog__subtitle {
        font-size: 0.9rem !important;
    }

    body.course-page .course-todo-dialog__close {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
    }

    body.course-page .course-todo-mood {
        margin: 0.7rem 1rem 0 !important;
        padding: 0.62rem 0.72rem !important;
        gap: 0.55rem !important;
    }

    body.course-page .course-todo-mood__icon {
        width: 2rem !important;
        height: 2rem !important;
    }

    body.course-page .course-todo-mood__text {
        font-size: 0.84rem !important;
    }

    body.course-page .course-todo-tabs {
        margin: 0.82rem 1rem 0 !important;
        width: auto !important;
    }

    body.course-page .course-todo-tab {
        min-height: 44px !important;
        padding: 0.5rem 0.62rem !important;
        font-size: 0.88rem !important;
    }

    body.course-page .course-todo-tab__count {
        min-width: 1.6rem !important;
        min-height: 1.6rem !important;
        font-size: 0.72rem !important;
    }

    body.course-page .course-todo-list {
        padding: 0.68rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        gap: 0.62rem !important;
        scrollbar-width: none;
    }

    body.course-page .course-todo-list::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
    }

    body.course-page .course-todo-item {
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 0.68rem !important;
        padding: 0.82rem 0.78rem !important;
        border-radius: 16px !important;
    }

    body.course-page .course-todo-item__state {
        width: 34px !important;
        height: 34px !important;
    }

    body.course-page .course-todo-item__title {
        font-size: 1rem !important;
        line-height: 1.22 !important;
    }

    body.course-page .course-todo-item__meta {
        gap: 0.32rem !important;
    }

    body.course-page .course-todo-item__meta-chip {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    body.course-page .course-todo-item__reward span {
        font-size: 0.73rem !important;
    }
}

@media (max-width: 380px) {
    body.course-page .course-todo-dialog__head {
        padding-inline: 0.95rem !important;
    }

    body.course-page .course-todo-dialog__head h2 {
        font-size: 1.26rem !important;
    }

    body.course-page .course-todo-dialog__subtitle {
        font-size: 0.84rem !important;
    }

    body.course-page .course-todo-mood,
    body.course-page .course-todo-tabs {
        margin-inline: 0.85rem !important;
    }

    body.course-page .course-todo-list {
        padding-inline: 0.85rem !important;
    }

    body.course-page .course-todo-tab {
        gap: 0.34rem !important;
        padding-inline: 0.48rem !important;
        font-size: 0.82rem !important;
    }
}

@media (max-height: 680px) and (max-width: 640px) {
    body.course-page .course-todo-dialog__head {
        padding-block: 0.85rem 0.65rem !important;
    }

    body.course-page .course-todo-mood {
        margin-top: 0.55rem !important;
    }

    body.course-page .course-todo-tabs {
        margin-top: 0.65rem !important;
    }
}