/* =========================================================
   LESSON-COMMON.CSS
   Styles partagés par toutes les fiches de cours ("lesson-page-v2").
   Ce fichier consolide les <style> qui étaient dupliqués (avec de
   petites variations) dans chaque template de leçon.

   Il ne redéfinit PAS les classes déjà présentes dans le thème
   global du site (lesson-page-v2, lesson-hero-v2, lesson-card-v2,
   lesson-formula-box-v2, lesson-practice-btn-v2, lesson-kicker-v2,
   lesson-intro-v2, etc.) : celles-ci vivent ailleurs et ne sont
   jamais redéfinies dans les <style> locaux des fiches.

   COMPATIBILITÉ : tous les noms de classes déjà utilisés dans tes
   templates sont conservés en alias, donc tu n'as normalement rien
   à changer dans le HTML — seulement à supprimer le <style> local
   de chaque fiche et à inclure ce fichier une fois.
   ========================================================= */

/* ---------------------------------------------------------
   VARIABLES — palette + surfaces (clair / sombre)
   Scopées à .lesson-page-v2 pour ne rien impacter ailleurs.
   --------------------------------------------------------- */

.lesson-page-v2 {
    /* Mêmes surfaces que les autres pages de l'application. */
    --app-page-panel: rgba(255, 255, 255, 0.97);
    --app-page-card: #ffffff;
    --app-page-card-soft: #f8fafc;
    --app-page-card-blue: #eff6ff;
    --app-page-border: rgba(148, 163, 184, 0.28);
    --app-page-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
    --app-page-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.06);
    --lesson-page-panel: var(--app-page-panel);
    --lesson-page-card: var(--app-page-card);
    --lesson-page-card-soft: var(--app-page-card-soft);
    --lesson-page-card-blue: var(--app-page-card-blue);
    --lesson-page-border: var(--app-page-border);
    --lesson-page-shadow: var(--app-page-shadow);
    --lesson-page-shadow-soft: var(--app-page-shadow-soft);

    --lesson-blue: #2563eb;
    --lesson-blue-soft: #eff6ff;
    --lesson-blue-border: rgba(37, 99, 235, 0.20);
    --lesson-blue-text: #1e3a8a;

    --lesson-amber: #d97706;
    --lesson-amber-soft: #fffbeb;
    --lesson-amber-border: rgba(217, 119, 6, 0.30);

    --lesson-red: #dc2626;
    --lesson-green: #059669;
    --lesson-purple: #7c3aed;

    --lesson-ink: #111827;
    --lesson-muted: #374151;

    --lesson-card-bg: #f8fafc;
    --lesson-card-border: #e5e7eb;

    --lesson-neutral-border: #64748b;

    --lesson-tag-bg: #e0e7ff;
    --lesson-tag-color: #3730a3;

    --lesson-table-border: #334155;

    --lesson-svg-bg: #ffffff;
    --lesson-svg-border: #dbe4f0;
    --lesson-border: var(--lesson-svg-border);
}

html[data-theme="dark"] .lesson-page-v2,
body.dark .lesson-page-v2,
body.dark-mode .lesson-page-v2,
body.theme-dark .lesson-page-v2,
[data-bs-theme="dark"] .lesson-page-v2 {
    --app-page-panel: rgba(15, 23, 42, 0.97);
    --app-page-card: #111827;
    --app-page-card-soft: #1e293b;
    --app-page-card-blue: rgba(37, 99, 235, 0.18);
    --app-page-border: rgba(148, 163, 184, 0.22);
    --app-page-shadow: 0 20px 52px rgba(2, 6, 23, 0.38);
    --app-page-shadow-soft: 0 10px 28px rgba(2, 6, 23, 0.26);

    --lesson-blue-soft: rgba(37, 99, 235, 0.16);
    --lesson-blue-border: rgba(96, 165, 250, 0.34);
    --lesson-blue-text: #bfdbfe;

    --lesson-amber-soft: rgba(245, 158, 11, 0.14);
    --lesson-amber-border: rgba(245, 158, 11, 0.38);

    --lesson-red: #f87171;
    --lesson-green: #34d399;
    --lesson-purple: #c4b5fd;

    --lesson-ink: #f1f5f9;
    --lesson-muted: #cbd5e1;

    --lesson-card-bg: #1f2937;
    --lesson-card-border: #475569;

    --lesson-neutral-border: #64748b;

    --lesson-tag-bg: rgba(99, 102, 241, 0.22);
    --lesson-tag-color: #c7d2fe;

    --lesson-table-border: #94a3b8;

    --lesson-svg-bg: #1f2937;
    --lesson-svg-border: #475569;
}

