#comics-series-nav,
#comics-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
#comics-series-nav .chip,
#comics-subnav .chip {
  background: var(--surface, var(--panel, #fff));
  border: 1px solid var(--line, rgba(26, 31, 46, 0.08));
  color: var(--muted, var(--dim, #5c6578));
  font: inherit;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
}
#comics-series-nav .chip.active,
#comics-subnav .chip.active {
  color: #fff;
  background: var(--accent, var(--a, #4FC3F7));
  border-color: var(--accent, var(--a, #4FC3F7));
}
/* JM34 reader width — keep comics from stretching with 1100px lesson shells */
#panel-comics,
#view-comics {
  width: min(860px, 100%);
  max-width: min(860px, 100%);
  margin-left: auto;
  margin-right: auto;
}
.comic-page { display: grid; gap: 16px; }
.comic-page-head { text-align: center; }
.comic-chapter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, var(--dim, #5c6578));
}
.comic-page-head h2 { margin: 4px 0 0; font-size: 22px; }
.comic-body,
.comic-caption {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(26, 31, 46, 0.08));
  background: var(--surface-2, var(--panel2, #f4f7fb));
  font-size: 15px;
  line-height: 1.6;
  color: var(--text, var(--ink, #1a1f2e));
}
.comic-checks h3 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, var(--dim, #5c6578));
}
.comic-page .quiz-card {
  background: var(--surface, var(--panel, #fff));
  border: 1px solid var(--line, rgba(26, 31, 46, 0.08));
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.comic-page .quiz-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.comic-page .quiz-num { font-weight: 700; color: var(--accent, var(--a, #4FC3F7)); flex: none; }
.comic-page .quiz-prompt { flex: 1; font-size: 15px; line-height: 1.5; }
.comic-page .quiz-mark { font-weight: 700; margin-left: auto; }
.comic-page .quiz-mark.ok { color: var(--good, #15803d); }
.comic-page .quiz-mark.bad { color: var(--bad, #be123c); }
.comic-page .quiz-mc { display: flex; flex-direction: column; gap: 8px; }
.comic-figure {
  margin: 0 auto;
  max-width: 860px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(26, 31, 46, 0.08));
  background: #0f172a;
  overflow: hidden;
}
.comic-html {
  margin: 0;
  overflow: visible;
}
.comic-figure img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.comic-page .quiz-mc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(26, 31, 46, 0.08));
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
}
.comic-page .quiz-mc-opt:hover:not(.locked) { border-color: var(--accent, var(--a, #4FC3F7)); }
.comic-page .quiz-mc-opt.locked { cursor: default; }
.comic-page .quiz-mc-opt.reveal-ok {
  border-color: var(--good, #15803d);
  background: rgba(21, 128, 61, .08);
}
.comic-page .quiz-mc-opt.reveal-bad {
  border-color: var(--bad, #be123c);
  background: rgba(190, 18, 60, .06);
}
.comic-page .quiz-result { margin-top: 10px; font-size: 14px; color: var(--muted, var(--dim, #5c6578)); }
.comic-chapter-nav { text-align: center; margin-top: 8px; }
.jm-comics-hint {
  color: var(--muted, var(--dim, #5c6578));
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}
.comic-chapter-next {
  border: none;
  border-radius: 999px;
  background: var(--accent, var(--a, #4FC3F7));
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  cursor: pointer;
}