/* ==========================================================================
   EmployerClaimsRC · 界面风格层（E 版「纸墨 · 朱印」· 覆盖层）
   --------------------------------------------------------------------------
   为什么是**新文件**而不是改 theme.css
     theme.css 是当前线上皮肤（D 版苔原 · 森系）的唯一真相，476 行、含九处动效与
     reduce 网；style.css 6640 行、单行不动。本文件是**第三层**：
        style.css（结构）  →  theme.css（D 版令牌 + 组件皮肤）  →  本文件（E 版覆盖）
     全部规则挂在 `html[data-skin="paper"]` 上 —— **不设该属性则整文件零生效**，
     回退方式是把 <link> 或 data-skin 去掉，不需要改任何一行既有代码。

   唯一真相源
     tools/style_proposal_palettes.py 的 PALETTES[key="paper"]。
     **禁止在本文件手写第二份色值**：改色先改色板源，再跑
     `python3 tools/style_proposal_palettes.py`（现 12/12 判据全过）。

   设计主张（一句话）
     满屏是纸（大面积几乎无彩，色度 6/255），**钢青是唯一的活跃色**（焦点/链接/
     进行中/主操作），**朱红只给「待判与风险」** —— 它出现即代表有事要人处理，
     所以全页出现次数必须是个位数。「该突出的突出」靠**配额**实现，不靠加粗加色。

   ★ 本版不做的事（写在这里防止后来人补上）
     · 数字滚动（640ms→380ms 也不做）：CSS 做不到「值变了才滚」，必须 JS 在重算
       落点加类。原型里那一段是假动效（值不变也播一次）—— **假动效比没动效更糟**，
       它会让人以为金额刚变过。等接线 JS 时再做，且必须挂在「值确实变了」的分支上。
     · 骑缝章 hover 回弹：站内没有这个元素，不加（照抄原型选择器 = 写了没人动的 CSS）。
     · 页签下划线滑动：需要共享的滑动条元素，现有 DOM 没有，不加。
   ========================================================================== */

/* ==========================================================================
   PART 0 · 设计令牌 —— E 版「纸墨 · 朱印」
   --------------------------------------------------------------------------
   五个色相：朱红 4.9° / 赭黄 38.9° / 墨绿 164.7° / 钢青 196.3° / 靛墨 228.6°
   （最小间隔 31.6°）。★ 靛墨是设计稿四色之外**补的第五色**：
     设计稿只有钢青/朱红/墨绿/赭黄四色（4 个色相），按判据 J1（>=5）直接判负 ——
     不是不好看，是结构线、数据轴、次级强调需要一个**不与主色抢焦点**的颜色。
     钢青管「正在发生」，靛墨管「一直存在」。
   ========================================================================== */
