/* ==========================================================================
   tool-overlay.css — MerchAsst Tool Page Style Overlay
   覆盖 style.css 中的旧风格，使非复刻工具页面视觉上与
   globefulfillment 复刻页面（ig-topnav + 深色 Hero）保持统一。
   加载顺序：style.css → tool-overlay.css
   ========================================================================== */

/* ============ 1. 主色调覆盖 ============ */
:root {
  --ma-primary: #4f46e5;
  --ma-primary-dark: #4338ca;
  --ma-primary-light: #eef2ff;
  --ma-bg: #f8fafc;
  --ma-surface-alt: #f1f5f9;
}

/* ============ 2. Body ============ */
body {
  background-color: #f8fafc;
}

/* ============ 3. Hero 区域 — 与首页统一（浅色渐变） ============ */
.ma-tool-header {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(245,158,11,.12), transparent 60%),
    radial-gradient(1000px 600px at 0% 0%, rgba(79,70,229,.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: 60px 0 56px !important;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e2e8f0 !important;
}
.ma-tool-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: none;
  pointer-events: none;
}
.ma-tool-header .ma-container {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
}

/* Breadcrumb */
.ma-tool-header .ma-breadcrumb,
.ma-tool-header .ma-breadcrumb a,
.ma-tool-header .ma-breadcrumb .sep {
  color: #94a3b8 !important;
}
.ma-tool-header .ma-breadcrumb a:hover {
  color: #4f46e5 !important;
}
.ma-tool-header .ma-breadcrumb span:last-child {
  color: #1e293b !important;
}

/* Badge */
.ma-tool-header .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eef2ff !important;
  border: 1px solid rgba(79, 70, 229, 0.2) !important;
  color: #4f46e5 !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
  margin-bottom: 24px !important;
}

