/* SearchPipe 公开站新设计系统（2026-10-12 网站重构）
   来源：Kimi_Agent_网站重构方案（dark-first 开发者风格），只服务 base_public.html
   覆盖的公开页（落地页 + 全部 SEO 内容页）；控制台 base.html 不加载本文件。

   叠加纪律：本文件在 app.css 之后加载——
   - :root 提供深色默认值、[data-theme="light"] 提供浅色值（同特异性后加载者胜，
     app.css 的 :root/[data-theme="dark"] 变量被本文件覆盖；未覆盖的变量
     （--warn/--err-soft/--radius 等）沿用 app.css，两主题都安全）。
   - 旧公开页类（.page-wrap/.prose/.card/.table-wrap/.rate-highlight…）不重复定义，
     自动继承新变量配色；落地页全新结构用新类（.wrap/.bento/.iface/.pcard/.term…）。 */

/* ---------- 设计令牌（深色默认） ---------- */
:root {
  --bg: #07080f;
  --bg-raise: #0b0d17;
  --surface: rgba(139, 148, 252, 0.045);
  --surface-2: rgba(139, 148, 252, 0.08);
  --border: rgba(139, 148, 252, 0.14);
  --border-strong: rgba(139, 148, 252, 0.26);
  --txt: #e9ebf8;
  --muted: #9aa1bd;
  --faint: #5d6480;
  --accent: #818cf8;
  --accent-strong: #6366f1;
  --accent-deep: #4f46e5;
  --accent-soft: rgba(129, 140, 248, 0.12);
  --on-accent: #ffffff;
  --ok: #3dd68c;
  --ok-soft: rgba(61, 214, 140, 0.1);
  --err: #ff8585;
  --code-bg: #090b16;
  --code-border: rgba(139, 148, 252, 0.16);
  --line-color: #a5b0fb;
  --grid-line: rgba(129, 140, 248, 0.055);
  --glow: rgba(99, 102, 241, 0.28);
  --nav-bg: rgba(7, 8, 15, 0.72);
  --selection: rgba(129, 140, 248, 0.28);
  --shadow-lg: 0 24px 64px rgba(2, 3, 10, 0.55);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f7f8fc;
  --bg-raise: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f1f8;
  --border: #e2e4f0;
  --border-strong: #c9cde4;
  --txt: #12142b;
  --muted: #565f78;
  --faint: #8b91a8;
  --accent: #4f46e5;
  --accent-strong: #4f46e5;
  --accent-deep: #4338ca;
  --accent-soft: #eceefe;
  --on-accent: #ffffff;
  --ok: #12805c;
  --ok-soft: #e3f6ec;
  --err: #dc2626;
  --code-bg: #0b0e1d;
  --code-border: #0b0e1d;
  --line-color: #4f46e5;
  --grid-line: rgba(79, 70, 229, 0.055);
  --glow: rgba(99, 102, 241, 0.16);
  --nav-bg: rgba(247, 248, 252, 0.78);
  --selection: rgba(79, 70, 229, 0.16);
  --shadow-lg: 0 24px 64px rgba(24, 26, 66, 0.12);
  color-scheme: light;
}

