/* 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;
      /* Semantic Design Tokens */
      --app-brand-preview: #6c5ce7;
      --app-brand-review: #0284c7;
      --app-brand-video: #e11d48;
      --app-state-correct: #10b981;
      --app-state-correct-bg: #ecfdf5;
      --app-state-wrong: #ef4444;
      --app-state-wrong-bg: #fef2f2;
      --safe-area-bottom: max(16px, env(safe-area-inset-bottom, 16px));

      --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, .quiz-exp.show {
      display: none !important;
    }

        .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 {
      max-width: 696px;
      margin: 10px auto 0;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
      border-radius: 18px;
      padding: 14px 18px;
      text-align: center;
      color: #ffffff;
      box-shadow: 0 8px 26px rgba(49, 46, 129, 0.35);
      border: 2.5px solid rgba(253, 224, 71, 0.45);
      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 {
      max-width: 696px;
      margin: 12px auto 0;
      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
      color: #ffffff;
      border-radius: 20px;
      padding: 14px 18px;
      text-align: center;
      box-shadow: 0 10px 30px rgba(67, 56, 202, 0.25);
      border: 2.5px solid rgba(253, 224, 71, 0.45);
      position: relative;
      overflow: hidden;
      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.05rem, 2.2vw, 1.35rem);
      font-weight: 900;
      color: #fef08a;
      margin-bottom: 5px;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .badge-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      padding: 8px 6px;
      border-radius: 10px;
      margin-bottom: 10px;
      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: none !important;
}

.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:18px; padding:14px 18px; text-align:center; max-width:696px; margin:10px auto;
}

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

.triad-certificate p {
  color:#e0e7ff; margin:6px 0; font-size:0.9rem;
}

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

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

.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;
}


/* ============================================================================
   Shared Summary Blanks & Video Extension Components (RE Triad Layer 2)
   ============================================================================ */
.summary-blank {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 4px;
  border-bottom: 2px solid #3b82f6;
  background: #f1f5f9;
  border-radius: 6px;
  color: #2563eb;
  font-weight: 800;
  transition: all 0.25s ease;
  min-width: 90px;
  text-align: center;
}
.summary-blank.is-correct {
  background: #dcfce7 !important;
  border: 1.5px solid #22c55e !important;
  border-bottom: 2px solid #16a34a !important;
  color: #15803d !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}
.summary-blank.is-wrong {
  background: #fee2e2 !important;
  border: 1.5px solid #ef4444 !important;
  border-bottom: 2px solid #dc2626 !important;
  color: #b91c1c !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.2);
}

.video-top-control-bar {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.video-ctrl-btn {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}
.video-ctrl-btn:hover { background: rgba(0, 0, 0, 0.85); border-color: #ffffff; }

.video-intro-box {
  background: #fff1f2;
  border: 1.5px solid #ffe4e6;
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 18px;
}
.video-intro-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #be123c;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.video-intro-desc {
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.6;
}

.quiz-sec-header {
  background: #f1f5f9;
  border-left: 4px solid var(--clr-video);
  padding: 8px 14px;
  border-radius: 6px 10px 10px 6px;
  margin: 24px 0 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.quiz-sec-title {
  font-weight: 900;
  font-size: 0.95rem;
  color: #1e293b;
}
.quiz-sec-badge {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 700;
}

.question-block {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.question-block:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);
}
.q-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.5;
}
.q-num {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  flex-shrink: 0;
}
.options-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.option-btn {
  width: 100%;
  text-align: left;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.15s ease;
}
.option-btn:hover:not(:disabled) {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: #4c1d95;
}
.option-btn .opt-letter {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.option-btn.opt-correct,
.option-btn.is-correct {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
}
.option-btn.opt-correct .opt-letter,
.option-btn.is-correct .opt-letter {
  background: #10b981 !important;
  color: #ffffff !important;
}
.option-btn.opt-wrong,
.option-btn.is-wrong {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
}
.option-btn.opt-wrong .opt-letter,
.option-btn.is-wrong .opt-letter {
  background: #ef4444 !important;
  color: #ffffff !important;
}

.feedback-box {
  display: none;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.84rem;
  color: #166534;
  line-height: 1.5;
}
.feedback-box.show { display: block; animation: tabFadeIn 0.2s ease-out; }
.feedback-header {
  font-weight: 800;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vocab-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 12px 0 18px 0;
}
.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; }

.inquiry-card {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 16px 0;
}
.inquiry-title {
  font-weight: 900;
  font-size: 0.92rem;
  color: #166534;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.inquiry-desc {
  font-size: 0.86rem;
  color: #14532d;
  line-height: 1.6;
}
.inquiry-sample-toggle {
  background: #ffffff;
  border: 1px solid #86efac;
  color: #15803d;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  cursor: pointer;
  margin-top: 8px;
}
.inquiry-sample-box {
  display: none;
  background: #ffffff;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  font-size: 0.84rem;
  color: #334155;
  line-height: 1.6;
  border: 1px dashed #86efac;
}

.master-badge-box {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 32px);
  text-align: center;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(49, 46, 129, 0.35);
  border: 2px solid #818cf8;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}
.master-badge-title {
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  font-weight: 900;
  color: #fde047;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin-bottom: 8px;
}
.master-badge-sub {
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  color: #e0e7ff;
  max-width: 600px;
  margin: 0 auto 20px auto;
  line-height: 1.6;
}
.master-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  max-width: 720px;
  margin: 0 auto 24px auto;
}
.master-stat-card {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 8px;
}
.master-stat-val {
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 3px;
}
.master-stat-lbl {
  font-size: 0.72rem;
  color: #cbd5e1;
  font-weight: 700;
}

