@charset "UTF-8";
/*
 * sandboxie-tools global.css — Sandboxie 品牌化改版
 * ---------------------------------------------------------------
 * 主题：以 logo.png 为基准。实测 logo 是"沙箱"图形：黄色沙堆+桶身 #F8D000
 *       （占高饱和像素 54.2%）、蓝色桶沿 #0070F0（29.2%）、紫色沙铲（7.2%）。
 *       交互主色取桶沿蓝（白字可读、且是 logo 第二构成色）；
 *       品牌黄用于 hero 底色与强调，两色都来自 logo，零默认蓝。
 *
 * 关键调整（对应 12 条需求）：
 *   需求4  主题色 = 沙箱蓝 + 黄（取自 logo，非默认配色）
 *   需求5  favicon = logo.png
 *   需求6  H1 正下方低权重署名胶囊（.hero-sig + .sig-pulse 呼吸灯）
 *   需求7  任何文字 hover 一律不加下划线
 *   需求8  文段卡片化 / 列表化（.feature-grid / .bullet-list / .prose-card）
 *   需求9  hero 品牌位改用 logo.png（.hero-icon img），尺寸沿用原 80×80
 *   需求10 全站统一默认字体（含 button/input 继承）
 *   需求11 有目录的页面目录左侧悬挂（.l1-toc sticky 左挂）
 *   需求3  首页/下载页 hero 左文右图（.hero-grid），窄屏上文下图
 *   需求1/2 单栏导航 + 最左 logo.png + Sandboxie 文字组合，点击回首页
 */

