/* ========================================================================
   对比弹窗：全局组件，base.html 引入
   ======================================================================== */
.compare-modal {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  display: none; place-items: center;
  padding: clamp(18px, 4vw, 56px);
}
.compare-modal.is-open { display: grid; }
.compare-modal__backdrop {
  position: absolute; inset: 0;
  background: rgb(var(--glass) / .7); backdrop-filter: blur(8px);
}
.compare-modal__card {
  position: relative; z-index: 1;
  width: min(1320px, calc(100vw - clamp(36px, 8vw, 112px)));
  max-height: calc(100vh - clamp(36px, 8vw, 112px));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 24px 70px rgb(var(--shadow) / .4);
}
.compare-modal__head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.compare-modal__body { padding: var(--space-4); overflow: auto; }

.compare-table {
  border-collapse: collapse; width: 100%; min-width: 0;
  table-layout: fixed; font-size: var(--fs-sm);
}
.compare-table th, .compare-table td {
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.compare-table th:first-child,
.compare-table td:first-child { width: clamp(86px, 12vw, 150px); }
.compare-table thead th {
  position: sticky; top: 0; background: var(--surface-2);
  font-size: var(--fs-sm);
}
.compare-table td { font-family: var(--font-mono); }
.compare-table__name {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: var(--font-sans); font-size: inherit; font-weight: 700;
  text-decoration: underline; text-decoration-color: transparent;
  transition: text-decoration-color .14s;
}
.compare-table__name:hover { text-decoration-color: currentColor; }
.compare-table .rowhead { color: var(--text-muted); font-family: var(--font-sans); }
.compare-table .group-row td {
  font-weight: 700; color: var(--accent); background: var(--card-muted);
  font-family: var(--font-sans);
}
.compare-table td.miss { color: var(--text-muted); }

/* 差异高亮 */
.compare-table tr.is-diff > td,
.compare-table tr.is-diff > th { background: var(--accent-soft); }
.compare-table tr.is-diff > td.miss { color: var(--danger); }
.compare-table[data-diff-only] tr:not(.is-diff) { display: none; }
/* 重点字段（高 weight）行头加粗高亮 */
.compare-table tr.is-key .rowhead { color: var(--text); font-weight: 700; }
/* 数值字段右对齐 */
.compare-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.compare-table .unit { color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 640px) {
  .compare-modal { padding: 0; align-items: flex-end; }
  .compare-modal__card { width: 100%; border-radius: var(--radius) var(--radius) 0 0; max-height: 90vh; }
}