/* ============================================================
   潜龙八字 · 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:2px;
  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);
  border:2px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);
}
[data-skin="epic"] .card{
  padding:var(--sp-4);
  margin-bottom:var(--sp-5);
}
/* 卡片四角「铜钉」（细节小巧思 ①）：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;
  border:1px solid var(--line-thin);
  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-size:var(--fs-lg);
  font-weight:800;
  letter-spacing:.06em;
  border-bottom:2px solid var(--line-strong);
  padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-3);
}
[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:1px;
  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);
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.02em;
}
/* 可折叠整卡：摘要行做成「铭牌抽屉」，开合箭头改为方角旋转 */
[data-skin="epic"] .card-fold{ padding:var(--sp-4); }
[data-skin="epic"] .cf>.cf-head{
  min-height:var(--hit);
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  letter-spacing:.04em;
}
[data-skin="epic"] .cf>.cf-head .cf-arrow{
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--gold-text);
  font-size:14px;
}
[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);
  padding:10px 0;
  font-size:var(--fs-md);
}
[data-skin="epic"] .kv .k{
  color:var(--ink-3);
  letter-spacing:.08em;
  font-size:var(--fs-sm);
}
[data-skin="epic"] .kv .v{ font-weight:700; }
[data-skin="epic"] .kv .v.brand{
  font-family:var(--font-serif);
  color:var(--brand);
  letter-spacing:.04em;
}
/* 「计算依据」折叠区：金线锚定，正文 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;
  letter-spacing:.04em;
}
[data-skin="epic"] .basis-body{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  line-height:1.75;
}
[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);
  border:1px solid var(--line);
  border-radius:2px;
  padding:0 5px;
  color:var(--ink-2);
  font-size:var(--fs-xs);
}
[data-skin="epic"] .basis-src{ color:var(--ink-3); font-size:var(--fs-sm); }

/* ============================================================
   §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));
  border:2px solid var(--line);
  border-radius:var(--r-md);
  padding:4px;
  gap:4px;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--bg) 70%, transparent);
}
[data-skin="epic"] .segmented.big{ margin-bottom:var(--sp-4); }
[data-skin="epic"] .segmented .seg{
  font-size:var(--fs-base);
  font-weight:700;
  letter-spacing:.1em;
  color:var(--ink-2);
  border-radius:2px;
  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);
  font-size:var(--fs-md);
  letter-spacing:.08em;
  color:var(--ink-2);
}
/* 主按钮：朱砂印版 */
[data-skin="epic"] .primary-btn{
  min-height:54px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 84%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  border:2px solid color-mix(in srgb, var(--brand) 62%, var(--gold));
  border-radius:var(--r-md);
  font-size:var(--fs-lg);
  font-weight:800;
  letter-spacing:.34em;
  text-indent:.34em;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gold) 40%, transparent), var(--shadow-md);
  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{
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.06em;
}
[data-skin="epic"] .mini-btn:hover{
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  border-color:var(--gold);
}
[data-skin="epic"] .iconbtn{
  border:2px solid var(--line);
  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);
  border:2px solid var(--danger);
  border-radius:var(--r-md);
  font-size:var(--fs-base);
  letter-spacing:.02em;
}

/* ============================================================
   §3 · 表单与首页块
   ------------------------------------------------------------
   输入控件：由「填充小方块」改为**阴刻槽**（下沿高光 + 上沿阴影 = 凿进去的槽），
   2px 铜边；命中盒 ≥44。12 个输入框在一屏里不再碎成方块阵。
   ============================================================ */
[data-skin="epic"] .form-title{
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  letter-spacing:.06em;
}
[data-skin="epic"] .form-title .ft-sub{
  font-size:var(--fs-sm);
  color:var(--gold-text);
  font-weight:700;
}
[data-skin="epic"] .form-row{ gap:var(--sp-2); margin-bottom:var(--sp-3); }
[data-skin="epic"] .field{
  gap:5px;
  font-size:var(--fs-sm);
  color:var(--ink-2);
  letter-spacing:.04em;
}
[data-skin="epic"] .field input,
[data-skin="epic"] .field select{
  min-height:46px;
  padding:10px 12px;
  font-size:var(--fs-base);
  font-weight:600;
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 46%, var(--surface-2));
  border:2px solid var(--line);
  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]{
  width:20px; height:20px;
  accent-color:var(--brand);
}
[data-skin="epic"] .form-hint{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  line-height:1.7;
}
/* 样本盘库：chip 做小铜牌 */
[data-skin="epic"] .sample-gtag{
  font-family:var(--font-serif);
  font-size:var(--fs-sm);
  color:var(--gold-text);
  letter-spacing:.14em;
}
[data-skin="epic"] .sample-chip{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  min-height:var(--hit);
  padding:8px 12px;
}
[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);
  font-size:var(--fs-md);
  letter-spacing:.06em;
}
[data-skin="epic"] .sample-chip .sc-meta{ font-size:var(--fs-xs); color:var(--ink-3); }
[data-skin="epic"] .sample-note{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  border-top:1px dashed var(--line);
  line-height:1.75;
}
[data-skin="epic"] .sample-empty{ font-size:var(--fs-sm); color:var(--ink-3); }
/* 快捷卡：左侧一枚铜钉 + 朱砂题名 */
[data-skin="epic"] .quick{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-3) var(--sp-4);
  position:relative;
}
[data-skin="epic"] .quick::before{
  content:"";
  position:absolute;
  left:6px; top:50%;
  width:5px; height:26px;
  margin-top:-13px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  border-radius:1px;
}
[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);
  font-size:var(--fs-md);
  letter-spacing:.06em;
}
[data-skin="epic"] .quick .q-d{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; }
[data-skin="epic"] .quick .q-r{ font-size:var(--fs-xs); color:var(--gold-text); letter-spacing:.08em; }

