/* ============================================================
 * 孝当先 · 设计系统 v1（后台 + 商城共用）
 *
 * 为什么要这一层：
 *   改版前 admin.html 有 62 种硬编码颜色、16 种字号、2384 处内联 style；
 *   m.html 有 79 种颜色、36 种字号。每个页面手工描像素，改一个颜色要动几百处。
 *   这一层只做两件事：
 *     ① 重定义原有 CSS 变量（--main / --ink / --line / --paper ...）→ 旧代码自动换色
 *     ② 用同名类覆盖视觉（圆角 / 阴影 / 间距 / 字重）→ 不动 DOM、不动业务 JS
 *
 * 使用方式：在页面 <style> 之后 <link> 引入。后加载 + 同特异性 = 覆盖生效。
 * 铁律：本文件只改变「长相」，不改变任何布局结构与显示/隐藏逻辑。
 * ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root{
  /* 中性色：从暖米灰换成冷灰，整体立刻「干净」，这是去老气最关键的一步 */
  --paper:#F5F6F8;
  --card:#FFFFFF;
  --ink:#0F172A;
  --ink2:#475569;
  --ink3:#94A3B8;
  --line:#E5E8EE;

  /* 品牌色：深青保留（品牌资产），但只用于关键动作与选中态 */
  --main:#1B4B5A;
  --main-deep:#123743;
  --main-soft:#EAF2F4;
  --accent:#B4452F;
  --accent-soft:#FBEDEA;
  --gold:#B08D3F;
  --gold-soft:#F8F1E1;
  --ok:#0F766E;
  --ok-soft:#E6F4F1;

  /* 语义色：状态一律「浅底 + 深字」，不用纯色块压眼睛 */
  --warn:#B45309;
  --warn-soft:#FDF3E3;
  --danger:#B91C1C;
  --danger-soft:#FDECEC;
  --info:#1D4ED8;
  --info-soft:#EAF0FE;

  /* 新增令牌（旧代码不认，新代码用） */
  --xd-line-soft:#EEF1F5;
  --xd-bg-soft:#F8FAFC;
  --xd-radius:10px;
  --xd-radius-sm:8px;
  --xd-radius-xs:6px;
  --xd-radius-pill:999px;
  --xd-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
  --xd-shadow-lg:0 12px 32px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.04);
  --xd-ring:0 0 0 3px rgba(27,75,90,.12);

  /* 侧栏（深色壳保留，对比更强；选中态加金色竖条做品牌识别） */
  --side-bg:#0F2F38;
  --side-l2:#12333D;
  --side-ink:#9FB6BE;
  --side-cur:#FFFFFF;
  --side-curbg:rgba(176,141,63,.16);
  --side-hov:rgba(255,255,255,.07);
  --side-line:rgba(255,255,255,.08);
}

/* ---------- 2. 字体：去掉宋体做正文标题，这是「显老」的最大元凶 ---------- */
body{
  font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
              "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size:14px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 标题统一无衬线 + 600，靠字重和字号建立层级，不靠衬线 */
.page-head h2,
.panel h3,
.drawer .hd h3,
.modal h3,
.sec-title h3,
.detail-body h1{
  font-family:inherit;
  font-weight:600;
  letter-spacing:0;
}

/* 品牌字标保留宋体：只此一处，做气质锚点 */
.top .brand,
.login-box h1,
.topbar .brand{
  font-family:"Songti SC", "STSong", serif;
}

/* ---------- 3. 内容区与页头 ---------- */
.main{ padding:22px 28px 48px; }

.page-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:20px;
}
.page-head h2{ font-size:20px; color:var(--ink); }
.page-head .sub{ font-size:13px; color:var(--ink3); margin-top:3px; }
.page-head .acts{ display:flex; align-items:center; gap:10px; }

/* ---------- 4. 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 16px;
  font-size:13.5px; font-weight:500; line-height:1;
  border-radius:var(--xd-radius-sm);
  background:var(--main); color:#fff;
  border:1px solid transparent;
  transition:background .15s, box-shadow .15s, border-color .15s;
  white-space:nowrap;
}
.btn:hover{ background:var(--main-deep); opacity:1; }
.btn:active{ transform:translateY(.5px); }
.btn:focus-visible{ outline:none; box-shadow:var(--xd-ring); }
.btn.sm{ height:30px; padding:0 12px; font-size:12.5px; border-radius:var(--xd-radius-xs); }
.btn.red{ background:var(--accent); }
.btn.red:hover{ background:#9E3A26; }
.btn.ghost{ background:#fff; color:var(--main); border-color:var(--line); }
.btn.ghost:hover{ background:var(--xd-bg-soft); border-color:#D5DBE4; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* 兼容 JSON 里常见的纯 <button>：不给主按钮样式，只统一圆角与高度 */
.pager button, .seg-b, .topnav button, .side-l2 button{ font-family:inherit; }

