/* chlorine.css — 混用清洁剂安全解读专用样式 */

/* ---- ion-badge 悬停联动（对应 antacid.css 的 ion-badge-h/oh） ---- */
.concept-definitions-card-acid.is-hot .ion-badge-acid .ion-badge-glow {
  opacity: 1;
  stroke-width: 3.5;
  animation: ion-badge-pulse-h 1.2s ease-in-out infinite;
}
.concept-definitions-card-base.is-hot .ion-badge-base .ion-badge-glow {
  opacity: 1;
  stroke-width: 3.5;
  animation: ion-badge-pulse-oh 1.2s ease-in-out infinite;
}
.concept-definitions-card-acid.is-hot .ion-badge-acid { transform: scale(1.12); }
.concept-definitions-card-base.is-hot .ion-badge-base { transform: scale(1.12); }

@keyframes ion-badge-pulse-h {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(30,107,110,0.8)); }
  50% { filter: drop-shadow(0 0 14px rgba(30,107,110,1)) drop-shadow(0 0 24px rgba(30,107,110,0.5)); }
}
@keyframes ion-badge-pulse-oh {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(199,62,42,0.8)); }
  50% { filter: drop-shadow(0 0 14px rgba(199,62,42,1)) drop-shadow(0 0 24px rgba(199,62,42,0.5)); }
}

/* ---- Hero 扩展 ---- */
.ion-tag-acid2 {
  background: rgba(199,62,42,0.12);
  color: #A82818;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85em;
}

.hero-mini-tag-acid2 {
  background: rgba(199,62,42,0.15);
  color: #A82818;
}

/* 危险标签：原先全站无此规则，落到 .hero-mini-tag 基类后呈中性米色 + 深色虚边框，
   与"危险"语义完全相反（看起来像个禁用态）。改用与 .et-cap-result 同一套警示色。 */
.hero-mini-tag-toxic {
  color: #B91C1C;
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.4);
}

/* ---- Reaction diagram ---- */
.reaction-diagram {
  background: linear-gradient(135deg, #1a2f2f 0%, #0d1f1f 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(30,107,110,0.3);
}

.reaction-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.eq-substance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  color: #FAF1DC;
}

.eq-acid { background: rgba(30,107,110,0.3); border: 1px solid rgba(30,107,110,0.6); }
.eq-acid2 { background: rgba(199,62,42,0.3); border: 1px solid rgba(199,62,42,0.6); }
.eq-toxic {
  background: rgba(239,68,68,0.4);
  border: 2px solid #EF4444;
  animation: eq-toxic-pulse 2s ease-in-out infinite;
}
.eq-salt { background: rgba(200,139,42,0.2); border: 1px solid rgba(200,139,42,0.5); }
.eq-water { background: rgba(46,92,122,0.3); border: 1px solid rgba(46,92,122,0.6); }

.eq-plus {
  color: #6F5A47;
  font-size: 1.25rem;
  font-weight: 600;
}

.eq-arrow {
  color: #FAF1DC;
  font-size: 1.5rem;
  font-weight: 700;
}

@keyframes eq-toxic-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239,68,68,0.5); }
  50% { box-shadow: 0 0 25px rgba(239,68,68,0.9), 0 0 50px rgba(239,68,68,0.4); }
}

.reaction-explain {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.explain-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #D4C4B0;
  font-size: 0.9rem;
}

