/* 微信成交作业手册 · 主题色
   ==========================================================================
   这个文件只管“换颜色”。版式、字号、间距都在 assets/style.css，这里不碰。

   主题靠 <html data-theme="主题id"> 生效。
   默认主题（墨绿）= <html> 上没有 data-theme 这个属性，这时本文件不改任何东西，页面就是 style.css 原本的样子。
   （theme.js 保证这一点：选回“墨绿”时它会把属性拿掉，有人手写成 data-theme="default" 它也会拿掉。）

   不管哪个主题，这三条不能变：
     绿色 = 可以直接复制发给客户      （--go 那一组：气泡、“这样回”）
     黄色 = 内部提示 / 待确认          （--amber 那一组）
     红色 = 不能说、不能做             （--red 那一组）
   所以 --go 不能改成别的色相。想让编号、选中态、焦点框这些“点缀”跟着主题走，改 --brand。

   文件分五段：
     一、选填变量的默认值    style.css 里写死的颜色，在这里起了名字，默认值就是原来的颜色
     二、统一覆盖            把 style.css 里写死颜色的地方接到这些变量上（所有非默认主题共用，写一遍就够）
     三、五个主题            每个主题一段：先是变量，后面跟着只有这个主题才需要的几条覆盖
     四、主题按钮和面板      顶栏里的“主题”按钮、弹出的选择面板（所有主题都用，含默认）
     五、切换时的过渡

   ---- 怎么加一个新主题 ----
   1. 在第三段里复制一整段。浅色主题复制「深海蓝」，深色主题复制「夜间」。
   2. 把选择器里的 id 换成新名字，比如 [data-theme="forest"]。
   3. 改变量。带 ★ 的必填（27 个基础色 + 6 个 --brand）；其余 --t- 开头的选填，
      不写就用第一段的默认值（也就是 style.css 原来写死的颜色）。
      浅色主题通常只要调一二十个；深色主题基本都要写，因为原来写死的都是浅色。
   4. 在 assets/theme.js 的 LIST 里加一行 { id: 'forest', name: '名字', desc: '一句说明' }。
      面板里的小色板会自己用上新主题的颜色，不用另外配。
   5. 每个主题都打开这几页看一眼：flow.html（流程图）、faq.html（气泡、黄提示、红提示）、
      cases.html（聊天）、p-llm.html（导图）、pricing.html（价格表、计算器）、rules.html#cfg（红黄绿标签）。

   两个写法上的约定：
   · 变量写在 [data-theme="x"] { … }，前面不带 html。因为面板里的小色板也挂了 data-theme，
     这样它能直接拿到那个主题的颜色。
   · 针对具体位置的覆盖写 html[data-theme="x"] .某处 { … }，并且放在第二段的后面
     （它和第二段的规则优先级一样，谁在后面谁生效）。
   ========================================================================== */

