/* ============================================================
   潜龙八字 · UI 方案 E · 史诗（青铜厚重）
   patch.css —— 组件层 / 骨架层观感补丁（只改渲染）
   ------------------------------------------------------------
   加载序（本文件在所有既有层之后）
     light.css → dark.css → skins/mo,qing,dai → app.css → shell.css → concept-tip.css
       → readability.css（机制层·可读性）→ xy3.css（机制层·运岁三列）
       → E-史诗/skin.css → E-史诗/patch.css  ← 本文件
   因此同级特异度下**靠源序取胜**；本文件全篇**零强制优先声明**。

   三条纪律（逐条自查过）
     1) 只改渲染：不新增/修改任何 .js，不改 index.html，不改任何
        「身强/身弱」「用神/忌神」的结论值；本文件只让它们**长什么样**变化。
     2) 不改机制层：五行色仍**不落文字**（.gz / .zg-item / .ssf-gz 的文字仍走 --ink 系，
        五行色相只由 data-wx + --gz 的**色条 / 底纹 / 边线**承担）；
        运岁仍**三列并列**（本文件只是在 xy3.css 的骨架上做风格化，未改回四页签并列）。
     3) 断点真源唯一：骨架适配一律走 #viewportStage[data-shell="phone|tab|desk|wide"]，
        本文件只在末尾留 1 条 prefers-reduced-motion 媒体查询（动效降级），
        **不写任何宽度断点 @media**。

   选择器落点：全部是 _shared/CLASSES.md §三 的真实类名；顶层统一以
   [data-skin="epic"] 作用域化 —— 切走皮肤即整体失效，不泄漏到
   light / dark / mo / qing / dai。

   特异度策略（本文件最容易被忽略的一条·务必照做）
     · 一般组件：`[data-skin="epic"] .x`（(0,2,0)）—— 靠「源序在后」压过 app.css。
     · 凡要压过 **readability.css / xy3.css / shell.css 的骨架规则**，一律带上
       `#viewportStage`（或 `#page-report`）——因为那三份文件里的骨架规则含 id，
       纯类选择器**永远压不过**它们（与源序无关）。所以本文件里凡是形如
       `html[data-skin="epic"] #viewportStage …` 的写法都是**必要**的，不是啰嗦。

   文件结构
     §0  氛围与底色（墨玉台面 / 錾纹 / 轨道）
     §1  礼器外壳（卡 / 卡题 / 铜钉 / 錾刻线 / 折叠 / 键值 / 依据）
     §2  分段器与按钮
     §3  表单与首页块（含样本盘 / 快捷卡）
     §4  三套骨架（tabbar/tab · 侧栏两态 · 抽屉 · 水印）
     §5  顶栏与命主铭牌（hero 组令牌的唯一消费点）
     §6  四柱与总览表（阴阳刻槽 · 干支刻槽 · 日柱铭牌 · 手机骨架行标签列）
     §7  五行力量刻度尺 ＋ 十神五格档位条（可视化增强 ① ②）
     §8  格局 / 旺衰 / 用神 / 六轨（状态徽记 · 可视化增强 ④）
     §9  六亲 / 脏腑 / 神煞 / 刑冲 / 岁运引动 / 流通 / 白话
     §10 ◆ 运岁三列（列头铭文 · 单元刻槽 · 热力色带 · 密度 · 火漆今印）
     §11 记录 / 我的 / 工作台
     §12 浮层（toast / 弹窗 / AI 抽屉 / 概念小框）
     §13 报告面 #page-report 全族
     §14 交互舒适度（命中盒 ≥44 · 四态 · 焦点环 · 动效降级）
   ============================================================ */

/* ============================================================
   §0 · 氛围与底色
   ------------------------------------------------------------
   app.css 的 #app 底纹是「宣纸金褐点阵」（rgba 硬编码），叠在墨玉底上
   既非本皮肤色相、又成脏噪。改为**青铜錾纹**（极淡铜点阵 + 中心暗角），
   并在旧内核不支持 color-mix 时退回干净底色（前一条声明即兜底）。
   ============================================================ */
[data-skin="epic"] body{
  background:var(--bg);
  background-image:none;
}
[data-skin="epic"] #app{
  background:var(--bg);
  background-image:none;
}
[data-skin="epic"] #app{
  background-image:
    radial-gradient(900px 520px at 50% -10%, rgba(0, 0, 0, .45), transparent 62%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 9%, transparent) 0 1px, transparent 1.6px);
  background-size:auto, 30px 30px;
  background-repeat:no-repeat, repeat;
}
[data-skin="epic"] body{
  background-image:radial-gradient(1200px 700px at 50% -18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 66%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* 已剔除（260922 实测）：原方案在此给 `.ql-watermark`（旧手机水印·繁体潛龍）调过色，
   但该元件已整体退役（由版式层 `.watermark` 取代，见 web/css/app.css 水印段）。
   ⇒ 引用失效，整条删除。留痕原因：避免后续误以为「皮肤要管水印颜色」——
   新版水印的颜色是**版式层统一消费 --line-strong**，皮肤不需要、也不应该各写一遍。 */
/* 滚动条＝青铜滑轨（细节小巧思 ⑦）：槽深、轨亮、两侧一条錾线 */
[data-skin="epic"] .detail-scroll,
[data-skin="epic"] .tl-scroll,
[data-skin="epic"] .ai-msgs,
[data-skin="epic"] .rp-toc-side,
[data-skin="epic"] .ql-tip{
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) color-mix(in srgb, var(--bg) 72%, transparent);
}
[data-skin="epic"] .tl-scroll::-webkit-scrollbar,
[data-skin="epic"] .detail-scroll::-webkit-scrollbar{ height:9px; width:9px; }
[data-skin="epic"] .tl-scroll::-webkit-scrollbar-track,
[data-skin="epic"] .detail-scroll::-webkit-scrollbar-track{
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow:inset 0 0 0 1px var(--line-thin);
}
[data-skin="epic"] .tl-scroll::-webkit-scrollbar-thumb,
[data-skin="epic"] .detail-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--line-strong), color-mix(in srgb, var(--line-strong) 55%, var(--bg)));
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 38%, transparent);
}
[data-skin="epic"] .tl-scroll::-webkit-scrollbar-thumb:hover,
[data-skin="epic"] .detail-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 50%, var(--bg)));
}

/* ============================================================
   §1 · 礼器外壳
   ------------------------------------------------------------
   厚重 = 粗边（2px 而非 1px）＋ 四角铆钉 ＋ 内圈錾线 ＋ 方角 ＋ 大留白。
   三层表征各司其职，不重复表达同一件事：
     · 外框 2px：块面边界（--line-strong，对 surface 3.02:1，达非文字 3:1）
     · 内圈 1px：礼器「内壁」（--line-thin，极淡）
     · 四角铜钉：把卡片钉在台面上的体量暗示
   ============================================================ */
[data-skin="epic"] .card,
[data-skin="epic"] .tl-card{
  position:relative;
  background:var(--surface);
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
[data-skin="epic"] .card{}   /* ★ 260930-7：尺寸声明（padding/margin-bottom）已移除 ——
     皮肤只改颜色与质感（EL-5）；此处原把 padding 钉在 --sp-4（基线 --sp-5）
     ⇒ 卡片内宽比其它皮肤多 6px，实测整体"大一号"。质感声明（铜钉/边框/阴影）保留。 */
/* 卡片四角「铜钉」（细节小巧思 ①）：4 枚微型球面铆钉，纯 CSS 四层 radial 叠加。
   不支持 color-mix 的内核 ⇒ 图片层整体失效 ⇒ 只是没有钉，不影响任何布局。 */
[data-skin="epic"] .card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 94%, var(--ink)) 0 26%, color-mix(in srgb, var(--gold) 62%, var(--bg)) 60%, transparent 72%),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 94%, var(--ink)) 0 26%, color-mix(in srgb, var(--gold) 62%, var(--bg)) 60%, transparent 72%),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 94%, var(--ink)) 0 26%, color-mix(in srgb, var(--gold) 62%, var(--bg)) 60%, transparent 72%),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 94%, var(--ink)) 0 26%, color-mix(in srgb, var(--gold) 62%, var(--bg)) 60%, transparent 72%);
  background-size:7px 7px;
  background-position:8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
  background-repeat:no-repeat;
}
/* 内圈錾线（app.css 原有的 inset 描边 → 改为「内壁」极细线，去掉其 opacity 叠色） */
[data-skin="epic"] .card::after{
  content:"";
  position:absolute;
  inset:4px;
  outline: 1px solid var(--line-thin);
  outline-offset: -1px;

  border-radius:calc(var(--r-lg) - 3px);
  opacity:1;
  pointer-events:none;
}
/* 例外：含「可横滑数据区」的卡（四柱总览 / 原盘详表）内圈线会压在表格格线上 ⇒ 撤掉内圈，
   只留外框（避免两条线在同一个像素带里打架）。 */
[data-skin="epic"] .card:has(.detail-scroll)::after{ content:none; }
/* 卡片标题：档名走衬线 + 正字距 + 一条朱砂「铭条」（细节小巧思 ⑤）；下沿一道錾刻线 */
[data-skin="epic"] .card-title{
  font-family:var(--font-serif);
  font-weight:800;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-3);box-shadow:inset 0 -1px 0 var(--line-strong);}
[data-skin="epic"] .card-title .tick,
[data-skin="epic"] .form-title .tick,
[data-skin="epic"] .cf>.cf-head .tick{
  width:6px;
  height:18px;
  border-radius:var(--r-flat-md);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 34%, transparent);
}
[data-skin="epic"] .card-title .sub,
[data-skin="epic"] .cf>.cf-head .sub{
  font-family:var(--font-sans);
  color:var(--ink-3);
}
/* 可折叠整卡：摘要行做成「铭牌抽屉」，开合箭头改为方角旋转 */
[data-skin="epic"] .card-fold{}
[data-skin="epic"] .cf>.cf-head{
  min-height:var(--hit);
  font-family:var(--font-serif);
}
[data-skin="epic"] .cf>.cf-head .cf-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--gold-text)}
[data-skin="epic"] .cf>.cf-body{
  border-top:1px dashed var(--line);
  margin-top:var(--sp-3);
  padding-top:var(--sp-3);
}
/* 键值行：k 用「铭文标签」体例，v 走衬线粗体 */
[data-skin="epic"] .kv{
  border-bottom:1px dashed var(--line)}
