/* ==========================================================================
   迪粉社区 · 后台前台化皮肤 admin-skin.css
   --------------------------------------------------------------------------
   方案 C「顶栏 + 分类 TAB 工作台」（2026-10-06 用户选定）。
   把后台从「硬边工业风」（border-radius:0 / 2px 黑线 / 线框图标）整体换装为
   前台设计语言：圆角卡片、渐变图标气泡、华为蓝、wash 状态标签、胶囊。

   加载顺序：admin-next.css 之后 → 本文件负责「覆盖 + 新增」。
   覆盖原则：所有 ax-* 类名保持不变（41 个叶子模块视图零改动），
   仅重定义视觉；新增组件仅用 ax-x* 前缀。

   结构：
     P1 画布与骨架        P2 顶栏（前台同款）    P3 分类 TAB
     P4 页头 strip        P5 卡片/面板          P6 KPI 与统计
     P7 瓦片与模块网格    P8 表格               P9 表单控件
     P10 小件（badge/chip/pager/switch/bar…）   P11 首页布局
     P12 弹窗             P13 响应式
   ========================================================================== */

/* ==========================================================================
   P1. 画布
   ========================================================================== */
.adminx {
  --ax-gap: 14px;
  padding: 18px 22px 46px;
  /* 2026-10-06 用户要求：内容撑满屏幕（取消原 max-width:1440px + 居中，
     让内容占满可用宽度，两侧不再留白） */
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
}

/* 后台画布背景：与前台一致的浅灰底，让白卡浮起来 */
body.admin-mode { background: var(--paper-2); }

/* 后台使用自己的顶栏（含模块搜索 + 返回前台 + 用户胶囊），
   隐藏前台 masthead 避免双顶栏；底部 TAB 在 admin-mode 下本就隐藏。 */
body.admin-mode #masthead { display: none !important; }

/* ==========================================================================
   P1b. 左右两栏布局 + 页面级滚动（2026-10-06 用户选定方案 C「全平铺侧栏」）
   --------------------------------------------------------------------------
   需求演进：「顶栏/菜单不随页面滚动」→「滚动条在最外面」→「除顶栏底栏外改左右两栏」。

   布局模型：
     · 顶栏（fixed，56px）—— 全宽固定
     · 左栏 .ax-sidenav（fixed，212px，顶栏之下，自身可滚动）—— 5 大类全平铺
     · 右栏 .adminx（margin-left:212px）—— 页面级滚动（滚动条在最外层）
     · 前台页脚 footer —— 后台整体隐藏（管理页不需要用户协议等前台入口）

   注意：不要用 position:sticky（theme-xiaoyi 的 body{overflow-x:hidden} 会让
   body 成为滚动容器导致 sticky 失效）；固定定位一律用 fixed。
   ========================================================================== */
body.admin-mode .ax-topbar {
  position: fixed; top: 0; left: 0; right: 0;
}
/* 左栏：顶栏之下固定，自身滚动（内容超长时侧栏内滚，不影响页面滚动条位置） */
body.admin-mode .ax-sidenav {
  position: fixed;
  top: 56px; left: 0; bottom: 0;
  width: 212px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 9px 20px;
  z-index: 38;
}
/* 右栏内容：让开侧栏；顶部 padding 给 fixed 顶栏留位（56 + 18） */
body.admin-mode .adminx {
  margin-left: 212px;
  padding-top: 74px;
}
/* 后台隐藏前台页脚（用户协议/隐私政策/免责声明等入口属于前台，管理页不需要）——
   2026-10-06 用户要求清理残留 UI。 */
body.admin-mode footer { display: none !important; }

/* ==========================================================================
   P2. 顶栏（前台 masthead 语言）—— 固定于顶部（见 P14 应用式固定布局）
   ========================================================================== */
.ax-topbar {
  flex: none;
  height: 56px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 14px;
  padding: 0 22px;
  position: relative; z-index: 40;
}

/* logo：与前台 masthead 完全一致（复用 .brand-mark / .brand-name 前台样式，
   尺寸不覆盖 —— 保持 34px 标记 + 17px 名称，与前台像素级一致），
   此处只补后台顶栏里的排布与链接属性。 */
.ax-tb-logo { display: flex; align-items: center; gap: 9px; flex: none; text-decoration: none; color: inherit; }
/* 兼容旧结构（若仍有 .mk 残留） */
.ax-tb-logo .mk {
  width: 30px; height: 30px; border-radius: var(--r-ctl);
  background: var(--grad-blue); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
  box-shadow: 0 3px 10px rgba(17, 17, 17, .28);
}
.ax-tb-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--brand-ink); background: var(--brand-wash);
  padding: 3px 9px; border-radius: var(--radius-pill);
}
.ax-tb-sp { flex: 1 1 auto; min-width: 0; }

/* 2026-10-06：模块搜索与用户信息块均已按用户要求移除
   （原 .ax-tb-search / .ax-tb-results / .ax-tb-user 样式同时删除） */

/* 右侧：返回前台 */
.ax-tb-back {
  height: 34px; padding: 0 14px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--brand-wash); color: var(--brand-ink);
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.ax-tb-back:hover { background: rgba(17, 17, 17, .13); }

/* ==========================================================================
   P3. 左侧导航（方案 C：5 大类全平铺，无折叠交互）
   ========================================================================== */
.ax-nav-grp {
  font-size: 10.5px; font-weight: 700; color: var(--ink-4);
  padding: 13px 9px 5px; letter-spacing: .05em;
}
.ax-nav-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px; border-radius: var(--r-ctl);
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; transition: background .13s, color .13s;
}
.ax-nav-item:hover { background: var(--paper-2); }
.ax-nav-item.on { background: var(--brand-wash); color: var(--brand-ink); font-weight: 700; }
.ax-nav-item .ic {
  width: 24px; height: 24px; border-radius: var(--r-ctl); flex: none;
  display: grid; place-items: center; color: #fff;
}
.ax-nav-item .ic svg { width: 13px; height: 13px; }
.ax-nav-item .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-nav-item .cn {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 6px;
  border-radius: var(--radius-pill); background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
/* 概览项：与分组之间留一道细分隔 */
.ax-nav-overview { margin-bottom: 4px; }
.ax-nav-overview + .ax-nav-grp { padding-top: 8px; border-top: 1px solid var(--rule); margin-top: 4px; }

/* 汉堡按钮（仅移动端显示，见响应式段） */
.ax-nav-toggle {
  display: none;
  width: 36px; height: 36px; flex: none;
  border: 0; background: transparent; border-radius: var(--r-ctl); padding: 0;
  cursor: pointer; align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.ax-nav-toggle span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--ink-2); transition: background .13s; }
.ax-nav-toggle:hover { background: var(--paper-2); }
.ax-nav-toggle:hover span { background: var(--ink); }

/* 抽屉遮罩（仅移动端生效，见响应式段） */
.ax-nav-mask {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(13, 19, 32, .42);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
}
.ax-nav-mask.show { opacity: 1; pointer-events: auto; }

/* 渐变气泡：按类顺序轮转五色（与前台磁贴一致） */
.g-b { background: var(--grad-blue); }
.g-v { background: var(--grad-violet); }
.g-t { background: var(--grad-teal); }
.g-g { background: var(--grad-gold); }
.g-p { background: var(--grad-pink); }

/* ==========================================================================
   P4. 页头 strip（去掉 2px 黑线，改为轻量页头）
   ========================================================================== */
.ax-strip {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; padding: 0 0 15px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.ax-strip-l { min-width: 0; }
.ax-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--ink-3); text-decoration: none;
  margin-bottom: 8px; transition: color .14s;
}
.ax-back:hover { color: var(--brand); }
.ax-back svg { width: 13px; height: 13px; }

.ax-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; margin-bottom: 6px; }
.ax-crumb a { color: var(--ink-3); text-decoration: none; transition: color .14s; }
.ax-crumb a:hover { color: var(--brand); }
.ax-crumb .sep { color: var(--ink-4); }
.ax-crumb .cur { color: var(--ink); font-weight: 600; }