/* 主题只在屏幕上生效，第一到第三段都包在这里面。（手册不提供打印和导出，见 style.css 最后一段。） */
@media screen {

/* ==========================================================================
   一、选填变量的默认值
   这些颜色在 style.css 里是写死的。这里给它们起名字，默认值 = 原来的颜色。
   只有第二段（非默认主题）才用到这些变量，所以默认主题的外观不受影响。
   ========================================================================== */
html {
  /* 品牌点缀：编号、选中态、焦点框、主按钮。默认跟着绿色走 */
  --brand: var(--go);               /* 实心色块、边框 */
  --brand-deep: var(--go-deep);     /* 实心按钮悬停 */
  --brand-ink: var(--go-deep);      /* 用作文字时的颜色：大编号、小眉题 */
  --brand-on: #fff;                 /* 压在 --brand 实心块上的字 */
  --brand-ring: rgba(6,137,76,.14); /* 输入框获得焦点时外面那圈淡光 */
  --brand-line: var(--go-line);     /* 淡一点的品牌色描边 */

  /* 侧栏 */
  --t-nav-on: #1f4a3b;              /* 当前页那一项的底 */
  --t-nav-on-ink: #fff;             /* 当前页那一项的字 */
  --t-nav-sub: #b5cbc0;             /* 二级项的字 */

  /* 文字、线 */
  --t-ink-2: #36424d;               /* 比正文淡一档的字：导语、小块里的字 */
  --t-rule: var(--ink);             /* 页头下面、每个阶段上面那条粗线 */

  /* 灰色小块、表格、输入框 */
  --t-chip: #ecebe6;                /* 灰标签、目录小标签、code 的底 */
  --t-chip-ink: #33404b;            /* 上面的字 */
  --t-th: #efece3;                  /* 表头的底 */
  --t-field: #fff;                  /* 输入框、下拉框的底 */
  --t-note: #f6f4ee;                /* “要点 / 内部提示”那一行的底 */
  --t-note-ink: #3d4852;
  --t-solid: var(--ink);            /* 深色实心块：黑标签、编号方块、“过关”条 */
  --t-solid-ink: #fff;
  --t-hi: var(--gold);              /* 浅底上的金色块：价格表表头、流程图终点、节点角标 */
  --t-hi-ink: #2a2108;
  --t-hi-line: #e3bd38;
  --t-hi-dim: #6a5512;
  --t-gold-ink: #2a2108;            /* 金色按钮上的字 */
  --t-go-on: #fff;                  /* 压在 --go 实心块上的字：“已复制”、聊天里“我”的头像 */
  --t-blue-on: #fff;                /* 压在 --blue 实心块上的字 */

  /* 气泡 */
  --t-bubble-ink: #10261b;          /* 绿气泡里的字 */
  --t-bubble-hover: #d5f0de;
  --t-bubble-hover-line: #8fd1a6;
  --t-bubble-btn: #fff;             /* 气泡右上角“复制”小牌子的底 */
  --t-push-line: #c4dbea;           /* 蓝色“接着推一步”气泡、蓝色信息框的边 */
  --t-push-ink: #12283a;
  --t-push-hover: #dcebf5;
  --t-blocked: #fbf7ea;             /* 口径没确认、被锁住的气泡的底 */
  --t-ph: #ffe1dc;                  /* 〔待确认〕红色占位的底 */
  --t-ph-me: #fff0c2;               /* 〔客户称呼〕这类还没填的空的底 */
  --t-soft-line: #d9a400;           /* 默认口径下面的黄色虚线 */
  --t-red-ink: #5d1b16;             /* 红色“别这么说”里的正文 */
  --t-amber-ink: #5a3a00;           /* 黄色“待确认”里的正文 */
  --t-fav: #c9c4b6;                 /* 没收藏的星 */
  --t-fav-on: #e0a100;              /* 收藏了的星 */

  /* 聊天示范（照着微信的样子） */
  --t-chat: #ededed;
  --t-chat-them: #fff;              /* 客户的气泡 */
  --t-chat-them-ink: var(--ink);
  --t-chat-me: #95ec69;             /* 我的气泡 */
  --t-chat-me-ink: #0c1a08;
  --t-chat-me-hover: #86e158;
  --t-chat-me-done: #6fd441;
  --t-chat-who: #cfd4d8;            /* 客户头像 */
  --t-chat-who-ink: #49535c;
  --t-chat-time: #8b8b8b;

  /* 流程图、思维导图 */
  --t-node: #fff;                   /* 普通方框的底 */
  --t-node-line: #cfd6d2;
  --t-step: var(--brand);           /* “流程步骤”方框的边 */
  --t-ask-line: #dcae2c;            /* “判断”方框的边 */
  --t-say: #eef0f1;                 /* “客户说的话”方框 */
  --t-say-line: #d3d8dc;
  --t-ref-line: #b3bdb8;            /* “参考资料”虚线框 */
  --t-root: var(--nav);             /* 流程图起点、导图中心 */
  --t-root-ink: #fff;
  --t-root-dim: var(--nav-dim);
  --t-edge: #7c8a84;                /* 连线、箭头 */
  --t-edge-dash: #aab4af;           /* 虚线连线 */
  --t-mm-line: #b3bdb8;             /* 导图主干的线 */
  --t-mm-on: #fff;                  /* 导图一级分支色块上的字 */
  --t-mm-mix: 12%;                  /* 导图二级节点的浅底：分支色掺多少进纸色 */

  /* 其他 */
  --t-toast: #14251e;               /* 底部提示条 */
  --t-toast-ink: #fff;
  --t-pre: #14251e;                 /* 代码块 */
  --t-pre-ink: #d8e7df;
  --t-scrim: rgba(23,33,43,.28);    /* 搜索结果后面那层半透明遮罩 */
}

/* ==========================================================================
   二、统一覆盖：把 style.css 里写死颜色的地方，接到上面的变量上
   选择器前面都带 html[data-theme]，所以只在选了非默认主题时起作用。
   注意：带了这个前缀，优先级就比 style.css 高，所以悬停、选中这些状态也得在这里重写一遍，
   顺序照着 style.css 来（先普通、后状态）。
   ========================================================================== */

/* ---------- 侧栏 ---------- */
html[data-theme] .side { color-scheme: dark; }   /* 侧栏永远是深色的，滚动条跟着用深色 */
html[data-theme] .side nav a.sub { color: var(--t-nav-sub); }
html[data-theme] .side nav a[aria-current="page"] { background: var(--t-nav-on); color: var(--t-nav-on-ink); }

/* ---------- 焦点框、输入框、按钮：原来拿绿色当强调色的地方，换成 --brand ---------- */
html[data-theme] :focus-visible { outline-color: var(--brand); }
html[data-theme] .side :focus-visible,
html[data-theme] .hero-side :focus-visible,
html[data-theme] .calc-out :focus-visible { outline-color: var(--gold); }
html[data-theme] .search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }
html[data-theme] .top-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
html[data-theme] .vars input,
html[data-theme] .vars-actions button,
html[data-theme] .field input,
html[data-theme] .field select { background: var(--t-field); }
html[data-theme] .vars input:focus,
html[data-theme] .filter input:focus,
html[data-theme] .field input:focus,
html[data-theme] .field select:focus { border-color: var(--brand); }
html[data-theme] .vars-actions .primary { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
html[data-theme] .btn { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
html[data-theme] .btn:hover { background: var(--brand-deep); }
html[data-theme] .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-theme] .btn.gold { background: var(--gold); border-color: var(--gold); color: var(--t-gold-ink); }

/* ---------- 编号、小眉题：文字强调色 ---------- */
html[data-theme] .eyebrow,
html[data-theme] h2 .h-no,
html[data-theme] .step .no,
html[data-theme] .stage-no,
html[data-theme] .rhythm b,
html[data-theme] .learn h4,
html[data-theme] .path span b { color: var(--brand-ink); }
html[data-theme] .path span { border-color: var(--brand-line); }
html[data-theme] .quick a { border-left-color: var(--brand); }

/* ---------- 悬停时的边框 ---------- */
html[data-theme] .chip:hover,
html[data-theme] .step:hover,
html[data-theme] .quick a:hover,
html[data-theme] .rhythm a:hover,
html[data-theme] .p-nav a:hover { border-color: var(--brand); }

/* ---------- 筛选标签：选中的那个 ---------- */
html[data-theme] .chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-on); }
html[data-theme] .chip.on em { color: var(--brand-on); opacity: .9; }

/* ---------- 文字的深浅、粗线 ---------- */
html[data-theme] .lead,
html[data-theme] .rhythm span,
html[data-theme] .p-line p { color: var(--t-ink-2); }
html[data-theme] .page-head { border-bottom-color: var(--t-rule); }
html[data-theme] .stage { border-top-color: var(--t-rule); }

