/* FrameFlow 设计令牌 —— 唯一来源
 * 取值 = 官方色板（docs/2026-09-21-交给WorkBuddy-网站设计资料.md 第 4 节）
 * ⚠️ 放在各页 <style> 之前；页面内若仍有同名定义会覆盖这里。
 */
:root{
  /* ---- 杰美调色卡（2026-09-26 21:30 首页板块背景用；按色卡原名命名） ---- */
  --jm-snow-white:   #FFFEF9;   /* 雪白 */
  --jm-aurora-blue:  #78C7D2;   /* 极光蓝 */
  --jm-morning-blue: #89ABE3;   /* 清晨蓝 */
  --jm-fish-belly:   #F7F4ED;   /* 鱼肚白 */
  --jm-ivory:        #FFFEF8;   /* 象牙白 */
  --jm-snow-blue:    #D0E7F5;   /* 雪山蓝 */
  --jm-stream-blue:  #88C6ED;   /* 溪水蓝 */
  --jm-han-jade:     #F8F4ED;   /* 汉白玉 */
  --jm-rain-cyan:    #A7DCDD;   /* 雨青（09-28 12:4x 新增：首屏大标题的逐字点亮色） */
  --jm-sky-cyan:     #95D4D1;   /* 天青（09-28 15:2x 新增：作品范例点亮色试色用） */
  --jm-sand-white:   #E8E8E8;   /* 沙白（09-28 15:2x 新增：作品范例点亮色试色用） */
  --jm-laser-green:  #B6FF2E;   /* 激光绿（09-28 15:3x 试色用）
                                 ⚠️ 属**荧光色**，与 09-23 拍板的「✗ 荧光」方向冲突，仅试色、勿常态使用 */
  --jm-amber:        #F5A623;   /* 琥珀金（09-28 15:4x 试色用；暖色，卡面语「奖励、温暖、满足」） */
  /* ---- 跳字/变色特效的「点亮色」（2026-09-27 杰：统一为 深夜紫） ---- */
  --hop-lit:         #3F1D78;   /* 深夜紫 · 浅底上用（四板块英文行、留言板页头等） */
  --hop-lit-on-dark: #C9B6E8;   /* 深夜紫的同色系提亮档 · 深色底（首屏大标题、深色主题页头）用 */
  /* 为什么分两档：实测深夜紫在浅底 10.6~11.4:1（达标），但压在深色视频/深色主题上只有 1.6:1
   * —— 与背景亮度不足，字会看不见。故深底改同色系浅调，保持「紫」的统一观感又不牺牲可读性。 */
  /* ---- 09-27 22:xx 杰：点亮色由「全站统一深夜紫」改为**按位置分色** ----
   * 五处各自指定；位置按杰给的截图逐句定位，选择器写在本文件末尾的覆盖段。
   * ⚠️ --hop-lit-on-dark 自本次起**已无引用**（首屏改用 --hop-hero），保留仅供回退，勿删以免影响历史快照。 */
  --hop-hero:   #A7DCDD;   /* ① 首页首屏大标题（深色视频底）· **雨青**（＝--jm-rain-cyan）
                             09-28 12:4x 杰：由溪水蓝 #88C6ED 改为雨青（旧值留档备退）。 */
  --hop-form:   #1B57B8;   /* ② 功能介绍板块标题（近白底）· 晴空蓝**加深一档**
                             色卡原值 #89C2FF：实测压近白底只有 1.80:1、与邻居字仅 1.29:1 → 点亮看不出。
                             杰 09-27 22:5x 选「加深恢复可见」；实测加深后 6.5:1 / 2.8:1。
                             ⚠️ 09-28 12:4x 杰核对了「换成雪白 #FFFEF9」的效果后确认「不换」，保持现状。 */
  --hop-motion: #E8E8E8;   /* ③ 作品范例板块标题（清晨蓝底）· **沙白**（＝--jm-sand-white）
                             09-28 15:5x 杰最终拍板「要沙白色上线」：由琥珀金 #F5A623 改为沙白。
                             ⚠️ 本值是**上线值**。
                             说明：沙白与 ⑤ 评价（鱼肚白 #F7F4ED）同一路数（近白、冷调），
                             不向「蓝白+青蓝」体系引入新色系；亮度差在试过的候选里最大。
                             沿革：#B89AD9 → #4B2A82（09-27）→ 雪白（回退）→ 极光蓝（曾上线）
                                   → 天青 → 沙白 → 激光绿 → 琥珀金 → **沙白（本次上线）**。
                             实测：vs 板块底 1.90:1、**vs 邻居字 10.04:1** —— 亮度差最大，点亮跳得出来。 */
  --hop-notice: #78C7D2;   /* ④ 通知板块标题（象牙白底）· **极光蓝**（＝--jm-aurora-blue）
                             09-28 12:4x 杰：由银朱红 #BF242C（5.93:1）改为极光蓝（旧值留档备退）。
                             ⚠️ 极光蓝压象牙白 ≈1.9:1，比银朱红**明显更淡** —— 属「柔和、不抢眼」的选择。 */
  --hop-review: #F7F4ED;   /* ⑤ 评价板块标题（溪水蓝底）+ 画廊/我的作品深色页头 · 鱼肚白（＝--jm-fish-belly） */

  /* 蓝白主题（2026-09-23 杰拍板：云白 #F8FFFF + 青蓝 #00B7C7） */
  --brand:         #00B7C7;
  --brand-deep:    #0092A8;
  /* 深底上的品牌文字/描边（按钮底色仍用 --brand，保证白字可读） */
  --brand-ink:     #008C9E;
  --brand-ink-2:   #00A3B5;
  --ink:           #0B3B47;
  --ink-2:         #27606D;
  --ink-3:         #4E8290;
  --bg:            #F8FFFF;
  --bg-deep:       #00B7C7;
  --surface-2:     #FFFFFF;
  --dark:          #EAFBFD;
  --dark-2:        #CFF3F7;
  --acid:          #C9F2F6;
  --sky-0:         #F8FFFF;
  --sky-1:         #EFFCFD;
  --sky-2:         #DFF8FA;
  --sky-3:         #C2F0F4;
  --sky-4:         #6FD9E3;
  --sky-5:         #00B7C7;
  --surface:       rgba(255,255,255,.88);
  --line:          rgba(10,58,70,.15);
  --line-strong:   rgba(10,58,70,.32);
  --font:          "Inter","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:          1240px;
  --r-sm:          10px;
  --r-md:          16px;
  --r-lg:          24px;
  --r-xl:          32px;
  --shadow-sm:     0 1px 2px rgba(18,52,80,.06), 0 2px 8px rgba(18,52,80,.06);
  --shadow-md:     0 2px 4px rgba(18,52,80,.06), 0 12px 32px rgba(18,52,80,.10);
  --shadow-lg:     0 4px 8px rgba(18,52,80,.07), 0 28px 64px rgba(18,52,80,.14);

  /* ---- A1 归并新增：语义色 ---- */
  --white: #0B3B47;
  --gold: #F0C46A;
  --danger: #E23D2E;
  --danger-2: #D64545;
  --ink-4: #0092A8;

  /* ---- A1 归并新增：RGB 通道令牌（供 rgba(var(--x),alpha) 复用） ---- */
  --w-rgb: 255,255,255;
  --black-rgb: 8,54,64;
  --shade-rgb: 8,54,64;
  --deep-rgb: 4,38,46;
  --sky0-rgb: 248,255,255;
  --brand-ink2-rgb: 0,146,168;
  --brand-mid-rgb: 0,146,168;
  --ink4-rgb: 143,195,234;
  --gold-rgb: 240,196,106;
  --gold-deep-rgb: 232,163,23;
  --gold-ink-rgb: 154,107,0;
  --danger-rgb: 226,61,46;
  --surface-rgb: 255,255,255;


  /* ---- A1 归并：新增语义令牌（值取自页面既有设计，供主题化切换） ---- */
  --sel: #D9F5F8;
  --sky-6: #B3ECF1;
  --sky-7: #D8F7FA;
  --sky-8: #9BE4EC;
  --brand-shadow-rgb: 0,140,160;
  --brand-mid2-rgb: 0,163,181;
  --shade2-rgb: 120,200,210;
  --deep2-rgb: 0,80,92;
  --abyss-rgb: 0,60,70;
  --abyss2-rgb: 0,55,65;
  --slate-rgb: 78,130,144;
  --teal-rgb: 14,158,150;
  --green-rgb: 31,169,127;
  --lime-rgb: 212,249,78;
  /* ---- A1 二轮补漏 ---- */
  --brand-mid: #00A3B5;
  --gold-deep: #E8A317;
  --gold-ink: #9A6B00;
  --brand-rgb: 0,183,199;
  --teal: #0E9E96;
  --teal-deep: #0A7D77;
  --cat-ink: #12100E;
  --cat-olive: #5A7A16;
  --cat-olive-deep: #2B3000;
  --cat-lime: #D4F94E;
  --cat-green: #1C7A55;
  --cat-green-2: #1F8A5B;
  --cat-plum: #7B3A6E;
  --cat-plum-2: #8E3A5E;
  --deep2-hex: #06707E;

  /* ---- 字阶标尺（2026-09-22 全站视觉盘点后建立）----
   * 现状：页级主标题散布在 clamp 上限 40/42/46/56/68 五档（如 .pagehead h1 有
   *   clamp(28px,3.2vw,40px) 与 clamp(34px,4.4vw,56px) 两种写法），无规律。
   * 处理：保留 clamp 三段式以维持响应式，只统一「上限」，并把首页 hero 这一特例单独列为令牌。
   *   --fs-page 取 52 —— 因现有主流值为 46 与 56，取中点使两侧改动幅度最小。
   * ⚠️ 不要把这些令牌改成固定 px：会破坏移动端字号收缩。
   */
  --fs-hero:    clamp(52px, 7vw, 98px);    /* 仅首页 hero（已定稿，勿动） */
  --fs-display: clamp(38px, 5.4vw, 68px);  /* 全局 h1 默认值，管理后台等大页沿用 */
  --fs-page:    clamp(32px, 4.4vw, 52px);  /* 页级主标题：.pagehead h1 / .doc-hero h1 */
  --fs-h2:      clamp(30px, 3.4vw, 44px);  /* 全局 h2 默认值 */
  --fs-doc-h2:  22px;                      /* 文档正文小标题（语义不同，不从 fluid 继承） */
  --fs-h3:      15px;                      /* 卡标题 / 三级标题 */
}