/* ---------------------------------------------------------
   LISTES DE MÉTHODE
   (.lesson-method-list-v2 — identique dans tous les fichiers)
   --------------------------------------------------------- */

.lesson-method-list-v2 {
    margin: 1rem 0 0;
    padding-left: 1.6rem;
    text-align: left;
}
.lesson-method-list-v2 li {
    margin-bottom: 0.75rem;
    padding-left: 0.35rem;
    line-height: 1.5;
    color: var(--lesson-ink);
}
.lesson-method-list-v2 li::marker {
    font-weight: 700;
}

/* ---------------------------------------------------------
   FORMULES EN SCROLL HORIZONTAL
   --------------------------------------------------------- */

.lesson-math-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ---------------------------------------------------------
   ENCADRÉS (notes / propriétés / avertissements)
   Alias de : lesson-property-box, lesson-priority-box, vdt-note
   (bleu) et lesson-warning-box, vdt-warning (orange), vdt-method-box
   (neutre en pointillés).
   --------------------------------------------------------- */

.lesson-property-box,
.lesson-priority-box,
.vdt-note,
.lesson-warning-box,
.vdt-warning,
.vdt-method-box {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 12px;
    color: var(--lesson-ink);
}

.lesson-property-box p,
.lesson-priority-box p,
.vdt-note p,
.lesson-warning-box p,
.vdt-warning p,
.vdt-method-box p {
    margin: 0.35rem 0;
    color: var(--lesson-ink);
}

/* variante bleue (information / propriété à retenir) */
.lesson-property-box,
.lesson-priority-box,
.vdt-note {
    border-left: 4px solid var(--lesson-blue);
    background: var(--lesson-blue-soft);
}

/* variante orange (attention / erreur à éviter) */
.lesson-warning-box,
.vdt-warning {
    border-left: 4px solid var(--lesson-amber);
    background: var(--lesson-amber-soft);
}

/* variante neutre (encadré pointillé, ex. conversions) */
.vdt-method-box {
    border: 1px dashed var(--lesson-neutral-border);
    background: var(--lesson-card-bg);
}

/* ---------------------------------------------------------
   GRILLES DE CARTES (définitions, familles, règles, priorités…)
   Alias de : lesson-fraction-grid/-card, lesson-priority-grid/-card,
   lesson-family-grid/-card, lesson-rule-grid/-card,
   lesson-case-list/-item, vdt-formula-grid/-card.
   --------------------------------------------------------- */

.lesson-fraction-grid,
.lesson-priority-grid,
.lesson-family-grid,
.lesson-rule-grid,
.lesson-case-list,
.vdt-formula-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

/* les grilles historiquement à 2 colonnes le restent */
.lesson-fraction-grid,
.lesson-case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lesson-fraction-card,
.lesson-priority-card,
.lesson-family-card,
.lesson-rule-card,
.lesson-case-item,
.vdt-formula-card {
    padding: 1rem;
    border: 1px solid var(--lesson-card-border);
    border-radius: 12px;
    background: var(--lesson-card-bg);
    color: var(--lesson-ink);
}

/* cartes centrées (familles, règles, priorités, formules) */
.lesson-priority-card,
.lesson-family-card,
.lesson-rule-card,
.vdt-formula-card {
    text-align: center;
}

.lesson-case-item {
    text-align: center;
    overflow-x: auto;
}

.lesson-fraction-card strong,
.lesson-priority-card strong,
.lesson-family-card strong,
.lesson-rule-card strong,
.vdt-formula-card strong {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--lesson-ink);
}

.lesson-fraction-card span,
.lesson-priority-card span,
.lesson-family-card span,
.lesson-rule-card span {
    color: var(--lesson-muted);
}

