.lesson-header .header-actions { margin-left: auto; }
.lesson-hero { border-bottom:1px solid var(--line); background:radial-gradient(circle at 86% 20%,rgba(19,166,107,.16),transparent 35%),radial-gradient(circle at 6% 70%,rgba(233,40,50,.10),transparent 27%),#fff; }
.lesson-hero-grid { min-height:480px; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:56px; align-items:center; padding:64px 0; }
.lesson-breadcrumbs { display:flex; gap:8px; align-items:center; margin-bottom:22px; color:var(--muted); font-size:13px; }
.lesson-breadcrumbs a:hover { color:var(--green-dark); }
.lesson-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.lesson-facts span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:#535c67; font-size:12px; font-weight:750; }
.lesson-progress-card { padding:26px; border:1px solid var(--line); border-radius:26px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); }
.lesson-progress-card>strong { display:block; margin-top:5px; font-size:44px; letter-spacing:-.04em; }
.lesson-checklist { display:grid; gap:8px; margin-top:18px; }
.lesson-checklist button { display:flex; align-items:center; gap:10px; padding:11px 0; border:0; border-top:1px solid var(--line); background:transparent; color:#4f5863; text-align:left; cursor:pointer; }
.lesson-checklist i { width:20px; height:20px; flex:0 0 auto; border:1.5px solid #b7bec7; border-radius:50%; position:relative; }
.lesson-checklist button.done { color:var(--green-dark); font-weight:750; }
.lesson-checklist button.done i { border-color:var(--green); background:var(--green); }
.lesson-checklist button.done i::after { content:'✓'; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:12px; font-style:normal; }
.lesson-section { padding:84px 0; scroll-margin-top:72px; }
.lesson-soft { background:var(--soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.lesson-layout { display:grid; grid-template-columns:220px minmax(0,820px); gap:54px; align-items:start; justify-content:center; }
.lesson-toc { position:sticky; top:100px; display:grid; gap:8px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; }
.lesson-toc .kicker { margin-bottom:6px; }
.lesson-toc a { padding:8px 10px; border-radius:10px; color:#59626d; font-size:13px; font-weight:700; }
.lesson-toc a:hover { background:var(--green-soft); color:var(--green-dark); }
.lesson-content { min-width:0; }
.wide-content { max-width:920px; }
.chapter-no { display:inline-grid; place-items:center; width:48px; height:48px; border-radius:15px; background:linear-gradient(135deg,var(--red),var(--green)); color:#fff; font-weight:900; font-size:13px; }
.lesson-content h2 { margin:16px 0 12px; font-size:clamp(32px,4vw,48px); letter-spacing:-.045em; line-height:1.05; }
.lesson-content .lead { margin:0 0 28px; color:var(--muted); font-size:18px; }
.lesson-content>h3 { margin:36px 0 16px; font-size:24px; letter-spacing:-.02em; }
.concept-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.concept-card,.compare-card { border:1px solid var(--line); border-radius:18px; padding:20px; background:#fff; }
.concept-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:var(--green-soft); color:var(--green-dark); font-weight:900; }
.concept-card h3 { margin:14px 0 5px; }.concept-card p,.compare-card p { margin:0; color:var(--muted); font-size:14px; }
.note { margin:24px 0; padding:18px 20px; border-radius:16px; }.note strong { display:block; margin-bottom:4px; }.note p { margin:0; }
.green-note { background:var(--green-soft); border:1px solid #ccecdc; }
.compare-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.compare-card h4 { margin:14px 0 6px; font-size:17px; }
.badge { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:11px; font-weight:850; }.badge.green { background:var(--green-soft); color:var(--green-dark); }.badge.red { background:var(--red-soft); color:var(--red-dark); }
.complete-step { margin-top:26px; border:1px solid #cfe3da; background:#fff; color:var(--green-dark); border-radius:12px; padding:11px 15px; font-weight:800; cursor:pointer; }.complete-step.done { background:var(--green); color:#fff; border-color:var(--green); }
.algo-steps { display:grid; gap:14px; }.algo-step { display:grid; grid-template-columns:50px 1fr; gap:16px; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; }.algo-step>span { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:var(--green); color:#fff; font-weight:900; }.algo-step h3 { margin:2px 0 5px; font-size:17px; }.algo-step p { margin:0; color:var(--muted); font-size:14px; }
.danger-note { margin-top:20px; padding:16px 18px; border:1px solid #ffd1d5; border-radius:14px; background:var(--red-soft); color:#5f3034; }
.model-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; }
.model-panel { border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden; }.panel-title { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line); }.panel-title span { color:var(--muted); font-size:11px; }
.graph-svg { width:100%; height:auto; padding:16px; }.graph-svg .edges line { stroke:#a7afb9; stroke-width:3; stroke-linecap:round; }.graph-svg .nodes circle { fill:#fff; stroke:var(--green); stroke-width:4; }.graph-svg .nodes text { text-anchor:middle; dominant-baseline:middle; font-size:17px; font-weight:900; fill:#26303b; }
.table-scroll { overflow:auto; padding:10px; }.road-table { width:100%; border-collapse:separate; border-spacing:3px; font-size:12px; text-align:center; }.road-table th,.road-table td { min-width:38px; height:34px; border-radius:7px; }.road-table th { background:#f0f2f5; font-weight:850; }.road-table td { background:#f9fafb; }.road-table td:not(:empty) { color:#34404b; font-weight:750; }.road-table td:first-child { background:#f9fafb; }
.solve-box { margin-top:20px; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:#fff; }.solve-head { display:flex; justify-content:space-between; gap:16px; padding:18px 20px; background:#15181d; color:#fff; }.solve-head span { color:#c9d0d8; }.reveal-steps>button { width:100%; display:grid; grid-template-columns:80px 1fr 28px; gap:12px; align-items:center; padding:15px 20px; border:0; border-top:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; }.reveal-steps>button:hover { background:#fafbfc; }.reveal-steps>button span { color:#4f5863; }.reveal-steps>button i { font-style:normal; font-size:22px; color:var(--green); text-align:center; }.reveal-steps>[data-answer] { display:none; padding:0 20px 16px 112px; color:#4d5661; }.reveal-steps>[data-answer].open { display:block; }.reveal-steps>[data-answer] p { margin:0; }
.trainer-card,.quiz-card { border:1px solid var(--line); border-radius:22px; background:#fff; padding:24px; }.quiz-card { margin-top:16px; }.trainer-head { display:flex; justify-content:space-between; gap:16px; align-items:start; }.trainer-head h3 { margin:5px 0 0; font-size:22px; }.score-chip { padding:7px 10px; border-radius:999px; background:var(--green-soft); color:var(--green-dark); font-size:12px; font-weight:850; }
.mapping-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px; }.mapping-row { display:grid; grid-template-columns:46px 1fr; gap:10px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; }.mapping-row>strong { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:#f3f5f7; }.mapping-row select { width:100%; border:1px solid #d7dce2; border-radius:10px; padding:9px 10px; background:#fff; color:var(--ink); }.mapping-row.correct { border-color:#bfe7d4; background:var(--green-soft); }.mapping-row.wrong { border-color:#ffd0d4; background:var(--red-soft); }.trainer-actions { display:flex; gap:10px; margin-top:18px; }.feedback { min-height:24px; margin-top:14px; font-size:14px; font-weight:700; }.feedback.good { color:var(--green-dark); }.feedback.bad { color:var(--red-dark); }
.answer-row { display:flex; gap:10px; margin-top:18px; }.answer-row input { min-width:0; flex:1; border:1px solid #d7dce2; border-radius:12px; padding:0 14px; min-height:46px; outline:0; }.answer-row input:focus { border-color:rgba(19,166,107,.55); box-shadow:0 0 0 4px rgba(19,166,107,.08); }
.summary-card { padding:24px; border:1px solid #cfe8dd; border-radius:20px; background:var(--green-soft); }.summary-card ol { margin:0; padding-left:22px; }.summary-card li+li { margin-top:10px; }
.next-lesson-box { margin-top:24px; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:24px; border:1px solid var(--line); border-radius:20px; }.next-lesson-box h3 { margin:5px 0 4px; }.next-lesson-box p { margin:0; color:var(--muted); }
@media(max-width:980px){.lesson-hero-grid{grid-template-columns:1fr}.lesson-progress-card{max-width:650px}.lesson-layout{grid-template-columns:1fr}.lesson-toc{display:none}.model-grid{grid-template-columns:1fr}}
@media(max-width:700px){.lesson-section{padding:58px 0}.concept-grid,.compare-grid,.mapping-grid{grid-template-columns:1fr}.lesson-hero-grid{padding:46px 0}.lesson-content .lead{font-size:16px}.model-panel{border-radius:16px}.reveal-steps>[data-answer]{padding:0 16px 16px}.reveal-steps>button{grid-template-columns:66px 1fr 24px;padding:14px 16px}.trainer-head,.next-lesson-box{flex-direction:column;align-items:stretch}.answer-row{flex-direction:column}.answer-row input{min-height:46px}.lesson-facts{gap:7px}}