/* ============================================================
   §4 · 三套骨架（tabbar / 侧栏两态 / 抽屉）
   ------------------------------------------------------------
   同一元素承担三套骨架：手机＝底部 tabbar，平板＝左图标条，桌面＝左栏 248⇄76。
   本方案只改观感：青铜底座 + 2px 铜边 + 选中项「朱砂铭条」；
   两态（expanded / rail）与推挤过渡**一字未动**。
   ============================================================ */
[data-skin="epic"] .tabbar{
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  border-top:2px solid var(--line-strong);
}
[data-skin="epic"] .tab{
  color:var(--ink-3);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  min-height:var(--hit);
  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{
  border-top:0;
  border-right:2px solid var(--line-strong);
  background:linear-gradient(180deg, var(--surface), var(--bg-soft));
  box-shadow: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:2px;
  font-size:var(--fs-base);
  letter-spacing:.08em;
}
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{
  width:34px; height:34px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  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{
  font-size:var(--fs-lg);
  letter-spacing:.14em;
}
[data-skin="epic"] .side-brand .sb-sub{ font-size:var(--fs-sm); color:var(--ink-3); }
[data-skin="epic"] .sb-toggle{
  min-height:44px;
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 40%, var(--surface-2));
  color:var(--ink-2);
  font-size:var(--fs-sm);
  letter-spacing:.06em;
}
[data-skin="epic"] .sb-toggle:hover{ border-color:var(--gold); color:var(--gold-text); }
[data-skin="epic"] .side-foot{
  border-top:2px solid var(--line-strong);
  padding-top:var(--sp-3);
}
[data-skin="epic"] .sf-k{
  font-family:var(--font-serif);
  font-size:var(--fs-sm);
  color:var(--gold-text);
  letter-spacing:.16em;
}
[data-skin="epic"] .sf-note{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.6; }
[data-skin="epic"] .skin-pick{
  min-height:46px;
  padding:0 10px;
  font-size:var(--fs-base);
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 42%, var(--surface-2));
  border:2px solid var(--line);
  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{ min-height:44px; }
/* 汉堡（手机骨架）：方钮 */
[data-skin="epic"] .hamburger{
  width:44px; height:44px;
  border:2px solid var(--line-strong);
  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:2px solid var(--line-strong);
}
[data-skin="epic"] #sbDrawer .dr-title{
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  letter-spacing:.1em;
}
[data-skin="epic"] #sbDrawer .dr-close{
  width:36px; height:36px;
  border:2px solid var(--line);
  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{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.7; }
