:root { --accent: #2f6fb3; --ok: #1f8a4c; --bad: #c0392b; --muted: #6b7280; --panel: #f6f8fa; --border: #d8dee4; }
.markdown-section { max-width: 860px; }
.sidebar-nav li > p > strong, .sidebar-nav li > strong { color: #333; }
.sidebar-nav a.lesson-done::after { content: " ✓"; color: var(--ok); font-weight: 600; }

.lesson-meta { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: .6rem .9rem; margin: .5rem 0 1.5rem; font-size: .9em; }
.lesson-meta-row { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--muted); }
.lesson-meta details { margin-top: .4rem; }
.lesson-meta ul { margin: .3rem 0 0; }
.vol { padding: 0 .5em; border-radius: 3px; font-weight: 600; }
.vol-concept { background: #e3f1e6; color: #1f5f34; }
.vol-implementation { background: #fdf0d8; color: #7a4d00; }

.gh-alert { border-left: 4px solid var(--accent); background: var(--panel); padding: .4rem 1rem; margin: 1rem 0; border-radius: 0 4px 4px 0; }
.gh-alert .gh-title { font-weight: 700; margin: .3rem 0; }
.gh-tip { border-color: var(--ok); } .gh-important { border-color: #8250df; }
.gh-warning { border-color: #bf8700; } .gh-caution { border-color: var(--bad); }

.markdown-section details { border: 1px solid var(--border); border-radius: 4px; padding: .3rem .8rem; margin: .8rem 0; }
.markdown-section summary { cursor: pointer; font-weight: 600; }

.quiz { border-top: 2px solid var(--border); margin-top: 2.5rem; padding-top: .5rem; }
.quiz-q { border: 1px solid var(--border); border-radius: 6px; padding: .6rem 1rem; margin: 1rem 0; }
.quiz-q.ok { border-color: var(--ok); } .quiz-q.bad { border-color: var(--bad); }
.quiz-opt { display: block; padding: .25rem 0; cursor: pointer; }
.quiz-expl { margin-top: .5rem; font-size: .92em; }
.quiz-submit, .mark-done { background: var(--accent); color: #fff; border: 0; border-radius: 4px; padding: .5rem 1rem; cursor: pointer; font-size: 1em; }
.quiz-result { font-weight: 700; } .quiz-prev { color: var(--muted); }
.progress-bar { margin: 2rem 0; }
.resume-box { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: .4rem 1rem; margin-bottom: 1.5rem; }

.sim-box { margin: 1.2rem 0; }
.sim-embed { width: 100%; height: 620px; border: 1px solid var(--border); border-radius: 6px; margin-top: .4rem; }

@media (prefers-color-scheme: dark) {
  :root { --panel: #1e242b; --border: #3a434d; --muted: #9aa4ae; }
  body, .sidebar, .markdown-section { background: #14181c; color: #d6dde4; }
  .markdown-section pre, .markdown-section code { background: #1e242b; }
  .sidebar-nav li > p > strong, .sidebar-nav li > strong { color: #e6edf3; }
}