/* ==========================================================================
   KDUsers 设计令牌 · 极简版
   --------------------------------------------------------------------------
   颜色预算：1 个主色 + 1 组中性灰阶 + 3 个语义色 = 全站不再新增颜色。
   三个布局风格（分层控制台 / 分栏主从 / 卡片墙）共用这一套，只换布局不换视觉。
   ========================================================================== */

:root {
  /* --- 中性：唯一的灰阶来源，界面 90% 的面积由它构成 ------------------- */
  --n-0:  #ffffff;   /* 卡片、面板 */
  --n-25: #fafbfc;   /* 页面底 */
  --n-50: #f4f6f8;   /* 次级底、表头 */
  --n-100:#eceff3;  /* 悬停底 */
  --n-200:#dfe3e8;   /* 边框 */
  --n-400:#98a2b3;   /* 次要文字 */
  --n-600:#667085;   /* 辅助文字 */
  --n-900:#1c2430;   /* 主文字 */

  /* --- 主色：仅用于"当前页/主操作/焦点"，不用于装饰 ------------------- */
  --pri:#2f5bd7;
  --pri-weak:#eef2fd;   /* 主色极浅底，用于选中行 */

  /* --- 语义：只有三种状态值得用色，其余一律用灰 ------------------------ */
  --ok:#17795e;         /* 有效 / 成功 */
  --ok-weak:#e8f5f0;
  --warn:#8a5a00;       /* 需注意 / 临近 */
  --warn-weak:#fdf4e3;
  --dan:#b3271e;        /* 危险 / 停用 / 撤销 */
  --dan-weak:#fceceb;

  /* --- 圆角与间距 ----------------------------------------------------- */
  --r-sm:4px;
  --r:6px;
  --r-lg:8px;
  --sp:8px;

  /* --- 字号：四级足够 ------------------------------------------------- */
  --f1:12px;   /* 标签、辅助 */
  --f2:13px;   /* 正文、表格 */
  --f3:15px;   /* 小标题 */
  --f4:19px;   /* 页面标题 */

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}

/* ========================= 图标 =========================
   只加在四个位置：导航分区、状态标签、高危/主操作按钮。
   表格文字、表单标签、面包屑、空状态一律不加 —— 加在全部地方等于没加。
   颜色全部 currentColor，不引入任何新颜色。
   规格：16px 线性（导航）/ 12px 线性（状态与按钮），stroke-width 1.4
*/
.ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  vertical-align:-2px}
.ico svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ico-sm svg{width:12px;height:12px;stroke-width:1.6}

/* 导航图标：固定 16px 容器，保证菜单文字起始位置对齐 */
.nav-ico{width:16px;height:16px;flex-shrink:0}

/* 状态图标：与文字组成双通道，去掉图标也能读懂 */
.tag .ico{margin-right:3px}
.tag .ico svg{width:11px;height:11px;stroke-width:2}

/* 分区色条旁的标识图标 */
.zone-ico{width:14px;height:14px;flex-shrink:0}
.zone-ico svg{width:14px;height:14px}

/* ========================= 基础重置 ========================= */
*{box-sizing:border-box}
body{margin:0;background:var(--n-25);color:var(--n-900);
  font:var(--f2)/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600}
a{color:var(--pri);text-decoration:none}
.mono{font-family:var(--mono);font-size:var(--f1);color:var(--n-400)}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* ========================= 通用组件 ========================= */

/* 顶栏：三个风格完全一致，保证导航体验统一 */
.hd{background:var(--n-0);border-bottom:1px solid var(--n-200);height:52px;
  padding:0 18px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:40}
.hd .mk{width:28px;height:28px;border-radius:var(--r);background:var(--pri);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700}
.hd b{font-size:var(--f3)}
.hd .crumb{font-size:var(--f1);color:var(--n-400);font-family:var(--mono)}
.hd .rt{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:var(--f1);color:var(--n-600)}

.breadcrumb{font-size:var(--f1);color:var(--n-400);margin:0 0 10px}

/* 页面标题区 */
.phead{margin-bottom:16px}
.phead h1{font-size:var(--f4);letter-spacing:-.01em;margin-bottom:3px}
.phead p{margin:0;color:var(--n-600);font-size:var(--f2)}

/* 卡片 */
.card{background:var(--n-0);border:1px solid var(--n-200);border-radius:var(--r-lg);
  margin-bottom:14px;overflow:hidden}
