/* =====================================================================
* mod-hd.css —— 工作台各模块【统一标题栏】标准组件（2026-09-21）
*
* 设计基线：品牌设计模块标题栏（狼哥 2026-09-21 拍板）
* 大标题 = 「模块名 · 当前分栏」 分栏名用模块主题色，跟随分栏切换
* 副标题 = 这一栏是干嘛的（一句人话）
* 右上角 = 模块圆徽章
*
* 用法（模块侧）：
*
*
* ModHd.render('fin', '收入 · 成本 · 利润 · 现金');
* // 有分栏的模块：
* ModHd.render('brand', null, {tabs:{bp:{t:'品牌档案',s:'…'}, …}, cur:'bp'});
* ModHd.setSeg('works'); // 切分栏时调
*
* ★ 所有颜色走 CSS 变量（--hd-accent 由 JS 按模块注入），深浅色自动适配。
* ★ 不要在各模块里再复制一份样式 —— 改这里，全部模块同步生效。
*
* ★ 2026-09-22 新增【页头分栏 UI 模板】：
* 有分栏的模块，用 opt.tabs + opt.tabHost 把「页头 + 分栏标签」渲染成一张整卡
* （页头渐变过渡到白，分栏紧贴其下，视觉一体，不再是两块拼一起）。
* 无分栏的模块保持原样（只有页头自己的卡）。
* 页头背景：左 → 右 由主题色过渡到白（狼哥 09-22）。
* ===================================================================== */
.mod-hd{
/* ★ 2026-10-16 狼哥：padding 对称（原 26px左/22px右 → 24px 统一）*/
display:block;position:relative;padding:20px 24px 16px;
margin:0 0 14px;overflow:hidden;border-radius:14px;
/* ★ 方案C：背景用主题色浅色填充（深浅色各自适配） */
/* ★ 2026-09-22 狼哥：从左到右过渡到白，避免整体一个主题色太单调 */
background:linear-gradient(100deg,
color-mix(in srgb, var(--hd-accent) 20%, var(--card,#fff)) 0%,
color-mix(in srgb, var(--hd-accent) 9%, var(--card,#fff)) 34%,
var(--card,#fff) 72%,
var(--card,#fff) 100%);
border:1px solid color-mix(in srgb, var(--hd-accent) 24%, var(--line,rgba(0,0,0,.08)));
box-shadow:0 1px 2px rgba(16,24,40,.04);
/* 模块主题色：JS 注入，兜底用公共蓝 */
--hd-accent:var(--dept,#6b8fc4);
}
/* ★ 左侧主题色竖条（贯穿全高，方案C 的主识别元素） */
/* ★ 2026-10-12 狼哥：去掉左侧主题色竖条（突兀，与卡片边框重复）*/
.mod-hd .mh-eyebrow{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
/* ★ 方案C：浅色底上把主题色压深一点，保证可读性 */
color:color-mix(in srgb, var(--hd-accent) 82%, var(--txt,#1a1a1a));
}
.mod-hd .mh-title{
font-size:23px;font-weight:800;letter-spacing:-.01em;
/* ★ 方案C：主标题染主题色（无分栏的模块也一眼认出） */
margin:0 0 5px;color:var(--hd-accent);line-height:1.25;
}
/* 分栏名：同字号同字重，用主题色 + 浅色圆点分隔（两者平级又可区分） */
.mod-hd .mh-seg{color:var(--hd-accent);font-size:23px;font-weight:800}
.mod-hd .mh-sep{
color:color-mix(in srgb,var(--txt,#1a1a1a) 26%,transparent);
font-weight:400;margin:0 11px;
}
.mod-hd .mh-desc{
font-size:12.5px;color:var(--dim,#8a8a8a);max-width:760px;line-height:1.6;
}
/* 右上角模块徽章 */
.mod-hd .mh-badge{
position:absolute;top:24px;right:24px;width:52px;height:52px;
display:flex;align-items:center;justify-content:center;
border-radius:14px;font-size:26px;line-height:1;
}
.mod-hd .mh-badge img{width:100%;height:100%;display:block;border-radius:14px}
/* 右上角操作区（情报中心/项目管理的按钮放这） */
.mod-hd .mh-ops{
position:absolute;top:24px;right:24px;display:flex;align-items:center;gap:8px;
}
/* 操作区里的输入框 / 按钮（opt.ops 内使用，模块侧无需自定义） */
.mod-hd .mh-ops .tb-search{
width:200px;padding:7px 12px;border-radius:9px;font-size:12.5px;
border:1px solid color-mix(in srgb, var(--hd-accent) 20%, var(--line,rgba(0,0,0,.08)));
background:var(--card,#fff);color:var(--txt,#1a1a1a);
outline:none;transition:.15s;
}
.mod-hd .mh-ops .tb-search:focus{border-color:var(--hd-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--hd-accent) 14%,transparent)}
.mod-hd .mh-ops .tb-search::placeholder{opacity:.55}
.mod-hd .mh-ops .mh-btn{
padding:7px 13px;border-radius:9px;font-size:12.5px;cursor:pointer;
border:1px solid var(--line,rgba(0,0,0,.08));background:var(--card,#fff);
color:var(--txt,#1a1a1a);transition:.15s;white-space:nowrap;
}
.mod-hd .mh-ops .mh-btn:hover{border-color:var(--hd-accent);color:var(--hd-accent)}
/* 有 ops 时徽章左移，避免重叠 */
.mod-hd.has-ops .mh-badge{right:auto;left:auto;display:inline-flex}
/* ===== 可选：返回按钮（opt.back，树形模块用，如学习笔记） ===== */
/* ★2026-10-13 狼哥 v3：只留单箭头 —— 无边框/无底色/无文字，hover 只留动效 */
.mod-hd .mh-back{
position:absolute;left:22px;top:24px;
width:30px;height:30px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
color:var(--hd-accent,#6b8fc4);cursor:pointer;
border:none;background:transparent;padding:0;
transition:transform .18s cubic-bezier(.2,.7,.3,1), opacity .18s;
opacity:.82;
}
.mod-hd .mh-back svg{display:block;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.mod-hd .mh-back:hover{opacity:1;transform:translateY(-2px)}
.mod-hd .mh-back:hover svg{transform:translateX(-3px)}
.mod-hd .mh-back:active{transform:translateY(0) scale(.9)}
/* 有返回按钮时，eyebrow/标题左缩进对齐 */
/* ★2026-10-13 修：返回按钮被 mh-badge-inline 压住
真因：.mh-back 是 position:absolute（脱离文档流）
→ badge(inline-flex) 仍从自然起点 x=49 开始 → 撞上按钮(45~75)
修法：has-back 时给【流内第一个元素】让出 42px（按钮 30 + 间距 12） */
.mod-hd.has-back .mh-badge-inline{margin-left:42px} /* 让位返回按钮 */
.mod-hd.has-back .mh-eyebrow,.mod-hd.has-back .mh-title,.mod-hd.has-back .mh-desc{padding-left:42px}
/* 没有 badge 时（纯 eyebrow 打头）也要让位 */
.mod-hd.has-back > .mh-eyebrow:first-of-type{padding-left:42px}
/* ===== 可选：路径行（opt.path，层级导航，如 知识库 > 目录 > 文档） ===== */
.mod-hd .mh-path{
font-size:12.5px;color:var(--dim,#8a8a8a);margin-top:7px;
display:none;align-items:center;gap:4px;flex-wrap:wrap;
}
.mod-hd .mh-path.on{display:flex}
.mod-hd .mh-path b{color:var(--dim,#8a8a8a);font-weight:500;cursor:pointer}
.mod-hd .mh-path b:hover{color:var(--hd-accent)}
.mod-hd .mh-path .cur{color:var(--txt,#1a1a1a);font-weight:600}
.mod-hd .mh-path .sep{opacity:.55;margin:0 2px}
/* 浮动徽章（有操作按钮时，徽章缩到 eyebrow 前） */
/* ★2026-10-13 狼哥：部门徽章 → 英文胶囊标签（替换图片/emoji） */
.mod-hd .mh-badge-inline{
display:inline-flex;align-items:center;justify-content:center;
height:20px;padding:0 8px;border-radius:6px;margin-right:8px;
vertical-align:middle;white-space:nowrap;
font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--hd-accent);
background:color-mix(in srgb, var(--hd-accent) 12%, transparent);
border:1px solid color-mix(in srgb, var(--hd-accent) 22%, transparent);
}
/* 无操作区时的「大胶囊」（右上角位置） */
/* ★ 2026-10-16 狼哥：旧角标定义已删（统一到文件末尾的 .mh-en-tag 规则）*/
/* 窄屏：徽章缩小、标题降字号 */
@media (max-width:640px){
.mod-hd{padding:16px 16px 13px 20px;margin:0 0 12px;border-radius:12px}
.mod-hd .mh-title,.mod-hd .mh-seg{font-size:19px}
.mod-hd .mh-badge{width:40px;height:40px;top:18px;right:16px}
.mod-hd .mh-desc{font-size:12px}
.mod-hd .mh-ops{top:16px;right:16px}
.mod-hd .mh-back{left:16px;top:18px}
.mod-hd.has-back .mh-badge-inline{margin-left:36px}
.mod-hd.has-back .mh-eyebrow,.mod-hd.has-back .mh-title,.mod-hd.has-back .mh-desc{padding-left:36px}
}
/* ===== ★ 方案C · 深色模式适配（2026-09-22） =====
浅色模式下用「主题色 + 白」混，深色下换成「主题色 + 深底」，否则会发灰发脏 */
body.dark .mod-hd,
html[data-theme="dark"] .mod-hd,
body[data-theme="dark"] .mod-hd{
background:linear-gradient(100deg,
color-mix(in srgb, var(--hd-accent) 30%, var(--card,#1c1f24)) 0%,
color-mix(in srgb, var(--hd-accent) 14%, var(--card,#1c1f24)) 36%,
var(--card,#1c1f24) 74%,
var(--card,#1c1f24) 100%);
border-color:color-mix(in srgb, var(--hd-accent) 34%, var(--line,rgba(255,255,255,.1)));
}
body.dark .mod-hd .mh-eyebrow,
html[data-theme="dark"] .mod-hd .mh-eyebrow,
body[data-theme="dark"] .mod-hd .mh-eyebrow{
color:color-mix(in srgb, var(--hd-accent) 88%, #fff);
}
body.dark .mod-hd .mh-ops .tb-search,
html[data-theme="dark"] .mod-hd .mh-ops .tb-search,
body[data-theme="dark"] .mod-hd .mh-ops .tb-search{
background:color-mix(in srgb, var(--card,#1c1f24) 88%, #000);
}
/* =====================================================================
* ★★ 页头分栏 UI 模板（2026-09-22 狼哥拍板 · 全模块通用）
*
* 【形态】页头卡片（.mod-hd）+ 分栏标签栏（.mhtabs）两块并列
* —— 两块各自独立，不合并成一张卡（狼哥明确要求"保持现在这个样子"）。
*
* 【分工】
* ① 页头 = ModHd.render() / ModHd.tabkit() 管 标题·副标题·徽章·左侧色条
* ② 分栏 = ModHd.tabs() / ModHd.tabkit() 管 标签·选中态·切换回调
*
* 【这个模板包含什么】（狼哥 09-22 点名的全部要素）
* ✓ 页头渐变 —— 左 → 右 由主题色过渡到白（.mod-hd background）
* ✓ 文件夹标签样式 —— 圆角上开口、选中态与内容区连成一体（.mhtab）
* ✓ 位置 —— 页头在上、分栏紧贴其下（.mhtabs margin:2px 0 0）
* ✓ 线条 —— 底边 2px 基准线 + 选中态 3px 开口线（::before/::after）
* ✓ 字体 —— 标签 13px / 页头标题 23px 800（见 .mhtab / .mh-title）
* ✓ 空心↔实心 —— 图标未选空心描边、选中实心填充（.mh-ic svg）
* ✓ 渐变标签 —— 选中标签背景为主题色纵向渐变（.mhtab.on）
* ✓ 页头↔分栏联动 —— 切标签时页头「模块名 · 分栏名」+ 副标题同步（JS tabsSet）
*
* 【接入只需自定义三样】主题色（--hd-accent / opts.accent）
* 标签名（tabs[k].t）
* 副标题（tabs[k].s，即页头里那句人话）
* 图标可选：不传=纯文字标签；传了=自动空心↔实心。
*
* 【参考实现】内容运营 smm/index.html（8 个分栏全带图标，页头与标签严格同源）
* 【改这里 = 所有接入模块同步生效，模块侧不要再复制一份样式】
* ===================================================================== */
.mhtabs{
position:relative;display:flex;gap:0;align-items:flex-end;
margin:2px 0 0;padding:0 2px;overflow-x:auto;
scrollbar-width:none;-ms-overflow-style:none;
}
.mhtabs::-webkit-scrollbar{display:none}
.mhtabs::before{
content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--line,rgba(0,0,0,.08));z-index:0;pointer-events:none;
}
.mhtab{
position:relative;border:1px solid transparent;border-bottom:none;
background:transparent;border-radius:11px 11px 0 0;
padding:9px 18px 10px;font-size:13px;color:var(--sub,#5d6b8a);cursor:pointer;
white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
margin-right:4px;z-index:1;font-family:inherit;
transition:background .26s cubic-bezier(.4,0,.2,1),color .22s ease,
border-color .26s ease,box-shadow .26s ease,
transform .26s cubic-bezier(.34,1.4,.64,1);
}
.mhtab:hover{color:var(--txt,#1a1d23);background:color-mix(in srgb,var(--line) 45%,transparent)}
.mhtab:active{transform:translateY(1px)}
.mhtab.on{
color:var(--hd-accent,var(--dept,#6b8fc4));font-weight:700;
border-color:var(--line,rgba(0,0,0,.08));
background:linear-gradient(180deg,
color-mix(in srgb, var(--hd-accent,var(--dept,#6b8fc4)) 13%, var(--bg,#f6f7f9)) 0%,
color-mix(in srgb, var(--hd-accent,var(--dept,#6b8fc4)) 5%, var(--bg,#f6f7f9)) 55%,
var(--bg,#f6f7f9) 100%);
border-bottom-color:var(--bg,#f6f7f9);
box-shadow:0 -3px 10px -3px color-mix(in srgb,var(--hd-accent,var(--dept,#6b8fc4)) 30%,transparent);
z-index:3;
}
.mhtab.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bg,#f6f7f9);z-index:4}
.mhtab.on::before{
content:'';position:absolute;left:9px;right:9px;top:0;height:2px;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,transparent,var(--hd-accent,var(--dept,#6b8fc4)),transparent);opacity:.75;
}
.mhtab:not(.on){background:color-mix(in srgb,var(--card2,var(--card,#fff)) 80%,transparent)}
.mhtab:not(.on)::after{
content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
background:var(--line,rgba(0,0,0,.08));z-index:2;
}
/* 图标：默认空心 → 选中实心（同一份闭合轮廓） */
.mhtab .mh-ic{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;transition:transform .26s ease}
.mhtab .mh-ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none;
stroke-linecap:round;stroke-linejoin:round;display:block;transition:fill .2s ease}
.mhtab.on .mh-ic{transform:scale(1.06)}
.mhtab.on .mh-ic svg{fill:currentColor;stroke:none}
.mhtab.on .mh-ic svg .st{fill:none;stroke:currentColor;stroke-width:1.2}
/* 计数徽标 */
.mhtab .mh-ct{
font-size:10px;font-weight:700;border-radius:20px;padding:0 6px;line-height:15px;
background:color-mix(in srgb,var(--hd-accent,var(--dept,#6b8fc4)) 15%,transparent);
color:var(--hd-accent,var(--dept,#6b8fc4));
}
/* ===== ★ 深色模式：主题色提亮（避免深底上发闷，与模块原深色观感一致） ===== */
body.dark .mhtabs,html[data-theme="dark"] .mhtabs,body[data-theme="dark"] .mhtabs{
--hd-accent:color-mix(in srgb, var(--hd-accent) 78%, #ffffff);
}
body.dark .mhtab:not(.on),html[data-theme="dark"] .mhtab:not(.on),body[data-theme="dark"] .mhtab:not(.on){
background:color-mix(in srgb, var(--card2,var(--card,#1c1f24)) 80%, transparent);
}
body.dark .mhtab:hover,html[data-theme="dark"] .mhtab:hover,body[data-theme="dark"] .mhtab:hover{
background:color-mix(in srgb, var(--line,rgba(255,255,255,.1)) 45%, transparent);
}
body.dark .mhtab.on,html[data-theme="dark"] .mhtab.on,body[data-theme="dark"] .mhtab.on{
background:linear-gradient(180deg,
color-mix(in srgb, var(--hd-accent) 18%, var(--bg,#15181d)) 0%,
color-mix(in srgb, var(--hd-accent) 7%, var(--bg,#15181d)) 55%,
var(--bg,#15181d) 100%);
border-bottom-color:var(--bg,#15181d);
}
body.dark .mhtab.on::after,html[data-theme="dark"] .mhtab.on::after,body[data-theme="dark"] .mhtab.on::after{
background:var(--bg,#15181d);
}
body.dark .mhtab .mh-ct,html[data-theme="dark"] .mhtab .mh-ct,body[data-theme="dark"] .mhtab .mh-ct{
background:color-mix(in srgb, var(--hd-accent) 22%, transparent);
}
/* 窄屏 */
@media (max-width:640px){
.mhtab{padding:8px 13px 9px;font-size:12.5px}
}
/* ★★★ 2026-09-30 自定义分页内容（配置驱动渲染）—— 韩老魔 */
.pg-pane{padding:16px 4px 40px;max-width:1100px}
.pg-block{border:1px solid var(--line,#e8ebf0);border-radius:12px;background:var(--card,#fff);margin-bottom:14px;overflow:hidden}
.pg-blk-t{font-size:12.5px;font-weight:700;color:var(--txt,#1a1d23);padding:11px 14px;border-bottom:1px solid var(--line2,#f0f2f5)}
.pg-blk-b{padding:13px 14px}
.pg-loading,.pg-empty{color:var(--dim,#8b95a3);font-size:12.5px;padding:8px 0}
.pg-empty-big{color:var(--dim,#8b95a3);font-size:13.5px;text-align:center;padding:60px 20px;border:1px dashed var(--line,#e8ebf0);border-radius:12px}
.pg-stat{display:flex;align-items:baseline;gap:6px}
.pg-stat b{font-size:26px;font-weight:800;color:var(--txt,#1a1d23)}
.pg-stat span{font-size:12.5px;color:var(--dim,#8b95a3)}
.pg-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.pg-tb th{text-align:left;font-weight:700;color:var(--sub,#5b6472);padding:7px 9px;border-bottom:1px solid var(--line,#e8ebf0);white-space:nowrap}
.pg-tb td{padding:7px 9px;border-bottom:1px solid var(--line2,#f0f2f5);color:var(--txt,#1a1d23)}
.pg-tb tr:last-child td{border-bottom:none}
.pg-tb tbody tr:hover{background:var(--hover,rgba(0,0,0,.02))}
.pg-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:8px}
.pg-bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.pg-bar i{display:block;width:100%;max-width:40px;background:linear-gradient(180deg,var(--accent,#288DF5),rgba(40,141,245,.55));border-radius:4px 4px 0 0;min-height:2px;transition:height .3s}
.pg-bar em{font-size:9.5px;color:var(--dim,#8b95a3);font-style:normal;margin-top:5px;white-space:nowrap}
.pg-link,.pg-btn{border:1px solid var(--line,#e8ebf0);background:var(--card,#fff);color:var(--accent,#288DF5);
border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.pg-link:hover,.pg-btn:hover{background:var(--accent-soft,rgba(40,141,245,.1));border-color:var(--accent,#288DF5)}
/* ★★★ 2026-09-30 P2：分页空态/错误态（原来显示「—」让人以为坏了）—— 韩老魔 */
.pg-nodata{color:var(--dim,#8b95a3);font-size:12.5px;padding:14px 0;text-align:center;
background:var(--code-bg,#f7f8fa);border-radius:9px;border:1px dashed var(--line,#e8ebf0)}
.pg-err{color:#b26a00;font-size:12.5px;padding:12px 14px;text-align:center;
background:rgba(240,160,32,.08);border-radius:9px;border:1px solid rgba(240,160,32,.28)}
/* ══════ ★ 2026-10-16 狼哥：页头统一 v3 ══════
角标（英文胶囊）统一在【标题上方】，所有模块一致 */
.mod-hd .mh-badge,
.mod-hd .mh-badge-inline,
/* ★★★ 2026-10-16 狼哥：角标优化 —— 字号小一点（装饰性）+ 加菱形 */
.mod-hd .mh-en-tag,
.mod-hd .mh-en-tag-lg{
position:static !important;
width:auto !important; height:auto !important;
display:inline-flex !important; align-items:center; gap:6px;
padding:2px 8px; border-radius:6px;
font-size:8.5px; font-weight:700; letter-spacing:.06em;
text-transform:uppercase;
color:var(--hd-accent);
background:color-mix(in srgb, var(--hd-accent) 10%, transparent);
border:1px solid color-mix(in srgb, var(--hd-accent) 20%, transparent);
/* ★ 2026-10-16 狼哥：与主标题的间距 = 主副标题间距（5px）*/
margin-bottom:5px;
line-height:1.4;
}
/* ★ 菱形装饰（◆）*/
.mod-hd .mh-en-tag::before,
.mod-hd .mh-en-tag-lg::before{
content:"◆";
font-size:6.5px;
line-height:1;
opacity:.85;
flex:0 0 auto;
}
/* 图标版徽章（有 img 的）：保持小图标 + 胶囊并排 */
.mod-hd .mh-badge img{ width:22px; height:22px; border-radius:6px; margin-right:6px }