[data-skin="epic"] .kv .k{
  color:var(--ink-3);
}
[data-skin="epic"] .kv .v{ font-weight:700; }
[data-skin="epic"] .kv .v.brand{
  font-family:var(--font-serif);
  color:var(--brand);
}
/* 「计算依据」折叠区：金线锚定，正文 13px 起 */
[data-skin="epic"] .basis{ border-top:1px dashed var(--line); }
[data-skin="epic"] .basis>summary{
  min-height:var(--hit);
  color:var(--gold-text);
  font-weight:700;
}
[data-skin="epic"] .basis-body{
  background:var(--surface-2);
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .basis-calc code.ref,
[data-skin="epic"] .basis-src code.ref,
[data-skin="epic"] .basis-src code.ref{
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink-2);
}
[data-skin="epic"] .basis-src{ color:var(--ink-3); }

/* ============================================================
   §2 · 分段器与按钮
   ------------------------------------------------------------
   现状：填充胶囊块 + 渐变按钮 + 光晕。本方案：
     · 分段器 → 「铭牌排」：外槽下凹，选中项是一枚被压进槽里的铜牌；
     · 主按钮 → 「朱砂印版」：近深朱面（白/骨白字对比 5.5:1 以上）＋ 2px 印边 ＋ 大正字距。
   两条都刻意不用渐变光晕（团标 P0-2：渐变＋发光边框＋毛玻璃三位一体）。
   ============================================================ */
[data-skin="epic"] .segmented{
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 62%, var(--surface)), var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bg) 70%, transparent)}
[data-skin="epic"] .segmented.big{}
[data-skin="epic"] .segmented .seg{
  font-weight:700;
  color:var(--ink-2);
  border-radius:var(--r-sm);
  transition:color .18s, background-color .18s, box-shadow .18s;
}
[data-skin="epic"] .segmented .seg:hover{
  color:var(--ink);
  background:color-mix(in srgb, var(--ink) 7%, transparent);
}
[data-skin="epic"] .segmented .seg.active{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 82%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  font-weight:800;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 34%, transparent), var(--shadow-sm);
}
[data-skin="epic"] .mode-toggle .mt-label{
  font-family:var(--font-serif);
  color:var(--ink-2);
}
/* 主按钮：朱砂印版 */
[data-skin="epic"] .primary-btn{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 84%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  /* ★ 260930-7：原为 `border:2px solid …` ⇒ 该边框**参与布局**，把按钮从 47px 撑到 50px，
     与其余八套皮肤不一致（owner：「青铜礼器明显比其他皮肤要大一号」）。
     改用 **inset box-shadow** 画同一道「錾刻外圈」—— 视觉等效、**零尺寸影响**。
     （EL-5：皮肤只改颜色与质感，不得改尺寸。） */
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--brand) 62%, var(--gold)),
             inset 0 1px 0 color-mix(in srgb, var(--gold) 40%, transparent), var(--shadow-md);
  border-radius:var(--r-md);
  font-weight:800;
  transition:background-color .18s, box-shadow .18s, transform .18s;
}
[data-skin="epic"] .primary-btn:hover{
  filter:none;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 68%, var(--brand)), var(--brand-deep));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 52%, transparent), var(--shadow-lg);
}
[data-skin="epic"] .primary-btn:active{ transform:translateY(2px); }
[data-skin="epic"] .primary-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}
/* 次按钮 / 图标按钮：铜边方角 */
[data-skin="epic"] .mini-btn{
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  color:var(--ink);
  font-weight:700;
}
[data-skin="epic"] .mini-btn:hover{
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-color:var(--gold);
}
[data-skin="epic"] .iconbtn{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--ink-2)}
[data-skin="epic"] .iconbtn:hover{
  border-color:var(--gold);
  color:var(--gold-text);
}
[data-skin="epic"] .err{
  background:color-mix(in srgb, var(--danger) 26%, var(--surface-2));
  color:var(--ink);
  outline: 2px solid var(--danger);
  outline-offset: -2px;

  border-radius:var(--r-md);
}

/* ============================================================
   §3 · 表单与首页块
   ------------------------------------------------------------
   输入控件：由「填充小方块」改为**阴刻槽**（下沿高光 + 上沿阴影 = 凿进去的槽），
   2px 铜边；命中盒 ≥44。12 个输入框在一屏里不再碎成方块阵。
   ============================================================ */
[data-skin="epic"] .form-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] .form-title .ft-sub{
  color:var(--gold-text);
  font-weight:700;
}
[data-skin="epic"] .form-row{ }
[data-skin="epic"] .field{
  color:var(--ink-2);
}
[data-skin="epic"] .field input,
[data-skin="epic"] .field select{
  min-height:var(--hit);
  /* ★ 260930-7：原 `padding:10px 12px`（基线 8px 10px）⇒ 输入框比其余皮肤高 4px，已删除回落基线。 */
  font-weight:600;
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 46%, var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  box-shadow:inset 0 2px 0 color-mix(in srgb, var(--bg) 62%, transparent);
  transition:border-color .18s, box-shadow .18s, background-color .18s;
}
[data-skin="epic"] .field input:hover,
[data-skin="epic"] .field select:hover{ border-color:var(--line-strong); }
[data-skin="epic"] .field input:focus,
[data-skin="epic"] .field select:focus{
  outline:none;
  border-color:var(--gold);
  background:color-mix(in srgb, var(--bg) 30%, var(--surface-2));
  box-shadow:inset 0 2px 0 color-mix(in srgb, var(--bg) 62%, transparent), 0 0 0 3px var(--gold-soft);
}
[data-skin="epic"] .field input::placeholder{ color:var(--ink-3); }
[data-skin="epic"] .field input[type=checkbox]{
  accent-color:var(--brand)}
[data-skin="epic"] .form-hint{
  color:var(--ink-3);
}
/* 样本盘库：chip 做小铜牌 */
[data-skin="epic"] .sample-gtag{
  font-family:var(--font-serif);
  color:var(--gold-text);
}
[data-skin="epic"] .sample-chip{
  /* ★ 260930-7：原 `padding:8px 12px`（基线 7px 11px）已删除回落基线。 */
  background:var(--surface-2);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  min-height:var(--hit);
}
[data-skin="epic"] .sample-chip:hover{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 10%, var(--surface-2));
  transform:none;
}
[data-skin="epic"] .sample-chip .sc-name{
  font-family:var(--font-serif);
}
[data-skin="epic"] .sample-chip .sc-meta{ color:var(--ink-3); }
[data-skin="epic"] .sample-note{
  color:var(--ink-3);
  border-top:1px dashed var(--line);
}
[data-skin="epic"] .sample-empty{ color:var(--ink-3); }
/* 快捷卡：左侧一枚铜钉 + 朱砂题名 */
[data-skin="epic"] .quick{
  background:var(--surface);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-lg);
  position:relative}
[data-skin="epic"] .quick::before{
  content:"";
  position:absolute;
  left:6px; top:50%;
  width:5px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  border-radius:var(--r-flat-md);
}
[data-skin="epic"] .quick:hover{
  border-color:var(--gold);
  box-shadow:var(--shadow-md);
}
[data-skin="epic"] .quick .q-t{
  font-family:var(--font-serif);
}
[data-skin="epic"] .quick .q-d{ color:var(--ink-2);}
[data-skin="epic"] .quick .q-r{ color:var(--gold-text);}

/* ============================================================
   §4 · 三套骨架（tabbar / 侧栏两态 / 抽屉）
   ------------------------------------------------------------
   同一元素承担三套骨架：手机＝底部 tabbar，平板＝左图标条，桌面＝左栏 248⇄76。
   本方案只改观感：青铜底座 + 2px 铜边 + 选中项「朱砂铭条」；
   两态（expanded / rail）与推挤过渡**一字未动**。
   ============================================================ */
[data-skin="epic"] .tabbar{
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  border-top:1px solid var(--line-strong);box-shadow:inset 0 1px 0 var(--line-strong);}
[data-skin="epic"] .tab{
  color:var(--ink-3);
  transition:color .16s, background-color .16s}
[data-skin="epic"] .tab svg{ stroke-width:1.8; }
[data-skin="epic"] .tab:hover{ color:var(--ink); }
[data-skin="epic"] .tab.active{
  color:var(--brand);
  font-weight:800;
}
[data-skin="epic"] .tab.active::before{
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
}
html[data-skin="epic"] #viewportStage[data-shell="tab"] .tabbar,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .tabbar,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .tabbar{
  
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  box-shadow:inset -1px 0 0 var(--line-strong),none}
html[data-skin="epic"] #viewportStage[data-shell="tab"] .tab,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .tab,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .tab{
  border-radius:var(--r-sm);
}
html[data-skin="epic"] #viewportStage[data-shell="tab"] .tab:hover,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .tab:hover,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .tab:hover{
  background:color-mix(in srgb, var(--ink) 7%, transparent);
  color:var(--ink);
}
/* 选中底纹用「朱砂 8% 压进墨底」的**暗朱**，而非亮朱薄纱：
   亮纱会把 --brand 文字压到 4.33:1；暗朱之下为 4.74:1 起。
   不支持 color-mix 的内核 ⇒ 渐变条声明失效 ⇒ 退回上一行的 transparent（无底纹），
   brand 对 tabbar 底仍有 5.17:1，仍达标。 */
html[data-skin="epic"] #viewportStage[data-shell="tab"] .tab.active,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .tab.active,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .tab.active{
  background:transparent;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 8%, var(--bg)), transparent 82%);
  color:var(--brand);
  font-weight:800;
}
html[data-skin="epic"] #viewportStage[data-shell="tab"] .tab.active::before,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .tab.active::before,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .tab.active::before{
  width:4px;
  height:24px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
}
/* 侧栏品牌头：方章 + 衬线名 + 铜线 */
[data-skin="epic"] .sb-seal{
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  outline-offset: -1px;

  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
  transform:rotate(-2deg)}