[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:2px solid var(--line-strong);
  padding-bottom:var(--sp-3);
  position:relative;
}
/* 顶栏下沿錾刻线（细节小巧思 ⑥ 的同族用法） */
[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{
  font-size:var(--fs-xl);
  letter-spacing:.14em;
}
[data-skin="epic"] .brand-sub{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  letter-spacing:.08em;
}
/* 印章（顶栏 + AI 抽屉）：圆形去掉，改**方章**——印是方的（细节小巧思 ⑧） */
[data-skin="epic"] .seal{
  width:46px; height:46px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--gold) 48%, transparent);
  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{
  width:28px; height:28px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--gold) 44%, transparent);
  transform:rotate(-2deg);
}
[data-skin="epic"] .user-card{
  position:relative;
  background:linear-gradient(160deg, var(--hero-surface), var(--hero-bg));
  color:var(--hero-text);
  border:2px solid var(--hero-line);
  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{
  width:56px; height:56px;
  border-radius:2px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--hero-text);
  font-family:var(--font-serif);
  font-size:30px;
  border:2px solid color-mix(in srgb, var(--gold) 42%, transparent);
  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);
  font-size:var(--fs-xl);
  letter-spacing:.1em;
}
[data-skin="epic"] .user-info .u-line{
  font-size:var(--fs-sm);
  color:var(--hero-dim);
  line-height:1.7;
}
[data-skin="epic"] .user-info .u-line b{
  color:var(--gold);
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .user-actions .mini-btn{
  background:transparent;
  color:var(--hero-text);
  border:1px solid var(--hero-line);
  min-height:34px;
}
[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{
  border:2px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--surface);
}
[data-skin="epic"] .pillars-table{
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .pillars-table th,
[data-skin="epic"] .pillars-table td{
  border:1px solid var(--line-strong);
  padding:10px 6px;
}
/* 表头：錾刻线（细节小巧思 ⑥）——下沿 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;
  font-size:var(--fs-sm);
  letter-spacing:.2em;
  text-indent:.2em;
  border-bottom:2px solid var(--line-strong);
  padding-top:9px;
  padding-bottom:11px;
}
[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);
  border:2px solid color-mix(in srgb, var(--brand) 70%, var(--gold));
  letter-spacing:.28em;
  text-indent:.28em;
  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);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-indent:0;
}
[data-skin="epic"] .pillars-table .col-year-tag{
  font-size:var(--fs-xs);
  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;
  font-size:var(--fs-sm);
  letter-spacing:.1em;
  border-right:2px solid var(--line-strong);
  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{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  padding:14px 8px;
  line-height:1.8;
}
[data-skin="epic"] .pillars-table .rel-tag{
  border-radius:2px;
  font-size:var(--fs-xs);
  font-weight:700;
  padding:1px 7px;
  background:color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color:var(--ink-2);
  border:1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
}
/* ◆ 干支「阴刻底槽」（细节小巧思 ②）
   槽比周围暗（上沿阴影 + 下沿高光 = 凿下去），槽内底沿一道铜锈渐层色条承担五行相。
   文字仍是 var(--ink) —— 机制层要求，不得改回彩色。 */
[data-skin="epic"] .pillars-table .gz{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2em;
  padding:3px 8px 7px;
  font-family:var(--font-serif);
  font-weight:800;
  font-size:38px;
  letter-spacing:.02em;
  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:2px;
  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{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  margin-top:3px;
}
[data-skin="epic"] .pillars-table .shishen,
[data-skin="epic"] .pillars-table .sub-line{
  font-size:var(--fs-sm);
  line-height:1.5;
}
[data-skin="epic"] .qz-table .shishen-cell{
  font-family:var(--font-serif);
  font-weight:800;
  font-size:var(--fs-md);
  letter-spacing:.06em;
}
[data-skin="epic"] .qz-table .sub-cell{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.7;
}
/* ◆ 藏干小字「阴刻纹」（细节小巧思 ②的同族）：
   文字仍 --ink-2（不落五行色），五行相走**底纹 + 描边**。 */
[data-skin="epic"] .zg-item{
  color:var(--ink-2);
  padding:1px 5px 2px;
  border-radius:2px;
  border:1px solid var(--line);
  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{ gap:var(--sp-2); }
[data-skin="epic"] .pillar{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 4px 12px;
}
[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);
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.28em;
}
[data-skin="epic"] .pillar .p-gan,
[data-skin="epic"] .pillar .p-zhi{
  font-size:48px;
  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{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  letter-spacing:.08em;
}
[data-skin="epic"] .pillar .day-badge{
  background:var(--brand-deep);
  color:var(--ink);
  border:1px solid color-mix(in srgb, var(--gold) 46%, transparent);
  border-radius:2px;
  font-size:var(--fs-xs);
  padding:1px 7px;
  letter-spacing:.14em;
}
[data-skin="epic"] .season-bar{
  border-top:2px solid var(--line-strong);
  background:color-mix(in srgb, var(--bg) 34%, var(--surface-2));
}
[data-skin="epic"] .season-bar .seg{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.08em;
  padding:10px 4px;
}
[data-skin="epic"] .season-bar .seg b{ color:var(--ink-2); }
[data-skin="epic"] .season-bar .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 .seg.on b{ color:var(--ink); }
[data-skin="epic"] .season-bar .seg:not(:last-child)::after{ background:var(--line-strong); }
/* 子时口径卡：金线 + 方角（提示块不复用 3px 侧条纹） */
[data-skin="epic"] .zi-note{
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 7%, var(--surface-2));
  font-size:var(--fs-sm);
  line-height:1.8;
  color:var(--ink-2);
}
[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);
  font-size:var(--fs-md);
  color:var(--gold-text);
}
[data-skin="epic"] .zi-note .zi-tip{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  border-top:1px dashed var(--line);
}
/* 手机骨架：行标签列的收窄与体例（骨架差异只用 data-shell，不写 @media）
   —— 保留 shell.css 的 position:sticky（本组规则不动 position）。 */
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table .row-name{
  width:62px; min-width:62px;
  font-size:var(--fs-xs);
  letter-spacing:.02em;
  padding-right:6px;
}
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table .gz{
  font-size:30px;
  min-width:1.6em;
  padding:2px 5px 6px;
}
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table th,
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillars-table td{
  padding:8px 3px;
}
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillar .p-gan,
html[data-skin="epic"] #viewportStage[data-shell="phone"] .pillar .p-zhi{ font-size:38px; }
/* 桌面 / 宽屏：干支再大一档（碑刻气势，--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{ font-size:52px; }
html[data-skin="epic"] #viewportStage[data-shell="desk"] .pillars-table .gz,
html[data-skin="epic"] #viewportStage[data-shell="wide"] .pillars-table .gz{ font-size:42px; }

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

/* ---- ① 五行力量：把「一条色块」升级为「一把铜尺」 ----
   底层：五段五行色块（编码色，可辨）；
   上层：0 / 20 / 40 / 60 / 80 / 100 六道刻度线（纯背景图，不占 DOM）；
   数值：图例里 `木 22%` 的百分比加粗 + 等宽数字（列对齐可比读）。 */
[data-skin="epic"] .wx-bar{
  position:relative;
  height:24px;
  border:2px solid var(--line-strong);
  border-radius:2px;
  background:color-mix(in srgb, var(--bg) 58%, var(--surface-2));
  overflow:hidden;
}
[data-skin="epic"] .wx-bar .seg{ border-radius:0; }
[data-skin="epic"] .wx-bar .seg:first-child{ border-radius:0; }
[data-skin="epic"] .wx-bar .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{ gap:6px 16px; margin-top:var(--sp-3); }
[data-skin="epic"] .wx-item{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  gap:6px;
}
[data-skin="epic"] .wx-item b{
  font-size:var(--fs-base);
  font-weight:800;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
[data-skin="epic"] .wx-legend .wx-dot{
  width:11px; height:11px;
  border-radius:1px;
  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{
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--bg) 32%, var(--surface-2));
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.7;
}
[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;
  padding:11px 8px 26px;
  background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, var(--bg)));
  border:2px solid var(--line);
  border-radius:var(--r-sm);
}
[data-skin="epic"] .sh-name{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .sh-lvl{
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.16em;
  border-radius:2px;
  padding:2px 0;
  margin:6px 0 3px;
  border:1px solid var(--line-strong);
  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{
  font-size:var(--fs-xs);
  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:2px;
  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;
}
/* 填充：三档落点（档位未产出的两格留空）
   用 clip-path 揭示而非动 width —— 不触发布局重排（交互检查点第 4 条），
   且保留自身 1px 描边与圆角不被拉变形。 */
[data-skin="epic"] .sh-card::before{
  content:"";
  position:absolute;
  left:9px; bottom:10px;
  height:6px;
  width:calc(100% - 18px);
  border-radius:1px;
  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 100% 0 0);
  transition:clip-path .22s ease;
}
[data-skin="epic"] .sh-card:has(.lv-weak)::before{ clip-path:inset(0 80% 0 0); }
[data-skin="epic"] .sh-card:has(.lv-mid)::before{ clip-path:inset(0 40% 0 0); }
[data-skin="epic"] .sh-card:has(.lv-strong)::before{ clip-path:inset(0 0 0 0); }

/* ============================================================
   §8 · 格局 / 旺衰 / 用神 / 六轨（可视化增强 ④：状态徽记）
   ============================================================ */
[data-skin="epic"] .pattern-name{
  font-size:var(--fs-2xl);
  letter-spacing:.14em;
}
[data-skin="epic"] .pattern-src{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  line-height:1.75;
}
/* 身强/身弱徽记：方牌 + 2px 边 + 骨白字 */
[data-skin="epic"] .band-pill{
  border-radius:2px;
  border:2px solid var(--line-strong);
  padding:6px 14px;
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.22em;
  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{
  height:14px;
  border:2px solid var(--line-strong);
  border-radius:2px;
}
[data-skin="epic"] .duo-txt{ font-size:var(--fs-sm); color:var(--ink-2); }
[data-skin="epic"] .duo-txt b{ color:var(--ink); font-variant-numeric:tabular-nums; }
/* 三格判定：顶部一条 3px 状态色条 + 衬线大字（颜色只是第二重编码，判定符本身仍是文字） */
[data-skin="epic"] .three-stat{ gap:var(--sp-2); }
[data-skin="epic"] .stat-pill{
  position:relative;
  overflow:hidden;
  min-height:68px;
  padding:12px 6px 10px;
  background:linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 76%, var(--bg)));
  border:2px solid var(--line);
  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-size:var(--fs-xl);
  font-weight:800;
}
[data-skin="epic"] .stat-pill .k{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.04em;
}
[data-skin="epic"] .detail-line{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  line-height:1.85;
}
[data-skin="epic"] .muted{ font-size:var(--fs-sm); color:var(--ink-3); }
/* 变式 chip / 成败徽章：app.css 里这一族是**裸 hex**（浅色硬编码），在墨玉底上会刺眼；
   本方案把它们收回令牌（色相走 border + 底纹，文字走 --ink，语义由文字承担）。 */
