/* Project2 Learning Framework v3 Lite */
.knowledge-content,.lesson-content{--t:#172033;--m:#667085;--b:#e4e7ec;--s:#fff;--soft:#f8fafc;--p:#2563eb;--ps:#eff6ff;--ok:#15803d;--oks:#ecfdf3;--w:#b45309;--ws:#fff7ed;--d:#b42318;--ds:#fff1f0;color:var(--t);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans Thai",Tahoma,sans-serif;line-height:1.8;overflow-wrap:anywhere}
.knowledge-content *,.lesson-content *{box-sizing:border-box}
.lesson-shell{width:min(100% - 28px,980px);margin:28px auto 48px}
.lesson-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,310px);gap:22px;align-items:center;margin-bottom:26px;padding:26px;border:1px solid #dbeafe;border-radius:22px;background:radial-gradient(circle at top right,rgba(37,99,235,.14),transparent 42%),linear-gradient(135deg,#fff,#f8fbff)}
.lesson-eyebrow{display:inline-block;margin-bottom:8px;color:var(--p);font-size:.9rem;font-weight:800}
.lesson-hero h1{margin:0 0 10px;font-size:clamp(1.7rem,4vw,2.35rem);line-height:1.3}
.lesson-hero p{margin:0;color:var(--m)}
.lesson-meta-card{display:grid;gap:6px;padding:17px;border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(37,99,235,.08)}
.lesson-section{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;margin:0 0 24px;padding:22px;border:1px solid var(--b);border-radius:18px;background:var(--s);box-shadow:0 8px 24px rgba(16,24,40,.045)}
.lesson-section-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--soft);font-size:1.35rem}
.lesson-section-body{min-width:0}
.lesson-section h2{margin:0 0 14px;font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.4}
.lesson-section p{margin:0 0 14px}
.lesson-check-list{list-style:none;padding-left:0!important}
.lesson-check-list li{position:relative;padding-left:30px}
.lesson-check-list li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.learning-formula,.learning-example,.learning-tip,.learning-warning,.learning-note,.lesson-challenge,.lesson-practice-item,.lesson-mistake-item{margin:14px 0;padding:16px 18px;border:1px solid var(--b);border-radius:13px;background:var(--soft)}
.learning-formula{border-left:4px solid var(--p);background:var(--ps);overflow-x:auto}
.learning-example{border-left:4px solid #7c3aed;background:#f5f3ff}
.learning-tip{border-left:4px solid var(--ok);background:var(--oks)}
.learning-warning{border-left:4px solid var(--w);background:var(--ws)}
.learning-note{border-left:4px solid #475467;background:#f2f4f7}
.lesson-challenge{border-left:4px solid #db2777;background:#fdf2f8}
.lesson-mistake-item{border-color:#ffd7d2;background:var(--ds)}
.lesson-answer{margin-top:14px;border:1px solid #dbe4f0;border-radius:12px;background:#fff;overflow:hidden}
.lesson-answer summary{position:relative;cursor:pointer;padding:12px 44px 12px 16px;background:#f6f8fb;color:#174ea6;font-weight:800;list-style:none}
.lesson-answer summary::-webkit-details-marker{display:none}
.lesson-answer summary:after{content:"＋";position:absolute;top:50%;right:16px;transform:translateY(-50%)}
.lesson-answer[open] summary:after{content:"−"}
.lesson-answer-content{padding:15px 18px;border-top:1px solid #e5e7eb;background:var(--oks)}
.lesson-quiz-status{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-bottom:14px;padding:12px 15px;border-radius:12px;background:var(--ps)}
.lesson-quiz-card{min-width:0;margin:0 0 16px;padding:18px;border:1px solid var(--b);border-radius:14px;background:#fff}
.lesson-quiz-card legend{width:100%;margin-bottom:14px;padding:0;font-weight:800}
.lesson-quiz-option{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:11px 13px;border:1px solid var(--b);border-radius:11px;cursor:pointer}
.lesson-quiz-option:hover{border-color:#93b4ea;background:#f8fbff}
.lesson-quiz-option.is-correct{border-color:#65c78b;background:var(--oks)}
.lesson-quiz-option.is-incorrect{border-color:#ef9a92;background:var(--ds)}
.lesson-quiz-button,.lesson-reset-button{margin-top:14px;padding:10px 16px;border:0;border-radius:10px;background:var(--p);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.lesson-reset-button{background:#475467}
.lesson-quiz-button:disabled{opacity:.65;cursor:not-allowed}
.lesson-quiz-feedback{min-height:1.8em;margin-top:10px;font-weight:800}
.lesson-quiz-feedback.is-correct{color:var(--ok)}
.lesson-quiz-feedback.is-incorrect{color:var(--d)}
.lesson-quiz-explanation{display:none}
.lesson-quiz-card.is-checked .lesson-quiz-explanation{display:block}
.knowledge-content table{width:100%;border-collapse:collapse;margin:16px 0}
.knowledge-content th,.knowledge-content td{padding:10px 12px;border:1px solid var(--b);vertical-align:top}
.knowledge-content img{max-width:100%;height:auto;border-radius:12px}
.knowledge-content .katex,.lesson-content .katex{display:inline-block!important;max-width:100%;font-size:1.06em;line-height:1.2!important;white-space:nowrap;text-indent:0}
.knowledge-content .katex *,.lesson-content .katex *{box-sizing:content-box}
.knowledge-content .katex-display,.lesson-content .katex-display{display:block!important;width:max-content;min-width:100%;margin:0!important;text-align:center;overflow:visible}
.knowledge-toolbar .lf-component-button{border-color:#c7d7f5;background:#f8fbff;color:#174ea6}
@media(max-width:768px){.lesson-hero,.lesson-section{grid-template-columns:1fr;padding:17px;border-radius:15px}}
@media print{.lesson-hero,.lesson-section,.lesson-quiz-card{break-inside:avoid;box-shadow:none}.lesson-quiz-button,.lesson-reset-button,.lesson-quiz-status{display:none!important}.lesson-quiz-explanation,.lesson-answer{display:block!important}.lesson-answer summary{display:none}}

/* Floating back-to-top button — v4.1.2 */
.lesson-scroll-top{
    position:fixed;
    right:calc(20px + env(safe-area-inset-right,0px));
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    z-index:1060;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-width:52px;
    height:52px;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:linear-gradient(135deg,#2563eb,#0f766e);
    color:#fff;
    font:inherit;
    font-weight:800;
    box-shadow:0 12px 30px rgba(37,99,235,.3);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease,box-shadow .2s ease;
}
.lesson-scroll-top.is-visible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}
.lesson-scroll-top:hover,
.lesson-scroll-top:focus-visible{
    color:#fff;
    box-shadow:0 15px 34px rgba(37,99,235,.4);
    transform:translateY(-2px);
}
.lesson-scroll-top:focus-visible{
    outline:3px solid rgba(37,99,235,.25);
    outline-offset:3px;
}
.lesson-scroll-top-icon{
    font-size:1.45rem;
    line-height:1;
}
@media(max-width:767.98px){
    .lesson-scroll-top{
        right:calc(14px + env(safe-area-inset-right,0px));
        bottom:calc(18px + env(safe-area-inset-bottom,0px));
        width:50px;
        min-width:50px;
        height:50px;
        padding:0;
    }
    .lesson-scroll-top-label{display:none}
}
@media(prefers-reduced-motion:reduce){
    .lesson-scroll-top{transition:none}
}
@media print{
    .lesson-scroll-top{display:none!important}
}