/* ---- 内测期组件状态（随批次增删，正式版恢复时移除） ----
 * 顶栏「每日签到」入口与移动端快捷项的隐藏，2026-09-24 起改由
 * assets/ff-messages.js 的 FF_TRIAL 块统一处理（D-2）：
 *   FF_TRIAL=true  内测期 → 隐藏
 *   FF_TRIAL=false 正式版 → 自动恢复，落位在「消息通知」下方
 * 原来这里写死的 `#hxSignItem, #mSign { display: none !important; }` 已删除 ——
 * 它不带开关，翻 FF_TRIAL 也恢复不了，会让上线时签到入口永远回不来。
 * 两个容器（.hxm 下拉、.mobile-nav）默认都是收起的，所以改到 JS 后没有闪现问题。
 */


/* ============ 顶栏（2026-09-26 22:xx 改：恒透明）============
 * 说明：本文件是**全站唯一必挂**的样式表（每页 <link> 它），所以这条全站性覆盖放这里 ——
 *       ff-shared.css 只有 20 个 doc 模板页引用，改它不生效。
 * 目标形态：**全透明底 + 完整桌面导航**（logo · 工作台⌄ · 首页/作品/画廊/留言板/个人 · 登录 · 免费开始）。
 * 2026-09-26 22:xx 杰：**所有页面导航栏背景改回完全透明**，移除背景填充 / 渐变 / 半透明，
 *   滚动与悬停状态均保持透明，不产生任何背景色或遮罩层。
 * 因此本段只保留「露出桌面导航」这一条；背景/毛玻璃/投影/下边框改由下方 #hdr 强制透明段负责。
 * 各页原有规则**一字未删**，回退＝删掉强制透明段。
 * ⚠️ 仅作用于 ≥1256px（汉堡断点以上）；≤1255px 仍是原移动端布局与首屏透明态。 */
