/* ==========================================================================
 * pages.css — API Plaza v4 页面区块层
 * 首页(search-first hero · stats · 模型榜 · 特性卡 · 三步) · 数据页 · 详情页 ·
 * status · changelog · docs · 信任页
 * ========================================================================== */

/* ==========================================================================
 * Hero(OR 式:居中大标题 + 副标嵌链 + 搜索 + 双 CTA)
 * ========================================================================== */

.hero { padding-block: var(--s8) var(--s7); text-align: center; }
.hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero h1 { margin-bottom: var(--s3); }
.hero .hero-copy { color: var(--muted); font-size: var(--text-lg); max-width: 54ch; margin-bottom: var(--s5); }
.hero .hero-copy a { color: var(--accent); }
.hero .hero-copy strong { color: var(--ink-strong); font-weight: 600; }

.hero-search {
  width: 100%; max-width: 560px;
  display: flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 1rem;
  min-height: 52px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.18s var(--ease), background-color 0.18s var(--ease);
  margin-bottom: var(--s5);
  font-size: var(--text-base);
}
.hero-search:hover { border-color: var(--muted); background: var(--surface-2); }
.hero-search .kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
}

.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }

.hero-ai-link {
  margin-top: var(--s4);
  border: 0; background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color 0.15s var(--ease);
}
.hero-ai-link:hover { color: var(--accent); }
.hero-ai-link[data-copied="true"] { color: var(--accent); }

/* stats 行:发丝分隔的真实数字 */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 860px;
  margin: var(--s7) auto 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.stat-cell { padding: var(--s5) var(--s4); text-align: center; }
.stat-cell + .stat-cell { border-left: 1px solid var(--line); }
.stat-cell strong {
  display: block;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.15;
}
.stat-cell span { font-size: var(--text-xs); color: var(--muted); }
.stat-cell .live-flag { display: flex; align-items: center; justify-content: center; gap: 0.45rem; color: var(--ink-strong); letter-spacing: 0.02em; }

@media (max-width: 767px) {
  .hero { text-align: left; padding-top: var(--s7); }
  .hero-inner { align-items: stretch; }
  .hero-actions { justify-content: flex-start; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(3), .stat-cell:nth-child(4) { border-top: 1px solid var(--line); }
  .stat-cell:nth-child(3) { border-left: 0; }
}

/* ==========================================================================
 * 模型榜(OR 式列表卡)
 * ========================================================================== */

.model-board { display: grid; gap: var(--s3); }
.board-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s4) var(--s5);
  color: var(--ink);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.board-card:hover { border-color: var(--line-strong); background: var(--surface-2); text-decoration: none; }
.board-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.board-top .b-name { font-weight: 700; font-size: var(--text-lg); color: var(--ink-strong); font-family: var(--font-display); }
.board-top .b-usage { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.board-desc {
  color: var(--muted); font-size: var(--text-sm);
  margin: 0.35rem 0 0.55rem;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.board-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.board-meta .sep { color: var(--line-strong); }
.board-meta b { color: var(--ink); font-weight: 500; }

/* ==========================================================================
 * 特性卡(2×2,各带微型真 UI 插画)
 * ========================================================================== */

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.feature-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s5);
  transition: border-color 0.15s var(--ease);
}
.feature-card:hover { border-color: var(--line-strong); }
.feature-card h3 { font-size: var(--text-base); margin-bottom: var(--s2); }
.feature-card p { color: var(--muted); font-size: var(--text-sm); margin: 0 0 var(--s4); max-width: none; }
.feature-mini {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: var(--s3) var(--s4);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.75;
  color: var(--muted);
  overflow-x: auto;
  white-space: nowrap;
}
.feature-mini .ok { color: var(--accent); }
.feature-mini .dim { opacity: 0.65; }
.feature-mini .bar { display: inline-block; width: 3px; height: 0.75em; background: var(--accent); border-radius: 1px; margin-right: 1px; }
.feature-mini .bar.h2 { height: 0.95em; } .feature-mini .bar.h3 { height: 1.15em; }
@media (max-width: 767px) { .feature-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
 * 编号三步(OR 式圆点编号)
 * ========================================================================== */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); counter-reset: step; }
.step { position: relative; }
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--s3);
}
.step h3 { font-size: var(--text-base); margin-bottom: var(--s2); }
.step p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; gap: var(--s5); } }

/* ==========================================================================
 * FAQ / CTA
 * ========================================================================== */

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s7); }
.faq-item { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.faq-item h3 { font-size: var(--text-base); margin-bottom: var(--s2); }
.faq-item p { color: var(--muted); font-size: var(--text-sm); margin: 0; }
@media (max-width: 767px) { .faq-grid { grid-template-columns: 1fr; } }

.cta-band { padding-block: var(--s8); border-top: 1px solid var(--line); }
.cta-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--s6); align-items: center; }
.cta-inner h2 { margin-bottom: var(--s3); }
.cta-inner p { color: var(--muted); margin-bottom: 0; }
.cta-actions { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 767px) {
  .cta-inner { grid-template-columns: 1fr; }
  .cta-actions { justify-content: flex-start; }
}