/* ---------- 5. 表单 ---------- */
input, select, textarea{
  height:36px; padding:0 12px;
  font-size:13.5px; font-family:inherit; color:var(--ink);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--xd-radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
textarea{ height:auto; padding:9px 12px; line-height:1.6; }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--main); box-shadow:var(--xd-ring);
}
input::placeholder, textarea::placeholder{ color:var(--ink3); }
label{ font-size:12.5px; color:var(--ink2); font-weight:500; margin-bottom:6px; }

/* 筛选条 / 工具条：白卡 + 统一内边距，不再用 1px 硬边框贴边 */
.filters, .toolbar, .bar{
  display:flex; align-items:center; flex-wrap:wrap;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--xd-radius);
  padding:14px 16px;
  box-shadow:var(--xd-shadow);
  margin-bottom:16px;
  gap:10px;
}
.filters input, .filters select, .toolbar input, .toolbar select{
  height:34px; font-size:13px; margin:0;
  width:auto;
}
.filters input{ min-width:200px; }
.filters .lbl{ font-size:12.5px; color:var(--ink3); font-weight:400; }

/* 两列表单网格（抽屉与面板通用） */
.fgrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px 20px;
}
.fgrid .full{ grid-column:1 / -1; }
.fgrid > div{ min-width:0; }
.fgrid label{ display:block; margin-bottom:6px; }
.fgrid input, .fgrid select, .fgrid textarea{ width:100%; margin:0; }
.fgrid textarea{ resize:vertical; }
.form-row{ display:flex; gap:14px; }
.form-row > div{ flex:1; min-width:0; }

/* ---------- 6. 卡片 / 面板 ---------- */
.panel, .tpl-card, .merchant, .tbl-wrap, .tree{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--xd-radius);
  box-shadow:var(--xd-shadow);
}
.panel{ padding:22px 24px; margin-bottom:18px; }
.panel h3{ font-size:15px; color:var(--ink); margin-bottom:14px; }
.merchant{ padding:16px 20px; margin-bottom:16px; }
.merchant .nm{ font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); }

