/* =============================================
   主题 CSS 变量（主题可插拔的核心）
   - 通过 :root / [data-theme] 切换
   - 组件 HTML 不再硬编码颜色，全部走 var(--primary)
   - 微信编辑器粘贴时 JS 会把 CSS 变量替换为实际颜色
   ============================================= */

:root {
  --primary: #E3A34B;          /* 主题色（默认吉金黄） */
  --primary-dark: #b67d2c;
  --primary-light: #fdf4e3;
  --accent: #7a5a1a;
  --account: "分析之道";
  --series: "吉金录";
  --tagline: "— 用数据和逻辑，做理性决策 —";
  --module-label: "第一季 · 认知重塑";
}

/* 各主题切换 */
[data-theme="jijin"] {
  --primary: #E3A34B;          /* 吉金黄 */
  --primary-dark: #b67d2c;
  --primary-light: #fdf4e3;
  --accent: #7a5a1a;
  --account: "分析之道";
  --series: "吉金录";
  --tagline: "— 用数据和逻辑，做理性决策 —";
}

[data-theme="fengche"] {
  --primary: #29AE94;          /* 丰车绿 */
  --primary-dark: #1f8a73;
  --primary-light: #e6f7f3;
  --accent: #0f4c3a;
  --account: "犀利商学人";
  --series: "丰车演绎";
  --tagline: "— 每一款产品经理的成长方法论 —";
}

[data-theme="aiwen"] {
  --primary: #1879A5;          /* 问知蓝 */
  --primary-dark: #0e5a82;
  --primary-light: #e8f3f8;
  --accent: #0a3a55;
  --account: "吾Loi";
  --series: "AI问知录";
  --tagline: "— 在 AI 时代，做不焦虑的明白人 —";
}

/* =============================================
   画布预览专用样式（与微信内嵌样式保持一致）
   - 这一段样式仅在浏览器画布中显示
   - 导出时会被替换为内联 style 注入到 HTML
   ============================================= */

.wx-canvas {
  --ink: #1a1a1a;
  --body: #2c2c2c;
  --gray: #888;
  --gray2: #666;
  --gray3: #999;
  --border: #eaeaea;
  --paper: #ffffff;
  --paper-dark: #fafafa;

  max-width: 677px;
  margin: 0 auto;
  background: var(--paper);
  font-family: 苹方繁细体, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;
  color: var(--ink);
  line-height: 1.75;
  font-size: 15px;
  letter-spacing: 0.5px;
}

/* Logo */
.wx-logo {
  padding: 48px 0 28px 0;
  text-align: center;
  background: var(--paper);
}
.wx-logo img {
  width: 64px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.wx-logo-placeholder {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background: var(--paper-dark);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gray3);
  letter-spacing: 1px;
}

/* 标题区 */
.wx-title-block {
  padding: 0 24px 28px 24px;
  text-align: center;
  background: var(--paper);
}
.wx-title-overline {
  margin: 0 0 10px 0;
  font-size: 11px;
  color: var(--gray3);
  letter-spacing: 6px;
}
.wx-title-h1 {
  margin: 0;
  font-size: 22px;
  font-weight: bold;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.5px;
}
.wx-title-tagline {
  margin: 14px 0 0 0;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 2px;
}

/* Hero 动图 */
.wx-hero {
  padding: 20px 14px 8px 14px;
  text-align: center;
  background: var(--paper);
}
.wx-hero img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.wx-hero-placeholder {
  width: 100%;
  height: 180px;
  background: var(--paper-dark);
  border: 1px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--gray3);
  letter-spacing: 1px;
}

/* 分割线 */
.wx-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 24px 18px;
}

/* H1 */
.wx-h1 {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: bold;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: 0.5px;
  text-align: center;
}

/* H2 章节 */
.wx-h2 {
  margin: 24px 0 14px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid var(--primary);
  font-size: 18px;
  color: var(--ink);
  font-weight: bold;
  line-height: 1.4;
  background: var(--paper);
}

/* H3 */
.wx-h3 {
  margin: 18px 0 10px 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: bold;
  line-height: 1.5;
}

/* 段落 */
.wx-p {
  margin: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--body);
  letter-spacing: 0.5px;
  text-align: justify;
  text-indent: 2em;
}

/* strong 主题色 */
.wx-p strong,
.wx-li strong,
.wx-blockquote strong {
  color: var(--primary);
  font-weight: bold;
}

/* 引用 */
.wx-blockquote {
  margin: 14px 0;
  padding: 10px 14px;
  background: var(--paper-dark);
  border-left: 2px solid var(--primary);
  font-size: 14px;
  line-height: 1.85;
  color: #444;
  border-radius: 0 3px 3px 0;
}

/* 列表 */
.wx-ul, .wx-ol {
  margin: 8px 0 16px 0;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--body);
  letter-spacing: 0.5px;
}
.wx-li {
  margin: 2px 0;
  line-height: 1.85;
}

/* 表格 */
.wx-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.65;
  margin: 14px 0;
}
.wx-th {
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.wx-td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--body);
  text-align: left;
  vertical-align: top;
}

/* 强调块（结论） */
.wx-conclusion {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--paper-dark);
  border-left: 2px solid var(--primary);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.5px;
  color: var(--ink);
}

/* 互动引导 */
.wx-interact {
  margin: 0 14px 18px 14px;
  padding: 18px 16px;
  background: var(--paper);
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.wx-interact-title {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 1px;
}
.wx-interact-text {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #555;
  line-height: 1.8;
}
.wx-interact-tip {
  margin: 0;
  font-size: 12px;
  color: var(--gray);
}

/* 免责声明 */
.wx-disclaimer {
  padding: 14px 18px;
  margin: 0 14px 20px 14px;
  background: var(--paper-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: #777;
  line-height: 1.85;
}
.wx-disclaimer p {
  margin: 0 0 4px 0;
}
.wx-disclaimer p:last-child {
  margin: 0;
}
.wx-disclaimer strong {
  color: var(--ink);
  font-size: 12px;
}

/* 落款 */
.wx-tail {
  padding: 32px 18px 28px 18px;
  text-align: center;
  background: var(--paper);
}
.wx-tail-account {
  margin: 0 0 6px 0;
  font-size: 15px;
  font-weight: bold;
  color: var(--ink);
  letter-spacing: 3px;
}
.wx-tail-tagline {
  margin: 0;
  font-size: 12px;
  color: var(--gray);
  letter-spacing: 1px;
}
.wx-tail-end {
  margin: 18px 0 0 0;
  font-size: 10px;
  color: var(--gray3);
}