/* LFAPI「模型与价格」页（/docs/models/）附加样式。
   基础排版、按钮、.intro / .doc-section / .facts 与 code、页脚等组件全部复用 /docs/styles.css，
   这里只新增本页需要的部分，颜色全部取自 docs 的变量。 */

/* 页面外壳：与 .header-inner / .site-footer 同宽，纵向节奏对齐 docs 的 .content */
.models-main { width:min(1180px,calc(100% - 3rem)); margin:0 auto; padding:clamp(3rem,6vw,5.4rem) 0 5rem; }
.models-main .intro h1 { max-width:24ch; font-size:clamp(2.35rem,4.6vw,3.5rem); }
.models-main > .doc-section:last-of-type { border-bottom:0; padding-bottom:0; }
.models-main .doc-section > p + p { margin-top:.9rem; }

/* 统计条：沿用 .facts 的外观，只是两项而不是三项 */
.facts-pair { grid-template-columns:repeat(2,minmax(0,1fr)); }

/* ---------------------------------------------------------- 模型表格 */
.model-table-wrap { margin-top:1.6rem; overflow-x:auto; overflow-y:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 10px 22px rgba(37,38,64,.06); }
.model-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.model-table caption { padding:.8rem 1.2rem; border-bottom:1px solid var(--line); background:var(--sand); color:var(--muted); font-size:.74rem; font-weight:750; letter-spacing:.02em; text-align:left; }
.model-table th { padding:.72rem 1.2rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.74rem; font-weight:750; letter-spacing:.02em; text-align:left; white-space:nowrap; }
.model-table td { padding:.82rem 1.2rem; border-top:1px solid var(--line); vertical-align:middle; }
.model-table tbody tr:hover { background:var(--cream); }
.model-table td:nth-child(1) { overflow-wrap:anywhere; }
.model-table .price-col, .model-table td:nth-child(n+4) { text-align:right; }
.model-table td:nth-child(n+4) { font-weight:650; font-variant-numeric:tabular-nums; white-space:nowrap; }
.model-group { display:inline-block; border-radius:4px; background:var(--mint); color:var(--mint-ink); padding:.15rem .4rem; font-size:.69rem; font-weight:800; letter-spacing:.04em; white-space:nowrap; }
.model-footnote { margin:1.1rem 0 0; font-size:.84rem; }
.model-footnote:empty { display:none; }

@media (min-width:761px) { .model-table { min-width:700px; } }

/* 窄屏：表格改为卡片，沿用 .response-table 在窄屏的处理方式 */
@media (max-width:760px) {
  .model-table-wrap { overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .model-table { border-collapse:separate; }
  .model-table caption { display:block; width:100%; padding:.2rem 0 .6rem; border-bottom:0; background:transparent; }
  .model-table thead { display:none; }
  .model-table, .model-table tbody, .model-table tr, .model-table td { display:block; width:100%; }
  .model-table tr { margin-top:.7rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 6px 16px rgba(37,38,64,.05); padding:.85rem 1.05rem; }
  .model-table tbody tr:hover { background:var(--surface); }
  .model-table td, .model-table td:nth-child(n+4) { display:grid; grid-template-columns:5.2rem minmax(0,1fr); gap:.75rem; padding:.3rem 0; border:0; text-align:left; }
  .model-table td::before { content:attr(data-label); color:var(--muted); font-size:.73rem; font-weight:600; }
  .model-table td:nth-child(1) { grid-template-columns:minmax(0,1fr); padding-bottom:.55rem; font-size:1.02rem; }
  .model-table td:nth-child(1)::before { content:none; }
  .model-table td:nth-child(n+4) { font-weight:700; }
}

/* ------------------------------------------------------ 下一步卡片 */
.model-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin-top:1.7rem; }
.model-card { display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 10px 22px rgba(37,38,64,.06); padding:1.3rem 1.35rem; }
.model-card h3 { margin:0; font-size:1.06rem; line-height:1.45; }
.model-card p { margin:0; color:var(--muted); font-size:.92rem; }
.model-card .button { margin-top:auto; }
.model-card.accent { border-color:#b8e2d1; background:var(--mint); box-shadow:0 10px 22px rgba(58,169,130,.1); }
.model-card.accent p { color:#365c50; }

@media (max-width:820px) {
  .models-main { width:min(100% - 2rem,720px); padding:2.4rem 0 3.6rem; }
  .facts-pair { grid-template-columns:1fr; }
}

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