.explain-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.eq-dot-acid { background: #1E6B6E; }
.eq-dot-acid2 { background: #C73E2A; }
.eq-dot-toxic { background: #EF4444; animation: eq-dot-blink 1.5s ease-in-out infinite; }
.eq-dot-salt { background: #C88B2A; }
.eq-dot-water { background: #2E5C7A; }

@keyframes eq-dot-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---- Warning callout ---- */
.warning-callout {
  display: flex;
  gap: 1rem;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.3);
  border-left: 4px solid #EF4444;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-top: 1.5rem;
}

.warning-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.warning-content {
  color: #8B3A3A;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- Electron transfer diagram ---- */
.electron-diagram {
  background: linear-gradient(135deg, #f8f4f0 0%, #efe8dd 100%);
  border-radius: 12px;
  padding: 2rem;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
}

.electron-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.electron-left, .electron-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.electron-species {
  text-align: center;
}

.species-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.25rem;
  font-weight: 700;
}

.species-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

.electron-svg {
  width: 120px;
  height: 80px;
}

.electron-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.electron-arrow svg {
  width: 80px;
  height: 30px;
}

.arrow-label {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

.electron-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.result-arrow {
  font-size: 2rem;
  color: var(--muted);
}

.result-species {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.result-svg {
  width: 100px;
  height: 80px;
}

.result-label {
  text-align: center;
}

.result-label strong {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.1rem;
  color: #EF4444;
}

.result-status {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ---- Danger timeline ---- */
.danger-timeline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.danger-stage {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: #FFF8E8;
  border-radius: 10px;
  border: 1px solid rgba(44,31,18,0.1);
}

.danger-stage-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

.danger-stage-content h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--fg);
}

.danger-stage-content p {
  margin: 0 0 0.5rem 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.danger-note {
  color: #8B3A3A !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
}

/* ---- Symptom grid ---- */
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 760px) {
  .symptom-grid {
    grid-template-columns: 1fr;
  }
}

.symptom-card {
  background: linear-gradient(135deg, #fafafa 0%, #f0f0f0 100%);
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid var(--border);
}

.symptom-card h4 {
  margin: 0.75rem 0 0.5rem 0;
  font-size: 1rem;
  color: var(--fg);
}

.symptom-icon {
  font-size: 2rem;
}

.symptom-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0 0;
}

.symptom-list li {
  padding: 0.4rem 0;
  border-bottom: 1px dashed rgba(44,31,18,0.1);
  color: var(--muted);
  font-size: 0.9rem;
}

.symptom-list li:last-child {
  border-bottom: none;
}

.symptom-severe {
  background: linear-gradient(135deg, #FFF8E8 0%, #FFE4CC 100%);
  border-color: rgba(239,68,68,0.3);
}

.symptom-critical {
  background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
  border-color: rgba(239,68,68,0.5);
}

.symptom-critical h4 {
  color: #DC2626;
}

/* ---- Case grid ---- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

@media (max-width: 760px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
}

.case-card {
  background: white;
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.case-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  background: rgba(30,107,110,0.1);
  color: #1E6B6E;
}

.case-year {
  font-size: 0.8rem;
  color: var(--muted);
}

.case-card h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  color: var(--fg);
}

.case-card p {
  margin: 0 0 0.75rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
}

.case-lesson {
  font-size: 0.85rem;
  color: #1E6B6E;
  font-weight: 600;
  padding-top: 0.75rem;
  border-top: 1px dashed rgba(30,107,110,0.2);
}

/* ---- Safety rules ---- */
#safety-rules.layout-cards-grid > .section-header {
  grid-column: 1 / -1;
}

#safety-rules.layout-cards-grid > .anti-pattern {
  grid-column: 1 / -1;
}

.safety-grid {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
  align-items: start;
  grid-column: 1 / -1;
}

.safety-grid > .safety-card {
  align-self: start;
}

.safety-card {
  background: white;
  border-radius: 12px;
  padding: 1.75rem;
  border: 1px solid rgba(30,107,110,0.15);
  box-shadow: 0 2px 8px rgba(30,107,110,0.06);
  position: relative;
  overflow: hidden;
  transition: all .25s ease;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.safety-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(30,107,110,0.12);
  border-color: rgba(30,107,110,0.3);
}

.safety-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1E6B6E 0%, #2E8B8B 50%, #1E6B6E 100%);
}

.safety-num {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1E6B6E 0%, #2E8B8B 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(30,107,110,0.25);
}

.safety-card h3 {
  margin: 0 0 0.75rem 0;
  font-size: 1.1rem;
  color: var(--fg);
  font-weight: 600;
}

.safety-card p {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}

.safety-do {
  background: rgba(30,107,110,0.06);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #1E6B6E;
  line-height: 1.5;
  border-left: 3px solid rgba(30,107,110,0.3);
}

.safety-label {
  font-weight: 700;
  margin-right: 0.25rem;
}

/* ---- Anti-pattern ---- */
.anti-pattern {
  display: flex;
  gap: 1.25rem;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.2);
  border-left: 4px solid #EF4444;
  border-radius: 10px;
  padding: 1.5rem;
  margin-top: 2rem;
}

.anti-pattern-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.anti-pattern-content {
  flex: 1;
}

.anti-pattern-content strong {
  display: block;
  color: #DC2626;
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.anti-pattern-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.anti-pattern-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(239,68,68,0.1);
  color: #8B3A3A;
  font-size: 0.9rem;
  padding-left: 1.5rem;
  position: relative;
}

.anti-pattern-list li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: #EF4444;
  font-weight: 700;
}

.anti-pattern-list li:last-child {
  border-bottom: none;
}

/* ---- Formula inline ---- */
.formula-inline {
  font-family: 'JetBrains Mono', monospace;
  background: #FFF8E8;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.95em;
  color: #2C1F12;
}

/* ---- Quiz extensions ---- */
section[id="quiz"] {
  display: block !important;
}

section[id="quiz"] > * {
  grid-column: unset !important;
}

.quiz-container {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 2rem;
}

.quiz-question {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  box-sizing: border-box;
}

.quiz-question-text {
  font-weight: 600;
  line-height: 1.65;
  margin-bottom: 0.8rem;
  font-size: 0.98rem;
  color: var(--fg);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.quiz-opt {
  text-align: left;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 0.62rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,248,232,0.5);
  color: var(--fg);
  cursor: pointer;
  transition: all 0.2s;
}

.quiz-opt:hover:not(:disabled) {
  border-color: #1E6B6E;
  background: rgba(30,107,110,0.08);
}

.quiz-opt:disabled {
  cursor: default;
}

.quiz-opt.correct {
  background: rgba(34,197,94,0.15) !important;
  border-color: #22C55E !important;
  color: #166534 !important;
}

.quiz-opt.wrong {
  background: rgba(239,68,68,0.1) !important;
  border-color: #EF4444 !important;
  color: #991B1B !important;
}

.quiz-opt.correct-show {
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.5) !important;
  color: #166534 !important;
}

.quiz-feedback {
  margin-top: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.6;
}

.quiz-feedback-correct {
  padding: 0.75rem 1rem;
  background: rgba(34,197,94,0.1);
  border-left: 3px solid #22C55E;
  border-radius: 6px;
  color: #166534;
}

.quiz-feedback-wrong {
  padding: 0.75rem 1rem;
  background: rgba(239,68,68,0.08);
  border-left: 3px solid #EF4444;
  border-radius: 6px;
  color: #991B1B;
}

/* ---- Equation hover highlight (联动高亮) ---- */
.eq-substance, .explain-item {
  transition: transform .2s ease, box-shadow .2s ease, color .2s ease;
  cursor: pointer;
}
.eq-substance:focus { outline: 2px solid #FAF1DC; outline-offset: 2px; }
.eq-substance.is-hl {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  filter: brightness(1.18);
}
.explain-item.is-hl {
  color: #FAF1DC;
  font-weight: 700;
  transform: scale(1.05);
}
.explain-item.is-hl .explain-dot {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}

/* ---- Simulation HUD color (chlorine theme) ---- */
.cl-hud-naclo { color: #1E6B6E; }
.cl-hud-hcl { color: #C73E2A; }
.cl-hud-cl2 { color: #9ACD32; }

/* formula bar toxic part */
.toxic-part { color: #EF4444; font-weight: 700; }

/* ---- Danger concentration meter ---- */
.cl-danger-meter {
  background: linear-gradient(135deg, #1a2f2f 0%, #0d1f1f 100%);
  border: 1px solid rgba(239,68,68,0.35);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.cl-danger-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
}
.cl-danger-meter-label {
  color: #FAF1DC;
  font-weight: 600;
  font-size: 0.95rem;
}
.cl-danger-meter-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.2rem;
  color: #9ACD32;
  transition: color .3s ease;
}
.cl-danger-meter-track {
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.cl-danger-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22C55E 0%, #EAB308 55%, #EF4444 100%);
  transition: width .3s ease;
}
.cl-danger-meter-note {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #9ACD32;
  font-weight: 600;
  transition: color .3s ease;
}

/* ---- Active state for chlorine amount pills ---- */
.micro-process-pill.is-active-naclo {
  background: rgba(30,107,110,0.16);
  border-color: #1E6B6E;
  color: #1E6B6E;
  font-weight: 700;
}
.micro-process-pill.is-active-hcl {
  background: rgba(199,62,42,0.14);
  border-color: #C73E2A;
  color: #A82818;
  font-weight: 700;
}

/* ---- Mobile tweaks for the simulator ---- */
@media (max-width: 560px) {
  .micro-process-hud {
    top: 0.6rem;
    right: 0.6rem;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
  }
  .micro-process-hud-cell { min-width: 44px; }
  .micro-process-hud-value { font-size: 1.05rem; }
  .micro-process-hud-label { font-size: 9px; }
  .micro-process-done-banner {
    font-size: 0.8rem;
    padding: 0.7rem 1rem;
    max-width: 88%;
  }
}

/* ---- 电子转移动画（第 3 步） ---- */
.electron-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.et-svg {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  overflow: visible;
}

.et-track {
  stroke: rgba(44,31,18,0.28);
  stroke-width: 2.5;
  stroke-dasharray: 6 7;
  animation: et-track-flow 1.2s linear infinite;
}
@keyframes et-track-flow { to { stroke-dashoffset: -26; } }

.et-ring { fill: rgba(255,255,255,0.55); stroke-width: 3; }
.et-ring-teal { stroke: #1E6B6E; }
.et-ring-red { stroke: #C73E2A; }

.et-name { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700; }
.et-name-teal { fill: #1E6B6E; }
.et-name-red { fill: #C73E2A; }

.et-ox { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; }
.et-ox-teal { fill: #1E6B6E; }
.et-ox-red { fill: #C73E2A; }

/* 电子：沿轨道从右侧 Cl⁻ 流到左侧 ClO⁻ */
.et-electron {
  fill: #FDE047;
  filter: drop-shadow(0 0 6px rgba(253,224,71,0.95));
  offset-path: path('M 470 118 Q 320 26 170 118');
  offset-rotate: 0deg;
  animation: et-travel 4s ease-in-out infinite;
}
@keyframes et-travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { offset-distance: 0%;   opacity: 1; }
  42%  { offset-distance: 100%; opacity: 1; }
  50%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* 氧化数 +1/-1 → 0 的切换 */
.et-ox-a { animation: et-oxA 4s ease-in-out infinite; }
.et-ox-b { animation: et-oxB 4s ease-in-out infinite; }
@keyframes et-oxA { 0%,44%{opacity:1} 52%,90%{opacity:0} 100%{opacity:1} }
@keyframes et-oxB { 0%,44%{opacity:0} 52%,90%{opacity:1} 100%{opacity:0} }

/* 结果 Cl₂ 浮现 + 脉冲 */
.et-result { animation: et-result 4s ease-in-out infinite; }
.et-cl2-ring {
  fill: none; stroke: #EF4444; stroke-width: 3; opacity: 0.85;
  transform-box: fill-box; transform-origin: center;
  animation: et-cl2-pulse 4s ease-in-out infinite;
}
.et-cl2-core { fill: #EF4444; opacity: 0.28; }
.et-cl2-text { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; fill: #EF4444; }
@keyframes et-result {
  0%,52% { opacity: 0; }
  60%,86% { opacity: 1; }
  94%,100% { opacity: 0; }
}
@keyframes et-cl2-pulse {
  0%,52% { transform: scale(0.9); opacity: 0; }
  62%,84% { transform: scale(1); opacity: 1; }
  94%,100% { transform: scale(1.05); opacity: 0; }
}

/* 默认暂停，进入视口后由 JS 加 .is-playing 再播放；重播时 .et-replaying 重置 */
.electron-viz .et-track,
.electron-viz .et-electron,
.electron-viz .et-ox-a,
.electron-viz .et-ox-b,
.electron-viz .et-result,
.electron-viz .et-cl2-ring { animation-play-state: paused; }
.electron-viz.is-playing .et-track,
.electron-viz.is-playing .et-electron,
.electron-viz.is-playing .et-ox-a,
.electron-viz.is-playing .et-ox-b,
.electron-viz.is-playing .et-result,
.electron-viz.is-playing .et-cl2-ring { animation-play-state: running; }
.electron-viz.et-replaying .et-electron,
.electron-viz.et-replaying .et-ox-a,
.electron-viz.et-replaying .et-ox-b,
.electron-viz.et-replaying .et-result,
.electron-viz.et-replaying .et-cl2-ring { animation: none; }

.electron-caption {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.5rem; font-size: 0.9rem; text-align: center;
}
.et-cap-step {
  background: rgba(30,107,110,0.08); border: 1px solid rgba(30,107,110,0.18);
  padding: 0.3rem 0.7rem; border-radius: 999px; color: #1E6B6E; font-weight: 600;
}
.et-cap-result { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.3); color: #B91C1C; }
.et-cap-arrow { color: var(--muted); font-weight: 700; }

.electron-result-wrap {
  display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: center;
  margin-top: 1.5rem;
}
.electron-result-wrap .result-species { flex-direction: row; gap: 1rem; }
.electron-result-wrap .result-svg { width: 80px; height: 64px; }

/* ---- 卡片 hover / 互动补全（消除单调感） ---- */
.case-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.case-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); border-color: rgba(30,107,110,0.35); }

.symptom-card { transition: transform .25s ease, box-shadow .25s ease; }
.symptom-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,0.10); }
.symptom-card.symptom-severe:hover { box-shadow: 0 10px 26px rgba(239,68,68,0.18); }
.symptom-card.symptom-critical:hover { box-shadow: 0 10px 28px rgba(239,68,68,0.24); }

.danger-stage { transition: transform .25s ease, box-shadow .25s ease; }
.danger-stage:hover { transform: translateX(6px); box-shadow: 0 8px 20px rgba(239,68,68,0.12); }

.anti-pattern { transition: transform .25s ease, box-shadow .25s ease; }
.anti-pattern:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(239,68,68,0.14); }

/* 警示框轻微呼吸，引导注意 */
.warning-callout { animation: warn-pulse 2.8s ease-in-out infinite; }
@keyframes warn-pulse {
  0%, 100% { border-color: rgba(239,68,68,0.30); }
  50% { border-color: rgba(239,68,68,0.6); }
}

/* 真实案例区：把简略卡片升级为「详细案例」入口链接 */
a.case-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
a.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -22px rgba(44,31,18,.5);
}
a.case-card .case-link-go {
  margin-top: auto;
  padding-top: .9rem;
  color: var(--primary);
  font-weight: 700;
  font-size: .85rem;
}


/* ============================================================
   页尾免责声明（.page-disclaimer）
   ⚠️ 三个解读页各自加载的样式表不同（antacid.css / chlorine.css /
   sunscreen.css），没有一份公共表，因此本规则在这三个文件里各存一份。
   视觉与案例页的 .case-disclaimer 保持一致；容器宽度与 .page-header 相同。
   ============================================================ */
.page-disclaimer {
  box-sizing: border-box;
  max-width: 1100px;
  margin: 3rem auto 0;
  padding: 1.4rem 1.5rem 0;
  border-top: 1px solid var(--border, rgba(44, 31, 18, .10));
  font-size: .82rem;
  line-height: 1.75;
  color: var(--muted, #6F5A47);
}