/* ============================================================
 * mubu-tools / css/theme.css — 幕布站主题层
 *
 * 引入顺序：global.css → layout_*.css → theme.css（最后，覆盖生效）
 *
 * 主题色来源：logo.png 实际取色
 *   主体墨黑 #181818 / 底白 #f8f8f8（单色 logo，无第二品牌色）
 *   → 全站走「墨黑 + 同色系渐变」，不使用默认通用蓝。
 * ============================================================ */

:root {
  /* ── 墨色阶（同色系，取自 logo）── */
  --ink:      #1b1e23;   /* 主墨色：主按钮 / 标题 / active */
  --ink-dk:   #0e1013;   /* 加深：hover */
  --ink-2:    #3a4048;   /* 次级文字 */
  --ink-3:    #6b7280;   /* 辅助文字 */
  --ink-100:  #f2f3f5;   /* 极浅底 */
  --ink-200:  #e6e8ea;   /* 描边 */
  --ink-grad: linear-gradient(135deg, #2b313a 0%, #14171b 100%);  /* 主按钮渐变 */
  --ink-grad-hover: linear-gradient(135deg, #363d47 0%, #1b1f24 100%);

  /* ── 收敛公共层散落的 var(--blue)/var(--brand) 到墨色系 ──
     公共层（seo_global.css）里 .l1-toc / .steps-v2 / .faq-v2 / .card-link
     等大量使用 var(--blue) 与 var(--brand)。此处统一改指向墨色，
     避免逐条重复覆盖。 */
  --blue:    var(--ink);
  --blue-dk: var(--ink-dk);
  --blue-50: var(--ink-100);
  --brand:        var(--ink);
  --brand-dk:     var(--ink-dk);
  --brand-shadow: rgba(27, 30, 35, .22);
  --hero-bg:      linear-gradient(180deg, #f4f5f6 0%, #ffffff 100%);
  --cta-grad:     linear-gradient(135deg, #262b31 0%, #101215 100%);
}

/* ── 逐条覆盖公共层里写死的蓝色字面量 ─────────────────────── */
.hub-card-v2:hover { border-color: var(--ink); box-shadow: 0 8px 24px rgba(27, 30, 35, .10); }
.hub-card-v2 .card-icon { background: var(--ink-100); color: var(--ink); }
.hub-card-v2 .card-arrow { color: var(--ink); }
.hub-card h3 a:hover { color: var(--ink); }
.entity-grid > div { border-left-color: var(--ink); }
.hero { background: linear-gradient(135deg, #2b313a 0%, #1b1e23 50%, #383f49 100%); }
.trust-panel-md5 code { font-family: inherit; }
.cta-secondary { color: var(--ink); border-color: #d5d8dc; }
.cta-secondary:hover { border-color: var(--ink); color: var(--ink-dk); }
.cta-section-v2 .cta-primary { color: var(--ink); }
.cta-section-v2 .cta-primary:hover { background: #eff1f3; color: var(--ink-dk); }
.steps-v2 li code { color: var(--ink); }
.dl-alt a, .trust-md5-copy, .trust-md5-help { color: var(--ink); }
.tip-box { background: var(--ink-100); border-left-color: var(--ink); }
.rank-score, .tool-card .score { color: var(--ink); }
.tool-card.featured { border-color: var(--ink); }

/* 主按钮：墨色同色系渐变 */
.cta-primary { background: var(--ink-grad); }
.cta-primary:hover { background: var(--ink-grad-hover); }
.site-nav a.active { background: var(--ink-grad); color: #fff; }

/* 下载按钮：蓝→墨渐变（下载页主按钮 / 内容页紧凑按钮同源） */
.trust-btn-blue, .compact-btn-blue { background: var(--ink-grad); }
.trust-panel-btn:hover, .compact-dl-btn:hover { box-shadow: 0 6px 16px rgba(27, 30, 35, .22); }

/* ── 10. 全站统一默认字体 ─────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
/* 公共层对长实体值会注入 11px + monospace 的行内样式，此处统一拉回正文族 */
.entity-grid .entity-value {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}
code, kbd, samp, pre, .code-block { font-family: inherit; }
.entity-grid .entity-value code, .steps-v2 li code { font-family: inherit; }
.steps-v2 li code, kbd {
  background: var(--ink-100);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13.5px;
  color: var(--ink);
}

/* ── 7. 所有文字 hover 不加下划线 ─────────────────────────── */
a:hover, a:focus, a:active,
.site-logo:hover, .site-nav a:hover,
.footer-col a:hover, .breadcrumb a:hover, .sidebar-card a:hover,
.l1-toc a:hover, .hub-card-v2:hover, .hub-card h3 a:hover,
.card:hover, .ra-card a:hover,
.trust-md5-copy:hover, .trust-md5-help:hover,
.footer a:hover, .main-content a:hover, .entity-card a:hover {
  text-decoration: none;
}

/* ============================================================
 * 顶部导航：单栏「幕布」（原金山毒霸主站导航已移除）
 * ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ink-200);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 4px rgba(27, 30, 35, .05);
}
.site-header-inner {
  max-width: 1120px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 24px; height: 60px;
}
.site-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.site-logo img {
  width: 32px; height: 32px; object-fit: contain;
  border-radius: 8px; display: block;
}
.site-logo-txt {
  font-size: 18px; font-weight: 700; color: var(--ink);
  letter-spacing: .5px;
}
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a {
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: #4b5563;
  white-space: nowrap; transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--ink-100); color: var(--ink); }

/* ============================================================
 * 6. 更新署名胶囊（H1 正下方，低权重署名行，呼吸灯）
 * ============================================================ */
.update-sign {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px auto 18px; padding: 5px 15px 5px 12px;
  font-size: 12.5px; line-height: 1.5; letter-spacing: .2px;
  color: var(--ink-3);
  background: #fbfbfc;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  animation: sign-breathe 3.2s ease-in-out infinite;
}
.update-sign .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink); flex-shrink: 0;
  animation: pulse-ring 2s cubic-bezier(.4, 0, .6, 1) infinite;
}
.hero-split .update-sign { margin-left: 0; }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(27, 30, 35, .40); }
  70%  { box-shadow: 0 0 0 7px rgba(27, 30, 35, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 30, 35, 0); }
}
@keyframes sign-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(27, 30, 35, 0);     border-color: var(--ink-200); }
  50%      { box-shadow: 0 0 0 4px rgba(27, 30, 35, .05); border-color: #d5d8dc; }
}
@media (prefers-reduced-motion: reduce) {
  .update-sign, .update-sign .pulse { animation: none; }
}

/* ============================================================
 * 3. 首页 Hero：左文右视频，窄屏上文下图
 * ============================================================ */
.hero-split { text-align: left; padding: 48px 0 34px; }
.hero-split .container { max-width: 1120px; }
.hero-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 46px;
  align-items: center;
}
.hero-split .hero-icon { margin: 0 0 16px; }
.hero-split h1 { font-size: 32px; line-height: 1.32; margin: 0 0 12px; }
.hero-split .hero-sub { margin: 0 0 6px; max-width: none; font-size: 15.5px; }
.hero-split .cta-row { justify-content: flex-start; margin: 20px 0 0; }
.hero-split .cta-meta {
  margin: 12px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-3);
}
.hero-media video {
  display: block; width: 100%; height: auto; max-height: 380px;
  aspect-ratio: 1470 / 936;      /* mubu.mp4 实际比例，避免加载前布局跳动 */
  object-fit: contain; background: #0e1013;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(27, 30, 35, .16);
}

/* ============================================================
 * 8. 文段卡片化 / bullet 结构化排版
 * ============================================================ */
.info-card {
  background: #fff; border: 1px solid var(--ink-200); border-radius: 12px;
  padding: 22px 24px; margin: 20px 0;
  box-shadow: 0 1px 3px rgba(27, 30, 35, .04);
}
.info-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  margin: 0 0 12px; padding-left: 11px;
  border-left: 3px solid var(--ink);
  line-height: 1.35;
}
.info-card-title svg { width: 18px; height: 18px; flex-shrink: 0; }
.info-card-lead {
  margin: 0 0 4px; font-size: 15px; line-height: 1.8; color: #475569;
}
.info-card .bullet-list { margin-bottom: 0; }

.bullet-list {
  list-style: none; padding: 0; margin: 14px 0;
  display: grid; gap: 9px;
}
.bullet-list li {
  position: relative; padding-left: 20px;
  font-size: 14.5px; line-height: 1.75; color: #475569;
}
.bullet-list li::before {
  content: ""; position: absolute; left: 3px; top: .68em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink); opacity: .55;
}
.bullet-list li strong { color: var(--ink); font-weight: 700; }
.bullet-list.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 26px; }

/* 段落块：把长文段拆成「小标题 + 说明」的结构化条目 */
.point-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 18px 0;
}
.point-item {
  background: #fbfbfc; border: 1px solid var(--ink-200);
  border-radius: 10px; padding: 16px 18px;
}
.point-item h4 {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  margin: 0 0 6px; line-height: 1.4;
}
.point-item p {
  margin: 0; font-size: 14px; line-height: 1.75; color: #475569;
}

/* ============================================================
 * 移动端
 * ============================================================ */
@media (max-width: 860px) {
  .hero-split { padding: 34px 0 26px; }
  .hero-split-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-split h1 { font-size: 25px; }
  .hero-split .cta-row { justify-content: flex-start; }
  .hero-media video { max-height: none; }
}
@media (max-width: 768px) {
  .site-header-inner { gap: 12px; padding: 0 14px; height: 56px; }
  .site-logo img { width: 28px; height: 28px; }
  .site-logo-txt { font-size: 16px; }
  .site-nav { gap: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .site-nav a { padding: 7px 10px; font-size: 13px; }
  .bullet-list.cols-2 { grid-template-columns: 1fr; }
  .info-card { padding: 18px 16px; }
}