@media (min-width:1256px){
  .site-header.site-header .nav{ display: flex !important; }
  .site-header.site-header .menu-btn,
  .site-header.site-header .hxm-wrap,
  .site-header.site-header .hxm-btn,
  .site-header.site-header .mobile-nav{ display: none !important; }   /* 桌面露出导航后不再需要汉堡 */
  .site-header.site-header:not(.is-stuck) .nav a,
  .site-header.site-header:not(.is-stuck) .nav-ws-btn,
  .site-header.site-header:not(.is-stuck) .nav-ws .nav-ws-btn svg,
  .site-header.site-header:not(.is-stuck) .link-quiet{
    color: var(--ink-2) !important; text-shadow: none !important; border-color: transparent !important;
  }
  .site-header.site-header:not(.is-stuck) .nav a.on,
  .site-header.site-header:not(.is-stuck) .nav-ws-btn.on{ color: var(--brand-ink) !important; }
  .site-header.site-header:not(.is-stuck) .landing-logo,
  .site-header.site-header:not(.is-stuck) .logo{ color: var(--ink) !important; }
  .site-header.site-header:not(.is-stuck) .nav-sep{ background: var(--line) !important; }
}

/* ============ 顶栏恒透明（2026-09-26 22:xx 杰）============
 * 需求原文：全部页面导航栏背景改回**完全透明**，移除现有的背景填充、渐变色或半透明效果，
 *          确保滚动及悬停状态下均保持**完全透明**，不产生任何背景色或遮罩层。
 * 面板来源有三层，全部在这一段里统一压掉：
 *   ① 各页内联 `#hdr/site-header` 基础规则：`background: var(--surface)` + `backdrop-filter: blur(18px)`
 *      （`--surface` = rgba(255,255,255,.88)，即那层半透明白）
 *   ② `.site-header.is-stuck{background: var(--surface); box-shadow: …}`（首页 / 蓝白试验）
 *   ③ 内联 `#ffHeaderUnify` 的 `background: var(--surface) !important`（34 页，已从源头删掉）
 * 为什么用 `#hdr` 前缀：id 级特异性(1,0,0) 高于内联块里 `.site-header.site-header:not(.is-stuck)`
 *   的 (0,3,0)，且本文件在全站 <link> 里先于页面内联 <style> 加载；两边都带 !important 时按特异性定胜负，
 *   所以无论页面内联怎么写，这一段都能压住。
 * ⚠️ 只作用于顶栏本行（`#hdr`）与其伪元素；顶栏内的下拉菜单面板（`.ws-menu` / `.hxm`）
 *   与按钮悬停底色属于控件本体，不在「导航栏背景」范围内，保持原样。 */