/* ==========================================================================
 * 数据页公共(models / pricing)
 * ========================================================================== */

.page-head { padding-block: var(--s7) var(--s5); }
.page-head h1 { font-size: var(--text-2xl); max-width: 26ch; }
.page-head .lede { color: var(--muted); font-size: var(--text-lg); max-width: 58ch; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--line); }
.filter-bar .search {
  flex: 1 1 240px;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 var(--s4);
  background: var(--surface);
  color: var(--ink-strong);
}
.filter-bar .search::placeholder { color: var(--muted); }
.filter-pills { display: flex; gap: var(--s2); flex-wrap: wrap; }
.filter-pills button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  min-height: 38px;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.filter-pills button:hover { color: var(--ink-strong); border-color: var(--line-strong); }
.filter-pills button[aria-pressed="true"] { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-strong); }
.result-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

/* 估价器 */
.estimator {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  background: var(--surface);
  position: sticky; top: 80px;
}
.estimator h2 { font-size: var(--text-lg); margin-bottom: var(--s4); }
.estimator label { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: var(--s1); }
.estimator select, .estimator input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 var(--s3);
  margin-bottom: var(--s3);
  background: var(--bg);
  color: var(--ink-strong);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.estimator .est-result {
  margin-top: var(--s4);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  min-height: 3.4rem;
}
.estimator .est-result strong { font-size: var(--text-xl); color: var(--accent); display: block; }

.pricing-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s7); align-items: start; }
@media (max-width: 999px) {
  .pricing-layout { grid-template-columns: 1fr; }
  .estimator { position: static; }
}

/* ==========================================================================
 * 模型详情(OR 式:slug+copy · spec 卡)
 * ========================================================================== */

.model-hero { padding-block: var(--s7) var(--s5); }
.model-hero .crumbs { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); margin-bottom: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.model-hero .crumbs a { color: var(--muted); }
.model-hero .crumbs a:hover { color: var(--accent); }
.model-hero h1 { font-size: var(--text-2xl); margin-bottom: var(--s2); }
.model-hero .hero-actions { justify-content: flex-start; }
.model-hero .tagline { color: var(--muted); font-size: var(--text-lg); max-width: 56ch; }

.slug-line {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted);
  margin-bottom: var(--s3);
}
.slug-line .copy-btn { margin-left: 0; min-height: 26px; padding: 0.1rem 0.5rem; }

.spec-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s3); background: transparent; border: 0; }
.spec-cell {
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.spec-cell dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: var(--s2); }
.spec-cell dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-strong); }

.model-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); }
@media (max-width: 899px) { .model-cols { grid-template-columns: 1fr; } }

/* 新手四步:竖向流程(命名空间 flow-* 避开首页 .step counter 组件的碰撞) */
.start-wrap { max-width: 720px; }
.flow-steps { list-style: none; margin: 0; padding: 0; }
.flow-step { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s4); }
.flow-marker { display: flex; flex-direction: column; align-items: center; }
.flow-num {
  width: 2.25rem; height: 2.25rem; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-mono); font-size: var(--text-base);
  font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.flow-step:not(:last-child) .flow-marker::after {
  content: ""; flex: 1 1 auto; width: 1px;
  background: var(--line); margin: var(--s2) 0; min-height: var(--s4);
}
.flow-body { min-width: 0; padding-bottom: var(--s6); }
.flow-step:last-child .flow-body { padding-bottom: 0; }
.flow-body h3 { margin: 0 0 var(--s2); font-size: var(--text-lg); }
.flow-body > p { margin: 0 0 var(--s3); color: var(--muted); font-size: var(--text-sm); max-width: 58ch; }
.flow-body .code-card { margin-top: var(--s3); }

/* 单一 AI 捷径 + 兜底反问 */
.shortcut {
  margin-top: var(--s6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: var(--s5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.shortcut-text { min-width: 0; flex: 1 1 22rem; }
.shortcut-text h3 { margin: 0 0 var(--s1); font-size: var(--text-base); }
.shortcut-text p { margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: 52ch; }
.shortcut .btn { flex: none; }
.start-help {
  margin-top: var(--s5); text-align: center;
  color: var(--muted); font-size: var(--text-sm);
}

.related-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s4); }
.related-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--s4);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.related-item:hover { border-color: var(--line-strong); background: var(--surface-2); }
.related-item a { color: var(--ink-strong); font-weight: 600; }
.related-item a:hover { text-decoration: none; }
.related-item .t-sub { display: block; margin-top: 0.35rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

/* ==========================================================================
 * status / changelog
 * ========================================================================== */

.status-board { display: grid; gap: var(--s4); }
.status-summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.status-summary .status-dot { width: 12px; height: 12px; }
.status-summary strong { font-size: var(--text-lg); color: var(--ink-strong); }
.status-summary time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.check-cell { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); background: var(--surface); }
.check-cell .path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.check-cell h3 { font-size: var(--text-sm); margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s2); }
.check-state { font-family: var(--font-mono); font-size: var(--text-xs); }
.check-state[data-state="ok"] { color: var(--accent); }
.check-state[data-state="down"] { color: var(--error); }
.check-state[data-state="pending"] { color: var(--muted); }

