body.repair-guide {
  --accent: #b91c1c;
  --accent-dark: #7f1d1d;
  --accent-soft: #fef2f2;
  --accent-border: #fecaca;
  --accent-glow: rgba(239, 68, 68, .2);
}
body.image-guide {
  --accent: #7c3aed;
  --accent-dark: #4c1d95;
  --accent-soft: #f5f3ff;
  --accent-border: #ddd6fe;
  --accent-glow: rgba(124, 58, 237, .2);
}
.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.diagnostic {
  padding: 1.25rem;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  background: #fff;
}
.diagnostic h3 { margin: 0 0 .5rem; color: var(--accent-dark); }
.diagnostic p { margin: 0; color: var(--slate-700); }
.safe-box,
.stop-box {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-radius: 1rem;
}
.safe-box {
  border: 1px solid #86efac;
  color: #14532d;
  background: #f0fdf4;
}
.stop-box {
  border: 1px solid #fca5a5;
  color: #7f1d1d;
  background: #fef2f2;
}
.safe-box h3,
.stop-box h3 { margin: 0 0 .35rem; }
.safe-box p,
.stop-box p { margin: 0; }
.test-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 1rem;
}
.test-step {
  position: relative;
  padding: 1.1rem;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  background: #fff;
}
.test-step strong { display: block; color: var(--accent-dark); }
.test-step p { margin: .35rem 0 0; color: var(--slate-700); }
.checklist {
  display: grid;
  gap: .7rem;
  padding: 0;
  list-style: none;
}
.checklist li {
  padding: .9rem 1rem .9rem 2.8rem;
  position: relative;
  border: 1px solid var(--slate-200);
  border-radius: .85rem;
  background: #fff;
}
.checklist li::before {
  content: "✓";
  position: absolute;
  left: 1rem;
  top: .85rem;
  color: #15803d;
  font-weight: 900;
}
.source-list { padding-left: 1.25rem; }
.source-list li + li { margin-top: .65rem; }
.source-list a { color: var(--accent); font-weight: 700; }
.figure-card {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--slate-200);
  border-radius: 1rem;
  background: #fff;
}
.figure-card img {
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  object-position: center 35%;
}
.figure-card figcaption {
  padding: .8rem 1rem;
  color: var(--slate-600);
  font-size: .88rem;
}
@media (max-width: 800px) {
  .diagnostic-grid,
  .test-path { grid-template-columns: 1fr; }
}