/* =========================================================
   沭宁美居 · 生产管理工作台
   设计系统 v1.0 —— 风格：现代青绿极简
   所有页面统一引用本文件
   ========================================================= */

:root {
  /* 主色：青绿 */
  --primary: #10B981;
  --primary-600: #059669;
  --primary-700: #047857;
  --primary-50: #ECFDF5;
  --primary-100: #D1FAE5;

  /* 中性色 */
  --bg: #F5F9F7;
  --card: #FFFFFF;
  --border: #E7ECEA;
  --border-strong: #D3DBD8;
  --hover: #F6FBF9;

  /* 文字 */
  --text: #1C2A26;
  --text-2: #5A6864;
  --text-3: #93A09B;

  /* 语义色 */
  --danger: #E5484D;
  --danger-bg: #FDF0F0;
  --warning: #D97917;
  --warning-bg: #FDF6EC;
  --info: #3B82F6;
  --info-bg: #EFF6FF;
  --purple: #7C5CFC;
  --purple-bg: #F4F1FE;
  --cyan: #0E9BAC;
  --cyan-bg: #ECF9FB;

  /* 圆角与阴影 */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-pop: 0 12px 40px rgba(18, 42, 36, 0.14);
  --shadow-card: 0 2px 6px #10B98126, 0 12px 30px #10B98140, 0 30px 60px #10B98140;

  /* 尺寸 */
  --sidebar-w: 226px;
  --header-h: 56px;
  --content-pad: 22px;

  /* 框架（侧栏/顶栏）配色 —— 主题可覆盖 */
  --chrome: #FFFFFF;            /* 侧栏/顶栏背景 */
  --chrome-border: var(--border);
  --chrome-fg: var(--text);     /* 顶栏主文字 */
  --chrome-muted: #C9D4D0;      /* 顶栏次级文字/分隔 */
  --chrome-hover: #F4F8F6;      /* 顶栏悬停底 */
  --nav-fg: var(--text-2);      /* 导航文字 */
  --nav-active-fg: var(--primary-700);
  --nav-hover-bg: var(--primary-50);
  --nav-active-bg: var(--primary-50);
  --nav-badge-bg: #F1F5F3;
  --nav-badge-fg: var(--text-3);   /* 徽标文字色（主色底主题可覆盖为白） */
  --nav-dot: #D6E2DE;
  --thead-bg: #F7FAF9;          /* 表头背景 */
  --scroll-thumb: #CFDAD6;
  --soft: #F1F4F3;              /* 通用浅灰底（关闭钮/灰标签等） */

  /* ============ 形态变量（主题可覆盖，控制组件外观风格） ============ */
  /* 按钮 */
  --btn-radius: var(--radius-sm);   /* 按钮圆角（可 999px 胶囊 / 2px 直角） */
  --btn-weight: 500;                 /* 按钮字重 */
  --btn-shadow: 0 6px 16px #10B98145, 0 2px 5px #10B98130;                /* 主按钮阴影 */
  --btn-primary-bg: var(--primary);  /* 主按钮背景（可渐变） */
  --btn-primary-bg-hover: var(--primary-600);
  --btn-primary-fg: #fff;
  /* 卡片 / 面板 */
  --card-radius: var(--radius);
  --card-border-w: 1px;
  --card-border-c: var(--border);
  --card-accent: transparent;        /* 卡片顶部色条（可设为主题色） */
  /* 输入框 */
  --input-radius: var(--radius-sm);
  --input-border: var(--border-strong);
  /* 标签 */
  --tag-radius: 6px;
  --tag-weight: 500;
  /* 表头 */
  --thead-fg: var(--text-2);
  --thead-weight: 550;
  --thead-case: none;                /* 可选 uppercase */
  --thead-border-w: 1px;
  --thead-border-c: var(--border);

  font-size: 14px;
}

/* =========================================================
   主题：深蓝雅致（参考新版后台风格）
   深蓝框架 + 浅灰内容区 + 白卡片 + 蓝紫主色
   ========================================================= */