/* pastille numérotée (ex. les 3 priorités de calcul) */
.lesson-priority-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.6rem;
    border-radius: 999px;
    background: var(--lesson-blue);
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 700px) {
    .lesson-fraction-grid,
    .lesson-priority-grid,
    .lesson-family-grid,
    .lesson-rule-grid,
    .lesson-case-list,
    .vdt-formula-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------------------
   BADGES / ÉTIQUETTES DE NIVEAU
   Alias de : lesson-level-label, vdt-example-title.
   --------------------------------------------------------- */

.lesson-level-label,
.vdt-example-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.65rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--lesson-tag-bg);
    color: var(--lesson-tag-color);
    font-size: 0.85rem;
    font-weight: 700;
}

/* ---------------------------------------------------------
   FIGURES SVG (axes gradués, configurations de Thalès…)
   Alias de : lesson-example-axis, lesson-thales-figure.
   --------------------------------------------------------- */

.lesson-example-axis,
.lesson-thales-figure {
    max-width: 640px;
    margin: 1rem auto 1.25rem;
}
.lesson-example-axis svg,
.lesson-thales-figure svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
}

.lesson-thales-note {
    font-size: 0.95rem;
    opacity: 0.85;
    color: var(--lesson-muted);
}

.lesson-nowrap {
    white-space: nowrap;
}

/* ---------------------------------------------------------
   TABLEAUX DE PROPORTIONNALITÉ
   --------------------------------------------------------- */

.lesson-proportion-table-wrap {
    overflow-x: auto;
    margin: 1rem auto 1.25rem;
}
.lesson-proportion-table {
    border-collapse: collapse;
    margin: 0 auto;
    font-size: 1.08rem;
}
.lesson-proportion-table td {
    min-width: 4.8rem;
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--lesson-table-border);
    text-align: center;
    white-space: nowrap;
    color: var(--lesson-ink);
}

.lesson-conversion-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin: 1rem auto;
    padding-bottom: 4px;
}

.lesson-conversion-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--lesson-ink);
}

.lesson-conversion-table th,
.lesson-conversion-table td {
    padding: 0.7rem 0.45rem;
    border: 1px solid var(--lesson-table-border);
    text-align: center;
    white-space: nowrap;
}

.lesson-conversion-table th {
    background: var(--lesson-card-bg);
    font-size: 0.9rem;
    font-weight: 800;
}

.lesson-conversion-table td {
    background: var(--app-page-card);
    font-size: 1.12rem;
    font-weight: 800;
}

.lesson-conversion-table .is-source {
    background: rgba(37, 99, 235, 0.16);
    color: var(--lesson-blue);
}

.lesson-conversion-table .is-target {
    background: rgba(5, 150, 105, 0.16);
    color: var(--lesson-green);
}

.lesson-conversion-table .decimal-boundary {
    border-left: 3px solid var(--lesson-green);
}

body.dark .lesson-conversion-table .is-source {
    background: rgba(96, 165, 250, 0.22);
    color: #bfdbfe;
}