[data-skin="epic"] .side-brand .sb-name{
}
[data-skin="epic"] .side-brand .sb-sub{ color:var(--ink-3); }
[data-skin="epic"] .sb-toggle{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 40%, var(--surface-2));
  color:var(--ink-2)}
[data-skin="epic"] .sb-toggle:hover{ border-color:var(--gold); color:var(--gold-text); }
[data-skin="epic"] .side-foot{
  border-top:1px solid var(--line-strong);
  padding-top:var(--sp-3);box-shadow:inset 0 1px 0 var(--line-strong);}
[data-skin="epic"] .sf-k{
  font-family:var(--font-serif);
  color:var(--gold-text);
}
[data-skin="epic"] .sf-note{ color:var(--ink-3);}
[data-skin="epic"] .skin-pick{
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 42%, var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm)}
[data-skin="epic"] .skin-pick:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
[data-skin="epic"] .skin-pick.in-head{}
/* 汉堡（手机骨架）：方钮 */
[data-skin="epic"] .hamburger{
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--gold-text);
  box-shadow:var(--shadow-md)}
[data-skin="epic"] .hamburger:hover{ border-color:var(--gold); color:var(--gold); }
/* 外观抽屉 / 遮罩 */
[data-skin="epic"] #sbDrawer{
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  border-right:1px solid var(--line-strong);box-shadow:inset -1px 0 0 var(--line-strong);}
[data-skin="epic"] #sbDrawer .dr-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] #sbDrawer .dr-close{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--ink-2)}
[data-skin="epic"] #sbDrawer .dr-close:hover{ border-color:var(--brand); color:var(--brand); }
[data-skin="epic"] #sbDrawer .dr-note{ color:var(--ink-3);}
[data-skin="epic"] .scrim{ background:rgba(0, 0, 0, .66); }

/* ============================================================
   §5 · 顶栏与命主铭牌（hero 组 5 项令牌的唯一消费点）
   ------------------------------------------------------------
   命主卡是整屏唯一的「礼器正面」：hero 令牌（--hero-bg/--hero-surface/
   --hero-text/--hero-dim/--hero-line）在此被真正消费，而不是声明后闲置。
   ============================================================ */
[data-skin="epic"] .apphead{
  border-bottom:1px solid var(--line-strong);
  padding-bottom:var(--sp-3);
  position:relative;box-shadow:inset 0 -1px 0 var(--line-strong);}
/* 顶栏下沿錾刻线（细节小巧思 ⑥ 的同族用法） */
[data-skin="epic"] .apphead::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:2px;
  height:2px;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 46%, transparent) 0 6px, transparent 6px 12px);
  pointer-events:none;
}
[data-skin="epic"] .brand-name{
}
[data-skin="epic"] .brand-sub{
  color:var(--ink-3);
}
/* 印章（顶栏 + AI 抽屉）：圆形去掉，改**方章**——印是方的（细节小巧思 ⑧） */
[data-skin="epic"] .seal{
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  outline-offset: -1px;

  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 26%, transparent), var(--shadow-sm);
  transform:rotate(-2deg)}
[data-skin="epic"] .seal-mini{
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 44%, transparent);
  outline-offset: -1px;

  transform:rotate(-2deg)}
[data-skin="epic"] .user-card{
  position:relative;
  background:linear-gradient(160deg, var(--hero-surface), var(--hero-bg));
  color:var(--hero-text);
  /* ★ 261005 owner「排盘结果卡的白色边框很丑」⇒ 去描边。
     ⛔ 原 `outline:2px solid var(--hero-line)`（青铜细线）；铭牌本身已有
        `--shadow-md + inset 高光 + ::after 錾痕`承担质感，此框属冗余且最显「白边」。
     ⚠ 只删这一处**冗余描边**，⛔ 不动本套配色（标杆不动色）。 */

  border-radius:var(--r-xl);
  padding:var(--sp-5);
  box-shadow:var(--shadow-md), inset 0 1px 0 color-mix(in srgb, var(--gold) 26%, transparent);
}
[data-skin="epic"] .user-card::after{
  content:"";
  position:absolute;
  left:var(--sp-4); right:var(--sp-4); bottom:0;
  height:2px;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 52%, transparent) 0 6px, transparent 6px 11px);
  pointer-events:none;
}
[data-skin="epic"] .user-avatar{
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--hero-text);
  font-family:var(--font-serif);
  outline: 2px solid color-mix(in srgb, var(--gold) 42%, transparent);
  outline-offset: -2px;

  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
  transform:rotate(-2deg)}
[data-skin="epic"] .user-info .u-name{
  font-family:var(--font-serif);
}
[data-skin="epic"] .user-info .u-line{
  color:var(--hero-dim);
}
[data-skin="epic"] .user-info .u-line b{
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .user-actions .mini-btn{
  /* ★ 260930-7：原 `min-height:34px`（基线无）已删除回落基线。 */
  background:transparent;
  color:var(--hero-text);
  outline: 1px solid var(--hero-line);
  outline-offset: -1px;

}
[data-skin="epic"] .user-actions .mini-btn:hover{
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  border-color:var(--gold);
  color:var(--gold);
}

/* ============================================================
   §6 · 四柱与总览表
   ------------------------------------------------------------
   ◆ 机制层铁律：.gz / .zg-item 的**文字仍走 --ink 系**（五行色不落文字）。
     本节的五行相全部由「铜锈渐层色条」与「底纹」承担（--gz 只用于非文字）。
   ============================================================ */
[data-skin="epic"] .detail-scroll{
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface);
}
[data-skin="epic"] .pillars-table{
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .pillars-table th,
[data-skin="epic"] .pillars-table td{
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

}
/* 表头：錾刻线（细节小巧思 ⑥）——下沿 2px 铜线 + 一排断续金刻痕 */
[data-skin="epic"] .pillars-table thead th{
  position:relative;
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 76%, var(--bg)));
  color:var(--ink-2);
  font-family:var(--font-serif);
  font-weight:800;
  border-bottom:2px solid var(--line-strong);
}
[data-skin="epic"] .pillars-table thead th:not(.row-name)::after{
  content:"";
  position:absolute;
  left:5px; right:5px; bottom:3px;
  height:2px;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 50%, transparent) 0 5px, transparent 5px 10px);
  pointer-events:none;
}
[data-skin="epic"] .pillars-table th.col-dynamic{
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 20%, var(--surface-3)), var(--surface-3));
  color:var(--gold-text);
}
/* 日柱＝「铭牌」（礼器正位）：深朱实面 + 2px 亮朱边 + 骨白字（对比 5.9:1） */
html[data-skin="epic"] .pillars-table th.col-day{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 84%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  outline: 2px solid color-mix(in srgb, var(--brand) 70%, var(--gold));
  outline-offset: -2px;

  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 40%, transparent);
}
[data-skin="epic"] .pillars-table thead th.col-day::after{ content:none; }
[data-skin="epic"] .pillars-table th .col-year-tag{
  color:color-mix(in srgb, var(--ink) 72%, transparent);
}
[data-skin="epic"] .pillars-table .col-year-tag{
  color:var(--ink-3);
}
[data-skin="epic"] .pillars-table .col-day{
  background:color-mix(in srgb, var(--brand) 9%, var(--surface));
}
[data-skin="epic"] .pillars-table .row-name{
  background:linear-gradient(90deg, var(--surface-3), var(--surface-2));
  color:var(--ink-2);
  font-family:var(--font-serif);
  font-weight:800;
  box-shadow:1px 0 0 color-mix(in srgb, var(--bg) 60%, transparent)}
[data-skin="epic"] .pillars-table .relation-row{ background:color-mix(in srgb, var(--gold) 8%, var(--surface)); }
[data-skin="epic"] .pillars-table .relation-row td{
  color:var(--ink-2);
}
[data-skin="epic"] .pillars-table .rel-tag{
  border-radius:var(--r-sm);
  font-weight:700;
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color:var(--ink-2);
  outline: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  outline-offset: -1px;

}
/* ◆ 干支「阴刻底槽」（细节小巧思 ②）
   槽比周围暗（上沿阴影 + 下沿高光 = 凿下去），槽内底沿一道铜锈渐层色条承担五行相。
   文字仍是 var(--ink) —— 机制层要求，不得改回彩色。 */
[data-skin="epic"] .pillars-table .gz{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--ink);
  background:var(--surface-3);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 72%, transparent), color-mix(in srgb, var(--ink) 5%, transparent));
  border-radius:var(--r-sm);
  box-shadow:inset 0 2px 0 color-mix(in srgb, var(--bg) 82%, transparent),
             inset 0 -1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 92%, transparent)}
[data-skin="epic"] .pillars-table .gz-sub{
  color:var(--ink-3);
}
[data-skin="epic"] .pillars-table .shishen,
[data-skin="epic"] .pillars-table .sub-line{
}
[data-skin="epic"] .qz-table .shishen-cell{
  font-family:var(--font-serif);
  font-weight:800;
}
[data-skin="epic"] .qz-table .sub-cell{
  color:var(--ink-2);
}
/* ◆ 藏干小字「阴刻纹」（细节小巧思 ②的同族）：
   文字仍 --ink-2（不落五行色），五行相走**底纹 + 描边**。 */