.card-hd{padding:11px 15px;border-bottom:1px solid var(--n-200);display:flex;
  align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.card-hd h2{font-size:var(--f3)}
.card-hd .hint{font-size:var(--f1);color:var(--n-400)}
.card-bd{padding:14px 15px}

/* 统计条：数字左对齐，不做大数字装饰 */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  border:1px solid var(--n-200);border-radius:var(--r-lg);overflow:hidden;
  background:var(--n-0);margin-bottom:14px}
.stat{padding:10px 14px;border-right:1px solid var(--n-200)}
.stat:last-child{border-right:0}
.stat span{display:block;font-size:var(--f1);color:var(--n-400);margin-bottom:2px}
.stat b{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}

/* 状态标签：颜色只承载语义，文字始终在场（不靠颜色单独传意） */
.tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;
  font-size:var(--f1);font-weight:500;border:1px solid transparent;white-space:nowrap}
.t-ok{background:var(--ok-weak);color:var(--ok);border-color:#bce0d2}
.t-off{background:var(--n-50);color:var(--n-600);border-color:var(--n-200)}
.t-warn{background:var(--warn-weak);color:var(--warn);border-color:#ecd9a8}
.t-dan{background:var(--dan-weak);color:var(--dan);border-color:#f0c2be}

/* 按钮 */
.btn{height:32px;padding:0 12px;border:1px solid var(--n-200);border-radius:var(--r);
  background:var(--n-0);color:var(--n-900);font-size:var(--f2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.btn:hover{background:var(--n-50)}
.btn-pri{background:var(--pri);border-color:var(--pri);color:#fff}
.btn-pri:hover{background:#2749ad}
.btn-dan{color:var(--dan);border-color:#f0c2be}
.btn-dan:hover{background:var(--dan-weak)}
.btn-sm{height:26px;padding:0 9px;font-size:var(--f1)}

/* 表单 */
.fl{display:grid;gap:5px;font-size:var(--f2);color:var(--n-600)}
.fl input,.fl select,.fl textarea{height:34px;padding:0 10px;border:1px solid var(--n-200);
  border-radius:var(--r);background:var(--n-0);color:var(--n-900);font-size:var(--f2);width:100%}
.fl textarea{height:70px;padding:8px 10px;resize:vertical}
.fl .note{font-size:var(--f1);color:var(--n-400);margin-top:2px}

/* 提示条 */
.notice{padding:9px 12px;border:1px solid var(--n-200);border-left:3px solid var(--n-400);
  border-radius:var(--r);font-size:var(--f2);color:var(--n-600);background:var(--n-0);
  margin-bottom:12px}
.notice-info{border-left-color:var(--pri);background:var(--pri-weak);color:#2c3f77}
.notice-warn{border-left-color:var(--warn);background:var(--warn-weak);color:#6b4600}
.notice-dan{border-left-color:var(--dan);background:var(--dan-weak);color:#8c1e17}

/* 工具条 */
.tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tools input,.tools select{height:32px;padding:0 10px;border:1px solid var(--n-200);
  border-radius:var(--r);background:var(--n-0);font-size:var(--f2);color:var(--n-900)}
.tools input{width:230px}

/* 表格 */
table{width:100%;border-collapse:collapse}
thead th{background:var(--n-50);border-bottom:1px solid var(--n-200);padding:8px 12px;
  text-align:left;font-size:var(--f1);font-weight:600;color:var(--n-600);white-space:nowrap}
tbody td{padding:8px 12px;border-bottom:1px solid var(--n-100);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--n-25)}
tr.on{background:var(--pri-weak)}
td.nr{text-align:right;font-variant-numeric:tabular-nums}

/* 演示提示 */
.demo{background:var(--n-50);border:1px dashed var(--n-200);color:var(--n-600);
  padding:7px 12px;border-radius:var(--r);font-size:var(--f1);margin-bottom:14px}

/* 空状态 */
.empty{padding:40px 20px;text-align:center;color:var(--n-400);font-size:var(--f2)}

.rowb{display:flex;gap:7px;flex-wrap:wrap}
.stack{display:grid;gap:10px}
fieldset{border:1px solid var(--n-200);border-radius:var(--r);margin:0;padding:0}
legend{padding:0 7px;font-size:var(--f1);font-weight:600;color:var(--n-600);margin-left:11px}