#hdr,
#hdr.is-stuck,
#hdr:hover,
#hdr:focus-within,
#hdr:focus{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}
#hdr::before,
#hdr::after{ content: none !important; background: none !important; }
/* ---- 顶栏内联控件也全状态无底色（09-26 杰：滚动与**悬停**均不得产生背景色）----
 * 实测会出底色的三处：`.hxm-btn:hover` 7% 白、`.bell:hover` 实心 `--bg-deep`、
 * `.bell` 与 `.nav-ws .nav-ws-btn` 在未吸附态各带 8% 白胶囊。这里统一压成 none。
 * 保留：下拉菜单面板（菜单本体需底色才可读）、导航分隔线 `.nav-sep`（是分隔线不是填充）、
 *      logo 色块与「免费开始」按钮（品牌标识与按钮本体）。 */
#hdr .hxm-btn,
#hdr .hxm-btn:hover,
#hdr .hxm-btn:focus,
#hdr .hxm-btn[aria-expanded="true"],
#hdr .nav-ws .nav-ws-btn,
#hdr .nav-ws .nav-ws-btn:hover,
#hdr .nav-ws .nav-ws-btn:focus,
#hdr .nav-ws .nav-ws-btn[aria-expanded="true"],
#hdr .bell,
#hdr .bell:hover,
#hdr .bell:focus{
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}