.header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }


/* A11Y & Ergonomics Enhancements */
:focus-visible {
  outline: 2px solid var(--clr-primary, #6366f1);
  outline-offset: 2px;
}

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

/* Wrong-answer filter mode */
.quiz-card.is-correct.filter-wrong-hidden {
  display: none !important;
}

/* Playback Speed Pill */
.speed-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border: 1px solid var(--clr-border, #e2e8f0);
  color: var(--clr-text-main, #1e293b);
  border-radius: 100px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.speed-control-btn:hover {
  background: #e2e8f0;
}

/* Safe area insets for mobile & tablet */
body {
  padding-bottom: max(60px, calc(40px + env(safe-area-inset-bottom, 0px))) !important;
}


/* ==========================================================================
   TKid 全网站标准词汇卡模块 (tk-vocab-card Public Golden Module)
   ========================================================================== */
/* 1. 卡片外层与网格标准 */
    .vocab-grid,
    .v-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 45vw, 340px), 1fr));
      gap: clamp(12px, 2vw, 16px);
    }
    .tk-vocab-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 18px;
      padding: clamp(10px, 1.5vw, 12px);
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 3px 12px rgba(15, 23, 42, 0.03);
      position: relative;
    }
    .tk-vocab-card:hover {
      border-color: #cbd5e1;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    }

    /* 2. 词头主信息栏 (Header) */
    .tk-vocab-card .v-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .tk-vocab-card .v-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 1;
    }
    .tk-vocab-card .v-cartoon-icon {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      align-self: center;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      background: #fef3c7;
      transition: transform 0.2s ease;
      order: -1;
    }
    .tk-vocab-card .v-cartoon-icon:hover {
      transform: scale(1.08);
    }
    .tk-vocab-card .word-svg { width: 100%; height: 100%; display: block; }

    .tk-vocab-card .v-title-meta {
      display: flex;
      flex-direction: column;
      gap: 3px;
      min-width: 0;
    }
    .tk-vocab-card .v-title-row,
    .v-title-row {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: nowrap;
      min-width: 0;
    }
    /* 彻底隐藏序号、卡通图标、剑桥级别标签与旧发音喇叭 (Click Word to Speak) */
    .tk-vocab-card .v-num-badge,
    .tk-vocab-card .v-cartoon-icon,
    .tk-vocab-card .badge-cefr,
    .tk-vocab-card .v-audio-btn,
    .v-card .v-num-badge,
    .v-card .v-cartoon-icon,
    .v-card .badge-cefr,
    .v-card .v-audio-btn {
      display: none !important;
    }
    .tk-vocab-card .v-word,
    .v-word {
      font-size: clamp(1.22rem, 2.7vw, 1.44rem);
      font-weight: 900;
      color: #1e40af;
      letter-spacing: -0.015em;
      line-height: 1.15;
      white-space: nowrap;
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      border-radius: 6px;
      padding: 1px 6px;
      margin-left: -6px;
      transition: color 0.18s ease, background 0.18s ease, transform 0.15s ease;
      order: 0;
    }
    .tk-vocab-card .v-word:hover,
    .v-word:hover {
      color: #2563eb !important;
      background: rgba(37, 99, 235, 0.08);
      transform: translateY(-1px);
    }
    /* 播放中状态高亮反馈 */
    .tk-vocab-card .v-word.playing,
    .tk-vocab-card .v-word.is-playing,
    .v-word.playing,
    .v-word.is-playing {
      color: #2563eb !important;
      background: rgba(37, 99, 235, 0.16);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
    }
    /* 超过 8 个字母的长单词/短语 (如 intelligent, advantage, scientist) - 整体调小 10% */
    .tk-vocab-card .v-word.v-word-long,
    .v-word.v-word-long {
      font-size: clamp(1.00rem, 2.0vw, 1.12rem) !important;
      letter-spacing: -0.025em;
    }
    /* 超过 10 个字母的超长单词/短语 (如 communicate, international, disappearance) - 整体调小 10% */
    .tk-vocab-card .v-word.v-word-xlong,
    .v-word.v-word-xlong {
      font-size: clamp(0.86rem, 1.6vw, 0.99rem) !important;
      letter-spacing: -0.035em;
    }
    .tk-vocab-card .v-phonetic {
      font-family: "Lucida Sans Unicode", "Segoe UI", -apple-system, sans-serif;
      font-size: 0.82rem;
      color: #64748b;
      font-weight: 500;
      line-height: 1.2;
      margin-right: 2px;
    }
    .tk-vocab-card .badge-pos {
      font-size: 0.68rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      background: #f8fafc;
      color: #475569;
      border: 1px solid #e2e8f0;
      line-height: 1.2;
      flex-shrink: 0;
      align-self: center;
    }

    /* CEFR 等级通用色系阶梯 */
    .tk-vocab-card .badge-cefr {
      font-size: 0.68rem;
      font-weight: 800;
      padding: 2px 7px;
      border-radius: 6px;
      line-height: 1.2;
      flex-shrink: 0;
      align-self: center;
    }
    .tk-vocab-card .badge-cefr.cefr-a1 { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
    .tk-vocab-card .badge-cefr.cefr-a2 { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }
    .tk-vocab-card .badge-cefr.cefr-b1 { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
    .tk-vocab-card .badge-cefr.cefr-b2 { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .tk-vocab-card .badge-cefr.cefr-c1 { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }

    .tk-vocab-card .v-phonetic {
      font-family: "Lucida Sans Unicode", "Segoe UI", -apple-system, sans-serif;
      font-size: 0.82rem;
      color: #64748b;
      font-weight: 500;
      line-height: 1.2;
    }

    /* 3. 主单词音频大按钮 (紧凑精致版 36px) */
    .tk-vocab-card .v-audio-btn {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      border-radius: 50%;
      background: #f5f3ff;
      color: #6d28d9;
      border: 1.5px solid #ddd6fe;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: clamp(1.05rem, 2.2vw, 1.15rem);
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      touch-action: manipulation;
    }
    .tk-vocab-card .v-audio-btn svg {
      width: 21px !important;
      height: 21px !important;
      display: block;
    }
    .tk-vocab-card .v-audio-btn:hover {
      background: #ede9fe;
      border-color: #c4b5fd;
      transform: scale(1.06);
    }
    .tk-vocab-card .v-audio-btn.playing {
      background: #6d28d9;
      color: #ffffff;
      border-color: #6d28d9;
      box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.2);
      animation: pBtnPulse 1.2s infinite ease-in-out;
    }

    /* 4. 释义与原句交互框 (Sub-Boxes 紧凑压缩版) */
    .tk-vocab-card .v-def-box,
    .tk-vocab-card .v-example-box {
      background: #f8fafc;
      border: 1.5px solid #f1f5f9;
      border-radius: 12px;
      padding: 7px 11px;
      cursor: pointer;
      transition: all 0.18s ease;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .tk-vocab-card .v-def-box:hover,
    .tk-vocab-card .v-example-box:hover {
      background: #ffffff;
      border-color: #cbd5e1;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    }
    .tk-vocab-card .v-def-box.is-playing,
    .tk-vocab-card .v-example-box.is-playing {
      background: #ffffff;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
    }

    .tk-vocab-card .v-box-tag {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.72rem;
      font-weight: 700;
      color: #64748b;
      margin-bottom: 2px;
    }
    .tk-vocab-card .v-tag-label {
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .tk-vocab-card .v-tag-icon {
      font-size: 0.85rem;
    }
    .tk-vocab-card .v-mini-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #475569;
      font-size: 0.9rem;
      width: 26px;
      height: 26px;
      min-width: 26px;
      min-height: 26px;
      border-radius: 50%;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex-shrink: 0;
      transition: all 0.18s ease;
      touch-action: manipulation;
    }
    .tk-vocab-card .v-mini-btn svg {
      width: 16px !important;
      height: 16px !important;
      display: block;
    }
    .tk-vocab-card .v-mini-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
      transform: scale(1.08);
    }
    .tk-vocab-card .v-mini-btn.playing {
      background: #10b981;
      color: #ffffff;
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    /* 5. 释义与例句文本格式 */
    .tk-vocab-card .v-def-text {
      font-size: 0.85rem;
      font-weight: 600;
      color: #1e293b;
      line-height: 1.45;
    }
        .tk-vocab-card .v-def-zh {
      font-size: 0.84rem;
      font-weight: 600;
      color: #0f172a;
      margin-top: 2px;
      line-height: 1.4;
    }
    .tk-vocab-card .v-example-text {
      font-size: 0.85rem;
      font-weight: 500;
      color: #334155;
      line-height: 1.5;
    }
    .tk-vocab-card .v-example-text em,
    .tk-vocab-card .v-example-text strong,
    .tk-vocab-card .v-example-text mark,
    .tk-vocab-card .v-keyword {
      color: #2563eb;
      background: rgba(37, 99, 235, 0.08);
      padding: 1px 5px;
      border-radius: 4px;
      font-style: normal;
      font-weight: 800;
      border-bottom: 2px solid #3b82f6;
    }
  
    /* 卡通小喇叭声波微动效 */
    @keyframes waveRipple {
      0%, 100% { opacity: 0.4; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.08); }
    }
    .tk-vocab-card .v-audio-btn:hover .wave-1,
    .tk-vocab-card .v-mini-btn:hover .wave-1 {
      animation: waveRipple 0.8s infinite ease-in-out;
    }
    .tk-vocab-card .v-audio-btn:hover .wave-2,
    .tk-vocab-card .v-mini-btn:hover .wave-2 {
      animation: waveRipple 0.8s infinite ease-in-out 0.2s;
    }
    .tk-vocab-card .v-audio-btn.playing .wave-1,
    .tk-vocab-card .v-mini-btn.playing .wave-1 {
      animation: waveRipple 0.5s infinite ease-in-out;
    }
    .tk-vocab-card .v-audio-btn.playing .wave-2,
    .tk-vocab-card .v-mini-btn.playing .wave-2 {
      animation: waveRipple 0.5s infinite ease-in-out 0.15s;
    }

  
    /* 大号助记插图 / 课本原图展台 */
    .tk-vocab-card .v-hero-media {
      width: 100%;
      height: clamp(140px, 22vw, 175px);
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
      border: 1px solid #e2e8f0;
      background: #090d16;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tk-vocab-card .v-hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .tk-vocab-card:hover .v-hero-media img {
      transform: scale(1.03);
    }
    .tk-vocab-card .v-hero-tag {
      position: absolute;
      bottom: 8px;
      right: 10px;
      background: rgba(15, 23, 42, 0.75);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      color: #f8fafc;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      pointer-events: none;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tk-vocab-card .v-example-zh {
      font-size: 0.82rem;
      font-weight: 500;
      color: #64748b;
      margin-top: 3px;
      line-height: 1.4;
    }