/* ---------- 基础（只增量覆盖 app.css 的差异项） ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { font-size: 15.5px; overflow-x: hidden; padding-top: 64px; } /* 64px = 固定导航高度 */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; }
code { background: var(--accent-soft); color: var(--accent); }
pre code { background: none; padding: 0; color: inherit; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- 布局工具 ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { position: relative; max-width: none; margin: 0; padding: 96px 0; }
.section-sep {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent 0%, var(--border) 25% 75%, transparent 100%);
}
/* S-C（2026-10-21）：分隔线间隔隐形，渐变线与纯留白交替成节奏 */
main > .section-sep:nth-of-type(2n) { background: transparent; }
.section-head { max-width: 720px; margin: 0 0 56px; text-align: left; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 4.4vw, 44px); font-weight: 800; letter-spacing: -0.03em;
  margin: 14px 0 16px;
}
.section-head p { color: var(--muted); font-size: 16.5px; margin: 0; max-width: 620px; }
.section-head.center p { margin: 0 auto; }
.section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.section-head .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.7; }
.section-head.center .eyebrow::after { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: 0.7; }
.grad-text {
  background: linear-gradient(100deg, var(--txt) 30%, var(--accent) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- 按钮（.btn 主按钮化；.btn-ghost/.btn-sm/.btn-lg 沿用类名） ---------- */
.btn {
  min-height: 44px; padding: 12px 24px; border-radius: 10px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset, 0 10px 30px -8px var(--glow);
  font: 600 14.5px/1.2 var(--font);
  transition: transform 0.15s ease-out, background 0.15s, border-color 0.15s, box-shadow 0.2s, color 0.15s;
}
.btn:hover { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.18) inset, 0 14px 38px -8px var(--glow); transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { /* 与 .btn 同形：新模板里的显式主按钮类 */
  position: relative; overflow: hidden;
}
/* M-A：主按钮光斑跟随（public.js initCtaGlow 写 --gx/--gy，仅精细指针设备） */
.btn-primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(140px 70px at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.2), transparent 70%);
  opacity: 0; transition: opacity 0.25s;
}
.btn-primary:hover::after { opacity: 1; }
.btn-ghost {
  background: var(--surface); border-color: var(--border-strong); color: var(--txt);
  backdrop-filter: blur(6px); box-shadow: none;
}
.btn-ghost:hover { background: var(--surface-2); border-color: var(--accent); box-shadow: none; }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 13.5px; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: 15px 30px; font-size: 15.5px; border-radius: 12px; }
.btn .arr { display: inline-flex; transition: transform 0.2s; }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- 站点导航（固定 + 毛玻璃 + 滚动描边 + 移动端汉堡） ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: block; height: auto; padding: 0; gap: 0;
  background: var(--nav-bg);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, background 0.25s;
}
.site-nav.scrolled { border-bottom-color: var(--border); }
.site-nav .nav-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 24px;
  height: 64px; display: flex; align-items: center; gap: 26px;
}
.site-nav .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--txt); }
.site-nav .brand:hover { text-decoration: none; }
.site-nav .brand .brand-mark { width: 22px; height: 22px; margin-right: 0; color: var(--accent); }
.site-nav .nav-links { display: flex; gap: 4px; flex: 1; }
.site-nav .nav-links a {
  color: var(--muted); font-size: 13.5px; font-weight: 500;
  padding: 8px 12px; border-radius: 8px; transition: color 0.15s, background 0.15s;
}
.site-nav .nav-links a:hover { color: var(--txt); background: var(--surface-2); text-decoration: none; }
.site-nav .nav-links a.active { color: var(--accent); font-weight: 600; }
.site-nav .nav-actions { display: flex; gap: 10px; align-items: center; }
.site-nav .theme-toggle {
  width: 38px; height: 38px; padding: 0; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.site-nav .theme-toggle:hover { color: var(--txt); border-color: var(--border-strong); background: var(--surface); }
.site-nav .theme-toggle svg { width: 16px; height: 16px; }
[data-theme="dark"] .site-nav .tt-sun { display: block; } [data-theme="dark"] .site-nav .tt-moon { display: none; }
[data-theme="light"] .site-nav .tt-sun { display: none; } [data-theme="light"] .site-nav .tt-moon { display: block; }
.nav-burger {
  display: none; width: 40px; height: 40px; border-radius: 9px;
  border: 1px solid var(--border); background: transparent; color: var(--txt); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-burger svg { width: 18px; height: 18px; }
.nav-burger .ic-close { display: none; }
.nav-burger.open .ic-menu { display: none; }
.nav-burger.open .ic-close { display: block; }
.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
}
.mobile-menu a { padding: 12px 10px; color: var(--muted); font-weight: 500; border-radius: 8px; }
.mobile-menu a:hover { background: var(--surface-2); color: var(--txt); text-decoration: none; }
.mobile-menu.open { display: flex; }

/* ---------- Hero ---------- */
/* H-C（2026-10-21）：hero 纵向节奏压缩——eyebrow/h1/lead/CTA/fact-strip/终端 8 层收敛为 6 层，
   终端（最强视觉件）进入 1080p 首屏 */
.hero {
  position: relative; max-width: none; margin: 0; text-align: left;
  padding: 84px 0 60px; overflow: hidden;
}
.hero::before {
  /* 细网格背景，向下淡出 */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 75%);
  pointer-events: none;
}
.spotlight {
  position: absolute; left: 50%; top: -140px; width: 560px; height: 760px;
  transform: translateX(-50%);
  background: conic-gradient(at 50% -5%, transparent 44%, var(--glow) 49%, rgba(129,140,248,0.5) 50%, var(--glow) 51%, transparent 56%);
  filter: blur(38px); opacity: 0.55; pointer-events: none;
  animation: spot-breathe 6s ease-in-out infinite alternate;
}
@keyframes spot-breathe {
  from { opacity: 0.38; transform: translateX(-50%) scale(1) rotate(-2deg); }
  to   { opacity: 0.62; transform: translateX(-50%) scale(1.08) rotate(2deg); }
}
.hero-inner { position: relative; text-align: center; max-width: 900px; margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 16px 6px 8px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  backdrop-filter: blur(6px);
}
.hero-eyebrow .tag-new {
  background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: 999px;
}
.hero h1 {
  font-size: clamp(32px, 6.2vw, 64px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.04; margin: 20px 0 0;
  text-wrap: balance; /* 窄屏行内再断句时保持均衡 */
}
/* 断句固定为语义两行（2026-10-21 用户拍板「强制 A」）：
   L1「Web Search API & MCP」/ L2「for AI Agents」，不再由浏览器选断点；
   注意 L1 不折行——min 32px 是 360px 视口不横向溢出的上限（Inter 800 实测 340px） */
.hero h1 .h1-line { display: block; }
.hero .lead {
  color: var(--muted); font-size: clamp(16px, 2vw, 18.5px);
  max-width: 640px; margin: 16px auto 0; line-height: 1.65;
  text-wrap: balance; /* 两行宽度均衡（H22 目视反馈：lead 断句不对称） */
}
.hero .lead strong { color: var(--txt); font-weight: 600; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.fact-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0;
  margin: 26px auto 0; max-width: 720px; padding: 0;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); backdrop-filter: blur(6px);
  overflow: hidden;
}
.fact-strip .fact {
  flex: 1 1 150px; padding: 13px 18px; text-align: center;
  border-right: 1px solid var(--border);
}
.fact-strip .fact:last-child { border-right: 0; }
.fact .f-k, .fact dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.fact .f-v, .fact dd { margin: 5px 0 0; font: 700 16px/1.3 var(--mono); color: var(--txt); }
.fact dd em { font-style: normal; color: var(--ok); }