html[data-skin="paper"] {
  color-scheme: light;

  /* ---- 底色与表面（纸）---- */
  --bg: #faf8f4;              /* 纸底：色度 6/255，大面积几乎无彩 */
  --card: #fffdf9;            /* 卡片（style.css 62 处引用 --card，必须给） */
  --surface: #fffdf9;
  --surface-2: #f2eee6;       /* 凹陷面板 / 轨道 */
  --border: #e9e4da;
  --border-strong: #cfc6b6;
  --text: #24272d;            /* 墨 */
  --text-dim: #5c626b;        /* 对纸底 5.80:1（>=4.5，「看不清才累」） */

  /* ---- 品牌：钢青（唯一活跃色）---- */
  --primary: #216f8c;
  --primary-dark: #17566e;
  --primary-soft: #e3edf2;
  --accent: #55608f;          /* 靛墨：结构线 / 数据轴 / 次级操作 */
  --accent-2: #a8761a;        /* 赭黄：点缀，小面积 */
  --on-primary: #ffffff;

  /* ---- 语义 ---- */
  --danger: #b83c31;          /* 朱红：只给待判 / 风险 / 人工覆盖 */
  --danger-bg: #fae9e6;
  --warn: #8f6512;            /* 赭黄：待复核 / 需确认 */
  --warn-bg: #f9f0df;
  --ok: #13755c;              /* 墨绿：通过 / 完成 */
  --ok-bg: #e4f0ea;
  --info: #5b6478;            /* 墨灰蓝：中性提示、口径说明条 */
  --info-bg: #edf0f4;

  /* ---- 分类色位（categorical）----
     ★ 一个都不动。9 个单据大类靠它区分，唯一价值是「彼此可分」不是「好看」，
       判据由 tools/skin_converge_v484.py 的 audit_cats() 断言（36 组）。
       换肤改分类色 = 把「这张是什么单据」这条信息改掉。 */

  /* ---- 形状与投影（两档，都不超过 8% 黑）---- */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 1px rgba(36, 39, 45, .04);
  --shadow: 0 1px 2px rgba(36, 39, 45, .05);
  --shadow-lg: 0 6px 20px rgba(36, 39, 45, .09);

  /* ---- 别名族（style.css 74 处引用，值跟令牌走）----
     --mint* / --coral* / --amber* 名字与语义早已脱节，本层只换值不改名。
     ★ 两条**硬编码**的投影别名必须一起换：D 版把苔绿的 rgba 写死了，
       不换的话「卡片悬停」会在纸底上泛绿光。 */
  --grad-primary: linear-gradient(135deg, #216f8c 0%, #55608f 100%);
  --grad-soft: linear-gradient(135deg, #faf8f4 0%, #e3edf2 100%);
  --shadow-mint: 0 2px 8px rgba(33, 111, 140, .16);
  --shadow-coral: 0 2px 8px rgba(184, 60, 49, .14);

  /* ---- 动效令牌 ----
     ★★ 复合式（时长 + 缓动）：style.css 18 处按 `transition: X var(--t-fast)` 写。
        ★★★ 写 `animation` 时**绝不许再追加 var(--ease)** —— shorthand 里出现
        两个缓动值 ⇒ 整条声明在计算值阶段失效、`animation-name` 静默变回 none。
     纯时长另给一份 `--d-*`，供需要换缓动曲线的地方（spring / io）单独组合。
     ★ 上限 420ms 由色板判据 J["motion"].max_ms 写死，**含数据呈现动画在内、零例外**。 */
  --ease: cubic-bezier(.22, .61, .36, 1);          /* 默认：出场减速 */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* 只给「回弹」，不给「位移结束」 */
  --ease-io: cubic-bezier(.4, 0, .2, 1);           /* 淡入淡出：浮层、遮罩 */
  --d-fast: 140ms;
  --d-med: 260ms;
  --d-slow: 420ms;
  --t-fast: 140ms var(--ease);
  --t-med: 260ms var(--ease);
  --t-slow: 420ms var(--ease);
  --t-skel: 1300ms linear;    /* 唯一循环动画（有终态：数据到了就消失） */

  /* ---- 版式令牌 ----
     ★ --content-max 不动：1140 是量出来的（12 列社平工资表实测表宽 1063px），
       改大只是溢出，改小必然横滚。见 theme.css 该条注释。 */
  --body-bg: var(--bg);
  --topbar-bg: var(--surface);
  --content-max: 1140px;
  --pad-page: 32px 24px 64px;
  --pad-card: 26px;
  --fs-base: 14.5px;
  --lh-base: 1.75;
  --ring: rgba(33, 111, 140, .22);
  --track: var(--surface-2);
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", serif;
}

/* ==========================================================================
   PART 1 · 纸底与版式
   ========================================================================== */
/* 纸感来自「暖白 + 一层极淡的高光」，不是纹理图：
   任何 background-image 平铺都会在大屏上重绘，且打印/截图会糊。 */
html[data-skin="paper"] body {
  background-color: var(--bg);
  background-image: radial-gradient(1100px 520px at 12% -12%, #fffdf9 0%, rgba(255, 253, 249, 0) 62%);
  color: var(--text);
}
/* 结论句与页面身份用宋体系：只在**标题**上用，正文一律无衬线 ——
   宋体在低 DPI 屏上小字会糊，正文用它等于主动降低可读性。 */
html[data-skin="paper"] .page-header h2 {
  font-family: var(--font-serif);
  letter-spacing: .5px;
}

/* ==========================================================================
   PART 2 · 圆角分层（外大内小）
   --------------------------------------------------------------------------
   ★ 圆角必须**外大内小**：容器 16 / 控件 10 / 徽章 6。反过来（外小内大）
     会让按钮看起来像贴在卡片上的异物。style.css 里写死 12px、16px 的地方
     由 --radius-lg 统一（theme.css 已把它们收到令牌上）。
   ========================================================================== */
html[data-skin="paper"] .badge,
html[data-skin="paper"] .meta-chip { border-radius: var(--radius-sm); }
html[data-skin="paper"] .btn,
html[data-skin="paper"] input,
html[data-skin="paper"] select,
html[data-skin="paper"] textarea { border-radius: var(--radius); }
html[data-skin="paper"] .card,
html[data-skin="paper"] .upload-card,
html[data-skin="paper"] .result-card,
html[data-skin="paper"] .advice-card,
html[data-skin="paper"] .text-card,
html[data-skin="paper"] .case-card,
html[data-skin="paper"] .overview,
html[data-skin="paper"] .progress-card,
html[data-skin="paper"] .file-card,
html[data-skin="paper"] .dm-card,
html[data-skin="paper"] .training-card,
html[data-skin="paper"] .cap-fold {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
html[data-skin="paper"] .modal-card { border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(36, 39, 45, .20); }

/* ==========================================================================
   PART 3 · 导航与页签（沿用下划线语汇，只换「重量」）
   ========================================================================== */
html[data-skin="paper"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
}
html[data-skin="paper"] .global-nav-btn {
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
html[data-skin="paper"] .global-nav-btn:hover:not(.active) { color: var(--text); border-bottom-color: var(--border-strong); }
html[data-skin="paper"] .global-nav-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

/* 页内 Tab：与顶部导航同一套语汇；★ 去胶囊底板（theme.css 已去，这里补下划线过渡） */
html[data-skin="paper"] .tab,
html[data-skin="paper"] .detail-tab,
html[data-skin="paper"] .training-tab,
html[data-skin="paper"] .subtab-btn {
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}

/* ==========================================================================
   PART 4 · 卡片：纸面上「浮起」而不是「贴上去」
   ========================================================================== */
/* ★ 悬停抬升 3px（theme.css 是 2px）：2px 在 1x 屏上等于没动，
   4px 以上会让人以为卡片被点开了。 */
html[data-skin="paper"] .case-card,
html[data-skin="paper"] .dm-card,
html[data-skin="paper"] .training-card {
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
html[data-skin="paper"] .case-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}
html[data-skin="paper"] .dm-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
html[data-skin="paper"] .dm-thumb.clickable:hover {
  transform: translateY(-2px) scale(1.015);
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(33, 111, 140, .14);
}
/* 拖拽区：虚线换实线 + 纸色，hover 才转钢青（虚线在暖底上显脏） */
html[data-skin="paper"] .upload-zone {
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  border-radius: var(--radius-lg);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
html[data-skin="paper"] .upload-zone:hover,
html[data-skin="paper"] .upload-zone.dragover {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-soft);
}

/* ==========================================================================
   PART 5 · 按钮五态（默认 / 悬停 / 按下 / 焦点 / 禁用）
   --------------------------------------------------------------------------
   ★ 五态必须**两两可分**：只做 hover 的下场是键盘用户看不到自己在哪（无焦点态）、
     点了没反应（无按下态）、按钮灰着但还能点（禁用态只改了 opacity）。
   ========================================================================== */
html[data-skin="paper"] .btn {
  font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
html[data-skin="paper"] .btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
html[data-skin="paper"] .btn-primary:hover:not(:disabled) {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
/* ② 按下：位移 1px + 一次「墨点扩散」（见 PART 8 ③） */
html[data-skin="paper"] button.btn:active:not(:disabled) { transform: translateY(1px); }
/* ③ 焦点：必须给键盘用户。**不用 box-shadow 假焦点** —— 那会在深色底上被吃掉 */
html[data-skin="paper"] button:focus-visible,
html[data-skin="paper"] a:focus-visible,
html[data-skin="paper"] [role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
html[data-skin="paper"] input:focus,
html[data-skin="paper"] select:focus,
html[data-skin="paper"] textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
/* ④ 禁用：同时降对比 + 改指针。只降 opacity 的按钮「看着能点」 */
html[data-skin="paper"] .btn:disabled,
html[data-skin="paper"] .btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ==========================================================================
   PART 6 · 表格：去外框，只留行线
   --------------------------------------------------------------------------
   ★ 表头**不给底色**：满屏都是卡片，表格再套一层浅底就变成「盒中盒」。
     表头的层级靠**一条 2px 深线**表达（比底色轻，但同样读得出分区）。
   ★ sticky 操作列必须**自带不透明背景**，否则横滚时下层列从它底下透出来；
     所以 hover 底色要显式同步到 .op-col（style.css 第 938 行同因）。
   ========================================================================== */
html[data-skin="paper"] .data-table th,
html[data-skin="paper"] .data-table td { border-bottom: 1px solid var(--border); }
html[data-skin="paper"] .data-table th {
  background: transparent;
  color: var(--text-dim);
  border-bottom: 2px solid var(--border-strong);
}
html[data-skin="paper"] .data-table thead th.op-col { background: var(--card); }
html[data-skin="paper"] .data-table tbody tr { transition: background-color var(--t-fast); }
html[data-skin="paper"] .data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}
html[data-skin="paper"] .data-table tbody tr:hover td.op-col {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

/* ==========================================================================
   PART 7 · 结论区与语义配额
   --------------------------------------------------------------------------
   ★ settle-hero（「已算出金额」那块）从**满色块**改成**纸白 + 钢青立边**：
     满色块在纸底上是最抢眼的元素，而它承载的是「已经确定的事」—— 把最强的
     视觉重量给一个不需要人做决定的区块，是层级颠倒。
     （★ 该选择器的取值口径被回归锁引用：这里只换**配色**，不动结构与文本。）
   ========================================================================== */
html[data-skin="paper"] .settle-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  box-shadow: var(--shadow);
}
/* 风险等级徽章：V4.80 的 .level-pill 用内联 --lp-c/--lp-bg 供色，样式层只负责消费 */
html[data-skin="paper"] .level-pill {
  background: var(--lp-bg, transparent);
  color: var(--lp-c, inherit);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
html[data-skin="paper"] .badge {
  background: var(--ok-bg);
  color: var(--ok);
  border-radius: var(--radius-sm);
}
/* 口径说明条 / 中性提示：用墨灰蓝，不占用钢青的注意力预算 */
html[data-skin="paper"] .cap-fold > summary { font-weight: 600; }

/* ==========================================================================
   PART 8 · 动效清单（有纪律）
   --------------------------------------------------------------------------
   三条纪律
     ① **只给「状态发生了变化」的瞬间**：hover / 按下 / 入场 / 值被改写。
        没有状态变化的动画就是装饰，装饰看第三遍就是噪音。
     ② **只给一次**：清单入场、金额闪动都只播一次；常驻循环只有骨架微光
        （它是「在等」的指示，且数据到了就消失）。待处理脉冲只跑 2 遍。
     ③ **上限 420ms，零例外**：超过 420ms 会被读成「卡了一下」而不是「过渡」。
        唯一的例外是骨架微光（1300ms 循环）—— 它是等待指示不是过渡。

   ★★ 复合令牌自带缓动：下面每条 animation 只写 `var(--t-*)`，
       **绝不追加 var(--ease)**（两个缓动值 ⇒ animation-name 静默变 none）。
   ========================================================================== */

/* ---- ① 清单入场（260ms，前 8 条逐条错开 45ms）----
   ★ 只错开前 8 条：清单可能上百行，全量错开 = 最后一条延迟几秒才出现（那是卡顿）。
   ★★ 两个真实载体都要挂：.case-card（view-analyze 案件清单）与
     .intake-case-row（审核&理算 → 案件审核，**当前用户真正在看的清单**）。
     只挂前者的后果是「动效写了、页面上没有任何东西在动」—— 静默不报错。 */
@keyframes paperCardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-skin="paper"] .case-card,
html[data-skin="paper"] .intake-case-row { animation: paperCardIn var(--t-med) both; }
html[data-skin="paper"] .case-card:nth-child(1),
html[data-skin="paper"] .intake-case-row:nth-child(1) { animation-delay: 0ms; }
html[data-skin="paper"] .case-card:nth-child(2),
html[data-skin="paper"] .intake-case-row:nth-child(2) { animation-delay: 45ms; }
html[data-skin="paper"] .case-card:nth-child(3),
html[data-skin="paper"] .intake-case-row:nth-child(3) { animation-delay: 90ms; }
html[data-skin="paper"] .case-card:nth-child(4),
html[data-skin="paper"] .intake-case-row:nth-child(4) { animation-delay: 135ms; }
html[data-skin="paper"] .case-card:nth-child(5),
html[data-skin="paper"] .intake-case-row:nth-child(5) { animation-delay: 180ms; }
html[data-skin="paper"] .case-card:nth-child(6),
html[data-skin="paper"] .intake-case-row:nth-child(6) { animation-delay: 225ms; }
html[data-skin="paper"] .case-card:nth-child(7),
html[data-skin="paper"] .intake-case-row:nth-child(7) { animation-delay: 270ms; }
html[data-skin="paper"] .case-card:nth-child(n+8),
html[data-skin="paper"] .intake-case-row:nth-child(n+8) { animation-delay: 315ms; }

/* 清单行悬停：一层极浅的钢青底 —— 「鼠标在哪一行」不靠脑内对焦 */
html[data-skin="paper"] .intake-case-row {
  transition: background-color var(--t-fast);
  border-radius: var(--radius);
}
html[data-skin="paper"] .intake-case-row:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

/* ---- ② 就诊分区依次点亮（260ms，延迟走内联 --i）----
   ★ 用 --i 而不是 nth-child：分区前还有 .dp-zhead / .dp-znote 两个兄弟，
     nth-child 的序号会被顶偏（偏一位 = 第一组不亮，且不报错）。 */
@keyframes paperTlIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html[data-skin="paper"] .dp-visit {
  animation: paperTlIn var(--t-med) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ---- ③ 按钮按下「墨点扩散」（0ms 起，420ms 淡出）----
   ★ 用 CSS 而不是 JS 监听 pointerdown：真涟漪要读指针坐标，为一个反馈动作
     给全站按钮挂监听不划算。这里的形态是「中心扩散的墨点」，够表达「按到了」。
   ★ 白底按钮用钢青墨点，主色按钮用白墨点 —— 同一个形态在两种底上都看得见。 */
html[data-skin="paper"] button.btn { position: relative; overflow: hidden; }
html[data-skin="paper"] button.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transform: scale(.35);
  background: radial-gradient(circle at 50% 50%, rgba(33, 111, 140, .20), rgba(33, 111, 140, 0) 70%);
  transition: opacity var(--d-slow) var(--ease-io), transform var(--d-slow) var(--ease-io);
}
html[data-skin="paper"] button.btn-primary::after {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
}
html[data-skin="paper"] button.btn:active::after { opacity: .55; transform: scale(1); transition: none; }

/* ---- ④ 比例条推进（420ms，ease-io）----
   ★ 真实载体是两个：.case-progress-fill（案件卡内进度条）与
     .fp-fill（审核&理算清单行的「整体进度」）。style.css 里 .fp-fill 的过渡是
     写死的 .3s ease —— 顺手收进令牌，不然它不听皮肤的话。 */
html[data-skin="paper"] .case-progress-fill,
html[data-skin="paper"] .progress-fill,
html[data-skin="paper"] .fp-fill { transition: width var(--d-slow) var(--ease-io); }

/* ---- ⑤ 金额重算高亮（420ms，需 JS 加 .ec-amt-flash）----
   ★ CSS 感知不到「这个值刚被重算过」，纯 CSS 只能写成「元素创建时播一次」
     ⇒ 重算后根本不闪。缺了 JS 那一半，**不要**改成元素创建时播：
     那会让每次打开详情页都闪一下，等于告诉用户「金额刚变过」（其实没变）。 */
@keyframes paperAmtFlash { from { color: var(--primary); } }
html[data-skin="paper"] .ec-amt-flash { animation: paperAmtFlash var(--t-slow) 1; }
html[data-skin="paper"] .case-card-amount,
html[data-skin="paper"] .amount,
html[data-skin="paper"] .col-amount,
html[data-skin="paper"] .settle-amount { font-variant-numeric: tabular-nums; }

/* ---- ⑥ 骨架微光（1300ms 循环，唯一的循环动画）----
   ★★ 必须把主色混进轨道色：E 版 --surface-2 #f2eee6 与 --ok-bg 是两回事，
      但**同色调**的浅底之间扫光在视觉上近乎不存在（D 版就是这么静默变成假动效的）。 */
html[data-skin="paper"] .skeleton,
html[data-skin="paper"] .loading-skeleton .skeleton,
html[data-skin="paper"] .q-skel {
  background: linear-gradient(90deg, var(--surface-2) 25%,
    color-mix(in srgb, var(--primary) 18%, var(--surface-2)) 50%,
    var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: ecShimmer var(--t-skel) infinite;
}

/* ---- ⑦ 环节状态点（260ms 过渡 + 待处理脉冲只跑 2 遍）----
   ★ 只跑 2 遍：常驻闪烁的徽章会把用户的每一次呼吸都变成一次提醒。 */
html[data-skin="paper"] .node-chip {
  transition: background-color var(--t-med), border-color var(--t-med), color var(--t-med);
}
html[data-skin="paper"] .node-chip::before {
  background: currentColor;
  transition: transform var(--t-med), opacity var(--t-med);
}
html[data-skin="paper"] .node-chip.st-done::before { transform: scale(1.25); opacity: 1; }
html[data-skin="paper"] .node-chip.st-queued::before { animation: ecPulse 1400ms var(--ease) 2; }

/* ---- ⑧ 浮层入场（220ms ease-io）----
   ★ 用 ease-io 而不是 spring：浮层是从无到有，回弹会让它看起来「弹回去了」。 */
@keyframes paperPopIn {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to { opacity: 1; transform: none; }
}
html[data-skin="paper"] .modal-card { animation: paperPopIn 220ms var(--ease-io) both; }

/* ==========================================================================
   PART 9 · 减弱动态效果：默认遵守系统，允许显式开启
   --------------------------------------------------------------------------
   ★★ 不做「一刀切 animation: none」：去掉的是**位移与循环**，保留的是
      **状态可辨识**（颜色 / 边框 / 状态点都还在）。一刀切的后果是
      「待处理 / 失败 / 已运行」这些只靠色表达的态在 reduce 下全部消失 ——
      那不是降低动效，那是删信息。

   ★ 上面的全局网在 theme.css PART 8，已改为 `html:not(.motion-forced) …`：
     用户在顶栏显式开启动效后（html.motion-forced），本层动效全部恢复。
     默认 **auto = 遵守系统设置**；这条是给「想看完整效果」的人留的口子，
     不是默认行为。
   ========================================================================== */
/* ★ 这两条**刻意不挂 data-skin 前缀**：提示条是 V4.103 新增的元素，
   只有本版会创建它；挂前缀的话切到 tundra 皮肤时它会变成一段裸文字。
   （回退方式是连 index.html 的脚本一起撤，而不是只摘 CSS。） */
.motion-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 14px; padding: 9px 14px;
  background: var(--info-bg); border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 13px; color: var(--text-dim);
}
.motion-bar b { color: var(--text); font-weight: 600; }
.motion-bar .btn { margin-left: auto; }

/* 皮肤切换按钮（顶栏）：ghost 型，不抢主操作的注意力 */
#skinSwitchBtn { white-space: nowrap; }