/* ---------- 灰色小块：标签、目录、表头 ---------- */
html[data-theme] .tag.gy { background: var(--t-chip); }
html[data-theme] .pill { background: var(--t-chip); color: var(--t-ink-2); }
html[data-theme] code { background: var(--t-chip); }
html[data-theme] pre.code { background: var(--t-pre); color: var(--t-pre-ink); }
html[data-theme] .toc a,
html[data-theme] .p-line .go a,
html[data-theme] .gate6 .card .lk a { background: var(--t-chip); color: var(--t-chip-ink); }
html[data-theme] .toc a:hover,
html[data-theme] .p-line .go a:hover,
html[data-theme] .gate6 .card .lk a:hover { background: var(--t-solid); color: var(--t-solid-ink); }
html[data-theme] .tag.dk,
html[data-theme] .pt-no,
html[data-theme] .gate { background: var(--t-solid); color: var(--t-solid-ink); }
html[data-theme] thead th { background: var(--t-th); }
html[data-theme] .price thead th { background: var(--t-hi); color: var(--t-hi-ink); }
html[data-theme] .box.info { border-color: var(--t-push-line); }
html[data-theme] .check li::before { border-color: var(--faint); background: var(--t-field); }

/* ---------- 绿色气泡（可以发） ---------- */
html[data-theme] .bubble { color: var(--t-bubble-ink); }
html[data-theme] .bubble:hover { background: var(--t-bubble-hover); border-color: var(--t-bubble-hover-line); }
html[data-theme] .bubble::after { background: var(--t-bubble-btn); }
html[data-theme] .bubble.done::after { background: var(--go); border-color: var(--go); color: var(--t-go-on); }
/* 蓝色气泡（接着推一步） */
html[data-theme] .bubble.push { background: var(--blue-soft); border-color: var(--t-push-line); color: var(--t-push-ink); }
html[data-theme] .bubble.push:hover { background: var(--t-push-hover); }
html[data-theme] .bubble.push::after { color: var(--blue); border-color: var(--t-push-line); }
html[data-theme] .bubble.push.done::after { background: var(--blue); border-color: var(--blue); color: var(--t-blue-on); }
/* 被锁住的气泡（口径还没确认） */
html[data-theme] .bubble.blocked { background: var(--t-blocked); border-color: var(--amber-line); }
html[data-theme] .bubble.blocked::after { color: var(--amber); border-color: var(--amber-line); }
/* 气泡里的占位、默认口径 */
html[data-theme] .ph { background: var(--t-ph); }
html[data-theme] .ph.me { background: var(--t-ph-me); }
html[data-theme] .soft { border-bottom-color: var(--t-soft-line); }

/* ---------- 黄色提示、红色禁止里的正文 ---------- */
html[data-theme] .note { background: var(--t-note); color: var(--t-note-ink); }
html[data-theme] .dont { color: var(--t-red-ink); }
html[data-theme] .warn,
html[data-theme] .chat-note { color: var(--t-amber-ink); }

/* ---------- 收藏的星 ---------- */
html[data-theme] .fav { color: var(--t-fav); }
html[data-theme] .fav:hover { color: var(--amber); }
html[data-theme] .fav.on { color: var(--t-fav-on); }

/* ---------- 聊天示范 ---------- */
html[data-theme] .chat { background: var(--t-chat); }
html[data-theme] .chat-time { color: var(--t-chat-time); }
html[data-theme] .msg .who { background: var(--t-chat-who); color: var(--t-chat-who-ink); }
html[data-theme] .msg.me .who { background: var(--go); color: var(--t-go-on); }
html[data-theme] .msg .b { background: var(--t-chat-them); color: var(--t-chat-them-ink); }
html[data-theme] .msg.me .b { background: var(--t-chat-me); color: var(--t-chat-me-ink); }
html[data-theme] .msg.me .b:hover { background: var(--t-chat-me-hover); }
html[data-theme] .msg.me .b.done { background: var(--t-chat-me-done); }

/* ---------- 流程图 ---------- */
html[data-theme] .fl-node,
html[data-theme] .lg i { background: var(--t-node); border-color: var(--t-node-line); }
html[data-theme] .fl-node.k-start { background: var(--t-root); border-color: var(--t-root); color: var(--t-root-ink); }
html[data-theme] .fl-node.k-start small { color: var(--t-root-dim); }
html[data-theme] .fl-node.k-step,
html[data-theme] .lg i.k-step { border-color: var(--t-step); }
html[data-theme] .fl-node.k-ask,
html[data-theme] .lg i.k-ask { background: var(--amber-soft); border-color: var(--t-ask-line); }
html[data-theme] .fl-node.k-say,
html[data-theme] .lg i.k-say { background: var(--t-say); border-color: var(--t-say-line); }
html[data-theme] .fl-node.k-prod,
html[data-theme] .lg i.k-prod { background: var(--go-soft); border-color: var(--go-line); }
html[data-theme] .fl-node.k-ref { background: transparent; border-color: var(--t-ref-line); }
html[data-theme] .lg i.k-ref { border-color: var(--t-ref-line); }
html[data-theme] .fl-node.k-ref b { color: var(--t-ink-2); }
html[data-theme] .fl-node.k-warn { background: var(--red-soft); border-color: var(--red-line); }
html[data-theme] .fl-node.k-end { background: var(--t-hi); border-color: var(--t-hi-line); color: var(--t-hi-ink); }
html[data-theme] .fl-node.k-end small { color: var(--t-hi-dim); }
html[data-theme] a.fl-node:hover { border-color: var(--brand); }
html[data-theme] .fl-node .no { background: var(--brand); color: var(--brand-on); }
html[data-theme] .fl-node .fl-tag { background: var(--t-hi); color: var(--t-hi-ink); }
/* 连线、箭头是 SVG，颜色在 style.css 里是按 class 写的（不是写在标签属性上），所以这里能直接盖。
   连线上文字外面那圈描边，要和纸色一样才像“垫了个底” */