body[data-theme="azure"] {
  --primary: #5B6BD5;
  --primary-600: #4A59C4;
  --primary-700: #3A47A8;
  --primary-50: #EEF0FB;
  --primary-100: #DCDFF7;

  --bg: #F1F2F6;
  --border: #E5E7F0;
  --border-strong: #D4D7E3;
  --hover: #F6F7FC;

  --text: #23283D;
  --text-2: #5B6072;
  --text-3: #9AA0B4;

  --danger: #E5484D;  --danger-bg: #FDEFEF;
  --warning: #D97917; --warning-bg: #FDF4EA;
  --info: #3B82F6;    --info-bg: #EFF5FF;
  --purple: #7C5CFC;  --purple-bg: #F3F0FE;
  --cyan: #0E9BAC;    --cyan-bg: #EAF8FB;

  --radius: 12px;
  --shadow-pop: 0 12px 40px rgba(32, 41, 79, 0.20);
  --shadow-card: 0 2px 6px #5B6BD526, 0 12px 30px #5B6BD540, 0 30px 60px #5B6BD540;

  --chrome: #20294F;
  --chrome-border: rgba(255, 255, 255, .09);
  --chrome-fg: #F2F4FF;
  --chrome-muted: rgba(226, 231, 255, .55);
  --chrome-hover: rgba(255, 255, 255, .09);
  --nav-fg: #C6CCE8;
  --nav-active-fg: #FFFFFF;
  --nav-hover-bg: rgba(255, 255, 255, .08);
  --nav-active-bg: var(--primary);
  --nav-badge-bg: rgba(255, 255, 255, .12);
  --nav-dot: rgba(255, 255, 255, .35);
  --thead-bg: #F6F7FB;
  --scroll-thumb: #C9CDDB;
  --soft: #F1F2F6;
  --btn-shadow: 0 6px 16px #5B6BD545, 0 2px 5px #5B6BD530;}

/* =========================================================
   主题：暖阳橙光
   米白暖底 + 橙色主色 + 白色框架
   ========================================================= */
body[data-theme="sunset"] {
  --primary: #E07B39;
  --primary-600: #C9662A;
  --primary-700: #A95220;
  --primary-50: #FDF3EA;
  --primary-100: #FAE3CE;

  --bg: #FAF6F0;
  --border: #EFE7DC;
  --border-strong: #DFD3C2;
  --hover: #FCF8F3;

  --text: #2E2A24;
  --text-2: #6B6357;
  --text-3: #A2988A;

  --radius: 14px;
  --shadow-pop: 0 12px 40px rgba(80, 55, 25, 0.16);
  --shadow-card: 0 2px 6px #E07B3926, 0 12px 30px #E07B3940, 0 30px 60px #E07B3940;

  --chrome: #FFFFFF;
  --chrome-border: var(--border);
  --chrome-fg: var(--text);
  --chrome-muted: #D8CCBC;
  --chrome-hover: #FCF6EE;
  --nav-fg: var(--text-2);
  --nav-active-fg: var(--primary-700);
  --nav-hover-bg: var(--primary-50);
  --nav-active-bg: var(--primary-50);
  --nav-badge-bg: #F7EFE4;
  --nav-dot: #E3D6C4;
  --thead-bg: #FAF5EE;
  --scroll-thumb: #DCCFBE;
  --soft: #F5EEE4;
  --btn-shadow: 0 6px 16px #E07B3945, 0 2px 5px #E07B3930;}

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: var(--primary-600); text-decoration: none; }
a:hover { color: var(--primary-700); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* =========================================================
   页面容器
   ========================================================= */
.page { padding: var(--content-pad); max-width: 1680px; margin: 0 auto; }

.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.page-title {
  font-size: 19px; font-weight: 600; letter-spacing: .2px;
  display: flex; align-items: center; gap: 10px;
}
.page-title::before {
  content: ""; width: 4px; height: 18px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
}
.page-sub { color: var(--text-3); font-size: 12px; margin-top: 2px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   卡片
   ========================================================= */
.card {
  background: var(--card);
  border: var(--card-border-w) solid var(--card-border-c);
  border-radius: var(--card-radius);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover {
  box-shadow: var(--shadow-card), 0 0 0 3px var(--primary-50);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--card-accent); z-index: 1;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.card-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-title .count-badge {
  font-size: 11px; color: var(--primary-700); background: var(--primary-50);
  border: 1px solid var(--primary-100); padding: 1px 8px; border-radius: 999px; font-weight: 500;
}
.card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-body { padding: 16px 18px; }
.card-body.no-pad { padding: 0; }

/* =========================================================
   KPI 统计卡
   ========================================================= */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-bottom: 16px;
}
.stat-card {
  background: var(--card); border: var(--card-border-w) solid var(--card-border-c); border-radius: var(--card-radius);
  padding: 16px 18px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card), 0 10px 26px rgba(0, 0, 0, .10);
}
.stat-card::after {
  content: ""; position: absolute; right: -18px; top: -18px; width: 74px; height: 74px;
  border-radius: 50%; background: var(--primary-50); opacity: .55;
}
.stat-label { font-size: 12px; color: var(--text-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.stat-value { font-size: 26px; font-weight: 650; letter-spacing: .3px; line-height: 1.1; position: relative; z-index: 1; }
.stat-value .unit { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 4px; }
.stat-trend { margin-top: 6px; font-size: 12px; color: var(--text-3); display: flex; gap: 6px; align-items: center; }
.stat-trend .up { color: var(--danger); }
.stat-trend .down { color: var(--primary-600); }

/* =========================================================
   筛选栏
   ========================================================= */
.filter-bar {
  background: var(--card); border: var(--card-border-w) solid var(--card-border-c); border-radius: var(--card-radius);
  padding: 13px 18px; margin-bottom: 16px;
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  box-shadow: var(--shadow-card);
}
.filter-item { display: flex; flex-direction: column; gap: 6px; }
.filter-label { font-size: 12px; color: var(--text-2); }
.filter-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 列表汇总行（轻量，非卡片） */
.list-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: -6px 0 14px; padding: 2px 2px;
  font-size: 13px; color: var(--text-2);
}
.list-summary .ls-label { font-size: 12px; color: var(--text-3); }
.list-summary .ls-item { white-space: nowrap; }
.list-summary .ls-val { color: var(--text); font-weight: 700; margin-left: 2px; }
.list-summary .ls-val#sumAmount { color: var(--primary-700); }
.list-summary .ls-sep { color: var(--border); }

/* 内联筛选（卡片头部紧凑场景） */
.filter-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* =========================================================
   表单控件
   ========================================================= */
.input, .select, .textarea {
  height: 34px; padding: 0 11px; font-size: 13px; color: var(--text);
  background: #fff; border: 1px solid var(--input-border); border-radius: var(--input-radius);
  outline: none; transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.select { padding-right: 28px; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2393A09B'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.textarea { height: auto; min-height: 74px; padding: 8px 11px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, .13);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input[disabled], .select[disabled] { background: var(--soft); color: var(--text-3); cursor: not-allowed; }

/* 输入光标（插入点）显式深色，避免部分浏览器继承为白色不可见 */
.input, .select, .textarea, input[type="text"], input[type="number"], input[type="date"],
input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
textarea, [contenteditable="true"] {
  caret-color: var(--primary-700, #047857);
  color: var(--text, #1C2A26);
}
.input::selection, .textarea::selection, input::selection, textarea::selection { background: var(--primary-100, #D1FAE5); color: var(--text, #1C2A26); }

.input-sm { height: 28px; font-size: 12px; padding: 0 9px; }
.input-lg { height: 40px; font-size: 14px; padding: 0 14px; }

/* 表单网格 */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 18px; }
.form-item { display: flex; flex-direction: column; gap: 6px; }
.form-item.full { grid-column: 1 / -1; }
.form-label { font-size: 12px; color: var(--text-2); }
.form-label .req { color: var(--danger); margin-left: 2px; }

/* =========================================================
   按钮
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 15px; font-size: 13px; font-family: inherit;
  border-radius: var(--btn-radius); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: all .15s; background: #fff; color: var(--text);
  border-color: var(--border-strong); font-weight: var(--btn-weight);
}
.btn:hover { border-color: var(--primary); color: var(--primary-600); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--btn-primary-bg); border-color: transparent; color: var(--btn-primary-fg);
  box-shadow: var(--btn-shadow);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: transparent; color: var(--btn-primary-fg); }

.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--primary-50); color: var(--primary-700); border-color: transparent; }

.btn-danger { color: var(--danger); border-color: #F3C6C8; background: #fff; }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.btn-sm { height: 28px; padding: 0 10px; font-size: 12px; border-radius: var(--tag-radius); }
.btn-lg { height: 40px; padding: 0 22px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-link {
  border: none; background: none; color: var(--primary-600); cursor: pointer;
  font-size: 12px; padding: 2px 4px; font-family: inherit;
}
.btn-link:hover { text-decoration: underline; }
.btn-link.danger { color: var(--danger); }
.btn-link.accent { color: var(--primary); font-weight: 600; }

.btn .ico { width: 14px; height: 14px; flex: none; }

/* =========================================================
   数据表格
   ========================================================= */
.table-wrap { overflow: auto; max-height: calc(100vh - 300px); border-radius: 0; }
.table-wrap.free { max-height: none; }

table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }

table.dt th {
  position: sticky; top: 0; z-index: 5;
  background: var(--thead-bg); color: var(--thead-fg); font-weight: var(--thead-weight); font-size: 12px;
  text-align: left; padding: 10px 12px; white-space: nowrap;
  text-transform: var(--thead-case); letter-spacing: .2px;
  border-bottom: var(--thead-border-w) solid var(--thead-border-c);
}
table.dt th.sortable { cursor: pointer; user-select: none; }
table.dt th.sortable:hover { color: var(--primary-700); }
table.dt th.num, table.dt td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dt th.center, table.dt td.center { text-align: center; }

table.dt td {
  padding: 9px 12px; border-bottom: 1px solid var(--border);
  color: var(--text); vertical-align: middle; max-width: 320px;
}
table.dt tbody tr { transition: background .12s; }
table.dt tbody tr:hover { background: var(--hover); }
table.dt tbody tr:last-child td { border-bottom: none; }
table.dt td .sub { display: block; font-size: 11px; color: var(--text-3); margin-top: 1px; }
table.dt td.strong { font-weight: 550; }
table.dt td.mono { font-family: "SF Mono", Consolas, "Courier New", monospace; font-size: 12px; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 行内操作 */
.row-actions { display: flex; gap: 2px; align-items: center; white-space: nowrap; }

/* =========================================================
   状态标签
   ========================================================= */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 9px; border-radius: var(--tag-radius);
  font-size: 12px; font-weight: var(--tag-weight); white-space: nowrap; line-height: 1;
}
.tag-green  { background: var(--primary-50); color: var(--primary-700); }
.tag-red    { background: var(--danger-bg); color: #C2373C; }
.tag-orange { background: var(--warning-bg); color: #AE600F; }
.tag-blue   { background: var(--info-bg); color: #2264D1; }
.tag-purple { background: var(--purple-bg); color: #6141E8; }
.tag-cyan   { background: var(--cyan-bg); color: #0B7C8A; }
.tag-gray   { background: var(--soft); color: var(--text-2); }
.tag-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* =========================================================
   角色选择器（用户管理）
   ========================================================= */
.role-picker {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--soft); max-height: 220px; overflow: auto;
}
.role-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); font-size: 13px; color: var(--text); cursor: pointer;
  transition: all .15s; user-select: none;
}
.role-chip:hover { border-color: var(--primary-400); }
.role-chip.on { background: var(--primary-50); border-color: var(--primary); color: var(--primary-700); }
.role-chip input { display: none; }
.role-chip .admin-mark {
  font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 4px;
  background: var(--info-bg); color: #2264D1; font-weight: 600;
}

/* =========================================================
   分页
   ========================================================= */
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.pager-info { font-size: 12px; color: var(--text-3); }
.pager-btns { display: flex; align-items: center; gap: 4px; }
.pager-btn {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: #fff; color: var(--text-2); font-size: 12px; cursor: pointer;
  transition: all .13s; font-family: inherit;
}
.pager-btn:hover { border-color: var(--primary); color: var(--primary-600); }
.pager-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.pager-btn:disabled { opacity: .45; cursor: not-allowed; }
.pager-size { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }

/* =========================================================
   空状态 / 加载
   ========================================================= */
.empty {
  padding: 54px 20px; text-align: center; color: var(--text-3);
}
.empty .empty-img {
  width: 76px; height: 76px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--primary-50); display: flex; align-items: center; justify-content: center;
}
.empty .empty-text { font-size: 13px; }
.empty .empty-sub { font-size: 12px; margin-top: 4px; color: var(--text-3); }

.spinner {
  width: 18px; height: 18px; border: 2px solid var(--primary-100);
  border-top-color: var(--primary); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block;
}
.spinner.lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.loading-box { padding: 46px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; }

/* =========================================================
   弹窗
   ========================================================= */
.modal-mask {
  position: fixed; inset: 0; background: rgba(15, 35, 30, .42);
  display: none; align-items: center; justify-content: center; z-index: 1000;
  padding: 20px; backdrop-filter: blur(2px);
}
.modal-mask.open { display: flex; }
.modal {
  background: #fff; border-radius: var(--radius); width: 560px; max-width: 100%;
  max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-pop); animation: modalIn .18s ease-out;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--border);
}
.modal-title { font-size: 15px; font-weight: 600; }
.modal-close {
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  border-radius: 6px; color: var(--text-3); font-size: 16px; line-height: 1;
}
.modal-close:hover { background: var(--soft); color: var(--text); }
.modal-body { padding: 20px; overflow: auto; flex: 1; }
.modal-foot {
  padding: 13px 20px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* =========================================================
   消息提示
   ========================================================= */
.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  padding: 10px 18px; border-radius: 10px; font-size: 13px; color: #fff;
  background: #29372F; box-shadow: 0 8px 26px rgba(18, 42, 36, .22);
  animation: toastIn .2s ease-out; display: flex; align-items: center; gap: 8px; max-width: 70vw;
}
.toast.success { background: var(--primary-600); }
.toast.error { background: var(--danger); }
.toast.warn { background: var(--warning); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

/* =========================================================
   工具类
   ========================================================= */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.mt-6 { margin-top: 6px; } .mt-10 { margin-top: 10px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.mb-0 { margin-bottom: 0; } .mb-10 { margin-bottom: 10px; } .mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; } .nowrap { white-space: nowrap; }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }
.text-danger { color: var(--danger); } .text-primary { color: var(--primary-600); }
.text-success { color: var(--primary-600); }
.fs-12 { font-size: 12px; } .fs-16 { font-size: 16px; } .fs-18 { font-size: 18px; }
.fw-600 { font-weight: 600; }
.hidden { display: none !important; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.center { text-align: center; }

/* 双栏图表区 */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chart-box { height: 300px; width: 100%; }

/* 详情行 */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; }
.detail-item { display: flex; flex-direction: column; gap: 3px; }
.detail-label { font-size: 12px; color: var(--text-3); }
.detail-value { font-size: 13px; color: var(--text); }

/* 步骤/流程指示 */
.steps { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 12px; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--soft); color: var(--text-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.step.done .dot { background: var(--primary); color: #fff; }
.step.done { color: var(--primary-700); }
.step-line { width: 34px; height: 1px; background: var(--border-strong); margin: 0 10px; }

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1100px) {
  .chart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --content-pad: 12px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-actions { margin-left: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: 21px; }
  table.dt th, table.dt td { padding: 8px 9px; }
}

/* 打印 */
@media print {
  body { background: #fff; }
  .no-print, .filter-bar, .pager, .page-actions { display: none !important; }
}


/* =========================================================
   自动生成：10 套扩展主题（ocean/forest/rose/violet/gold/sky/bamboo/coral/slate/lavender）
   ========================================================= */

body[data-theme="ocean"] {
  /* 海洋蓝 · 深蓝侧栏配浅蓝灰内容区，直角硬朗商务风 */
  --primary: #2E6BE6;
  --primary-600: #2456BE;
  --primary-700: #1C4399;
  --primary-50: #EDF3FE;
  --primary-100: #D9E6FD;
  --bg: #F2F5FA;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --hover: #F6F8FB;
  --text: #1A2740;
  --text-2: #4A5870;
  --text-3: #8A96AD;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-xs: 2px;
  --shadow-pop: 0 8px 24px rgba(22, 50, 92, 0.14);
  --shadow-card: 0 2px 6px #2E6BE626, 0 12px 30px #2E6BE640, 0 30px 60px #2E6BE640;
  --chrome: #16325C;
  --chrome-border: #0F2440;
  --chrome-fg: #FFFFFF;
  --chrome-muted: #A8B8CE;
  --chrome-hover: #1D3F72;
  --nav-fg: #C7D3E4;
  --nav-active-fg: #FFFFFF;
  --nav-hover-bg: #1D3F72;
  --nav-active-bg: #2E6BE6;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #2E6BE6;
  --nav-dot: #4C8DFF;
  --thead-bg: #16325C;
  --scroll-thumb: #C3CDDB;
  --soft: #EDF2F9;
  --btn-radius: 4px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #2E6BE645, 0 2px 5px #2E6BE630;
  --btn-primary-bg: linear-gradient(135deg, #2E6BE6, #1E50C0);
  --btn-primary-bg-hover: linear-gradient(135deg, #2456BE, #163C9E);
  --btn-primary-fg: #FFFFFF;
  --card-radius: 4px;
  --card-border-w: 1px;
  --card-border-c: #E2E8F0;
  --card-accent: #2E6BE6;
  --input-radius: 4px;
  --input-border: #CBD5E1;
  --tag-radius: 3px;
  --tag-weight: 600;
  --thead-fg: #FFFFFF;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 0;
  --thead-border-c: #16325C;
}

body[data-theme="forest"] {
  /* 森屿绿 · 深绿侧栏配米绿底，大圆角胶囊圆润自然风 */
  --primary: #1E7A5A;
  --primary-600: #17664B;
  --primary-700: #12523C;
  --primary-50: #E9F4EF;
  --primary-100: #D4E8DF;
  --bg: #F1F5F0;
  --card: #FFFFFF;
  --border: #E3EAE3;
  --border-strong: #C7D6C8;
  --hover: #F4F8F3;
  --text: #1E2B24;
  --text-2: #4A5A50;
  --text-3: #8A9A8F;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-pop: 0 12px 28px rgba(18, 63, 50, 0.16);
  --shadow-card: 0 2px 6px #1E7A5A26, 0 12px 30px #1E7A5A40, 0 30px 60px #1E7A5A40;
  --chrome: #123F32;
  --chrome-border: #0B2E24;
  --chrome-fg: #FFFFFF;
  --chrome-muted: #A6BEB4;
  --chrome-hover: #185245;
  --nav-fg: #C3D6CE;
  --nav-active-fg: #FFFFFF;
  --nav-hover-bg: #185245;
  --nav-active-bg: #1E7A5A;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #1E7A5A;
  --nav-dot: #34C58A;
  --thead-bg: #E4F0E9;
  --scroll-thumb: #C5D4CB;
  --soft: #E9F0EA;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #1E7A5A45, 0 2px 5px #1E7A5A30;
  --btn-primary-bg: linear-gradient(135deg, #1E7A5A, #15604A);
  --btn-primary-bg-hover: linear-gradient(135deg, #17664B, #0F4F3C);
  --btn-primary-fg: #FFFFFF;
  --card-radius: 18px;
  --card-border-w: 1px;
  --card-border-c: #E3EAE3;
  --card-accent: #1E7A5A;
  --input-radius: 12px;
  --input-border: #C7D6C8;
  --tag-radius: 999px;
  --tag-weight: 600;
  --thead-fg: #1E2B24;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #D5E3DA;
}

body[data-theme="rose"] {
  /* 玫瑰粉 · 玫红主色配粉白底，白卡片柔和阴影，圆角轻盈 */
  --primary: #D9447A;
  --primary-600: #C13570;
  --primary-700: #A82B5C;
  --primary-50: #FDF0F5;
  --primary-100: #F8DCE7;
  --bg: #FBF3F6;
  --card: #FFFFFF;
  --border: #F0E0E8;
  --border-strong: #E4CFD8;
  --hover: #F7EBF0;
  --text: #3A2230;
  --text-2: #6B5560;
  --text-3: #9C8A93;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-pop: 0 8px 24px rgba(217, 68, 122, 0.16);
  --shadow-card: 0 2px 6px #D9447A26, 0 12px 30px #D9447A40, 0 30px 60px #D9447A40;
  --chrome: #FFFFFF;
  --chrome-border: #F0E0E8;
  --chrome-fg: #3A2230;
  --chrome-muted: #9C8A93;
  --chrome-hover: #F7EBF0;
  --nav-fg: #6B5560;
  --nav-active-fg: #D9447A;
  --nav-hover-bg: #F7EBF0;
  --nav-active-bg: #FDF0F5;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #D9447A;
  --nav-dot: #D9447A;
  --thead-bg: #FBEDF3;
  --scroll-thumb: #E4CFD8;
  --soft: #FBF3F6;
  --btn-radius: 10px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #D9447A45, 0 2px 5px #D9447A30;
  --btn-primary-bg: #D9447A;
  --btn-primary-bg-hover: #C13570;
  --btn-primary-fg: #FFFFFF;
  --card-radius: 14px;
  --card-border-w: 1px;
  --card-border-c: #FFFFFF;
  --input-radius: 10px;
  --input-border: #F0E0E8;
  --tag-radius: 999px;
  --tag-weight: 600;
  --thead-fg: #6B5560;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #F0E0E8;
}

body[data-theme="violet"] {
  /* 紫罗兰 · 紫色主色配浅紫底，卡片顶部紫条，渐变主按钮，圆角利落 */
  --primary: #7C4DFF;
  --primary-600: #6B3DF0;
  --primary-700: #5B32CC;
  --primary-50: #F1EDFE;
  --primary-100: #E3DCFD;
  --bg: #F6F4FD;
  --card: #FFFFFF;
  --border: #EAE6F8;
  --border-strong: #DAD3F0;
  --hover: #F0ECFC;
  --text: #2A2150;
  --text-2: #5E5478;
  --text-3: #9489AC;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-pop: 0 8px 24px rgba(124, 77, 255, 0.18);
  --shadow-card: 0 2px 6px #7C4DFF26, 0 12px 30px #7C4DFF40, 0 30px 60px #7C4DFF40;
  --chrome: #FFFFFF;
  --chrome-border: #EAE6F8;
  --chrome-fg: #2A2150;
  --chrome-muted: #9489AC;
  --chrome-hover: #F0ECFC;
  --nav-fg: #5E5478;
  --nav-active-fg: #7C4DFF;
  --nav-hover-bg: #F0ECFC;
  --nav-active-bg: #F1EDFE;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #7C4DFF;
  --nav-dot: #7C4DFF;
  --thead-bg: #F1EDFE;
  --scroll-thumb: #DAD3F0;
  --soft: #F6F4FD;
  --btn-radius: 8px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #7C4DFF45, 0 2px 5px #7C4DFF30;
  --btn-primary-bg: linear-gradient(135deg, #7C4DFF 0%, #9C6BFF 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #6B3DF0 0%, #8A55F7 100%);
  --btn-primary-fg: #FFFFFF;
  --card-radius: 12px;
  --card-border-w: 1px;
  --card-border-c: #EAE6F8;
  --card-accent: #7C4DFF;
  --input-radius: 8px;
  --input-border: #EAE6F8;
  --tag-radius: 6px;
  --tag-weight: 600;
  --thead-fg: #5E5478;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #EAE6F8;
}

body[data-theme="gold"] {
  /* 鎏金黑金 · 近黑框架衬金色点缀，浅灰底与直角工业感 */
  --primary: #C9A227;
  --primary-600: #B08D1F;
  --primary-700: #967716;
  --primary-50: #FBF6E6;
  --primary-100: #F3E7C2;
  --bg: #F4F4F5;
  --card: #FFFFFF;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;
  --hover: #F0F0F1;
  --text: #1B1B1F;
  --text-2: #52525B;
  --text-3: #A1A1AA;
  --radius: 2px;
  --radius-sm: 2px;
  --radius-xs: 2px;
  --shadow-pop: 0 8px 24px rgba(27, 27, 31, 0.18);
  --shadow-card: 0 2px 6px #C9A22726, 0 12px 30px #C9A22740, 0 30px 60px #C9A22740;
  --chrome: #1B1B1F;
  --chrome-border: #2E2E33;
  --chrome-fg: #E9C865;
  --chrome-muted: #8E8E96;
  --chrome-hover: #26262B;
  --nav-fg: #C7C7CD;
  --nav-active-fg: #1B1B1F;
  --nav-hover-bg: #26262B;
  --nav-active-bg: #C9A227;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #C9A227;
  --nav-dot: #C9A227;
  --thead-bg: #1B1B1F;
  --scroll-thumb: #C9C9CE;
  --soft: #F4F4F5;
  --btn-radius: 2px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #C9A22745, 0 2px 5px #C9A22730;
  --btn-primary-bg: linear-gradient(180deg, #D6AF2C, #C9A227);
  --btn-primary-bg-hover: #B08D1F;
  --btn-primary-fg: #1B1B1F;
  --card-radius: 2px;
  --card-border-w: 1px;
  --card-border-c: #E4E4E7;
  --card-accent: #C9A227;
  --input-radius: 2px;
  --input-border: #D4D4D8;
  --tag-radius: 2px;
  --tag-weight: 600;
  --thead-fg: #FFFFFF;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #2E2E33;
}

body[data-theme="sky"] {
  /* 天空蓝 · 白框架配极浅蓝底，超大圆角与胶囊按钮的轻盈感 */
  --primary: #0EA5E9;
  --primary-600: #0284C7;
  --primary-700: #0369A1;
  --primary-50: #E8F6FE;
  --primary-100: #C9ECFD;
  --bg: #F0F7FC;
  --card: #FFFFFF;
  --border: #E1EEF7;
  --border-strong: #C6DEEF;
  --hover: #E8F4FB;
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #94A3B8;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 10px;
  --shadow-pop: 0 12px 32px rgba(14, 165, 233, 0.16);
  --shadow-card: 0 2px 6px #0EA5E926, 0 12px 30px #0EA5E940, 0 30px 60px #0EA5E940;
  --chrome: #FFFFFF;
  --chrome-border: #E1EEF7;
  --chrome-fg: #0F172A;
  --chrome-muted: #64748B;
  --chrome-hover: #F0F7FC;
  --nav-fg: #475569;
  --nav-active-fg: #0284C7;
  --nav-hover-bg: #E8F4FB;
  --nav-active-bg: #E0F2FE;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #0EA5E9;
  --nav-dot: #0EA5E9;
  --thead-bg: #E0F2FE;
  --scroll-thumb: #C6DEEF;
  --soft: #F0F7FC;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #0EA5E945, 0 2px 5px #0EA5E930;
  --btn-primary-bg: linear-gradient(180deg, #38BDF8, #0EA5E9);
  --btn-primary-bg-hover: #0284C7;
  --btn-primary-fg: #FFFFFF;
  --card-radius: 20px;
  --card-border-w: 1px;
  --card-border-c: #E1EEF7;
  --card-accent: #0EA5E9;
  --input-radius: 12px;
  --input-border: #C6DEEF;
  --tag-radius: 999px;
  --tag-weight: 600;
  --thead-fg: #075985;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #C6DEEF;
}

body[data-theme="bamboo"] {
  /* 竹韵 · 竹绿主色配白色框架与浅绿底，方角极简，无卡片阴影、细描边、纯色主按钮 */
  --primary: #5B8C5A;
  --primary-600: #4C774B;
  --primary-700: #3E623D;
  --primary-50: #EDF3EC;
  --primary-100: #DBE7D9;
  --bg: #F3F6F1;
  --card: #FFFFFF;
  --border: #E1E8DF;
  --border-strong: #C5D0C2;
  --hover: #EDF3EC;
  --text: #283628;
  --text-2: #5A6859;
  --text-3: #8FA08D;
  --radius: 4px;
  --radius-sm: 2px;
  --radius-xs: 2px;
  --shadow-pop: 0 4px 16px rgba(40, 54, 40, 0.12);
  --shadow-card: 0 2px 6px #5B8C5A26, 0 12px 30px #5B8C5A40, 0 30px 60px #5B8C5A40;
  --chrome: #FFFFFF;
  --chrome-border: #E6ECE4;
  --chrome-fg: #283628;
  --chrome-muted: #8FA08D;
  --chrome-hover: #F0F4EE;
  --nav-fg: #5A6859;
  --nav-active-fg: #3E623D;
  --nav-hover-bg: #EDF3EC;
  --nav-active-bg: #E3EDE2;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #5B8C5A;
  --nav-dot: #5B8C5A;
  --thead-bg: #FAFCF9;
  --scroll-thumb: #C5D0C2;
  --soft: #EFF4ED;
  --btn-radius: 4px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #5B8C5A45, 0 2px 5px #5B8C5A30;
  --btn-primary-bg: #5B8C5A;
  --btn-primary-bg-hover: #4C774B;
  --btn-primary-fg: #FFFFFF;
  --card-radius: 4px;
  --card-border-w: 1px;
  --card-border-c: #E1E8DF;
  --card-accent: #5B8C5A;
  --input-radius: 4px;
  --input-border: #D6DFD3;
  --tag-radius: 4px;
  --tag-weight: 600;
  --thead-fg: #4A5749;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 2px;
  --thead-border-c: #B7C5B4;
}

body[data-theme="coral"] {
  /* 珊瑚橙红 · 珊瑚主色配白色框架与暖底，大圆角白卡柔和阴影，渐变主按钮、浅橙表头 */
  --primary: #F0614A;
  --primary-600: #E04E36;
  --primary-700: #C93D27;
  --primary-50: #FDEAE6;
  --primary-100: #FBD5CD;
  --bg: #FFF5F2;
  --card: #FFFFFF;
  --border: #F4E2DD;
  --border-strong: #EACBC3;
  --hover: #FDECE8;
  --text: #3A2B27;
  --text-2: #6E5B56;
  --text-3: #A89590;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --shadow-pop: 0 12px 32px rgba(240, 97, 74, 0.16);
  --shadow-card: 0 2px 6px #F0614A26, 0 12px 30px #F0614A40, 0 30px 60px #F0614A40;
  --chrome: #FFFFFF;
  --chrome-border: #F6E4DF;
  --chrome-fg: #3A2B27;
  --chrome-muted: #A89590;
  --chrome-hover: #FDECE8;
  --nav-fg: #6E5B56;
  --nav-active-fg: #C93D27;
  --nav-hover-bg: #FDECE8;
  --nav-active-bg: #FBD5CD;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #F0614A;
  --nav-dot: #F0614A;
  --thead-bg: #FDEAE6;
  --scroll-thumb: #EACBC3;
  --soft: #FDEEE9;
  --btn-radius: 12px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #F0614A45, 0 2px 5px #F0614A30;
  --btn-primary-bg: linear-gradient(135deg, #F0614A 0%, #E8513A 100%);
  --btn-primary-bg-hover: linear-gradient(135deg, #E04E36 0%, #D8452F 100%);
  --btn-primary-fg: #FFFFFF;
  --card-radius: 16px;
  --card-border-w: 1px;
  --card-border-c: #F4E2DD;
  --card-accent: #F0614A;
  --input-radius: 12px;
  --input-border: #EFD8D2;
  --tag-radius: 999px;
  --tag-weight: 600;
  --thead-fg: #6E5B56;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #F2DDD6;
}

body[data-theme="slate"] {
  /* 商务石板 · 蓝灰主色配白色框架，直角硬朗的商务风 */
  --primary: #475569;
  --primary-600: #3B4757;
  --primary-700: #334155;
  --primary-50: #F8FAFC;
  --primary-100: #E2E8F0;
  --bg: #F3F5F8;
  --card: #FFFFFF;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --hover: #F1F5F9;
  --text: #1E293B;
  --text-2: #475569;
  --text-3: #94A3B8;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-xs: 2px;
  --shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.10);
  --shadow-card: 0 2px 6px #47556926, 0 12px 30px #47556940, 0 30px 60px #47556940;
  --chrome: #FFFFFF;
  --chrome-border: #E2E8F0;
  --chrome-fg: #1E293B;
  --chrome-muted: #94A3B8;
  --chrome-hover: #F1F5F9;
  --nav-fg: #475569;
  --nav-active-fg: #1E293B;
  --nav-hover-bg: #F1F5F9;
  --nav-active-bg: #E2E8F0;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #475569;
  --nav-dot: #475569;
  --thead-bg: #334155;
  --scroll-thumb: #CBD5E1;
  --soft: #F1F5F9;
  --btn-radius: 4px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #47556945, 0 2px 5px #47556930;
  --btn-primary-bg: #475569;
  --btn-primary-bg-hover: #334155;
  --btn-primary-fg: #FFFFFF;
  --card-radius: 4px;
  --card-border-w: 1px;
  --card-border-c: #E2E8F0;
  --card-accent: #475569;
  --input-radius: 4px;
  --input-border: #CBD5E1;
  --tag-radius: 4px;
  --tag-weight: 500;
  --thead-fg: #FFFFFF;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 0px;
  --thead-border-c: transparent;
}

body[data-theme="lavender"] {
  /* 薰衣草 · 淡紫主色配白色框架，圆润胶囊的柔和风 */
  --primary: #8B7CF6;
  --primary-600: #7C6AF0;
  --primary-700: #6B58E0;
  --primary-50: #F3F0FF;
  --primary-100: #E9E4FF;
  --bg: #F7F5FD;
  --card: #FFFFFF;
  --border: #ECE8FA;
  --border-strong: #DCD5F5;
  --hover: #F3F0FF;
  --text: #2D2547;
  --text-2: #6B6286;
  --text-3: #A79FC4;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-pop: 0 12px 32px rgba(139, 124, 246, 0.18);
  --shadow-card: 0 2px 6px #8B7CF626, 0 12px 30px #8B7CF640, 0 30px 60px #8B7CF640;
  --chrome: #FFFFFF;
  --chrome-border: #ECE8FA;
  --chrome-fg: #2D2547;
  --chrome-muted: #A79FC4;
  --chrome-hover: #F7F5FD;
  --nav-fg: #6B6286;
  --nav-active-fg: #6B58E0;
  --nav-hover-bg: #F3F0FF;
  --nav-active-bg: #E9E4FF;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #8B7CF6;
  --nav-dot: #8B7CF6;
  --thead-bg: #ECE8FA;
  --scroll-thumb: #DCD5F5;
  --soft: #F3F0FF;
  --btn-radius: 999px;
  --btn-weight: 600;
  --btn-shadow: 0 6px 16px #8B7CF645, 0 2px 5px #8B7CF630;
  --btn-primary-bg: #8B7CF6;
  --btn-primary-bg-hover: #7C6AF0;
  --btn-primary-fg: #FFFFFF;
  --card-radius: 16px;
  --card-border-w: 1px;
  --card-border-c: #ECE8FA;
  --card-accent: #8B7CF6;
  --input-radius: 12px;
  --input-border: #DCD5F5;
  --tag-radius: 999px;
  --tag-weight: 500;
  --thead-fg: #463A8F;
  --thead-weight: 600;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #DCD5F5;
}

body[data-theme="youdao"] {
  /* 有道云 · 参考有道云笔记：灰白框架 + 有道绿点缀，细描边、小圆角、无阴影的文档工具风 */
  --primary: #00A046;
  --primary-600: #008C3D;
  --primary-700: #007333;
  --primary-50: #EAF7EF;
  --primary-100: #D3EEDD;

  --bg: #F5F5F5;
  --card: #FFFFFF;
  --border: #EBEBEB;
  --border-strong: #DCDCDC;
  --hover: #F7F7F7;

  --text: #333333;
  --text-2: #666666;
  --text-3: #999999;

  --danger: #E64340;  --danger-bg: #FDECEC;
  --warning: #E08A00; --warning-bg: #FDF6E7;
  --info: #0084FF;    --info-bg: #EAF4FF;
  --purple: #7C5CFC;  --purple-bg: #F3F0FE;
  --cyan: #0E9BAC;    --cyan-bg: #EAF7F9;

  --radius: 4px;
  --radius-sm: 3px;
  --radius-xs: 2px;
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);

  --chrome: #FAFAFA;
  --chrome-border: #EBEBEB;
  --chrome-fg: #333333;
  --chrome-muted: #BBBBBB;
  --chrome-hover: #F0F0F0;
  --nav-fg: #555555;
  --nav-active-fg: #008C3D;
  --nav-hover-bg: #F0F0F0;
  --nav-active-bg: #E9F6EE;
  --nav-badge-fg: #FFFFFF;
  --nav-badge-bg: #00A046;
  --nav-dot: #CFCFCF;
  --thead-bg: #FAFAFA;
  --scroll-thumb: #D0D0D0;
  --soft: #F2F2F2;

  --btn-radius: 3px;
  --btn-weight: 500;
  --btn-shadow: none;
  --btn-primary-bg: #00A046;
  --btn-primary-bg-hover: #008C3D;
  --btn-primary-fg: #FFFFFF;

  --card-radius: 4px;
  --card-border-w: 1px;
  --card-border-c: #EBEBEB;
  --card-accent: transparent;
  --input-radius: 3px;
  --input-border: #DCDCDC;

  --tag-radius: 3px;
  --tag-weight: 500;

  --thead-fg: #666666;
  --thead-weight: 500;
  --thead-case: none;
  --thead-border-w: 1px;
  --thead-border-c: #EBEBEB;
}

/* =========================================================
   紧凑模式（Compact）：<body class="is-compact">
   只压留白与行高，不改配色与结构；用于右面板 800~900px 宽时一屏多看几行
   ========================================================= */
body.is-compact .page { padding: 12px 14px; }
body.is-compact .page-head { margin-bottom: 8px; gap: 8px; }
body.is-compact .page-title { font-size: 16px; gap: 8px; }
body.is-compact .page-title::before { height: 15px; }
body.is-compact .page-sub { font-size: 11px; margin-top: 0; }
body.is-compact .page-actions { gap: 6px; }
body.is-compact .page-actions .btn { height: 28px; padding: 0 11px; font-size: 12px; }

body.is-compact .filter-bar { padding: 8px 12px; margin-bottom: 8px; gap: 10px; }
body.is-compact .filter-item { gap: 3px; }
body.is-compact .filter-label { font-size: 11px; }
body.is-compact .filter-bar .input,
body.is-compact .filter-bar .select { height: 28px; font-size: 12px; }
body.is-compact .filter-actions { gap: 6px; }
body.is-compact .filter-actions .btn { height: 28px; padding: 0 12px; font-size: 12px; }

body.is-compact .card { margin-bottom: 10px; }
body.is-compact .card-head { padding: 8px 12px; }
body.is-compact .card-title { font-size: 13px; }
body.is-compact .card-tools { gap: 6px; }

/* KPI 统计卡：26px 数字 + 16px 内距在小屏太占地方 */
body.is-compact .stat-grid { gap: 8px; margin-bottom: 8px; }
body.is-compact .stat-card { padding: 10px 12px; }
body.is-compact .stat-label { font-size: 11px; margin-bottom: 4px; }
body.is-compact .stat-value { font-size: 20px; }
body.is-compact .stat-trend { font-size: 11px; margin-top: 3px; }
body.is-compact .stat-card::after { width: 58px; height: 58px; right: -14px; top: -14px; }

body.is-compact table.dt { font-size: 12px; }
body.is-compact table.dt th { padding: 6px 8px; font-size: 11.5px; }
body.is-compact table.dt td { padding: 4px 8px; }
body.is-compact table.dt .tag { height: 18px; padding: 0 7px; font-size: 11px; }

body.is-compact .pager { padding: 8px 12px; }
body.is-compact .pager-btn { min-width: 26px; height: 26px; font-size: 11.5px; }
body.is-compact .pager .select { height: 26px; font-size: 11.5px; }