/* ---------- 7. 统计卡 ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(172px, 1fr));
  gap:14px; margin-bottom:22px;
}
.stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--xd-radius);
  box-shadow:var(--xd-shadow);
  padding:18px 20px;
  transition:box-shadow .15s, border-color .15s;
}
.stat:hover{ box-shadow:0 4px 14px rgba(15,23,42,.07); border-color:#DCE2EB; }
.stat .n{
  font-family:inherit; font-weight:600;
  font-size:28px; line-height:1.15; color:var(--ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.stat .t{ font-size:12.5px; color:var(--ink3); margin-top:6px; }
.stat.warn .n{ color:var(--accent); }

/* ---------- 8. 表格：去掉 2px 粗线，改成「浅灰头 + 细线 + 行悬停」 ---------- */
table{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--card); font-size:13px;
}
th{
  text-align:left; padding:11px 14px;
  background:var(--xd-bg-soft);
  color:var(--ink2); font-size:12px; font-weight:600;
  letter-spacing:.02em;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
th:first-child{ border-top-left-radius:var(--xd-radius); }
th:last-child{ border-top-right-radius:var(--xd-radius); }
td{
  padding:12px 14px;
  border-bottom:1px solid var(--xd-line-soft);
  vertical-align:middle; color:var(--ink);
}
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover td{ background:var(--xd-bg-soft); }
tbody tr{ transition:background .12s; }
td.num{ font-variant-numeric:tabular-nums; }
td.img-cell img{ width:40px; height:40px; border-radius:var(--xd-radius-xs); border:1px solid var(--line); }
table.mini th{ background:var(--xd-bg-soft); padding:9px 12px; font-size:11.5px; }
table.mini td{ padding:9px 12px; }
table.sku th{ font-size:11.5px; }
table.sku input, table.sku select{ height:30px; font-size:12.5px; }

/* 表格容器：圆角 + 裁掉表头溢出 */
.tbl-wrap{ overflow:hidden auto; }
.tbl-wrap table{ min-width:880px; border-radius:0; }
.tbl-wrap::-webkit-scrollbar{ height:8px; width:8px; }
.tbl-wrap::-webkit-scrollbar-thumb{ background:#D5DBE4; border-radius:4px; }

/* ---------- 9. 标签：胶囊 + 语义浅底 ---------- */
.tag, .chip, .hbadge, .pill{
  display:inline-flex; align-items:center;
  height:22px; padding:0 9px;
  font-size:11.5px; font-weight:500; line-height:1;
  border-radius:var(--xd-radius-pill);
  border:1px solid transparent;
  margin:0 2px 0 0;
  white-space:nowrap;   /* 「高级」不能被列宽挤成两行 */
}
.tag.high, .hbadge.bad, .chip.bad, .pill.red{ background:var(--danger-soft); color:var(--danger); }
.tag.mid, .chip.warn, .hbadge.warn{ background:var(--warn-soft); color:var(--warn); }
.tag.ok, .chip.ok, .hbadge.ok{ background:var(--ok-soft); color:var(--ok); }
.chip.main, .pill{ background:var(--main-soft); color:var(--main); }
.chip, .pill.gold{ background:#F1F3F6; color:var(--ink2); }
.pill.gold{ background:var(--gold-soft); color:var(--gold); }
.tag.open{ background:var(--ok-soft); color:var(--ok); }
.tag.prep{ background:var(--warn-soft); color:var(--warn); }
.tag.stop{ background:#F1F3F6; color:var(--ink3); }
.tag:last-child{ margin-right:0; }

/* ---------- 10. 抽屉 / 模态 ---------- */
.drawer .pane{
  /* 宽度交给页面变量：详情页把 --detail-w 定成 66vw；没定义的页面回落 1080。
     这条在页面 <style> 之后加载，同特异性会覆盖页面里写的 width ——
     只在 admin.html 的 <style> 里改是没用的（实测宽度纹丝不动，1080 就是这里来的）。 */
  width:min(var(--detail-w, 1080px), 94vw);
  box-shadow:var(--xd-shadow-lg);
  border-radius:16px 0 0 16px;
}
.drawer .hd{ padding:18px 24px; border-bottom:1px solid var(--line); }
.drawer .hd h3{ font-size:17px; color:var(--ink); }
.drawer .bd{ padding:20px 24px 28px; }
.drawer .ft{
  padding:14px 24px; background:var(--xd-bg-soft);
  border-top:1px solid var(--line);
  border-radius:0 0 0 16px;
}
.modal .box{
  border-radius:14px;
  box-shadow:var(--xd-shadow-lg);
  padding:24px 26px;
  width:min(640px, 92vw);
}
.modal{ backdrop-filter:blur(2px); }
.drawer{ backdrop-filter:blur(2px); }

/* 分段导航 */
.stabs, .seg{ border-bottom:1px solid var(--line); gap:4px; }
.stabs button, .seg-b{
  height:36px; padding:0 14px; font-size:13px; font-weight:500;
  border-radius:var(--xd-radius-xs) var(--xd-radius-xs) 0 0;
  color:var(--ink2);
}
.stabs button.on{ color:var(--main); border-bottom-color:var(--main); }
.seg{ background:transparent; border:none; padding:0; }
.seg-b.on{ background:var(--main-soft); color:var(--main); font-weight:600; }

/* ---------- 11. 侧栏 / 顶栏 ---------- */
.top{
  height:56px; flex:0 0 56px; padding:0 20px;
  background:var(--side-bg); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.top .brand{ font-size:17px; letter-spacing:.04em; }
.top .who{ font-size:12.5px; opacity:.8; cursor:pointer; }

.topnav-bar{ background:var(--side-bg); flex:0 0 auto; }
.topnav{
  display:flex; gap:4px; padding:0 20px;
  overflow-x:auto; scrollbar-width:none;
}
.topnav::-webkit-scrollbar{ display:none; }
.topnav button{
  display:flex; align-items:center; gap:6px;
  height:44px; padding:0 16px;
  border:none; background:none; cursor:pointer;
  color:var(--side-ink); font-family:inherit;
  font-size:13.5px; font-weight:500; white-space:nowrap;
  border-bottom:2px solid transparent;
  opacity:.82;
  transition:color .15s, background .15s, opacity .15s;
}
.topnav button:hover{ color:#fff; opacity:1; background:rgba(255,255,255,.05); }
.topnav button.on{
  color:#fff; font-weight:600; opacity:1;
  border-bottom-color:var(--gold);
  background:rgba(255,255,255,.04);
}

.side{ display:flex; flex:0 0 184px; background:var(--side-l2); }
.side-l2{ flex:1 1 auto; overflow-y:auto; padding:12px 10px 20px; }
.side-l2 h4, .side-l2 h5{
  margin:14px 12px 6px;
  font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:none;
  color:var(--side-ink); opacity:.6;
}
.side-l2 h4:first-child, .side-l2 h5:first-child{ margin-top:2px; }
/* 分组标题（12.155）：从「页签上的 sec 字符串」升级成节点后，它可以带图标与链接。
 * 默认仍是纯标题（不可点）—— 它本来就不是页面，做成按钮会让人以为点进去有东西。
 * 配了链接才渲染成 a，hover 才提亮，视觉上「能点」这件事只在真能点时出现。 */
.side-l2 h5{ display:flex; align-items:center; gap:6px; }
.side-l2 h5 .ic{ width:12px; height:12px; flex:0 0 12px; display:inline-flex; opacity:.75; }
.side-l2 h5 .ic svg{ width:12px; height:12px; }
.side-l2 h5 a{
  display:flex; align-items:center; gap:6px; min-width:0;
  color:inherit; text-decoration:none; opacity:1;
  border-radius:4px; padding:1px 4px; margin:-1px -4px;
  transition:background .12s, color .12s;
}
.side-l2 h5 a:hover{ background:var(--side-hov); color:#fff; }
.side-l2 h5 a .tx{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-l2 h5 a .xd-ico.xs{ opacity:.6; flex:0 0 auto; }
.side-l2 button{
  display:flex; align-items:center; gap:9px;
  width:100%; height:38px; padding:0 12px;
  border:none; background:none; cursor:pointer;
  color:var(--side-ink); font-family:inherit;
  font-size:13px; font-weight:400; text-align:left;
  border-radius:var(--xd-radius-xs);
  position:relative;
  transition:background .12s, color .12s;
}
.side-l2 button:hover{ background:var(--side-hov); color:#fff; }
.side-l2 button.on{
  color:#fff; font-weight:600;
  background:var(--side-curbg);
  box-shadow:inset 3px 0 0 var(--gold);
}
.side-l2 button .ic{
  width:16px; height:16px; flex:0 0 16px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; opacity:.82;
  transition:opacity .12s, color .12s;
}
.side-l2 button:hover .ic,
.side-l2 button.on .ic{ opacity:1; }
.side-l2 button .bdg{
  margin-left:auto; font-size:10px; line-height:16px;
  background:var(--accent); color:#fff;
  padding:0 6px; border-radius:8px;
}
.side.collapsed{ display:none; }

/* 门店切换器 / 风格切换器：去掉生硬描边，做成「输入感」 */
.store-switch, .skin-switch{
  height:32px; border-radius:var(--xd-radius-sm);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  font-size:12.5px;
}
.store-switch:hover, .skin-switch:hover{ background:rgba(255,255,255,.14); }

/* ---------- 12. 分页 ---------- */
.pager{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:8px; margin-top:16px;
  font-size:13px; color:var(--ink3);
}
.pager button{
  height:32px; min-width:32px; padding:0 10px;
  border:1px solid var(--line); background:var(--card);
  border-radius:var(--xd-radius-xs); font-size:12.5px; color:var(--ink2);
  cursor:pointer; transition:all .12s;
}
.pager button:hover:not(:disabled){ border-color:var(--main); color:var(--main); }
.pager button:disabled{ opacity:.35; cursor:not-allowed; }
.pager button.on{ background:var(--main); color:#fff; border-color:var(--main); }

/* ---------- 13. 其它常用 ---------- */
.empty{
  padding:56px 24px; text-align:center; color:var(--ink3);
  background:var(--card); border:1px dashed #DCE2EB;
  border-radius:var(--xd-radius); font-size:13px;
}
.hint, .mini, .muted{ font-size:12.5px; color:var(--ink3); }
code{
  background:#F1F3F6; color:var(--main);
  padding:2px 6px; border-radius:5px;
  font-size:12px; font-family:ui-monospace, Menlo, Consolas, monospace;
}
.kv{ gap:8px 12px; }
.kv .k{ color:var(--ink3); font-size:12.5px; }
.tnode{ height:36px; padding:0 10px; border-radius:var(--xd-radius-xs); font-size:13px; }
.tnode.on{ background:var(--main-soft); color:var(--main); }
.tbadge{ font-size:10.5px; padding:1px 6px; border-radius:var(--xd-radius-pill); }

/* 上传/图片位：虚线圈改为品牌色 hover，圆角加大 */
.gd-cover{ border-radius:var(--xd-radius); border-color:#D5DBE4; background:var(--xd-bg-soft); }
.gd-imgs .gi{ border-radius:var(--xd-radius-sm); }

/* 滚动条统一（Chrome/Edge） */
.main::-webkit-scrollbar, .side-l2::-webkit-scrollbar, .drawer .bd::-webkit-scrollbar{ width:10px; }
.main::-webkit-scrollbar-thumb, .side-l2::-webkit-scrollbar-thumb, .drawer .bd::-webkit-scrollbar-thumb{
  background:#D5DBE4; border-radius:6px; border:3px solid transparent; background-clip:content-box;
}
.side-l2::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); background-clip:content-box; }

/* ---------- 14. 内联样式纠偏（只处理最高频的三类，用低侵入选择器） ---------- */
/* 大量 JS 模板里写死 border:1px solid #DED8D0 / #E7E2DA，统一成冷灰 */
[style*="border:1px solid #DED8D0"],
[style*="border:1px solid #ded8d0"],
[style*="border:1px solid #E7E2DA"],
[style*="border:1px solid #e7e2da"]{
  border-color:var(--line) !important;
}
/* 写死的暖米底统一成中性浅灰 */
[style*="background:#FCFBF9"], [style*="background:#fcfbf9"],
[style*="background:#FBFAF7"], [style*="background:#fbfaf7"],
[style*="background:#FAF8F4"], [style*="background:#faf8f4"]{
  background:var(--xd-bg-soft) !important;
}

/* ---------- 15. 工作台待办 ----------
 * 工作台要回答「今天先干什么」，不是「系统里有什么」。
 * 待办条按紧急度排序：左侧竖色条 + 数量做大 + 一整行可点。
 */
.todo-wrap{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--xd-radius);
  box-shadow:var(--xd-shadow);
  overflow:hidden;
  margin-bottom:18px;
}
.todo-head{
  padding:16px 18px;
  border-bottom:1px solid var(--xd-line-soft);
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.todo-head h3{ font-size:15px; font-weight:600; color:var(--ink); }
.todo-head .sub{ margin-top:4px; font-size:12.5px; color:var(--ink3); }
.todo-head .sub b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.todo-head .sub b.hot{ color:var(--accent); }

.todo-list{ display:grid; grid-template-columns:1fr; }
.todo-list.two{ grid-template-columns:1fr 1fr; }
@media (max-width:1180px){ .todo-list.two{ grid-template-columns:1fr; } }

.todo-item{
  display:flex; align-items:center; gap:12px;
  padding:13px 18px 13px 15px;
  border-bottom:1px solid var(--xd-line-soft);
  border-left:3px solid transparent;
  cursor:pointer;
  transition:background .12s;
}
.todo-item:hover{ background:var(--xd-bg-soft); }
.todo-item.high{ border-left-color:var(--accent); }
.todo-item.mid{ border-left-color:var(--gold); }
.todo-item.low{ border-left-color:#CBD5E1; }
.todo-item .ti-ic{
  width:32px; height:32px; flex:0 0 32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--xd-radius-sm);
  background:var(--xd-bg-soft); color:var(--ink2); font-size:17px;
}
.todo-item.high .ti-ic{ background:var(--accent-soft); color:var(--accent); }
.todo-item.mid .ti-ic{ background:var(--gold-soft); color:var(--gold); }
.todo-item .ti-main{ flex:1; min-width:0; }
.todo-item .ti-main b{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); }
.todo-item .ti-main em{
  display:block; font-style:normal; font-size:12px; color:var(--ink3);
  margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.todo-item .ti-n{
  font-size:20px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--ink); flex:0 0 auto;
}
.todo-item.high .ti-n{ color:var(--accent); }
.todo-item .ti-go{
  font-size:12px; color:var(--ink3); flex:0 0 auto;
  opacity:0; transform:translateX(-4px); transition:all .14s;
}
.todo-item:hover .ti-go{ opacity:1; transform:translateX(0); }

.todo-empty{
  padding:34px 18px; text-align:center; color:var(--ink3); font-size:13px;
}
.todo-empty .ic{ display:block; font-size:26px; color:var(--ok); margin-bottom:8px; }

/* 区块标题：给一屏里的板块分组，不再靠 <h3> 光秃秃地悬着 */
.blk-h{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--ink);
}
.blk-h .muted{ font-weight:400; }

/* 折叠块：系统状态这类「查问题时才看」的内容默认收起 */
details.fold{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--xd-radius); box-shadow:var(--xd-shadow);
  margin-top:16px; overflow:hidden;
}
details.fold > summary{
  padding:13px 18px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--ink2);
  display:flex; align-items:center; gap:8px;
}
details.fold > summary::-webkit-details-marker{ display:none; }
details.fold > summary::before{
  content:"›"; font-size:16px; color:var(--ink3);
  transition:transform .15s; display:inline-block;
}
details.fold[open] > summary::before{ transform:rotate(90deg); }
details.fold > summary:hover{ color:var(--ink); }
details.fold .fold-bd{ padding:0 18px 16px; }

/* ---------- 16. 响应式 ---------- */
@media (max-width: 900px){
  .main{ padding:16px 14px 40px; }
  .cards{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:10px; }
  .stat{ padding:14px 16px; }
  .stat .n{ font-size:24px; }
  .side{ flex:0 0 150px; }
  .page-head h2{ font-size:18px; }
  .todo-item .ti-go{ display:none; }
}

/* ---------- 图标微调：小尺寸下补一点笔画，避免 13px 字号里发灰糊掉 ---------- */
.side-l2 button .xd-ico{ stroke-width:2; }
.topnav button .xd-ico{ stroke-width:1.9; }
.side-l2 button.on .xd-ico{ stroke-width:2.05; }

/* ---------- 侧栏三级菜单（12.146 菜单自定义） ----------
 * 三级是「某页下面的子页」，所以缩进 + 更小字号 + 更淡的字色，而不是再加一个小标题。
 * 父项右侧的箭头单独可点（onclick 里 stopPropagation），点行本身仍然切页签 ——
 * 「想展开看看有什么」和「就用这一页」是两个意图，不能让其中一个抢占另一个。 */
.side-l2 button.has-kids{ padding-right:8px; }
.side-l2 button .tx{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-l2 button .car{
  flex:0 0 18px; width:18px; height:18px; margin-left:2px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px; opacity:.55;
}
.side-l2 button .car:hover{ opacity:1; background:var(--side-hov); }
.l2kids{
  padding:0 0 2px 0; margin-left:19px;
  border-left:1px solid var(--side-line);   /* 竖向导引线：只靠缩进在深色底上几乎看不出来 */
}
.l2kids[hidden]{ display:none; }
.l2kids button.kid{
  height:32px; padding-left:14px; font-size:12.5px;
  color:var(--side-ink); opacity:.85;
}
.l2kids button.kid:hover{ opacity:1; }
.l2kids button.kid.on{ opacity:1; box-shadow:inset 3px 0 0 var(--gold); }
.l2kids button.kid .ic{ width:14px; height:14px; flex:0 0 14px; font-size:14px; opacity:.7; }

/* ---------- 菜单编辑器（设置 → 菜单编辑） ----------
 * 左栏是「模块」（十几个），右栏是「这个模块下的菜单」（几十个），所以右栏要更宽。
 * 行内直接编辑显示名与图标：弹窗改一个名字要多两次点击，而调菜单是连着改十几处的活。 */
.mc-wrap{ display:flex; gap:14px; align-items:flex-start; }
.mc-left{
  flex:0 0 262px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:8px;
}
.mc-right{
  flex:1 1 auto; min-width:0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:8px 10px 12px;
}
.mc-hd{
  font-size:12px; font-weight:600; color:var(--ink3);
  padding:6px 8px 8px; letter-spacing:.02em;
}
.mc-g{
  display:flex; align-items:center; gap:4px;
  border-radius:6px; padding:1px 2px;
}
.mc-g.on{ background:var(--bg2); }
.mc-g.off .mc-pick{ opacity:.45; text-decoration:line-through; }
.mc-pick{
  flex:1 1 auto; display:flex; align-items:center; gap:8px; min-width:0;
  height:32px; padding:0 8px; border:none; background:none; cursor:pointer;
  font:inherit; font-size:13px; color:var(--ink); text-align:left;
  border-radius:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mc-pick:hover{ background:var(--bg2); }
.mc-pick .ic{ width:15px; flex:0 0 15px; opacity:.7; display:inline-flex; }
.mc-ops{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.mc-ops button{
  width:24px; height:24px; padding:0; border:1px solid var(--line); background:var(--card);
  border-radius:4px; cursor:pointer; font-size:13px; line-height:1; color:var(--ink2);
}
.mc-ops button:hover:not(:disabled){ border-color:var(--main); color:var(--main); background:var(--bg2); }
.mc-ops button:disabled{ opacity:.25; cursor:not-allowed; }
.mc-i{
  display:flex; align-items:center; gap:8px; min-height:40px;
  padding:5px 8px; border-radius:6px; border:1px solid transparent;
}
.mc-i + .mc-i{ margin-top:1px; }
.mc-i:hover{ background:var(--bg2); }
.mc-i.kid{ margin-left:22px; background:linear-gradient(90deg,var(--line) 0 1px,transparent 1px) 9px 0/1px 100% no-repeat; }
.mc-i.off{ opacity:.45; }
.mc-tab{
  flex:0 0 118px; font-family:ui-monospace,Consolas,monospace;
  font-size:11.5px; color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mc-tab b{ color:var(--main); }
.mc-i input.mc-name{ flex:1 1 auto; min-width:150px; max-width:360px; height:30px; font-size:13px; }
.mc-i input.mc-ic{ flex:0 0 132px; height:30px; font-size:12px; }
.mc-move{ height:26px; font-size:12px; width:104px; flex:0 0 104px; margin-left:4px; }
.mc-i .mc-ops{ margin-left:auto; }
.mc-sum{ margin-top:10px; font-size:12.5px; color:var(--ink3); }

/* 分组标题行（12.155）：以前它是页签上的一个 sec 字符串，看不见也点不着；
 * 现在是一行，跟菜单项在同一列里，靠虚线框和「分组」徽标区分「它不是页面」。 */
.mc-sec{
  display:flex; align-items:center; gap:8px; min-height:40px;
  padding:6px 8px; margin-top:8px; border-radius:6px;
  background:#F7F4EE; border:1px dashed #DFD7C9;
}
.mc-sec.off{ opacity:.45; }
.mc-sec .mc-badge{
  flex:0 0 auto; font-size:10.5px; line-height:18px; padding:0 6px;
  border-radius:3px; background:var(--main); color:#fff; opacity:.85; letter-spacing:.05em;
}
.mc-sec input.mc-name{
  flex:1 1 auto; min-width:120px; max-width:300px; height:30px;
  font-size:13px; font-weight:600;
}
.mc-sec input.mc-ic{ flex:0 0 92px; height:30px; font-size:12px; }
.mc-sec input.mc-link{ flex:0 0 196px; height:30px; font-size:12px; }
.mc-sec .mc-ops{ margin-left:auto; }
.mc-ops button.mc-del{ color:#B3452F; }
.mc-ops button.mc-del:hover:not(:disabled){ border-color:#B3452F; color:#B3452F; background:#FBEAE6; }

/* 版本历史 */
.mc-ver-tbl{ width:100%; }
.mc-ver-tbl th{ font-size:12px; white-space:nowrap; }
.mc-ver-tbl td{ font-size:12.5px; vertical-align:middle; line-height:1.6; }
.mc-ver-tbl tr.mc-vcur{ background:#F4F8F4; }
.mc-vtag{
  display:inline-block; margin-left:6px; font-size:10.5px; line-height:17px;
  padding:0 5px; border-radius:3px; background:#2E7D4F; color:#fff; font-weight:400;
}
.mc-vtag.sys{ background:#8A6A1F; }
.mc-vact{
  display:inline-block; font-size:11px; line-height:18px; padding:0 6px;
  border-radius:3px; background:#EFEAE2; color:var(--ink2);
}
.mc-d-add{ color:#2E7D4F; font-weight:600; margin-right:4px; }
.mc-d-del{ color:#B3452F; font-weight:600; margin-right:4px; }
.mc-d-ren{ color:#9A6B12; font-weight:600; }