[data-skin="epic"] .zg-item{
  color:var(--ink-2);
  border-radius:var(--r-sm);
  outline: 1px solid var(--line);
  outline-offset: -1px;

  background:var(--surface-3);
  font-weight:700;
}
[data-skin="epic"] .zg-item[data-wx]{
  color:var(--ink-2);
  background:color-mix(in srgb, var(--gz) 14%, var(--surface-2));
  border-color:color-mix(in srgb, var(--gz) 40%, var(--line));
}
/* 四柱大卡（简版四柱）：日柱为铭牌位 */
[data-skin="epic"] .pillars{}
[data-skin="epic"] .pillar{
  background:var(--surface-2);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-md);
}
[data-skin="epic"] .pillar.day{
  border-color:color-mix(in srgb, var(--brand) 62%, var(--gold));
  background:linear-gradient(180deg, var(--brand-soft), transparent 74%);
}
[data-skin="epic"] .pillar .p-name{
  font-family:var(--font-serif);
  color:var(--ink-3);
}
[data-skin="epic"] .pillar .p-gan,
[data-skin="epic"] .pillar .p-zhi{
  font-weight:800;
  color:var(--ink);
  text-shadow:0 2px 0 color-mix(in srgb, var(--bg) 88%, transparent);
}
[data-skin="epic"] .pillar .p-shi{
  color:var(--ink-2);
}
[data-skin="epic"] .pillar .day-badge{
  background:var(--brand-deep);
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  outline-offset: -1px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .season-bar{
  border-top:1px solid var(--line-strong);
  background:color-mix(in srgb, var(--bg) 34%, var(--surface-2));box-shadow:inset 0 1px 0 var(--line-strong);}
[data-skin="epic"] .season-bar .wb-seg{
  color:var(--ink-3);
}
[data-skin="epic"] .season-bar .wb-seg b{ color:var(--ink-2); }
[data-skin="epic"] .season-bar .wb-seg.on{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 82%, var(--brand)), var(--brand-deep));
  color:var(--ink);
}
[data-skin="epic"] .season-bar .wb-seg.on b{ color:var(--ink); }
[data-skin="epic"] .season-bar .wb-seg:not(:last-child)::after{ background:var(--line-strong); }
/* 子时口径卡：金线 + 方角（提示块不复用 3px 侧条纹） */
[data-skin="epic"] .zi-note{
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 7%, var(--surface-2));
  color:var(--ink-2);box-shadow:inset 1px 0 0 var(--gold);}
[data-skin="epic"] .zi-note b{ color:var(--ink); }
[data-skin="epic"] .zi-note .zi-desc{ color:var(--ink-3); }
/* 金底块上的强调词改用本块自身的强调色（--gold-text 6.67:1），
   不用 --brand —— 朱砂压在金调底上只 4.11:1，不足正文 4.5:1。 */
[data-skin="epic"] .zi-note .zi-other b{
  font-family:var(--font-serif);
  color:var(--gold-text);
}
[data-skin="epic"] .zi-note .zi-tip{
  color:var(--ink-3);
  border-top:1px dashed var(--line);
}
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table th,
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table td{
}
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillar .p-gan,
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillar .p-zhi{ }
/* 桌面 / 宽屏：干支再大一档（碑刻气势，--fs-hero 的落地处） */
html[data-skin="epic"] #viewportStage[data-shell="desk"] .pillar .p-gan,
html[data-skin="epic"] #viewportStage[data-shell="desk"] .pillar .p-zhi,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .pillar .p-gan,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .pillar .p-zhi{ }
html[data-skin="epic"] #viewportStage[data-shell="desk"] .pillars-table .gz,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .pillars-table .gz{ }

/* ============================================================
   §7 · 五行力量刻度尺 ＋ 十神五格档位条（可视化增强 ① ②）
   ============================================================ */

/* ---- ① 五行力量：把「一条色块」升级为「一把铜尺」 ----
   底层：五段五行色块（编码色，可辨）；
   上层：0 / 20 / 40 / 60 / 80 / 100 六道刻度线（纯背景图，不占 DOM）；
   数值：图例里 `木 22%` 的百分比加粗 + 等宽数字（列对齐可比读）。 */
[data-skin="epic"] .wx-bar{
  position:relative;
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 58%, var(--surface-2));
  overflow:hidden}
[data-skin="epic"] .wx-bar .wb-seg{ border-radius:0; }
[data-skin="epic"] .wx-bar .wb-seg:first-child{ border-radius:0; }
[data-skin="epic"] .wx-bar .wb-seg:last-child{ border-radius:0; }
[data-skin="epic"] .wx-bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--bg) 76%, transparent) 0 1px, transparent 1px 20%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bg) 58%, transparent),
             inset 0 -1px 0 color-mix(in srgb, var(--ink) 9%, transparent);
}
[data-skin="epic"] .wx-legend{}
[data-skin="epic"] .wx-item{
  color:var(--ink-2);
}
[data-skin="epic"] .wx-item b{
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .wx-legend .wx-dot{
  border-radius:var(--r-flat-md);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bg) 62%, transparent),
             0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent)}
[data-skin="epic"] .wx-season{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 32%, var(--surface-2));
  color:var(--ink-2);
}
[data-skin="epic"] .wx-season b{ color:var(--warn); font-weight:800; }

/* ---- ② 十神：五格档位条（重做 readability µ1.5 的三档条） ----
   ※ 机制层修正（如实登记，不属本方案写权限）：readability.css 的
     `.sh-card::after`（轨道）与 `.sh-card::before`（填充）都是定位伪元素，
     按 DOM 序绘制 ⇒ **::after 在后、盖住 ::before** ⇒ 填充条其实看不见。
     本方案给轨道 `z-index:0`、填充 `z-index:1`，填充才真正可见。
   ※ 档位口径：DOM 只产出三档类名（lv-weak / lv-mid / lv-strong），
     故落点取 **第 1 / 3 / 5 格**（20% / 60% / 100%）；2、4 格是刻度，
     表示「本系统未产出该档」，**不虚构数据**。 */
/* ★ 260923 收束（`EL-5` · 见新建门禁 `tests/gate/test_skin_patch_contract.py`）：
   原此处为
     `[data-skin="epic"] .shishen-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
      gap:var(--sp-2); }`
   —— 那是**上一版三列布局**遗留的**版式覆写**，与 `css/layout-v3.css:68` 的
   「桌面 `repeat(10, minmax(0,1fr))` 一行放完 ／ 手机·平板 5 列」**直接冲突**：
   在 epic 皮肤下十神格被改成**流式自适应**排列 ⇒ epic 观感与其余 8 套分家
   （＝ owner「点开青铜礼器的尺寸就跟他其他不一样」的一条**残留根因**）。
   规约《260922-UI皮肤体系与版式规约（v3）》§三 `EL-5`：**版式归版式层**；
   皮肤确需改几何只能走版式层已暴露的可调变量（`--xy-*` 等）⇒ 本条**整规则剥离**，
   `gap` 与版式层同值（`var(--sp-2)`）亦一并移交版式层。
   ⚠ 由此产生 **1 处视觉变化**（如实登记）：epic 十神格 由「流式自适应」→
   版式层「桌面 10 列一行」⇒ 与其余 8 套一致（**正是本次收束的目的**）。 */
[data-skin="epic"] .sh-card{
  position:relative;
  background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, var(--bg)));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .sh-name{
  font-family:var(--font-serif);
}
[data-skin="epic"] .sh-lvl{
  font-weight:800;
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  color:var(--ink);
  background:color-mix(in srgb, var(--line-strong) 20%, var(--surface-3))}
[data-skin="epic"] .sh-lvl.lv-weak{
  color:var(--ink);
  background:color-mix(in srgb, var(--accent) 24%, var(--surface-3));
  border-color:color-mix(in srgb, var(--accent) 58%, var(--line-strong));
}
[data-skin="epic"] .sh-lvl.lv-mid{
  color:var(--ink);
  background:color-mix(in srgb, var(--gold) 24%, var(--surface-3));
  border-color:color-mix(in srgb, var(--gold) 58%, var(--line-strong));
}
[data-skin="epic"] .sh-lvl.lv-strong{
  color:var(--ink);
  background:color-mix(in srgb, var(--brand) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--brand) 62%, var(--line-strong));
}
[data-skin="epic"] .sh-raw{
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
/* 轨道：五格刻度 */
[data-skin="epic"] .sh-card::after{
  content:"";
  position:absolute;
  left:8px; right:8px; bottom:9px;
  height:8px;
  border-radius:var(--r-sm);
  background:var(--surface-3);
  background-image:repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--line-strong) calc(20% - 1px) 20%);
  box-shadow:inset 0 0 0 1px var(--line);
  z-index:0;
}
/* 填充：长度＝十神占比（`--shpct`，见 app.js）
   用 clip-path 揭示而非动 width —— 不触发布局重排（交互检查点第 4 条），
   且保留自身 1px 描边与圆角不被拉变形。
   ★ 261013 #6：原按 `.sh-lvl` 三档（`:has(.lv-weak/mid/strong)` → inset 右 80%/40%/0%）
   揭示 ⇒ 长度＝档位（与 pill 同信息）、`0%` 也见 20%。现改由 `--shpct` 直算。 */
[data-skin="epic"] .sh-card::before{
  content:"";
  position:absolute;
  left:9px; bottom:10px;
  height:6px;
  width:calc(100% - 18px);
  border-radius:var(--r-flat-md);
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 52%, var(--surface-3)), var(--brand));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bg) 42%, transparent);
  z-index:1;
  clip-path:inset(0 calc(100% - var(--shpct, 0) * 1%) 0 0);
  transition:clip-path .22s ease;
}

/* ============================================================
   §8 · 格局 / 旺衰 / 用神 / 六轨（可视化增强 ④：状态徽记）
   ============================================================ */
