/* ==========================================================
   四 · AI+制造的应用探索 —— 四组错配对比矩阵
   页面专属样式，仅 ai-apply.html 引用（避免与 ai-theme.css 并行改动冲突）
   基调配色与 ai-theme.css 一致：深绿 #0F6E56 / 浅绿 #E1F5EE / 暖黄 #B4761A
   ========================================================== */

/* ---------- 四组错配 · 总览表 ---------- */
.ap-tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-white); }
table.ap-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 920px; }
table.ap-table thead th { background: #0F6E56; color: #fff; font-weight: 600; font-size: 12.5px;
  padding: 12px 14px; text-align: left; white-space: nowrap; letter-spacing: .03em; }
table.ap-table td { padding: 13px 14px; color: var(--ink-soft); line-height: 1.8;
  border-bottom: 1px solid var(--line); vertical-align: top; }
table.ap-table tbody tr:nth-child(even) { background: #F7FBF9; }
table.ap-table tbody tr:last-child td { border-bottom: none; }
table.ap-table td.ap-i { width: 44px; text-align: center; font-family: var(--font-serif);
  font-size: 15px; font-weight: 700; color: #0F6E56; }
table.ap-table td.ap-k { width: 148px; font-weight: 600; color: var(--ink); }
table.ap-table td.ap-k em { display: block; font-style: normal; font-size: 11px; font-weight: 400;
  color: var(--ink-mute); margin-top: 3px; letter-spacing: .02em; }
table.ap-table td.ap-old { color: #8A6516; }
table.ap-table td.ap-new { color: #0B5946; }
table.ap-table td.ap-split { width: 168px; }
table.ap-table td.ap-split span { display: block; font-size: 11px; font-weight: 700;
  color: var(--pku-red); letter-spacing: .05em; }

/* ---------- 四组错配 · 对比卡 ---------- */
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vs-card { background: var(--bg-white); border: 1px solid var(--line); border-top: 3px solid #0F6E56;
  border-radius: 4px; padding: 18px; display: flex; flex-direction: column; }
.vs-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.vs-no { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px;
  width: 28px; height: 28px; border-radius: 4px; background: #E1F5EE; color: #0F6E56;
  font-family: var(--font-serif); font-size: 13px; font-weight: 700; }
.vs-hd h4 { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.45; }
.vs-pair { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; margin-bottom: 13px; }
.vs-side { padding: 11px 12px; }
.vs-side.a { background: #FDF9F0; border: 1px solid #EFE3CB; border-right: none; border-radius: 4px 0 0 4px; }
.vs-side.b { background: #F2F9F6; border: 1px solid #C9E5D9; border-left: none; border-radius: 0 4px 4px 0; }
.vs-k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; margin-bottom: 6px; }
.vs-side.a .vs-k { color: #B4761A; }
.vs-side.b .vs-k { color: #0F6E56; }
.vs-side p { margin: 0; font-size: 12.5px; line-height: 1.78; color: var(--ink-soft); }
.vs-side p strong { color: var(--ink); font-weight: 600; }
.vs-mid { display: flex; align-items: center; justify-content: center; background: var(--bg-white);
  border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line);
  font-size: 10px; font-weight: 700; color: var(--ink-mute); letter-spacing: .05em; }
.vs-gap { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--line);
  font-size: 12px; line-height: 1.75; color: var(--pku-red); }
.vs-gap::before { content: "▸ 断层 · "; color: var(--ink-mute); font-weight: 600; }

/* ---------- 断层叠加 · 限制链 ---------- */
.chain { border: 1px solid var(--line); border-radius: 4px; background: var(--bg-white);
  padding: 6px 18px; }
.chain-it { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0;
  border-bottom: 1px dashed var(--line); }
.chain-it:last-child { border-bottom: none; }
.chain-n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; background: #0F6E56; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.chain-tx { font-size: 13px; line-height: 1.8; color: var(--ink-soft); }
.chain-tx b { color: var(--ink); font-weight: 600; }
.chain-tx i { font-style: normal; color: #0F6E56; font-weight: 600; }
.chain-end { margin-top: 16px; padding: 14px 16px; border-radius: 4px;
  background: var(--pku-red-light); border-left: 3px solid var(--pku-red);
  font-size: 13px; line-height: 1.85; color: var(--ink); }
.chain-end b { color: var(--pku-red); }

/* ---------- 破解方向 ---------- */
.fix-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fix-card { background: #F4F9F7; border: 1px solid #C9E5D9; border-radius: 4px; padding: 16px 18px; }
.fix-card .fx-h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.fix-card .fx-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px;
  width: 22px; height: 22px; border-radius: 3px; background: #0F6E56; color: #fff;
  font-size: 11px; font-weight: 700; }
.fix-card h4 { margin: 0; font-size: 14px; color: #0B5946; }
.fix-card p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-soft); }
.fix-card p strong { color: #0F6E56; font-weight: 600; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .vs-grid, .fix-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vs-pair { grid-template-columns: 1fr; }
  .vs-side.a { border-right: 1px solid #EFE3CB; border-bottom: none; border-radius: 4px 4px 0 0; }
  .vs-side.b { border-left: 1px solid #C9E5D9; border-radius: 0 0 4px 4px; }
  .vs-mid { border: none; padding: 7px 0; }
}