:root {
  --pv-green: #1f6b3a;
  --pv-soft: #eef8f0;
  --pv-line: #d7e6dc;
  --pv-ink: #1f2a24;
}
body { margin: 0; font-family: Inter, Segoe UI, Arial, sans-serif; color: var(--pv-ink); background: #fbfdfb; }
a { color: #1f6b3a; }
.theory-layout, .practice-layout { max-width: 1120px; margin: 0 auto; padding: 24px; }
.chapter-hero { padding: 28px 0 18px; border-bottom: 1px solid var(--pv-line); }
.breadcrumb { color: #4d6b5a; font-size: .95rem; }
.chapter-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 18px 0; }
.meta-box, .toc-box, .example-box, .resource-box, .formula-box, .procedure-box, .figure-card, .exercise-card {
  border: 1px solid var(--pv-line); border-radius: 8px; padding: 16px; background: #fff;
}
.toc-box, .formula-box { background: var(--pv-soft); }
.lesson-section { padding: 24px 0; border-bottom: 1px solid #edf3ef; }
.lesson-section p, .practice-layout p { line-height: 1.72; }
.formula-box { margin: 18px 0; }
.formula-box .eq { font-size: 1.08rem; font-weight: 700; }
.figure-card { margin: 20px 0; background: #ffffff; }
.figure-card img { width: 100%; max-height: 360px; object-fit: contain; display: block; }
.figure-card figcaption { color: #405349; font-size: .95rem; line-height: 1.55; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; margin: 14px 0; }
th, td { border: 1px solid var(--pv-line); padding: 10px; vertical-align: top; }
th { background: var(--pv-soft); text-align: left; }
.lesson-nav { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0; }
.nav-card, .button-link { border: 1px solid #cfe2d6; border-radius: 8px; padding: 12px 14px; text-decoration: none; color: #1f5130; background: #fff; display: inline-block; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.exercise-card h3 { margin-top: 0; }
.answer { color: #315f41; font-weight: 600; }
.badge { display: inline-block; font-size: .8rem; color: #1f5130; background: #e8f5ec; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
@media (max-width: 680px) { .theory-layout, .practice-layout { padding: 16px; } }