[data-skin="epic"] .pattern-name{
}
[data-skin="epic"] .pattern-src{
  color:var(--ink-3);
}
/* 身强/身弱徽记：方牌 + 2px 边 + 骨白字 */
[data-skin="epic"] .band-pill{
  border-radius:var(--r-sm);
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  font-weight:800;
  color:var(--ink);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 26%, transparent);
}
[data-skin="epic"] .band-pill.weak{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent-deep) 84%, var(--accent)), var(--accent-deep));
  border-color:color-mix(in srgb, var(--accent) 62%, var(--gold));
}
[data-skin="epic"] .band-pill.strong{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 84%, var(--brand)), var(--brand-deep));
  border-color:color-mix(in srgb, var(--brand) 62%, var(--gold));
}
[data-skin="epic"] .duo-bar{
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-sm)}
[data-skin="epic"] .duo-txt{ color:var(--ink-2); }
[data-skin="epic"] .duo-txt b{ color:var(--ink); font-variant-numeric:tabular-nums; }
/* 三格判定：顶部一条 3px 状态色条 + 衬线大字（颜色只是第二重编码，判定符本身仍是文字） */
[data-skin="epic"] .three-stat{}
[data-skin="epic"] .stat-pill{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 76%, var(--bg)));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .stat-pill::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background:var(--line-strong);
}
[data-skin="epic"] .stat-pill.ok::after{ background:var(--ok); }
[data-skin="epic"] .stat-pill.no::after{ background:var(--danger); }
[data-skin="epic"] .stat-pill.mid::after{ background:var(--warn); }
[data-skin="epic"] .stat-pill .v{
  font-family:var(--font-serif);
  font-weight:800;
}
[data-skin="epic"] .stat-pill .k{
  color:var(--ink-3);
}
[data-skin="epic"] .detail-line{
  color:var(--ink-3);
}
[data-skin="epic"] .muted{ color:var(--ink-3); }
/* 变式 chip / 成败徽章：app.css 里这一族是**裸 hex**（浅色硬编码），在墨玉底上会刺眼；
   本方案把它们收回令牌（色相走 border + 底纹，文字走 --ink，语义由文字承担）。 */
[data-skin="epic"] .pattern-special-row{}
[data-skin="epic"] .pattern-special-chip{
  background:linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--surface-2)), var(--surface-2));
  color:var(--ink-2);
  outline: 1px solid color-mix(in srgb, var(--gold) 52%, var(--line-strong));
  outline-offset: -1px;

  border-radius:var(--r-sm);
  font-weight:700;
  box-shadow:none;
}
[data-skin="epic"] .pattern-special-chip::before{ background:var(--gold); }
[data-skin="epic"] .pattern-chg-pill{
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  font-weight:800;
  color:var(--ink);
}
[data-skin="epic"] .pattern-chg-pill.good{
  background:color-mix(in srgb, var(--ok) 26%, var(--surface-2));
  border-color:color-mix(in srgb, var(--ok) 64%, var(--line-strong));
}
[data-skin="epic"] .pattern-chg-pill.bad{
  background:color-mix(in srgb, var(--danger) 26%, var(--surface-2));
  border-color:color-mix(in srgb, var(--danger) 64%, var(--line-strong));
}
[data-skin="epic"] .pattern-chg-pill.mid{
  background:color-mix(in srgb, var(--warn) 26%, var(--surface-2));
  border-color:color-mix(in srgb, var(--warn) 64%, var(--line-strong));
}
[data-skin="epic"] .pattern-chg-pill.ok{
  background:color-mix(in srgb, var(--accent) 26%, var(--surface-2));
  border-color:color-mix(in srgb, var(--accent) 64%, var(--line-strong));
}
[data-skin="epic"] .pattern-chg-reason{ color:var(--ink-3); }
[data-skin="epic"] .pattern-yan-row{}
[data-skin="epic"] .pattern-yan-row .yan-k{
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  border-radius:var(--r-sm);
  outline: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  outline-offset: -1px;

  font-weight:800;
}
[data-skin="epic"] .pattern-yan-row .yan-v{ color:var(--ink-2); }
[data-skin="epic"] .disease-card{
  background:color-mix(in srgb, var(--gold) 8%, var(--surface-2));
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:0 var(--r-sm) var(--r-sm) 0;box-shadow:inset 1px 0 0 var(--gold);}
[data-skin="epic"] .disease-card .disease-pill{
  background:var(--gold);
  color:var(--bg);
  border-radius:var(--r-sm);
}
/* 同上：金调底上的强调词走 --gold-text（6.49:1），不用 --brand（只 4.00:1）。 */
[data-skin="epic"] .disease-card .disease-type{
  font-family:var(--font-serif);
  color:var(--gold-text);
}
[data-skin="epic"] .disease-card .disease-label{ color:var(--ink-3); }
[data-skin="epic"] .disease-card .disease-note{ color:var(--ink-3); }
[data-skin="epic"] .disease-card .disease-note b{ color:var(--ink-2); }

/* ============================================================
   §9 · 用神 / 六亲 / 脏腑 / 神煞 / 刑冲 / 岁运引动 / 流通
   ------------------------------------------------------------
   ◆ 顺手修掉机制层漏网的一处「五行色落文字」：
     app.css `.ys-body b{color:var(--wx-wood)}` —— 木绿作小字前景，
     既不合 readability.css 的机制（五行色不落文字），又在对非木日主时为错义。
     本方案把它收回 --ink（色相仍由别处承担）。
   ============================================================ */
[data-skin="epic"] .ys-grid{}
[data-skin="epic"] .ys-card{
  background:var(--surface-2);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .ys-card.main{
  border-color:color-mix(in srgb, var(--brand) 58%, var(--gold));
  background:linear-gradient(135deg, var(--brand-soft), transparent 74%);
}
[data-skin="epic"] .ys-head{
  font-family:var(--font-serif);
}
[data-skin="epic"] .ys-tag{
  border-radius:var(--r-sm);
  background:var(--gold-soft);
  color:var(--gold-text);
}
[data-skin="epic"] .ys-tag.main{
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
}
[data-skin="epic"] .ys-body{
  color:var(--ink-2);
}
[data-skin="epic"] .ys-body b{ color:var(--ink); font-weight:800; }
[data-skin="epic"] .ys-body .j{ color:var(--danger); }
[data-skin="epic"] .ys-final{
  outline: 2px solid color-mix(in srgb, var(--brand) 50%, var(--line-strong));
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--brand-soft), transparent 62%);
}
[data-skin="epic"] .ys-final-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] .ys-final-title .sub{ color:var(--ink-3); }
[data-skin="epic"] .ys-final-row{}
[data-skin="epic"] .ys-final-row .k{ color:var(--ink-3); }
[data-skin="epic"] .ys-final-row .v{ color:var(--ink); font-weight:800; }
[data-skin="epic"] .ys-final-row .v.j{ color:var(--danger); }
[data-skin="epic"] .ys-conflicts{
  outline: 1px dashed var(--warn);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:var(--surface-2);
}
[data-skin="epic"] .ys-conflicts-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] .ys-conflicts-title .sub{ color:var(--ink-3); }
[data-skin="epic"] .ys-conflict-item{
  color:var(--ink-2);
  border-bottom:1px dotted var(--line);
}
[data-skin="epic"] .disclaimer{
  background:color-mix(in srgb, var(--gold) 8%, var(--surface-2));
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  color:var(--ink-2);box-shadow:inset 1px 0 0 var(--gold);}
[data-skin="epic"] .disclaimer b{ color:var(--gold-text); }
[data-skin="epic"] .flow-chain{}
[data-skin="epic"] .flow-node{
  background:var(--surface-3);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink);
  font-weight:700;
}
[data-skin="epic"] .flow-arrow{ color:var(--gold); }
[data-skin="epic"] .flow-block{
  color:var(--ink-2);
}
[data-skin="epic"] .reading-box{}
[data-skin="epic"] .reading-box b{ color:var(--brand); }
/* 刑冲合害：标签改「阴刻朱/铜小牌」（原为白字实色块，深色底上过亮） */
[data-skin="epic"] .xing-list{}
[data-skin="epic"] .xing-item{
  background:var(--surface-2);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .xing-tag{
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  color:var(--ink);
}
[data-skin="epic"] .xing-tag.h{
  background:color-mix(in srgb, var(--wx-wood) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--wx-wood) 62%, var(--line-strong));
}
[data-skin="epic"] .xing-tag.p{
  background:color-mix(in srgb, var(--wx-fire) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--wx-fire) 62%, var(--line-strong));
}
[data-skin="epic"] .xing-tag.f{
  background:color-mix(in srgb, var(--wx-water) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--wx-water) 62%, var(--line-strong));
}
[data-skin="epic"] .xing-tag.s{
  background:color-mix(in srgb, var(--gold) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--gold) 62%, var(--line-strong));
}
[data-skin="epic"] .xing-txt{ color:var(--ink-2);}
[data-skin="epic"] .xing-txt b{ color:var(--ink); }
[data-skin="epic"] .xing-txt .sub{ color:var(--ink-3); }
/* 神煞：chips ＋ S/A/B/C 铜印分级 */
[data-skin="epic"] .ss-group{}
[data-skin="epic"] .ss-head{
  font-family:var(--font-serif);
  color:var(--gold-text);
}
[data-skin="epic"] .ss-chip-row{}
[data-skin="epic"] .ss-chip{
  background:var(--surface-2);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink);
}
[data-skin="epic"] .grade{
  border-radius:var(--r-sm);
  font-weight:800;
  color:var(--bg);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 28%, transparent)}
/* S/A/B/C 铜印分级（显式覆盖 app.css 的 .grade-*）：
   底色一律取自 --grade-* 令牌，字色统一深墨（四色底对深墨均 ≥4.5:1，见方案表）。 */