html[data-theme] .fl-svg path.ed { stroke: var(--t-edge); }
html[data-theme] .fl-svg path.ed.dash { stroke: var(--t-edge-dash); }
html[data-theme] .fl-svg path.ah { fill: var(--t-edge); }
html[data-theme] .fl-svg text { stroke: var(--paper); }

/* ---------- 思维导图 ---------- */
/* 主干的线：style.css 里是 var(--c, #b3bdb8)，后面那个写死的是后备色。
   这里先在 .mm 上给 --c 一个值；一级分支行内写的 --c 会再盖掉它，所以分支色不受影响 */
html[data-theme] .mm { --c: var(--t-mm-line); --cs: var(--t-say); }
html[data-theme] .mm > li > ul > li::after { border-color: var(--t-mm-line); }
html[data-theme] .mm > li > .mm-node { background: var(--t-root); color: var(--t-root-ink); }
html[data-theme] .mm > li > .mm-node small { color: var(--t-root-dim); }
html[data-theme] .mm > li > ul > li > .mm-node { color: var(--t-mm-on); }
/* 二级节点的浅底：用“分支色掺一点进纸色”现算，什么纸色都协调。
   老一点的浏览器不认识 color-mix，就不进这一段，继续用行内写好的浅底色（--cs）。 */
@supports (background: color-mix(in srgb, red 10%, blue)) {
  html[data-theme] .mm > li > ul > li > ul > li > .mm-node,
  html[data-theme] .mm li li a.mm-node:hover { background: color-mix(in srgb, var(--c) var(--t-mm-mix), var(--paper)); }
  html[data-theme] .mm > li > ul > li > a.mm-node:hover { background: var(--c); }
}

/* ---------- 浮层 ---------- */
html[data-theme] .results { background: var(--t-scrim); }
html[data-theme] .toast { background: var(--t-toast); color: var(--t-toast-ink); }

/* ==========================================================================
   三、五个主题（默认的墨绿就是 style.css 的 :root，不用写）
   ========================================================================== */

/* --------------------------------------------------------------------------
   ocean 深海蓝：深蓝侧栏 + 冷白底。稳重，适合投屏、给别人看屏幕。
   -------------------------------------------------------------------------- */
[data-theme="ocean"] {
  color-scheme: light;
  /* ★ 底色与文字 */
  --bg: #eef2f6;
  --paper: #ffffff;
  --ink: #152232;
  --muted: #566476;
  --faint: #8793a3;
  --line: #d5dde7;
  --line-soft: #e6ebf2;
  /* ★ 侧栏（必须是深色：上面的字是白的，流程图起点、计算器结果区也用它当底） */
  --nav: #0f2744;
  --nav-2: #19375c;
  --nav-ink: #d0dceb;
  --nav-dim: #8ba3c0;
  /* ★ 绿：可以发。浅色主题照抄默认值就行，别换色相 */
  --go: #06894c;
  --go-deep: #05703e;
  --go-soft: #e3f5e9;
  --go-line: #b4e0c3;
  /* ★ 黄：内部提示、待确认 */
  --amber: #8f5a00;
  --amber-soft: #fff6dd;
  --amber-line: #efd58d;
  --gold: #f7d560;
  /* ★ 红：不能说 */
  --red: #b3261e;
  --red-soft: #fdefed;
  --red-line: #f1c3be;
  /* ★ 蓝：链接、“接着推一步” */
  --blue: #1b62a8;
  --blue-soft: #e8f1fa;
  /* ★ 顶栏半透明底（= --bg 加透明度）、重点下划线、荧光笔 */
  --glass: rgba(238,242,246,.92);
  --key-line: #2a6fc0;
  --mark: #ffe680;
  /* ★ 品牌点缀 */
  --brand: #1f5fae;
  --brand-deep: #174d90;
  --brand-ink: #1a56a0;
  --brand-on: #fff;
  --brand-ring: rgba(31,95,174,.16);
  --brand-line: #b9cfe9;

  /* 选填：把原来偏暖的灰换成偏冷的 */
  --t-nav-on: #1f4a7c;
  --t-nav-sub: #b4c6dc;
  --t-ink-2: #2b394a;
  --t-chip: #e6ebf2;
  --t-chip-ink: #34455a;
  --t-th: #e9eef5;
  --t-note: #f1f4f8;
  --t-note-ink: #3a4858;
  --t-push-line: #c0d6ee;
  --t-fav: #c2ccd9;
  --t-node-line: #cbd5e1;
  --t-say: #edf1f6;
  --t-say-line: #cfd8e3;
  --t-ref-line: #a9b6c6;
  --t-edge: #6f8098;
  --t-edge-dash: #a2b0c2;
  --t-mm-line: #a9b6c6;
  --t-toast: #0f2744;
  --t-pre: #0f2744;
  --t-pre-ink: #d6e2f0;
  --t-scrim: rgba(15,39,68,.3);
}

/* --------------------------------------------------------------------------
   cinnabar 朱砂红：暖白纸 + 枣红侧栏，编号、选中态用朱砂红点一下。
   红色在这里只做“实心小块”和编号；“红色 = 不能说”仍然是粉底红字的块，两样东西长得不一样。
   重点下划线改用赭金色，免得和红字搞混；链接保持蓝色。
   -------------------------------------------------------------------------- */
