/* ============ 详情页 /sale/<domain>.html ============
   组件风格与列表页一致：白卡片 + 1px 边框 + 统一 header 条。
   所有 section 一律 .card > .cardhead + 内容，别再出现「有的有 header 条、
   有的只有一行标题」的混搭（2026-10-19 Boris 指出不对称后统一）。 */

.detail .crumbs { font-size: 13px; color: var(--muted); margin: 4px 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.detail .crumbs a { color: var(--muted); }
.detail .crumbs .cur { color: var(--text); font-weight: 600; }

/* ---------- 页头 ---------- */
.dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.dhead h1 { margin: 0 0 6px; font-size: 32px; letter-spacing: -.6px; word-break: break-all; }
.dmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.dmeta .price.big { font-size: 20px; }
.dmeta .dsep { color: #c7d1de; }
.dstat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; min-width: 160px; }
.dstat .k { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.dstat .v { font-size: 22px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.dstat .s { font-size: 12px; color: var(--muted); }

/* ---------- 通用卡片 ---------- */
.card.pad { padding: 16px 18px; margin-bottom: 16px; }
.blurb { margin: 0; font-size: 15.5px; line-height: 1.75; color: #26313f; }

.cardhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 18px;
  background: #fbfcfe;
  border-bottom: 1px solid var(--line);
  font-weight: 700; font-size: 14px; color: var(--navy); letter-spacing: .2px;
}
.cardbody { padding: 2px 0; }

/* ---------- 记录 / 历史：单列堆叠 ----------
   曾经做成两列，但「记录 7 行 vs 历史 3 行」必然高度不等，右半边长期空一块，
   视觉上就是不对称。数据页不需要炫技，铺满更整齐。 */
.dcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }

/* ---------- key/value 表 ---------- */
/* 类名用 .drec，不要用 .kv —— style.css 里的 .kv 是 grid 布局（后台在用），
   撞名会让 <table> 变成 display:grid，列宽全部失效、文字被压成三四行。 */
table.drec { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.drec th, table.drec td { text-align: left; padding: 11px 18px; font-size: 14px; vertical-align: top; border-bottom: 1px solid #f0f3f8; }
table.drec th { color: var(--muted); font-weight: 500; width: 220px; white-space: nowrap; }
table.drec td { width: auto; }
table.drec tr:last-child th, table.drec tr:last-child td { border-bottom: 0; }

/* ---------- 成交历史表 ---------- */
table.sales.plain { width: 100%; border-collapse: collapse; }
table.sales.plain th, table.sales.plain td { padding: 11px 18px; font-size: 14px; text-align: left; border-bottom: 1px solid #f0f3f8; }
table.sales.plain thead th { color: var(--muted); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: .5px; background: #fff; }
table.sales.plain tbody tr:last-child td { border-bottom: 0; }

/* ---------- 成交列表（可比 / 同词根） ---------- */
ul.deals { list-style: none; margin: 0; padding: 0; }
ul.deals li {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(96px, .7fr) minmax(96px, .7fr) minmax(110px, .8fr);
  gap: 14px; align-items: baseline;
  padding: 10px 18px;
  border-bottom: 1px dashed #eef2f7;
  font-size: 14px;
}
ul.deals li:last-child { border-bottom: 0; }
ul.deals .dname { font-weight: 600; word-break: break-all; }
ul.deals .price { font-variant-numeric: tabular-nums; }
ul.deals .date, ul.deals .plat { color: var(--muted); font-size: 13px; }

@media (max-width: 760px) {
  ul.deals li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 3px; }
  ul.deals .date { grid-column: 1; }
  ul.deals .plat { grid-column: 2; text-align: right; }
}

.dnote { color: var(--muted); font-size: 12px; margin: 18px 0 6px; }
.dback { font-size: 14px; }