[data-skin="epic"] .grade-s,
[data-skin="epic"] .grade-a,
[data-skin="epic"] .grade-b,
[data-skin="epic"] .grade-c{
  color:var(--bg);
  font-weight:800;
  border-radius:var(--r-sm);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 22%, transparent);
}
[data-skin="epic"] .grade-s{ background:var(--grade-s); }
[data-skin="epic"] .grade-a{ background:var(--grade-a); }
[data-skin="epic"] .grade-b{ background:var(--grade-b); }
[data-skin="epic"] .grade-c{ background:var(--grade-c); }
/* 六亲 */
[data-skin="epic"] .six-grid{}
[data-skin="epic"] .six-item{
  background:var(--surface-2);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .six-role{
  font-family:var(--font-serif);
}
[data-skin="epic"] .six-star{ color:var(--ink-2); }
[data-skin="epic"] .six-trend{ color:var(--ink-3);}
[data-skin="epic"] .six-meta{}
[data-skin="epic"] .six-chip{
  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--ink-2);
}
[data-skin="epic"] .six-chip.intensity{
  background:color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  color:var(--ink-2);
}
[data-skin="epic"] .six-timing{
  color:var(--ink-3);
  border-top:1px dashed var(--line);
}
[data-skin="epic"] .six-timing b{ color:var(--ink-2); }
[data-skin="epic"] .pref{
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  color:var(--ink);
}
[data-skin="epic"] .pref-用神{
  background:color-mix(in srgb, var(--ok) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--ok) 62%, var(--line-strong));
}
[data-skin="epic"] .pref-喜神{
  background:color-mix(in srgb, var(--accent) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--accent) 62%, var(--line-strong));
}
[data-skin="epic"] .pref-忌神{
  background:color-mix(in srgb, var(--danger) 26%, var(--surface-3));
  border-color:color-mix(in srgb, var(--danger) 62%, var(--line-strong));
}
[data-skin="epic"] .pref-闲神{
  background:var(--surface-3);
  color:var(--ink-2);
}
/* 脏腑 */
[data-skin="epic"] .hb-item{
  border-bottom:1px solid var(--line-thin);
}
[data-skin="epic"] .hb-wx{
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--gold-text)}
[data-skin="epic"] .hb-level{ color:var(--warn); font-weight:700; }
[data-skin="epic"] .hb-organ{ color:var(--accent); font-weight:700; }
[data-skin="epic"] .hb-part{ color:var(--ink-2); }
[data-skin="epic"] .hb-note{ color:var(--ink-3);}
[data-skin="epic"] .hb-regimen,
[data-skin="epic"] .hb-timing{
  background:var(--surface-3);
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink-2);
}
/* 岁运引动神煞：干支仍走墨色（机制层要求），五行相由左侧一道 --gz 竖条承担 */
[data-skin="epic"] .ssf-list{}
[data-skin="epic"] .ssf-item{}
[data-skin="epic"] .ssf-gz{
  color:var(--ink);
  font-family:var(--font-serif);
  border-radius:var(--r-sm);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 58%, transparent), color-mix(in srgb, var(--ink) 5%, transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bg) 74%, transparent)}
[data-skin="epic"] .ssf-hits{}
[data-skin="epic"] .ssf-var{ color:var(--warn); }

/* ============================================================
   §10 · ◆ 运岁三列（本方案的重点：在 xy3.css 的骨架上做风格化）
   ------------------------------------------------------------
   结构**一字未动**：非手机骨架仍是「① 小运+大运 ② 流年 ③ 流月」三列并列
   （列数 / 列位 / 列宽比例 / 四页面板解禁 全部沿用 xy3.css）；
   手机骨架仍是「四页签 + 单页显示」。
   本方案只改四件事：① 列头（铭文方牌）② 单元卡（刻槽 + 热力色带）
                     ③ 密度（间隙 / 行距 / 列高）④ 火漆「今」印。
   特异度说明：本节一律写 `html[data-skin="epic"] #viewportStage …`，
   因为 xy3.css 的骨架规则含 `#viewportStage`（id），纯类选择器压不过它。
   ============================================================ */
/* ---- ④ 密度：只动 xy3 暴露的可调参数，不动列比例 ---- */
/* ★ 261005 尺寸归一：原此处声明 `--xy-gap`／`--xy-pad`／`--xy-rowgap` 三个**运岁密度**
   覆写（epic 4→10／7→10／自造 6px）—— 它们直接改时间轴单元间距与内距，是「尺寸分家」的
   一类来源，且 `--xy-*` 属**版式层已暴露的可调变量**：按 261005 收紧规约，其**值**须逐套一致。
   ⇒ 三个声明**整块删除**，回落版式层默认（`--xy-gap:4px`／`--xy-pad:7px`）。
   （随即 `--xy-rowgap` 失去唯一消费者 ⇒ 同时消除皮肤补丁门禁「死变量」告警。） */
/* ★ 260923 死变量清退（`EL-5` 收束 · 门禁 `tests/gate/test_skin_patch_contract.py`）：
   原此处另有 `--xy-h:640px`（本块）／`--xy-h:540px`（`[data-shell="tab"]` 块）／
   `[data-shell="wide"]{ --xy-h:720px }`（**整块只有这一条** ⇒ 移空故整块移除）。
   全仓实测：`--xy-h` **零 `var()` 引用**（`xy3.css` 用的是 `--xy-strip-h`）⇒
   属**上一版布局遗留的死变量**（声明了无人消费 ⇒ 静默失效）。
   ⚠ 261005 更新：本节原「保留」的 `--xy-gap`／`--xy-pad`／`--xy-rowgap` 三声明**已按尺寸规约整块删除**（见上）。 */
/* 三列容器：青铜底座（2px 铜边 + 四角不外扩） */
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"]{
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-lg);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 38%, var(--surface)), var(--surface) 22%);
  box-shadow:var(--shadow-md);
}
/* 每一列＝一块刻好的铜板 */
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > .xy-pane{
  outline: 1px solid var(--line);
  outline-offset: -1px;
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent)}
/* ---- ① 列头：铭文方牌（把 xy3 的「① 小运」换成铭文体例） ---- */
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > .xy-pane > .tl-head{
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 72%, var(--bg)));
  border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);}
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > .xy-pane > .tl-head::before{
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--gold-text);
  outline: 1px solid color-mix(in srgb, var(--gold) 46%, var(--line-strong));
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 11%, transparent);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 82%, transparent);
}
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > [data-pane="xiaoyun"] > .tl-head::before{ content:"壹 · 小运"; }
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > [data-pane="dayun"] > .tl-head::before{ content:"壹 · 大运"; }
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > [data-pane="liunian"] > .tl-head::before{ content:"贰 · 流年"; }
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > [data-pane="liuyue"] > .tl-head::before{ content:"叁 · 流月"; }
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > .xy-pane > .tl-head .r-info{
  color:var(--ink-3);
}
/* 列内滚动区：密度参数由上面的 --xy-* 统一供 */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] > .xy-pane > .tl-scroll{
  padding:var(--xy-pad)}
/* ---- ② 单元卡：刻槽 + 右侧热力色带 + 左沿「今」位 ---- */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item{
  position:relative;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  border-radius:var(--r-sm);
  background:var(--surface-2);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 6%, transparent);
  transition:background-color .18s, border-color .18s, box-shadow .18s}
/* 右侧热力带（可视化增强 ③）：颜色由**既有语义类**决定，文字标记（吉/凶/平）同时保留 */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item::after{
  content:"";
  position:absolute;
  right:0; top:0; bottom:0;
  width:4px;
  background:var(--line);
  border-radius:0 1px 1px 0;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.ly-sig.sig-strong)::after,
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.dayun-align.align-xi)::after{
  background:linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 38%, var(--surface-3)));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.ly-sig.sig-weak)::after,
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.dayun-align.align-ji)::after{
  background:linear-gradient(180deg, var(--danger), color-mix(in srgb, var(--danger) 38%, var(--surface-3)));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.ly-sig.sig-mid)::after,
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:has(.dayun-align.align-mid)::after{
  background:linear-gradient(180deg, var(--line-strong), color-mix(in srgb, var(--line-strong) 40%, var(--surface-3)));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item:hover{
  background:color-mix(in srgb, var(--gold) 8%, var(--surface-2));
  border-color:var(--line-strong);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), var(--shadow-sm);
}
/* ---- ④ 火漆「今」印（细节小巧思 ④） ---- */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item.now{
  border-left-color:var(--brand);
  background:linear-gradient(90deg, var(--brand-soft), var(--surface-2) 62%);
}
html[data-skin="epic"] #viewportStage .tl-item .now-badge{
  top:-7px; right:-6px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 80%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  font-weight:800;
  transform:rotate(-6deg);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 40%, transparent), var(--shadow-sm);
}
/* ---- 列内文字体例（12px 硬下限之上，全部走 --ink 系） ---- */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .y{
  font-weight:700;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .y b{
  color:var(--gold-text);
  font-weight:800;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ss{
  color:var(--ink-2);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .age{
  color:var(--ink-3);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .age .rel-tag{
  background:color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  outline: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink-2);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-act{
  color:var(--ink-3);
}
/* 干支刻槽（小尺寸版）：文字仍 --ink，五行相走槽内渐层色条 */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .gz{
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  background:var(--surface-3);
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 66%, transparent), color-mix(in srgb, var(--ink) 5%, transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bg) 78%, transparent);
  text-shadow:0 1px 0 color-mix(in srgb, var(--bg) 90%, transparent)}
/* 吉/凶/平 徽记：阴刻小牌（文字保留，颜色只作第二重） */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ly-sig{
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  font-weight:800;
  color:var(--ink);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ly-sig.sig-strong{
  background:color-mix(in srgb, var(--ok) 28%, var(--surface-3));
  border-color:color-mix(in srgb, var(--ok) 64%, var(--line-strong));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ly-sig.sig-weak{
  background:color-mix(in srgb, var(--danger) 28%, var(--surface-3));
  border-color:color-mix(in srgb, var(--danger) 64%, var(--line-strong));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ly-sig.sig-mid{
  background:var(--surface-3);
  color:var(--ink-2);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-align{
  border-radius:var(--r-sm);
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  font-weight:800;
  color:var(--ink);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-align.align-xi{
  background:color-mix(in srgb, var(--ok) 28%, var(--surface-3));
  border-color:color-mix(in srgb, var(--ok) 64%, var(--line-strong));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-align.align-ji{
  background:color-mix(in srgb, var(--danger) 28%, var(--surface-3));
  border-color:color-mix(in srgb, var(--danger) 64%, var(--line-strong));
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-align.align-mid{
  background:var(--surface-3);
  color:var(--ink-2);
}
/* 列脚（口径）：260923 起脚注**升为卡级整宽行**（`.tl-card > .tl-foot.xy-foot-global`），
   ⛔ 旧选择器 `> .xy-pane > .tl-foot` 已无匹配对象（死码）⇒ 同批改指新落点，只改体例。
   ⚠ 文本未变、位置未变（仍在三行之下），故本方案**只改观感**，不违 EL-5。 */
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"] > .tl-foot.xy-foot-global{
  color:var(--ink-3);
  background:color-mix(in srgb, var(--gold) 6%, var(--surface-2));
  outline: 1px solid var(--line);
  outline-offset: -1px}
html[data-skin="epic"] .tl-foot b{ color:var(--gold-text); }
/* 手机骨架（四页签）：页签行做成「铭牌排」，单页显示机制照旧 */
html[data-skin="epic"] .xy-tabs{
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);}
html[data-skin="epic"] .xy-tab{
  min-height:var(--hit);
  font-family:var(--font-serif);
  font-weight:700;
  color:var(--ink-3);
}
html[data-skin="epic"] .xy-tab:hover{ color:var(--ink); }
html[data-skin="epic"] .xy-tab.active{
  color:var(--brand);
  font-weight:800;
}
html[data-skin="epic"] .xy-tab.active::after{
  width:30px;
  height:3px;
  border-radius:0;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
}
html[data-skin="epic"] .tl-head{
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 78%, var(--bg)));
  border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);}
html[data-skin="epic"] .tl-head .lt{
  font-family:var(--font-serif);
}
html[data-skin="epic"] .tl-head .lt::before{
  width:4px;
  height:16px;
  border-radius:var(--r-flat-md);
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
}
html[data-skin="epic"] .tl-head .r-info{ color:var(--ink-3); }
html[data-skin="epic"] .tl-card{
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-lg);
}

/* ============================================================
   §11 · 记录 / 我的 / 工作台
   ============================================================ */
[data-skin="epic"] .record-list{}
[data-skin="epic"] .record-card{
  background:var(--surface);
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-md)}
[data-skin="epic"] .record-card:hover{
  border-color:var(--gold);
  box-shadow:var(--shadow-md);
}
[data-skin="epic"] .record-card .rc-name{
  font-family:var(--font-serif);
}
[data-skin="epic"] .record-card .rc-gz{
  color:var(--gold-text);
}
[data-skin="epic"] .record-card .rc-meta{
  color:var(--ink-3);
}
[data-skin="epic"] .record-card .rc-meta b{ color:var(--ink-2); }
[data-skin="epic"] .record-empty{
  color:var(--ink-3);
}
[data-skin="epic"] .record-actions .mini-btn{
  background:var(--surface-2);
  color:var(--ink-2);
  outline: 2px solid var(--line);
  outline-offset: -2px}
[data-skin="epic"] .mine-group{
  background:var(--surface);
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-md);
  overflow:hidden;
}
[data-skin="epic"] .mine-group .mg-title{
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 78%, var(--bg)));
  border-bottom:1px solid var(--line-strong);
  font-family:var(--font-serif);box-shadow:inset 0 -1px 0 var(--line-strong);}