/* Title */
.ma-tool-header h1 {
  color: #1e293b !important;
  font-size: clamp(34px, 5vw, 52px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -1px !important;
  margin-bottom: 18px !important;
}

/* Description */
.ma-tool-header p {
  color: #64748b !important;
  font-size: 18px !important;
  max-width: 720px !important;
  margin: 0 auto 32px !important;
  line-height: 1.7 !important;
}

/* Meta badges */
.ma-tool-meta {
  justify-content: center;
}
.ma-tool-meta .m {
  color: #475569 !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
.ma-tool-meta .m i { color: #4f46e5 !important; }
.ma-tool-meta .m b { color: #1e293b !important; }

/* ============ 3b. 各工具页独立 hero（*-hero）— 统一为浅色风格 ============ */
[class$="-hero"] {
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(245,158,11,.12), transparent 60%),
    radial-gradient(1000px 600px at 0% 0%, rgba(79,70,229,.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  padding: 60px 0 56px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
[class$="-hero"]::before {
  background: none !important;
}
[class$="-hero"] h1 {
  color: #1e293b !important;
}
[class$="-hero"] h1 span,
[class$="-hero"] h1 [class*="-grad"] {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
[class$="-hero"] p {
  color: #64748b !important;
}
[class*="-hero-badge"] {
  background: #eef2ff !important;
  border: 1px solid rgba(79, 70, 229, 0.2) !important;
  color: #4f46e5 !important;
  backdrop-filter: none !important;
}
/* ghost 按钮：从白色改为深色边框风格 */
[class*="-btn-ghost"] {
  background: transparent !important;
  color: #475569 !important;
  border: 1px solid #cbd5e1 !important;
}
[class*="-btn-ghost"]:hover {
  background: #eef2ff !important;
  color: #4f46e5 !important;
  border-color: #4f46e5 !important;
}
/* primary 按钮：统一为靛蓝实心 */
[class*="-btn-primary"] {
  background: #4f46e5 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(79,70,229,0.3) !important;
}
[class*="-btn-primary"]:hover {
  background: #4338ca !important;
  box-shadow: 0 6px 20px rgba(79,70,229,0.4) !important;
}

/* ============ 3c. Hero 内部元素 — 修复深色主题遗留的浅色文字 ============ */
/* 所有 *-hero-badge 子元素颜色加深 */
[class*="-hero-badge"] svg { stroke: #4f46e5 !important; }
[class*="-hero-badge"] span:last-child,
[class*="-hero-badge"] span,
[class*="-hero-badge"] > *:not(.bi):not([class*="mark"]):not(svg) {
  color: #4f46e5 !important;
}
[class*="-hero-badge"] [class*="-badge-emoji"] {
  color: inherit !important;
}

/* Hero 段落文字：从 rgba(255,255,255,0.78) 改为深色 */
[class$="-hero"] p {
  color: #64748b !important;
}

/* Hero 统计数字与标签 */
[class*="-hero-stat"] {
  color: #1e293b !important;
}
[class*="-hero-stat"] .num,
[class*="-hero-stat"] [class*="-num"] {
  color: #4f46e5 !important;
  background: none !important;
  -webkit-text-fill-color: #4f46e5 !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
[class*="-hero-stat"] .lbl,
[class*="-hero-stat"] [class*="-lbl"] {
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Hero 内部分隔线：从白色透明改为浅灰 */
[class*="-hero-divider"] {
  background: #e2e8f0 !important;
}

/* Hero 中任何遗留的白色半透明文字（通用兜底） */
[class$="-hero"] {
  color: #475569;
}
[class$="-hero"] > * {
  color: inherit;
}

/* ============ 4. Section 样式 ============ */
.ma-section {
  padding: 80px 0;
  background: #fff;
}
.ma-section-sm {
  padding: 56px 0;
  background: #f8fafc;
}
.ma-section:nth-of-type(even) {
  background: #fff;
}

/* Section headers */
.section-eyebrow {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.08) !important;
  border: 1px solid rgba(79, 70, 229, 0.2);
}
.section-title {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
}
.section-subtitle {
  font-size: 16px !important;
  color: #475569 !important;
}

/* ============ 5. 表单和按钮 ============ */
.ma-input:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

.ma-tabs button.active {
  color: #4f46e5 !important;
}

/* Primary button */
.ma-btn-primary,
.btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
  color: #fff !important;
}
.ma-btn-primary:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #4338ca, #6366f1) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4) !important;
}

/* ============ 6. 结果面板 ============ */
.ma-result-row .v.primary { color: #4f46e5 !important; }
.ma-result-row .v.success { color: #10b981 !important; }
.ma-result-row .v.danger { color: #ef4444 !important; font-weight: 700; }
.ma-result .panel-result {
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 100%) !important;
}

/* ============ 7. Footer (light, unified with homepage) ============ */
/* 工具页 footer 已与首页统一为浅色风格，背景/颜色由 style.css 中的
   .ma-footer 规则控制，此处不再用 !important 覆盖深色背景。 */

/* ============ 10. 链接和强调色 ============ */
a { color: #4f46e5; }
a:hover { color: #4338ca; }
::selection { background: rgba(79, 70, 229, 0.18); }

/* ============ 11. 工具区域容器 ============ */
.ma-tool-wrap .ma-container {
  max-width: 1200px;
}

/* ============ 12. 面板样式 ============ */
.ma-panel {
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(10, 25, 47, 0.06) !important;
  border: 1px solid #e8eef5 !important;
}
.ma-panel-hd {
  border-bottom: 2px solid #f1f5f9 !important;
}
.ma-panel-hd h3 {
  color: #1e293b !important;
}

/* ============ 13. 响应式 ============ */
@media (max-width: 768px) {
  .ma-tool-header {
    padding: 48px 0 40px !important;
  }
  .ma-tool-header h1 {
    font-size: 32px !important;
  }
  .ma-tool-header p {
    font-size: 16px !important;
  }
  .ma-section, .ma-section-sm {
    padding: 48px 0;
  }
  .section-title {
    font-size: 28px !important;
  }
}

/* ==========================================================================
   14. 深色模块浅色化（仅改颜色，统一浅色风格）
   覆盖各工具页 <style> 中遗留的深色背景模块。
   由于内联 <style> 在 tool-overlay.css 之后加载，使用 !important 确保生效。
   ========================================================================== */

/* 14a. 移除深色模块的 ::before 叠加层（深色径向渐变光晕） */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)::before {
  background: none !important;
  content: none !important;
}

/* 14b. CTA 行动号召区 + Benefits 优势区 — 深色渐变 → 浅色靛蓝渐变 */
.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  color: #1e293b !important;
}

/* 14c. 结果展示卡/面板 — 深色渐变 → 浅蓝渐变（与 .panel-result 一致） */
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card, .bh-clock-card {
  background: linear-gradient(160deg, #ffffff 0%, #eef2ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  color: #1e293b !important;
}

/* 14d. 公式说明区 + How-to 使用步骤 — 深色纯色 → 浅灰 */
.stock-formula, .price-formula, .ltv-formula, .qr-howto {
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

/* 14e. 表头 thead th — 深色 → 浅灰 */
.bh-table thead th, .ads-results-table th, .cc-table thead th,
.ig-inv-table th, .hts-table thead th {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  border-bottom: 2px solid #e2e8f0 !important;
}

/* 14f. Toast 提示 — 深色 → 品牌靛蓝（保持白字高对比） */
.ap-toast, .cc-toast, .pc-toast {
  background: #4f46e5 !important;
  color: #fff !important;
}

/* 14g. 2026 营销日历 — 修复泄漏到浅色模式的深色样式 */
.ec-view-btn.active {
  background: #4f46e5 !important;
  color: #fff !important;
  border-color: #4f46e5 !important;
}
.ec-modal {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.ec-modal * { box-sizing: border-box; }
.ec-modal, .ec-modal h1, .ec-modal h2, .ec-modal h3, .ec-modal h4, .ec-modal h5, .ec-modal h6,
.ec-modal p, .ec-modal div, .ec-modal li, .ec-modal span, .ec-modal strong, .ec-modal b, .ec-modal em,
.ec-modal a, .ec-modal label, .ec-modal td, .ec-modal th, .ec-modal small {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
.ec-modal h1, .ec-modal h2, .ec-modal h3, .ec-modal h4, .ec-modal h5, .ec-modal h6 {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
}
.ec-modal-header .sub,
.ec-modal .sub { color: #334155 !important; }
.ec-modal-close {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
}
.ec-modal-dates, .ec-modal .ec-modal-dates { color: #1e293b !important; font-weight: 600 !important; }
.ec-modal-meta, .ec-modal .ec-modal-meta { color: #334155 !important; }
.ec-timeline-bar {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}
.ec-timeline-bar-title { color: #1e293b !important; font-weight: 700 !important; }
.ec-timeline-track { background: #e2e8f0 !important; }
.ec-deadline-item {
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
}
.ec-deadline-item .dl-name { color: #334155 !important; }
.ec-deadline-item .dl-date { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; font-weight: 700 !important; }
.ec-modal-tips h4, .ec-modal-tips h3 { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; }
.ec-modal-tips li, .ec-modal-tips li * { color: #1e293b !important; }
.ec-modal-tips { color: #1e293b !important; }
.ec-modal-status { color: #78350f !important; font-weight: 600 !important; }
.ec-btn-secondary {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

/* 14h. 深色模块内文字颜色全面覆盖（白色/浅色 → 深色系）
   扩大覆盖：span/a/strong/td/th + 数值类 + 描述类 + 表单控件 + 按钮 */

/* 14h-1. 标题 → 深色 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card,
.stock-formula, .price-formula, .ltv-formula, .qr-howto)
:is(h1, h2, h3, h4, h5, h6) {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}

/* 14h-2. 正文/链接/强调/单元格/span → 中灰 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card,
.stock-formula, .price-formula, .ltv-formula, .qr-howto)
:is(p, a, strong, b, em, label, small, li, span, td, th) {
  color: #475569 !important;
}

/* 14h-3. 描述/标签类 class → 中灰（扩大后缀匹配范围） */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card,
.stock-formula, .price-formula, .ltv-formula, .qr-howto)
:is([class*="-title"], [class*="-label"], [class*="-lbl"], [class*="-name"],
[class*="-desc"], [class*="-text"], [class*="-hint"], [class*="-note"],
[class*="-tip"], [class*="-sub"], [class*="-info"], [class*="-meta"],
[class*="-date"], [class*="-time"], [class*="-currency"], [class*="-exchange"],
[class*="-inverse"], [class*="-empty"], [class*="-unit"], [class*="-status"],
[class*="-row"], [class*="-eyebrow"], [class*="-city"], .label) {
  color: #475569 !important;
}

/* 14h-4. 数值/结果类 class → 品牌靛蓝（高亮显示） */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card,
.stock-formula, .price-formula, .ltv-formula, .qr-howto)
:is([class*="-value"], [class*="-num"], [class*="-amount"], [class*="-count"],
[class*="-total"], [class*="-price"], [class*="-rate"], [class*="-percent"],
[class*="-score"], [class*="-sum"], .value) {
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
}

/* 14h-5. 表单控件 → 深色文字 + 浅色背景 + placeholder */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
:is(input, select, textarea) {
  color: #1e293b !important;
  background: #fff !important;
  border-color: #e2e8f0 !important;
}
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
:is(input, select, textarea)::placeholder {
  color: #94a3b8 !important;
}

/* 14h-6. CTA 内 primary 按钮文字保持白色 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-btn-primary"], [class*="-cta-btn"]:not([class*="-ghost"]):not([class*="-secondary"]):not([class*="-outline"])),
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-btn-primary"], [class*="-cta-btn"]:not([class*="-ghost"]):not([class*="-secondary"]):not([class*="-outline"])) :is(span, strong, b, i) {
  color: #fff !important;
}

/* 14h-7. 结果区内的 ghost/reset/clear/outline 按钮 → 浅色边框风格 */
:is(.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
:is([class*="-reset"], [class*="-clear"], [class*="-btn-ghost"], [class*="-btn-secondary"], [class*="-btn-outline"]) {
  background: #fff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
:is(.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
:is([class*="-reset"], [class*="-clear"], [class*="-btn-ghost"], [class*="-btn-secondary"], [class*="-btn-outline"]):hover {
  background: #eef2ff !important;
  border-color: #4f46e5 !important;
}

/* 14i. 模块内子卡片 — 半透明白色背景 → 浅靛蓝微透明 + 浅边框 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
[class*="-card"]:not(.ma-brand-mark) {
  background: rgba(79, 70, 229, 0.04) !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
/* featured/高亮子卡片 — 浅靛蓝渐变 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card)
[class*="-card"].featured {
  background: linear-gradient(135deg, rgba(79,70,229,0.1), rgba(124,58,237,0.05)) !important;
  border-color: #c7d2fe !important;
}

/* 14j. CTA 内渐变文字 — 蓝色渐变 → 靛蓝渐变 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is(h2 span, h3 span, [class*="-grad"]) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 14k. 模块内 SVG 图标 — 白色/浅蓝 stroke → 靛蓝 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta,
.bh-benefits, .cc-benefits, .ig-benefits, .bh-clock-card,
.fob-result-card, .er-result, .pm-results, .vw-results,
.tz-conv-result, .stock-result-panel, .price-result-panel,
.ltv-result-panel, .qr-preview-panel, .hts-calc-card) svg {
  stroke: #4f46e5 !important;
}

/* 14l. CTA 内 ghost/secondary 按钮 — 白色透明 → 浅色边框风格 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-btn-ghost"], [class*="-btn-secondary"]) {
  background: #fff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-btn-ghost"], [class*="-btn-secondary"]):hover {
  background: #eef2ff !important;
  border-color: #4f46e5 !important;
}

/* 14m. CTA 图标容器 — 蓝色渐变 → 靛蓝渐变 */
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-cta-icon"], [class*="-icon-wrap"]) {
  background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}
:is(.bh-cta, .bng-cta, .cc-cta, .er-cta, .fob-cta, .pm-cta,
.qr-cta, .sk-cta, .stock-cta, .hts-cta, .vw-cta, .tz-cta)
:is([class*="-cta-icon"], [class*="-icon-wrap"]) svg {
  stroke: #fff !important;
}

/* ==========================================================================
   14n. .ig-cta 单独处理（invoice-generator 的 CTA，未列入 14b 名单）
   ========================================================================== */
.ig-cta {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  border: 1px solid #c7d2fe !important;
  color: #1e293b !important;
}
.ig-cta::before {
  background: none !important;
  content: none !important;
}
.ig-cta :is(h1, h2, h3, h4, h5, h6) {
  color: #1e293b !important;
  -webkit-text-fill-color: #1e293b !important;
}
.ig-cta :is(p, a, strong, b, em, label, small, li, span) {
  color: #475569 !important;
}
.ig-cta :is([class*="-btn-outline"], [class*="-btn-ghost"], [class*="-btn-secondary"]) {
  background: #fff !important;
  color: #4f46e5 !important;
  border: 1px solid #c7d2fe !important;
}
.ig-cta :is([class*="-btn-outline"], [class*="-btn-ghost"], [class*="-btn-secondary"]):hover {
  background: #eef2ff !important;
  border-color: #4f46e5 !important;
}

/* ==========================================================================
   14o. Hero 区内遗漏的白色文字（倒计时/截止日期/统计块容器）
   这些元素在 hero 内但类名不匹配 -hero-stat/-hero-badge/-hero-divider 模式
   ========================================================================== */

/* 2026-ecommerce-marketing-calendar — 倒计时块 */
.ec-countdown-item {
  background: rgba(79, 70, 229, 0.06) !important;
  border: 1px solid #c7d2fe !important;
}
.ec-countdown-item .num {
  color: #4f46e5 !important;
  -webkit-text-fill-color: #4f46e5 !important;
}
.ec-countdown-item .label {
  color: #64748b !important;
}
.ec-countdown-divider {
  color: #cbd5e1 !important;
}

/* 2026-ecommerce-marketing-calendar — 截止日期块 */
.ec-deadline {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid #e2e8f0 !important;
}
.ec-deadline .dl-label {
  color: #64748b !important;
}
.ec-deadline .dl-date {
  color: #1e293b !important;
}

/* fob-price-calculator — 统计块容器（子元素已有独立颜色，此处兜底） */
.fob-stat {
  color: #1e293b !important;
}

/* ==========================================================================
   14p. 结果值内的单位文字（vw-unit 等）
   原为白色 + -webkit-text-fill-color: rgba(255,255,255,0.6)，浅色背景上不可见
   ========================================================================== */
.vw-result-value .vw-unit {
  color: #475569 !important;
  -webkit-text-fill-color: #475569 !important;
}
.vw-result-card.featured .vw-result-value {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #4f46e5 !important;
  color: #4f46e5 !important;
}
.vw-result-card.featured .vw-result-value .vw-unit {
  -webkit-text-fill-color: #4f46e5 !important;
}