:root {
  /* ── Sandboxie 品牌色（实测自 logo.png）────────────────────── */
  --sb-blue:      #0070F0;   /* logo 桶沿蓝 → 交互主色 */
  --sb-blue-dk:   #0057C2;
  --sb-blue-lt:   #3D93FF;
  --sb-blue-dp:   #0048A6;
  --sb-yellow:    #FFD21E;   /* logo 沙堆黄（占比最大）*/
  --sb-yellow-dk: #E8B800;

  --brand:        var(--sb-blue);
  --brand-dk:     var(--sb-blue-dk);
  --brand-hi:     var(--sb-blue-lt);
  --brand-soft:   #EAF3FF;
  --brand-shadow: rgba(0, 112, 240, .26);

  --cta-grad:   linear-gradient(135deg, var(--sb-blue-lt) 0%, var(--sb-blue) 55%, var(--sb-blue-dp) 100%);
  --cta-grad-h: linear-gradient(135deg, #2E86F0 0%, #00489E 100%);
  --hero-bg:    linear-gradient(180deg, #EFF6FF 0%, #FFFCF0 62%, #FFFFFF 100%);

  /* ── 兼容层：公共模块历史选择器仍用 --blue* 命名，此处整体换肤 ── */
  --blue:    var(--brand);
  --blue-dk: var(--brand-dk);
  --blue-50: var(--brand-soft);

  --white:   #fff;
  --green:   #16a34a;
  --amber:   #f59e0b;
  --red:     #dc2626;
  --gray-50: #fafafa;
  --gray-100:#f4f4f5;
  --gray-200:#e8e8ec;
  --gray-400:#9ca3af;
  --gray-600:#52525b;
  --gray-700:#3f3f46;
  --gray-900:#18181b;

  --radius:    10px;
  --shadow:    0 1px 3px rgba(24,24,27,.07), 0 1px 2px rgba(24,24,27,.05);
  --shadow-md: 0 8px 24px rgba(24,24,27,.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 84px; }

/* 需求10：全站统一默认字体（无 monospace / 无装饰字体） */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gray-700);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  /* 超窄屏（<=375px）下 MD5/URL/英文长串不可断行会撑破视口，全局兜底 */
  overflow-wrap: break-word;
}

/* 卡片/网格内的长串（MD5、.NET Framework、URL）需要真正可断，
   否则 grid 项 min-width:auto 会顶破栅格 */
.feature-grid, .hub-grid-v2, .hub-grid, .faq-v2, .l1-layout .main-content { min-width: 0; }
.feature-card, .plain-list li, .num-list li,
.faq-item-v2, .faq-list .faq-item, .entity-card { min-width: 0; }
.feature-card p, .feature-card,
.plain-list li, .num-list li,
.faq-v2 .faq-a, .faq-v2 .faq-q,
.entity-value, .entity-label, .compact-badges {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 需求7：任何文字 hover 一律不加下划线
   权重说明：用 :where(a) 把基础链接规则压到 (0,1,0) ——
   既能压过浏览器默认的 a:-webkit-any-link（下划线 + 蓝紫），
   又不会盖掉 .cta-primary / .hub-card-v2 这类单类名按钮的配色 (0,1,0 同级、后出现者胜)。
   若写成 `a, a:link, a:visited`，权重 (0,1,1) 会反噬所有组件配色（历史踩坑）。 */
:where(a):link, :where(a):visited { color: var(--brand-dk); text-decoration: none; }
a { text-decoration: none; }
a:hover, a:focus, a:active { text-decoration: none; }
a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

/* ── 容器 ── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ═══════════════════════════════════════════════════════════
   主导航（需求1/2：单栏「XMind」，最左 logo.png + 文字 → 首页）
   ═══════════════════════════════════════════════════════════ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0; z-index: 200;
  box-shadow: var(--shadow);
}
.site-header-inner {
  max-width: 1200px; margin: 0 auto; height: 60px; padding: 0 20px;
  display: flex; align-items: center; gap: 28px;
}
.site-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; text-decoration: none; }
.site-logo img { height: 32px; width: 32px; object-fit: contain; display: block; }
.site-logo span { font-size: 19px; font-weight: 700; color: var(--gray-900); letter-spacing: .3px; white-space: nowrap; }
.site-logo:hover span { color: var(--brand); }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  padding: 8px 16px; border-radius: 8px; font-size: 15px; font-weight: 500;
  color: var(--gray-600); text-decoration: none;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--brand-soft); color: var(--brand-dk); }
.site-nav a.active { background: var(--brand); color: #fff; }

/* ── 面包屑 ── */
.breadcrumb { padding: 12px 20px; font-size: 13px; color: var(--gray-600); }
.breadcrumb a { color: var(--gray-600); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb span { margin: 0 6px; color: var(--gray-400); }
.breadcrumb + .section { padding-top: 0; }

/* ═══════════════════════════════════════════════════════════
   Hero（需求3/6/9：logo.png 品牌位 + 署名胶囊 + 可选左文右图截图）
   ═══════════════════════════════════════════════════════════ */
.hero-v2 { background: var(--hero-bg); padding: 52px 0 40px; text-align: center; border-bottom: 1px solid #FDEDE6; }
.hero-v2 .container { max-width: 1080px; margin: 0 auto; }

/* 需求9：品牌位用 logo.png，尺寸与原来的 80×80 矢量图标一致 */
.hero-v2 .hero-icon { display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.hero-v2 .hero-icon img {
  width: 80px; height: 80px; object-fit: contain; display: block;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(255, 80, 0, .20);
}
.hero-v2 h1 { margin: 0 0 14px; font-size: 34px; line-height: 1.32; font-weight: 800; color: var(--gray-900); letter-spacing: -.2px; }
.hero-v2 .hero-sub { margin: 0 auto 26px; max-width: 720px; font-size: 16px; line-height: 1.78; color: var(--gray-600); }

/* 需求6：H1 正下方低权重署名胶囊（脉冲呼吸灯），与版本/大小/MD5 分离 */
.hero-sig {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 1; font-weight: 400;
  color: var(--brand-dk);
  background: rgba(255, 80, 0, .07);
  border: 1px solid rgba(255, 80, 0, .18);
  border-radius: 999px; padding: 7px 15px;
  margin: 0 auto 18px;
  letter-spacing: .2px;
}
.sig-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.sig-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--brand); animation: sig-breathe 2.2s ease-out infinite;
}
@keyframes sig-breathe {
  0%, 100% { transform: scale(1);   opacity: .55; }
  60%      { transform: scale(2.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .sig-pulse::after { animation: none; } }

/* 需求3：左文右图（页面缩窄时上文下图） */
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; text-align: left; }
.hero-text { text-align: left; min-width: 0; }
.hero-split .hero-icon { justify-content: flex-start; }
.hero-split .hero-sig  { margin: 0 0 16px; }
.hero-split .hero-sub  { margin: 0 0 22px; max-width: 100%; }
.hero-split .cta-row,
.hero-split .trust-row,
.hero-split .cta-meta  { justify-content: flex-start; }
.hero-shot { min-width: 0; }
.hero-shot img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  border: 1px solid #F3D8CD;
  box-shadow: 0 22px 56px rgba(200, 70, 10, .18), 0 2px 8px rgba(24,24,27,.06);
}

/* ── 按钮 ── */
.cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px;
  background: var(--cta-grad); color: #fff;
  font-size: 17px; font-weight: 600;
  border-radius: 10px; text-decoration: none;
  box-shadow: 0 6px 18px var(--brand-shadow);
  transition: background .15s, transform .15s, box-shadow .15s;
  min-height: 48px; box-sizing: border-box; white-space: nowrap;
}
.cta-primary svg { width: 20px; height: 20px; flex-shrink: 0; }
.cta-primary:hover { background: var(--cta-grad-h); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 24px var(--brand-shadow); }
.cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  background: #fff; color: var(--brand-dk);
  font-size: 16px; font-weight: 500;
  border: 1.5px solid #F0CFC2; border-radius: 10px;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
  min-height: 48px; box-sizing: border-box; white-space: nowrap;
}
.cta-secondary svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-secondary:hover { border-color: var(--brand); color: var(--brand-dk); background: var(--brand-soft); }

/* 旧版 .btn 兼容 */
.btn { display: inline-block; padding: 11px 28px; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; transition: opacity .15s, transform .1s; text-decoration: none; }
.btn:hover { opacity: .92; transform: translateY(-1px); text-decoration: none; }
.btn-primary  { background: var(--cta-grad); color: #fff; }
.btn-secondary { background: #fff; color: var(--brand-dk); }

.hero-v2 .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 24px 0 14px; }
.hero-v2 .cta-meta {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 6px 10px;
  font-size: 13px; line-height: 1.6; color: var(--gray-600); margin: 4px 0 0;
}
/* §2.18 合规三要素胶囊（方式乙：Hero 一行式，文本必须紧贴按钮） */
.cta-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 11px; border-radius: 999px;
  background: rgba(22, 163, 74, .07);
  border: 1px solid rgba(22, 163, 74, .22);
  color: #15803d; font-size: 12.5px; font-weight: 600;
}
.cta-badge::before { content: "✓"; font-weight: 800; }

/* Trust Badge 行（合规三要素之一） */
.trust-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 16px 0 0; }
.trust-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-600); }
.trust-badge svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--green); }