[data-skin="epic"] .mine-row{
  min-height:var(--hit);
  border-bottom:1px dashed var(--line);
}
[data-skin="epic"] .mine-row:hover{ background:color-mix(in srgb, var(--gold) 7%, var(--surface-2)); }
[data-skin="epic"] .mine-row .mr-v{ color:var(--ink-3); }
[data-skin="epic"] .mine-row .mr-arrow{ color:var(--gold-text); }
[data-skin="epic"] .about-text{
  color:var(--ink-2);
  max-width:34em;
}
[data-skin="epic"] .ai-cfg,
[data-skin="epic"] .cali-body{}
[data-skin="epic"] .cfg-form{}
[data-skin="epic"] .cfg-field > span{
  color:var(--ink-2);
}
[data-skin="epic"] .cfg-field input,
[data-skin="epic"] .cfg-field select{
  min-height:var(--hit);
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
[data-skin="epic"] .cfg-field input:focus,
[data-skin="epic"] .cfg-field select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
[data-skin="epic"] .dot{
  border-radius:var(--r-sm);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bg) 58%, transparent)}
[data-skin="epic"] .cali-c{ border-top:1px dashed var(--line); }
[data-skin="epic"] .cali-c-row{
  border-bottom:1px dotted var(--line);
}
[data-skin="epic"] .cali-c-k{ font-family:var(--font-serif); }
[data-skin="epic"] .cali-c-v{ color:var(--ink-2); }
[data-skin="epic"] .cali-docs-t{
  color:var(--gold-text);
}
[data-skin="epic"] .cali-doc{
  border-bottom:1px dotted var(--line);
}
[data-skin="epic"] .cali-doc .cd-name{ color:var(--ink); font-weight:700; }
[data-skin="epic"] .cali-doc .cd-dim{ color:var(--ink-3); }

/* ============================================================
   §12 · 浮层（toast / 弹窗 / AI 抽屉 / 概念小框）
   ------------------------------------------------------------
   浮层是同一套设计语言的延长线：一律方角、2px 铜边、衬线标题。
   ============================================================ */
[data-skin="epic"] .ql-toast{
  background:linear-gradient(180deg, var(--surface-3), var(--bg-soft));
  color:var(--ink);
  outline: 2px solid var(--gold);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  box-shadow:var(--shadow-lg);
}
[data-skin="epic"] .ql-modal-overlay{ background:rgba(0, 0, 0, .72); }
[data-skin="epic"] .ql-modal{
  position:relative;
  background:var(--surface);
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
[data-skin="epic"] .ql-modal-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] .ql-modal-sub{ color:var(--ink-3);}
[data-skin="epic"] .ql-modal-input{
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm)}
[data-skin="epic"] .ql-modal-input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
[data-skin="epic"] .ql-modal-actions .mini-btn{
  background:var(--surface-2);
  color:var(--ink);
  outline: 2px solid var(--line);
  outline-offset: -2px}
/* AI 白话解读抽屉 */
[data-skin="epic"] .ai-drawer{
  background:var(--surface);
  border-left:1px solid var(--line-strong);
  box-shadow:inset 1px 0 0 var(--line-strong),-14px 0 44px rgba(0, 0, 0, .6);
}
[data-skin="epic"] .ai-head{
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 78%, var(--bg)));
  border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);}
[data-skin="epic"] .ai-title{
  font-family:var(--font-serif);
}
[data-skin="epic"] .ai-close{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface-2);
  color:var(--ink-2)}
[data-skin="epic"] .ai-close:hover{ border-color:var(--brand); color:var(--brand); }
[data-skin="epic"] .ai-mini{
  background:color-mix(in srgb, var(--bg) 42%, var(--surface-2));
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  color:var(--ink-2);
}
[data-skin="epic"] .ai-msgs{ background:var(--bg-soft); }
[data-skin="epic"] .ai-msg{
  border-radius:var(--r-sm);
}
[data-skin="epic"] .ai-msg.user{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 82%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  outline: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  outline-offset: -1px;

}
[data-skin="epic"] .ai-msg.bot{
  background:var(--surface-2);
  outline: 1px solid var(--line);
  outline-offset: -1px;

  color:var(--ink);
}
[data-skin="epic"] .ai-msg.bot .ai-h{
}
[data-skin="epic"] .ai-input{
  border-top:1px solid var(--line-strong);
  background:var(--surface);box-shadow:inset 0 1px 0 var(--line-strong);}
[data-skin="epic"] .ai-input input{
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm)}
[data-skin="epic"] .ai-input input:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px var(--gold-soft);
}
[data-skin="epic"] .ai-send{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 82%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  outline: 2px solid color-mix(in srgb, var(--brand) 58%, var(--gold));
  outline-offset: -2px;

  border-radius:var(--r-sm)}
[data-skin="epic"] .ai-foot{
  color:var(--ink-3);
  background:var(--surface-2);
  border-top:1px dashed var(--line);
}
[data-skin="epic"] .ai-clear{
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--ink-2);
}
[data-skin="epic"] .ai-clear:hover{ border-color:var(--gold); color:var(--gold-text); }
/* 概念小框（术语标记层） */
[data-skin="epic"] .ql-term{
  color:var(--ink);
  border-bottom:1px dotted var(--gold);
}
[data-skin="epic"] .ql-term:hover,
[data-skin="epic"] .ql-term[aria-expanded="true"]{
  background:var(--gold-soft);
  color:var(--gold-text);
}
[data-skin="epic"] .ql-tip{
  background:var(--surface);
  outline: 2px solid var(--line-strong);
  outline-offset: -2px;

  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);
}
[data-skin="epic"] .ql-tip-head{
  background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);}
[data-skin="epic"] .ql-tip-x{ color:var(--ink-3)}
[data-skin="epic"] .ql-tip-x:hover{ color:var(--gold-text); background:var(--gold-soft); }

/* ★ 已剔除（260922 实测）：原方案在此给 `ql-tip-cat / -cid / -judge / -lv / -note / -row`
   写了样式，但这 6 个类**引擎侧 `js/concept-tip.js` 从不生成**（真实弹框 DOM 只有
   head / alias / x / body / gloss / xiang / mobile 七个类）⇒ 纯死码，已删。
   留痕原因：避免后续皮肤作者误以为弹框里存在这些元素。 */

/* ============================================================
   §13 · 报告面 #page-report 全族
   ------------------------------------------------------------
   报告面是本产品唯一的「长文面」（16,958 字），也是硬规矩最多的一块：
     · 字号 ≥12px（本皮肤 --fs-xs 就钉在 12px，天然不越线）；
     · 正文走 --font-serif；折叠一律原生 details（本方案未新增任何开合）；
     · 提示块三档**禁用 3px 侧条纹** —— 本方案用「2px 全框 + 图标 + 词组标题」分档；
     · 同屏 --brand 可见用法 ≤2：本方案只保留两处 ——
         ① `.rp-chapno` 的朱砂章序号  ② `.rq-warn` 的朱砂边框；
       其余（章下横线、目录、表头、脚注）一律走 --gold / --accent / --line-strong。
     · 骨架适配只走 app.css 既有的 #viewportStage[data-shell=…]（本文件不改它、不加 @media）。
   ============================================================ */