[data-skin="epic"] .pattern-special-row{ gap:7px; }
[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);
  border:1px solid color-mix(in srgb, var(--gold) 52%, var(--line-strong));
  border-radius:2px;
  font-size:var(--fs-sm);
  font-weight:700;
  padding:5px 11px;
  box-shadow:none;
}
[data-skin="epic"] .pattern-special-chip::before{ background:var(--gold); }
[data-skin="epic"] .pattern-chg-pill{
  border-radius:2px;
  border:1px solid var(--line-strong);
  padding:5px 12px;
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.1em;
  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{ font-size:var(--fs-sm); color:var(--ink-3); }
[data-skin="epic"] .pattern-yan-row{ font-size:var(--fs-sm); line-height:1.85; }
[data-skin="epic"] .pattern-yan-row .yan-k{
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
  border-radius:2px;
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.14em;
  padding:3px 10px;
}
[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));
  border:1px solid var(--line);
  border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);
  line-height:1.75;
}
[data-skin="epic"] .disease-card .disease-pill{
  background:var(--gold);
  color:var(--bg);
  border-radius:2px;
  letter-spacing:.14em;
}
/* 同上：金调底上的强调词走 --gold-text（6.49:1），不用 --brand（只 4.00:1）。 */
[data-skin="epic"] .disease-card .disease-type{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  color:var(--gold-text);
}
[data-skin="epic"] .disease-card .disease-label{ color:var(--ink-3); font-size:var(--fs-sm); }
[data-skin="epic"] .disease-card .disease-note{ color:var(--ink-3); font-size:var(--fs-sm); }
[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{ gap:var(--sp-2); }
[data-skin="epic"] .ys-card{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  padding:12px 14px;
}
[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);
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .ys-tag{
  border-radius:2px;
  font-size:var(--fs-xs);
  background:var(--gold-soft);
  color:var(--gold-text);
  letter-spacing:.14em;
  padding:2px 8px;
}
[data-skin="epic"] .ys-tag.main{
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
  color:var(--ink);
}
[data-skin="epic"] .ys-body{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.9;
}
[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{
  border:2px solid color-mix(in srgb, var(--brand) 50%, var(--line-strong));
  border-radius:var(--r-sm);
  background:linear-gradient(135deg, var(--brand-soft), transparent 62%);
  padding:12px 14px;
}
[data-skin="epic"] .ys-final-title{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .ys-final-title .sub{ font-size:var(--fs-sm); color:var(--ink-3); }
[data-skin="epic"] .ys-final-row{ font-size:var(--fs-sm); line-height:1.9; }
[data-skin="epic"] .ys-final-row .k{ color:var(--ink-3); font-size:var(--fs-sm); }
[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{
  border:1px dashed var(--warn);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  padding:12px 14px;
}
[data-skin="epic"] .ys-conflicts-title{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .ys-conflicts-title .sub{ font-size:var(--fs-sm); color:var(--ink-3); }
[data-skin="epic"] .ys-conflict-item{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.85;
  border-bottom:1px dotted var(--line);
}
[data-skin="epic"] .disclaimer{
  background:color-mix(in srgb, var(--gold) 8%, var(--surface-2));
  border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.85;
}
[data-skin="epic"] .disclaimer b{ color:var(--gold-text); }
[data-skin="epic"] .flow-chain{ font-size:var(--fs-sm); gap:var(--sp-2); }
[data-skin="epic"] .flow-node{
  background:var(--surface-3);
  border:1px solid var(--line-strong);
  border-radius:2px;
  color:var(--ink);
  font-weight:700;
  padding:5px 12px;
  letter-spacing:.08em;
}
[data-skin="epic"] .flow-arrow{ color:var(--gold); }
[data-skin="epic"] .flow-block{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  line-height:1.9;
}
[data-skin="epic"] .reading-box{ font-size:var(--fs-md); line-height:1.95; }
[data-skin="epic"] .reading-box b{ color:var(--brand); }
/* 刑冲合害：标签改「阴刻朱/铜小牌」（原为白字实色块，深色底上过亮） */
[data-skin="epic"] .xing-list{ gap:var(--sp-2); }
[data-skin="epic"] .xing-item{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 12px;
}
[data-skin="epic"] .xing-tag{
  border-radius:2px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  padding:2px 8px;
}
[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{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.8; }
[data-skin="epic"] .xing-txt b{ color:var(--ink); }
[data-skin="epic"] .xing-txt .sub{ font-size:var(--fs-xs); color:var(--ink-3); }
/* 神煞：chips ＋ S/A/B/C 铜印分级 */
[data-skin="epic"] .ss-group{ margin-bottom:var(--sp-3); }
[data-skin="epic"] .ss-head{
  font-family:var(--font-serif);
  font-size:var(--fs-sm);
  color:var(--gold-text);
  letter-spacing:.18em;
}
[data-skin="epic"] .ss-chip-row{ gap:var(--sp-2); }
[data-skin="epic"] .ss-chip{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:2px;
  min-height:38px;
  padding:8px 12px;
  font-size:var(--fs-sm);
  color:var(--ink);
  gap:8px;
}
[data-skin="epic"] .grade{
  min-width:20px;
  height:20px;
  border-radius:2px;
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.04em;
  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:2px;
  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{ gap:var(--sp-2); }
[data-skin="epic"] .six-item{
  background:var(--surface-2);
  border:2px solid var(--line);
  border-radius:var(--r-sm);
  padding:10px 12px;
}
[data-skin="epic"] .six-role{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .six-star{ font-size:var(--fs-sm); color:var(--ink-2); }
[data-skin="epic"] .six-trend{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.75; }
[data-skin="epic"] .six-meta{ gap:6px; }
[data-skin="epic"] .six-chip{
  border-radius:2px;
  font-size:var(--fs-xs);
  padding:1px 7px;
  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{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  line-height:1.75;
  border-top:1px dashed var(--line);
}
[data-skin="epic"] .six-timing b{ color:var(--ink-2); }
[data-skin="epic"] .pref{
  border-radius:2px;
  border:1px solid var(--line-strong);
  color:var(--ink);
  font-size:var(--fs-xs);
  padding:1px 7px;
  letter-spacing:.06em;
}
[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);
  padding:9px 2px;
  font-size:var(--fs-sm);
  gap:6px 12px;
}
[data-skin="epic"] .hb-wx{
  font-family:var(--font-serif);
  font-weight:800;
  color:var(--gold-text);
  min-width:56px;
  letter-spacing:.1em;
}
[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); font-size:var(--fs-sm); line-height:1.7; }
[data-skin="epic"] .hb-regimen,
[data-skin="epic"] .hb-timing{
  background:var(--surface-3);
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink-2);
  padding:1px 8px;
}
/* 岁运引动神煞：干支仍走墨色（机制层要求），五行相由左侧一道 --gz 竖条承担 */
[data-skin="epic"] .ssf-list{ gap:7px; }
[data-skin="epic"] .ssf-item{ font-size:var(--fs-sm); gap:10px; }
[data-skin="epic"] .ssf-gz{
  min-width:52px;
  color:var(--ink);
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.06em;
  padding:1px 6px;
  border-radius:2px;
  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{ gap:6px; }
[data-skin="epic"] .ssf-var{ font-size:var(--fs-xs); color:var(--warn); }

/* ============================================================
   §10 · ◆ 运岁三列（本方案的重点：在 xy3.css 的骨架上做风格化）
   ------------------------------------------------------------
   结构**一字未动**：非手机骨架仍是「① 小运+大运 ② 流年 ③ 流月」三列并列
   （列数 / 列位 / 列宽比例 / 四页面板解禁 全部沿用 xy3.css）；
   手机骨架仍是「四页签 + 单页显示」。
   本方案只改四件事：① 列头（铭文方牌）② 单元卡（刻槽 + 热力色带）
                     ③ 密度（间隙 / 行距 / 列高）④ 火漆「今」印。
   特异度说明：本节一律写 `html[data-skin="epic"] #viewportStage …`，
   因为 xy3.css 的骨架规则含 `#viewportStage`（id），纯类选择器压不过它。
   ============================================================ */
/* ---- ④ 密度：只动 xy3 暴露的可调参数，不动列比例 ---- */
html[data-skin="epic"] #viewportStage{
  --xy-gap:10px;
  --xy-rowgap:6px;
  --xy-pad:10px;
}
html[data-skin="epic"] #viewportStage[data-shell="tab"]{
  --xy-gap:8px;
  --xy-pad:8px;
}
/* ★ 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`）⇒
   属**上一版布局遗留的死变量**（声明了无人消费 ⇒ 静默失效）。
   本节**保留**的 `--xy-gap`／`--xy-pad`／`--xy-rowgap` 均有引用（后者的引用在本文件内）。 */
/* 三列容器：青铜底座（2px 铜边 + 四角不外扩） */
html[data-skin="epic"] #viewportStage:not([data-shell="phone"]) .tl-card[data-stack="xingyun"]{
  border:2px solid var(--line-strong);
  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{
  border:1px solid var(--line);
  border-top:2px solid var(--line-strong);
  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:2px solid var(--line-strong);
  padding:10px 10px 11px;
  gap:10px;
}
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-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.22em;
  color:var(--gold-text);
  padding:3px 9px 3px 7px;
  border:1px solid color-mix(in srgb, var(--gold) 46%, var(--line-strong));
  border-radius:2px;
  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{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  line-height:1.6;
}
/* 列内滚动区：密度参数由上面的 --xy-* 统一供 */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] > .xy-pane > .tl-scroll{
  gap:var(--xy-rowgap);
  padding:var(--xy-pad);
}
/* ---- ② 单元卡：刻槽 + 右侧热力色带 + 左沿「今」位 ---- */
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item{
  position:relative;
  border:1px solid var(--line);
  border-left:4px solid var(--line-strong);
  border-radius:2px;
  background:var(--surface-2);
  padding:7px 14px 7px 10px;
  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);
  border:1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  border-radius:2px;
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.2em;
  text-indent:.2em;
  padding:2px 6px;
  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-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .y b{
  font-size:var(--fs-md);
  color:var(--gold-text);
  font-weight:800;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .ss{
  font-size:var(--fs-sm);
  color:var(--ink-2);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .age{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  line-height:1.6;
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .age .rel-tag{
  font-size:var(--fs-xs);
  background:color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius:2px;
  color:var(--ink-2);
}
html[data-skin="epic"] #viewportStage .tl-card[data-stack="xingyun"] .xy-pane .tl-scroll .tl-item .dayun-act{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  line-height:1.65;
}
/* 干支刻槽（小尺寸版）：文字仍 --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;
  font-size:24px;
  letter-spacing:.02em;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:2.2em;
  padding:1px 7px 4px;
  border-radius:2px;
  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:2px;
  border:1px solid var(--line-strong);
  padding:2px 9px;
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.1em;
  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:2px;
  border:1px solid var(--line-strong);
  padding:2px 9px;
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.1em;
  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{
  padding:9px 10px;
  font-size:var(--fs-sm);
  line-height:1.85;
  color:var(--ink-3);
  background:color-mix(in srgb, var(--gold) 6%, var(--surface-2));
  border:1px solid var(--line);
  border-top:1px solid var(--line);
}
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:2px solid var(--line-strong);
  gap:2px;
}
html[data-skin="epic"] .xy-tab{
  min-height:var(--hit);
  font-family:var(--font-serif);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.16em;
  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:2px solid var(--line-strong);
}
html[data-skin="epic"] .tl-head .lt{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.1em;
}
html[data-skin="epic"] .tl-head .lt::before{
  width:4px;
  height:16px;
  border-radius:1px;
  background:linear-gradient(180deg, var(--brand), var(--brand-deep));
}
html[data-skin="epic"] .tl-head .r-info{ font-size:var(--fs-xs); color:var(--ink-3); }
html[data-skin="epic"] .tl-card{
  border:2px solid var(--line-strong);
  border-radius:var(--r-lg);
}

/* ============================================================
   §11 · 记录 / 我的 / 工作台
   ============================================================ */
[data-skin="epic"] .record-list{ gap:var(--sp-3); }
[data-skin="epic"] .record-card{
  background:var(--surface);
  border:2px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4);
}
[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);
  font-size:var(--fs-lg);
  letter-spacing:.06em;
}
[data-skin="epic"] .record-card .rc-gz{
  font-size:var(--fs-md);
  letter-spacing:.12em;
  color:var(--gold-text);
}
[data-skin="epic"] .record-card .rc-meta{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  line-height:1.75;
}
[data-skin="epic"] .record-card .rc-meta b{ color:var(--ink-2); }
[data-skin="epic"] .record-empty{
  font-size:var(--fs-md);
  color:var(--ink-3);
  line-height:1.95;
}
[data-skin="epic"] .record-actions .mini-btn{
  min-height:44px;
  background:var(--surface-2);
  color:var(--ink-2);
  border:2px solid var(--line);
}
[data-skin="epic"] .mine-group{
  background:var(--surface);
  border:2px solid var(--line-strong);
  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:2px solid var(--line-strong);
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  letter-spacing:.12em;
}
[data-skin="epic"] .mine-row{
  min-height:var(--hit);
  font-size:var(--fs-md);
  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{ font-size:var(--fs-sm); color:var(--ink-3); }
[data-skin="epic"] .mine-row .mr-arrow{ color:var(--gold-text); }
[data-skin="epic"] .mine-grade .grade{ min-width:26px; height:26px; }
[data-skin="epic"] .about-text{
  font-size:var(--fs-md);
  color:var(--ink-2);
  line-height:1.95;
  max-width:34em;
}
[data-skin="epic"] .ai-cfg,
[data-skin="epic"] .cali-body{ padding:var(--sp-4); }
[data-skin="epic"] .cfg-form{ gap:var(--sp-3); }
[data-skin="epic"] .cfg-field > span{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  letter-spacing:.04em;
}
[data-skin="epic"] .cfg-field input,
[data-skin="epic"] .cfg-field select{
  min-height:46px;
  font-size:var(--fs-base);
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  border:2px solid var(--line);
  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{
  width:10px;
  height:10px;
  border-radius:2px;
  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{
  font-size:var(--fs-sm);
  border-bottom:1px dotted var(--line);
  line-height:1.8;
}
[data-skin="epic"] .cali-c-k{ width:42px; font-family:var(--font-serif); }
[data-skin="epic"] .cali-c-v{ color:var(--ink-2); }
[data-skin="epic"] .cali-docs-t{
  font-size:var(--fs-sm);
  color:var(--gold-text);
  letter-spacing:.12em;
}
[data-skin="epic"] .cali-doc{
  font-size:var(--fs-sm);
  border-bottom:1px dotted var(--line);
  line-height:1.8;
}
[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);
  border:2px solid var(--gold);
  border-radius:var(--r-sm);
  font-size:var(--fs-md);
  letter-spacing:.1em;
  padding:12px 20px;
  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);
  border:2px solid var(--line-strong);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
[data-skin="epic"] .ql-modal-title{
  font-family:var(--font-serif);
  font-size:var(--fs-xl);
  letter-spacing:.1em;
}
[data-skin="epic"] .ql-modal-sub{ font-size:var(--fs-sm); color:var(--ink-3); line-height:1.75; }
[data-skin="epic"] .ql-modal-input{
  min-height:46px;
  font-size:var(--fs-base);
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  border:2px solid var(--line);
  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{
  min-height:44px;
  padding:0 18px;
  background:var(--surface-2);
  color:var(--ink);
  border:2px solid var(--line);
}
/* AI 白话解读抽屉 */
[data-skin="epic"] .ai-drawer{
  background:var(--surface);
  border-left:2px solid var(--line-strong);
  box-shadow:-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:2px solid var(--line-strong);
}
[data-skin="epic"] .ai-title{
  font-family:var(--font-serif);
  font-size:var(--fs-lg);
  letter-spacing:.1em;
}
[data-skin="epic"] .ai-close{
  width:40px; height:40px;
  border:2px solid var(--line);
  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{
  min-height:34px;
  padding:0 6px;
  background:color-mix(in srgb, var(--bg) 42%, var(--surface-2));
  border:1px solid var(--line);
  border-radius:2px;
  color:var(--ink-2);
  font-size:var(--fs-xs);
}
[data-skin="epic"] .ai-msgs{ background:var(--bg-soft); }
[data-skin="epic"] .ai-msg{
  border-radius:2px;
  font-size:var(--fs-md);
  line-height:1.9;
}
[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);
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
[data-skin="epic"] .ai-msg.bot{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink);
}
[data-skin="epic"] .ai-msg.bot .ai-h{
  font-size:var(--fs-md);
  letter-spacing:.08em;
}
[data-skin="epic"] .ai-input{
  border-top:2px solid var(--line-strong);
  background:var(--surface);
}
[data-skin="epic"] .ai-input input{
  min-height:46px;
  font-size:var(--fs-base);
  color:var(--ink);
  background:color-mix(in srgb, var(--bg) 44%, var(--surface-2));
  border:2px solid var(--line);
  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{
  min-height:46px;
  min-width:56px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand-deep) 82%, var(--brand)), var(--brand-deep));
  color:var(--ink);
  border:2px solid color-mix(in srgb, var(--brand) 58%, var(--gold));
  border-radius:var(--r-sm);
  letter-spacing:.2em;
  text-indent:.2em;
}
[data-skin="epic"] .ai-foot{
  font-size:var(--fs-xs);
  color:var(--ink-3);
  background:var(--surface-2);
  border-top:1px dashed var(--line);
  line-height:1.6;
}
[data-skin="epic"] .ai-clear{
  min-height:34px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:var(--surface-3);
  color:var(--ink-2);
  font-size:var(--fs-xs);
}
[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);
  border:2px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  font-size:var(--fs-sm);
  line-height:1.8;
}
[data-skin="epic"] .ql-tip-head{
  background:linear-gradient(180deg, var(--surface-3), var(--surface-2));
  border-bottom:2px solid 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);
  line-height:1.95;
  color:var(--ink);
}
html[data-skin="epic"] #page-report .rp-meta{
  border-bottom:1px dashed var(--line);
  font-size:var(--fs-sm);
  color:var(--ink-2);
  letter-spacing:.04em;
}
html[data-skin="epic"] #page-report .rp-status{
  font-size:var(--fs-sm);
  color:var(--ink-3);
}
html[data-skin="epic"] #page-report .rp-status-md{
  border:2px solid var(--accent);
  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);
  font-size:var(--fs-md);
  letter-spacing:.06em;
}
html[data-skin="epic"] #page-report .rp-degrade{
  border:2px solid var(--danger);
  border-radius:var(--r-sm);
}
/* 章标题：衬线 + 正字距 + 一条 2px 铜线（结构性标记，不用色块） */
html[data-skin="epic"] #page-report .rp-h2{
  font-size:var(--fs-xl);
  letter-spacing:.12em;
  line-height:1.5;
  padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--line-strong);
}
/* 章序号＝铭文方牌（细节小巧思 ③）——报告面 --brand 配额之一 */
html[data-skin="epic"] #page-report .rp-chapno{
  font-family:var(--font-serif);
  font-size:var(--fs-md);
  font-weight:800;
  color:var(--brand);
  border:1px solid color-mix(in srgb, var(--gold) 58%, var(--line-strong));
  border-radius:2px;
  background:color-mix(in srgb, var(--gold) 9%, transparent);
  padding:2px 10px;
  margin-right:var(--sp-2);
  letter-spacing:.12em;
}
html[data-skin="epic"] #page-report .rp-sub2{
  font-size:var(--fs-lg);
  letter-spacing:.08em;
}
html[data-skin="epic"] #page-report .rp-sub3{
  font-size:var(--fs-md);
  color:var(--ink-2);
  letter-spacing:.04em;
}
html[data-skin="epic"] #page-report .rp-sub4{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.08em;
}
/* 报告面小节前的竖条：金线（app.css 里 .tick 在此处本无样式 ⇒ 本条是**新增可见**，
   为守 --brand ≤2 配额而不用品牌色；一级依据见 方案.md「已知风险」第 8 条） */