.ax-title { display: flex; align-items: center; gap: 11px; }
.ax-title .ico {
  width: 42px; height: 42px; flex: 0 0 42px;
  border: 0; border-radius: 13px;
  background: var(--grad-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(17, 17, 17, .22);
}
.ax-title .ico svg { width: 20px; height: 20px; }
.ax-title h1 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.ax-desc { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.ax-strip-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ==========================================================================
   P5. 卡片 / 面板（全部圆角化）
   ========================================================================== */
.ax-panel {
  border: 1px solid var(--rule); background: var(--paper);
  border-radius: var(--radius); margin-bottom: var(--ax-gap);
  overflow: hidden;
}
.ax-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--rule);
  background: var(--paper); flex-wrap: wrap;
}
.ax-panel-h h3 { margin: 0; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.ax-panel-h h3 .idx { font-size: 11px; color: var(--ink-4); }
.ax-panel-h .meta { font-size: 11.5px; color: var(--ink-3); }
.ax-panel-b { padding: 16px; }
.ax-panel-b.flush { padding: 0; }
.ax-panel-b.pad-sm { padding: 11px 16px; }

.ax-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ax-gap); align-items: stretch; }
.ax-cols > .ax-panel { display: flex !important; flex-direction: column; }
.ax-cols > .ax-panel > .ax-panel-b { flex: 1 1 auto; display: flex; flex-direction: column; }
.ax-cols > .ax-panel > .ax-panel-b > * { flex-shrink: 0; }

/* 分隔小标题：去掉大写字距标签感，改为前台 sec-title */
.ax-sub {
  font-size: 13px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--ink);
  padding: 0 0 10px; margin: 20px 0 12px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ax-sub > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ax-sub > span:first-child::before { content: ''; width: 3px; height: 13px; border-radius: 2px; background: var(--grad-blue); flex: none; }
.ax-sub > span:last-child:not(:first-child) { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }

/* ==========================================================================
   P6. KPI / 统计
   ========================================================================== */
.ax-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 0; }
.ax-kpi-cell {
  padding: 14px 15px; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); min-width: 0;
}
.ax-kpi-cell:nth-child(2n) { border-right: 1px solid var(--rule); }
.ax-kpi-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.ax-kpi-key { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ax-kpi-key .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-3); flex: 0 0 7px; }
.ax-kpi-key .dot.blue { background: var(--brand); }
.ax-kpi-key .dot.amber { background: var(--amber); }
.ax-kpi-key .dot.green { background: var(--green); }
.ax-kpi-key .dot.red { background: var(--red); }
.ax-kpi-val { font-family: var(--font-mono); font-size: 25px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ax-kpi-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }

/* 模块 KPI 卡组 */
.ax-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ax-gap); margin-bottom: var(--ax-gap); }
.ax-stat {
  border: 1px solid var(--rule); background: var(--paper); border-radius: var(--radius);
  padding: 15px 16px 14px; display: flex; flex-direction: column; min-width: 0;
}
.ax-stat-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ax-stat .ico {
  width: 38px; height: 38px; flex: 0 0 38px; border: 0; border-radius: var(--r-card);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-blue); color: #fff;
  box-shadow: 0 3px 10px rgba(17, 17, 17, .2);
}
.ax-stat .ico svg { width: 19px; height: 19px; }
.ax-stat-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
  padding: 3.5px 9px; border: 0; border-radius: var(--radius-pill);
  background: var(--paper-3); color: var(--ink-3); white-space: nowrap;
}
.ax-stat-key { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ax-stat-val { font-family: var(--font-mono); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin: 5px 0 6px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ax-stat-val.mono { font-size: 20px; }
.ax-stat-sub { font-size: 11.5px; color: var(--ink-3); margin-top: auto; line-height: 1.5; }

/* tone 着色：渐变气泡 + 状态色数值（前台磁贴语言） */
.ax-stat.t-blue   .ico { background: var(--grad-blue);   box-shadow: 0 3px 10px rgba(17, 17, 17, .2); }
.ax-stat.t-violet .ico { background: var(--grad-violet); box-shadow: 0 3px 10px rgba(124, 58, 237, .2); }
.ax-stat.t-green  .ico { background: var(--grad-teal);   box-shadow: 0 3px 10px rgba(13, 148, 136, .2); }
.ax-stat.t-amber  .ico { background: var(--grad-gold);   box-shadow: 0 3px 10px rgba(245, 158, 11, .22); }
.ax-stat.t-red    .ico { background: var(--grad-pink);   box-shadow: 0 3px 10px rgba(219, 39, 119, .2); }
.ax-stat.t-blue   .ax-stat-val { color: var(--brand); }
.ax-stat.t-violet .ax-stat-val { color: #7c3aed; }
.ax-stat.t-green  .ax-stat-val { color: var(--green); }
.ax-stat.t-amber  .ax-stat-val { color: var(--amber); }
.ax-stat.t-red    .ax-stat-val { color: var(--red); }
.ax-stat-tag.blue   { background: var(--brand-wash);  color: var(--brand-ink); }
.ax-stat-tag.violet { background: #f1eefd;           color: #5b46c9; }
.ax-stat-tag.green  { background: var(--green-wash); color: var(--green); }
.ax-stat-tag.amber  { background: var(--amber-wash); color: var(--amber); }
.ax-stat-tag.red    { background: var(--red-wash);   color: var(--red); }

/* 趋势图 */
.ax-trend { width: 100%; display: block; }
.ax-trend .grid-line { stroke: var(--rule); stroke-width: 1; }
.ax-trend .axis-txt { font-size: 9.5px; fill: var(--ink-4); }
.ax-trend .bar-r { fill: var(--brand); }
.ax-trend .bar-l { fill: #14b8a6; }
.ax-trend .bar-d { fill: #a855f7; }
.trend-wrap { position: relative; }
.trend-tip { position: absolute; pointer-events: none; background: rgba(13, 19, 32, .92); color: #fff; padding: 6px 10px; border-radius: var(--r-ctl); font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity .15s; z-index: 10; }
.trend-tip.show { opacity: 1; }
.trend-bar { cursor: pointer; }
.ax-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 11.5px; color: var(--ink-2); }
.ax-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ax-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ax-legend i.r { background: var(--brand); }
.ax-legend i.l { background: #14b8a6; }
.ax-legend i.d { background: #a855f7; }

/* 同步健康带 */
.ax-health { list-style: none; margin: 0; padding: 0; }
.ax-health li { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.ax-health li:last-child { border-bottom: 0; }
.ax-health .st { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-top: 5px; background: var(--rule-3); }
.ax-health .st.ok { background: var(--green); }
.ax-health .st.err { background: var(--red); }
.ax-health .st.run { background: var(--brand); }
.ax-health .st.warn { background: var(--amber); }
.ax-health .nm { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ax-health .sub { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.ax-health .cnt { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

/* 待办网格 */
.ax-todo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ax-todo-cell { padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); min-width: 0; background: var(--paper); }
.ax-todo-cell:nth-child(2n) { border-right: 1px solid var(--rule); }
.ax-todo-cell:last-child, .ax-todo-cell:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
.ax-todo-cell .k { font-size: 11.5px; color: var(--ink-3); }
.ax-todo-cell .v { font-family: var(--font-mono); font-size: 17px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ax-todo-cell .v.warn { color: var(--amber); }
.ax-todo-cell .v.err { color: var(--red); }

/* ==========================================================================
   P7. 瓦片 / 模块卡片网格
   ========================================================================== */
.ax-tiles { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; background: transparent; }
.ax-tile {
  display: block; text-decoration: none; color: inherit;
  padding: 15px 16px 14px; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); position: relative;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.ax-tile:hover {
  background: var(--paper);
  border-color: rgba(17, 17, 17, .38);
  box-shadow: 0 6px 20px rgba(17, 17, 17, .1);
  transform: translateY(-1px);
}
.ax-tile::after { content: none; }
.ax-tile-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ax-tile-h .ico {
  width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: var(--r-card);
  background: var(--grad-blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(17, 17, 17, .2);
}
.ax-tile:hover .ax-tile-h .ico { border: 0; color: #fff; }
.ax-tile-h .ico svg { width: 18px; height: 18px; }
.ax-tile-h b { font-size: 13.5px; font-weight: 700; }
.ax-tile-h .no { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.ax-tile-desc { font-size: 12px; color: var(--ink-3); line-height: 1.58; min-height: 38px; }
.ax-tile-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.ax-tile-foot .num { font-family: var(--font-mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand); }
.ax-tile-foot .unit { font-size: 11px; color: var(--ink-3); }
.ax-tile-foot .arrow { margin-left: auto; color: var(--ink-4); font-size: 13px; transition: color .14s, transform .14s; }
.ax-tile:hover .ax-tile-foot .arrow { color: var(--brand); transform: translateX(2px); }

/* 按序轮转气泡色（nth-child 覆盖） */
.ax-tiles .ax-tile:nth-child(5n+1) .ax-tile-h .ico { background: var(--grad-blue); box-shadow: 0 3px 10px rgba(17, 17, 17, .2); }
.ax-tiles .ax-tile:nth-child(5n+2) .ax-tile-h .ico { background: var(--grad-violet); box-shadow: 0 3px 10px rgba(124, 58, 237, .2); }
.ax-tiles .ax-tile:nth-child(5n+3) .ax-tile-h .ico { background: var(--grad-teal); box-shadow: 0 3px 10px rgba(13, 148, 136, .2); }
.ax-tiles .ax-tile:nth-child(5n+4) .ax-tile-h .ico { background: var(--grad-gold); box-shadow: 0 3px 10px rgba(245, 158, 11, .22); }
.ax-tiles .ax-tile:nth-child(5n+5) .ax-tile-h .ico { background: var(--grad-pink); box-shadow: 0 3px 10px rgba(219, 39, 119, .2); }

/* ==========================================================================
   P8. 表格（圆角卡片内 + 浅灰表头）
   ========================================================================== */
.ax-panel-b.flush .ax-table-wrap { border-radius: 0; }
.ax-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius); }
.ax-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ax-table thead th {
  text-align: left; font-size: 11px; letter-spacing: .02em; text-transform: none;
  color: var(--ink-3); font-weight: 700; padding: 10px 14px;
  border-bottom: 1px solid var(--rule); background: var(--paper-2);
  white-space: nowrap;
}
.ax-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.ax-table tbody tr:last-child td { border-bottom: 0; }
.ax-table tbody tr { transition: background .12s; }
.ax-table tbody tr:hover { background: var(--brand-wash); }
.ax-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ax-table .actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ax-table tbody tr.ax-group-row > td {
  font-size: 11px; letter-spacing: .06em; text-transform: none;
  color: var(--ink-2); font-weight: 700;
  background: var(--paper-2); border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); padding: 8px 14px;
}
.ax-table tbody tr.ax-group-row:hover { background: var(--paper-2); }

/* 键值表 */
.ax-kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ax-kv dt, .ax-kv dd { margin: 0; padding: 9px 13px; background: var(--paper); font-size: 12.5px; }
.ax-kv dt { color: var(--ink-3); font-size: 11.5px; letter-spacing: 0; }

/* 空态 */
.ax-empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.ax-empty .ico { color: var(--ink-4); margin-bottom: 10px; display: flex; justify-content: center; }
.ax-empty h4 { margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; color: var(--ink-2); font-weight: 700; }
.ax-empty p { margin: 0; font-size: 12px; }

/* ==========================================================================
   P9. 表单控件（圆角 + 前台 focus 环）
   ========================================================================== */
.ax-form { display: grid; gap: 14px; }
.ax-field { display: grid; gap: 6px; min-width: 0; }
.ax-field > label { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--ink-2); font-weight: 600; }
.ax-input, .ax-select, .ax-textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 13px;
  padding: 8px 12px; min-height: 36px;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.ax-textarea { min-height: 88px; resize: vertical; line-height: 1.6; }
.ax-input:focus, .ax-select:focus, .ax-textarea:focus {
  outline: none; border-color: var(--brand); background: var(--paper);
  box-shadow: 0 0 0 3px var(--brand-wash);
}
.ax-input::placeholder, .ax-textarea::placeholder { color: var(--ink-4); }
.ax-hint { font-size: 11.5px; color: var(--ink-3); }
.ax-err { font-size: 12px; color: var(--red); }

.ax-filter {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.ax-filter .ax-input, .ax-filter .ax-select { width: auto; min-width: 150px; }
.ax-filter .grow { flex: 1 1 190px; min-width: 130px; }

.ax-fields { display: grid; gap: 14px; }
.ax-fields.c1 { grid-template-columns: minmax(0, 1fr); }
.ax-fields.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ax-fields.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ax-field.wide { grid-column: 1 / -1; }
.ax-field > label .req { color: var(--red); font-style: normal; margin-left: 3px; }
.ax-hint-sm { font-size: 11.5px; color: var(--ink-3); }
.ax-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ax-gap); align-items: start; }
.ax-cols-2 > .ax-panel { margin-top: 0 !important; margin-bottom: 0; }
.ax-cols-2 + .ax-panel, .ax-panel + .ax-panel:not(.ax-cols-2 > .ax-panel) { margin-top: var(--ax-gap); }

.ax-mail-wrap { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ax-mail-subject {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 11.5px; color: var(--ink-2);
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  padding: 9px 12px; word-break: break-all;
}
.ax-mail-subject em { font-style: normal; color: var(--ink-3); letter-spacing: .04em; flex: 0 0 auto; }
.ax-mail-frame { display: block; width: 100%; height: 540px; border: 0; background: var(--paper-2); }
.ax-inline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ax-inline .ax-input { flex: 1 1 220px; width: auto; }
.ax-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.ax-switch-row:last-child { border-bottom: 0; }
.ax-switch-row-t { font-size: 13px; font-weight: 600; color: var(--ink); }

/* ==========================================================================
   P10. 小件：开关 / Tab / 分页 / chips / 徽标 / 进度条 / 时间线
   ========================================================================== */
.ax-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 12.5px; color: var(--ink-2); user-select: none; }
.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ax-switch i {
  width: 40px; height: 23px; flex: 0 0 40px; position: relative;
  background: var(--rule-2); border: 0; border-radius: var(--radius-pill);
  transition: background .16s;
}
.ax-switch i::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px;
  width: 18px; height: 18px; background: #fff; border: 0; border-radius: 50%;
  box-sizing: border-box; box-shadow: 0 1px 3px rgba(13, 19, 32, .22);
  transition: left .16s;
}
.ax-switch input:checked + i { background: var(--brand); border: 0; }
.ax-switch input:checked + i::after { left: 19.5px; border: 0; }

/* 页内 Tab（模块视图用） */
.ax-tabs { display: flex; gap: 0; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 15px; }
.ax-tabs button {
  appearance: none; background: transparent; border: 0;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  padding: 9px 15px; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  transition: color .14s, border-color .14s;
}
.ax-tabs button:hover { color: var(--ink); }
.ax-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); }

/* 弹窗内 tab 胶囊 */
.ax-tab {
  padding: 6.5px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  background: var(--paper-2); border: 1px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; font-family: inherit; transition: .14s;
}
.ax-tab:hover { color: var(--ink); }
.ax-tab.active { color: #fff; background: var(--brand); border-color: var(--brand); }
.ax-pane { padding: 2px 0 8px; }

/* 分页 */
.ax-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 13px 16px; border-top: 1px solid var(--rule); }
.ax-pager .info { font-size: 11.5px; color: var(--ink-3); }
.ax-pg-btns { display: flex; align-items: center; gap: 4px; }
.ax-pg-btn {
  min-width: 30px; height: 30px; padding: 0 9px;
  border: 1px solid var(--rule-2); background: var(--paper); border-radius: var(--r-ctl);
  color: var(--ink-2); font-family: var(--font-body); font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s, border-color .14s;
}
.ax-pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }
.ax-pg-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.ax-pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.ax-pg-gap { padding: 0 4px; color: var(--ink-3); font-size: 12px; }

/* chips */
.ax-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ax-chip {
  appearance: none; cursor: pointer;
  border: 1px solid transparent; background: var(--paper-2);
  color: var(--ink-3); font-family: inherit; font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: var(--r-ctl); transition: .14s;
}
.ax-chip:hover:not(:disabled) { border-color: var(--rule-2); color: var(--ink); }
.ax-chip.on { background: var(--brand-wash); border-color: rgba(17, 17, 17, .25); color: var(--brand-ink); font-weight: 700; }
.ax-chip:disabled { opacity: .45; cursor: not-allowed; }

/* 进度条 */
.ax-bar-wrap { display: flex; align-items: center; gap: 9px; min-width: 120px; }
.ax-bar-label { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.ax-bar { flex: 1; height: 7px; background: var(--paper-3); border: 0; border-radius: var(--radius-pill); min-width: 54px; overflow: hidden; }
.ax-bar > i { display: block; height: 100%; background: var(--grad-blue); border-radius: var(--radius-pill); }
.ax-bar > i.green { background: var(--grad-teal); }
.ax-bar > i.amber { background: var(--grad-gold); }
.ax-bar > i.red   { background: var(--grad-pink); }
.ax-bar-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* 时间线 */
.ax-timeline { list-style: none; margin: 0; padding: 0; }
.ax-timeline li { position: relative; padding: 0 0 16px 22px; }
.ax-timeline li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -2px; width: 1.5px; background: var(--rule); }
.ax-timeline li:last-child { padding-bottom: 0; }
.ax-timeline li:last-child::before { display: none; }
.ax-timeline .dot { position: absolute; left: 0; top: 5px; width: 11px; height: 11px; background: var(--paper); border: 2.5px solid var(--rule-3); border-radius: 50%; box-sizing: border-box; }
.ax-timeline li.blue  .dot { border-color: var(--brand); }
.ax-timeline li.green .dot { border-color: var(--green); }
.ax-timeline li.amber .dot { border-color: var(--amber); }
.ax-timeline .ax-tl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ax-timeline .ax-tl-h b { font-size: 13px; font-weight: 600; color: var(--ink); }
.ax-timeline .ax-tl-h .time { font-size: 11.5px; color: var(--ink-3); }
.ax-timeline .ax-tl-desc { font-size: 12px; color: var(--ink-2); margin-top: 4px; line-height: 1.65; white-space: pre-wrap; }

/* 两栏工作区 */
.ax-split { display: grid; grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: var(--ax-gap); align-items: stretch; }
.ax-split > .ax-panel { display: flex; flex-direction: column; margin-top: 0 !important; margin-bottom: 0; }
.ax-split > .ax-panel > .ax-panel-b { flex: 1; }
.ax-split.narrow { grid-template-columns: minmax(300px, 4fr) minmax(0, 8fr); }

.ax-modal-desc { margin: 0 0 15px; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.ax-modal-body { display: grid; gap: 13px; }
.ax-modal-body .ax-fields { gap: 13px; }

/* 内联柱状图 */
.ax-chart { padding: 14px 16px; }
.ax-bars { width: 100%; display: block; }
.ax-bars .grid-line { stroke: var(--rule); stroke-width: 1; }
.ax-bars .bar-h { fill: var(--brand); }
.ax-bars .bar-d { fill: #f59e0b; }
.ax-axis { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--ink-4); margin-top: 7px; }

/* 徽标 */
.ax-badge {
  display: inline-block; padding: 3.5px 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--paper-3); color: var(--ink-2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.ax-badge.solid { background: var(--brand); color: #fff; }
.ax-badge.green { background: var(--green-wash); color: var(--green); }
.ax-badge.amber { background: var(--amber-wash); color: var(--amber); }
.ax-badge.red   { background: var(--red-wash);   color: var(--red); }
.ax-row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ax-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--rule); }
.ax-ellipsis { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-panel.stack { display: flex; flex-direction: column; }
.ax-panel.stack > .ax-panel-b { display: flex; flex-direction: column; flex: 1; }
.ax-panel.stack .ax-form-actions { margin-top: auto; }

.ax-tree { font-size: 13px; line-height: 1.75; max-height: 60vh; overflow: auto; }
.ax-tree .ax-indent-1 { padding-left: 17px; display: flex; align-items: center; gap: 5px; }
.ax-tree .ax-indent-1 svg { width: 13px; height: 13px; color: var(--ink-3); }
.ax-tree .ax-indent-2 { padding-left: 34px; color: var(--ink-3); }
.md-browse { font-size: 13px; line-height: 1.7; max-height: 60vh; overflow: auto; }

.ax-mini { display: flex; flex-wrap: wrap; gap: 10px; background: transparent; border: 0; }
.ax-mini > div { flex: 1 1 140px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 11px 13px; min-width: 0; }
.ax-mini .k { font-size: 11.5px; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.ax-mini .v { font-family: var(--font-mono); font-size: 16px; font-weight: 700; margin-top: 3px; }
.ax-mini .v.sm { font-size: 13px; }

.ax-strong { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.ax-mono-break { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); word-break: break-all; }

.ax-dist-row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 82px; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.ax-dist-row + .ax-dist-row { border-top: 1px solid var(--rule); }
.ax-dist-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-dist-row .ax-bar-wrap { margin: 0; }
.ax-dist-row .ax-bar-num { display: none; }
.ax-dist-num { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink); }

.ax-clean-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.ax-clean-row + .ax-clean-row { border-top: 1px solid var(--rule); }
.ax-clean-l { min-width: 0; }
.ax-clean-l .ax-hint-sm { margin-top: 3px; }
.ax-clean-r { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }

.ax-sched-head { padding: 12px 15px 0; }
.ax-sched-hours { padding: 11px 15px 13px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 7px; }
.ax-sched-table { padding: 0 0 2px; }

/* 旧表格类（部分视图沿用）圆角化 */
.adminx .admin-table, .adminx .data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adminx .admin-table th, .adminx .admin-table td,
.adminx .data-table th, .adminx .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.adminx .admin-table th, .adminx .data-table th { color: var(--ink-3); font-weight: 700; font-size: 11.5px; letter-spacing: 0; background: var(--paper-2); }

/* ==========================================================================
   P11. 首页布局（渐变 hero + KPI + 网格）
   ========================================================================== */
.ax-home { display: flex; flex-direction: column; gap: 16px; }

/* 渐变欢迎卡 */
.ax-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--grad-blue);
  color: #fff; padding: 19px 22px;
  display: flex; align-items: center; gap: 20px;
}
.ax-hero::after { content: ''; position: absolute; right: -46px; top: -66px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.ax-hero::before { content: ''; position: absolute; right: 66px; bottom: -88px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.ax-hero-l { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.ax-hero-l h2 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; }
.ax-hero-l .dotsep { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; opacity: .92; margin-top: 7px; flex-wrap: wrap; }
.ax-hero-l .dotsep i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
/* hero 内的按钮：白描边半透明（蓝底上唯一正确的按钮语言） */
.ax-hero-actions { position: relative; z-index: 1; flex: none; }
.ax-hero-actions .btn {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .38);
  color: #fff; backdrop-filter: blur(4px);
}
.ax-hero-actions .btn:hover { background: rgba(255, 255, 255, .26); }
.ax-hero-stats { display: flex; gap: 26px; position: relative; z-index: 1; flex: none; }
.ax-hero-stats > div { text-align: right; }
.ax-hero-stats b { display: block; font-family: var(--font-mono); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.ax-hero-stats span { font-size: 11px; opacity: .84; }

/* 首页两栏网格 */
.ax-home-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ax-home-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* 首页 KPI 横排（4 列） */
.ax-home-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ax-hkpi {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 13px 14px; display: flex; gap: 11px; align-items: center; min-width: 0;
  transition: border-color .15s, box-shadow .15s;
}
.ax-hkpi:hover { border-color: rgba(17, 17, 17, .3); box-shadow: 0 4px 14px rgba(17, 17, 17, .08); }
.ax-hkpi .bi {
  width: 38px; height: 38px; border-radius: var(--r-card); flex: none;
  display: grid; place-items: center; color: #fff;
}
.ax-hkpi .bi svg { width: 18px; height: 18px; }
.ax-hkpi .kv { font-family: var(--font-mono); font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ax-hkpi .kk { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ax-hkpi .dt { font-size: 10.5px; font-weight: 700; color: var(--green); margin-left: auto; align-self: flex-start; flex: none; }
.ax-hkpi .dt.warn { color: var(--amber); }

/* 首页列表行 */
.ax-hrow { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px; }
.ax-hrow:last-child { border-bottom: 0; }
.ax-hrow .bi { width: 32px; height: 32px; border-radius: var(--r-ctl); display: grid; place-items: center; color: #fff; flex: none; }
.ax-hrow .bi svg { width: 15px; height: 15px; }
.ax-hrow .tx { flex: 1 1 auto; min-width: 0; }
.ax-hrow .tx b { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ax-hrow .tx small { color: var(--ink-3); font-size: 11px; }
.ax-hrow .go { color: var(--ink-4); font-size: 14px; flex: none; }

/* ==========================================================================
   P12. 弹窗（圆角 16px）
   ========================================================================== */
body.admin-mode .modal {
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 60px rgba(13, 19, 32, .22);
  overflow: hidden;
}
body.admin-mode .modal-mask { background: rgba(13, 19, 32, .4); backdrop-filter: blur(3px); }

/* ==========================================================================
   P13. 响应式
   ========================================================================== */
@media (max-width: 1240px) {
  .adminx { padding: 72px 18px 40px; }   /* 顶栏 56 + 16 */
  .ax-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax-tile-desc { min-height: 0; }
  .ax-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .ax-cols { grid-template-columns: minmax(0, 1fr); }
  .ax-home-cols { grid-template-columns: minmax(0, 1fr); }
  .ax-split, .ax-split.narrow { grid-template-columns: minmax(0, 1fr); }
  .ax-hero { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ax-hero-stats { gap: 22px; }
  .ax-hero-stats > div { text-align: left; }
}
@media (max-width: 900px) {
  /* 移动端：侧栏转为抽屉（汉堡按钮 + 遮罩），内容区不再让位 */
  .ax-nav-toggle { display: inline-flex; }
  body.admin-mode .ax-sidenav {
    top: 0; bottom: 0;
    width: 252px;
    transform: translateX(-105%);
    transition: transform .24s ease;
    z-index: 60;
    box-shadow: 8px 0 28px rgba(13, 19, 32, .16);
    padding-top: 14px;
  }
  body.admin-mode .ax-sidenav.open { transform: translateX(0); }
  body.admin-mode .adminx { margin-left: 0; }
  .ax-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
  .ax-strip-r { width: 100%; }
  .ax-fields.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-cols-2 { grid-template-columns: minmax(0, 1fr); }
  .ax-dist-row { grid-template-columns: 92px minmax(0, 1fr) 70px; gap: 8px; }
}

@media (max-width: 768px) {
  .adminx { padding: 65px 12px 34px; }   /* 顶栏 52 + 13 */
  .ax-topbar { height: 52px; padding: 0 12px; gap: 8px; }
  /* 2026-10-06 用户要求：移动端完整显示 logo（搜索框移除后空间已足够），
     文字与「管理后台」标签都保留；仅把 logo 字号收一档以适配窄屏。 */
  .ax-tb-logo { gap: 7px; }
  .ax-tb-logo .brand-mark { width: 30px; height: 30px; flex-basis: 30px; border-radius: var(--r-ctl); }
  .ax-tb-logo .brand-name { font-size: 14.5px; }
  .ax-tb-tag { font-size: 10px; padding: 2.5px 7px; }
  /* 「返回前台」在窄屏只留箭头 */
  .ax-tb-back { padding: 0 11px; }
  .ax-tb-back .bk-tx { display: none; }
  .ax-strip { padding-bottom: 11px; margin-bottom: 15px; }
  .ax-crumb { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: 2px; }
  .ax-crumb::-webkit-scrollbar { height: 0; }
  .ax-crumb > * { flex: 0 0 auto; }
  .ax-title h1 { font-size: 17px; }
  .ax-title .ico { width: 36px; height: 36px; flex-basis: 36px; border-radius: var(--r-ctl); }
  .ax-title .ico svg { width: 17px; height: 17px; }
  .ax-panel-b { padding: 13px; }
  .ax-panel-h { padding: 11px 13px; }
  .ax-form { gap: 12px; }
  .ax-fields.c2, .ax-fields.c3 { grid-template-columns: minmax(0, 1fr); }
  .ax-filter .ax-input, .ax-filter .ax-select, .ax-filter .grow { width: 100%; min-width: 0; }
  .ax-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-stat { padding: 14px 15px 13px; }
  .ax-stat-val { font-size: 23px; }
  .ax-stat-val.mono { font-size: 18px; }
  .ax-table { font-size: 12px; }
  .ax-table thead th, .ax-table tbody td { padding: 9px 11px; }
  .ax-table .actions { justify-content: flex-start; }
  .ax-pager { padding: 11px 13px; }
  .ax-pager .info { width: 100%; }
  .ax-tile { min-height: 44px; }
  .ax-filter .btn, .ax-strip-r .btn { min-height: 40px; }
  .ax-input, .ax-select, .ax-textarea { min-height: 42px; font-size: 14px; }
  .ax-nav-item { padding: 10px 9px; }   /* 触控目标加大 */
  .ax-pg-btn { min-width: 34px; height: 34px; }
  .ax-chip { padding: 8px 13px; }
  .ax-clean-row { flex-wrap: wrap; }
  .ax-clean-r { width: 100%; justify-content: flex-end; }
  .ax-legend { gap: 12px; font-size: 10.5px; }
  .ax-hero { padding: 16px; }
  .ax-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ax-tiles { grid-template-columns: minmax(0, 1fr); }
  .ax-kpi { grid-template-columns: minmax(0, 1fr); }
  .ax-kpi-cell { border-right: 1px solid var(--rule); }
  .ax-kpi-cell:last-child { border-bottom: 1px solid var(--rule); }
  .ax-todo { grid-template-columns: minmax(0, 1fr); }
  .ax-todo-cell { border-right: 1px solid var(--rule); }
  /* KPI 保持 2 列（4 张数字卡在手机上仍可两两并排）；仅 480 以下转单列 */
  .ax-home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-hkpi { padding: 11px 12px; gap: 9px; }
  .ax-hkpi .bi { width: 34px; height: 34px; border-radius: var(--r-ctl); }
  .ax-hkpi .kv { font-size: 17px; }
  .ax-hkpi .dt { display: none; }
  .ax-panel-h h3 { font-size: 12.5px; }
  /* 窄屏表格：外层横滑，避免被压成「一字一行」 */
  .adminx .admin-table, .adminx .data-table, .adminx .ax-table { min-width: 640px; }
  .adminx .card { overflow-x: auto; }
}
@media (max-width: 480px) {
  .adminx { padding: 63px 10px 30px; }   /* 顶栏 52 + 11 */
  .ax-title h1 { font-size: 16px; }
  .ax-desc { font-size: 11.5px; }
  .ax-panel-b { padding: 11px; }
  .ax-table thead th, .ax-table tbody td { padding: 8px 9px; font-size: 11.5px; }
  .ax-stat { padding: 13px; }
  .ax-stat-val { font-size: 21px; }
  .ax-stat-val.mono { font-size: 17px; }
  .ax-stat .ico { width: 34px; height: 34px; flex-basis: 34px; }
  .ax-pager .info { font-size: 10.5px; }
  .ax-dist-row { grid-template-columns: 72px minmax(0, 1fr) 62px; gap: 6px; font-size: 11.5px; }
  .ax-dist-num { font-size: 11px; }
  .ax-hero-l h2 { font-size: 16px; }
}

/* 打印 */
@media print {
  .ax-topbar, .ax-sidenav, .ax-nav-mask, .ax-strip-r, .ax-back { display: none; }
  .adminx { max-width: none; padding: 0; }
}

/* 深色模式补充 */
body[data-theme="dark"] .ax-mini > div,
body[data-theme="dark"] .ax-hkpi,
body[data-theme="dark"] .ax-tile,
body[data-theme="dark"] .ax-kpi-cell,
body[data-theme="dark"] .ax-todo-cell { background: var(--paper); }

/* ==========================================================================
   P15. 公告管理（2026-10-06 重设计 · 方案 B「首页式」）
   --------------------------------------------------------------------------
   布局：渐变英雄区（标题 + 发布入口）→ 发布/编辑白卡原位展开（无弹窗）
        → 「启用中」双列卡片网格 → 「已停用」紧凑行列表 → 分页。
   与前台首页 hero / 卡片语言一致；编辑 = 卡片/行原位变表单；
   状态标签沿用站内 wash 语言；图标气泡五色渐变轮转（与磁贴同一序列）。
   注意：本模块刻意不再使用 KPI 数据看板（用户 2026-10-06 要求放弃）。
   ========================================================================== */
.ann-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--grad); color: #fff;
  padding: 26px 28px; margin-bottom: 18px;
  box-shadow: 0 14px 36px rgba(17, 17, 17, .28);
}
.ann-hero::before { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.ann-hero::after { content: ''; position: absolute; right: 90px; bottom: -110px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .09); }
.ann-hero-in { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ann-hero h1 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.ann-hero-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .92; margin-top: 5px; flex-wrap: wrap; }
.ann-hero-meta i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 255, 255, .6); flex: none; }
.ann-cta {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  background: #fff; color: var(--brand-ink); border: 0; border-radius: var(--radius-pill);
  padding: 11px 22px; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 22px rgba(8, 50, 130, .25);
  transition: transform .15s, box-shadow .15s;
}
.ann-cta:hover { transform: translateY(-1px); box-shadow: 0 11px 26px rgba(8, 50, 130, .32); }
.ann-cta svg { width: 15px; height: 15px; }
.ann-cta.ghost { background: transparent; color: var(--brand); border: 1px solid var(--rule-2); box-shadow: none; }
.ann-cta.ghost:hover { background: var(--brand-wash); box-shadow: none; }

/* —— 发布 / 编辑表单：浮起白卡，原位展开 —— */
.ann-formcard {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 18px;
  box-shadow: 0 18px 44px rgba(13, 19, 32, .12);
  animation: annPop .22s ease;
}
.ann-formcard.span2 { grid-column: 1 / -1; margin-bottom: 0; }
@keyframes annPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ann-formcard-h { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; margin-bottom: 13px; color: var(--ink); }
.ann-new { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--grad); border-radius: var(--r-micro); padding: 3px 7px; }
.ann-frow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 11px; }
.ann-frow label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ann-frow input, .ann-frow textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  padding: 10px 13px; font-size: 12.5px; font-family: inherit;
  color: var(--ink); background: var(--paper); resize: vertical;
}
.ann-frow input:focus, .ann-frow textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.ann-ffoot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ann-fbtns { margin-left: auto; display: flex; gap: 8px; }

/* —— 分组标题（站内 sec-title 语言）—— */
.ann-sec { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 20px 0 10px; }
.ann-sec::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--grad); }
.ann-sec .cnt { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

/* —— 启用中：双列卡片网格 —— */
.ann-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.ann-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 16px; display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ann-card:hover { border-color: rgba(17, 17, 17, .32); box-shadow: 0 12px 30px rgba(13, 19, 32, .09); transform: translateY(-2px); }
.ann-card-h { display: flex; align-items: flex-start; gap: 11px; }
.ann-title { font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink); flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ann-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 42px; }
.ann-foot { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ann-time { margin-right: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }

/* —— 图标气泡（五色渐变轮转 + 停用灰度）—— */
.ann-ico { width: 38px; height: 38px; border-radius: var(--r-card); flex: none; display: grid; place-items: center; color: #fff; }
.ann-ico svg { width: 16px; height: 16px; }
.ann-ico.off { background: var(--paper-3); color: var(--ink-4); }
.ann-g0 { background: var(--grad-blue); }
.ann-g1 { background: var(--grad-violet); }
.ann-g2 { background: var(--grad-teal); }
.ann-g3 { background: var(--grad-gold); }
.ann-g4 { background: var(--grad-pink); }

/* —— 状态标签 —— */
.ann-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-micro); flex: none; white-space: nowrap; }
.ann-tag.on { background: var(--green-wash); color: var(--green); }
.ann-tag.off { background: var(--paper-3); color: var(--ink-3); }

/* —— 小按钮（编辑 / 删除）—— */
.ann-mini {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--rule-2); background: var(--paper); border-radius: var(--radius-pill);
  padding: 6px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.ann-mini:hover { border-color: var(--brand); color: var(--brand); }
.ann-mini.danger:hover { border-color: var(--red); color: var(--red); background: var(--red-wash); }
.ann-mini svg { width: 13px; height: 13px; }

/* —— 已停用：紧凑行列表 —— */
.ann-off-list { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.ann-off-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.ann-off-row:last-child { border-bottom: 0; }
.ann-off-row .ann-ico { width: 30px; height: 30px; border-radius: var(--r-ctl); }
.ann-off-row .ann-ico svg { width: 13px; height: 13px; }
.ann-off-title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 停用行原位编辑：表单以无边框样式嵌入列表 */
.ann-off-list .ann-formcard { border: 0; border-radius: 0; box-shadow: none; margin: 0; border-bottom: 1px solid var(--rule); }
.ann-off-list .ann-formcard:last-child { border-bottom: 0; }

/* —— 深色模式微调 —— */
body[data-theme="dark"] .ann-hero { box-shadow: 0 14px 36px rgba(0, 0, 0, .4); }
body[data-theme="dark"] .ann-card:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
body[data-theme="dark"] .ann-formcard { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }

/* —— 响应式 —— */
@media (max-width: 900px) {
  .ann-hero { padding: 20px 18px; }
  .ann-hero h1 { font-size: 19px; }
  .ann-cta { margin-left: 0; padding: 10px 18px; }
  .ann-grid { grid-template-columns: minmax(0, 1fr); }
  .ann-off-row { flex-wrap: wrap; gap: 9px; }
  .ann-off-title { flex: 1 1 calc(100% - 42px); }
  .ann-off-row .ann-time { margin-right: auto; }
}

/* ==========================================================================
   P16. 后台列表页通用元件（2026-10-06）
   --------------------------------------------------------------------------
   站内信 / 反馈工单 / 用户管理三模块与公告管理共用同一套视觉语言。
   本段补充：分段控件、筛选 chips、搜索框、工具条、多列行列表、
   用户行专用列、行内操作面板、工单卡片。类名统一 ann-* 前缀。
   ========================================================================== */

/* —— 分段控件（发送目标切换）—— */
.ann-seg { display: inline-flex; gap: 4px; background: var(--paper-2); border-radius: var(--radius-pill); padding: 4px; }
.ann-seg button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 8px 18px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: .16s; }
.ann-seg button.on { background: var(--paper); color: var(--brand-ink); box-shadow: 0 2px 8px rgba(13, 19, 32, .1); }

/* —— 筛选 chips —— */
.ann-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ann-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--paper-2); border: 1px solid transparent; padding: 8px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: .16s; font-family: inherit; }
.ann-chip:hover { color: var(--brand); background: var(--brand-wash); }
.ann-chip.on { color: #fff; background: var(--grad); box-shadow: 0 4px 14px rgba(17, 17, 17, .28); }
.ann-chip .n { opacity: .72; font-size: 11px; margin-left: 3px; }

/* —— 数据字典：未被任何页面消费的分组（2026-10-07）—— */
.ann-chip.dead { color: var(--ink-3); background: var(--paper-3); }
.ann-chip.dead:hover { color: var(--ink-2); background: var(--paper-3); }
.ann-chip.dead.on { color: #fff; background: var(--ink-3); box-shadow: none; }
.ann-chip .w { font-size: 10px; margin-left: 4px; opacity: .8; }
.ann-li.dead { opacity: .74; }
.ann-li.dead:hover { opacity: 1; }
.ann-mini:disabled { opacity: .38; cursor: not-allowed; }
.ann-mini:disabled:hover { border-color: var(--rule-2); color: var(--ink-2); }
.ann-mini.arm { border-color: var(--red); color: var(--red); background: var(--red-wash); }

/* —— 搜索框（胶囊内联图标）—— */
.ann-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: var(--radius-pill); background: var(--paper); padding: 0 15px; height: 38px; }
.ann-search input { border: 0; outline: none; font-family: inherit; font-size: 12.5px; color: var(--ink); background: transparent; width: 100%; }
.ann-search .mag { color: var(--ink-4); display: grid; place-items: center; flex: none; }
.ann-search .mag svg { width: 14px; height: 14px; }

/* —— 工具条 —— */
.ann-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ann-bar .grow { flex: 1; min-width: 180px; }

/* —— 多列行列表（扩展公告页的紧凑行，容纳更多列）—— */
.ann-li { display: flex; align-items: center; gap: 13px; padding: 14px 17px; border-bottom: 1px solid var(--rule); transition: background .15s; }
.ann-li:last-child { border-bottom: 0; }
.ann-li:hover { background: var(--paper-2); }
.ann-li .ann-ico { width: 36px; height: 36px; border-radius: var(--r-ctl); }
.ann-li .ann-ico svg { width: 15px; height: 15px; }
.ann-li-main { flex: 1; min-width: 0; }

/* —— 列表行勾选框（批量操作）—— */
.ann-li-ck { display: flex; align-items: center; cursor: pointer; flex: 0 0 auto; }
.ann-li-ck input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; margin: 0; }

/* —— 生成结果码盒：一键复制的全部码 —— */
.ann-codebox {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 12px 13px; margin-bottom: 4px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-ctl); max-height: 220px; overflow-y: auto;
}
.ann-codebox .ann-code { user-select: all; }

/* —— 工具条内联下拉（批次筛选）—— */
.ann-sel {
  height: 34px; padding: 0 10px; margin-right: 10px;
  border: 1px solid var(--rule); border-radius: var(--r-ctl);
  background: var(--paper); color: var(--ink);
  font-size: 12.5px; cursor: pointer; max-width: 190px;
}
.ann-sel:focus { outline: none; border-color: var(--brand); }
.ann-li-t { display: flex; align-items: baseline; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ann-li-t .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-li-c { font-size: 12px; color: var(--ink-3); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-li-act { display: flex; gap: 6px; opacity: 0; transition: opacity .15s; flex: none; }
.ann-li:hover .ann-li-act { opacity: 1; }
@media (hover: none) { .ann-li-act { opacity: 1; } }

/* —— 用户行专用 —— */
.ann-u-name { display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; }
.ann-u-ava { width: 36px; height: 36px; border-radius: var(--r-ctl); flex: none; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.ann-u-txt { min-width: 0; }
.ann-u-txt b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-u-txt span { display: block; font-size: 11.5px; color: var(--ink-3); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-u-mail { flex: none; width: 180px; font-size: 11.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-u-meta { flex: none; text-align: right; font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); line-height: 1.55; }
.ann-u-meta b { color: var(--ink-2); font-weight: 600; }

/* —— 行内操作面板（角色调整 / 封禁原因），替代表单弹窗 —— */
.ann-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--paper-2); border-bottom: 1px solid var(--rule); padding: 12px 17px; }
.ann-inline .lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ann-inline select, .ann-inline input { border: 1px solid var(--rule-2); border-radius: var(--r-ctl); padding: 8px 11px; font-size: 12.5px; font-family: inherit; background: var(--paper); color: var(--ink); }
.ann-inline input { min-width: 200px; flex: 1; max-width: 420px; }
.ann-inline .sp { margin-left: auto; display: flex; gap: 8px; }

/* —— 工单卡片 —— */
.ann-tk { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 11px; transition: border-color .18s, box-shadow .18s; }
.ann-tk:hover { border-color: rgba(17, 17, 17, .32); box-shadow: 0 10px 26px rgba(13, 19, 32, .08); }
.ann-tk.off { opacity: .78; }
.ann-tk-h { display: flex; align-items: flex-start; gap: 11px; }
.ann-tk-h h3 { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--ink); }
.ann-tk-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.ann-tk-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }
.ann-tk-body { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ann-tk-foot { display: flex; align-items: center; gap: 10px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ann-tk-foot .ann-time { margin-right: auto; }
/* 卡片内原位展开的回复区（替代处理弹窗） */
.ann-tk-reply { border-top: 1px dashed var(--rule-2); background: var(--paper-2); margin: 13px -16px -16px; padding: 13px 16px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.ann-tk-reply .lbl { font-size: 11px; font-weight: 700; color: var(--green); margin-bottom: 6px; }
.ann-tk-reply .rb { font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.ann-tk-reply .rb.admin { background: var(--green-wash); border-radius: var(--r-ctl); padding: 9px 12px; color: #14532d; }
.ann-tk-reply textarea { width: 100%; box-sizing: border-box; min-height: 66px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl); padding: 10px 12px; font-size: 12.5px; font-family: inherit; resize: vertical; background: var(--paper); color: var(--ink); }
.ann-tk-reply .acts { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }

/* —— 深色模式 —— */
body[data-theme="dark"] .ann-seg { background: rgba(255, 255, 255, .06); }
body[data-theme="dark"] .ann-seg button.on { background: rgba(255, 255, 255, .12); color: #a8c3ff; }
body[data-theme="dark"] .ann-inline,
body[data-theme="dark"] .ann-tk-reply { background: rgba(255, 255, 255, .03); }
body[data-theme="dark"] .ann-tk-reply .rb.admin { background: rgba(21, 127, 61, .18); color: #9be3ba; }

/* —— 响应式 —— */
@media (max-width: 900px) {
  .ann-bar .grow { flex: 1 1 100%; min-width: 0; }
  .ann-li { flex-wrap: wrap; gap: 10px; }
  .ann-u-mail, .ann-u-meta { width: auto; flex: 1 1 auto; text-align: left; }
  .ann-u-name { flex: 1 1 100%; }
  .ann-li-act { opacity: 1; margin-left: auto; }
  .ann-inline input { min-width: 0; flex: 1 1 100%; max-width: none; }
  .ann-inline .sp { margin-left: 0; }
}

/* ==========================================================================
   P17. 移动端一致性修正（2026-10-06 用户反馈「网页版和手机版显示不一致」）
   --------------------------------------------------------------------------
   问题（仅窄屏出现，PC 正常）：
     ① 行标题被右侧「目标标签 / 时间 / 操作」挤压，只剩 1 个字符（站内信「收…」）；
     ② 卡片底部按钮文字被压成两行（「查看回复」→「查看回 / 复」）；
     ③ 行内元素横排过挤。
   修复：标题获得可伸缩的剩余空间（min-width:0 允许省略）；
        窄屏行改为「图标 + 主体」第一行、「时间 + 操作」第二行；
        按钮文字禁止换行。
   ========================================================================== */
/* ① 标题占满剩余空间（否则窄屏被挤压成 1 个字符） */
.ann-li-t .tx { flex: 1 1 auto; min-width: 0; }
.ann-li-t > .ann-tag { flex: 0 0 auto; }
.ann-off-title { flex: 1 1 auto; }

/* ② 卡片/回复区按钮文字不换行，底栏允许换行 */
.ann-tk-foot { flex-wrap: wrap; row-gap: 8px; }
.ann-tk-foot .btn,
.ann-tk-reply .btn,
.ann-inline .btn { white-space: nowrap; }

/* ③ 窄屏行列表：图标 + 主体占第一行，时间与操作下沉第二行 */
@media (max-width: 900px) {
  .ann-li { flex-wrap: wrap; gap: 8px 10px; }
  .ann-li .ann-li-main { flex: 1 1 calc(100% - 46px); min-width: 0; }
  .ann-li .ann-time { order: 9; margin-right: auto; }
  .ann-li .ann-li-act { order: 10; opacity: 1; margin-left: 0; }
  /* 用户行：头像 + 昵称独占首行，其余列自适应 */
  .ann-li .ann-u-name { flex: 1 1 calc(100% - 46px); }
  /* 工单卡片：标题不换行挤压状态标签 */
  .ann-tk-h h3 { min-width: 0; }
  .ann-tk-foot .ann-time { flex: 1 1 100%; }
}

/* ==========================================================================
   P18. 安全防护模块专用元件（2026-10-06，角色/IP/登录安全/注册码/敏感词/会话）
   --------------------------------------------------------------------------
   与 P15/P16 的 .ann-* 语言一致，补充：设置行（表单型策略页）、
   权限勾选网格（角色权限内联编辑）、等宽码（注册码 / IP）。
   ========================================================================== */

/* —— 设置行：左说明 + 右控件（登录安全 / 注册设置）—— */
.ann-setrow { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.ann-setrow:last-child { border-bottom: 0; }
.ann-setrow > div:first-child { min-width: 0; flex: 1; }
.ann-setrow-t { font-size: 13px; font-weight: 600; color: var(--ink); }
.ann-setrow-h { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.6; }
.ann-setrow .ctl { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.ann-setrow .ctl input[type="number"],
.ann-setrow .ctl input[type="text"] {
  width: 92px; border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  padding: 8px 10px; font-size: 12.5px; font-family: inherit;
  text-align: center; background: var(--paper); color: var(--ink);
}
.ann-setrow .ctl input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.ann-setrow .unit { font-size: 11.5px; color: var(--ink-3); }

/* —— 只读策略值 + 固定说明条（登录安全：策略写死，用徽标代替输入控件）—— */
.ann-fixed {
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--brand-ink); background: var(--brand-wash);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
.ann-fixed.green { color: var(--green); background: var(--green-wash); }
.ann-note {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 12px 15px; margin-bottom: 18px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
}
.ann-note svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; margin-top: 1px; }
.ann-note b { color: var(--ink); }

/* —— 权限勾选网格（角色权限：行内展开）—— */
.ann-perms { display: flex; flex-wrap: wrap; gap: 8px; }
.ann-perm {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  padding: 7px 11px; cursor: pointer; transition: .15s; user-select: none;
}
.ann-perm:hover { border-color: var(--brand); color: var(--brand); }
.ann-perm.on { background: var(--brand-wash); border-color: rgba(17, 17, 17, .35); color: var(--brand-ink); font-weight: 600; }
.ann-perm input { display: none; }
.ann-perm .ck { width: 13px; height: 13px; border-radius: var(--r-micro); border: 1.5px solid var(--rule-3); flex: none; display: grid; place-items: center; }
.ann-perm.on .ck { background: var(--brand); border-color: var(--brand); }
.ann-perm.on .ck::after { content: ''; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }

/* —— 等宽码（注册码 / IP / 会话）—— */
.ann-code { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--ink); }
.ann-copy { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ann-copy:hover { color: var(--brand); }
.ann-copy:hover .ann-code { color: var(--brand); }

/* —— 卡片内小分组标题（策略页）—— */
.ann-cardsub { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin: 4px 0 6px; letter-spacing: .02em; }

/* —— 深色模式 —— */
body[data-theme="dark"] .ann-perm { background: rgba(255, 255, 255, .04); }

/* —— 响应式 —— */
@media (max-width: 900px) {
  .ann-setrow { flex-wrap: wrap; gap: 10px; }
  .ann-setrow .ctl { margin-left: 0; }
}

/* ==========================================================================
   P19 · 数据与同步 5 模块（2026-10-06 · sync/openapi/backup/dict/storage）
   ========================================================================== */
/* 分节标题（formcard / 行列表之间的小节头） */
.ann-sect-h { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; font-weight: 800; color: var(--ink); margin: 22px 0 12px; }
.ann-sect-h span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ann-sect-h span.danger-txt { color: var(--red); }
/* formcard 标题旁的灰色说明 */
.ann-note-inline { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
/* 状态标签扩展变体（info 蓝 / warn 琥珀 / err 红） */
.ann-tag.info { background: var(--brand-wash); color: var(--brand-ink); }
.ann-tag.warn { background: var(--amber-wash); color: var(--amber); }
.ann-tag.err { background: var(--red-wash); color: var(--red); }
/* 安全风控中心：来源着色（与 KPI 同色系） */
.ann-tag.blue   { background: var(--brand-wash);  color: var(--brand-ink); }
.ann-tag.violet { background: #f1eefd;            color: #5b46c9; }
.ann-tag.green  { background: var(--green-wash);  color: var(--green); }
.ann-tag.amber  { background: var(--amber-wash);  color: var(--amber); }
.ann-tag.red    { background: var(--red-wash);    color: var(--red); }
/* 表单 select 与 input 同款 */
.ann-frow select {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rule-2); border-radius: var(--r-ctl);
  padding: 10px 13px; font-size: 12.5px; font-family: inherit;
  color: var(--ink); background: var(--paper);
}
.ann-frow select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
/* 两步确认武装态（行内替代弹窗） */
.ann-mini.arm { border-color: var(--red); background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(198, 40, 40, .3); }
.ann-mini.arm:hover { border-color: var(--red); background: var(--red); color: #fff; }
.btn.arm { background: linear-gradient(135deg, #ff7a9e, #dc2626) !important; box-shadow: 0 6px 14px rgba(220, 38, 38, .35) !important; }
/* 数据同步：手动同步按钮组 */
.ann-sync-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 连通性明细分组头 */
.ann-li.group-head { background: var(--paper-2); padding: 9px 17px; }
.ann-li.group-head:hover { background: var(--paper-2); }
.ann-li.group-head .gh-t { font-size: 12px; font-weight: 800; color: var(--ink-2); letter-spacing: .02em; }
.ann-li.group-head .gh-n { margin-left: auto; font-size: 11.5px; color: var(--ink-3); }
/* 行内编辑卡嵌入行列表（字典） */
.ann-off-list .ann-formcard.inline-edit { border: 0; border-radius: 0; box-shadow: none; margin: 0; border-bottom: 1px solid var(--rule); background: var(--paper-2); }
/* 移动端 */
@media (max-width: 900px) {
  .ann-sect-h { margin: 18px 0 10px; }
  .ann-sync-btns .btn { flex: 1 1 auto; justify-content: center; }
}
/* 字典行编码：灰底胶囊（裸 mono 文本视觉太弱） */
.ann-li-t .ann-code { background: var(--paper-2); border-radius: var(--r-micro); padding: 3px 8px; font-size: 11px; font-weight: 600; color: var(--ink-2); }
/* 行内小按钮禁用态（如已发送邮件的「重发」） */
.ann-mini[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* ==========================================================================
   P20 · 站点配置 3 页（2026-10-06 · mailcfg / sitecfg / agreements）
   ========================================================================== */
/* 背景色预设 chip 的色点 */
.ann-cdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; flex: none; }
/* ann-frow 内的取色器与 select 同款修正 */
.ann-frow input[type="color"] { width: 46px; min-width: 46px; height: 38px; padding: 3px; cursor: pointer; }
.ann-frow input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.ann-frow input[type="color"]::-webkit-color-swatch { border: 1px solid var(--rule-2); border-radius: var(--r-micro); }
/* hub 分段页签下方留白由容器控制，seg 本身不被拉伸 */
.ann-seg { max-width: 100%; overflow-x: auto; }

/* ==========================================================================
   P21 · 协议设置「方案 C 双栏所见即所得」（2026-10-07）
   ========================================================================== */
.ag-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 18px; }
/* 高度自适应 + 一屏封顶（2026-10-07 用户要求：卡片不要超过能看见的一屏）
   100vh 减去：顶栏 56 + 内容区上留白 74 + hero ≈106 + 页签 ≈48 + 间距 ≈50，
   内部（正文 / 预览）各自滚动，页面本身不再出现纵向滚动条。 */
.ag-two .ann-formcard {
  margin-bottom: 0; display: flex; flex-direction: column;
  height: auto; min-height: 240px; max-height: calc(100vh - 334px);
}
/* 编辑卡：正文撑满剩余高度，页脚贴底，与右侧预览卡等高 */
.ag-two .ag-grow { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ag-two .ag-grow textarea { flex: 1 1 auto; min-height: 0; overflow-y: auto; resize: none; }
.ag-two .ag-edit-foot { margin-top: auto; padding-top: 4px; }
/* 编辑区页脚：字数 · 更新时间 · 未保存提示 */
.ag-edit-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.ag-edit-foot .dirty { margin-left: auto; color: var(--amber); background: var(--amber-wash); border-radius: var(--radius-pill); padding: 3px 10px; font-weight: 600; }
/* 前台预览：文档纸（视觉对齐前台协议页） */
.ag-prev-wrap { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: 14px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ag-prev { background: var(--paper); border-radius: var(--r-ctl); padding: 16px 18px; }
.ag-prev-t { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.ag-prev-v { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--brand-ink); background: var(--brand-wash); border-radius: var(--radius-pill); padding: 3px 10px; }
.ag-prev-m { font-size: 11.5px; color: var(--ink-3); padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 10px; }
.ag-prev .ag-ch { font-size: 12.5px; font-weight: 800; color: var(--ink); margin: 12px 0 5px; }
.ag-prev .ag-p { font-size: 12.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 5px; }
.ag-prev .ag-check { display: flex; gap: 7px; }
.ag-prev .ag-check::before { content: ''; flex: none; width: 13px; height: 13px; margin-top: 5px; border-radius: var(--r-micro); border: 1.5px solid var(--brand); background: var(--brand-wash); }
.ag-prev-empty { font-size: 12.5px; color: var(--ink-4); text-align: center; padding: 48px 0; }
/* 更新记录：版本时间线 */
.ag-tl { padding: 12px 17px; position: relative; }
.ag-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); border: 2px solid var(--rule-2); flex: none; }
.ag-tl.now .ag-tl-dot { background: var(--brand); border-color: var(--brand-wash); box-shadow: 0 0 0 3px var(--brand-wash); }
.ag-tl-ver { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--ink-2); background: var(--paper-2); border-radius: var(--r-micro); padding: 3px 9px; flex: none; }
.ag-tl.now .ag-tl-ver { color: var(--brand-ink); background: var(--brand-wash); }
@media (max-width: 1000px) {
  .ag-two { grid-template-columns: minmax(0, 1fr); }
  /* 移动端堆叠显示，取消一屏封顶（否则两张卡各占一屏、反而不便） */
  .ag-two .ann-formcard { max-height: none; min-height: 0; }
  .ag-prev-wrap { height: 320px; min-height: 0; }
  .ag-two .ag-grow textarea { min-height: 200px; resize: vertical; }
}

/* ==========================================================================
   P22 · 站点设置「方案 B 双栏所见即所得」（2026-10-07）
   ========================================================================== */
/* 表单卡标题内嵌图标对齐 */
.ann-formcard-h svg { vertical-align: -2px; margin-right: 4px; }
/* 站点状态条 */
.sc-state { display: flex; align-items: center; gap: 12px; padding: 14px 17px; }
.sc-state.warn { border-color: var(--amber); }
.sc-state-ico { width: 34px; height: 34px; border-radius: var(--r-ctl); background: var(--green-wash); color: var(--green); display: flex; align-items: center; justify-content: center; flex: none; }
.sc-state.warn .sc-state-ico { background: var(--amber-wash); color: var(--amber); }
.sc-state-tx { min-width: 0; flex: 1 1 auto; }
.sc-state-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.sc-state-h { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.sc-state-ctl { display: flex; align-items: center; gap: 9px; flex: none; font-size: 12.5px; color: var(--ink-2); }
/* 双栏 */
.sc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sc-two .ann-formcard { margin-bottom: 0; }
/* 编辑卡页脚：字数 + 未保存 */
.sc-edit-foot { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); margin-top: 10px; }
.sc-edit-foot .dirty { margin-left: auto; color: var(--amber); background: var(--amber-wash); border-radius: var(--radius-pill); padding: 3px 10px; font-weight: 600; }
/* 前台页脚预览（还原 index.html 真实页脚排版） */
.sc-prev { background: var(--paper-2); border-radius: var(--r-ctl); padding: 14px 16px; display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.sc-prev-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
.sc-prev-mark { width: 24px; height: 24px; border-radius: var(--r-ctl); overflow: hidden; display: inline-flex; flex: none; }
.sc-prev-mark img { width: 100%; height: 100%; display: block; }
.sc-prev-aside { margin-left: auto; text-align: right; max-width: 62%; }
.sc-prev-links { display: flex; gap: 10px; justify-content: flex-end; font-size: 11.5px; color: var(--brand-ink); margin-bottom: 5px; }
.sc-prev-copy { font-size: 12px; line-height: 1.7; color: var(--ink-2); margin: 0; word-break: break-word; }
.sc-prev-icp { font-size: 11.5px; color: var(--ink-3); margin: 3px 0 0; }
.sc-prev-note { font-size: 11.5px; color: var(--ink-4); margin-top: 9px; }
@media (max-width: 1000px) {
  .sc-two { grid-template-columns: minmax(0, 1fr); }
  .sc-state { flex-wrap: wrap; }
  .sc-state-ctl { margin-left: auto; }
  .sc-prev-aside { margin-left: 0; text-align: left; max-width: 100%; }
  .sc-prev-links { justify-content: flex-start; }
}