/* Base RTL/LTR variables */
    :root {
      --direction: ltr;
      --text-align: left;
      --padding-start: left;
      --padding-end: right;
      --font-family: 'open sans', arial;
      --brand-color: #012f7b;
      --hero-color: #464646;
      --body-bg-color: #f6f6f6;
      --body-copy-color: #1f2937;
      --heading-color: #464646;
      --link-color: #0029ff;
      --heading-font-family: 'open sans', arial;
    }

    /* Force background colors to print */
    html {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }

    /* Font fallbacks — map editor fonts to available web/system fonts */
    font[face="Palatino Linotype"], [style*="Palatino Linotype"] { font-family: 'Lora', 'Palatino Linotype', 'Book Antiqua', Georgia, serif; }
    font[face="Comic Sans MS"], [style*="Comic Sans MS"] { font-family: 'Comic Neue', 'Comic Sans MS', cursive; }
    font[face="Courier New"], [style*="Courier New"] { font-family: 'Courier Prime', 'Courier New', monospace; }
    font[face="Lucida Console"], [style*="Lucida Console"] { font-family: 'Courier Prime', 'Lucida Console', monospace; }
    font[face="Helvetica Neue"], [style*="Helvetica Neue"] { font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
    font[face="Lucida Sans Unicode"], [style*="Lucida Sans Unicode"] { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif; }
    font[face="Impact"], [style*="Impact"] { font-family: Anton, Impact, Arial Black, sans-serif; }
    font[face="Arial Black"], [style*="Arial Black"] { font-family: Arial Black, Arial, sans-serif; }

    /* Heading font family */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--heading-font-family);
    }

    /* Avatar images */
    .course-cover-avatar img,
    .course-about-instructor-avatar img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Base styles */
    body {
      font-family: var(--font-family);
      direction: var(--direction);
      text-align: var(--text-align);
      background-color: var(--body-bg-color);
      color: var(--body-copy-color);
      margin: 0;
      padding: 0;
    }

    /* Fixed background layer that repeats on every printed page */
    .pdf-bg-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--body-bg-color);
      z-index: -1;
    }

    .course-main {
      font-size: 13px;
      line-height: 1.4em;
      margin: 0;
      padding: 0 48px;
      direction: var(--direction);
      text-align: var(--text-align);
      box-sizing: border-box;
      position: relative;
      z-index: 1;
    }

    *, *::before, *::after {
      box-sizing: border-box;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    img, .cb-hero, .pdf-video-thumbnail, .content-image {
      max-width: 100%;
    }

    /* ─── Cover / About Page ─── */
    .course-cover-hero {
      background-color: var(--hero-color);
      color: #fff;
      padding: 40px 36px 36px;
      margin-bottom: 24px;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
    }

    .course-cover-hero-bg {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      opacity: 0.15;
      overflow: hidden;
    }

    /* object-fit: cover doesn't work in Puppeteer PDF, so we simulate it
       with min-width/min-height + absolute centering + overflow:hidden on parent. */
    .course-cover-hero-bg img {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      min-width: 120%;
      min-height: 120%;
      width: auto;
      height: auto;
      display: block;
    }

    .course-cover-hero-inner {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 32px;
      align-items: flex-start;
    }

    .course-cover-text {
      flex: 1;
    }

    .course-cover-image {
      width: 280px;
      min-width: 280px;
    }

    /* Note: border-radius does not clip <img> content in Puppeteer PDF. */
    .course-cover-image img {
      width: 100%;
      display: block;
      border: 7px solid #fff;
      border-radius: 12px;
      box-sizing: border-box;
      background-color: #fff;
      outline: 1px solid #fff;
    }

    .course-title {
      font-weight: 800;
      font-size: 28px;
      line-height: 1.25;
      margin: 0 0 14px 0;
      color: #fff;
    }

    .course-cover-desc {
      font-size: 12px;
      line-height: 1.7;
      color: rgba(255,255,255,0.8);
      margin-bottom: 20px;
    }

    .course-cover-author {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
    }

    .course-cover-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
    }

    .course-cover-author-name {
      font-size: 12px;
      color: rgba(255,255,255,0.7);
    }

    .course-cover-author-name strong {
      color: #fff;
    }

    .pdf-export-mode-badge {
      position: absolute;
      top: 12px;
      right: 16px;
      z-index: 2;
      background: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.7);
      font-size: 9px;
      font-weight: 600;
      padding: 3px 10px;
      border-radius: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .course-about-wrapper {
      padding: 24px 0;
    }

    .course-about-section {
      margin-bottom: 24px;
      margin-top: 36px;
    }

    .course-about-section:first-child {
      margin-top: 0;
    }

    .course-about-section:last-child {
      margin-bottom: 0;
    }

    .course-about-heading {
      font-size: 15px;
      font-weight: 700;
      color: var(--heading-color);
      margin: 0 0 10px 0;
    }

    .course-about-objectives ol {
      margin: 0;
      padding-left: 20px;
    }

    .course-about-objectives li {
      font-size: 12px;
      line-height: 1.6;
      color: #333;
      margin-bottom: 4px;
    }

    .course-about-instructor {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 16px;
      background: #f5f5f7;
      border-radius: 10px;
    }

    .course-about-instructor-avatar {
      width: 48px;
      height: 48px;
      min-width: 48px;
      border-radius: 50%;
      background: var(--hero-color);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 18px;
    }

    .course-about-instructor-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--heading-color);
      margin-bottom: 2px;
    }

    .course-about-instructor-bio {
      font-size: 11px;
      line-height: 1.5;
      color: #555;
      margin: 0;
    }

    .course-section {
      padding-top: 10px;
      direction: var(--direction);
      text-align: var(--text-align);
    }

    .course-highlight {
      color: #b44de9;
    }

    .course-skills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .course-skill-badge {
      display: inline-block;
      background-color: var(--heading-color);
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 14px;
      border-radius: 6px;
    }

    .course-support {
      padding: 6px 0;
    }

    /* ─── Hero Banner ─── */
    .cb-hero {
      position: relative;
      width: 100%;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px 30px;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0;
      page-break-inside: avoid;
    }

    .cb-hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      z-index: 1;
    }

    .cb-hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      max-width: 90%;
    }

    .cb-hero-title {
      font-size: 28px;
      font-weight: 600;
      color: white;
      line-height: 1.3;
      margin-bottom: 16px;
    }

    .cb-hero-text {
      font-size: 14px;
      color: white;
      line-height: 1.7;
    }

    .cb-hero-text p {
      margin: 0 0 8px 0;
    }

    .cb-hero-text p:last-child {
      margin-bottom: 0;
    }

    /* ─── Page breaks ─── */
    .course-new-page {
      page-break-before: always;
    }

    .course-lesson {
      page-break-before: always;
      font-size: 20px;
      font-weight: 800;
      color: var(--heading-color);
      margin: 0 0 6px 0;
      line-height: 1.3;
    }

    .course-topic {
      font-size: 15px;
      font-weight: 700;
      color: var(--heading-color);
      margin: 0 0 10px 0;
      line-height: 1.3;
    }

    /* ─── Text editor headings ─── */
    .course-activity-content h1 {
      font-size: 18px;
      font-weight: 700;
      color: var(--heading-color);
      margin: 10px 0 6px 0;
      line-height: 1.3;
    }

    .course-activity-content h2 {
      font-size: 16px;
      font-weight: 700;
      color: var(--heading-color);
      margin: 8px 0 4px 0;
      line-height: 1.3;
    }

    .course-activity-content h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--heading-color);
      margin: 6px 0 4px 0;
      line-height: 1.3;
    }

    /* ─── Lists ─── */
    ul {
      list-style-type: disc;
      padding-inline-start: 20px;
      padding-inline-end: 0;
    }

    ul li {
      display: list-item;
      direction: var(--direction);
      text-align: var(--text-align);
    }

    .course-toc ol {
      list-style-type: none;
      direction: var(--direction);
      text-align: var(--text-align);
      padding-inline-start: 20px;
      padding-inline-end: 0;
    }

    /* ─── Tables ─── */
    .course-content table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #e0e0e0;
      direction: var(--direction);
      text-align: var(--text-align);
      margin: 10px 0;
      font-size: 13px;
    }

    .course-content table th {
      background-color: #666;
      color: white;
      font-weight: bold;
      padding: 10px 14px;
      text-align: var(--text-align);
      border: none;
      border-right: 1px solid rgba(255,255,255,0.2);
    }

    .course-content table td {
      padding: 10px 14px;
      border-bottom: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #333;
      line-height: 1.5;
      vertical-align: top;
    }

    .course-content table th:last-child,
    .course-content table td:last-child {
      border-right: none;
    }

    .course-content table tr:last-child td {
      border-bottom: none;
    }

    .course-content table tr {
      page-break-inside: avoid;
    }

    /* ─── Quiz ─── */
    .pdf-quiz {
      margin: 14px 0;
    }

    .pdf-quiz-card {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 12px;
      background-color: white;
      page-break-inside: avoid;
    }

    .pdf-quiz-number {
      font-size: 11px;
      font-weight: 600;
      color: #999;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
    }

    .pdf-quiz-question {
      font-size: 13px;
      font-weight: bold;
      color: var(--heading-color);
      margin-bottom: 14px;
      line-height: 1.5;
    }

    .pdf-quiz-hint {
      font-style: italic;
      font-size: 13px;
      color: #888;
      margin-bottom: 10px;
    }

    .pdf-quiz-answers {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .pdf-quiz-answer {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: #333;
      line-height: 1.4;
    }

    .pdf-quiz-checkbox {
      width: 16px;
      height: 16px;
      border: 1.5px solid #ccc;
      border-radius: 4px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .pdf-quiz-answer-correct {
      background: #e8f5e9;
      border-radius: 6px;
      padding: 4px 8px;
      margin: -4px -8px;
    }

    .pdf-quiz-answer-correct .pdf-quiz-checkbox {
      border-color: #4caf50;
      background: #4caf50;
    }

    .pdf-quiz-model-answer {
      margin-top: 8px;
      padding: 10px 12px;
      background: #e8f5e9;
      border-radius: 10px;
    }

    .pdf-quiz-model-answer-label {
      font-size: 10px;
      font-weight: 700;
      color: #2e7d32;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .pdf-quiz-model-answer-text {
      font-size: 12px;
      color: #333;
      line-height: 1.6;
    }

    .pdf-quiz-explanation {
      font-size: 13px;
      color: #333;
      line-height: 1.5;
      padding-left: 8px;
      margin-top: 4px;
    }

    /* ─── Match / Drag-and-Drop Questions ─── */
    .pdf-match-table {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 10px;
    }

    .pdf-match-row {
      display: flex;
      align-items: stretch;
    }

    .pdf-match-prompt {
      flex: 1;
      background: #c7c7c7;
      border-radius: 8px 0 0 8px;
      padding: 14px 18px;
      font-size: 13px;
      color: #333;
      line-height: 1.4;
      display: flex;
      align-items: center;
    }

    .pdf-match-answer {
      flex: 1;
      border-radius: 0 8px 8px 0;
      padding: 14px 18px 14px 24px;
      font-size: 13px;
      line-height: 1.4;
      display: flex;
      align-items: center;
      position: relative;
    }

    .pdf-match-answer::before {
      content: "";
      position: absolute;
      left: -12px;
      top: 50%;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      z-index: 2;
    }

    .pdf-match-answer-filled {
      background: #d4edda;
      color: #2e7d32;
      font-weight: 600;
    }

    .pdf-match-answer-filled::before {
      background-color: #d4edda;
    }

    .pdf-match-answer-empty {
      background: #f7f7f7;
      border: 1.5px dashed #ccc;
      min-height: 44px;
    }

    .pdf-match-answer-empty::before {
      background-color: #f7f7f7;
      border: 1.5px dashed #ccc;
    }

    .pdf-match-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid #e0e0e0;
    }

    .pdf-match-option {
      background: #f7f7f7;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 8px 14px 8px 22px;
      font-size: 12px;
      color: #555;
      position: relative;
    }

    .pdf-match-option::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: #f7f7f7;
      border: 1px solid #ccc;
      border-radius: 50%;
    }

    .pdf-quiz-textarea {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      min-height: 120px;
      margin-top: 8px;
    }

    /* ─── Survey ─── */
    .pdf-survey-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e0e0e0;
    }

    .pdf-survey-header .pdf-online-icon-survey {
      margin: 0;
      opacity: 0.6;
    }

    .pdf-survey-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--heading-color);
    }

    .pdf-survey-question {
      margin-bottom: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid #f0f0f0;
    }

    .pdf-survey-question:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .pdf-survey-question-num {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: #999;
      margin-bottom: 6px;
    }

    .pdf-survey-stars {
      display: flex;
      gap: 4px;
      margin-top: 8px;
    }

    .pdf-survey-star {
      font-size: 24px;
      color: #ccc;
    }

    /* ─── Number List ─── */
    .cb-numberlist {
      margin: 20px 0;
    }

    .cb-numberlist-item {
      display: flex;
      align-items: center;
      padding: 18px 20px;
      min-height: 60px;
    }

    .cb-numberlist-circle {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      border-radius: 50%;
      background-color: #666;
      color: white;
      font-weight: 600;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-right: 16px;
    }

    .cb-numberlist-content {
      flex: 1;
      font-size: 13px;
      color: #333;
      line-height: 1.5;
      min-width: 0;
    }

    .cb-numberlist-content p {
      margin: 0 0 4px 0;
    }

    .cb-numberlist-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── Promo Cards ─── */
    .cb-promo-cards {
      display: flex;
      gap: 16px;
      margin: 20px 0;
    }

    .cb-promo-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: white;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      page-break-inside: avoid;
      position: relative;
    }

    .cb-promo-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background-color: #555;
    }

    /* object-fit: cover doesn't work in Puppeteer PDF */
    .cb-promo-image-section {
      width: 100%;
      height: 160px;
      background-color: #f5f5f5;
      overflow: hidden;
      position: relative;
    }

    .cb-promo-image {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    .cb-promo-content-section {
      padding: 20px;
      text-align: center;
    }

    .cb-promo-heading {
      font-size: 15px;
      font-weight: bold;
      color: var(--heading-color);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .cb-promo-content {
      font-size: 13px;
      color: #555;
      line-height: 1.5;
    }

    .cb-promo-content p {
      margin: 0 0 6px 0;
    }

    .cb-promo-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── Video Card ─── */
    .pdf-video-card-link {
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .pdf-video-card {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      margin: 20px 0;
      background-color: #fafafa;
      page-break-inside: avoid;
    }

    .pdf-video-thumbnail {
      position: relative;
      width: 100%;
      height: 320px;
      background-color: #222;
      overflow: hidden;
    }

    /* object-fit: cover doesn't work in Puppeteer PDF */
    .pdf-video-thumbnail img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      display: block;
    }

    .pdf-video-no-thumb {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pdf-video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 60px;
      height: 60px;
      min-width: 60px;
      min-height: 60px;
      max-width: 60px;
      max-height: 60px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #333;
      padding-left: 4px;
    }

    .pdf-video-no-thumb .pdf-video-play {
      position: static;
      transform: none;
    }

    .pdf-video-info {
      padding: 14px 20px;
    }

    .pdf-video-link {
      display: block;
      font-size: 12px;
      color: #4a86c8;
      text-decoration: underline;
      word-break: break-all;
      margin-top: 4px;
    }

    /* ─── Media Placeholder ─── */
    .pdf-media-placeholder {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 60px 20px;
      text-align: center;
      margin: 20px 0;
      background-color: #fafafa;
      page-break-inside: avoid;
    }

    .pdf-media-icon {
      font-size: 32px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .pdf-media-label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .pdf-media-url {
      font-size: 12px;
      color: #888;
      word-break: break-all;
    }

    /* ─── Downloads/Docs ─── */
    .pdf-docs-section {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 16px 20px;
      margin: 20px 0;
      page-break-inside: avoid;
      background-color: white;
    }

    .pdf-docs-title {
      font-size: 13px;
      font-weight: 600;
      color: #333;
      margin-bottom: 10px;
    }

    .pdf-docs-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      font-size: 13px;
      color: #555;
    }

    .pdf-docs-item:last-child {
      border-bottom: none;
    }

    .pdf-docs-icon {
      display: inline-block;
      width: 14px;
      height: 16px;
      border: 1.5px solid #999;
      border-radius: 2px;
      flex-shrink: 0;
      position: relative;
    }

    .pdf-docs-icon::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 5px;
      height: 5px;
      border-bottom: 1.5px solid #999;
      border-left: 1.5px solid #999;
      background: white;
    }

    .pdf-docs-filename {
      flex: 1;
    }

    .pdf-docs-online-note {
      font-size: 11px;
      color: #999;
      font-style: italic;
      margin-top: 8px;
    }

    /* ─── Standalone rubric ─── */
    .pdf-rubric-standalone {
      margin: 20px 0;
      page-break-inside: avoid;
    }

    /* ─── Assignment ─── */
    .pdf-assignment-section {
      margin: 20px 0;
      page-break-inside: avoid;
    }

    .pdf-assignment-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .pdf-assignment-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 2px solid var(--hero-color);
      border-radius: 3px;
      position: relative;
    }

    .pdf-assignment-icon::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 4px;
      width: 4px;
      height: 7px;
      border-right: 2px solid var(--hero-color);
      border-bottom: 2px solid var(--hero-color);
      transform: rotate(45deg);
    }

    .pdf-assignment-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--heading-color);
    }

    .pdf-assignment-desc {
      font-size: 12px;
      color: #555;
      line-height: 1.5;
    }

    .pdf-assignment-grade {
      font-size: 12px;
      color: #555;
      margin-bottom: 8px;
    }

    .pdf-assignment-rubric-title {
      font-size: 12px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .pdf-assignment-rubric {
      font-size: 12px;
      color: #444;
      line-height: 1.6;
      margin-bottom: 8px;
    }

    .pdf-assignment-submit {
      font-size: 11px;
      color: #999;
      font-style: italic;
    }

    /* ─── Online-only placeholder ─── */
    .pdf-online-placeholder {
      border: 1px dashed #ccc;
      border-radius: 10px;
      padding: 30px 20px;
      text-align: center;
      margin: 20px 0;
      background-color: #fafafa;
      page-break-inside: avoid;
    }

    .pdf-online-label {
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }

    .pdf-online-desc {
      font-size: 12px;
      color: #888;
    }

    .pdf-online-icon-discussion,
    .pdf-online-icon-survey,
    .pdf-online-icon-scorm,
    .pdf-media-icon-audio {
      width: 32px;
      height: 32px;
      margin: 0 auto 12px;
      opacity: 0.4;
    }

    .pdf-online-icon-discussion {
      border: 2px solid #666;
      border-radius: 8px;
      position: relative;
    }

    .pdf-online-icon-discussion::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 6px;
      width: 0;
      height: 0;
      border-left: 6px solid #666;
      border-right: 6px solid transparent;
      border-top: 6px solid #666;
      border-bottom: 6px solid transparent;
    }

    .pdf-online-icon-survey {
      border: 2px solid #666;
      border-radius: 4px;
      position: relative;
    }

    .pdf-online-icon-survey::after {
      content: "";
      position: absolute;
      top: 6px;
      left: 6px;
      width: 10px;
      height: 4px;
      border-bottom: 2px solid #666;
      border-top: 2px solid #666;
    }

    .pdf-online-icon-scorm {
      border: 2px solid #666;
      border-radius: 50%;
      position: relative;
    }

    .pdf-online-icon-scorm::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 10px;
      width: 0;
      height: 0;
      border-left: 10px solid #666;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
    }

    .pdf-media-icon-audio {
      border: 2px solid #666;
      border-radius: 50%;
      position: relative;
    }

    .pdf-media-icon-audio::after {
      content: "";
      position: absolute;
      top: 9px;
      left: 9px;
      width: 0;
      height: 0;
      border-left: 12px solid #666;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
    }

    /* ─── Images ─── */
    .content-image {
      max-width: 100%;
      height: auto;
      border-radius: 10px;
    }

    /* ─── Image gallery / instructions ─── */
    .pdf-gallery { margin: 16px 0; }
    .pdf-gallery-item { margin: 0 0 16px; page-break-inside: avoid; }
    .pdf-gallery-caption { font-size: 13px; color: #555; margin-top: 6px; line-height: 1.5; }
    .pdf-block-instruction { font-size: 13px; color: #555; margin: 0 0 12px; line-height: 1.5; }

    /* ─── Interactive AI scenario ─── */
    .pdf-scenario {
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: 20px;
      margin: 20px 0;
      background-color: #fafafa;
      page-break-inside: avoid;
    }
    .pdf-scenario-head { margin-bottom: 12px; }
    .pdf-scenario-badge {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #5b3fd9;
      background: #efeaff;
      border-radius: 6px;
      padding: 3px 8px;
      margin-bottom: 8px;
    }
    .pdf-scenario-title { font-size: 18px; font-weight: 700; color: #1a1a1a; }
    .pdf-scenario-pills { margin-top: 8px; }
    .pdf-scenario-pill {
      display: inline-block;
      font-size: 12px;
      color: #444;
      background: #ececec;
      border-radius: 999px;
      padding: 2px 10px;
      margin: 0 6px 6px 0;
    }
    .pdf-scenario-image { margin: 8px 0 12px; }
    .pdf-scenario-desc { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 10px; }
    .pdf-scenario-turn {
      border-top: 1px solid #e6e6e6;
      padding-top: 12px;
      margin-top: 12px;
      page-break-inside: avoid;
    }
    .pdf-scenario-step {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #888;
      margin-bottom: 4px;
    }
    .pdf-scenario-prompt {
      font-size: 14px;
      font-weight: 500;
      color: #1a1a1a;
      margin-bottom: 8px;
      line-height: 1.5;
    }
    .pdf-scenario-choices { list-style: none; margin: 0; padding: 0; }
    .pdf-scenario-choice {
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      padding: 8px 12px;
      margin-bottom: 6px;
      background: #fff;
    }
    .pdf-scenario-choice-text { font-size: 13px; color: #1a1a1a; }
    .pdf-scenario-pts { font-size: 12px; color: #2e7d32; font-weight: 600; }
    .pdf-scenario-reply { font-size: 12px; color: #666; margin-top: 4px; line-height: 1.5; }
    .pdf-scenario-feedback { border-top: 1px solid #e6e6e6; padding-top: 12px; margin-top: 12px; }
    .pdf-scenario-feedback-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #888;
      margin-bottom: 6px;
    }
    .pdf-scenario-band { font-size: 13px; color: #333; margin-bottom: 4px; }
    .pdf-scenario-band-pct { font-weight: 600; color: #5b3fd9; }
    .pdf-scenario-stars { color: #f5a623; }

    /* ─── Text blocks ─── */
    .pdf-text-block {
      margin: 12px 0;
      line-height: 1.6;
    }

    /* ─── Interactive content ─── */
    .cb-generic-section {
      margin: 8px 0;
    }

    .cb-generic-item {
      margin-bottom: 6px;
      padding: 4px 0;
      border-bottom: 1px solid #eee;
    }

    .cb-generic-item-title {
      font-weight: bold;
      margin-bottom: 2px;
    }

    .cb-generic-item-content {
      margin-left: 8px;
    }

    /* ─── Accordion ─── */
    .cb-accordion {
      margin: 10px 0;
    }

    .cb-accordion-card {
      border: 1px solid #d3d3d3;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
      background-color: white;
      page-break-inside: avoid;
    }

    .cb-accordion-header {
      background-color: #666;
      color: white;
      padding: 12px 20px;
      font-weight: bold;
      font-size: 13px;
      border-radius: 10px 10px 0 0;
    }

    .cb-accordion-title {
      display: block;
    }

    .cb-accordion-body {
      padding: 16px 20px;
      font-size: 13px;
      line-height: 1.5;
      color: #333;
    }

    .cb-accordion-body-inner {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .cb-accordion-icon {
      width: 60px;
      height: 60px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .cb-accordion-content {
      flex: 1;
      min-width: 0;
    }

    .cb-accordion-body p {
      margin: 0 0 4px 0;
    }

    .cb-accordion-body p:last-child {
      margin-bottom: 0;
    }

    .cb-accordion-body ul,
    .cb-accordion-body ol {
      margin: 0 0 4px 0;
      padding-left: 20px;
    }

    .cb-accordion-body li {
      margin-bottom: 0;
      line-height: 1.5;
    }

    /* ─── Quote ─── */
    .cb-quote {
      display: flex;
      align-items: stretch;
      margin: 30px 0;
      page-break-inside: avoid;
    }

    .cb-quote-accent-bar {
      width: 5px;
      flex-shrink: 0;
    }

    .cb-quote-body {
      flex: 1;
      padding-left: 20px;
      padding-top: 10px;
    }

    .cb-quote-mark {
      margin-bottom: 4px;
    }

    .cb-quote-mark svg {
      width: 60px;
      height: 50px;
    }

    .cb-quote-text {
      font-size: 13px;
      font-style: italic;
      font-family: Georgia, 'Times New Roman', serif;
      color: var(--heading-color);
      line-height: 1.9;
      letter-spacing: 0.3px;
    }

    .cb-quote-author {
      font-size: 13px;
      font-weight: 600;
      font-family: Georgia, 'Times New Roman', serif;
      letter-spacing: 2px;
      margin-top: 10px;
    }

    /* ─── Summary Cards (Grid Cards) ─── */
    .cb-summary-cards {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      margin: 30px 0;
    }

    .cb-summary-card {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      padding: 24px 18px;
      text-align: center;
      position: relative;
      page-break-inside: avoid;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: white;
      overflow: hidden;
      width: 200px;
    }

    .cb-summary-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background-color: #555;
    }

    .cb-summary-card-icon {
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin-bottom: 10px;
      margin-top: 6px;
    }

    .cb-summary-card-title {
      font-size: 13px;
      font-weight: bold;
      color: var(--heading-color);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .cb-summary-card-content {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      text-align: center;
    }

    .cb-summary-card-content p {
      margin: 0 0 6px 0;
      text-align: center;
    }

    .cb-summary-card-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── Info Tabs ─── */
    .cb-infotabs {
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      margin: 30px 0;
      overflow: hidden;
      page-break-inside: avoid;
      background-color: white;
    }

    .cb-infotabs-header {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid #e0e0e0;
      gap: 4px;
    }

    .cb-infotab-label {
      padding: 10px 14px 8px;
      font-size: 13px;
      color: #999;
    }

    .cb-infotab-label.cb-infotab-active {
      font-weight: bold;
      color: #333;
      border-bottom: 3px solid #333;
    }

    .cb-infotab-panel {
      padding: 16px 20px;
      border-bottom: 1px solid #f0f0f0;
    }

    .cb-infotab-panel:last-child {
      border-bottom: none;
    }

    .cb-infotab-title {
      font-weight: bold;
      font-size: 13px;
      color: #333;
      margin-bottom: 10px;
    }

    .cb-infotab-body {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .cb-infotab-icon {
      width: 60px;
      height: 60px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .cb-infotab-content {
      flex: 1;
      font-size: 13px;
      color: #333;
      line-height: 1.5;
      min-width: 0;
    }

    .cb-infotab-content p {
      margin: 0 0 4px 0;
    }

    .cb-infotab-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── Listing Cards ─── */
    .cb-listing-cards {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 30px 0;
    }

    .cb-listing-card {
      display: flex;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      background-color: white;
      page-break-inside: avoid;
      position: relative;
    }

    .cb-listing-card-left-bar {
      width: 8px;
      background-color: #555;
      flex-shrink: 0;
    }

    .cb-listing-card-body {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 16px 20px;
      flex: 1;
      min-width: 0;
    }

    .cb-listing-card-icon {
      width: 60px;
      height: 60px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .cb-listing-card-content {
      flex: 1;
      min-width: 0;
    }

    .cb-listing-card-title {
      font-size: 13px;
      font-weight: bold;
      color: var(--heading-color);
      margin-bottom: 6px;
      line-height: 1.3;
    }

    .cb-listing-card-text {
      font-size: 13px;
      color: #555;
      line-height: 1.5;
    }

    .cb-listing-card-text p {
      margin: 0 0 4px 0;
    }

    .cb-listing-card-text p:last-child {
      margin-bottom: 0;
    }

    /* ─── Carousel ─── */
    .cb-carousel {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 30px 0;
    }

    .cb-carousel-slide {
      border-radius: 10px;
      padding: 24px 20px;
      page-break-inside: avoid;
    }

    .cb-carousel-title {
      font-size: 13px;
      font-weight: bold;
      color: var(--heading-color);
      margin-bottom: 8px;
      line-height: 1.3;
      text-align: center;
    }

    .cb-carousel-content {
      font-size: 13px;
      color: #333;
      line-height: 1.5;
    }

    .cb-carousel-content p {
      margin: 0 0 4px 0;
    }

    .cb-carousel-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── Flip Cards ─── */
    .cb-flipcards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin: 30px 0;
    }

    .cb-flipcards .cb-flipcard:last-child:nth-child(odd) {
      grid-column: 1 / -1;
      max-width: 50%;
      justify-self: center;
    }

    .cb-flipcard {
      border: 2px solid #999;
      border-radius: 10px;
      overflow: hidden;
      page-break-inside: avoid;
      display: flex;
      flex-direction: column;
    }

    .cb-flipcard-front {
      background-color: #ffffff;
      padding: 20px 16px;
      text-align: center;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cb-flipcard-title {
      font-size: 13px;
      font-weight: bold;
      color: var(--heading-color);
      line-height: 1.4;
    }

    .cb-flipcard-title img {
      display: block;
      width: 50px;
      height: 50px;
      object-fit: contain;
      margin: 0 auto 8px;
    }

    .cb-flipcard-back {
      background-color: #777;
      padding: 20px 16px;
      text-align: center;
      min-height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
    }

    .cb-flipcard-content {
      font-size: 13px;
      color: #ffffff;
      line-height: 1.5;
    }

    .cb-flipcard-content p {
      margin: 0 0 4px 0;
    }

    .cb-flipcard-content p:last-child {
      margin-bottom: 0;
    }

    /* ─── RTL overrides ─── */
    .course-content h1, .course-content h2, .course-content h5,
    .course-content h6, .course-content p {
      direction: var(--direction) !important;
      text-align: var(--text-align) !important;
    }
  
    /* Screen-specific overrides for SCORM/web viewing */
    .course-main {
      max-width: 800px;
      margin: 0 auto;
      font-size: 15px;
      line-height: 1.6;
    }
    

.clr-course-bg-primary{background-color:var(--course-primary-color,var(--primaryButtonBackground,#0e78a9))!important}.clr-white{color:#fff!important}.content-module .content-text-inside table,.content-module .note-content table,.content-module .pdf-text-block table,.content-wrapper .content-block-text table,.content-wrapper .content-text-inside table,.content-wrapper .export-content table,.content-wrapper .note-content table,.content-wrapper .pdf-text-block table{width:100%!important;max-width:100%!important;margin-bottom:20px!important;border-collapse:collapse!important;border-spacing:0!important;background-color:transparent!important;border:1px solid #ddd!important}.content-module .content-text-inside table tbody>tr:nth-of-type(odd),.content-module .note-content table tbody>tr:nth-of-type(odd),.content-module .pdf-text-block table tbody>tr:nth-of-type(odd),.content-wrapper .content-block-text table tbody>tr:nth-of-type(odd),.content-wrapper .content-text-inside table tbody>tr:nth-of-type(odd),.content-wrapper .export-content table tbody>tr:nth-of-type(odd),.content-wrapper .note-content table tbody>tr:nth-of-type(odd),.content-wrapper .pdf-text-block table tbody>tr:nth-of-type(odd){background-color:#f9f9f9!important}.content-module .content-text-inside table tbody>tr>td,.content-module .content-text-inside table tbody>tr>th,.content-module .content-text-inside table tfoot>tr>td,.content-module .content-text-inside table tfoot>tr>th,.content-module .content-text-inside table thead>tr>td,.content-module .content-text-inside table thead>tr>th,.content-module .note-content table tbody>tr>td,.content-module .note-content table tbody>tr>th,.content-module .note-content table tfoot>tr>td,.content-module .note-content table tfoot>tr>th,.content-module .note-content table thead>tr>td,.content-module .note-content table thead>tr>th,.content-module .pdf-text-block table tbody>tr>td,.content-module .pdf-text-block table tbody>tr>th,.content-module .pdf-text-block table tfoot>tr>td,.content-module .pdf-text-block table tfoot>tr>th,.content-module .pdf-text-block table thead>tr>td,.content-module .pdf-text-block table thead>tr>th,.content-wrapper .content-block-text table tbody>tr>td,.content-wrapper .content-block-text table tbody>tr>th,.content-wrapper .content-block-text table tfoot>tr>td,.content-wrapper .content-block-text table tfoot>tr>th,.content-wrapper .content-block-text table thead>tr>td,.content-wrapper .content-block-text table thead>tr>th,.content-wrapper .content-text-inside table tbody>tr>td,.content-wrapper .content-text-inside table tbody>tr>th,.content-wrapper .content-text-inside table tfoot>tr>td,.content-wrapper .content-text-inside table tfoot>tr>th,.content-wrapper .content-text-inside table thead>tr>td,.content-wrapper .content-text-inside table thead>tr>th,.content-wrapper .export-content table tbody>tr>td,.content-wrapper .export-content table tbody>tr>th,.content-wrapper .export-content table tfoot>tr>td,.content-wrapper .export-content table tfoot>tr>th,.content-wrapper .export-content table thead>tr>td,.content-wrapper .export-content table thead>tr>th,.content-wrapper .note-content table tbody>tr>td,.content-wrapper .note-content table tbody>tr>th,.content-wrapper .note-content table tfoot>tr>td,.content-wrapper .note-content table tfoot>tr>th,.content-wrapper .note-content table thead>tr>td,.content-wrapper .note-content table thead>tr>th,.content-wrapper .pdf-text-block table tbody>tr>td,.content-wrapper .pdf-text-block table tbody>tr>th,.content-wrapper .pdf-text-block table tfoot>tr>td,.content-wrapper .pdf-text-block table tfoot>tr>th,.content-wrapper .pdf-text-block table thead>tr>td,.content-wrapper .pdf-text-block table thead>tr>th{border:1px solid #ddd!important;padding:8px!important;line-height:1.42857143!important;vertical-align:top!important}.content-module .content-text-inside table thead th,.content-module .content-text-inside table tr:first-child>th,.content-module .note-content table thead th,.content-module .note-content table tr:first-child>th,.content-module .pdf-text-block table thead th,.content-module .pdf-text-block table tr:first-child>th,.content-wrapper .content-text-inside table thead th,.content-wrapper .content-text-inside table tr:first-child>th,.content-wrapper .export-content table thead th,.content-wrapper .note-content table thead th,.content-wrapper .note-content table tr:first-child>th,.content-wrapper .pdf-text-block table thead th,.content-wrapper .pdf-text-block table tr:first-child>th{background-color:var(--course-primary-color,var(--primaryButtonBackground,#0e78a9))!important;color:#fff!important;font-weight:600!important}.content-module .content-text-inside table tbody>tr>td,.content-module .content-text-inside table tfoot>tr>td,.content-module .note-content table tbody>tr>td,.content-module .note-content table tfoot>tr>td,.content-module .pdf-text-block table tbody>tr>td,.content-module .pdf-text-block table tfoot>tr>td,.content-wrapper .content-block-text table tbody>tr>td,.content-wrapper .content-block-text table tfoot>tr>td,.content-wrapper .content-text-inside table tbody>tr>td,.content-wrapper .content-text-inside table tfoot>tr>td,.content-wrapper .export-content table tbody>tr>td,.content-wrapper .export-content table tfoot>tr>td,.content-wrapper .note-content table tbody>tr>td,.content-wrapper .note-content table tfoot>tr>td,.content-wrapper .pdf-text-block table tbody>tr>td,.content-wrapper .pdf-text-block table tfoot>tr>td{color:var(--course-body-copy-color,#333)!important}.activity-view__body>.cb-hero,.content-wrapper .cb-hero,.export-content .cb-hero{min-height:300px;margin:0;border-radius:0}.activity-view__body>.cb-hero .cb-hero-title,.content-wrapper .cb-hero .cb-hero-title,.export-content .cb-hero .cb-hero-title{font-size:48px;font-weight:600;line-height:1.2}.activity-view__body>.cb-hero .cb-hero-text,.content-wrapper .cb-hero .cb-hero-text,.export-content .cb-hero .cb-hero-text{font-size:18px;line-height:1.8}@media (max-width:768px){.activity-view__body>.cb-hero .cb-hero-title,.content-wrapper .cb-hero .cb-hero-title,.export-content .cb-hero .cb-hero-title{font-size:36px}.activity-view__body>.cb-hero .cb-hero-text,.content-wrapper .cb-hero .cb-hero-text,.export-content .cb-hero .cb-hero-text{font-size:16px}}@media (max-width:480px){.activity-view__body>.cb-hero .cb-hero-title,.content-wrapper .cb-hero .cb-hero-title,.export-content .cb-hero .cb-hero-title{font-size:28px}}