/* ============ 移动端适配（2026-09-27 杰：手机端体验太差，全面优化）============
 * 为什么放这里：本文件是**全站唯一必挂**的样式表（38 页都有 <link>）；
 *   ff-shared.css 只有 doc 模板页引用，改它不生效。
 * 断点：1255px＝全站既有「汉堡态」分界；760/560/480px＝真手机窄屏。
 * 原则：只「点名」体检里实测会出问题的选择器，不做通配大扫除 ——
 *   20 个 doc 页与工作台/编辑页有大量密集控件，通配 min-height 会把版式顶开。
 * 44px＝命中区下限（Apple HIG / Material 同一口径），多数元素只加 min-height，
 *   视觉尺寸基本不变。
 * 回退＝整段删掉。
 */

/* ---- 1. 触屏基础 ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
a, button, [role="button"], input, select, textarea, summary{
  touch-action: manipulation;                 /* 去掉「双击缩放」的 300ms 判定延迟 */
  -webkit-tap-highlight-color: transparent;   /* 去掉安卓点击灰块，改由 :active 自绘 */
}
@media (hover:none){
  /* 触屏没有 hover，补一个按压反馈（原设计全靠 hover，手指上等于没有反馈） */
  a:active, button:active, [role="button"]:active{ opacity:.68; }
}

/* ---- 2. 触控区 ≥44px ---- */
@media (max-width:1255px), (pointer:coarse){
  /* 顶栏：logo 30px 高、汉堡 12×2（作品详情缺尺寸规则）都在这里收口 */
  #hdr .logo, #hdr .landing-logo{ min-height:44px; display:inline-flex; align-items:center; }
  #hdr .hxm-wrap{ position:relative; }
  #hdr .hxm-btn{
    width:44px; height:44px; min-width:44px; display:grid; place-items:center;
    border:1px solid var(--line); border-radius:12px; background:transparent;
    color:var(--ink); cursor:pointer;
  }
  #hdr .hxm-btn svg{ width:20px; height:20px; display:block; }
  #hdr .hxm-btn .hxm-ico-close{ display:none; }
  #hdr .hxm-btn[aria-expanded="true"] .hxm-ico-burger{ display:none; }
  #hdr .hxm-btn[aria-expanded="true"] .hxm-ico-close{ display:block; }
  #hdr .menu-btn{ width:44px; height:44px; }
  #hdr .bell, #hdr .nav-ws-btn{ min-height:44px; }
  /* 顶栏两个下拉的条目 */
  .hxm-item, .wsm-item{ min-height:44px; align-items:center; }
  /* 移动端抽屉导航 */
  .mobile-nav a{ min-height:44px; display:flex; align-items:center; }

  /* 表单控件：高度 + 防 iOS 聚焦缩放（字号 <16px 时 iOS 会强制放大整页） */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  select, textarea{ min-height:44px; font-size:16px; }

  /* 按钮 / 页签 / 图标键（点名体检里偏小的那些） */
  .chip, .chip.on, .adm-btn, .ntd-tab, .wk-fav, .qm-close, .wl-go, .inv-mini,
  .menu-btn, .pgn-btn, .doc-pager a{ min-height:44px; }
  /* doc 页面包屑「首页」（26×20）与「本页目录」锚点（312×21） */
  .doc-crumb a{ min-height:44px; display:inline-flex; align-items:center; }
  .doc-toc ol li a{ min-height:44px; display:flex; align-items:center; }
  /* 页脚链接（16~22px 高） */
  .site-footer .foot-col a,
  .site-footer .foot-social a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ---- 3. 页脚栅格：窄屏收到两列 / 一列 ----
 * 背景：作品详情 / 评价详情 / 通知详情三页漏搬了响应式块，390 视口下页脚仍是 5 列，
 *   「产品」「资源」被挤成竖排单字。
 * ⚠️ 必须 !important：ff-shared.css 的 .foot-grid 基样式在本文件之后加载，同权重后者胜；
 *   33 个 doc 页各自那条「760px→1 列」的规则同样更靠后。不带 !important 就是空转（实测过）。
 * 为什么是两列而不是一列：页脚链接已按触控口径抬到 44px 高，
 *   5 组 22 条链接排成一列会把手机页脚撑到约 1300px（比一屏还长）；
 *   两列后约 700px，仍好点。≤400px 再降一列。 */
