:root{ --pinyin-size: 92%; --hanzi-size: calc(var(--pinyin-size) * 1.75); --hanzi-gap: 0.25em; }
    .viewer-body ruby > rt{ font-size: var(--pinyin-size, 72%); line-height: 1; }
    .viewer-body ruby > rb{ font-size: var(--hanzi-size, 100%); }
/* Keep Chinese + pinyin ordered left-to-right inside RTL layout */
.viewer-body ruby{ direction:ltr; unicode-bidi:isolate; writing-mode: horizontal-tb; }
.viewer-body ruby > rb,
.viewer-body ruby > rt{ direction:ltr; unicode-bidi:isolate; text-align:center; }

/* Latin pinyin and code samples should also be LTR */
.viewer-body :where(code,kbd,samp,pre){ direction:ltr; unicode-bidi:isolate; }

/* In your tables, the first column (pinyin/Latin) should be LTR */
.viewer-body table :is(th:first-child, td:first-child){
  direction:ltr; unicode-bidi:isolate; text-align:left;
}
    .viewer-body ruby{ margin-inline: calc(var(--hanzi-gap, 0.10em) / 2); }
    /* Hide pinyin annotations when toggled off */
    body.pinyin-off .viewer-body rt {
    display: none !important;
    }
    
    #site-header, #site-footer { min-height: 48px; }

    /* Sticky footer layout */
    html, body { height: 100%; }
    body { min-height: 100svh; display: flex; flex-direction: column; }
    #site-header { flex: 0 0 auto; }
    main[role="main"] { flex: 1 0 auto; }
    #site-footer { flex: 0 0 auto; margin-top: auto; }
  
    /* --- Units as centered rounded rectangles --- */
    .course-units {
      /* Use site variables when available, with sensible fallbacks */
      --card-radius: var(--box-radius, 16px);
      --card-bg: var(--header-bg, #ffffff);
      --card-border: var(--border-light, #e6e6e6);
      --card-shadow: var(--box-shadow, 0 10px 24px rgba(0,0,0,.06));
      --accent: var(--brand, #0b7285);
      --unit-open-bg: #eef3f7;
      --unit-open-border: #d3dee7;
      --title-accent: #34495e;

      max-width: 1100px;
      margin-inline: auto;            /* center the whole section */
      padding: clamp(12px, 2vw, 24px);

      display: block;
    }


    .course-units .units-title {
      grid-column: 1 / -1;
      display: block;
      width: 100%;
      margin: 0;
      text-align: center !important;
      font-size: clamp(1.4rem, 1rem + 1.3vw, 2rem);
      line-height: 1.25;
      font-weight: 800;
      color: #34495e;
      letter-spacing: 0; /* Arabic: avoid tracking */
      text-shadow: 0 1px 0 rgba(255,255,255,.6);
      position: relative;
    }
    .course-units .units-title::after {
      content: "";
      display: block;
      width: min(42ch, 60%);
      height: 3px;
      margin: 12px auto 0;
      border-radius: 999px;
      background: linear-gradient(90deg,
        rgba(0,0,0,0) 0%,
        #d9dee5 18%,
        var(--title-accent, #34495e) 50%,
        #d9dee5 82%,
        rgba(0,0,0,0) 100%
      );
    }

    /* Title bar row with a left-aligned home button */
    /* Title + actions now render on separate lines */
    .units-bar { position: relative; display: block; margin: 6px 0 12px; }

    /* Icons row under the title */
    .units-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-start; direction:ltr; margin: 8px 0 12px; }
    .units-actions .home-btn {
      position: static;
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px; border-radius: 10px;
      background: #fff; color: #34495e;
      border: 1px solid #e5e9ef; box-shadow: var(--box-shadow);
      text-decoration: none; cursor: pointer;
      transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
      pointer-events: auto;   /* always clickable */
    }
  .units-actions .home-btn:hover { background: #f7f8fa; border-color: #d5dbe3; transform: translateY(-1px); }
  .units-actions .home-btn:focus-visible { outline: 2px solid #d3dee7; outline-offset: 2px; }
  .units-actions .home-btn svg { width: 22px; height: 22px; display: block; }
  .exam-mode .home-btn, .modal-open .home-btn { pointer-events: auto; }

    /* Settings button participates in the icons row */
    .units-actions .settings-btn { position: static; }

    /* Units stacked vertically */
    .units-row {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: clamp(12px, 2vw, 16px);
      overflow: visible;
      padding-block: 4px;
      scroll-snap-type: none;
    }

    details.unit { width: 100%; }

    /* Card styling for each unit */
    details.unit {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--card-radius);
      box-shadow: var(--card-shadow);
      overflow: hidden;
      transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
    }
    details.unit:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
    details.unit[open] { border-color: var(--unit-open-border, #cfd6df); }

    details.unit summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      padding: 16px 18px;
      font-weight: 700;
      background: transparent;
    }
    details.unit summary:focus-visible {
      outline: 2px solid var(--unit-open-border, #cfd6df);
      outline-offset: 2px;
    }
    details.unit[open] summary { background: var(--unit-open-bg, #edf1f5); }
    details.unit summary::-webkit-details-marker { display: none; }

    /* Course-wide test block styled like a unit */
    details.course-test { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease; }
    details.course-test:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
    details.course-test[open] { border-color: var(--unit-open-border, #d3dee7); }
    details.course-test summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 16px 18px; font-weight: 800; background: transparent; }
    details.course-test summary:focus-visible { outline: 2px solid var(--unit-open-border, #d3dee7); outline-offset: 2px; }
    details.course-test[open] summary { background: var(--unit-open-bg, #eef3f7); }

/* ===== Final Exam UI (distinct from lesson viewer) ===== */
.exam-viewer { margin: 12px 16px 16px; }
.exam-card { position: relative; background: #fff; border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: clamp(12px, 2vw, 16px); }
.exam-title { margin: 0 0 .5em; font-weight: 800; color: #34495e; font-size: clamp(1.1rem, .9rem + .6vw, 1.4rem); text-align: start; }
.exam-body p { margin: 0 0 .8em; }
.exam-body .exam-input { border: 1px solid #d0d5db; border-radius: 10px; padding: 10px 12px; width: 100%; }
.exam-feedback { display: inline-block; margin-top: 8px; font-weight: 700; }
.exam-feedback.ok { color: #1b5e20; }
.exam-feedback.err { color: #b71c1c; }
/* Rectangular submit + close for exam */
/* Rectangular submit + close for exam (centered) */
.exam-submit {
  position: static; /* no absolute; flows in layout */
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; height: auto; width: auto;
  border-radius: 8px; background: #34495e; color: #fff;
  border: 1px solid #2e3e50; box-shadow: var(--box-shadow);
  cursor: pointer; font-weight: 700;
}
.exam-submit:hover { filter: brightness(1.05); }
.exam-submit svg { width: 20px; height: 20px; display: block; }
/* container to center the submit button and add margins */
.exam-actions { display: flex; justify-content: center; margin-top: 14px; }
/* Final exam questions list */
.exam-qs { list-style: decimal; padding-inline-start: 1.25em; margin: .5em 0 0; }
.exam-q { margin: 0 0 .9em; }
.exam-q .choices { display: grid; gap: 6px; margin-top: .4em; }
.exam-q input[type="text"], .exam-q input[type="number"], .exam-q select { border: 1px solid #d0d5db; border-radius: 8px; padding: 8px 10px; width: 100%; }
.exam-result { display: block; margin-top: 10px; font-weight: 800; }
.exam-result.ok { color: #1b5e20; }
.exam-result.err { color: #b71c1c; }
.exam-card [disabled] { opacity: .75; }
.exam-close { position: absolute; left: 10px; top: 10px; background: #fff; border: 1px solid #e5e9ef; border-radius: 8px; padding: 6px 8px; line-height: 1; cursor: pointer; box-shadow: var(--box-shadow); }
.exam-close:hover { background: #f7f8fa; }


/* Disable units while final exam is running */
.exam-mode details.unit { filter: grayscale(1) opacity(.6); }
.exam-mode details.unit, .exam-mode details.unit * { pointer-events: none; }

/* Final test summary gating visuals */
details.course-test summary[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

    /* Course completion badge (right side of the title bar) */
    .units-bar .course-done { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 6px; color: #34495e; font-weight: 700; }
    .units-bar .course-done svg { width: 20px; height: 20px; }
    .unit-title { font-weight: 800; }

    /* Classes inside each unit as rounded pills */
    .class-list {
      list-style: none;
      margin: 0;
      padding: 10px 16px 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .class-list li a {
      display: block;
      text-decoration: none;
      padding: 12px 14px;
      background: #faf9f9;
      border: 1px solid #e5e9ef;
      border-radius: calc(var(--card-radius) - 6px);
      transition: background .15s ease, transform .08s ease, border-color .15s ease;
      position: relative; /* anchor becomes positioning context for the left checks */
      padding-left: 64px; /* reserve space for the checks on the physical left */
    }
    .class-list li a:hover,
    .class-list li a:focus {
      background: #eff0f0;
      border-color: #d5dbe3;
      outline: none;
      transform: translateY(-1px);
    }
    .class-list li a.active {
      background: #edeeee;
      border-color: #cfd6df;
    }

    /* Prevent lesson titles from looking like default hyperlinks */
    .class-list li a,
    .class-list li a:visited,
    .class-list li a:active,
    .class-list li a:focus {
      color: #34495e !important;   /* force theme color, stop blue/purple */
      text-decoration: none;       /* remove underline in all states */
    }
    .class-list li a:hover {
      color: #34495e !important;   /* keep same color on hover */
      text-decoration: none;       /* underline off; we already have a background hover */
    }

    .class-list li { position: relative; display: flow-root; }

    /* Trio of checks on the left */
    .check-trio {
      position: absolute;
      left: 14px;                 /* physical left as requested */
      top: 50%;
      transform: translateY(-50%);  /* centered on the title row */
      display: inline-flex;
      align-items: center;
      gap: 6px;
      pointer-events: none;       /* indicator only */
      z-index: 3;                 /* stay visible when lesson is selected */
    }
    .check-trio .check svg { width: 18px; height: 18px; display: block; }
    /* default (unfinished) state: light gray */
    .check-trio .check { color: var(--todo, #c3c3c3); }
    /* finished state: your dark blue */
    .check-trio .check.on { color:#34495e; }
    .check-trio .check.on svg { stroke: currentColor; }

    /* Enforce icon order visually regardless of DOM creation order */
    .check-trio .check[data-kind="text"] { order: 1; }
    .check-trio .check[data-kind="video"] { order: 2; }
    .check-trio .check[data-kind="exercise"] { order: 3; }

    /* Per-lesson inline viewer (content spawns inside the lesson item itself) */
    .lesson-viewer { margin-top: 8px; }
    .lesson-viewer .viewer-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: calc(var(--card-radius) - 6px);
      box-shadow: var(--box-shadow);
      padding: clamp(12px, 2vw, 16px);
      position: relative;
      padding-bottom: calc(clamp(12px, 2vw, 16px) + 56px);
    }
    .lesson-viewer .viewer-title { margin: 0 0 6px; font-size: clamp(1rem, .9rem + .3vw, 1.15rem); }

    /* Toolbar for switching lesson views inside the lesson box */
    .lesson-toolbar {
      position: absolute;
      bottom: 10px;
      right: 12px;              /* bottom-right as requested */
      display: flex;
      gap: 8px;
      z-index: 2;
    }
    .lesson-tab {
      appearance: none;
      background: #fff;
      border: 1px solid var(--card-border);
      border-radius: 10px;
      padding: 6px;
      line-height: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: var(--box-shadow);
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
    }
    .lesson-tab:hover { transform: translateY(-1px); background: rgba(11,114,133,.06); }
    .lesson-tab.active { border-color: rgba(11,114,133,.45); outline: 2px solid rgba(11,114,133,.30); }

    /* Body area that changes with the selected tab */
    .viewer-body { margin-top: 6px; }
    .video-resp { width: 100%; aspect-ratio: 16 / 9; background: rgba(0,0,0,.05); border: 1px dashed var(--card-border); border-radius: 8px; display: grid; place-items: center; }

    /* In-viewer completion control (bottom-left inside the lesson box) */
    .viewer-card .lesson-complete { position: absolute; bottom: 10px; left: 12px; z-index: 3; }
    .complete-btn {
      appearance: none;
      background: #fff;
      border: 1px solid var(--card-border);
      border-radius: 999px;
      padding: 10px;
      line-height: 0;
      box-shadow: var(--box-shadow);
      cursor: pointer;
      transition: transform .08s ease, background .15s ease, border-color .15s ease, color .15s ease;
    }
    .complete-btn:hover { transform: translateY(-1px); }
    .complete-btn.is-complete {
      color: #34495e;
      background: rgba(52,73,94,.10);
      border-color: rgba(52,73,94,.45);
    }
    .complete-btn[disabled] { opacity: .55; cursor: not-allowed; }

    /* Unit completion badge now blue */
    details.unit summary .unit-done {
      margin-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; color: #34495e; font-weight: 700;
    }

    /* In-unit viewer where lesson content will render (kept for future use) */
    .unit-viewer { padding: 10px 16px 16px; }
    .unit-viewer .viewer-card {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--card-radius);
      box-shadow: var(--box-shadow);
      padding: clamp(12px, 2vw, 16px);
    }
    .unit-viewer .viewer-title { margin: 0 0 8px; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); }


/* ===== Custom styles for JSON-rendered lesson content (EDIT HERE) ===== */
/* Base typography inside lesson content */
.viewer-card .viewer-body { color: #1f2d3d; line-height: 1.75; }
.viewer-card .viewer-body h1,
.viewer-card .viewer-body h2,
.viewer-card .viewer-body h3 { color: #34495e; margin: 0 0 .5em; }
.viewer-card .viewer-body p { margin: 0 0 .9em; }
.viewer-card .viewer-body ul, .viewer-card .viewer-body ol { padding-inline-start: 1.2em; margin: 0 0 .9em; }
.viewer-card .viewer-body code, .viewer-card .viewer-body kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,.04); padding: .1em .35em; border-radius: 4px; }
.viewer-card .viewer-body blockquote { margin: .8em 0; padding: .6em .8em; background: rgba(52,73,94,.06); border-inline-start: 4px solid #34495e; border-radius: 6px; }

/* Per-view hooks */
.viewer-card[data-view="text"] .viewer-body { --view-mode: text; }
.viewer-card[data-view="video"] .viewer-body { --view-mode: video; }
.viewer-card[data-view="exercise"] .viewer-body { --view-mode: exercise; }
.viewer-card[data-view="exercise"] .exercise-block input.exercise-answer { border: 1px solid #d0d5db; border-radius: 8px; padding: 8px 10px; }
.viewer-card[data-view="exercise"] .exercise-block .exercise-feedback.ok { color: #1b5e20; }
.viewer-card[data-view="exercise"] .exercise-block .exercise-feedback.err { color: #b71c1c; }
/* ===== End custom JSON content styles ===== */
/* ---- In-site modal (website prompt) ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-backdrop.visible { display: flex; }
.modal-open { overflow: hidden; }
.modal { background: #fff; border: 1px solid #e5e9ef; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.2); max-width: min(520px, 90vw); width: 100%; }
.modal header { padding: 14px 16px; border-bottom: 1px solid #eef1f5; font-weight: 800; color: #34495e; }
.modal .modal-body { padding: 16px; color: #1f2d3d; line-height: 1.6; }
.modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; }
.btn { appearance: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid #d5dbe3; background: #fff; }
.btn:hover { filter: brightness(1.03); }
  .btn-primary { background: #34495e; color: #fff; border-color: #2e3e50; }
  .btn-secondary { background: #fff; color: #34495e; }

  /* —— Result modal extras —— */
  .modal.success header { background: #e9f6ef; border-bottom-color: #d3ecdc; }
  .modal.fail header { background: #fff3f3; border-bottom-color: #f3d6d6; }
  .modal .emoji { font-size: 40px; line-height: 1; vertical-align: middle; margin-inline-start: 6px; }
  .modal .note { font-size: .9em; color: #6b7280; margin-top: 6px; }
  /* Confetti animation */
  .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .confetti span { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; opacity: .95; animation: confetti-fall 1200ms ease-out forwards; }
  @keyframes confetti-fall { to { transform: translateY(120vh) rotate(720deg); opacity: .98; } }