/* Hero 搜索盒（2026-10-21 H22 转化率重设计 + 目视反馈：搜索盒加宽加高、能力 Tab 嵌入盒内底排，
   对标竞品首屏；Tab 仅切 placeholder，提交统一 GET /dashboard?q=） */
.hero-demo { display: block; max-width: 780px; margin: 28px auto 0; } /* display:block 显式覆盖 app.css:449 旧 .hero-demo{display:flex}（错位根因，2026-10-21 实机截图定位） */
.hero-search {
  padding: 12px 14px 8px;
  border: 1px solid var(--border-strong); border-radius: 18px;
  background: var(--surface); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg), 0 0 60px -24px var(--glow);
}
.hs-input-row { display: flex; gap: 10px; align-items: center; }
.hs-input-row input {
  flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none;
  padding: 14px 12px; font-size: 16.5px; color: var(--txt);
}
.hs-input-row input:focus { outline: none; border: 0; box-shadow: none; }
.hs-input-row .btn { flex-shrink: 0; }
.cap-tabs {
  display: flex; gap: 6px; justify-content: flex-start; flex-wrap: wrap;
  margin-top: 6px; padding: 10px 4px 2px; border-top: 1px solid var(--border);
}
.cap-tab {
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: 0.02em;
  transition: color .15s, background .15s, border-color .15s;
}
.cap-tab:hover { color: var(--txt); }
.cap-tab.active { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* 终端自 hero 下移独立 section（H22 拍板 D1） */
.section-demo { position: relative; padding: 8px 0 4px; }

/* ---------- Hero 管线演示终端 ---------- */
.term {
  position: relative; max-width: 860px; margin: 24px auto 0; text-align: left;
  border-radius: 16px; border: 1px solid var(--code-border);
  background: var(--code-bg); box-shadow: var(--shadow-lg), 0 0 80px -20px var(--glow);
  overflow: hidden;
}
.term::before {
  content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--line-color) 12%, transparent 24%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: line-anim 7s linear infinite;
  opacity: 0.8; pointer-events: none;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes line-anim { to { --angle: 360deg; } }
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--code-border);
}
.term-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: #2a2f4a; }
.term-bar .dot:nth-child(1) { background: #ff5f57; } .term-bar .dot:nth-child(2) { background: #febc2e; } .term-bar .dot:nth-child(3) { background: #28c840; }
.term-bar .term-title {
  margin-left: 8px; font: 500 12px var(--mono); color: #5d6480; letter-spacing: 0.04em;
}
.term-bar .copy-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06); color: #aab2d5; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; padding: 5px 11px; font: 500 12px var(--font); cursor: pointer;
  transition: background 0.15s;
}
.term-bar .copy-btn:hover { background: rgba(255,255,255,0.12); }
.term-body { padding: 12px 16px 14px; font-family: var(--mono); font-size: 12px; line-height: 1.45; }
.term-cmd { color: #dbe2f0; white-space: pre-wrap; word-break: break-all; }
.term-cmd .p { color: #818cf8; }
.term-cmd .s { color: #7dd3a8; }
.cursor {
  display: inline-block; width: 8px; height: 15px; margin-left: 2px;
  background: #818cf8; vertical-align: -2px;
  animation: blink 1.1s step-start infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.pipe-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.pipe-stage {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid rgba(139,148,252,0.2); border-radius: 8px; padding: 5px 11px;
  font: 600 11.5px var(--mono); color: #5d6480; letter-spacing: 0.06em;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pipe-stage .ps-dot { width: 6px; height: 6px; border-radius: 50%; background: #39406b; transition: all 0.3s; }
.pipe-stage.active { color: #c7cdf5; border-color: rgba(129,140,248,0.55); box-shadow: 0 0 18px -4px var(--glow); }
.pipe-stage.active .ps-dot { background: #818cf8; box-shadow: 0 0 8px #818cf8; animation: blink 0.7s step-start infinite; }
.pipe-stage.done { color: #7dd3a8; border-color: rgba(61,214,140,0.35); }
.pipe-stage.done .ps-dot { background: #3dd68c; }
.pipe-arrow { color: #39406b; font-size: 11px; transition: color 0.4s; }
.pipe-arrow.lit { color: #818cf8; }
.pipe-latency { margin-left: auto; font: 500 11px var(--mono); color: #5d6480; }
.term-out { margin-top: 8px; color: #8f97b8; white-space: normal; word-break: break-word; min-height: 140px; } /* white-space 必须为 normal：pre-wrap 会把 chunk div 间的换行符渲染成匿名块空行（行距翻倍根因，2026-10-21 实机截图定位） */
.term-out .tok-k { color: #93a5fd; } .term-out .tok-s { color: #7dd3a8; }
.term-out .tok-n { color: #f0b866; } .term-out .tok-c { color: #4d5578; }
.term-chunk { animation: chunk-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes chunk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 管线四步（How it works） ---------- */
.flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.flow-step { position: relative; padding: 0 22px; }
.flow-step + .flow-step::before {
  content: ""; position: absolute; left: 0; top: 34px; width: 1px; height: calc(100% - 60px);
  background: linear-gradient(180deg, var(--border-strong), transparent);
}
.flow-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px; border-radius: 18px; position: relative;
  border: 1px solid var(--border-strong); background: var(--bg-raise);
  font: 700 15px var(--mono); color: var(--accent);
  margin-bottom: 22px;
}
.flow-no::after {
  content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--line-color) 14%, transparent 28%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: line-anim 5s linear infinite;
  opacity: 0; transition: opacity 0.5s;
}
.flow-step.on .flow-no::after { opacity: 0.9; }
.flow-step.on .flow-no { box-shadow: 0 0 34px -6px var(--glow); border-color: var(--accent); }
.flow-step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.flow-step p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.7; }

/* ---------- 能力矩阵 Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bento .cell {
  position: relative; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); padding: 26px 26px 24px; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
  backdrop-filter: blur(4px);
}
.bento .cell:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-2); }
.cell.span2 { grid-column: span 2; } .cell.span3 { grid-column: span 3; } .cell.span4 { grid-column: span 4; } .cell.span6 { grid-column: span 6; }
.cell .c-idx { font: 600 11px var(--mono); color: var(--faint); letter-spacing: 0.12em; }
.cell h3 { font-size: 16.5px; font-weight: 700; margin: 10px 0 8px; }
.cell p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.7; }
.cell .c-viz { margin-top: 16px; }
.cta-cell { background: linear-gradient(135deg, var(--accent-soft), var(--surface) 65%); border-color: var(--border-strong); display: flex; flex-direction: column; }
.cta-cell h3 { color: var(--txt); }
.cta-cell:hover { text-decoration: none; }
.cta-cell-btn { display: inline-flex; align-items: center; margin-top: auto; padding-top: 18px; color: var(--accent); font-weight: 600; font-size: 14.5px; }
/* F2 bento 孤儿修复（13 项 capabilities）：CTA 改通栏横带（span6，居中紧凑），消除 6 列网格下游 2 列空洞 */
.bento .cta-cell { align-items: center; text-align: center; padding: 30px 26px 26px; }
.bento .cta-cell h3 { margin: 8px 0 6px; font-size: 19px; }
.bento .cta-cell p { max-width: 560px; }
/* 打分条微可视化 */
.score-row { display: flex; align-items: center; gap: 10px; font: 500 11px var(--mono); color: var(--faint); margin-top: 7px; }
.score-row .bar { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.score-row .bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 8px var(--glow); width: 0; transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.bento.on .score-row .bar i { width: var(--w); }
/* 引擎芯片微可视化 */
.eng-row { display: flex; gap: 6px; flex-wrap: wrap; }
.eng-row .chip {
  font: 600 10.5px var(--mono); letter-spacing: 0.05em; color: var(--muted);
  border: 1px solid var(--border); padding: 4px 9px; border-radius: 6px;
  animation: chip-pulse 3.2s ease-in-out infinite;
}
.eng-row .chip:nth-child(2) { animation-delay: 0.5s; } .eng-row .chip:nth-child(3) { animation-delay: 1s; }
.eng-row .chip:nth-child(4) { animation-delay: 1.5s; } .eng-row .chip:nth-child(5) { animation-delay: 2s; }
@keyframes chip-pulse { 0%, 100% { border-color: var(--border); color: var(--muted); } 50% { border-color: var(--accent); color: var(--accent); } }
/* 退款徽章微可视化 */
.refund-viz { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--mono); color: var(--ok); background: var(--ok-soft); border: 1px solid rgba(61,214,140,0.3); padding: 6px 12px; border-radius: 8px; }
[data-theme="light"] .refund-viz { border-color: rgba(18,128,92,0.3); }
.refund-viz .spin { width: 12px; height: 12px; border: 2px solid var(--ok); border-top-color: transparent; border-radius: 50%; animation: spin 1.4s linear infinite; }
/* 缓存 TTL 微可视化 */
.ttl-viz { font: 600 12px var(--mono); color: var(--faint); }
.ttl-viz .hot { color: var(--ok); }

/* ---------- 双接入路径（MCP / REST） ---------- */
.iface-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.iface {
  position: relative; border-radius: 18px; padding: 28px;
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: blur(6px); overflow: hidden;
  display: flex; flex-direction: column;
}
.iface.featured::before {
  content: ""; position: absolute; inset: -1px; border-radius: 19px; padding: 1px;
  background: conic-gradient(from var(--angle, 0deg), transparent 0%, var(--line-color) 10%, transparent 22%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: line-anim 8s linear infinite; opacity: 0.7; pointer-events: none;
}
.iface .i-icon, .ipoint .i-icon, .uc .i-icon {
  width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 18px;
}
.iface .i-icon svg, .ipoint .i-icon svg, .uc .i-icon svg { width: 18px; height: 18px; }
.iface h3 { font-size: 19px; font-weight: 700; }
.iface .i-tag { font: 600 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.iface p { color: var(--muted); font-size: 14.5px; line-height: 1.75; margin: 14px 0 0; }
.iface .i-links { margin-top: 16px; font-size: 13.5px; display: flex; gap: 16px; flex-wrap: wrap; }
.iface .i-links a { display: inline-flex; align-items: center; gap: 5px; }
.iface-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.ipoint {
  border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; background: var(--surface);
  transition: border-color 0.25s, transform 0.25s;
}
.ipoint:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.ipoint .i-icon { width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px; }
.ipoint h4 { font-size: 15px; margin: 0 0 6px; }
.ipoint p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.7; }

/* ---------- 代码块（公开站统一新样式；复制按钮仍由 app.js 挂） ---------- */
.codeblock, .code-block {
  position: relative; border-radius: 14px; border: 1px solid var(--code-border);
  background: var(--code-bg); overflow: hidden;
}
.code-block { border-radius: 14px; }
.codeblock pre, .code-block pre {
  margin: 0; padding: 18px 20px; overflow-x: auto;
  font: 400 13px/1.75 var(--mono); color: #d5dbf2;
}
.codeblock .cb-head {
  display: flex; align-items: center; gap: 4px; padding: 9px 10px;
  border-bottom: 1px solid var(--code-border); background: rgba(255,255,255,0.025);
  overflow-x: auto; scrollbar-width: none;
}
.codeblock .cb-head::-webkit-scrollbar { display: none; }
.codeblock .cb-tab {
  border: 0; background: transparent; color: #69718f; cursor: default;
  font: 600 12px var(--mono); padding: 7px 13px; border-radius: 7px; white-space: nowrap;
}
.codeblock .cb-tab.active { background: rgba(129,140,248,0.14); color: #c7cdf5; }
/* app.js 自动挂的复制按钮与新头栏对齐 */
.code-block .copy-btn {
  top: 10px; right: 10px;
  background: rgba(255,255,255,0.06); color: #aab2d5; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px; padding: 5px 11px; font: 500 12px var(--font);
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.12); }
/* 多语言 Tab（_code_tabs.html）：整体呈新 codeblock 形态 */
.code-tabs { border: 1px solid var(--code-border); border-radius: 14px; background: var(--code-bg); overflow: hidden; }
.code-tabs .tabs.code-langs {
  width: 100%; margin-bottom: 0; padding: 6px 8px; gap: 4px;
  background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--code-border); border-radius: 0;
  overflow-x: auto; scrollbar-width: none;
}
.code-tabs .tabs.code-langs::-webkit-scrollbar { display: none; }
.code-tabs .code-langs button {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 7px;
  color: #69718f; font: 600 12px var(--mono);
  transition: color 0.15s, background 0.15s;
}
.code-tabs .code-langs button:hover { color: #c7cdf5; }
.code-tabs .code-langs button.active { background: rgba(129,140,248,0.14); color: #c7cdf5; box-shadow: none; }
.code-tabs .code-block { border: 0; border-radius: 0; }

/* ---------- 左右分栏（API Example） ---------- */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; }
.point-list { display: flex; flex-direction: column; gap: 26px; }
.point { display: flex; gap: 16px; }
.point .pt-no {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--mono); color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--border);
}
.point h3 { font-size: 16.5px; margin-bottom: 6px; }
.point p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.7; }

/* ---------- 定义 / 边界卡（What is / Boundaries） ---------- */
.def-card, .boundaries-card {
  max-width: 780px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  padding: 30px 32px; backdrop-filter: blur(4px);
}
.def-card .def-lead { font-size: 17.5px; line-height: 1.8; color: var(--txt); margin: 0; }
.def-card .def-evidence { color: var(--muted); margin: 14px 0 0; line-height: 1.65; }
.def-card .product-category { margin-bottom: 0; background: transparent; border-color: var(--border); }
.boundaries-card p { color: var(--muted); font-size: 15.5px; line-height: 1.8; margin: 0; }
.boundaries-card p + p { margin-top: 12px; }
.boundaries-card strong, .def-card strong { color: var(--txt); }

/* ---------- 使用场景（S-B 2026-10-21：改 3 列，与 2 列 iface/uc 旧节奏错开） ---------- */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.uc {
  position: relative; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; background: var(--surface); overflow: hidden;
  transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.uc:hover { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-2); }
.uc h3 { font-size: 17px; margin-bottom: 8px; }
.uc p { color: var(--muted); font-size: 14.5px; margin: 0; line-height: 1.75; }

/* ---------- 定价 ---------- */
.rate-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--border-strong); border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
  padding: 16px 24px; margin: 0 auto 40px; max-width: 640px; text-align: center;
}
.rate-banner .rt { font-size: 16.5px; font-weight: 700; color: var(--txt); }
.rate-banner .rt b { color: var(--ok); font-family: var(--mono); }
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 780px; margin: 0 auto; }
.price-grid.three { grid-template-columns: repeat(3, 1fr); max-width: 1020px; }
.pcard {
  position: relative; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); padding: 30px 28px; display: flex; flex-direction: column;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pcard:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.pcard.featured { border-color: var(--accent); box-shadow: 0 0 44px -10px var(--glow); }
.pcard .p-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--accent), var(--accent-deep)); color: #fff;
  font: 700 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 999px; white-space: nowrap;
}
.pcard h3 { font-size: 16px; font-weight: 700; }
.pcard .p-sub { color: var(--faint); font-size: 13px; margin-top: 4px; }
.pcard .price { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; margin: 18px 0 4px; white-space: nowrap; }
.pcard .price .per { font-size: 14px; color: var(--faint); font-weight: 600; letter-spacing: 0; }
.pcard .price .price-original { font-size: 16px; margin-left: 8px; }
.pcard ul { list-style: none; padding: 0; margin: 18px 0 26px; color: var(--muted); font-size: 14px; flex: 1; }
.pcard ul li { padding: 7px 0 7px 26px; position: relative; }
.pcard ul li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 14px; height: 14px;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plans-head { text-align: center; margin: 72px auto 40px; max-width: 720px; }
.plans-head h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.plans-head p { color: var(--muted); font-size: 14.5px; max-width: 560px; margin: 10px auto 0; }
.pricing-note { text-align: center; color: var(--faint); font-size: 12.5px; max-width: 720px; margin: 34px auto 0; line-height: 1.8; }

/* ---------- FAQ（落地页 details 形态 + 旧内容页 div 形态统一新列表样式） ---------- */
.faq-list { max-width: 780px; margin: 0 auto; display: grid; gap: 0; }
.faq-item {
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; box-shadow: none; padding: 0;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer; list-style: none; padding: 22px 4px; margin: 0;
  font-size: 16px; font-weight: 600; transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
details.faq-item[open] summary { margin-bottom: 0; }
.faq-item summary .fi {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s, border-color 0.15s;
}
.faq-item[open] summary .fi { transform: rotate(45deg); color: var(--accent); border-color: var(--accent); }
.faq-item .fa, .faq-item p { color: var(--muted); font-size: 14.5px; line-height: 1.8; margin: 0; padding: 0 44px 24px 4px; }
/* 旧内容页（/faq /compare /search-api /verify-api）的 div.faq-item 形态 */
.faq-item h3 { padding: 20px 4px 0; font-size: 16px; }
.faq-item .faq-permalink { padding: 0 4px 20px; }

/* ---------- CTA 横带（覆盖 app.css 旧卡片形态；其他公开页同款受益） ---------- */
.cta-band {
  position: relative; max-width: 1180px; margin: 8px auto 0; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--border-strong);
  background: linear-gradient(160deg, var(--accent-soft), var(--surface) 55%);
  padding: 72px 32px; text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -260px; width: 480px; height: 560px;
  transform: translateX(-50%);
  background: conic-gradient(at 50% 0%, transparent 42%, var(--glow) 50%, transparent 58%);
  filter: blur(30px); opacity: 0.8; pointer-events: none;
  animation: spot-breathe 7s ease-in-out infinite alternate;
}
.cta-band h2 { position: relative; font-size: clamp(26px, 4vw, 40px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0; }
.cta-band p { position: relative; color: var(--muted); font-size: 16px; max-width: 560px; margin: 16px auto 0; }
.cta-band .cta-row { position: relative; }
.page-wrap .cta-band { max-width: 100%; }

/* ---------- 页脚（五栏 + 底注） ---------- */
.site-footer { border-top: 1px solid var(--border); padding: 64px 0 40px; margin-top: 40px; text-align: left; }
.site-footer .footer-cols {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 32px;
  max-width: 1180px; margin: 0 auto; padding: 0 24px; text-align: left;
}
.footer-cols .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 700; color: var(--txt); }
.footer-cols .brand:hover { text-decoration: none; }
.footer-cols .brand .brand-mark { width: 22px; height: 22px; margin-right: 0; color: var(--accent); }
.footer-cols p { font-size: 13.5px; color: var(--faint); margin: 14px 0 0; max-width: 300px; line-height: 1.75; }
.footer-cols nav { display: flex; flex-direction: column; gap: 10px; }
.footer-cols .fh { font: 700 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--txt); margin-bottom: 4px; }
.footer-cols a { color: var(--muted); font-size: 13.5px; transition: color 0.15s; }
.footer-cols a:hover { color: var(--txt); text-decoration: none; }
.site-footer .footer-note {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: 1180px; margin: 48px auto 0; padding: 24px 24px 0;
  border-top: 1px solid var(--border);
  color: var(--faint); font-size: 13px; font-family: var(--mono);
}

/* ---------- 滚动显现 ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.rv.on { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.16s; }
.rv-d3 { transition-delay: 0.24s; } .rv-d4 { transition-delay: 0.32s; }

/* ---------- 落地页语义工具类（F5：收编模板内联 style） ---------- */
.i-code { margin-top: 18px; }
.api-more { margin-top: 26px; font-size: 14px; color: var(--muted); }
.mc-code { max-width: 780px; margin: 0 auto; }
.mc-links { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }
/* S-B：MCP Example 改左右分栏后，链接列左对齐、字号回正 */
.mc-split .mc-links { text-align: left; margin-top: 0; font-size: 15px; line-height: 1.8; }
.compare-links { text-align: center; color: var(--muted); font-size: 15px; }
.btn-block { width: 100%; }
.section-cta { padding-bottom: 40px; }

/* ---------- 对比 + 边界双卡（S-A 合并 / H-D 绿色语义锚点） ---------- */
.ctx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ctx-card {
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface);
  padding: 30px 32px; backdrop-filter: blur(4px);
}
.ctx-card h2 { font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 14px; }
.ctx-card .ctx-desc { color: var(--muted); font-size: 15px; line-height: 1.8; margin: 0; }
.ctx-card p + p { margin-top: 12px; }
.ctx-card strong { color: var(--txt); }
.ctx-card .compare-links { margin-top: 16px; }
/* H-D：ok 绿 = 证据/退款/可信语义色；Boundaries 卡作全页第二色彩地标（克制单点） */
.ctx-card.ctx-ok { border-color: rgba(61, 214, 140, 0.3); }
.ctx-card.ctx-ok .eyebrow { color: var(--ok); }
.ctx-card.ctx-ok .eyebrow::before, .ctx-card.ctx-ok .eyebrow::after { background: var(--ok); }

/* ---------- 响应式 ---------- */
@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .cell.span2, .bento .cell.span3, .bento .cell.span4, .bento .cell.span6 { grid-column: span 1; }
  .bento .cell.wide, .bento .cta-cell { grid-column: span 2; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .flow-step + .flow-step::before { display: none; }
  .iface-points { grid-template-columns: 1fr; }
  .price-grid.three { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 860px) {
  .section { padding: 76px 0; }
  .bento { grid-template-columns: 1fr; }
  .bento .cell.wide, .bento .cta-cell { grid-column: span 1; }
  .site-nav .nav-links { display: none; }
  .site-nav .nav-actions .btn-ghost { display: none; }
  .nav-burger { display: inline-flex; }
  .hero { padding: 56px 0 48px; }
  .iface-grid, .uc-grid, .split, .price-grid, .ctx-grid { grid-template-columns: 1fr; }
  .split { gap: 30px; }
  .price-grid { max-width: 460px; margin: 0 auto; }
  .flow { grid-template-columns: 1fr; }
  .site-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fact-strip { flex-direction: column; }
  .fact-strip .fact { flex: none; border-right: 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: baseline; text-align: left; padding: 13px 18px; }
  .fact-strip .fact:last-child { border-bottom: 0; }
  .fact dd { margin: 0; }
  .hero-eyebrow { flex-wrap: wrap; justify-content: center; text-align: left; padding: 6px 14px; }
  .hero-eyebrow .tag-new { white-space: nowrap; }
  .term-bar { flex-wrap: wrap; }
  .term-bar .term-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .term-body { font-size: 11px; padding: 10px 14px 12px; }
  .term { border-radius: 12px; }
  /* T-A（2026-10-21）：移动端/窄屏降级——关常驻装饰动画与 backdrop-filter 保帧率。
     终端打字循环（JS 主视觉件）与 cursor blink 保留；prefers-reduced-motion 仍全局兜底。 */
  .spotlight, .cta-band::before { animation: none; }
  .term::before, .iface.featured::before, .flow-no::after { animation: none; }
  .eng-row .chip { animation: none; }
  .site-nav, .hero-eyebrow, .fact-strip, .hero-search, .bento .cell, .iface, .def-card, .boundaries-card, .ctx-card {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  /* H22：移动端搜索盒内边距收紧，输入行保持横排 */
  .hero-search { padding: 10px 10px 6px; }
  .hs-input-row input { padding: 12px 8px; font-size: 15px; }
  .cap-tabs { flex-wrap: wrap; }
}
/* 超窄屏（≤480px）：固定两行回退为自然折行——.h1-line 不折行在 360px 视口
   会横向溢出（Inter 800 32px 实测 L1≈340px > 内容宽 ~320px），inline 后由 text-wrap: balance 接管 */
@media (max-width: 480px) {
  .hero h1 .h1-line { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; }
}