@media (max-width:760px){
  .foot-grid{ grid-template-columns:1fr 1fr !important; gap:32px 18px; }
  .foot-brand{ grid-column:1/-1; }
}
@media (max-width:360px){
  .foot-grid{ grid-template-columns:1fr !important; }
}

/* ---- 4. 小字号下限（≤560px）----
 * 体检实测：11.5px 出现在约 20 页（#mSignFlag 等），首页装饰字最低 7px。
 * 触屏阅读下限取 12px；确属装饰的给 9~10px 保底。 */
@media (max-width:560px){
  #mSignFlag, .m-flag, .kw-pane-tag, .ai-mark, .nk{ font-size:12px; }
  #quotaMini, .quota-mini{ font-size:11.5px; }
  .pc-side{ font-size:9px; }
  .pc-top{ font-size:9.5px; }
  .pc-bottom{ font-size:10px; }
}


/* ---- 5. 触控区补充（09-27 二轮：复测后点名补）---- */
@media (max-width:1255px), (pointer:coarse){
  .ico-btn{ min-width:44px; min-height:44px; }              /* 我的作品卡上的收藏/发布等图标键（原 30×30） */
  .topic button, .seg button, .seg a{ min-height:44px; }    /* 留言板话题页签、编辑页画幅比例键（原 36 / 28 高） */
  .site-footer .logo{ min-height:44px; display:inline-flex; align-items:center; }  /* 页脚 logo（原 310×30） */
}

/* ---- 6. 小字号下限（09-27 二轮：改成 !important）----
 * 一轮直接写 font-size 无效 —— 页面内联块与本段同为 (0,1,0)，
 * 而内联块在本文件之后加载，同权重后者胜，所以内联块赢。
 * 这里必须 !important 才盖得住；CSS 没有通用的「最小字号」，只能逐类点名。
 * 名单来自 390 视口实测出来的最小字号元素。 */
@media (max-width:560px){
  .pc-top, .pc-bottom,
  .dt-title, .quota-note, .cmp-group, .ref-tip, .gf-group, .ai-mark,
  .attach-num, .tp-hint, .inv-st, .adm-pill, .nk, .kw-pane-tag,
  .m-flag, #mSignFlag, #quotaMini, .quota-mini{ font-size:12px !important; }
  /* 确属装饰、放大反而破坏邮戳卡版式的，给 10px 保底并收紧字距 */
  .pc-side{ font-size:10px !important; letter-spacing:.18em !important; }
}