.log-entries { display: grid; gap: 0; }
.log-entry { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s5); padding: var(--s6) 0; border-top: 1px solid var(--line); }
.log-entry time { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.log-entry .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: 5px;
  padding: 0.1rem 0.5rem;
  margin-left: var(--s2);
  vertical-align: middle;
}
.log-entry h3 { font-size: var(--text-lg); margin-bottom: var(--s2); }
.log-entry p { color: var(--muted); font-size: var(--text-sm); margin-bottom: 0; max-width: 62ch; }
@media (max-width: 767px) { .log-entry { grid-template-columns: 1fr; gap: var(--s2); } }

/* ==========================================================================
 * docs
 * ========================================================================== */

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s7); align-items: start; padding-block: var(--s6) var(--s8); }
.docs-nav { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.docs-nav a { color: var(--muted); padding: 0.4rem 0.7rem; border-radius: 7px; }
.docs-nav a:hover { color: var(--ink-strong); text-decoration: none; background: var(--surface); }
.docs-nav a.active { color: var(--accent); background: var(--accent-wash); font-weight: 600; }

.docs-body > section { padding-block: var(--s5); border-top: 1px solid var(--line); }
.docs-body > section:first-child { border-top: 0; padding-top: 0; }
.docs-body h2 { font-size: var(--text-xl); }
.docs-body .endpoint {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono); font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  margin: 0 var(--s2) var(--s3) 0;
}
.docs-body .endpoint .verb { color: var(--accent); font-weight: 700; font-size: var(--text-xs); }
.param-table td:first-child { font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }
.param-table .req { color: var(--error); font-size: var(--text-xs); margin-left: 0.3rem; }
.param-table td { font-size: var(--text-sm); }
.model-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.model-chips .chip { font-family: var(--font-mono); }
.docs-note {
  border: 1px solid var(--line-strong);
  background: var(--accent-wash);
  color: var(--ink-strong);
  border-radius: var(--radius);
  padding: var(--s3) var(--s4);
  font-size: var(--text-sm);
  margin: var(--s3) 0;
}
@media (max-width: 899px) {
  .docs-layout { grid-template-columns: 1fr; }
  .docs-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ==========================================================================
 * 信任页 / 404
 * ========================================================================== */

.container.prose { max-width: var(--container); }
.prose > * { max-width: 72ch; }
.prose h2 { font-size: var(--text-xl); margin-top: var(--s7); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-base); margin-top: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose .updated { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }

.contact-card { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); padding: var(--s6); display: grid; gap: var(--s4); max-width: 34rem; }
.contact-card .mono { font-size: var(--text-lg); color: var(--accent); }

.notfound { text-align: center; padding-block: var(--s9); }
.notfound .code {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 10vw, 7rem);
  color: transparent;
  -webkit-text-stroke: 2px var(--line-strong);
  line-height: 1;
  display: block;
  margin-bottom: var(--s4);
}

/* ==========================================================================
 * Agent 接入包
 * ========================================================================== */

.ai-pack {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--s5);
  display: grid;
  gap: var(--s3);
}
.ai-pack h3 { margin: 0; font-size: var(--text-base); display: flex; align-items: center; gap: var(--s2); }
.ai-pack p { color: var(--muted); font-size: var(--text-sm); margin: 0; max-width: none; }
.ai-pack-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.snippet-links { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.snippet-label { color: var(--muted); font-size: var(--text-xs); }
.snippet-links a {
  font-family: var(--font-mono); font-size: var(--text-xs);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 0.3rem 0.6rem; color: var(--ink);
  background: var(--bg);
}
.snippet-links a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ==========================================================================
 * 入场动效(一次,200ms fade-rise)
 * ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .hero-inner > *, .stats-row { animation: rise-in 0.45s var(--ease) both; }
  .hero-inner > *:nth-child(2) { animation-delay: 0.05s; }
  .hero-inner > *:nth-child(3) { animation-delay: 0.1s; }
  .hero-inner > *:nth-child(4) { animation-delay: 0.15s; }
  .stats-row { animation-delay: 0.2s; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}