[data-theme="cinnabar"] {
  color-scheme: light;
  --bg: #f6f1e9;
  --paper: #fffdf9;
  --ink: #241c19;
  --muted: #6b5f59;
  --faint: #9b8e86;
  --line: #e5dbcd;
  --line-soft: #efe8dc;
  --nav: #4a1712;
  --nav-2: #5f2019;
  --nav-ink: #f1ddd5;
  --nav-dim: #c39c91;
  --go: #06894c;
  --go-deep: #05703e;
  --go-soft: #e3f5e9;
  --go-line: #b4e0c3;
  --amber: #8f5a00;
  --amber-soft: #fff4d6;
  --amber-line: #efd58d;
  --gold: #f5cf62;
  --red: #b3261e;
  --red-soft: #fdeeeb;
  --red-line: #f1c3be;
  --blue: #2a5c80;
  --blue-soft: #e8f0f5;
  --glass: rgba(246,241,233,.92);
  --key-line: #c9962e;
  --mark: #ffe27a;
  --brand: #b93a2a;
  --brand-deep: #9d2e20;
  --brand-ink: #8f2d21;             /* 编号、小眉题用深一档的枣红，和“不能说”的正红拉开 */
  --brand-on: #fff;
  --brand-ring: rgba(185,58,42,.16);
  --brand-line: #e3cfc0;

  --t-nav-on: #7a271d;
  --t-nav-sub: #dfc4ba;
  --t-ink-2: #3d322e;
  --t-chip: #f0e8dc;
  --t-chip-ink: #4b403a;
  --t-th: #f2eadd;
  --t-note: #f8f3ea;
  --t-note-ink: #4a403b;
  --t-fav: #cfc3b3;
  --t-node-line: #d8cdbf;
  --t-step: #7a271d;                /* 流程步骤的边用深枣红，不用朱砂红，免得看着像警告 */
  --t-say: #f2eee7;
  --t-say-line: #d9d0c4;
  --t-ref-line: #bcb0a3;
  --t-edge: #8a7c72;
  --t-edge-dash: #b6aa9e;
  --t-mm-line: #bcb0a3;
  --t-toast: #3a120d;
  --t-pre: #3a120d;
  --t-pre-ink: #f0ddd6;
  --t-scrim: rgba(58,18,13,.28);
}

/* --------------------------------------------------------------------------
   paper 暖纸：米黄底、深棕字，整体对比放低一点，适合盯一整天。
   绿黄红都调柔了，但色相没变；黄色比纸更黄，不会和底色混在一起。
   -------------------------------------------------------------------------- */