body.dark .lesson-conversion-table .is-target {
    background: rgba(52, 211, 153, 0.2);
    color: #a7f3d0;
}
.lesson-solid-general-formula {
    margin: 1rem 0 1.15rem;
    padding: 1.15rem;
    border: 2px solid var(--lesson-blue-border);
    border-radius: 16px;
    background: var(--lesson-blue-soft);
    color: var(--lesson-ink);
    text-align: center;
}
.lesson-solid-general-formula strong { display: block; margin-bottom: 0.35rem; font-size: 1.05rem; }
.lesson-solid-main-formula { font-size: 1.2rem; font-weight: 800; }
.lesson-solid-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.lesson-solid-grid.is-two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lesson-solid-grid.is-two-columns .lesson-solid-card:only-child {
    grid-column: 1 / -1;
    width: calc(50% - 0.5rem);
    justify-self: center;
}
.lesson-solid-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--lesson-card-border);
    border-radius: 14px;
    background: var(--lesson-card-bg);
    color: var(--lesson-ink);
    text-align: center;
}
.lesson-solid-card h3 { margin: 0 0 0.55rem; color: var(--lesson-ink); font-size: 1.05rem; }
.lesson-solid-card svg { width: 100%; max-width: 190px; height: 145px; margin-bottom: 0.5rem; overflow: visible; }
.lesson-solid-card svg .solid-face { fill: var(--lesson-blue-soft); stroke: var(--lesson-blue); stroke-width: 2; }
.lesson-solid-card svg .solid-line { fill: none; stroke: var(--lesson-blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lesson-solid-card svg .solid-hidden { fill: none; stroke: var(--lesson-muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.lesson-solid-card svg .solid-measure { fill: none; stroke: var(--lesson-red); stroke-width: 1.8; stroke-dasharray: 4 3; }
.lesson-solid-card svg text { fill: var(--lesson-ink); font: 700 14px sans-serif; }
.lesson-solid-card .lesson-solid-formula {
    width: 100%;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid var(--lesson-card-border);
    font-weight: 800;
}
@media (max-width: 760px) {
    .lesson-solid-grid, .lesson-solid-grid.is-two-columns { grid-template-columns: 1fr; }
    .lesson-solid-grid.is-two-columns .lesson-solid-card:only-child { width: 100%; }
}
.lesson-proportion-x {
    color: var(--lesson-red);
    font-weight: 800;
}
.lesson-column-operation {
    margin: 0.9rem auto;
    padding: 0.75rem 1rem;
    max-width: 520px;
    border-radius: 0.7rem;
    background: var(--lesson-blue-soft);
    color: var(--lesson-blue-text);
    text-align: center;
    font-weight: 700;
}

/* ---------------------------------------------------------
   TRAJET EN PLUSIEURS ÉTAPES (vitesse / distance / durée)
   --------------------------------------------------------- */

.vdt-trip-line {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    gap: 10px;
    align-items: center;
    margin: 1.2rem 0;
    padding: 1rem;
    border: 1px solid var(--lesson-blue-border);
    border-radius: 16px;
    background: var(--lesson-card-bg);
    color: var(--lesson-ink);
}
.vdt-trip-point {
    min-width: 82px;
    text-align: center;
    font-weight: 850;
}
.vdt-trip-arrow {
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lesson-blue), var(--lesson-green));
}

@media (max-width: 760px) {
    .vdt-trip-line {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .vdt-trip-arrow {
        width: 4px;
        height: 28px;
        margin: 0 auto;
    }
}

/* ---------------------------------------------------------
   COULEURS SÉMANTIQUES RÉUTILISABLES
   Ces classes existaient déjà, sous des noms propres à chaque
   fiche (lesson-family-x, vdt-speed, etc.). Elles sont conservées
   telles quelles pour ne rien casser, mais tu peux progressivement
   utiliser les classes génériques .lesson-hl-* dans les nouvelles
   fiches pour éviter d'en recréer une par notion.
   --------------------------------------------------------- */

.lesson-family-number,
.lesson-hl-neutral { color: var(--lesson-muted); }

.lesson-family-x,
.vdt-time,
.lesson-hl-amber { color: var(--lesson-amber); font-weight: 850; }

.lesson-family-x2,
.lesson-hl-red { color: var(--lesson-red); font-weight: 850; }

.vdt-distance,
.lesson-hl-blue { color: var(--lesson-blue); font-weight: 850; }

.vdt-speed,
.lesson-hl-green { color: var(--lesson-green); font-weight: 850; }

.vdt-clock,
.vdt-answer,
.lesson-hl-purple { color: var(--lesson-purple); font-weight: 850; }

/* ---------------------------------------------------------
   SVG INLINE (axes gradués, figures de Thalès…)
   Les couleurs des <svg> intégrés directement dans le HTML sont
   passées en variables CSS (var(--lesson-ink), var(--lesson-blue),
   var(--lesson-red), var(--lesson-green), var(--lesson-svg-bg),
   var(--lesson-svg-border)) directement dans les attributs fill=""
   et stroke="" du SVG, plutôt qu'en couleurs figées. C'est
   supporté nativement par les navigateurs : les attributs de
   présentation SVG sont traités comme des propriétés CSS, donc
   var() y fonctionne comme dans une feuille de style classique.

   Pour une nouvelle figure SVG, reprends ce principe :
     fill="var(--lesson-ink)"    au lieu de fill="#111827"
     stroke="var(--lesson-blue)" au lieu de stroke="#2563eb"
     fill="var(--lesson-svg-bg)" pour un fond blanc de figure
     stroke="var(--lesson-svg-border)" pour son contour
   --------------------------------------------------------- */

/* Composants spécifiques aux leçons. */
.lesson-scale-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.lesson-scale-box { padding: 1rem; border: 1px solid var(--border-color, #d1d5db); border-radius: 0.8rem; }
.lesson-scale-box p:last-child { margin-bottom: 0; }
.lesson-scale-answer { margin-top: 1rem; font-weight: 700; }

.duration-note,
.duration-warning,
.duration-exact { margin: 1rem 0; padding: 1rem 1.1rem; border-left: 5px solid; border-radius: 12px; }
.duration-note { background: #eff6ff; border-color: #2563eb; }
.duration-warning { background: #fffbeb; border-color: #d97706; }
.duration-exact { background: #ecfdf5; border-color: #059669; }
.duration-alternative { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px dashed #64748b; border-radius: 14px; background: #f8fafc; }
.duration-primary { color: #2563eb; font-weight: 800; }
.duration-secondary { color: #d97706; font-weight: 800; }
.duration-tertiary, .duration-round { color: #059669; font-weight: 800; }
.duration-decimal, .duration-answer { color: #7c3aed; font-weight: 900; }
.duration-example-title { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 0.9rem; font-weight: 800; }

.lesson-graph-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 18px; }
.lesson-graph-card-v2 { padding: 12px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); }
.lesson-graph-caption-v2 { margin-top: 8px; text-align: center; font-weight: 700; }
.lesson-graph-subcaption-v2 { margin-top: 4px; text-align: center; font-size: 0.95rem; opacity: 0.8; }
.lesson-graph-single-v2 { max-width: 520px; margin: 18px auto 0; }
.lesson-svg-wrap-v2 svg { display: block; width: 100%; height: auto; }

.lesson-responsive-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

.lesson-table-scroll-v2,
.lesson-mean-table-wrap,
.lesson-median-table-wrap,
.lesson-data-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; margin: 1rem auto 1.25rem; padding-bottom: 4px; }
.lesson-position-table-v2 { width: 100%; min-width: 760px; border-collapse: collapse; text-align: center; }
.lesson-position-table-v2 th, .lesson-position-table-v2 td { padding: 10px 8px; border: 1px solid rgba(100, 116, 139, 0.28); vertical-align: middle; }
.lesson-position-table-v2 th { background: rgba(59, 130, 246, 0.08); font-size: 0.88rem; font-weight: 800; }
.lesson-position-table-v2 td { font-size: 1.08rem; font-weight: 700; }
.lesson-position-table-v2 .unit-column-v2 { border-right: 3px solid rgba(37, 99, 235, 0.55); }
.lesson-position-note-v2 { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(245, 158, 11, 0.10); }

.lesson-diagram-wrap { max-width: 820px; margin: 1rem auto 1.25rem; overflow-x: auto; padding: 0.85rem; border: 1px solid #dbe4f0; border-radius: 18px; background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); color-scheme: light; }
.lesson-diagram-wrap svg, .fraction-schema-v2 svg { display: block; width: 100%; height: auto; margin: 0 auto; }

.lesson-bar-chart-page .lesson-method-list-v2 {
    list-style: none;
    counter-reset: lesson-step;
    width: max-content;
    max-width: 100%;
    margin: 1rem auto 0;
    padding: 0;
}

.lesson-bar-chart-page .lesson-method-list-v2 li {
    counter-increment: lesson-step;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    column-gap: 0.4rem;
    align-items: start;
    padding-left: 0;
}

.lesson-bar-chart-page .lesson-method-list-v2 li::before {
    content: counter(lesson-step) ".";
    font-weight: 700;
    text-align: right;
}

.lesson-bar-chart-page .lesson-hero-content-v2 {
    width: 100%;
    max-width: none !important;
}

.lesson-bar-chart-page .lesson-hero-content-v2 p {
    width: 100%;
    max-width: none !important;
    margin-right: 0;
    margin-left: 0;
    text-align: justify !important;
    text-align-last: left;
}

.lesson-mean-table, .lesson-median-table { border-collapse: collapse; margin: 0 auto; font-size: 1.05rem; }
.lesson-mean-table { font-size: 1.08rem; }
.lesson-mean-table th, .lesson-mean-table td, .lesson-median-table th, .lesson-median-table td { min-width: 4.6rem; padding: 0.72rem 0.82rem; border: 2px solid #334155; text-align: center; white-space: nowrap; }
.lesson-mean-table th, .lesson-mean-table td { min-width: 5rem; padding: 0.75rem 0.9rem; }
.lesson-mean-table th, .lesson-median-table th { background: rgba(148, 163, 184, 0.16); font-weight: 700; }
.lesson-values-line { text-align: center; font-size: 1.16rem; font-weight: 700; }
.lesson-central-values { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }

.lesson-data-table-wrap, .lesson-data-table { color-scheme: light; }
.lesson-data-table { min-width: 520px; margin: 0 auto; border-collapse: collapse; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }
.lesson-data-table th, .lesson-data-table td { padding: 0.65rem 0.8rem; border: 1px solid #cbd5e1; text-align: center; white-space: nowrap; }
.lesson-data-table thead th { background: #e2e8f0 !important; color: #0f172a !important; font-weight: 800; }
.lesson-data-table tbody th { background: #f8fafc !important; color: #0f172a !important; font-weight: 700; text-align: left; }
.lesson-data-table td { background: #fff !important; color: #0f172a !important; font-weight: 700; }
.lesson-data-table .missing-cell { background: #fff7ed !important; color: #c2410c !important; font-size: 1.1em; }
.lesson-reading-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.lesson-reading-card { padding: 1rem; border: 1px solid #dbe4f0; border-radius: 14px; background: #f8fafc !important; color: #334155 !important; color-scheme: light; }
.lesson-reading-card strong { display: block; margin-bottom: 0.35rem; color: #0f172a !important; }

.fraction-problem-box-v2 { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid rgba(148, 163, 184, 0.45); border-radius: 14px; background: rgba(148, 163, 184, 0.08); }
.fraction-problem-box-v2 p:last-child { margin-bottom: 0; }
.fraction-warning-v2 { margin-top: 1rem; padding: 0.9rem 1rem; border-left: 4px solid #dc2626; border-radius: 0 10px 10px 0; background: rgba(220, 38, 38, 0.08); }
.fraction-reference-v2 { color: #2563eb; font-weight: 700; }
.fraction-schema-v2 { max-width: 620px; margin: 1rem auto 1.25rem; }
.fraction-schema-caption-v2 { margin-top: 0.5rem; color: #334155; font-size: 0.98rem; text-align: center; }

.lesson-symmetry-page { --lesson-border: var(--lesson-svg-border, #dbe4f0); }
.lesson-symmetry-page .lesson-card-v2 ul, .lesson-symmetry-page .lesson-card-v2 ol { line-height: 1.6; }
.lesson-symmetry-page .sym-note { color: var(--lesson-muted, #475569); font-size: 0.96rem; }
.lesson-symmetry-page .sym-example-title { margin-bottom: 0.35rem; }
.lesson-symmetry-page .lesson-example-axis { max-width: 980px; }
.lesson-symmetry-page .lesson-card-v2 p strong { color: var(--lesson-ink, #111827); }

body.dark .duration-note, body.dark-mode .duration-note, body.theme-dark .duration-note, html[data-theme="dark"] .duration-note { background: #172554; border-color: #60a5fa; }
body.dark .duration-warning, body.dark-mode .duration-warning, body.theme-dark .duration-warning, html[data-theme="dark"] .duration-warning { background: #451a03; border-color: #f59e0b; }
body.dark .duration-exact, body.dark-mode .duration-exact, body.theme-dark .duration-exact, html[data-theme="dark"] .duration-exact { background: #052e2b; border-color: #34d399; }
body.dark .duration-alternative, body.dark-mode .duration-alternative, body.theme-dark .duration-alternative, html[data-theme="dark"] .duration-alternative { background: #1f2937; border-color: #64748b; }
body.dark .duration-example-title, body.dark-mode .duration-example-title, body.theme-dark .duration-example-title, html[data-theme="dark"] .duration-example-title { background: #312e81; color: #e0e7ff; }

@media (max-width: 680px) {
    .lesson-scale-grid { grid-template-columns: 1fr; }
    .lesson-bar-chart-page .lesson-method-list-v2 { width: 100%; }
}