html[data-skin="epic"] #page-report .tick{
  width:5px;
  height:16px;
  border-radius:1px;
  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{ line-height:1.95; }
html[data-skin="epic"] #page-report .rp-dl dt{
  font-size:var(--fs-sm);
  color:var(--ink-2);
  letter-spacing:.04em;
}
html[data-skin="epic"] #page-report .rp-note{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:color-mix(in srgb, var(--gold) 7%, var(--surface-2));
  font-size:var(--fs-sm);
  line-height:1.9;
}
html[data-skin="epic"] #page-report .rq-grade{
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:var(--surface-3);
  color:var(--ink-2);
  font-size:var(--fs-sm);
  letter-spacing:.08em;
}
/* 章间分隔＝錾刻线（细节小巧思 ⑥ 的长文版） */
html[data-skin="epic"] #page-report .rp-hr{
  border-top:none;
  height:2px;
  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{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
html[data-skin="epic"] #page-report .rp-table{
  font-size:var(--fs-sm);
  line-height:1.8;
}
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)));
  border-bottom:2px solid var(--line-strong);
  font-family:var(--font-serif);
  letter-spacing:.08em;
}
html[data-skin="epic"] #page-report .rp-table td{ border-color:var(--line); }
html[data-skin="epic"] #page-report .rp-table caption{
  font-size:var(--fs-sm);
  color:var(--ink-3);
  letter-spacing:.04em;
}
html[data-skin="epic"] #page-report .rp-unknown{
  border:2px solid var(--danger);
  border-radius:var(--r-sm);
  background:var(--surface-2);
}
html[data-skin="epic"] #page-report .rp-fold{
  border:2px solid var(--line);
  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);
  font-size:var(--fs-sm);
  letter-spacing:.08em;
  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;
  padding-bottom:0;
  letter-spacing:.08em;
}
html[data-skin="epic"] #page-report .rp-fold-n{
  font-size:var(--fs-sm);
  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{
  border:2px solid var(--line);
  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);
  font-size:var(--fs-sm);
  letter-spacing:.1em;
}
html[data-skin="epic"] #page-report .rq p{
  font-size:var(--fs-sm);
  line-height:1.95;
}
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{
  border:2px solid var(--line);
  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:2px;
  color:var(--ink-2);
  font-size:var(--fs-sm);
}
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);
  letter-spacing:.08em;
}