[data-theme="paper"] {
  color-scheme: light;
  --bg: #efe7d3;
  --paper: #f8f2e2;
  --ink: #3a3328;
  --muted: #675d4d;
  --faint: #8f8470;
  --line: #dcd0b6;
  --line-soft: #e7ddc6;
  --nav: #3d362b;
  --nav-2: #4c4437;
  --nav-ink: #e7dcc6;
  --nav-dim: #beb29a;
  --go: #2e7d50;
  --go-deep: #22633e;
  --go-soft: #deecd6;
  --go-line: #b3d2ab;
  --amber: #84540a;
  --amber-soft: #f8e7ad;
  --amber-line: #dfc068;
  --gold: #ecc85a;
  --red: #a63329;
  --red-soft: #f6ddd3;
  --red-line: #e2b5a9;
  --blue: #2f6080;
  --blue-soft: #dde8e8;
  --glass: rgba(239,231,211,.93);
  --key-line: #a8743a;
  --mark: #f4d468;
  --brand: #8a5c32;
  --brand-deep: #734b27;
  --brand-ink: #7b5230;
  --brand-on: #fdf8ea;
  --brand-ring: rgba(138,92,50,.18);
  --brand-line: #d8c5a3;

  --t-nav-on: #5b5141;
  --t-nav-sub: #d0c4ac;
  --t-ink-2: #4a4235;
  --t-chip: #e9dfc7;
  --t-chip-ink: #51483a;
  --t-th: #ece2ca;
  --t-field: #fcf8ec;
  --t-note: #efe6ce;
  --t-note-ink: #4d4538;
  --t-solid-ink: #fbf5e6;
  --t-hi-line: #d3b045;
  --t-hi-dim: #5a480c;
  --t-bubble-ink: #1d2c20;
  --t-bubble-hover: #d1e5c8;
  --t-bubble-hover-line: #90bf8a;
  --t-bubble-btn: #fbf7ea;
  --t-push-line: #b8ced0;
  --t-push-ink: #1c3140;
  --t-push-hover: #d1e0e0;
  --t-blocked: #f5ecd0;
  --t-ph: #f3cfc4;
  --t-ph-me: #f5dc8e;
  --t-soft-line: #c69200;
  --t-red-ink: #5c2019;
  --t-amber-ink: #553808;
  --t-fav: #c9bda3;
  --t-chat: #e8e1d0;
  --t-chat-them: #fbf7ec;
  --t-chat-me: #a6dc82;
  --t-chat-me-ink: #14230e;
  --t-chat-me-hover: #98d272;
  --t-chat-me-done: #86c75f;
  --t-chat-who: #d2c9b4;
  --t-chat-who-ink: #5a5144;
  --t-chat-time: #81776a;
  --t-node: #fcf8ec;
  --t-node-line: #d0c4aa;
  --t-ask-line: #cfa23a;
  --t-say: #ebe4d3;
  --t-say-line: #d0c6b0;
  --t-ref-line: #b8ac93;
  --t-edge: #8a7e69;
  --t-edge-dash: #b4a991;
  --t-mm-line: #b8ac93;
  --t-toast: #3d362b;
  --t-toast-ink: #fbf5e6;
  --t-pre: #3d362b;
  --t-pre-ink: #e7dcc6;
  --t-scrim: rgba(58,51,40,.3);
}
/* 只有暖纸主题才需要的覆盖：行内写的分支色里，绿和棕黄压在米黄纸上偏淡，各加深一档（色相不变） */
html[data-theme="paper"] [style*="--c:#06894c"] { --c: #26704a !important; }
html[data-theme="paper"] [style*="--c:#a06400"] { --c: #8a5600 !important; }

/* --------------------------------------------------------------------------
   mono 黑白：只留黑白灰，对比最高。
   留下来的彩色只有四种有意义的：绿（能发）、黄（提示）、红（不能说）、蓝（接着推一步）。
   其余的彩色（侧栏、编号、金色角标、导图分支色、流程图的装饰色）全部收成黑白灰。
   -------------------------------------------------------------------------- */
[data-theme="mono"] {
  color-scheme: light;
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #4a4a4a;
  --faint: #767676;
  --line: #cfcfcf;
  --line-soft: #e6e6e6;
  --nav: #000000;
  --nav-2: #1f1f1f;
  --nav-ink: #e0e0e0;
  --nav-dim: #8e8e8e;
  --go: #06894c;
  --go-deep: #05703e;
  --go-soft: #e3f5e9;
  --go-line: #b4e0c3;
  --amber: #8f5a00;
  --amber-soft: #fff6dd;
  --amber-line: #efd58d;
  --gold: #f0f0f0;                  /* 这里的“金色”收成浅灰：压在黑底上像白字，垫在白底上是浅灰块 */
  --red: #b3261e;
  --red-soft: #fdefed;
  --red-line: #f1c3be;
  --blue: #124e80;
  --blue-soft: #eef3f7;
  --glass: rgba(255,255,255,.94);
  --key-line: #0a0a0a;
  --mark: #ffe680;
  --brand: #0a0a0a;
  --brand-deep: #3a3a3a;
  --brand-ink: #0a0a0a;
  --brand-on: #fff;
  --brand-ring: rgba(0,0,0,.14);
  --brand-line: #8c8c8c;

  --t-nav-on: #ffffff;              /* 当前页：白底黑字，反过来 */
  --t-nav-on-ink: #000000;
  --t-nav-sub: #bdbdbd;
  --t-ink-2: #262626;
  --t-chip: #ededed;
  --t-chip-ink: #262626;
  --t-th: #f0f0f0;
  --t-note: #f4f4f4;
  --t-note-ink: #333333;
  --t-hi: #0a0a0a;                  /* 价格表表头、流程图终点：黑底白字 */
  --t-hi-ink: #ffffff;
  --t-hi-line: #0a0a0a;
  --t-hi-dim: #cfcfcf;
  --t-gold-ink: #0a0a0a;
  --t-push-line: #b9cbdb;
  --t-fav: #bdbdbd;
  --t-node-line: #9a9a9a;
  --t-say: #f0f0f0;
  --t-say-line: #bdbdbd;
  --t-ref-line: #8c8c8c;
  --t-edge: #4d4d4d;
  --t-edge-dash: #9a9a9a;
  --t-mm-line: #9a9a9a;
  --t-mm-mix: 7%;
  --t-toast: #000000;
  --t-pre: #0a0a0a;
  --t-pre-ink: #e6e6e6;
  --t-scrim: rgba(0,0,0,.32);
}
/* 下面几条是只有黑白主题才需要的覆盖 */
/* 导图分支色、产品线卡片顶上的色条：是写在标签行内的 --c / --cs，只能用 !important 盖掉 */
html[data-theme="mono"] [style*="--c:"] { --c: #0a0a0a !important; --cs: #f0f0f0 !important; }
/* 侧栏当前页是白底，上面的角标和小圆点换成黑的 */
html[data-theme="mono"] .side nav a[aria-current="page"] .no { background: #000; color: #fff; }
html[data-theme="mono"] .side nav a.sub[aria-current="page"] .no { background: none; }
html[data-theme="mono"] .side nav a.sub[aria-current="page"] .no::after { background: #000; }
html[data-theme="mono"] .side nav a[aria-current="page"] em { background: #000; color: #fff; }
/* “待确认”的小圆点是黄色提示，不能跟着变灰 */
html[data-theme="mono"] .top-btn .dot { background: #e0a100; }
html[data-theme="mono"] .top-btn .dot.ok { background: var(--go); }
/* 流程图：判断框、产品框原来靠黄底绿底区分，这里改成靠形状和黑边区分 */
html[data-theme="mono"] .fl-node.k-ask,
html[data-theme="mono"] .lg i.k-ask { background: #fff; border-color: #0a0a0a; }
html[data-theme="mono"] .fl-node.k-ask b::before { color: #0a0a0a; }
html[data-theme="mono"] .fl-node.k-prod,
html[data-theme="mono"] .lg i.k-prod { background: #e6e6e6; border-color: #0a0a0a; }
html[data-theme="mono"] .fl-node.k-prod b { color: #0a0a0a; }
html[data-theme="mono"] .fl-svg text { fill: #0a0a0a; }
/* 计算器里“每月合计”那格的底、定位到某张卡片时闪的那一圈：原来是金色的 */
html[data-theme="mono"] .kpi .big { background: rgba(255,255,255,.12); }
html[data-theme="mono"] .say.flash,
html[data-theme="mono"] .qa.flash { animation-name: kb-flash-mono; }
@keyframes kb-flash-mono { 0% { box-shadow: 0 0 0 3px #0a0a0a; } 100% { box-shadow: 0 0 0 3px transparent; } }
/* 顶栏上的主题色点：黑白各一半 */
html[data-theme="mono"] .kb-theme-dot { background: linear-gradient(135deg, #000 50%, #fff 50%); }

/* --------------------------------------------------------------------------
   night 夜间：深色底，晚上或光线暗的时候用。
   绿黄红都换成“深底 + 亮字”：底色压暗、文字提亮，一眼还是绿黄红。
   点缀色用蓝，和“绿色 = 能发”分开。
   -------------------------------------------------------------------------- */
[data-theme="night"] {
  color-scheme: dark;               /* 让滚动条、下拉框这些浏览器自带的东西也变深色 */
  --bg: #14181d;
  --paper: #1c2128;
  --ink: #e3e7eb;
  --muted: #a4aeb9;
  --faint: #8893a0;
  --line: #303842;
  --line-soft: #272e37;
  --nav: #0d1014;
  --nav-2: #1a2029;
  --nav-ink: #c7cfd8;
  --nav-dim: #8c98a5;
  --go: #2fae71;                    /* 实心块、边框 */
  --go-deep: #72dca6;               /* 深底上的绿字：这里要比 --go 亮 */
  --go-soft: #123524;               /* 气泡的底：深绿 */
  --go-line: #2b6a49;
  --amber: #efc15e;
  --amber-soft: #342a11;
  --amber-line: #6a5623;
  --gold: #f2cd5d;
  --red: #ff9288;
  --red-soft: #3a1b19;
  --red-line: #7a3632;
  --blue: #7bb6ea;
  --blue-soft: #15293a;
  --glass: rgba(20,24,29,.9);
  --key-line: #6aa7ea;
  --mark: rgba(242,205,93,.2);      /* 荧光笔：深底上只垫一层很淡的黄，字本身变成亮黄（见下面的覆盖） */
  --brand: #5a9be3;
  --brand-deep: #7ab0ea;
  --brand-ink: #84b9f0;
  --brand-on: #0b1622;              /* 亮蓝块上用深色字 */
  --brand-ring: rgba(90,155,227,.28);
  --brand-line: #35506e;

  --t-nav-on: #243243;
  --t-nav-on-ink: #ffffff;
  --t-nav-sub: #a9b4c0;
  --t-ink-2: #cbd2d9;
  --t-rule: #5a6672;
  --t-chip: #2a323b;
  --t-chip-ink: #c5cdd6;
  --t-th: #252c35;
  --t-field: #14181d;
  --t-note: #252c35;
  --t-note-ink: #c9d1d9;
  --t-solid: #3a4553;
  --t-solid-ink: #ffffff;
  --t-hi: #d2ad45;
  --t-hi-ink: #1d1603;
  --t-hi-line: #d2ad45;
  --t-hi-dim: #4a3a0c;
  --t-gold-ink: #1d1603;
  --t-go-on: #062014;
  --t-blue-on: #0b1622;
  --t-bubble-ink: #def2e6;
  --t-bubble-hover: #174430;
  --t-bubble-hover-line: #3b8a60;
  --t-bubble-btn: #0e2a1b;
  --t-push-line: #2b5375;
  --t-push-ink: #d6e6f4;
  --t-push-hover: #1a3651;
  --t-blocked: #2b2614;
  --t-ph: #5c211d;
  --t-ph-me: #4d3c10;
  --t-soft-line: #d9a400;
  --t-red-ink: #f6d0cb;
  --t-amber-ink: #f1e3bd;
  --t-fav: #5a6572;
  --t-fav-on: #f0bd35;
  --t-chat: #101317;
  --t-chat-them: #2a3038;
  --t-chat-them-ink: #e3e7eb;
  --t-chat-me: #3eb575;
  --t-chat-me-ink: #04130a;
  --t-chat-me-hover: #4cc484;
  --t-chat-me-done: #2f9e62;
  --t-chat-who: #343c46;
  --t-chat-who-ink: #b5bec8;
  --t-chat-time: #7f8b98;
  --t-node: #232a32;
  --t-node-line: #47525e;
  --t-ask-line: #a8862e;
  --t-say: #2b323b;
  --t-say-line: #4b5561;
  --t-ref-line: #5a6571;
  --t-root: #3a4553;                /* 起点和导图中心比底色亮一档，不然看不出来 */
  --t-root-ink: #ffffff;
  --t-root-dim: #b9c3cd;
  --t-edge: #8b97a4;
  --t-edge-dash: #5f6b78;
  --t-mm-line: #5a6571;
  --t-mm-mix: 20%;
  --t-toast: #e8ecf0;               /* 提示条反过来用浅底，才能从深色页面里跳出来 */
  --t-toast-ink: #12161b;
  --t-pre: #0d1014;
  --t-pre-ink: #c7cfd8;
  --t-scrim: rgba(0,0,0,.55);
}
/* 下面几条是只有夜间主题才需要的覆盖 */
/* 导图的 8 组分支色、产品线卡片的色条，是写在标签行内的 --c / --cs，只能一个个用 !important 换成深底上看得清的亮色。
   如果以后 app.js 里 MM_COLORS 换了颜色，这里对不上也不要紧：会退回原来的颜色加白字，照样能看，只是线暗一点。 */
html[data-theme="night"] [style*="--c:#06894c"] { --c: #46c486 !important; --cs: #133525 !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#1c5d87"] { --c: #62aee6 !important; --cs: #14293b !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#a06400"] { --c: #e0aa48 !important; --cs: #33290f !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#6b4fa3"] { --c: #a995e6 !important; --cs: #272042 !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#0f7b7b"] { --c: #4cc3c3 !important; --cs: #0f3033 !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#a8452e"] { --c: #ec8f74 !important; --cs: #3a1f18 !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#4a5a6a"] { --c: #9fb0c0 !important; --cs: #262d35 !important; --t-mm-on: #0e1317; }
html[data-theme="night"] [style*="--c:#8a3f7a"] { --c: #dd8fcb !important; --cs: #371c32 !important; --t-mm-on: #0e1317; }
/* 侧栏、首页右上角的深色块、计算器结果区：底色和页面太接近，描一道细边分开 */
html[data-theme="night"] .side { border-right: 1px solid var(--line); }
html[data-theme="night"] .hero-side,
html[data-theme="night"] .calc-out { border: 1px solid var(--line); }
/* 浮层的阴影在深色底上要重一点才看得出来 */
html[data-theme="night"] .results-box,
html[data-theme="night"] .vars,
html[data-theme="night"] .kb-theme-panel { box-shadow: 0 18px 44px rgba(0,0,0,.55); }
/* 荧光笔：浅色主题是“黄底黑字”，深底上照搬会发灰看不清，改成“亮黄字 + 一层淡黄底” */
html[data-theme="night"] mark.hl { color: #ffe08a; }
/* 报价图是白底的图片，夜里太亮，压一点 */
html[data-theme="night"] .fig img { opacity: .9; }

}   /* @media screen 到这里结束 */

/* ==========================================================================
   四、主题按钮和面板（所有主题都用，含默认）
   ========================================================================== */
.kb-theme-slot { position: relative; display: inline-flex; flex: none; }
.top.kb-theme-open { z-index: 45; }   /* 面板打开时把顶栏抬到搜索结果上面，不然面板会被盖住 */

.kb-theme-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; }
.kb-theme-btn[aria-expanded="true"] { border-color: var(--brand); }
/* 色点：一半侧栏色、一半点缀色，一眼看出现在是哪个主题 */
.kb-theme-dot {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: linear-gradient(135deg, var(--nav) 50%, var(--brand) 50%);
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--line);
}

.kb-theme-panel {
  position: absolute; z-index: 5; top: calc(100% + 8px); right: 0;
  width: 318px; max-width: calc(100vw - 24px); max-height: calc(100vh - 74px); overflow-y: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 10px 10px; box-shadow: 0 16px 36px rgba(23,33,43,.18);
  display: none; text-align: left; white-space: normal;
}
.kb-theme-panel.on { display: block; animation: kb-theme-pop .14s ease-out; }
@keyframes kb-theme-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.kb-theme-head { padding: 0 6px 8px; }
.kb-theme-head b { display: block; font-size: 15px; line-height: 1.5; }
.kb-theme-head span { display: block; font-size: 12.5px; line-height: 1.6; color: var(--muted); margin-top: 2px; }

.kb-theme-list { display: grid; gap: 2px; }
.kb-theme-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 7px 8px 7px 6px; border: 0; border-radius: 9px; background: none; color: var(--ink); text-align: left;
}
.kb-theme-item:hover { background: var(--line-soft); }
.kb-theme-item[aria-checked="true"] { background: var(--line-soft); }
.kb-theme-txt { flex: 1; min-width: 0; }
.kb-theme-txt b { display: block; font-size: 14px; font-weight: 600; line-height: 1.45; }
.kb-theme-txt small { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 小色板：一张缩小的页面。左边一条是侧栏，右边是底色，上面一张纸、一道点缀色、一个绿气泡。
   它身上挂着 data-theme，所以下面这些变量取到的是“那个主题”的颜色，不是当前主题的。 */
.kb-theme-sw {
  position: relative; flex: none; width: 62px; height: 44px; border-radius: 7px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line);
}
.kb-theme-sw i { position: absolute; display: block; }
.kb-theme-sw i:nth-child(1) { left: 0; top: 0; bottom: 0; width: 17px; background: var(--nav); }
.kb-theme-sw i:nth-child(1)::after { content: ""; position: absolute; left: 5px; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.kb-theme-sw i:nth-child(2) { left: 23px; right: 5px; top: 6px; height: 15px; border-radius: 3px; background: var(--paper); border: 1px solid var(--line); }
.kb-theme-sw i:nth-child(2)::after { content: ""; position: absolute; left: 3px; top: 4px; width: 15px; height: 5px; border-radius: 2px; background: var(--brand); }
.kb-theme-sw i:nth-child(3) { left: 23px; top: 26px; width: 24px; height: 10px; border-radius: 2px 5px 5px 5px; background: var(--go-soft); border: 1px solid var(--go-line); }
/* 默认主题的小色板：照抄 style.css 里 :root 的值（当前是别的主题时，它也得显示墨绿） */
.kb-theme-sw[data-theme="default"] {
  --bg: #f4f2ec; --paper: #ffffff; --line: #e1ddd2; --nav: #0e2a21; --gold: #f7d560;
  --brand: #06894c; --go-soft: #e3f5e9; --go-line: #b4e0c3;
}

/* 选中标记：右边一个圆，选中的打勾 */
.kb-theme-tick { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line); }
.kb-theme-item[aria-checked="true"] .kb-theme-tick { background: var(--brand); border-color: var(--brand); }
.kb-theme-item[aria-checked="true"] .kb-theme-tick::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid var(--brand-on); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* 屏幕不够宽（含手机）：按钮只留一个色点，宽 40px，把地方让给搜索框 */
@media (max-width: 1080px) {
  .kb-theme-btn { width: 40px; padding: 0; justify-content: center; }
  .kb-theme-btn .long { display: none; }
}

/* ==========================================================================
   五、切换时的过渡
   只让三块大底色（页面底、侧栏、顶栏）缓 0.2 秒，别的元素直接换，页面再长也不会卡。
   theme.js 换主题时给 <html> 加 kb-theme-anim，0.28 秒后拿掉。
   ========================================================================== */
html.kb-theme-anim body,
html.kb-theme-anim .top { transition: background-color .2s ease; }
html.kb-theme-anim .side { transition: background-color .2s ease, transform .2s; }
@media (prefers-reduced-motion: reduce) {
  html.kb-theme-anim body,
  html.kb-theme-anim .top,
  html.kb-theme-anim .side { transition: none; }
  .kb-theme-panel.on { animation: none; }
}