html[data-skin="epic"] #page-report{
  font-size:var(--fs-md);
  color:var(--ink);
}
html[data-skin="epic"] #page-report .rp-meta{
  border-bottom:1px dashed var(--line);
  color:var(--ink-2);
}
html[data-skin="epic"] #page-report .rp-status{
  color:var(--ink-3);
}
html[data-skin="epic"] #page-report .rp-status-md{
  outline: 2px solid var(--accent);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
html[data-skin="epic"] #page-report .rp-status-md b{
  font-family:var(--font-serif);
}
html[data-skin="epic"] #page-report .rp-degrade{
  outline: 2px solid var(--danger);
  outline-offset: -2px;

  border-radius:var(--r-sm);
}
/* 章标题：衬线 + 正字距 + 一条 2px 铜线（结构性标记，不用色块） */
html[data-skin="epic"] #page-report .rp-h2{
  padding-bottom:var(--sp-2)}
/* 章序号＝铭文方牌（细节小巧思 ③）——报告面 --brand 配额之一 */
html[data-skin="epic"] #page-report .rp-chapno{
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--brand);
  outline: 1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong));
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 9%, transparent);
  margin-right:var(--sp-2);
}
html[data-skin="epic"] #page-report .rp-sub2{
}
html[data-skin="epic"] #page-report .rp-sub3{
  color:var(--ink-2);
}
html[data-skin="epic"] #page-report .rp-sub4{
  color:var(--ink-3);
}
/* 报告面小节前的竖条：金线（app.css 里 .tick 在此处本无样式 ⇒ 本条是**新增可见**，
   为守 --brand ≤2 配额而不用品牌色；一级依据见 方案.md「已知风险」第 8 条） */
html[data-skin="epic"] #page-report .tick{
  width:5px;
  height:16px;
  border-radius:var(--r-flat-md);
  background:linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 46%, var(--brand-deep)));
}
html[data-skin="epic"] #page-report .rp-ul li{}
html[data-skin="epic"] #page-report .rp-dl dt{
  color:var(--ink-2);
}
html[data-skin="epic"] #page-report .rp-note{
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 7%, var(--surface-2));
}
html[data-skin="epic"] #page-report .rq-grade{
  outline: 1px solid var(--line-strong);
  outline-offset: -1px;

  border-radius:var(--r-sm);
  background:var(--surface-3);
  color:var(--ink-2);
}
/* 章间分隔＝錾刻线（细节小巧思 ⑥ 的长文版） */
html[data-skin="epic"] #page-report .rp-hr{
  background-image:repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 50%, transparent) 0 8px, transparent 8px 16px)}
html[data-skin="epic"] #page-report .rp-tablewrap{
  outline: 1px solid var(--line);
  outline-offset: -1px;

  border-radius:var(--r-sm);
}
html[data-skin="epic"] #page-report .rp-table{
}
html[data-skin="epic"] #page-report .rp-table th{
  background:linear-gradient(180deg, var(--surface-3), color-mix(in srgb, var(--surface-3) 78%, var(--bg)));
  font-family:var(--font-serif)}
html[data-skin="epic"] #page-report .rp-table td{ border-color:var(--line); }
html[data-skin="epic"] #page-report .rp-table caption{
  color:var(--ink-3);
}
html[data-skin="epic"] #page-report .rp-unknown{
  outline: 2px solid var(--danger);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:var(--surface-2);
}
html[data-skin="epic"] #page-report .rp-fold{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 26%, var(--surface-2));
}
html[data-skin="epic"] #page-report .rp-fold > summary{
  min-height:var(--hit);
  font-family:var(--font-serif);
  color:var(--ink-2);
}
html[data-skin="epic"] #page-report .rp-fold > summary::before{ color:var(--gold-text); }
html[data-skin="epic"] #page-report .rp-fold > summary .rp-h2{
  border-bottom:none;
}
html[data-skin="epic"] #page-report .rp-fold-n{
  color:var(--ink-3);
}
html[data-skin="epic"] #page-report .rp-fold-body{ border-top:1px dashed var(--line); }
/* 提示块三档：2px 全框 + 词组标题 + 图标（**无侧条纹**，符合报告面硬规矩） */
html[data-skin="epic"] #page-report .rq{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 24%, var(--surface-2));
  padding:var(--sp-3) var(--sp-4);
}
html[data-skin="epic"] #page-report .rq-head{
  font-family:var(--font-serif);
}
html[data-skin="epic"] #page-report .rq p{
}
html[data-skin="epic"] #page-report .rq-detail{ color:var(--ink-2); }
html[data-skin="epic"] #page-report .rq-caveat{
  border-color:var(--accent);
  background:var(--accent-soft);
}
html[data-skin="epic"] #page-report .rq-caveat .rq-head{ color:var(--accent); }
/* 警示级：--brand 配额之二（只用在边框，标题文字走墨色以守配额） */
html[data-skin="epic"] #page-report .rq-warn{
  border-color:var(--brand);
  background:var(--brand-soft);
}
html[data-skin="epic"] #page-report .rq-warn .rq-head{ color:var(--ink); }
html[data-skin="epic"] #page-report .rq-source .rq-head{ color:var(--ink-2); }
/* 目录（桌面右侧粘性 / 手机折叠）：铜牌 + 每项 44px 命中盒 */
html[data-skin="epic"] #page-report .rp-toc-side{
  outline: 2px solid var(--line);
  outline-offset: -2px;

  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 24%, var(--surface-2));
}
html[data-skin="epic"] #page-report .rp-toc-li > a{
  min-height:var(--hit);
  align-items:center;
  border-radius:var(--r-sm);
  color:var(--ink-2);
}
html[data-skin="epic"] #page-report .rp-toc-li > a:hover{
  background:color-mix(in srgb, var(--gold) 9%, var(--surface-2));
  color:var(--ink);
}
html[data-skin="epic"] #page-report .rp-toc-no{
  color:var(--gold-text);
  font-family:var(--font-serif);
}

/* ============================================================
   §14 · 交互舒适度（命中盒 ≥44 · 四态 · 焦点环 · 动效降级）
   ------------------------------------------------------------
   机制层 readability.css 已把 11 个控件补到 44px；本方案在此**再抬一档到 46px**
   （厚重风：手重一点也点得中），并补上机制层漏掉的两个（.ai-close / .ql-tip-x）。
   ============================================================ */
/* ★ 261005 尺寸归一：原此处把全局点击区下限 `--hit` 由 44px 抬到 46px
   （原文自陈「本方案在此再抬一档到 46px（厚重风）」）。`--hit` 是**全局最小命中盒**，
   一经改写即令本套**全站**所有 `min-height:var(--hit)` 元素统一高 2px ——
   实测正是 owner 反复报的「青铜礼器明显比其他皮肤大一号」的**主根因**（81★/124★ 同族：
   尺寸必须逐套一致）。按 261005 收紧规约**整块删除**，回落 readability.css 的 44px。
   厚重感改由颜色/描边/阴影承担（见本件其余段），⛔ 不再用尺寸换质感。 */
/* ★ 260930-7：原 `[data-skin="epic"] .mini-btn{min-height:36px}`（基线无）已删除 ——
   该声明让青铜礼器的所有小按钮比其余皮肤高 2–4px（owner 报「大一号」的残留之一）。 */
[data-skin="epic"] .segmented .seg{}
[data-skin="epic"] .segmented.big .seg{}
[data-skin="epic"] .xy-tab{}
[data-skin="epic"] .tl-item{}
[data-skin="epic"] .quick{}
/* 机制层漏网的两个：AI 抽屉关闭键（30px）与概念小框关闭键（≈22px）
   ⇒ 视觉尺寸抬到 34–40px，再用伪元素把命中盒外扩到 ≥46px。 */
[data-skin="epic"] .ai-close{ position:relative; }
[data-skin="epic"] .ai-close::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:inherit;
}
[data-skin="epic"] .ql-tip-x{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center}
[data-skin="epic"] .ql-tip-x::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:inherit;
}
/* 四态：hover（§各节）· active 见下 · focus-visible 金环 · disabled */
[data-skin="epic"] .record-card:active,
[data-skin="epic"] .quick:active,
[data-skin="epic"] .sample-chip:active,
[data-skin="epic"] .mine-row:active{ transform:translateY(1px); }
[data-skin="epic"] :focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
[data-skin="epic"] .tab:focus-visible,
[data-skin="epic"] .seg:focus-visible,
[data-skin="epic"] .tl-item:focus-visible,
[data-skin="epic"] .record-card:focus-visible,
[data-skin="epic"] .mine-row:focus-visible,
[data-skin="epic"] .xy-tab:focus-visible,
[data-skin="epic"] .quick:focus-visible{ outline-offset:-3px; }
[data-skin="epic"] .basis>summary:focus-visible,
[data-skin="epic"] .cf>.cf-head:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:-2px;
  box-shadow:none;
}
[data-skin="epic"] button:disabled,
[data-skin="epic"] select:disabled,
[data-skin="epic"] input:disabled{
  opacity:.5;
  cursor:not-allowed;
}
[data-skin="epic"] .primary-btn:disabled{ opacity:.45; }
/* 动效降级（本文件唯一的媒体查询；不属断点真源，骨架差异一律走 data-shell） */
@media (prefers-reduced-motion: reduce){
  [data-skin="epic"] .sh-card::before,
  [data-skin="epic"] .tl-item,
  [data-skin="epic"] .primary-btn,
  [data-skin="epic"] .wx-bar .wb-seg,
  [data-skin="epic"] .cf>.cf-head .cf-arrow{
    transition:none;
  }
  [data-skin="epic"] .ql-toast{
    transition:opacity .001ms linear, transform .001ms linear;
  }
}
/* 说明：本文件**只有一条**媒体查询（上方的 prefers-reduced-motion），
   骨架差异一律走 #viewportStage[data-shell="phone|tab|desk|wide"]；
   `prefers-contrast: more` 的加粗线色本可再加一档，但为守住「不新写媒体查询」
   的硬约束，本次**未做**（已登记在 方案.md「本次未做」）。 */