/* ==========================================================================
   legacy.css —— 旧站正文内容的排版层
   --------------------------------------------------------------------------
   背景：旧站有 729 个 class，其中 section / hero / stat / card / tag / btn / post
   恰好和 main.css 同名，会互相串样式。build.js 已把旧 class 统一加 l- 前缀
   做隔离，这里负责把 l-* 排成统一的「文档风」。

   只做长文排版，不做卡片系统 —— 这 14 个页面里 10 个是内容页
   （选型指南、产品对比、安装文档、路线图…），文字为主，卡片化反而添乱。
   ========================================================================== */

/* ---------- 容器与区块 ---------- */
.l-container,
.l-wrap,
.l-guide-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
@media (max-width: 560px) {
  .l-container, .l-wrap, .l-guide-container { padding: 0 17px; }
}

.l-section,
.l-cat-section,
.l-r-section,
.l-doc-section,
.l-gallery-section,
.l-cta-section,
.l-faq-section,
.l-need-section,
.l-meet-section,
.l-feed-section,
.l-case-section,
.l-article,
.l-content {
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}
.l-section:last-child,
.l-article:last-child { border-bottom: 0; }
.l-alt-bg { background: var(--bg-1); }

@media (max-width: 780px) {
  .l-section, .l-cat-section, .l-r-section, .l-doc-section,
  .l-gallery-section, .l-cta-section, .l-faq-section { padding: 40px 0; }
}

/* ---------- 页面顶部标题区 ---------- */
.l-hero,
.l-hero-banner,
.l-guide-hero,
.l-docs-hero,
.l-r-hero,
.l-v8-release-hero,
.l-gallery-hero {
  position: relative;
  padding: 76px 0 56px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(680px 300px at 24% 10%, rgba(34, 211, 238, .15), transparent 70%),
    radial-gradient(560px 280px at 76% 26%, rgba(167, 139, 250, .13), transparent 70%);
}
.l-hero-inner, .l-hero-eyebrow, .l-hero-tag,
.l-hero-tagline, .l-hero-badge { position: relative; z-index: 1; }
.l-hero h1,
.l-hero-banner h1,
.l-guide-hero h1,
.l-docs-hero h1,
.l-r-hero h1,
.l-v8-release-hero h1 { margin-bottom: .35em; }
.l-hero-subtitle, .l-hero-sub, .l-hero-ctas, .l-hero-actions,
.l-hero-stats, .l-hero-note, .l-lead, .l-lede, .l-section-sub {
  color: var(--text-2);
  font-size: 16.5px;
  max-width: 48em;
}
.l-hero-stats, .l-stats-row, .l-metric-row { display: flex; flex-wrap: wrap; gap: 26px 40px; margin-top: 28px; }
.l-hero-tag, .l-tag, .l-badge, .l-label, .l-cls-tag, .l-doc-tag,
.l-art-tag, .l-news-tag, .l-role-tag, .l-guide-badge, .l-section-tag,
.l-cls-card + .l-cls-tags > * { display: inline-block; }

