:root { --ink:#202124; --muted:#687078; --line:#e5e7eb; --blue:#146bdf; --blue-soft:#edf5ff; --page:#ffffff; --subtle:#f7f8fa; --green:#0b7b57; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--page); font:15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 44px)); margin-inline:auto; }

/* ============ Header / nav ============ */
.site-header {
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid #eef0f3;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.site-header.is-scrolled {
  background:rgba(255,255,255,0.7); /* 70% 透明 */
  border-bottom-color:transparent;
}
/* 面包屑放在 header 内，跟导航一起 sticky，透明度跟随 header（不变） */
.site-header .breadcrumb {
  /* 复用 .shell 的水平对齐规则：1160px 居中，最小 22px 边距 */
  width:min(1160px, calc(100% - 44px));
  margin-inline:auto;
  padding:6px 0 8px;
  border-top:1px solid #f1f3f5;
  font-size:12px;
  color:var(--muted);
  background:transparent; /* 面包屑本身不透明，让 header 70% 透明生效 */
  margin-top:0;
  margin-bottom:0;
  box-sizing:border-box;
}
.site-header .breadcrumb a { color:var(--muted); text-decoration:none; }
.site-header .breadcrumb a:hover { color:var(--blue); }
.site-header .breadcrumb span { color:var(--ink); font-weight:500; }
.nav-shell { height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:8px; color:#101828; font-weight:800; letter-spacing:-.03em; flex-shrink:0; text-decoration:none; }
.site-logo { width:28px; height:28px; display:block; }
.wordmark { color:#101828; font-size:17px; font-weight:800; letter-spacing:-.03em; }
nav { display:flex; gap:18px; flex-wrap:wrap; }
nav a { color:#5d6570; font-size:13px; font-weight:500; }
nav a:hover { color:var(--blue); }
/* 兼容旧布局：面包屑若在 header 外（独立 <nav>），也加上基础样式 */
nav.breadcrumb {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:10px 0;
  font-size:12px;
  color:var(--muted);
  max-width:min(1160px, calc(100% - 44px));
  margin:0 auto;
}
nav.breadcrumb a { color:var(--muted); text-decoration:none; }
nav.breadcrumb a:hover { color:var(--blue); }
nav.breadcrumb span { color:var(--ink); font-weight:500; }
@media (max-width:720px) {
  .nav-shell { height:auto; padding:10px 0; flex-direction:column; align-items:flex-start; gap:8px; }
  nav { gap:12px; font-size:12px; }
  .site-header .breadcrumb { font-size:11px; padding:4px 0 6px; }
}

/* ============ Intro ============ */
.intro { padding:43px 0 27px; text-align:center; }
.notice { margin:0 0 8px; color:#5d6570; font-size:13px; }
h1 { margin:0 0 10px; color:#15191e; font-size:42px; line-height:1.12; letter-spacing:-.045em; }
.intro-copy { width:min(730px, 100%); margin:0 auto; color:#59616c; font-size:16px; }

/* ============ How to use (4-step guide) — 视觉对齐 Compare/Toolbar/Models 板块 ============ */
/* Override .content max-width:860px → 用 .shell 1160px 跟 Compare 上面板块对齐 */
.how-to-use { max-width:none; }
/* H2 跟 Compare h2 (line 304) 一致：21px / -0.025em letter-spacing */
.how-to-use h2 { font-size:21px; letter-spacing:-.025em; margin:0 0 12px; text-align:center; }
.steps-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  padding:0;
  margin:0 0 14px;
  list-style:none;
  counter-reset:step;
}
.step {
  position:relative;
  padding:18px 18px 16px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:8px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.step:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(15,23,42,0.06);
}
.step-num {
  display:inline-grid;
  place-items:center;
  min-width:34px;
  height:24px;
  padding:0 8px;
  border-radius:5px;
  background:#eef2f7;
  color:#1f2937;
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
}
@media (max-width:980px) { .steps-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px) { .steps-grid { grid-template-columns:1fr; } }

/* ============ Footer (浅灰背景 + 4 列布局) ============ */
.site-footer {
  background:#f5f5f7;
  color:#3a4250;
  padding:48px 0 0;
  margin-top:48px;
  border-top:1px solid #e5e7eb;
}
.footer-grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:32px 40px;
  padding-bottom:32px;
}
.footer-brand .wordmark {
  display:block;
  color:#0b1220;
  font-size:17px;
  font-weight:800;
  letter-spacing:-.03em;
  text-decoration:none;
  margin-bottom:14px;
}
.footer-brand p {
  font-size:14px;
  line-height:1.6;
  color:#5c6570;
  margin:0;
  max-width:340px;
}
.footer-block h3 {
  font-size:15px;
  font-weight:700;
  color:#0b1220;
  margin:0 0 14px;
}
.footer-block ul {
  list-style:none;
  padding:0;
  margin:0;
}
.footer-block li { margin-bottom:8px; }
.footer-block a {
  color:#5c6570;
  text-decoration:none;
  font-size:14px;
}
.footer-block a:hover {
  color:var(--blue);
  text-decoration:underline;
}
.footer-disclaimer {
  border-top:1px solid #e5e7eb;
  padding:20px 0;
}
.footer-disclaimer p {
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:#6b7280;
  text-align:right;
  font-style:italic;
}
.footer-bottom {
  border-top:1px solid #e5e7eb;
  padding:16px 0 20px;
}
.footer-bottom p {
  margin:0;
  font-size:13px;
  color:#6b7280;
}
@media (max-width:980px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 32px; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns:1fr; }
  .footer-disclaimer p { text-align:left; }
}

/* ============ AI Pricing Bar Chart (SVG 柱状图, 仿 @44.png) ============ */
.ai-pricing-section { padding:36px 0; }
.ai-pricing-section h2 { margin:0 0 6px; }
.ai-pricing-section > p { margin:0 0 18px; color:#5c6570; font-size:14px; }
.bar-chart-wrap {
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:14px;
  overflow-x:auto;
}
.ai-pricing-svg {
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  margin:0 auto;
}
.ai-pricing-note {
  font-size:12px;
  color:#8a8f97;
  font-style:italic;
  margin:14px 0 0;
}

/* ============ Accessibility ============ */
/* Screen-reader only — visible to SEO crawlers, hidden visually */
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ============ Comparison data source note ============ */
/* Small italic note placed above the H2 title, right-aligned */
.data-source-note {
  margin:0 0 8px;
  padding:0;
  font-size:11px;
  font-style:italic;
  color:#8a8f97;
  text-align:right;
  line-height:1.5;
}

/* ============ Pricing Sources section ============ */
.pricing-sources {
  font-size:13px;
  color:#59616c;
  padding-bottom:32px;
}
.pricing-sources > h2 {
  font-size:24px;
  margin-bottom:8px;
  color:#15191e;
}
.pricing-sources > p {
  margin-bottom:14px;
}
.pricing-source-list {
  list-style:none;
  padding:0;
  margin:0 0 12px;
  line-height:1.85;
}
.pricing-source-list li {
  margin-bottom:4px;
}
.pricing-source-list a {
  color:#59616c;
  text-decoration:none;
}
.pricing-source-list a:hover {
  color:var(--blue);
  text-decoration:underline;
}
.pricing-source-list strong {
  color:#15191e;
  font-weight:600;
  margin-right:6px;
}
.pricing-disclaimer {
  font-size:11px;
  color:#8a8f97;
  font-style:italic;
  margin:0;
}

/* ============ Model card "More" link ============ */
.more-link {
  color:var(--blue);
  text-decoration:none;
  font-weight:600;
  font-size:12px;
  /* 暂时隐藏 — 等子页面建好后去掉这一行 */
  display:none;
}
.more-link:hover {
  text-decoration:underline;
}

/* ============ Calculator area ============ */
.calculator-area { padding:8px 0 24px; }

/* Tabs */
.mode-tabs { display:inline-flex; margin-bottom:14px; padding:3px; border:1px solid #e1e5ea; border-radius:7px; background:#fafbfc; }
.tab-btn { border:0; border-radius:5px; padding:8px 17px; color:#687078; background:transparent; font-size:13px; font-weight:650; }
.tab-btn.is-active { color:#155cb9; background:#fff; box-shadow:0 1px 3px rgb(0 0 0 / 10%); }

/* Panels */
.panel { display:none; border:1px solid var(--line); border-radius:8px; padding:16px; background:#fff; margin-bottom:18px; }
.panel.is-active { display:block; }
.input-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.input-label { font-size:13px; font-weight:750; color:var(--ink); }
.clear-btn { border:0; padding:0; color:#69727d; background:transparent; font-size:12px; }
.clear-btn:hover { color:var(--blue); }
.text-input { width:100%; min-height:178px; padding:12px; border:1px solid #d7dce2; border-radius:5px; resize:vertical; }
.text-input:focus { outline:2px solid #b9d7ff; border-color:#5e9ff1; }
.number-input-field { width:100%; height:49px; padding:10px 11px; border:1px solid #d7dce2; border-radius:5px; }
.number-input-field:focus { outline:2px solid #b9d7ff; border-color:#5e9ff1; }

/* Stats bar */
.stats-bar { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; padding:18px 20px; margin-bottom:18px; border:1px solid var(--line); border-radius:8px; background:var(--subtle); }
.stat-item { display:flex; flex-direction:column; gap:3px; }
.stat-label { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.stat-value { color:var(--ink); font-size:24px; font-weight:800; letter-spacing:-.02em; }
.tokenizer-pill { display:inline-block; margin-top:2px; padding:1px 6px; border-radius:3px; background:#eef3fa; color:#1765c2; font-size:10px; font-weight:700; width:max-content; }
.stat-hint { color:#a0a6ae; font-size:11px; line-height:1.4; }

/* Output control */
.output-control { border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:#fff; }
.output-control-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.output-ratio-presets { display:flex; gap:6px; flex-wrap:wrap; }
.preset-btn { border:1px solid #dce1e6; border-radius:5px; padding:6px 11px; color:#59616c; background:#fff; font-size:12px; font-weight:650; }
.preset-btn:hover { border-color:#8ebdfa; color:#145cad; background:#f1f7ff; }
.preset-btn.active { border-color:#8ebdfa; color:#145cad; background:#f1f7ff; }
.preset-btn.active:hover { background:#f1f7ff; }
.slider-row { display:flex; align-items:center; gap:14px; }
.output-slider { flex:1; }
.slider-value { display:flex; align-items:baseline; gap:6px; color:var(--ink); font-size:13px; }
.slider-value #outputRatioValue { font-weight:800; font-size:16px; }
.slider-value-label { color:var(--muted); font-size:12px; }

/* ============ Toolbar ============ */
.toolbar-shell { padding:6px 0 8px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:14px 0; border-top:1px solid #e9ebed; border-bottom:1px solid #e9ebed; }
.toolbar-title { margin:0; color:var(--ink); font-size:18px; font-weight:800; letter-spacing:-.025em; }
.toolbar-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.monthly-field { display:flex; flex-direction:column; gap:3px; color:#687078; font-size:11px; font-weight:700; }
.monthly-field em { color:#a0a6ae; font-style:normal; font-weight:400; }
.monthly-field input { width:160px; height:34px; padding:6px 9px; border:1px solid #d7dce2; border-radius:5px; font-size:13px; }
.monthly-field input:focus { outline:2px solid #b9d7ff; border-color:#5e9ff1; }
.sort-control { display:flex; align-items:center; gap:7px; color:#687078; font-size:12px; font-weight:700; }
.sort-control select { height:34px; padding:6px 26px 6px 8px; border:1px solid #d7dce2; border-radius:5px; font-size:12px; }

/* ============ Models grid (7 cards + 1 reserved ad slot) ============ */
.models-shell { padding-bottom:8px; }
.models-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.ad-card { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:240px; border:1.5px dashed #c8d4e3; border-radius:8px; background:repeating-linear-gradient(45deg, transparent, transparent 10px, #f7f9fc 10px, #f7f9fc 11px); color:#8a929d; }
.ad-card-label { font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#a3aab4; margin-bottom:6px; }
.ad-card-text { font-size:14px; font-weight:600; color:#5d6570; }
.ad-card-sub { margin-top:6px; font-size:11px; color:#a3aab4; }
.model-card { display:flex; flex-direction:column; min-width:0; padding:16px; border:1px solid #e0e4e8; border-radius:8px; background:#fff; }
.model-card.is-best { border-color:#a3d9b1; box-shadow:0 0 0 1px #d9f6e8; }
.model-header { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.model-icon { display:flex; width:32px; height:32px; flex-shrink:0; align-items:center; justify-content:center; border-radius:6px; overflow:hidden; }
.provider-logo-img { width:32px; height:32px; display:block; object-fit:contain; }
/* Fallback: 字母背景（无 SVG 时） */
.model-icon:not(:has(.provider-logo-img)) {
  background:#e8f2ff;
  color:#1264cb;
  border-radius:50%;
  font-size:11px;
  font-weight:850;
}
.model-name { margin:0; overflow:hidden; color:#313943; font-size:14px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.select-wrapper { margin-bottom:12px; }
.model-select { width:100%; height:34px; padding:6px 26px 6px 8px; border:1px solid #d7dce2; border-radius:5px; font-size:13px; font-weight:600; }
.model-select:focus { outline:2px solid #b9d7ff; border-color:#5e9ff1; }
.price-display { padding-top:10px; border-top:1px solid #edf0f2; }
.price-row { display:flex; align-items:center; justify-content:space-between; padding:5px 0; color:#747d88; font-size:12px; }
.price-label { color:#59616c; font-weight:600; }
.price-value { color:#252a31; font-weight:700; }
.total-price { display:flex; align-items:center; justify-content:space-between; padding:9px 0 5px; margin-top:3px; border-top:1px solid #edf0f2; color:var(--ink); font-size:13px; font-weight:700; }
.total-price .price-value { color:var(--blue); font-size:15px; font-weight:800; }
.monthly-row { background:#fdf3da; margin:2px -8px; padding:5px 8px; border-radius:4px; }
.card-footer { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid #edf0f2; }
.method-pill,.accuracy-pill { display:inline-block; padding:2px 6px; border-radius:3px; background:#eef3fa; color:#1765c2; font-size:10px; font-weight:700; }
.accuracy-pill { background:#fdf3da; color:#8a5a00; }
.verified-note { color:#8a929d; font-size:10px; }
.source-link { color:#1765c2; font-size:10px; font-weight:700; }
.source-link:hover { text-decoration:underline; }
.copy-btn { margin-left:auto; border:1px solid #dce1e6; border-radius:4px; padding:4px 9px; color:#1765c2; background:#fff; font-size:11px; font-weight:700; }
.copy-btn:hover { background:#f1f7ff; border-color:#8ebdfa; }

/* ============ Comparison table (our differentiator) ============ */
.comparison { margin-top:34px; }
.comparison h2 { margin:0 0 6px; color:var(--ink); font-size:21px; font-weight:800; letter-spacing:-.025em; }
.comparison p { margin:0 0 12px; color:var(--muted); font-size:13px; }
.comparison-table { overflow-x:auto; border:1px solid #e1e5e8; border-radius:7px; }
.comparison-row { display:grid; grid-template-columns:minmax(180px,1.7fr) minmax(95px,.85fr) minmax(95px,.85fr) minmax(150px,1fr) minmax(130px,.85fr); min-width:760px; padding:11px 14px; border-top:1px solid #e9ecf0; color:#57606a; font-size:12px; align-items:center; }
.comparison-row:first-child { border-top:0; }
.comparison-header { color:#747d88; background:#fafbfc; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.model-name b,.model-name small { display:block; }
.model-name b { color:#2d343c; font-size:13px; }
.model-name small { color:#8a929d; font-size:10px; }
.bar-cell { position:relative; isolation:isolate; color:#076b4d; font-weight:800; }
.bar-cell i { position:absolute; z-index:-1; top:50%; left:0; height:18px; transform:translateY(-50%); border-radius:3px; background:#d9f6e8; }

/* ============ SEO content (4 H2 areas) ============ */
.content { max-width:860px; padding:42px 0 0; }
.content h2 { margin:0 0 10px; color:var(--ink); font-size:23px; font-weight:800; letter-spacing:-.03em; }
.content h3 { margin:14px 0 6px; color:var(--ink); font-size:16px; font-weight:750; }
.content p { margin:0 0 10px; color:#5c6570; }
.faq { padding-top:24px; padding-bottom:50px; }
.faq details { padding:11px 0; border-bottom:1px solid #e6e9ec; }
.faq summary { color:#303841; font-weight:750; cursor:pointer; font-size:14px; }
.faq p { margin:6px 0 0; font-size:13px; }

footer { padding:25px 0; border-top:1px solid #e8ebee; color:#858d97; font-size:12px; }

.load-error { color:#b42318; padding:14px; }

/* ============ Responsive ============ */
@media (max-width:980px) { .models-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:680px) {
  .shell { width:min(100% - 28px, 1160px); }
  .nav-shell { height:55px; } nav { gap:14px; } nav a { font-size:12px; }
  .intro { padding:32px 0 23px; } h1 { font-size:34px; } .intro-copy { font-size:14px; }
  .mode-tabs { display:flex; width:100%; }
  .tab-btn { flex:1; padding:8px 4px; font-size:11px; }
  .stats-bar { grid-template-columns:repeat(2, 1fr); gap:12px; padding:14px; }
  .stat-value { font-size:20px; }
  .output-control-header { flex-direction:column; align-items:flex-start; }
  .output-ratio-presets { width:100%; }
  .preset-btn { flex:1; min-width:0; padding:6px 6px; font-size:11px; }
  .toolbar { flex-direction:column; align-items:flex-start; }
  .toolbar-actions { width:100%; flex-direction:column; align-items:flex-start; }
  .monthly-field input { width:100%; }
  .models-grid { grid-template-columns:1fr; }
}