/* ── 通用 section ── */
.section { padding: 36px 0; }
.section-gray { background: var(--gray-50); }
.section-title { font-size: 28px; font-weight: 700; color: var(--gray-900); text-align: center; margin-bottom: 40px; }

/* ═══════════════════════════════════════════════════════════
   需求11：左悬挂目录 —— 具体栅格/卡片样式由 css/layouts/layout_L1.css
   权威定义（该文件在本文件之后引入）。此处只保留跨页通用约束。
   ═══════════════════════════════════════════════════════════ */
.l1-layout .main-content { min-width: 0; }

/* 侧栏（兼容保留） */
.sidebar { position: sticky; top: 84px; }
.sidebar-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.sidebar-card h3 { font-size: 14px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.sidebar-card ul { list-style: none; padding: 0; }
.sidebar-card li { margin-bottom: 8px; }
.sidebar-card a { font-size: 14px; color: var(--gray-600); }
.sidebar-card a:hover { color: var(--brand); }

/* ═══════════════════════════════════════════════════════════
   需求8：文段卡片化 / 结构化（文字内容零改动）
   ═══════════════════════════════════════════════════════════ */
.feature-grid { display: grid; gap: 14px; margin: 14px 0 26px; }
.feature-grid.cols-1 { grid-template-columns: 1fr; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--brand);
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.feature-card:hover { border-color: #F2C9B9; border-left-color: var(--brand); box-shadow: 0 6px 18px rgba(255, 80, 0, .08); transform: translateY(-1px); }
.feature-card p { margin: 0; font-size: 14.5px; line-height: 1.78; color: var(--gray-600); }
.feature-card p + p { margin-top: 8px; }
.feature-card p strong { color: var(--gray-900); font-weight: 700; }

.num-list { list-style: none; counter-reset: n; padding: 0; margin: 14px 0 26px; }
.num-list li {
  position: relative; counter-increment: n;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 14px 18px 14px 52px;
  margin-bottom: 10px; font-size: 14.5px; line-height: 1.75; color: var(--gray-600);
}
.num-list li:last-child { margin-bottom: 0; }
.num-list li::before {
  content: counter(n);
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cta-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.num-list li strong { color: var(--gray-900); font-weight: 700; }

.plain-list { list-style: none; padding: 0; margin: 14px 0 26px; }
.plain-list li {
  position: relative; padding: 11px 16px 11px 34px; margin-bottom: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; font-size: 14.5px; line-height: 1.75; color: var(--gray-600);
}
.plain-list li:last-child { margin-bottom: 0; }
.plain-list li::before {
  content: ""; position: absolute; left: 15px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.plain-list li strong { color: var(--gray-900); font-weight: 700; }

/* ── 正文排版 ── */
.main-content { min-width: 0; }
.main-content h1 { font-size: 32px; font-weight: 800; color: var(--gray-900); margin-bottom: 16px; line-height: 1.3; }
.main-content h2 { font-size: 22px; font-weight: 700; color: var(--gray-900); margin: 38px 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--brand-soft); }
.main-content h3 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; color: var(--gray-900); }
.main-content h3::before {
  content: ""; display: inline-block; width: 4px; height: 15px;
  background: var(--cta-grad); border-radius: 2px; margin-right: 9px; vertical-align: -2px;
}
.main-content p  { margin-bottom: 14px; font-size: 15.5px; }
.main-content ul, .main-content ol { padding-left: 20px; margin-bottom: 14px; }
.main-content li { margin-bottom: 6px; }
.lead { font-size: 17px; color: var(--gray-600); margin-bottom: 28px !important; }

/* 需求8：正文原生 ul/ol 卡片化（不改文字，只换呈现） */
.main-content > ul:not([class]) { list-style: none; padding: 0; margin: 14px 0 26px; }
.main-content > ul:not([class]) > li {
  position: relative; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 11px 16px 11px 34px; margin-bottom: 8px;
  font-size: 14.5px; line-height: 1.75;
}
.main-content > ul:not([class]) > li:last-child { margin-bottom: 0; }
.main-content > ul:not([class]) > li::before {
  content: ""; position: absolute; left: 15px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.main-content > ul:not([class]) > li > strong { color: var(--gray-900); }

.main-content > ol:not([class]) { list-style: none; counter-reset: m; padding: 0; margin: 14px 0 26px; }
.main-content > ol:not([class]) > li {
  position: relative; counter-increment: m;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 14px 18px 14px 52px;
  margin-bottom: 10px; font-size: 14.5px; line-height: 1.75;
}
.main-content > ol:not([class]) > li:last-child { margin-bottom: 0; }
.main-content > ol:not([class]) > li::before {
  content: counter(m);
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cta-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.main-content code {
  background: var(--brand-soft); color: var(--brand-dk);
  padding: 2px 6px; border-radius: 4px; font-size: 13px;
  font-family: inherit; word-break: break-all;
}

/* ── 卡片网格（Hub） ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.card {
  display: block; background: #fff; border: 1px solid var(--gray-200);
  border-radius: 12px; padding: 24px 20px;
  box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s;
  text-decoration: none; color: inherit;
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
.card-icon { margin-bottom: 14px; width: 56px; height: 56px; }
.card-icon svg { width: 56px; height: 56px; display: block; }
.card h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.card p  { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 12px; }
.card-link { font-size: 13px; color: var(--brand); font-weight: 600; }

.hub-grid-v2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 24px 0 40px; }
.hub-card-v2 {
  background: #fff; border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 24px; text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hub-card-v2:hover { border-color: var(--brand); box-shadow: 0 8px 24px rgba(255, 80, 0, .12); transform: translateY(-2px); color: inherit; }
.hub-card-v2 .card-icon {
  width: 44px; height: 44px; background: var(--brand-soft); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--brand);
}
.hub-card-v2 .card-icon svg { width: 22px; height: 22px; }
.hub-card-v2 h3 { margin: 0 0 8px; font-size: 17px; color: var(--gray-900); }
.hub-card-v2 p { margin: 0 0 12px; font-size: 14px; color: var(--gray-600); line-height: 1.6; }
.hub-card-v2 .card-arrow { font-size: 13px; color: var(--brand); font-weight: 600; }

/* 旧版 hub-grid（兼容） */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.hub-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 20px; transition: box-shadow .15s; }
.hub-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.hub-card h3 { margin: 0 0 8px; font-size: 16px; }
.hub-card h3 a { color: var(--gray-900); }
.hub-card h3 a:hover { color: var(--brand); }
.hub-card p { margin: 0; font-size: 14px; color: var(--gray-600); line-height: 1.6; }

/* ── 表格 ── */
.table-wrap { overflow-x: auto; margin: 16px 0 24px; }
.compare-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 14px; border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden;
}
.compare-table thead { background: var(--brand-soft); }
.compare-table th { padding: 12px 16px; text-align: left; font-weight: 700; color: var(--gray-900); border-bottom: 1px solid #F5D9CD; }
.compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); vertical-align: top; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: #FFFBF9; }

/* ── 标签 ── */
.tag { display: inline-block; padding: 2px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.tag-green  { background: #dcfce7; color: #166534; }
.tag-yellow { background: #fef9c3; color: #854d0e; }
.tag-red    { background: #fee2e2; color: #991b1b; }

/* ── 提示框 / 注意事项 ── */
.tip-box { background: var(--brand-soft); border-left: 4px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 16px; margin: 16px 0; font-size: 14px; }
.notice-card { background: #fffbeb; border-left: 4px solid var(--amber); padding: 16px 20px; border-radius: 0 8px 8px 0; margin: 24px 0; font-size: 14px; line-height: 1.75; color: #78350f; }
.notice-card strong { color: #b45309; }

/* ── 代码块（需求10：默认字体） ── */
.code-block, pre.code-block {
  background: var(--gray-900); color: #e4e4e7;
  border-radius: var(--radius); padding: 16px 20px;
  font-family: inherit; font-size: 13px; line-height: 1.7;
  overflow-x: auto; white-space: pre; margin: 16px 0;
}
code { font-family: inherit; }

/* ── 步骤列表 ── */
.steps-v2 { list-style: none; padding: 0; margin: 16px 0 24px; counter-reset: step; }
.steps-v2 li { position: relative; padding: 16px 18px 16px 56px; margin-bottom: 12px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; counter-increment: step; }
.steps-v2 li::before {
  content: counter(step); position: absolute; left: 16px; top: 16px;
  width: 28px; height: 28px; background: var(--cta-grad); color: #fff;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.steps-v2 li strong { color: var(--gray-900); }
.steps-v2 li code { background: var(--brand-soft); padding: 2px 6px; border-radius: 3px; font-size: 13px; color: var(--brand-dk); font-family: inherit; }

/* ── 实体数据卡片 ── */
.entity-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 24px 28px; margin: 24px 0; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.entity-card h2 { margin: 0 0 16px; font-size: 18px; color: var(--gray-900); border: none; padding: 0; }
.entity-card h2::before { display: none; }
.entity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.entity-grid > div { border-left: 3px solid var(--brand); padding-left: 12px; }
.entity-grid .entity-label { font-size: 12px; color: var(--gray-600); margin-bottom: 4px; }
.entity-grid .entity-value { font-size: 16px; font-weight: 600; color: var(--gray-900); }
/* 需求10：seo_modules.entity_card() 会给长值（MD5）注入 inline font-family:monospace，
   内联样式只能用 !important 覆盖，否则全站字体不统一 */
.entity-grid .entity-value { font-family: inherit !important; }

/* ── 工具列表 / 对比卡 / 排行榜 ── */
.tool-list { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.tool-item { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 18px 20px; }
.tool-item h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.tool-item p  { font-size: 14px; margin-bottom: 8px; }
.tool-item ul { padding-left: 18px; font-size: 14px; }

.tool-compare { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.tool-card { border: 1px solid var(--gray-200); border-radius: 12px; padding: 20px; text-align: center; }
.tool-card.featured { border-color: var(--brand); border-width: 2px; }
.tool-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.tool-card .score { font-size: 28px; font-weight: 800; color: var(--brand); margin: 8px 0; }
.tool-card p { font-size: 13px; color: var(--gray-600); margin-bottom: 10px; }
.tool-card ul { list-style: none; padding: 0; text-align: left; font-size: 13px; }
.tool-card li { padding: 3px 0; border-bottom: 1px solid var(--gray-100); }

.rank-list { display: flex; flex-direction: column; gap: 14px; }
.rank-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px; border: 1px solid var(--gray-200); border-radius: 12px; background: #fff; }
.rank-num { width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; flex-shrink: 0; }
.rank-item:nth-child(1) .rank-num { background: var(--sb-blue); color: #fff; }
.rank-item:nth-child(2) .rank-num { background: #c9c9cf; color: #fff; }
.rank-item:nth-child(3) .rank-num { background: #cd7c3f; color: #fff; }
.rank-body { flex: 1; }
.rank-body h3 { font-size: 16px; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; }
.rank-body p  { font-size: 14px; color: var(--gray-600); }
.rank-score { font-size: 22px; font-weight: 800; color: var(--brand); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════ */
.faq-v2 { background: var(--gray-50); border-radius: 14px; padding: 32px; margin: 32px 0; }
.faq-v2 h2 { margin: 0 0 24px; font-size: 22px; color: var(--gray-900); border: none; padding: 0; }
.faq-v2 h2::before { display: none; }
.faq-v2 .faq-item-v2 { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 20px 24px; margin-bottom: 12px; }
.faq-v2 .faq-item-v2:last-child { margin-bottom: 0; }
.faq-v2 .faq-q { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; font-weight: 700; color: var(--gray-900); margin: 0 0 10px; line-height: 1.5; }
.faq-v2 .faq-q::before {
  content: "Q"; display: inline-block; width: 22px; height: 22px;
  background: var(--cta-grad); color: #fff; border-radius: 6px;
  text-align: center; font-size: 12px; font-weight: 700; line-height: 22px;
  flex-shrink: 0; margin-top: 1px;
}
.faq-v2 .faq-a { margin: 0; padding-left: 30px; font-size: 14.5px; line-height: 1.78; color: var(--gray-600); }

/* 旧版 faq-list（兼容） */
.faq-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.faq-list .faq-item { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; }
.faq-list .faq-item h3 { margin: 0; padding: 14px 18px; background: var(--gray-50); font-size: 15px; color: var(--gray-900); }
.faq-list .faq-item p { padding: 14px 18px; font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   底部转化区
   ═══════════════════════════════════════════════════════════ */
.cta-section-v2 { background: var(--cta-grad); border-radius: 14px; padding: 40px 32px; text-align: center; margin: 40px auto; color: #fff; max-width: 1100px; }
.cta-section-v2 h2 { margin: 0 0 8px; font-size: 24px; color: #fff; border: none; padding: 0; }
.cta-section-v2 h2::before { display: none; }
.cta-section-v2 p { margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,.9); }
.cta-section-v2 .cta-primary { background: #fff; color: var(--brand-dk); box-shadow: 0 4px 16px rgba(0,0,0,.16); }
.cta-section-v2 .cta-primary:hover { background: #FFF6F2; color: var(--brand-dk); }

/* ── 元数据条（兼容保留） ── */
.meta-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); margin: 16px 0 24px; font-size: 13px; color: var(--gray-600); }
.meta-bar span { display: inline-flex; align-items: center; gap: 4px; }
.meta-bar svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   下载组件（合规三要素 §2.18）
   ═══════════════════════════════════════════════════════════ */
.dl-hero { background: var(--hero-bg); padding: 40px 24px; border-radius: 12px; margin: 24px 0; text-align: center; }
.dl-hero h2 { margin: 0 0 12px; font-size: 22px; color: var(--gray-900); }
.dl-btn { display: inline-block; padding: 14px 36px; background: var(--cta-grad); color: #fff; font-size: 17px; font-weight: 600; border-radius: 10px; text-decoration: none; margin: 8px 0; box-shadow: 0 6px 18px var(--brand-shadow); }
.dl-btn:hover { background: var(--cta-grad-h); color: #fff; }
.dl-meta { font-size: 13px; color: var(--gray-600); margin: 8px 0; }
.dl-alt { margin-top: 16px; font-size: 13px; color: var(--gray-400); }
.dl-alt a { color: var(--brand-dk); }

.duba-trust-panel {
  background: linear-gradient(180deg, #fff, #FFFDFC);
  border: 1px solid var(--gray-200); border-radius: 12px;
  padding: 20px 24px; max-width: 720px; width: 100%;
  margin: 0 auto 24px; box-shadow: 0 4px 20px rgba(238,61,27,.06);
  text-align: left;
}
.trust-panel-brand-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--gray-600); margin-bottom: 14px; }
.trust-panel-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px 24px; font-size: 17px; font-weight: 700; color: #fff !important; border-radius: 10px; text-decoration: none; transition: all .2s; margin-bottom: 12px; border: none; outline: none; cursor: pointer; }
.trust-panel-btn svg { width: 22px; height: 22px; margin-right: 10px; fill: currentColor; flex-shrink: 0; }
.trust-btn-blue   { background: var(--cta-grad); }
.trust-btn-pink   { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.trust-btn-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.trust-btn-green  { background: linear-gradient(135deg, #16a34a, #059669); }
.trust-panel-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px var(--brand-shadow); }
.trust-panel-md5 { font-size: 11px; color: var(--gray-600); text-align: center; margin-bottom: 12px; line-height: 1.5; word-break: break-all; }
.trust-panel-md5 code { background: var(--brand-soft); padding: 2px 6px; border-radius: 3px; color: var(--brand-dk); font-size: 11px; font-family: inherit; }
.trust-md5-copy, .trust-md5-help { color: var(--brand-dk); font-weight: 700; margin-left: 6px; }
.trust-panel-badges { display: flex; gap: 16px; justify-content: center; font-size: 12px; color: var(--gray-600); }
.trust-panel-badges span { display: inline-flex; align-items: center; gap: 4px; }
.trust-panel-badges svg { width: 14px; height: 14px; color: var(--green); fill: none; }

/* compact_download_btn：内容页文末紧凑合规下载行（方式丙） */
.compact-download-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 24px 0 8px; padding: 16px 18px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; }
.compact-dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; font-size: 15px; font-weight: 600; color: #fff !important; border-radius: 10px; text-decoration: none; white-space: nowrap; transition: all .2s; border: none; cursor: pointer; flex-shrink: 0; }
.compact-dl-btn svg { width: 18px; height: 18px; flex-shrink: 0; fill: currentColor; }
.compact-btn-blue   { background: var(--cta-grad); }
.compact-btn-pink   { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.compact-btn-orange { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.compact-btn-green  { background: linear-gradient(135deg, #16a34a, #059669); }
.compact-dl-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--brand-shadow); opacity: .96; }
.compact-badges { font-size: 12.5px; color: var(--gray-600); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   页脚
   ═══════════════════════════════════════════════════════════ */
.footer { background: var(--gray-900); color: #a1a1aa; padding: 48px 0 24px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px; margin-bottom: 32px; }
.footer-col h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 14px; color: #a1a1aa; }
.footer-col a:hover { color: var(--sb-blue); }
.footer-bottom { border-top: 1px solid #3f3f46; padding-top: 20px; font-size: 13px; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   T1 单栏页正文（首页/下载页：正文在 .t1-layout > .section > .container 内）
   ═══════════════════════════════════════════════════════════ */
/* 需求3：T1 内容区放宽到 1140px，左文右图 Hero 不被压扁
   （高于 layout_T1.css 的 .t1-layout{max-width:980px}，故用 body 提升特异性）*/
body .t1-layout { max-width: 1140px; }
.t1-layout .section { padding: 34px 0; }
.t1-layout .section > .container { max-width: 1100px; }

.t1-layout h2 {
  font-size: 22px; font-weight: 700; color: var(--gray-900);
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--brand-soft);
}
.t1-layout h3 { font-size: 17px; font-weight: 700; margin: 24px 0 10px; color: var(--gray-900); }
.t1-layout h3::before {
  content: ""; display: inline-block; width: 4px; height: 15px;
  background: var(--cta-grad); border-radius: 2px; margin-right: 9px; vertical-align: -2px;
}
.t1-layout p { margin-bottom: 14px; font-size: 15.5px; line-height: 1.78; }

/* 需求8：T1 正文原生 ul/ol 卡片化（文字零改动） */
.t1-layout .container > ul:not([class]),
.t1-layout .container > ol:not([class]) { list-style: none; padding: 0; margin: 14px 0 26px; }
.t1-layout .container > ul:not([class]) > li {
  position: relative; background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 11px 16px 11px 34px; margin-bottom: 8px;
  font-size: 14.5px; line-height: 1.75;
}
.t1-layout .container > ul:not([class]) > li:last-child { margin-bottom: 0; }
.t1-layout .container > ul:not([class]) > li::before {
  content: ""; position: absolute; left: 15px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.t1-layout .container > ul:not([class]) > li > strong { color: var(--gray-900); }

.t1-layout .container > ol:not([class]) { counter-reset: t1m; }
.t1-layout .container > ol:not([class]) > li {
  position: relative; counter-increment: t1m;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 14px 18px 14px 52px;
  margin-bottom: 10px; font-size: 14.5px; line-height: 1.75;
}
.t1-layout .container > ol:not([class]) > li:last-child { margin-bottom: 0; }
.t1-layout .container > ol:not([class]) > li::before {
  content: counter(t1m);
  position: absolute; left: 14px; top: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cta-grad); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.t1-layout code {
  background: var(--brand-soft); color: var(--brand-dk);
  padding: 2px 6px; border-radius: 4px; font-size: 13px;
  font-family: inherit; word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════════════ */
/* 需求3：窄屏 Hero 上文下图 */
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .hero-text { text-align: center; }
  .hero-split .hero-icon,
  .hero-split .cta-row,
  .hero-split .trust-row,
  .hero-split .cta-meta { justify-content: center; }
  .hero-split .hero-sig { margin: 0 auto 16px; }
  .hero-split .hero-sub { margin: 0 auto 22px; }
  .hero-shot img { max-width: 100%; }
}

@media (max-width: 768px) {
  .site-header-inner { gap: 12px; padding: 0 12px; height: 56px; }
  .site-logo img { height: 28px; width: 28px; }
  .site-logo span { font-size: 17px; }
  .site-nav a { padding: 6px 11px; font-size: 14px; }
  .hero-v2 { padding: 36px 0 30px; }
  .hero-v2 h1 { font-size: 24px; }
  .hero-v2 .hero-sub { font-size: 14.5px; }
  .hero-v2 .hero-icon img { width: 64px; height: 64px; border-radius: 16px; }
  .hero-v2 .cta-row { flex-direction: column; align-items: stretch; }
  /* 窄屏按钮文案允许换行：按钮标签含版本号+体积，nowrap 会撑破视口 */
  .cta-primary, .cta-secondary {
    width: 100%; max-width: 340px; justify-content: center;
    min-height: 48px; margin: 0 auto;
    white-space: normal; text-align: center; line-height: 1.4;
    padding: 13px 20px; height: auto;
  }
  .hub-grid-v2 { grid-template-columns: 1fr; gap: 12px; }
  .feature-grid.cols-2, .feature-grid.cols-3 { grid-template-columns: 1fr; }
  .entity-grid { grid-template-columns: 1fr 1fr; }
  .faq-v2 { padding: 20px; }
  .cta-section-v2 { padding: 28px 20px; }
  .cta-section-v2 h2 { font-size: 20px; }
  .main-content h1 { font-size: 24px; }
  .main-content h2 { font-size: 19px; }
  .section-title { font-size: 22px; }
  .compact-download-row { flex-direction: column; align-items: stretch; }
  .compact-dl-btn { width: 100%; min-height: 44px; }
  .compact-badges { text-align: center; }
  .duba-trust-panel { padding: 16px; margin: 16px auto; }
  .trust-panel-brand-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .trust-panel-badges { flex-direction: column; align-items: center; gap: 8px; }
}

@media (max-width: 560px) {
  .site-logo img { height: 26px; width: 26px; }
  .site-logo span { font-size: 16px; }
  .site-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .site-nav a { white-space: nowrap; flex-shrink: 0; padding: 6px 9px; font-size: 13px; }
  .main-content > ol:not([class]) > li { padding-left: 46px; }
  .t1-layout .section { padding: 24px 0; }
  .t1-layout .container > ol:not([class]) > li { padding-left: 46px; }
}

/* 需求9：hero 品牌位尺寸「保持大小不变」。
   本站原 .hero-v2 .hero-icon 为 80×80（css/global.css:377），而共享基线里
   .hero-v2 .hero-icon img 是 64×64 —— 不覆盖的话 logo 会被压小，故显式锁 80×80。 */
.hero-v2 .hero-icon img { width: 80px; height: 80px; border-radius: 16px; object-fit: contain; }
@media (max-width: 768px) {
  .hero-v2 .hero-icon img { width: 64px; height: 64px; }
}

/* 需求10：button/input 不继承 body 字体 */
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; }

/* 需求8：长段落 bullet 化后的卡片列表 + 按 H2 分节的卡片 */
.bullet-list { list-style: none; padding: 0; margin: 12px 0 24px; }
.bullet-list li {
  position: relative; padding: 10px 16px 10px 34px; margin-bottom: 8px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: 10px; font-size: 14.5px; line-height: 1.75; color: var(--gray-600);
}
.bullet-list li:last-child { margin-bottom: 0; }
.bullet-list li::before {
  content: ""; position: absolute; left: 15px; top: 19px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
}
.prose-card {
  background: #fff; border: 1px solid var(--gray-200);
  border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0;
  padding: 18px 22px 6px; margin: 0 0 16px; box-shadow: var(--shadow);
}
.prose-card > h2:first-child { margin-top: 0; border-bottom: none; padding-bottom: 0; }

/* 品牌黄用于强调（需求4：两色都取 logo） */
.cta-badge { background: rgba(0,112,240,.07); border-color: rgba(0,112,240,.22); color: var(--sb-blue-dk); }
.hero-v2 { border-bottom: 1px solid #E8F0FB; }

/* ── 需求：合规三要素（√毒霸安全检测 / √MD5公开可验证 / √无恶意广告弹窗）必须在一行 ──
   原 .cta-meta 是 flex-wrap: wrap，说明文字与胶囊会挤成两行。
   现拆成两行结构：说明文字一行（.cta-meta-txt），三枚胶囊一行且强制不换行（.cta-badges）。 */
.hero-v2 .cta-meta {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; margin: 8px 0 0; flex-wrap: nowrap;
}
.hero-split .cta-meta { align-items: flex-start; }
.cta-meta-txt { font-size: 12.5px; line-height: 1.5; color: var(--gray-500); }
.cta-badges {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 8px; max-width: 100%;
}
.cta-badges .cta-badge { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .cta-badges { gap: 5px; }
  .cta-badges .cta-badge { font-size: 11px; padding: 2px 8px; gap: 3px; }
  .cta-meta-txt { font-size: 11.5px; }
}

/* ── 首页/下载页 hero：文字靠左 → 下载按钮与「浏览使用教程」也必须靠左 ──
   原因：`.hero-v2 .cta-row{justify-content:center}` 与 `.hero-split .cta-row{flex-start}`
   权重相同(0,2,0)且位于其后，把 flex-start 覆盖掉了，所以按钮一直是居中的。
   这里用 .hero-v2.hero-split 提到 (0,3,0)，只在桌面端生效；
   ≤940px 单列时文字居中、按钮也居中，由下方 @media 统一处理。 */
@media (min-width: 941px) {
  .hero-v2.hero-split .cta-row { justify-content: flex-start; }
}