/* ---------- 标题 ---------- */
.l-section-title,
.l-cat-title,
.l-row-title,
.l-group-title,
.l-doc-title,
.l-card-title,
.l-title {
  color: var(--text);
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 .6em;
}
.l-section-title { font-size: clamp(22px, 3vw, 30px); }
.l-cat-title, .l-row-title, .l-group-title { font-size: clamp(19px, 2.4vw, 24px); }
.l-card-title, .l-title { font-size: 18px; margin: 0 0 .4em; }
.l-md-h2 { font-size: 24px; color: var(--text); margin: 2em 0 .7em; padding-left: 13px; border-left: 3px solid var(--cyan); }
.l-md-h3 { font-size: 20px; color: var(--text); margin: 1.7em 0 .6em; }
.l-md-h4 { font-size: 17px; color: var(--text); margin: 1.4em 0 .5em; }
.l-eyebrow { color: var(--cyan); font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.l-en, .l-sub-en { color: var(--muted); font-size: 13px; }

/* ---------- 正文排版 ---------- */
.l-md-p, .l-p { color: var(--text-2); }
.l-container p, .l-wrap p, .l-article p { color: var(--text-2); }
.l-md-list, .l-container ul, .l-wrap ul, .l-article ul { color: var(--text-2); }
.l-md-list li::marker, .l-article li::marker { color: var(--cyan); }
.l-md-quote, .l-quote, .l-callout, .l-note, .l-disclaimer {
  border-left: 3px solid var(--cyan);
  background: var(--surface);
  padding: 15px 19px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  margin: 1.5em 0;
  color: var(--text-2);
}
.l-md-quote, .l-quote { border-left-color: var(--violet); }
.l-callout, .l-note { border-left-color: var(--warn); background: rgba(251, 191, 36, .09); }
.l-disclaimer { border-left-color: var(--muted); color: var(--muted); font-size: 14.5px; }
.l-hl, .l-highlight { color: var(--cyan); font-weight: 600; }
.l-key { color: var(--violet); font-weight: 600; }
.l-cyan { color: var(--cyan); } .l-purple { color: var(--violet); }
.l-green { color: var(--ok); } .l-red { color: var(--err); }

/* ---------- 网格 ---------- */
.l-grid, .l-grid-f, .l-card-row, .l-img-grid, .l-q-grid,
.l-features, .l-traits, .l-scenarios, .l-flow-steps,
.l-metrics, .l-versions, .l-scenarios, .l-plan-grid,
.l-perks, .l-agenda, .l-source-grid, .l-requirements,
.l-platforms, .l-values, .l-company-card, .l-what-card,
.l-competitors, .l-tiers { display: grid; gap: 18px; }
.l-grid-2, .l-grid-f, .l-card-row { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.l-grid-3, .l-features { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.l-grid-4, .l-trust-bar, .l-tiers { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.l-support-grid, .l-img-grid, .l-scenarios { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
@media (max-width: 640px) {
  .l-grid, .l-grid-2, .l-grid-3, .l-grid-4, .l-card-row,
  .l-img-grid, .l-q-grid, .l-features, .l-traits,
  .l-support-grid, .l-scenarios { grid-template-columns: 1fr; }
}

/* ---------- 卡片 ---------- */
.l-card, .l-q-card, .l-img-card, .l-doc-card, .l-guide-card,
.l-ai-card, .l-module-card, .l-test-card, .l-feature-card,
.l-func-card, .l-scenario, .l-metric, .l-value-card,
.l-compare-col, .l-mode-card, .l-plan-card, .l-support-item,
.l-trust-item, .l-special, .l-curr-card, .l-stat, .l-who-card,
.l-case-item, .l-news-item, .l-art-item, .l-cat-card, .l-blog-card,
.l-trait, .l-feat, .l-good, .l-item, .l-job, .l-value, .l-metric-card,
.l-timeline-item, .l-arch-item, .l-epic-card, .l-fde-card, .l-opc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
  transition: border-color .18s, background .18s;
}
.l-card:hover, .l-q-card:hover, .l-doc-card:hover, .l-guide-card:hover,
.l-ai-card:hover, .l-module-card:hover, .l-feature-card:hover { border-color: var(--line-hi); background: var(--surface-2); }
.l-qc-emoji, .l-doc-icon, .l-card-icon, .l-icon, .l-gc-icon,
.l-feature-icon, .l-module-icon, .l-ai-icon, .l-fb-icon, .l-gb-icon,
.l-pf-icon, .l-who-icon, .l-cat-icon, .l-value-icon, .l-pain-num,
.l-step-num, .l-fn-num, .l-func-num, .l-arch-num, .l-num, .l-idx {
  display: grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 10px;
  border-radius: 11px; background: var(--cyan-dim);
  color: var(--cyan); font-weight: 800; font-size: 19px;
  border: 1px solid rgba(34, 211, 238, .25);
  margin-bottom: 13px;
}
.l-qc-title, .l-gc-title, .l-row-title, .l-func-name, .l-title { color: var(--text); font-weight: 700; margin: 0 0 .4em; font-size: 17.5px; }
.l-qc-desc, .l-gc-desc, .l-desc, .l-sub, .l-text, .l-txt {
  color: var(--muted); font-size: 14.8px; margin: 0;
}
.l-img-card { padding: 0; overflow: hidden; }
.l-img-overlay { padding: 18px; }

/* ---------- 表格 ---------- */
.l-table-wrap, .l-compare-table, .l-api-table, .l-md-table {
  overflow-x: auto; margin: 0 0 1.8em;
  border: 1px solid var(--line); border-radius: var(--r);
}
.l-table-wrap table, .l-compare-table table, .l-md-table table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.l-table-wrap th, .l-table-wrap td,
.l-compare-table th, .l-compare-table td,
.l-md-table th, .l-md-table td {
  padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--line);
}
.l-table-wrap th, .l-compare-table th, .l-md-table th {
  background: var(--bg-2); color: var(--text); font-weight: 700; font-size: 13.5px;
}
.l-table-wrap tr:last-child td, .l-compare-table tr:last-child td,
.l-md-table tr:last-child td { border-bottom: 0; }
.l-table-wrap tbody tr:hover { background: var(--surface); }

/* ---------- 代码 ---------- */
.l-md-pre, .l-code-block, .l-ldd, .l-pre {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px; overflow-x: auto;
  margin: 0 0 1.5em; position: relative;
  font-family: var(--mono); font-size: 13.5px; line-height: 1.6;
  color: var(--text-2);
}

/* ---------- FAQ（老 f-* 系列） ---------- */
.l-f-group, .l-faq-list, .l-faq { max-width: 860px; }
.l-f-item, .l-faq-item {
  border: 1px solid var(--line); border-radius: var(--r);
  margin-bottom: 11px; background: var(--surface); overflow: hidden;
}
.l-f-q, .l-faq-question, .l-f-toggle {
  cursor: pointer; padding: 16px 48px 16px 20px; position: relative;
  color: var(--text); font-weight: 600; font-size: 15.5px;
}
.l-f-a, .l-faq-answer { padding: 0 20px 18px; color: var(--text-2); font-size: 14.8px; }

/* ---------- 按钮 ---------- */
.l-btn, .l-btn-primary, .l-btn-secondary, .l-btn-ghost,
.l-v8-btn, .l-v8-btn-primary, .l-v8-btn-ghost, .l-r-btn,
.l-r-btn-ghost, .l-cta-button, .l-dl-btn, .l-cta-btn, .l-back-btn,
.l-v8-doc-btn, .l-btn-source {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.4;
  border: 1px solid var(--line-hi); background: var(--surface);
  color: var(--text-2); cursor: pointer;
  transition: transform .14s, filter .14s, border-color .14s;
}
.l-btn:hover, .l-btn-primary:hover, .l-btn-secondary:hover,
.l-v8-btn:hover, .l-v8-btn-primary:hover, .l-cta-button:hover,
.l-r-btn:hover, .l-dl-btn:hover, .l-cta-btn:hover {
  transform: translateY(-1px); border-color: var(--cyan); color: var(--text);
}
.l-btn-primary, .l-v8-btn-primary, .l-cta-button, .l-dl-btn, .l-cta-btn {
  background: var(--grad); border-color: transparent; color: #fff;
}
.l-btn-primary:hover, .l-v8-btn-primary:hover, .l-cta-button:hover,
.l-dl-btn:hover, .l-cta-btn:hover { filter: brightness(1.12); color: #fff; }
.l-btn-ghost, .l-r-btn-ghost, .l-v8-btn-ghost { background: var(--surface); }
.l-actions, .l-btn-row, .l-cta-buttons, .l-hero-ctas, .l-hero-actions,
.l-cta-row, .l-cta-inline { display: flex; flex-wrap: wrap; gap: 11px; margin: 24px 0; }

/* ---------- 标签 / 徽标 ---------- */
.l-tag, .l-badge, .l-label, .l-cls-tag, .l-doc-tag, .l-art-tag,
.l-news-tag, .l-guide-badge, .l-section-tag, .l-role-tag, .l-hot,
.l-chip {
  display: inline-block; padding: 3px 11px; border-radius: 100px;
  font-size: 12.5px; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.l-primary, .l-featured, .l-recommended, .l-current, .l-active, .l-curr-tag { color: var(--cyan); border-color: rgba(34, 211, 238, .4); background: var(--cyan-dim); }

/* ---------- 时间线 / 步骤 ---------- */
.l-flow-step, .l-step, .l-arch-item, .l-timeline-item, .l-milestone,
.l-epic-event, .l-fd-item, .l-v8-timeline-item {
  position: relative; padding: 0 0 26px 34px;
  border-left: 1px solid var(--line);
}
.l-flow-step-num, .l-step-num, .l-arch-num, .l-v8-timeline-dot, .l-dot {
  position: absolute; left: -11px; top: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--grad); border: 2px solid var(--bg-0);
}
.l-flow-step-icon, .l-step-icon { margin-bottom: 9px; font-size: 21px; }
.l-step-time, .l-date, .l-v8-date, .l-meta, .l-time { color: var(--muted); font-size: 13.5px; }
.l-timeline-content h4, .l-arch-body h4, .l-v8-timeline-item h4 { color: var(--text); margin: 0 0 .3em; font-size: 16.5px; }

/* ---------- 指标 ---------- */
.l-metric-num, .l-stat-num, .l-value-num, .l-tab-num, .l-fn-num, .l-scenario-metric,
.l-stat-mini, .l-hero-stat .l-n, .l-n {
  font-size: 27px; font-weight: 800; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.l-metric-label, .l-stat-label, .l-unit, .l-metric-row-label, .l-value-sub {
  color: var(--muted); font-size: 13.5px;
}
.l-metric-row-desc { color: var(--muted); font-size: 14px; }

/* ---------- 图片 ---------- */
.l-shot, .l-screenshot, .l-gallery-card-img, .l-img-card img,
.l-avatar, .l-avatar-wrap img { border-radius: var(--r); overflow: hidden; }
.l-screenshot-caption, .l-gallery-card-tag, .l-caption, .l-cap {
  color: var(--muted); font-size: 13.5px; text-align: center; margin-top: 9px;
}
.l-hero-visual img, .l-r-visual img { border-radius: var(--r-lg); }

/* ---------- 目录 / 面包屑 ---------- */
.l-toc, .l-crumbs {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 17px 21px; margin: 0 0 30px;
  font-size: 14.5px;
}
.l-toc strong, .l-toc-title { color: var(--text); display: block; margin-bottom: 8px; }
.l-toc ol, .l-toc ul { margin: 0; padding-left: 1.3em; }
.l-crumbs { color: var(--muted); font-size: 13.5px; }

/* ---------- 好坏对比 ---------- */
.l-good, .l-bad, .l-yes, .l-no, .l-get, .l-req-card {
  border-left: 3px solid var(--line-hi);
  padding-left: 13px;
}
.l-good, .l-yes, .l-get { border-left-color: var(--ok); }
.l-bad, .l-no { border-left-color: var(--err); }

/* ---------- 头像 / 名字 ---------- */
.l-ai-name, .l-name, .l-feed-avatar {
  color: var(--text); font-weight: 700; font-size: 15px;
}
.l-feed-meta, .l-news-meta, .l-art-meta, .l-meta-row, .l-v8-article-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: 13.5px;
}
.l-v8-article-title, .l-art-item h3, .l-news-item h3, .l-feed-item h3 {
  color: var(--text); margin: .35em 0; font-size: 17.5px;
}
.l-v8-article-title a, .l-art-item a, .l-news-item a { color: inherit; }
.l-v8-article-title a:hover, .l-art-item a:hover, .l-news-item a:hover { color: var(--cyan); }
.l-v8-article-excerpt, .l-feed-content, .l-summary, .l-card-summary {
  color: var(--muted); font-size: 14.8px; margin: 0;
}

/* ---------- 杂项 ---------- */
.l-dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.l-line1, .l-line2, .l-line3 { display: block; }
.l-wm-card, .l-lb, .l-lightbox, .l-modal, .l-qm-card, .l-toast { display: none !important; }
.l-fas, .l-icon-fas { font-style: normal; }
.l-disclaimer-box { color: var(--muted); font-size: 13.5px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 34px; }

/* ---------- 下载卡片（项目说明文档页：PPT / PDF 版） ----------
   复用既有设计系统变量与卡片风格，代码样式已由 main.css:90 定义，这里不重复。 */
.l-dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.l-dl-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 22px; text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: border-color .18s, background .18s, transform .18s;
}
.l-dl-card:hover { border-color: var(--line-hi); background: var(--surface-2); transform: translateY(-2px); }
.l-dl-icon {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; font-size: 21px;
  border-radius: 12px; background: var(--cyan-dim);
  border: 1px solid rgba(34, 211, 238, .25);
}
.l-dl-body { flex: 1 1 auto; min-width: 0; }
.l-dl-body h3 { font-size: 16.5px; margin: 0 0 3px; color: var(--text); }
.l-dl-body p { margin: 0; font-size: 13.5px; color: var(--muted); }
.l-dl-go { flex: 0 0 auto; color: var(--cyan); font-weight: 700; font-size: 14px; white-space: nowrap; }
.l-dl-card:hover .l-dl-go { color: var(--text); }

@media (max-width: 640px) {
  .l-dl-grid { grid-template-columns: 1fr; }
  .l-dl-card { padding: 16px 18px; gap: 12px; }
  .l-dl-go { font-size: 13px; }
}

/* ======================================================================
   第 27 节 · 悬空类名补齐（2026-10-06）
   ----------------------------------------------------------------------
   起因：查商业计划书整合时顺手全站扫了一遍，发现 **55/90 页**用到的
   class 在 5 个 CSS 文件里**一个都没有定义**。页面能打开、能读，
   但那一块是完全没样式的裸 div —— 卡片不并排、没边框、没内边距。
   比 404 还难发现：链接是通的，只是丑。

   检测工具：tools/check-dangling-class.js
   判据：**HTML 使用数 vs CSS 定义数**，两个数一比就知道有没有悬空类名。
   （同族经验：.todo-box 10 处用到 0 定义、tech.css 重复副本压制新规则。）

   ⚠️ `.legacy` 是例外，不在这里补：它只是 <main> 的语义标记类。
      实测 nav 是 `position: sticky`（不是 fixed），首屏内容 top=66、
      导航高 66，不存在遮挡，所以它本来就不需要样式 ——
      已加进检测工具的白名单。**不要给它写空规则，那是在制造第二个假 owner。** */

/* ---------- 38 页 · 支持与赞助卡 ---------- */
.l-support-side-card {
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px; margin: 26px 0; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer;
  text-align: center;
  transition: border-color .18s, background .18s;
}
.l-support-side-card:hover { border-color: var(--cyan); background: var(--surface-2); }
.l-support-side-card .l-line1 { font-size: 17px; font-weight: 700; color: var(--text); }
.l-support-side-card .l-line2 { font-size: 14.5px; color: var(--text-2); }
.l-support-side-card .l-line3 { font-size: 13.5px; color: var(--muted); }

/* ---------- 34 篇 V8 文档页模板 ---------- */
.l-md-container { max-width: 900px; margin: 0 auto; }
.l-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); margin: 22px 0 8px; }
.l-breadcrumb a { color: var(--muted); text-decoration: none; }
.l-breadcrumb a:hover { color: var(--cyan); }
.l-breadcrumb-sep { color: var(--line-hi); }
.l-article-nav {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  margin: 46px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
}
.l-article-nav a { color: var(--cyan); text-decoration: none; font-size: 14.5px; }
.l-article-nav a:hover { color: var(--text); }

/* ---------- 4 页 · V8 文档卡 ---------- */
.l-v8-card-link { display: block; text-decoration: none; color: inherit; }
.l-v8-article-num {
  display: inline-block; margin-bottom: 8px; padding: 2px 9px;
  border-radius: 999px; background: var(--cyan-dim);
  border: 1px solid rgba(34, 211, 238, .25);
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
}
.l-v8-article-date, .l-v8-article-author, .l-v8-article-words { color: var(--muted); font-size: 13px; }
.l-v8-article-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.l-v8-article-btn {
  display: inline-block; margin-top: 12px; color: var(--cyan);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.l-v8-article-btn:hover { color: var(--text); }
.l-v8-card-link:hover .l-v8-article-title a { color: var(--cyan); }

/* ---------- v8-brain.html ---------- */
.l-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.l-use-cases { margin-top: 26px; }
.l-case-list { display: grid; gap: 12px; margin-top: 16px; }
.l-case-list > li {
  padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.l-cross-link {
  display: inline-block; margin-top: 14px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--r);
  color: var(--cyan); text-decoration: none; font-size: 14.5px;
}
.l-cross-link:hover { border-color: var(--cyan); color: var(--text); }

/* ---------- 零星几页 ---------- */
.l-tab-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
/* `.ol` = ordered list：3 篇文章页用它写「照这几步做」的步骤清单，
   但一直没定义，实际渲染成圆点 —— 步骤感丢了。类名已经说明了本意。 */
.ol { list-style: decimal; padding-left: 1.6em; margin: 0 0 1.4em; }
.ol li { margin-bottom: 8px; color: var(--text-2); }
.ol li::marker { color: var(--cyan); font-family: var(--mono); font-weight: 700; }
.l-article-card, .l-articles-grid > * { list-style: none; }
.l-articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
/* v8-card.html：图标 + 文字的横向小卡 */
.l-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.l-head .l-icon {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--cyan-dim); border: 1px solid rgba(34, 211, 238, .25);
  font-size: 19px;
}
.l-head h4 { color: var(--text); font-size: 16px; margin: 0 0 4px; }
.l-head p { color: var(--text-2); font-size: 14.5px; margin: 0; }
.l-cta-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin: 34px 0; padding: 22px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.l-cta-bar-title { font-size: 18px; font-weight: 700; color: var(--text); }
.l-cta-bar-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- videos-admin.html（noindex 内部管理页） ----------
   这一页是自带的 JS 管理台，类名不走 l-* 体系，缺 5 个基础样式。
   优先级低但一次补齐，省得以后有人改这一页又踩一遍。 */
.adm { padding-top: 22px; }
.adm__panel {
  padding: 20px 22px; margin-bottom: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.adm__panel .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.adm__panel .st { color: var(--muted); font-size: 13.5px; }
.fld { display: block; margin-bottom: 12px; color: var(--text-2); font-size: 14px; }
.fld input, .fld select, .fld textarea {
  display: block; width: 100%; margin-top: 6px; padding: 9px 12px;
  background: var(--bg-0); color: var(--text);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 14.5px;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--cyan); }

/* ======================================================================
   第 28 节 · 产品 02「AI Agent Minihub」通用平台页
   ----------------------------------------------------------------------
   ⚠️ 定位边界（2026-10-06 爸爸明确要求）：
      **AI Agent Minihub 是通用平台基座；JSTAI 律师助手是跑在这个基座上的
      一个垂直工作流（产品 04）。两者不是同一个东西，页面上不许混着说。**
      旧版本页（律所版项目说明文档）把 Minihub 直接写成"专为律师事务所打造"，
      已在这一轮拆开。 */

.l-container-narrow { max-width: 1000px; margin: 0 auto; }

/* 五层架构列表的容器（原来跟着旧律所版一起没定义）
   ⚠️ hero 按钮行不要在这里另起一条 —— legacy.css:244 已有
   `.l-hero-ctas, .l-hero-actions` 的 flex 组，页面直接用那一个即可，
   同一个概念只能有一个 owner。 */
.l-arch-list { display: grid; gap: 4px; margin: 26px 0 0; }

/* 联系卡（产品 02 平台页） */
.l-contact-card {
  margin: 26px 0 0; padding: 30px 32px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.l-contact-card h3 { font-size: 21px; color: var(--text); margin: 0 0 6px; }
.l-contact-sub { color: var(--text-2); font-size: 14.5px; margin: 0 0 22px; }
.l-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.l-contact-item h4 { font-size: 15.5px; color: var(--text); margin: 0 0 10px; }
.l-contact-item ul { margin: 0; padding-left: 1.15em; color: var(--text-2); font-size: 14.5px; }
.l-contact-item li { margin-bottom: 6px; }
.l-contact-person { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 26px 0 8px; padding-top: 22px; border-top: 1px solid var(--line); }
.l-phone { font-family: var(--mono); color: var(--cyan); font-size: 16px; }

/* 底部常驻下载条 */
.l-download-bar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: 12px 20px; margin-top: 40px;
  background: rgba(5, 7, 13, .92); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.l-dl-text { color: var(--text); font-size: 14.5px; font-weight: 600; }
.l-dl-size { color: var(--muted); font-size: 13px; margin-left: auto; }
.l-download-bar .l-dl-btn { margin-left: 0; }
@media (max-width: 640px) {
  .l-dl-size { margin-left: 0; width: 100%; }
  .l-contact-card { padding: 22px 20px; }
}

/* 平台定位：三层结构（用户 → 网关 → 模型） */
.l-pos { display: grid; gap: 14px; margin: 26px 0 0; }
.l-pos-row {
  display: grid; grid-template-columns: 168px 1fr; gap: 20px; align-items: center;
  padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.l-pos-row--mid { border-color: var(--line-hi); background: var(--surface-2); }
.l-pos-tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--cyan-dim); border: 1px solid rgba(34, 211, 238, .25);
  color: var(--cyan); font-size: 13px; font-family: var(--mono); text-align: center;
}
.l-pos-t { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.l-pos-d { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* 市场数据条 */
.l-mkt { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 26px 0 0; }
.l-mkt-cell { padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-mkt-n { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--cyan); font-family: var(--mono); }
.l-mkt-l { color: var(--text-2); font-size: 14px; margin-top: 8px; }
.l-mkt-note { color: var(--muted); font-size: 13.5px; margin-top: 18px; }

/* 四大痛点 */
.l-pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; }
.l-pain-i { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-pain-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--cyan-dim); border: 1px solid rgba(34, 211, 238, .25); color: var(--cyan); font-family: var(--mono); font-size: 14px; font-weight: 700; }
.l-pain-t { font-size: 17px; font-weight: 700; color: var(--text); margin: 14px 0 10px; }
.l-pain-i ul { margin: 0; padding-left: 1.15em; color: var(--text-2); font-size: 14.5px; }
.l-pain-i li { margin-bottom: 7px; }
.l-pain-i li b { color: var(--text); }

/* 五大能力 */
.l-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 26px 0 0; }
.l-cap { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-cap-ic { font-size: 24px; margin-bottom: 10px; }
.l-cap-t { font-size: 16.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.l-cap-d { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* 五层架构（已有 .l-arch-* 复用；这里只加"技能层高亮"） */
.l-arch-item--skill { border-color: var(--line-hi); background: var(--surface-2); }
.l-arch-item--skill .l-arch-num { background: var(--cyan); color: #06121a; border-color: var(--cyan); }

/* ★ 核心论点：一个基座，很多专业工作流 */
.l-base-map { display: grid; gap: 16px; margin: 28px 0 0; }
.l-base-wfs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.l-base-wf {
  display: block; padding: 18px 20px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.l-base-wf:hover { border-color: var(--cyan); }
.l-base-wf-t { color: var(--text); font-weight: 700; font-size: 15.5px; margin-bottom: 5px; }
.l-base-wf-d { color: var(--muted); font-size: 13.5px; }
.l-base {
  padding: 26px 28px; text-align: center;
  background: linear-gradient(180deg, rgba(34, 211, 238, .10), rgba(34, 211, 238, .03));
  border: 1px solid var(--cyan); border-radius: var(--r-lg);
}
.l-base-t { font-size: 20px; font-weight: 800; color: var(--text); }
.l-base-d { color: var(--text-2); font-size: 14.5px; margin: 8px 0 0; }
.l-base-arrow { text-align: center; color: var(--cyan); font-size: 20px; line-height: 1; }
.l-base-cap { color: var(--muted); font-size: 13.5px; text-align: center; margin-top: 4px; }

/* 竞争格局 2×2 */
.l-quad { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 26px 0 0; }
.l-quad-c {
  padding: 20px 22px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.l-quad-c--us { border-color: var(--cyan); background: linear-gradient(180deg, rgba(34, 211, 238, .10), rgba(34, 211, 238, .03)); }
.l-quad-ax { font-family: var(--mono); font-size: 12.5px; color: var(--muted); margin-bottom: 8px; }
.l-quad-t { font-size: 16px; font-weight: 700; color: var(--text); }
.l-quad-t .l-badge {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px;
  background: var(--cyan); color: #06121a; font-size: 11.5px; font-weight: 700;
}
.l-quad-d { color: var(--text-2); font-size: 14px; margin: 8px 0 0; }
.l-quad-axis { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; }
.l-quad-y { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; color: var(--muted); font-size: 12.5px; }

/* 三层市场（开发层 / 应用层 / 平台层） */
.l-tiers3 { display: grid; gap: 12px; margin: 24px 0 0; }
.l-tier3 { display: grid; grid-template-columns: 130px 190px 1fr; gap: 18px; align-items: baseline; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-tier3--us { border-color: var(--cyan); background: var(--surface-2); }
.l-tier3-k { font-family: var(--mono); font-size: 13px; color: var(--cyan); }
.l-tier3-w { color: var(--text); font-weight: 700; font-size: 15px; }
.l-tier3-d { color: var(--text-2); font-size: 14.5px; }

/* 差异化优势 */
.l-diffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin: 26px 0 0; }
.l-diff { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-diff-t { font-size: 16.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.l-diff-d { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* 商业模式三档 */
.l-biz { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 26px 0 0; }
.l-biz-c { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-biz-c--mid { border-color: var(--line-hi); background: var(--surface-2); }
.l-biz-c--hot { border-color: var(--cyan); }
.l-biz-n { font-size: 15px; font-weight: 700; color: var(--text); }
.l-biz-price { font-size: 13.5px; color: var(--muted); margin: 6px 0 12px; }
.l-biz-c ul { margin: 0; padding-left: 1.15em; color: var(--text-2); font-size: 14.5px; }
.l-biz-c li { margin-bottom: 6px; }
.l-biz-flag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--cyan-dim); border: 1px solid rgba(34, 211, 238, .25); color: var(--cyan); font-size: 11.5px; }

.l-eco { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 20px 0 0; }
.l-eco-c { padding: 20px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.l-eco-t { font-size: 15.5px; font-weight: 700; color: var(--text); margin-bottom: 7px; }
.l-eco-d { color: var(--text-2); font-size: 14.5px; margin: 0; }

/* 边界提示条：把「平台」和「某个垂直工作流」分开说清楚 */
.l-boundary {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  margin: 22px 0 0; padding: 20px 24px;
  background: var(--surface); border: 1px solid var(--line-hi);
  border-left: 3px solid var(--cyan); border-radius: var(--r);
}
.l-boundary-ic { font-size: 22px; }
.l-boundary-t { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.l-boundary-d { color: var(--text-2); font-size: 14.5px; margin: 0 0 10px; }

@media (max-width: 860px) {
  .l-pos-row { grid-template-columns: 1fr; gap: 12px; }
  .l-tier3 { grid-template-columns: 1fr; gap: 6px; }
  .l-quad { grid-template-columns: 1fr; }
  .l-quad-axis { display: block; }
  .l-quad-y { writing-mode: horizontal-tb; transform: none; margin-bottom: 10px; text-align: left; }
}
@media (max-width: 640px) {
  .l-mkt-n { font-size: 27px; }
  .l-base { padding: 20px 18px; }
  .l-boundary { grid-template-columns: 1fr; }
}