/* ============================================================
   models.css —— 模型广场 / 报价（console.html）
   复用 site-chrome.css 的 --w51-* 设计 token，天然支持日/夜主题
   ============================================================ */

.mm-hero {
  padding: 56px 0 24px;
  font-family: var(--w51-font);
}
.mm-hero-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.mm-kicker {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--w51-accent-ink);
  background: var(--w51-accent-wash);
  padding: 5px 12px; border-radius: 999px;
  margin-bottom: 16px;
}
.mm-hero h1 {
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.18; letter-spacing: -0.02em;
  font-weight: 800; color: var(--w51-ink);
  margin: 0 0 12px;
}
.mm-hero p {
  font-size: 15.5px; line-height: 1.75;
  color: var(--w51-ink-2); max-width: 720px; margin: 0 0 22px;
}
.mm-facts { display: flex; flex-wrap: wrap; gap: 10px; }
.mm-fact {
  font-size: 13px; color: var(--w51-ink-2);
  border: 1px solid var(--w51-line);
  background: var(--w51-paper);
  border-radius: 999px; padding: 7px 14px;
}
.mm-fact b { color: var(--w51-ink); font-weight: 700; }

/* ---------------- 工具条 ---------------- */
.mm-bar {
  position: sticky; top: 64px; z-index: 30;
  background: var(--w51-nav-bg);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--w51-line);
  font-family: var(--w51-font);
}
.mm-bar-in {
  max-width: 1120px; margin: 0 auto; padding: 14px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.mm-search-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-search {
  position: relative; flex: 1 1 260px; min-width: 200px;
}
.mm-search svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--w51-ink-3);
}
.mm-search input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px 11px 38px;
  border: 1px solid var(--w51-line);
  border-radius: 12px;
  background: var(--w51-paper);
  color: var(--w51-ink);
  font: inherit; font-size: 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-search input::placeholder { color: var(--w51-ink-3); }
.mm-search input:focus {
  border-color: var(--w51-accent);
  box-shadow: 0 0 0 3px var(--w51-accent-wash);
}
.mm-count { font-size: 13px; color: var(--w51-ink-2); white-space: nowrap; }
.mm-count b { color: var(--w51-ink); }

.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mm-chips-label {
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  color: var(--w51-ink-3); text-transform: uppercase; margin-right: 2px;
}
.mm-chip {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--w51-line);
  background: var(--w51-paper);
  color: var(--w51-ink-2);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.mm-chip:hover { border-color: var(--w51-ink-3); color: var(--w51-ink); }
.mm-chip.on {
  background: var(--w51-accent-wash);
  border-color: var(--w51-accent);
  color: var(--w51-accent-ink);
}

/* ---------------- 表格 ---------------- */
.mm-main {
  max-width: 1120px; margin: 0 auto; padding: 22px 24px 8px;
  font-family: var(--w51-font);
}
.mm-table-wrap {
  border: 1px solid var(--w51-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--w51-paper);
}
.mm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mm-table thead th {
  text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--w51-ink-3);
  background: var(--w51-paper-2);
  padding: 13px 16px;
  border-bottom: 1px solid var(--w51-line);
  white-space: nowrap;
}
.mm-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--w51-line);
  color: var(--w51-ink-2);
  vertical-align: middle;
}
.mm-table tbody tr:last-child td { border-bottom: 0; }
.mm-table tbody tr:hover td { background: var(--w51-paper-2); }
.mm-name { color: var(--w51-ink); font-weight: 600; font-size: 14px; }
.mm-sku {
  display: block; margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; color: var(--w51-ink-3);
}
.mm-price { color: var(--w51-ink); font-weight: 600; white-space: nowrap; }
.mm-price small { display: block; font-weight: 400; color: var(--w51-ink-3); font-size: 11px; }
.mm-dash { color: var(--w51-ink-3); }
.mm-tag {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--w51-line);
  color: var(--w51-ink-2);
  white-space: nowrap;
}
.mm-tag--text { background: var(--w51-accent-wash); border-color: transparent; color: var(--w51-accent-ink); }
.mm-tag--image { background: rgba(244, 117, 89, .12); border-color: transparent; color: #c44131; }
[data-theme="dark"] .mm-tag--image { color: #ff9d86; }
.mm-tag--soon { background: rgba(148, 163, 184, .16); border-color: transparent; color: var(--w51-ink-2); }
.mm-disc {
  display: inline-flex; align-items: baseline; gap: 2px;
  font-weight: 800; font-size: 15px; color: var(--w51-ink);
}
.mm-disc small { font-size: 11px; font-weight: 600; color: var(--w51-ink-3); }
.mm-cont { display: block; font-size: 11.5px; color: var(--w51-ink-3); margin-bottom: 1px; }
.mm-empty {
  padding: 56px 20px; text-align: center;
  color: var(--w51-ink-3); font-size: 14px;
}
.mm-note {
  margin: 18px 0 0; font-size: 12.5px; line-height: 1.75;
  color: var(--w51-ink-3);
}
.mm-note a { color: var(--w51-accent-ink); }

/* 移动端：表格 → 卡片 */
@media (max-width: 760px) {
  .mm-bar { top: 56px; }
  .mm-main { padding: 16px 16px 4px; }
  .mm-table-wrap { border: 0; background: transparent; border-radius: 0; }
  .mm-table thead { display: none; }
  .mm-table, .mm-table tbody, .mm-table tr, .mm-table td { display: block; width: 100%; }
  .mm-table tbody tr {
    border: 1px solid var(--w51-line);
    border-radius: 16px;
    background: var(--w51-paper);
    padding: 14px 16px 6px;
    margin-bottom: 12px;
  }
  .mm-table tbody tr:hover td { background: transparent; }
  .mm-table td {
    border: 0; padding: 6px 0;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .mm-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 12px; font-weight: 700; letter-spacing: .03em;
    color: var(--w51-ink-3); text-transform: uppercase;
  }
  .mm-table td.mm-cell-name { display: block; padding-bottom: 10px; }
  .mm-table td.mm-cell-name::before { display: none; }
  .mm-name { font-size: 15px; }
}

/* ============================================================
   锚点偏移：导航栏 sticky 高 64px，页面内 #models / #console 跳转
   必须留出余量，否则标题会被导航盖住。
   ============================================================ */
#models,
#console,
#apiConsole { scroll-margin-top: 84px; }