/* ============================================================
   §14 · 交互舒适度（命中盒 ≥44 · 四态 · 焦点环 · 动效降级）
   ------------------------------------------------------------
   机制层 readability.css 已把 11 个控件补到 44px；本方案在此**再抬一档到 46px**
   （厚重风：手重一点也点得中），并补上机制层漏掉的两个（.ai-close / .ql-tip-x）。
   ============================================================ */
html[data-skin="epic"] #viewportStage{
  --hit:46px;
  --sb-item-h:46px;
}
[data-skin="epic"] .iconbtn{ width:var(--hit); height:var(--hit); }
[data-skin="epic"] .mini-btn{ min-height:36px; }
[data-skin="epic"] .segmented .seg{ min-height:var(--hit); }
[data-skin="epic"] .segmented.big .seg{ min-height:var(--hit); }
[data-skin="epic"] .xy-tab{ min-height:var(--hit); }
[data-skin="epic"] .sample-chip{ min-height:var(--hit); }
[data-skin="epic"] .mine-row{ min-height:var(--hit); }
[data-skin="epic"] .record-card{ min-height:var(--hit); }
[data-skin="epic"] .tl-item{ min-height:var(--hit); }
[data-skin="epic"] .sb-toggle{ min-height:var(--hit); }
[data-skin="epic"] .basis>summary{ min-height:var(--hit); }
[data-skin="epic"] .cf>.cf-head{ min-height:var(--hit); }
[data-skin="epic"] .skin-pick{ min-height:46px; }
[data-skin="epic"] .quick{ min-height:var(--hit); }
/* 机制层漏网的两个：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;
  min-width:34px;
  min-height:34px;
  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 .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「本次未做」）。 */