/* ---- 7. 三轮收口（09-27 二次复测后剩下的点名项）---- */
@media (max-width:1255px), (pointer:coarse){
  .msg-act{ min-height:44px; display:inline-flex; align-items:center; }  /* 留言卡的 点赞/回复/举报（原 21 高） */
  .work-follow{ min-height:44px; }                                       /* 画廊卡「关注」（原 43×28） */
  .au-x{ min-width:44px; min-height:44px; }                              /* 协议弹层关闭键（原 34×34） */
  .site-footer .foot-bottom a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* 只列「实测就是 11.5px 或更小」的类：CSS 没有 min-font-size，
 * 用 !important 逐个抬到 12px。⚠️ 不列 .tag 这类同名不同尺寸的通用类 ——
 * font-size 是覆盖而非保底，遇到本来更大的同名类会把它压小。 */
@media (max-width:560px){
  .kw-kicker, .note-date, .dp-dir, .quota-note,
  .ref-tip, .attach-hint, .item-badge, .wk-kind{ font-size:12px !important; }
}


/* ---- 8. 四轮收口（09-27 三次复测后仅剩的页面专有类）---- */
@media (max-width:560px){
  .ntd-kicker, .work-tag, .msg-tag, .item-meta{ font-size:12px !important; }
}


/* ============ 跳字/变色特效的「点亮色」（2026-09-27 杰，22:xx 改为按位置分色）============
 * 19:30 那版是「全站统一深夜紫 #3F1D78」；本次杰逐一给了色卡，改为**按位置分色**：
 *   ① 首页首屏大标题              `#motionTitle`、`.motion-copy > p`   → **雨青**      var(--hop-hero)
 *   ② 功能介绍板块标题            `.kw-band[aria-label="功能介绍"]`     → 晴空蓝(加深) var(--hop-form)
 *   ③ 作品范例板块标题            `.kw-band[aria-label="作品范例"]`     → **沙白**      var(--hop-motion)
 *   ④ 通知板块标题                `.kw-band[aria-label="网站通知"]`     → **极光蓝**    var(--hop-notice)
 *   ⑤ 评价板块标题 + 两个深色页头   `[aria-label="内测用户评价"]` / 画廊 / 我的作品 → 鱼肚白 var(--hop-review)
 *   （09-28：①④ 换新色卡；②「不换」。③ 反复试色：雪白→回退→极光蓝→天青→沙白→激光绿→琥珀金→**沙白（已上线）**。）
 * ⚠️ 板块一律用 **aria-label** 做选择器，且**不加 `#about` 前缀、不用板块 id**：
 *    · 蓝白试验页的通知/评价板块**没有 id**（只有 aria-label）→ 用 #kwBandNotice/#kwBandReview 会漏；
 *    · 蓝白试验页的范例板块标签是「**产品范例**」，首页是「作品范例」→ 用 :is() 同时覆盖两种写法。
 * ⚠️ 必须 !important：页面规则形如 `.kw-big .hop-ch.lit`（0,3,0），会盖过不带 !important 的规则。
 * ⚠️ 只覆盖「点亮/悬停」这一态；**常驻底色不动**（各页仍是 rgba(...) 等淡色）。
 * ⚠️ 深色主题页（画廊 / 我的作品）不走本段，而是在各自 #ffDarkTheme 里改 --hop-lit。
 * 回退＝删掉本段（各页原色立即复现）。 */
.hop-ch.lit,
.hop-ch:hover{ color: var(--hop-lit) !important; }

/* ① 首屏大标题：压在深色视频上。深夜紫在此只有 1.55:1（看不见）；09-28 12:4x 起为雨青。 */
#motionTitle .hop-ch.lit, #motionTitle .hop-ch:hover,
.motion-copy > p .hop-ch.lit, .motion-copy > p .hop-ch:hover{ color: var(--hop-hero) !important; }
/* ② 功能介绍 */
.kw-band[aria-label="功能介绍"] .hop-ch.lit,
.kw-band[aria-label="功能介绍"] .hop-ch:hover{ color: var(--hop-form) !important; }
/* ③ 作品范例（两页标签不一致，一并覆盖） */
.kw-band:is([aria-label="作品范例"], [aria-label="产品范例"]) .hop-ch.lit,
.kw-band:is([aria-label="作品范例"], [aria-label="产品范例"]) .hop-ch:hover{ color: var(--hop-motion) !important; }
/* ④ 通知 */
.kw-band[aria-label="网站通知"] .hop-ch.lit,
.kw-band[aria-label="网站通知"] .hop-ch:hover{ color: var(--hop-notice) !important; }
/* ⑤ 评价 */
.kw-band[aria-label="内测用户评价"] .hop-ch.lit,
.kw-band[aria-label="内测用户评价"] .hop-ch:hover{ color: var(--hop-review) !important; }