/* Reading Explorer Shared Unit Triad Stylesheet (Course Common Layer)
 * TKid Learning Platform - Reading Explorer 3e Series
 * Unified Standard across RE0 ~ RE5
 */

:root {
      --clr-preview-grad: linear-gradient(135deg, #6c5ce7 0%, #8e44ad 100%);
      --clr-review-grad: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      --clr-video-grad: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
      --clr-preview: #6c5ce7;
      --clr-review: #0284c7;
      --clr-video: #e11d48;
      --clr-bg: #f8fafc;
      --clr-card-bg: #ffffff;
      --clr-text-main: #1e293b;
      --clr-text-muted: #64748b;
      --clr-border: #e2e8f0;
      --fluid-container: min(1080px, 94%);
    }

    html {
      overflow-y: scroll;
      scrollbar-gutter: stable;
      box-sizing: border-box;
      scroll-behavior: smooth;
    }
    *, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      background-color: var(--clr-bg);
      color: var(--clr-text-main);
      line-height: 1.5;
      padding-bottom: 60px;
    }

    /* TOP STICKY BAR */
    .app-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--clr-border);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }
    .header-top {
      max-width: var(--fluid-container);
      margin: 0 auto;
      padding: 5px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .btn-back-home {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 100px;
      background: #f1f5f9;
      color: var(--clr-text-muted);
      font-size: clamp(0.72rem, 1.8vw, 0.8rem);
      font-weight: 700;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .btn-back-home:hover { background: #e2e8f0; color: var(--clr-text-main); }
    .badge-unit {
      background: #ede9fe;
      color: #6d28d9;
      font-weight: 900;
      font-size: clamp(0.70rem, 1.6vw, 0.78rem);
      padding: 3px 8px;
      border-radius: 6px;
      white-space: nowrap;
      border: 1px solid #ddd6fe;
    }
    .lesson-title {
      font-size: clamp(0.85rem, 2.2vw, 1.05rem);
      font-weight: 800;
      color: var(--clr-text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-audio-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 100px;
      padding: 5px 12px;
      font-size: clamp(0.74rem, 1.8vw, 0.82rem);
      font-weight: 800;
      color: #334155;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }
    .header-audio-pill:hover { background: #f1f5f9; border-color: #94a3b8; }
    .header-audio-pill.is-playing-audio {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
    }

    /* PRIMARY TABS & USER BAR ROW */
    .primary-mode-bar {
      background: #f8fafc;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
      width: 100%;
    }
    .primary-mode-inner {
      max-width: var(--fluid-container);
      margin: 0 auto;
      padding: 3px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: nowrap;
      min-height: 36px;
    }
    .primary-mode-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .primary-mode-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      min-width: 0;
    }
    .main-mode-btn {
      padding: 3px 12px;
      border-radius: 100px;
      border: none;
      background: transparent;
      color: var(--clr-text-muted);
      font-size: 0.74rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    .main-mode-btn.active.mode-preview {
      background: var(--clr-preview-grad);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35);
    }
    .main-mode-btn.active.mode-review {
      background: var(--clr-review-grad);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    }
    .main-mode-btn.active.mode-video {
      background: var(--clr-video-grad);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
    }
    @media (max-width: 520px) {
      .primary-mode-inner {
        padding: 3px 6px;
        gap: 4px;
      }
      .main-mode-btn {
        padding: 2px 8px;
        font-size: 0.70rem;
      }
      .app-stepper-inner {
        padding: 2px 6px 3px 6px;
      }
      .sub-stepper-bar {
        max-width: 270px;
      }
      .step-tab {
        padding: 2px 4px;
        gap: 3px;
      }
    }

    /* SUB-LEVEL 2 STEPPER TABS (PINNED IN HEADER) */
    .app-stepper-wrap {
      background: #ffffff;
      border-top: 1px solid rgba(0, 0, 0, 0.04);
      width: 100%;
    }
    .app-stepper-inner {
      max-width: var(--fluid-container);
      margin: 0 auto;
      padding: 3px 12px 4px 12px;
      display: flex;
      align-items: center;
    }
    .sub-stepper-bar {
      display: flex;
      justify-content: flex-start;
      max-width: 300px;
      width: 100%;
      margin: 0;
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 2px;
      border-radius: 100px;
      gap: 3px;
    }
    .step-tab {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 3px 6px;
      border-radius: 100px;
      background: transparent;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-tab:not(.active):hover { background: rgba(255, 255, 255, 0.45); }
    .step-circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #cbd5e1;
      color: #475569;
      font-size: 0.62rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .step-label {
      font-size: clamp(0.70rem, 1.8vw, 0.78rem);
      font-weight: 700;
      color: #475569;
      white-space: nowrap;
    }

    #previewStepper .step-tab.active,
    .sub-stepper-bar .step-tab.active {
      background: var(--clr-preview-grad);
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(108, 92, 231, 0.35);
    }
    #previewStepper .step-tab.active .step-circle,
    .sub-stepper-bar .step-tab.active .step-circle {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }
    #previewStepper .step-tab.active .step-label,
    .sub-stepper-bar .step-tab.active .step-label {
      color: #ffffff;
      font-weight: 800;
    }

    #reviewStepper .step-tab.active {
      background: var(--clr-review-grad);
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(2, 132, 199, 0.35);
    }
    #reviewStepper .step-tab.active .step-circle {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }
    #reviewStepper .step-tab.active .step-label {
      color: #ffffff;
      font-weight: 800;
    }

    #videoStepper .step-tab.active {
      background: var(--clr-video-grad);
      color: #ffffff;
      box-shadow: 0 3px 10px rgba(225, 29, 72, 0.35);
    }
    #videoStepper .step-tab.active .step-circle {
      background: rgba(255, 255, 255, 0.25);
      color: #ffffff;
    }
    #videoStepper .step-tab.active .step-label {
      color: #ffffff;
      font-weight: 800;
    }

    /* MAIN CONTAINER & PANES */
    .main-content {
      max-width: var(--fluid-container);
      margin: 8px auto 16px auto;
      padding: 0 12px;
    }
    .app-workspace-module { display: none; animation: tabFadeIn 0.25s ease-out; }
    .app-workspace-module.active { display: block; }
    .p-pane, .r-pane, .v-pane { display: none; animation: tabFadeIn 0.25s ease-out; }
    .p-pane.active, .r-pane.active, .v-pane.active { display: block; }

    @keyframes tabFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .card-box {
      background: #ffffff;
      border-radius: clamp(14px, 2.5vw, 18px);
      padding: clamp(14px, 2.8vw, 24px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
      margin-bottom: 16px;
    }
    .box-title-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 16px;
      gap: 8px;
    }
    .box-title { font-size: clamp(0.98rem, 2.5vw, 1.2rem); font-weight: 800; color: #1e293b; }
    .box-sub { font-size: clamp(0.76rem, 1.8vw, 0.82rem); color: var(--clr-text-muted); margin-top: 2px; }

    /* VOCAB GRID */
    .vocab-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 45vw, 340px), 1fr));
      gap: clamp(10px, 2vw, 14px);
    }
    .v-card {
      background: #fafbff;
      border: 2px solid #edf2f9;
      border-radius: 16px;
      padding: clamp(12px, 2vw, 16px);
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: all 0.2s;
    }
    .v-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    }
    .v-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .v-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .v-cartoon-icon {
      width: 44px;
      height: 44px;
      flex-shrink: 0;
    }
    .word-svg { width: 100%; height: 100%; }
    .v-num-badge {
      font-size: 0.65rem;
      font-weight: 900;
      color: #94a3b8;
      background: #f1f5f9;
      padding: 1px 5px;
      border-radius: 4px;
    }
    .v-card .v-word,
    .tk-vocab-card .v-word,
    .v-word {
      font-size: clamp(1.22rem, 2.7vw, 1.44rem);
      font-weight: 900 !important;
      color: #1e40af !important;
      letter-spacing: -0.015em;
      line-height: 1.15;
    }
    .v-phonetic {
      font-family: "Lucida Console", Monaco, monospace;
      font-size: 0.74rem;
      color: #64748b;
    }
    .badge-pos {
      font-size: 0.65rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
      background: #e2e8f0;
      color: #475569;
    }
    .badge-cefr {
      font-size: 0.65rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 4px;
      background: #ede9fe;
      color: #6d28d9;
    }
        .v-audio-btn {
      width: clamp(38px, 6.5vw, 44px);
      height: clamp(38px, 6.5vw, 44px);
      min-width: 38px;
      min-height: 38px;
      border-radius: 50%;
      background: #ede9fe;
      color: #6d28d9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(1.25rem, 2.8vw, 1.45rem);
      border: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s ease;
      touch-action: manipulation;
    }
    .v-audio-btn:hover { background: #ddd6fe; transform: scale(1.08); }
    .v-audio-btn.playing { background: var(--clr-preview); color: #fff; animation: pBtnPulse 1.2s infinite; }

    .v-def-box, .v-example-box {
      background: #ffffff;
      border: 1px solid #eef2f6;
      border-radius: 10px;
      padding: 8px 10px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .v-def-box:hover, .v-example-box:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }
    .v-box-tag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.68rem;
      font-weight: 800;
      color: #94a3b8;
      margin-bottom: 2px;
    }
        .v-mini-btn {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      font-size: clamp(1.15rem, 2.6vw, 1.35rem);
      width: clamp(36px, 6vw, 42px);
      height: clamp(36px, 6vw, 42px);
      min-width: 36px;
      min-height: 36px;
      border-radius: 50%;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-shrink: 0;
      transition: all 0.2s ease;
      touch-action: manipulation;
    }
    .v-mini-btn:hover { background: #ede9fe; border-color: #a5b4fc; transform: scale(1.1); }
    .v-mini-btn.playing { background: #10b981; color: #fff; border-color: #10b981; }
    .v-def-text { font-size: 0.82rem; font-weight: 600; color: #334155; line-height: 1.4; }
    .v-example-text { font-size: 0.82rem; color: #334155; line-height: 1.4; }
    .v-example-text em { color: #2563eb; font-style: normal; font-weight: 800; }

/* PASSAGE INTERACTIVE SENTENCE & CARD STYLES (RE0 / RE2 / RE3 STANDARD) */
    .p-sent {
      display: inline;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .p-sent:hover {
      background: rgba(99, 102, 241, 0.12);
      color: #4338ca;
    }
    .p-sent.is-playing-passage {
      background: #fef08a !important;
      color: #854d0e !important;
      box-shadow: 0 0 0 2px #facc15;
      border-radius: 4px;
    }
    .p-para-card.is-playing-passage {
      border-color: #6366f1 !important;
      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.15) !important;
      background: #fdfdff !important;
    }
    .p-audio-btn.playing {
      background: #4f46e5 !important;
      color: #fff !important;
      border-color: #4f46e5 !important;
      animation: pBtnPulse 1.2s infinite ease-in-out;
    }
    @keyframes pBtnPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.85; }
    }

    /* ACTION ROW NAVIGATION */
    .action-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid var(--clr-border);
    }
    .btn-nav {
      flex: 1;
      max-width: 200px;
      padding: 10px 16px;
      border-radius: 100px;
      font-weight: 800;
      font-size: clamp(0.80rem, 1.8vw, 0.88rem);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 40px;
      white-space: nowrap;
    }
    .btn-nav-prev { background: #e2e8f0; color: #475569; }
    .btn-nav-next { background: var(--clr-preview-grad); color: #ffffff; margin-left: auto; box-shadow: 0 4px 14px rgba(108, 92, 231, 0.35); }
    .btn-nav-next.video-btn { background: var(--clr-video-grad); box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35); }
    .btn-nav-next.rev { background: var(--clr-review-grad); box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35); }

    /* QUIZ CARDS */
    .quiz-card {
      background: #fafbff;
      border: 1.5px solid #edf2f9;
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 12px;
    }
    .quiz-q { font-size: 0.90rem; font-weight: 800; color: #1e293b; margin-bottom: 10px; }
    .quiz-options {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .quiz-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 0.84rem;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      text-align: left;
      transition: all 0.15s ease;
    }
    .quiz-btn:hover { border-color: #94a3b8; background: #f8fafc; }
    .quiz-opt-key {
      font-weight: 900;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 7px;
      border-radius: 6px;
      font-size: 0.74rem;
    }
    .quiz-btn.is-correct {
      background: #ecfdf5 !important;
      border-color: #10b981 !important;
      color: #065f46 !important;
    }
    .quiz-btn.is-correct .quiz-opt-key {
      background: #10b981 !important;
      color: #ffffff !important;
    }
    .quiz-btn.is-wrong {
      background: #fef2f2 !important;
      border-color: #ef4444 !important;
      color: #991b1b !important;
    }
    .quiz-btn.is-wrong .quiz-opt-key {
      background: #ef4444 !important;
      color: #ffffff !important;
    }
    .quiz-exp {
      display: none;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      margin-top: 10px;
      font-size: 0.78rem;
      color: #475569;
      line-height: 1.5;
    }
    .quiz-exp.show { display: block; animation: tabFadeIn 0.2s ease; }

        .quiz-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .quiz-badge {
      font-size: 0.72rem;
      font-weight: 800;
      color: #6366f1;
      background: #e0e7ff;
      padding: 2px 8px;
      border-radius: 6px;
    }
    .c-filter-btn.active {
      background: #6c5ce7;
      color: #ffffff;
      border-color: #6c5ce7;
    }

    /* SCORE BAR */
    .score-progress-wrap {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 16px;
    }
    .score-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    .score-live-title { font-size: 0.82rem; font-weight: 800; color: #1e293b; }
    .score-live-badge {
      font-size: 0.75rem;
      font-weight: 800;
      color: #6d28d9;
      background: #ede9fe;
      padding: 2px 8px;
      border-radius: 100px;
    }
    .score-progress-bar-bg {
      height: 6px;
      background: #e2e8f0;
      border-radius: 3px;
      overflow: hidden;
    }
    .score-progress-bar-fill {
      height: 100%;
      width: 0%;
      background: var(--clr-preview-grad);
      transition: width 0.3s ease;
    }

    .c-filter-btn {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 700;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 4px 10px;
      border-radius: 100px;
      text-decoration: none;
      transition: all 0.2s;
    }
    .c-filter-btn:hover { background: #e2e8f0; color: #1e293b; }

    /* REVIEW MATRIX */
    .review-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px;
    }
    .r-word-card {
      background: #fafbff;
      border: 1.5px solid #edf2f9;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .r-word-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .r-word-title { font-size: 0.95rem; font-weight: 800; color: #1e293b; }
    .word-click-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 18px;
      padding: 0 5px;
      font-size: 0.70rem;
      font-weight: 800;
      color: #64748b;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 9px;
      margin-left: 6px;
      vertical-align: middle;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    .word-click-badge.has-count {
      color: #0369a1;
      background: #e0f2fe;
      border-color: #7dd3fc;
      font-weight: 900;
    }
    .word-click-badge.is-max {
      color: #b45309;
      background: #fef3c7;
      border-color: #fcd34d;
    }
    .r-word-card:active .word-click-badge,
    .matrix-item:active .word-click-badge {
      transform: scale(1.15);
    }
    .r-word-zh { font-size: 0.76rem; color: #64748b; }
    .r-word-en { font-size: 0.74rem; color: #94a3b8; }

    /* VIDEO MODULE */
    .video-card {
      background: #0f172a;
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 16px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    }
    .video-wrap {
      position: relative;
      width: 100%;
      background: #000;
      aspect-ratio: 16 / 9;
    }
    .main-video { width: 100%; height: 100%; object-fit: contain; }
    .video-ctrl-bar {
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #1e293b;
      gap: 8px;
    }
    .video-cc-btn, .video-fs-btn {
      background: rgba(255, 255, 255, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #ffffff;
      padding: 4px 10px;
      border-radius: 100px;
      font-size: 0.74rem;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s;
    }
    .video-cc-btn.active { background: #e11d48; border-color: #fda4af; }
    .video-caption-overlay {
      margin-top: 14px;
      display: flex;
      justify-content: center;
      width: 100%;
    }
    .video-caption-overlay.hidden { display: none !important; }
    .caption-bubble {
      background: #f8fafc;
      color: var(--clr-text-main);
      font-size: clamp(0.92rem, 2.2vw, 1.15rem);
      font-weight: 800;
      padding: 10px 20px;
      border-radius: 14px;
      text-align: center;
      border: 1.5px solid #e2e8f0;
      border-left: 4px solid var(--clr-video);
      width: 100%;
    }
    .caption-bubble-zh { font-size: 0.84rem; color: #64748b; margin-top: 4px; font-weight: 600; }

    .video-transcript-box {
      margin-top: 16px;
      background: #fdfdfd;
      border: 1.5px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px;
      max-height: 280px;
      overflow-y: auto;
    }
    .v-sub-line {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 10px;
      margin-bottom: 6px;
      cursor: pointer;
      background: #ffffff;
      border: 1.5px solid #f1f5f9;
      opacity: 0.65;
      transition: all 0.2s;
    }
    .v-sub-line:hover { opacity: 1; background: #fff1f2; border-color: #fecdd3; }
    .v-sub-line.is-active {
      opacity: 1;
      background: #ffe4e6;
      border-color: #fb7185;
      border-left: 5px solid #e11d48;
    }
    .v-sub-time {
      font-family: monospace;
      font-size: 0.72rem;
      font-weight: 800;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
      color: #64748b;
    }

    /* INLINE HONOR CARD */
    .badge-honor-box {
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
      border-radius: 20px;
      padding: clamp(20px, 3.5vw, 32px) clamp(16px, 3vw, 24px);
      text-align: center;
      color: #ffffff;
      box-shadow: 0 10px 30px rgba(49, 46, 129, 0.35);
      border: 3px solid rgba(253, 224, 71, 0.45);
      margin-top: 16px;
      position: relative;
      overflow: hidden;
    }
    .badge-honor-title {
      font-size: clamp(1.2rem, 2.5vw, 1.6rem);
      font-weight: 900;
      color: #fef08a;
      margin-bottom: 6px;
    }
    .badge-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin: 18px 0;
      background: rgba(255, 255, 255, 0.12);
      padding: 12px;
      border-radius: 16px;
      backdrop-filter: blur(4px);
    }
    @media (max-width: 600px) {
      .badge-stats-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .b-stat-num { font-size: clamp(1.1rem, 2vw, 1.45rem); font-weight: 900; color: #fde047; }
    .b-stat-lbl { font-size: 0.72rem; color: #e2e8f0; margin-top: 2px; font-weight: 700; }
    .btn-checkin-action {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      font-size: clamp(0.92rem, 1.8vw, 1.05rem);
      font-weight: 900;
      padding: 12px 32px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.25s;
    }
    .btn-checkin-action:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
    }
    .btn-checkin-action.is-done {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
      cursor: default;
    }

  
    /* VIDEO THEATER MODULE (L0 U1A STANDARD) */
    .video-frame-box {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      background: #000000;
      border-radius: clamp(12px, 2.5vw, 16px);
      overflow: hidden;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
    }
    .video-frame-box video {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .video-top-control-bar {
      position: absolute;
      top: clamp(8px, 1.8vw, 12px);
      right: clamp(8px, 1.8vw, 12px);
      z-index: 35;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .video-cc-btn, .video-fs-btn {
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.25);
      border-radius: 100px;
      padding: 4px 10px;
      font-size: 0.76rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s;
    }
    .video-cc-btn:hover, .video-fs-btn:hover { background: rgba(0, 0, 0, 0.85); border-color: rgba(255, 255, 255, 0.5); }
    .video-cc-btn.active { background: #e11d48; border-color: #f43f5e; }

    /* Video Caption Display Below Video */
    .video-caption-overlay {
      position: static;
      margin-top: 14px;
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 0;
      cursor: default;
      pointer-events: auto;
      transition: all 0.2s ease;
    }
    .video-caption-overlay.hidden {
      display: none !important;
    }
    .caption-bubble {
      background: #f8fafc;
      color: var(--clr-text-main);
      font-size: clamp(0.92rem, 2.2vw, 1.15rem);
      font-weight: 800;
      padding: clamp(10px, 1.8vw, 14px) clamp(16px, 2.8vw, 24px);
      border-radius: 14px;
      text-align: center;
      border: 1.5px solid #e2e8f0;
      border-left: 4px solid var(--clr-video);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
      line-height: 1.5;
      width: 100%;
    }
    .caption-bubble-zh {
      font-size: clamp(0.80rem, 1.8vw, 0.90rem);
      color: #64748b;
      margin-top: 4px;
      font-weight: 600;
      line-height: 1.45;
    }

    /* INLINE HONOR MASTER CERTIFICATE & CHECK-IN */
    .badge-honor-box {
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
      color: #ffffff;
      border-radius: 24px;
      padding: clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 28px);
      text-align: center;
      box-shadow: 0 12px 36px rgba(67, 56, 202, 0.25);
      border: 3px solid rgba(253, 224, 71, 0.45);
      position: relative;
      overflow: hidden;
      margin-top: 24px;
      transition: all 0.3s ease;
    }
    .badge-honor-box.highlight-glow {
      box-shadow: 0 0 40px rgba(253, 224, 71, 0.7);
      border-color: #fde047;
    }
    .badge-honor-box::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
      pointer-events: none;
    }
    .badge-honor-title {
      font-size: clamp(1.15rem, 2.6vw, 1.5rem);
      font-weight: 900;
      color: #fef08a;
      margin-bottom: 8px;
      text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    .badge-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      padding: 14px 10px;
      border-radius: 14px;
      margin-bottom: 18px;
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .b-stat-num {
      font-size: clamp(1.05rem, 2.2vw, 1.35rem);
      font-weight: 900;
      color: #fde047;
    }
    .b-stat-lbl {
      font-size: clamp(0.70rem, 1.5vw, 0.78rem);
      color: #c7d2fe;
      margin-top: 2px;
    }
    .btn-checkin-action {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #ffffff;
      font-size: clamp(0.92rem, 1.8vw, 1.05rem);
      font-weight: 900;
      padding: 12px 32px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4);
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-checkin-action:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(217, 119, 6, 0.5);
      background: linear-gradient(135deg, #fbbf24, #f59e0b);
    }
    .btn-checkin-action.is-done {
      background: linear-gradient(135deg, #10b981, #059669) !important;
      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
      cursor: default;
    }

/* Responsive Navigation & Anti-Overflow Protection */
.btn-nav {
  text-decoration: none;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 768px) {
  .action-row {
    flex-direction: column;
    gap: 8px;
  }
  .btn-nav {
    max-width: 100%;
    width: 100%;
    white-space: normal;
  }
}

/* ==========================================================================
   RE0 EXTENSIONS (Summary Cloze, Subtitle Mask, Scrolling Transcripts)
   ========================================================================== */
.v-header-left, .v-header-left > div {
  min-width:0;
}

#pPane1 .v-card .v-header-left {
  flex: 1;
}

#pPane1 .v-card .v-header-left > div:last-child > div:first-child {
  flex-wrap: wrap;
}

#pPane1 .v-card .v-word {
  white-space: nowrap; overflow-wrap: normal; flex-shrink: 0;
}

#pPane1 .v-card .v-audio-btn {
  flex-shrink: 0;
}

.word-click-badge.triad-word-read {
  font-size:.68rem;
}

.btn-outline-action {
  border:1px solid #cbd5e1; border-radius:100px; padding:6px 12px; background:#fff; color:#475569; font:inherit; font-size:.76rem; font-weight:700; cursor:pointer;
}

.p-para-card > div:first-child {
  flex-wrap:wrap !important;
}

.quiz-btn, .quiz-opt-text {
  min-width:0; overflow-wrap:anywhere;
}

.official-score {
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0;
}

.official-score strong {
  color:#6d28d9; font-size:.85rem;
}

#moduleReview .official-score strong {
  color:#0369a1;
}

.official-exercise-page {
  margin:22px 0; scroll-margin-top:155px;
}

.official-answer-heading {
  margin:18px 0 10px; color:#6d28d9; font-size:.96rem; scroll-margin-top:155px;
}

.official-hint {
  margin:10px 0; font-size:.8rem; color:#64748b;
}

.official-source-link {
  font-size:.78rem; color:#64748b;
}

.official-source-reference, .official-teacher-reference {
  margin:14px 0; padding:10px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:10px; font-size:.82rem;
}

.official-source-reference summary, .official-teacher-reference summary {
  cursor:pointer; font-weight:700;
}

.official-teacher-reference pre {
  white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.7; margin-top:10px;
}

.quiz-progress {
  height:6px; background:#e2e8f0; border-radius:100px; margin:12px 0; overflow:hidden;
}

.quiz-progress > div {
  width:0; height:100%; background:var(--clr-preview-grad); transition:width .2s;
}

#moduleReview .quiz-progress > div {
  background:var(--clr-review-grad);
}

.triad-check-group {
  display:flex; flex-wrap:wrap; gap:8px; margin:10px 0;
}

.triad-check-btn {
  display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:7px 10px; border:1px solid #cbd5e1; border-radius:10px; background:#fff; font-size:.84rem; cursor:pointer;
}

.triad-check-btn:has(input:checked) {
  background:#ede9fe; border-color:#8b5cf6; color:#5b21b6;
}

.triad-text-question input.triad-check-box {
  width:17px; height:17px; padding:0; margin:0; flex-shrink:0; accent-color:#7c3aed;
}

.triad-text-question input[type=text] {
  max-width:100%;
}

.r-word-meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
}

.r-word-meta .v-phonetic {
  overflow-wrap:anywhere;
}

.r-word-card details {
  font-size:.78rem; color:#64748b;
}

.r-word-card summary {
  cursor:pointer;
}

.triad-vocab-grid label {
  flex-wrap:wrap;
}

.triad-vocab-grid small {
  color:#64748b; font-size:.72rem;
}

.triad-section-title {
  margin:18px 0 10px;
}

#videoCapEn, #videoCapZh {
  white-space:normal; overflow:visible;
}

#passageStatus {
  font-size:.8rem; color:#64748b;
}

:focus-visible {
  outline:3px solid #818cf8; outline-offset:3px;
}

@media(max-width:520px) {
  .badge-stats-grid,.master-stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .header-top { padding:5px 6px; } 
}

/* ==========================================================================
   TRIAD EXTENSIONS & ANCHOR NAVIGATION (RE Common Standard)
   ========================================================================== */
.app-header .primary-mode-nav {
  max-width:none; margin:0; padding:0; border:0; background:transparent; width:auto;
}

.app-header .sub-stepper-bar {
  margin:0; max-width:300px; width:100%;
}

.app-workspace-module:not(.active), .p-pane:not(.active), .r-pane:not(.active), .v-pane:not(.active) {
  display:none;
}

.c-filter-group {
  display:flex; gap:7px; flex-wrap:wrap; margin:12px 0 18px;
}

.c-filter-group a {
  font-size:.78rem; font-weight:800; padding:6px 10px; text-decoration:none; color:#5b21b6; background:#ede9fe; border:1px solid #ddd6fe; border-radius:100px;
}

.c-filter-group a:nth-child(2) {
  background:#e0f2fe; color:#075985; border-color:#bae6fd;
}

.c-filter-group a:nth-child(3) {
  background:#fce7f3; color:#9d174d; border-color:#fbcfe8;
}

[id^="sec_"] {
  scroll-margin-top:160px;
}

.triad-source, .triad-discussion {
  padding:14px; margin:12px 0; line-height:1.75; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px;
}

.triad-discussion textarea {
  width:100%; min-height:70px; margin-top:8px; border:1px solid #cbd5e1; border-radius:8px; padding:10px; font:inherit;
}

.triad-discussion summary {
  cursor:pointer; font-weight:700; color:#475569;
}

.triad-text-question input {
  width:min(100%,560px); border:1px solid #cbd5e1; border-radius:8px; padding:9px 11px; margin:8px 8px 8px 0; font:inherit;
}

.triad-text-question input.is-correct {
  background:#ecfdf5; border-color:#10b981;
}

.triad-text-question input.is-wrong {
  background:#fef2f2; border-color:#ef4444;
}

.triad-answer-btn {
  border:0; border-radius:100px; padding:9px 14px; font-weight:800; color:white; background:#6366f1; cursor:pointer;
}

.triad-answer-btn:disabled {
  opacity:.65; cursor:default;
}

.quiz-btn:disabled {
  cursor:default; opacity:1;
}

.quiz-exp.show, .feedback-box.show {
  display:block;
}

.triad-select-feedback {
  display:inline-block; margin-left:8px; color:#166534; font-size:.82rem;
}

#videoCapZh {
  color:#cbd5e1;
}

.triad-video-controls {
  display:flex; gap:8px; margin:10px 0;
}

.triad-video-controls button {
  padding:5px 12px; border:1px solid #cbd5e1; border-radius:100px; background:white; font-weight:700; cursor:pointer;
}

.triad-vocab-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:9px; margin:12px 0;
}

.triad-vocab-grid label:has(input:checked) {
  background:#ecfdf5; border-color:#10b981;
}

.triad-certificate {
  background:linear-gradient(135deg,#312e81,#581c87); color:white; border-radius:22px; padding:28px 20px; text-align:center; margin:14px 0;
}

.triad-certificate h2 {
  color:white; font-size:1.3rem; margin:8px 0;
}

.triad-certificate p {
  color:#e0e7ff; margin:10px 0;
}

.triad-stats {
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:20px 0;
}

.triad-stats>div {
  background:rgba(255,255,255,.1); border-radius:12px; padding:14px 7px;
}

.triad-stats strong {
  display:block; color:#fde047; font-size:clamp(1.1rem,2.2vw,1.5rem);
}

.triad-stats span {
  font-size:.8rem; color:#e0e7ff;
}

.triad-certificate button {
  margin:8px; padding:10px 18px; border:1px solid #fbbf24; border-radius:100px; color:#fef08a; background:rgba(251,191,36,.12); cursor:pointer; font-weight:800;
}

.triad-certificate button:disabled {
  opacity:.5; cursor:default;
}

.triad-certificate button.is-done {
  background:#059669; border-color:#34d399; color:white;
}

.triad-next {
  display:inline-block; text-decoration:none; font-weight:800; color:white; padding:10px 18px; border-radius:100px; background:linear-gradient(135deg,#10b981,#059669);
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.p-para-card {
  background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:14px; padding:16px; margin-bottom:16px;
}

.para-text-en {
  font-size:.96rem; line-height:1.85; margin-top:8px;
}

.para-text-zh {
  margin-top:12px; color:#64748b; line-height:1.75;
}

.triad-playing {
  background:#fef3c7 !important; color:#92400e !important; border-radius:4px;
}

.triad-passage-toolbar {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

.triad-word-card {
  padding:13px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc;
}

.triad-word-btn {
  display:block; width:100%; text-align:left; border:0; background:transparent; color:#1e293b; font:inherit; font-weight:800; cursor:pointer; margin-bottom:7px;
}

.triad-word-read {
  font-size:.75rem; color:#6366f1;
}

.triad-word-card details {
  font-size:.82rem; margin-top:7px; color:#475569;
}

body[data-re-triad] {
  overflow-anchor:none;
}

}
#videoCapEn {
  color:#ffffff !important;
}

.triad-transcript {
  margin:12px 0; border:1px solid #e2e8f0; border-radius:12px; padding:12px;
}

.triad-transcript summary {
  font-weight:800; cursor:pointer;
}

.triad-transcript p {
  margin:12px 0; color:#334155; line-height:1.6;
}

.triad-transcript button {
  border:0; background:#e0f2fe; color:#075985; border-radius:100px; padding:3px 8px; margin-right:8px; cursor:pointer;
}

.triad-transcript .triad-transcript-zh {
  display:block; color:#64748b; font-size:.84rem;
}

body[data-re-triad] .p-audio-btn {
  border:1px solid #cbd5e1; border-radius:100px; padding:5px 10px; background:#eff6ff; color:#334155; font:inherit; font-size:.75rem; font-weight:700; cursor:pointer;
}

.summary-select,
select.summary-select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #cbd5e1;
  background-color: #f8fafc;
  color: #1e293b;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  margin: 8px 0;
}

.summary-select:focus,
select.summary-select:focus {
  outline: none;
  border-color: #6366f1;
  background-color: #ffffff;
}

.summary-select.is-correct,
select.summary-select.is-correct {
  background-color: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}

.summary-select.is-wrong,
select.summary-select.is-wrong {
  background-color: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}

.card-box {
  max-width: 100%;
  box-sizing: border-box;
}


/* Vocab Check Item */
.vocab-check-item {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.vocab-check-item:hover {
  background: #fff1f2;
  border-color: #fecdd3;
}
.vocab-check-item.checked {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.vocab-check-item.checked .v-check-icon {
  background: #10b981;
  color: #ffffff;
}
.v-check-icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: transparent;
  flex-shrink: 0;
}
.v-word-text { font-size: 0.86rem; font-weight: 700; }
.v-word-badge { font-size: 0.65rem; color: #64748b; font-weight: normal; margin-left: auto; }