/* ==========================================================================
   zhaogonghao.com — 内页·铭牌一路（名爵mj168bot）
   独立模块：三栏铭牌 / 记号对照 / 四步 / 版本线 / 机器人回路 / 核对 / 场景
   配色在 body.page-mj168bot 内微调，骨架共用 inner.css。
   ========================================================================== */

body.page-mj168bot .in-kicker,
body.page-mj168bot .in-kicker2 { color: var(--shen); }
body.page-mj168bot .in-kicker { background: var(--shen-soft); border-color: var(--shen-line); }

/* 三栏铭牌 */
.p168-plate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.p168-plate .col {
  padding: 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  position: relative;
  overflow: hidden;
}
.p168-plate .col::after {
  content: attr(data-seal);
  position: absolute;
  right: 14px;
  top: 14px;
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(31, 78, 121, .3);
}
.p168-plate .col-note { border-top: 3px solid var(--jin); }
.p168-plate .col-note strong { color: var(--jin-deep); }
.p168-plate .col > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.p168-plate strong {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 800;
  color: var(--shen);
  letter-spacing: 1px;
}
.p168-plate h3 { font-family: var(--serif); font-size: 17px; font-weight: 800; margin-top: 10px; color: var(--ink); }
.p168-plate p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }

/* 记号对照表 */
.p168-table-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
}
.p168-table { font-size: 14.5px; }
.p168-table th, .p168-table td { padding: 12px 18px; text-align: left; }
.p168-table thead th {
  background: var(--shen);
  color: #dfe9f2;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.p168-table tbody tr + tr { border-top: 1px solid var(--line); }
.p168-table th[scope="row"] { font-family: var(--mono); font-weight: 800; color: var(--shen); }
.p168-table tr.is-bad th { color: #b2543f; }
.p168-table tr.is-bad td { color: #8a6a5f; }

/* 四步流程 */
.p168-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: p168step;
}
.p168-flow li {
  padding: 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  position: relative;
}
.p168-flow li span {
  position: absolute;
  top: -13px;
  left: 18px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--shen);
  color: #f0e6cf;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 900;
}

/* 版本线时间轴 */
.p168-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 2px solid var(--shen-line);
  padding-top: 22px;
}
.p168-timeline li {
  padding: 0 16px 0 18px;
  border-left: 2px solid var(--shen-line);
  position: relative;
}
.p168-timeline li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--jin);
  border: 3px solid var(--paper);
}
.p168-timeline li > span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--shen);
}
.p168-timeline h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-top: 8px; }
.p168-timeline p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* 机器人回路 */
.p168-bot-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: start;
}
.p168-bot-copy .in-kicker2 {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--shen);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.p168-bot-copy h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 800;
  color: var(--ink);
}
.p168-bot-copy p { color: var(--muted); font-size: 14.5px; margin-top: 12px; max-width: 480px; }
.p168-bot-copy a { color: var(--shen); border-bottom: 1px dashed var(--shen-line); }
.p168-loop { display: grid; gap: 12px; }
.p168-loop li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.p168-loop b {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 900;
  color: var(--jin-deep);
}
.p168-loop h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
.p168-loop p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 核对三项 */
.p168-verify { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p168-verify article {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--shen);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.p168-verify span { font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: 1.6px; color: var(--jin-deep); }
.p168-verify h3 { font-size: 15.5px; font-weight: 800; color: var(--ink); margin-top: 10px; }
.p168-verify p { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* 场景 */
.p168-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.p168-scenes article {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.p168-scenes span {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--shen);
}
.p168-scenes h3 { font-size: 15px; font-weight: 800; color: var(--ink); }
.p168-scenes p { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* 响应式 */
@media (max-width: 1024px) {
  .p168-plate, .p168-flow, .p168-verify, .p168-scenes { grid-template-columns: 1fr 1fr; }
  .p168-bot-grid { grid-template-columns: 1fr; }
  .p168-timeline { grid-template-columns: 1fr 1fr; gap: 18px 0; }
}
@media (max-width: 640px) {
  .p168-plate, .p168-flow, .p168-verify, .p168-scenes, .p168-timeline { grid-template-columns: 1fr; }
  .p168-table-wrap { overflow-x: auto; }
  .p168-table { min-width: 520px; }
}