/* ============================================================
   明德仓 · 统一布局壳（shell）样式
   区域：顶栏（左：常用功能按钮 / 右：用户名 + 登录登出图标）
        左侧（分组卡片式导航，可收起）
        右侧（工作区，由各页面自行挂载）
   风格：与数据大屏一致的深色玻璃（深海军蓝 + 青/紫辉光 + 细网格）
   注意：所有类名统一 md- 前缀，避免与各页面的业务样式冲突
   ============================================================ */

:root {
  --md-bg: #04070f;
  --md-bg2: #061020;
  --md-panel: rgba(13, 26, 45, .72);
  /* 实底下拉面板：浮层必须挡住底下的按钮/卡片，半透明会让文字糊成一片 */
  --md-pop-solid: #0b1524;
  --md-panel-2: rgba(9, 18, 32, .55);
  --md-line: rgba(96, 180, 255, .18);
  --md-line-soft: rgba(96, 180, 255, .12);
  --md-cyan: #4fd1ff;
  --md-cyan-2: #7ee7ff;
  --md-violet: #8b7bff;
  --md-text: #dbeafe;
  --md-text-2: #a8c2da;
  --md-muted: #7f9bbd;
  --md-head: #eaf6ff;          /* 标题 / 强调文字（浅色主题下转深色） */
  --md-active: #f2fbff;        /* 激活态文字 */
  --md-item: #9db6cf;          /* 导航项文字（非激活） */
  --md-item-hover: #d9f2ff;    /* 导航项 hover 文字 */
  --md-icon: #74a6d8;          /* 图标色 */
  --md-em: #cbbfff;            /* 紫色标签文字 */
  --md-placeholder: #5f7f9e;   /* 输入框占位 */
  --md-accent: #4fd1ff;        /* 主色（按钮 / 激活态 / 辉光） */
  --md-accent-2: #6f8bff;
  --md-accent-glow: rgba(79, 209, 255, .2);
  --md-accent-line: rgba(126, 231, 255, .6);
  --md-accent-soft: rgba(79, 209, 255, .1);
  --md-ok: #37d67a;
  --md-warn: #ffb020;

  /* ---- 语义补充色：组件一律引用这里的 token，浅色主题块内重新赋值 ---- */
  --md-ink: #06111f;                    /* 主色按钮 / 徽标上的文字 */
  --md-work-bg: #050a12;                /* 工作区底色 */
  --md-work-grid: rgba(79, 209, 255, .045);
  --md-work-glow-1: rgba(31, 111, 235, .22);
  --md-work-glow-2: rgba(124, 58, 237, .18);
  --md-logo-a: #7ee7ff;
  --md-logo-b: #8b7bff;
  --md-shiny-a: #7ee7ff;
  --md-shiny-b: #c3b5ff;
  --md-ghost-bg: rgba(255, 255, 255, .04);
  --md-top-bg: linear-gradient(180deg, rgba(10, 22, 38, .92), rgba(6, 14, 25, .88));
  --md-top-shadow: rgba(0, 0, 0, .35);
  --md-chip-bg: rgba(10, 26, 46, .6);   /* 顶栏胶囊按钮 / 汉堡键 */
  --md-input-bg: rgba(6, 14, 25, .85);
  --md-ok-text: #4be08c;
  --md-ok-bg: rgba(55, 214, 122, .1);
  --md-ok-line: rgba(55, 214, 122, .3);
  --md-err-text: #ff8f8f;
  --md-err-bg: rgba(229, 83, 83, .12);
  --md-err-line: rgba(229, 83, 83, .32);
  --md-warn-text: #ffcf7a;
}

/* ============================================================
   页面级语义色板（--pg-*）
   业务页面只引用这套 token，不在各自 <style> 里写死颜色：
   同一个 token 在深色块里是深色值，在浅色主题块里重新赋值，
   改一处全站生效，也不会出现「浅底 + 深卡片 + 浅灰字」。
   ============================================================ */
:root {
  /* 表面 */
  --pg-page: #04070f;                   /* 页面最底层 */
  --pg-card-bg: linear-gradient(180deg, rgba(13, 26, 45, .72), rgba(9, 18, 32, .6));
  --pg-pop-bg: linear-gradient(180deg, rgba(16, 30, 50, .98), rgba(9, 17, 29, .98));
  /* 实底弹层：canvas 类组件（ECharts tooltip 等）不吃渐变，必须给纯色 */
  --pg-pop-solid: #0a1524;
  --pg-th-bg: #0b1a2d;                  /* 表头 / 实底小方块 */
  --pg-inner-bg: #04121f;               /* 更深的实底（页脚、代码块） */
  --pg-tint-1: rgba(79, 209, 255, .05); /* 极淡底色（hover） */
  --pg-tint-2: rgba(79, 209, 255, .09); /* 淡底色（选中行、内嵌块） */
  --pg-tint-3: rgba(79, 209, 255, .14); /* 再深一档（强调块） */
  --pg-mask: rgba(0, 0, 0, .45);        /* 弹窗遮罩 */
  --pg-shadow: rgba(0, 0, 0, .45);      /* 卡片投影 */
  /* 描边 */
  --pg-line: rgba(96, 180, 255, .12);   /* 细线 */
  --pg-line-2: rgba(96, 180, 255, .2);  /* 常规边框 */
  --pg-line-3: rgba(96, 180, 255, .32); /* 强调边框 */
  /* 文字 */
  --pg-text: #b6cbdd;                   /* 正文 */
  --pg-strong: #dbeafe;                 /* 强调 / 人名 / 数值 */
  --pg-title: #eaf6ff;                  /* 标题 */
  --pg-num: #cfe6f8;                    /* 数字列 */
  --pg-muted: #7f9bbd;                  /* 次要说明 */
  --pg-muted-2: #6f8cab;                /* 更弱（提示、占位） */
  --pg-label: #9fd8ff;                  /* 表头 / 小标签 */
  /* 主色 */
  --pg-accent: #4fd1ff;
  --pg-accent-2: #7ee7ff;
  --pg-ink: #06263f;                    /* 主色上的文字 */
  /* 状态 */
  --pg-ok: #7ee7b0;
  --pg-ok-bg: rgba(55, 214, 122, .14);
  --pg-ok-line: rgba(55, 214, 122, .34);
  --pg-warn: #ffd166;
  --pg-warn-bg: rgba(255, 209, 102, .14);
  --pg-warn-line: rgba(255, 209, 102, .34);
  --pg-danger: #ff8f8f;
  --pg-danger-bg: rgba(229, 83, 83, .1);
  --pg-danger-line: rgba(229, 83, 83, .32);
}

.md-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;               /* 页面级不出现横向滚动，滚动交给工作区 */
  background: var(--md-bg);
  color: var(--md-text);
  font-family: "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif;
}
.md-app *,
.md-app *::before,
.md-app *::after { box-sizing: border-box; }

/* ---------------- 顶栏 ---------------- */
.md-top {
  flex: none;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px 0 12px;
  background: var(--md-top-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--md-line-soft);
  box-shadow: 0 1px 0 var(--md-line-soft), 0 10px 30px var(--md-top-shadow);
  position: relative;
  z-index: 60;
}

/* 左上：常用功能按钮（可自定义） */
.md-quick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.md-quick::-webkit-scrollbar { display: none; }

.md-qbtn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--md-line-soft);
  background: var(--md-chip-bg);
  color: var(--md-text-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .16s, background .16s, color .16s, border-color .16s, box-shadow .16s;
}
.md-qbtn svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.md-qbtn:hover {
  background: rgba(79, 209, 255, .14);
  border-color: rgba(79, 209, 255, .5);
  color: var(--md-active);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--md-accent-glow);
}
.md-qbtn.on {
  background: linear-gradient(135deg, rgba(79, 209, 255, .26), rgba(139, 123, 255, .24));
  border-color: rgba(126, 231, 255, .55);
  color: var(--md-active);
  box-shadow: 0 0 18px var(--md-accent-glow);
}

/* 右上：用户名(手机号) + 登录/退出图标 */
.md-user {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 12px;
  border-left: 1px solid var(--md-line-soft);
}
.md-uname {
  font-size: 13px;
  color: var(--md-text-2);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.md-uname b { color: var(--md-head); font-weight: 600; }
.md-uname i {
  font-style: normal;
  margin-left: 4px;
  color: var(--md-muted);
  font-variant-numeric: tabular-nums;
}
.md-uname em {
  font-style: normal;
  margin-left: 8px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--md-em);
  border: 1px solid rgba(139, 123, 255, .4);
  background: rgba(139, 123, 255, .14);
  vertical-align: 1px;
}

.md-ubtn {
  width: 36px;
  height: 36px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 11px;
  border: 1px solid rgba(126, 231, 255, .28);
  background: linear-gradient(135deg, rgba(79, 209, 255, .16), rgba(139, 123, 255, .16));
  color: var(--md-head);
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, color .16s;
}
.md-ubtn svg { width: 18px; height: 18px; display: block; }
.md-ubtn:hover {
  color: var(--md-active);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--md-accent-glow);
}
.md-ubtn.out { color: #ffc9c9; border-color: rgba(255, 140, 140, .3); }

/* 移动端汉堡 */
.md-burger {
  display: none;
  width: 34px; height: 34px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--md-line-soft);
  background: var(--md-chip-bg); color: var(--md-item); cursor: pointer;
}
.md-burger svg { width: 18px; height: 18px; }

/* ---------------- 主体 ---------------- */
.md-body { flex: 1; display: flex; min-height: 0; position: relative; }

/* 左侧导航：宽度为原 238px 的 70%（≈167px） */
.md-side {
  flex: none;
  width: 167px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(8, 17, 30, .92), rgba(5, 11, 20, .94));
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--md-line-soft);
  transition: width .2s ease, transform .22s ease;
  z-index: 50;
}

.md-brand {
  flex: none;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--md-line-soft);
  overflow: hidden;
}
.md-logo {
  width: 34px; height: 34px; flex: none;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--md-logo-a), var(--md-logo-b));
  color: var(--md-ink); font-weight: 800; font-size: 16px;
  box-shadow: 0 0 22px rgba(126, 231, 255, .35);
}
.md-brand-txt { min-width: 0; }
.md-brand-txt .n { font-size: 15px; font-weight: 700; color: var(--md-head); white-space: nowrap; }

/* 品牌名下方：组织机构下拉框（全站数据隔离维度，与「团队架构」无关） */
.md-org { position: relative; margin-top: 4px; }
.md-org-btn {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--md-line);
  border-radius: 8px;
  background: var(--md-panel-2);
  color: var(--md-text-2);
  font-size: 12px; line-height: 1.4;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.md-org-btn:hover { border-color: var(--md-accent-line); color: var(--md-head); }
.md-org-btn svg { width: 13px; height: 13px; flex: none; }
.md-org-btn .t {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: left;
}
.md-org.open .md-org-btn { border-color: var(--md-accent); color: var(--md-head); }
/* 选项面板：自绘下拉，浮在侧栏之上 */
.md-org-menu {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  z-index: 60;
  max-height: 240px; overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--md-line);
  border-radius: 10px;
  background: var(--md-panel);
  box-shadow: 0 12px 28px var(--md-top-shadow);
}
.md-org.open .md-org-menu { display: block; }
.md-org-item {
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px; color: var(--md-text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.md-org-item:hover { background: var(--md-accent-soft); color: var(--md-head); }
.md-org-item.on { color: var(--md-accent); font-weight: 600; }

.md-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.md-nav::-webkit-scrollbar { width: 6px; }
.md-nav::-webkit-scrollbar-thumb { background: rgba(96, 180, 255, .22); border-radius: 3px; }

/* 独立功能项（不属于任何分组卡片，如“数据看板”） */
.md-solo { flex: 0 0 auto; }
.md-solo .md-item {
  padding: 10px 11px;
  font-weight: 700;
  color: var(--md-head);
  background: rgba(79, 209, 255, .06);
  border-color: var(--md-line-soft);
}

/* 分组卡片（玻璃） */
.md-group {
  /* flex: none —— 导航项变多时卡片保持自然高度，由 .md-nav 滚动，
     否则 flex 会压缩卡片高度并把按钮裁掉半截 */
  flex: 0 0 auto;
  position: relative;
  border: 1px solid var(--md-line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--md-panel), var(--md-panel-2));
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.md-group::before {          /* 左侧细高光，与大屏卡片同语言 */
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--md-cyan), transparent);
  opacity: .35;
}
.md-group:hover {
  border-color: rgba(96, 180, 255, .3);
  box-shadow: 0 6px 22px rgba(4, 12, 24, .5);
}

.md-group-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 11px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, rgba(126, 231, 255, .06), transparent);
}
.md-group-hd svg { width: 16px; height: 16px; flex: none; color: var(--md-icon); }
.md-group-hd .t {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--md-head);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-group-hd .c { font-size: 9px; color: var(--md-muted); transition: transform .18s; }
.md-group.closed .md-group-hd .c { transform: rotate(-90deg); }

.md-group-bd { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 8px; }
.md-group.closed .md-group-bd { display: none; }

/* 功能按钮（图标 + 文字） */
.md-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 13px;
  color: var(--md-item);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .15s;
}
.md-item svg { width: 15px; height: 15px; flex: none; opacity: .85; }
.md-item .txt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-item:hover {
  background: rgba(79, 209, 255, .1);
  border-color: rgba(79, 209, 255, .22);
  color: var(--md-item-hover);
  transform: translateX(1px);
}
.md-item.on {
  background: linear-gradient(135deg, rgba(79, 209, 255, .2), rgba(139, 123, 255, .18));
  border-color: rgba(126, 231, 255, .42);
  color: var(--md-active);
  font-weight: 600;
  box-shadow: inset 0 0 18px var(--md-accent-glow), 0 0 16px var(--md-accent-glow);
}
.md-item.on svg { opacity: 1; color: var(--md-accent-2); }
.md-item .dot {
  width: 5px; height: 5px; flex: none; border-radius: 50%;
  background: rgba(126, 231, 255, .22);
}
.md-item.on .dot { background: linear-gradient(135deg, var(--md-cyan), var(--md-violet)); box-shadow: 0 0 8px var(--md-cyan); }

/* 收起态：左侧收成图标栏 */
.md-side.mini { width: 68px; }
.md-side.mini .md-brand { padding: 0; justify-content: center; }
.md-side.mini .md-brand-txt { display: none; }
.md-side.mini .md-org-menu { display: none !important; }
.md-side.mini .md-nav { padding: 10px 8px; gap: 6px; }
.md-side.mini .md-group { border-color: transparent; background: none; }
.md-side.mini .md-group::before { display: none; }
.md-side.mini .md-group-hd { display: none; }
.md-side.mini .md-group-bd { padding: 0; gap: 4px; }
.md-side.mini .md-item {
  justify-content: center;
  padding: 9px 0;
  border-radius: 10px;
}
.md-side.mini .md-item svg { width: 18px; height: 18px; }
.md-side.mini .md-item .txt,
.md-side.mini .md-item .dot { display: none; }
.md-side.mini .md-group + .md-group { border-top: 1px solid var(--md-line-soft); padding-top: 5px; }

/* 收起/展开把手 */
.md-fold {
  flex: none;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-top: 1px solid var(--md-line-soft);
  color: var(--md-muted);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(7, 15, 27, .7);
}
.md-fold:hover { color: var(--md-accent-2); background: var(--md-accent-soft); }
.md-fold svg { width: 14px; height: 14px; }

/* 工作区：深色底 + 细网格 + 双色辉光（与大屏同源） */
.md-work {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: auto;
  color: var(--md-text);
  background-color: var(--md-work-bg);
  background-image:
    linear-gradient(var(--md-work-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--md-work-grid) 1px, transparent 1px),
    radial-gradient(1200px 620px at 12% -12%, var(--md-work-glow-1), transparent 62%),
    radial-gradient(900px 520px at 102% -6%, var(--md-work-glow-2), transparent 60%);
  background-size: 44px 44px, 44px 44px, 100% 100%, 100% 100%;
}
/* 大屏等整屏型工作区：自行管理滚动 */
.md-work.dark { overflow: hidden; background-color: var(--md-bg); background-image: none; }
.md-work::-webkit-scrollbar { width: 8px; }
.md-work::-webkit-scrollbar-thumb { background: rgba(96, 180, 255, .25); border-radius: 4px; }
.md-work::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 弹窗（登录 / 修改密码） ---------------- */
.md-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 12, .68);
  backdrop-filter: blur(4px);
}
/* 弹窗挂在 body 上（不在 .md-app 内），需要单独声明盒模型，
   否则带右侧内边距的密码框会撑出弹窗宽度 */
.md-mask *,
.md-mask *::before,
.md-mask *::after { box-sizing: border-box; }
.md-modal {
  width: 344px;
  max-width: calc(100vw - 32px);
  background: linear-gradient(180deg, rgba(16, 30, 50, .98), rgba(9, 17, 29, .98));
  border: 1px solid var(--md-line);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(126, 231, 255, .08);
  animation: mdPop .18s ease both;
}
@keyframes mdPop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.md-modal h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--md-head);
}
.md-modal .sub { font-size: 12px; color: var(--md-muted); margin-bottom: 16px; }

/* 确认弹窗：无输入框，正文可换行，比输入弹窗略宽 */
.md-modal.md-confirm { width: 400px; }
.md-modal.md-confirm .sub {
  white-space: normal;
  line-height: 1.75;
  font-size: 13px;
  color: var(--md-text);
  margin-bottom: 0;
}
.md-field { margin-bottom: 12px; position: relative; }
.md-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--md-line);
  border-radius: 9px;
  font-size: 14px;
  color: var(--md-head);
  background: var(--md-input-bg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.md-input::placeholder { color: var(--md-placeholder); }
.md-input:focus { border-color: var(--md-accent-line); box-shadow: 0 0 0 3px var(--md-accent-glow); }
/* 字段校验态：ok 绿框 / bad 红框 */
.md-input.ok { border-color: rgba(75, 224, 140, .55); }
.md-input.bad { border-color: rgba(229, 83, 83, .6); }
/* 密码框右侧留出“小眼睛”的位置 */
.md-input.has-eye { padding-right: 40px; }
/* 密码框容器（ReactBits.PasswordInput）：小眼睛绝对定位，容器必须相对定位 */
.md-pwd { position: relative; display: block; width: 100%; }

/* ---------------- 全站统一：数字输入框（ReactBits.NumberInput） ----------------
   浏览器原生 number 控件右侧的上下箭头由操作系统绘制，深浅与站内玻璃风格不搭，
   且各浏览器样式不一 → 全站隐藏原生箭头，统一改用 .md-num-step 自绘箭头。
   规则写在共享样式里，全站页面一处生效，不再由各页面各自打补丁。 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
/* 数字输入容器：相对定位，供右侧自绘箭头定位 */
.md-num {
  position: relative;
  display: inline-block;
  width: 100%;
}
/* 输入框本体仍复用 .md-input，仅为箭头留出右侧空间 */
.md-num-input { padding-right: 30px; }
/* 自绘上下箭头：与站内自绘下拉同一套字形（▴ / ▾）与主题色 */
.md-num-steps {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 3px;
  border-left: 1px solid var(--md-line-soft);
}
.md-num-step {
  width: 18px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--md-icon);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.md-num-step:hover { color: var(--md-accent); background: var(--md-accent-soft); }
.md-num-step:active { color: var(--md-active); }
.md-num-step:disabled { opacity: .4; cursor: not-allowed; }
.md-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--md-muted);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.md-eye:hover { color: var(--md-accent-2); background: var(--md-accent-soft); }
.md-eye.on { color: var(--md-accent-2); }
.md-eye svg { display: block; }
/* 字段级提示：空=灰（输入中） / ok=绿 / bad=红 */
.md-hint { min-height: 15px; margin-top: 4px; font-size: 12px; color: var(--md-muted); }
.md-hint.ok { color: var(--md-ok-text); }
.md-hint.bad { color: var(--md-err-text); }
/* 页面级提示条（登录/注册/实名等独立页面）：统一用 .md-alert + .err/.ok 状态 */
.md-alert {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--md-text-2);
  background: var(--md-ghost-bg);
  border: 1px solid var(--md-line-soft);
}
.md-alert.err { background: var(--md-err-bg); color: var(--md-err-text); border-color: var(--md-err-line); }
.md-alert.ok { background: var(--md-ok-bg); color: var(--md-ok-text); border-color: var(--md-ok-line); }
/* 只读输入框（如实名的手机号）：不可编辑但仍保持同一套外观 */
.md-input[readonly] {
  background: var(--md-accent-soft);
  color: var(--md-muted);
  cursor: not-allowed;
}
/* 字段后的对错图标（✔ / ✘）：全站统一 .md-icon + .ok/.err 状态 */
.md-icon {
  margin-left: 8px;
  font-size: 16px;
  width: 18px;
  text-align: center;
  flex: none;
}
.md-icon.ok { color: var(--md-ok-text); }
.md-icon.err { color: var(--md-err-text); }

/* ---------------- 全站统一：自绘下拉（ReactBits.Select） ----------------
   原生 <select> 的展开面板由操作系统绘制，深浅与站内玻璃风格不搭、各浏览器
   样式也不一 → 统一自绘：按钮复用 .md-input 尺寸，面板是站内浮层。
   选项列表用 <ul>（省 34 / 市 ≤21 / 区县 ≤40，无需虚拟滚动）。 */
.md-select { position: relative; }
.md-select-btn {
  display: flex; align-items: center; gap: 8px;
  text-align: left; cursor: pointer;
}
.md-select-btn[disabled] { cursor: not-allowed; opacity: .78; }
.md-select-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-select-text.is-ph { color: var(--md-placeholder); }
.md-select-arw { flex: none; font-size: 11px; color: var(--md-muted); transition: transform .15s; }
.md-select.open .md-select-arw { transform: rotate(180deg); }
.md-select-panel {
  /* 面板由 ReactBits.Select 用 portal 挂到 body，坐标由按钮位置算出（内联样式），
     故这里是 fixed；卡片里的 backdrop-filter / overflow 都挡不住它。 */
  position: fixed; z-index: 120;
  max-height: 240px; overflow: auto;
  margin: 0; padding: 4px; list-style: none;
  border: 1px solid var(--md-line); border-radius: 9px;
  /* 实底（半透明会把面板下面的按钮透出来，字和图叠在一起看不清） */
  background: var(--md-pop-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  animation: mdPop .14s ease both;
}
.md-select-item {
  padding: 8px 10px; border-radius: 6px;
  font-size: 13px; color: var(--md-text); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.md-select-item:hover { background: var(--md-accent-soft); color: var(--md-active); }
.md-select-item.on { background: var(--md-accent-soft); color: var(--md-accent); font-weight: 600; }
.md-select-item:focus-visible { outline: 2px solid var(--md-accent); outline-offset: -2px; }

.md-actions { display: flex; gap: 10px; margin-top: 16px; }
/* 按钮体系：全站唯一来源。
   变体：.md-btn（基础）/ .primary（主操作）/ .ghost（次操作）/ .danger（危险，如删除）
   尺寸：.md-btn.sm（紧凑，用于表格行内、工具条等小按钮）
   颜色全部走 --md-* 主题变量，深浅色主题自动适配。 */
.md-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--md-item);
  background: rgba(126, 231, 255, .08);
  border-color: var(--md-line);
  cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.md-btn.primary {
  background: linear-gradient(135deg, var(--md-accent), var(--md-accent-2));
  color: var(--md-ink);
  font-weight: 700;
  border-color: transparent;
}
.md-btn.primary:hover:enabled { filter: brightness(1.07); }
.md-btn.ghost { background: var(--md-ghost-bg); border-color: var(--md-line); color: var(--md-item); }
.md-btn.ghost:hover:enabled { background: var(--md-accent-soft); color: var(--md-head); }
/* 危险操作（删除等）：淡红描边 + 红字，hover 加深 */
.md-btn.danger {
  background: var(--md-err-bg);
  border-color: var(--md-err-line);
  color: var(--md-err-text);
}
.md-btn.danger:hover:enabled {
  background: var(--md-err-line);
  border-color: var(--md-err-text);
  color: var(--md-err-text);
}
/* 小号：表格行内、工具条等窄空间 */
.md-btn.sm {
  flex: none;
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 8px;
}
/* 选中态：用于视图切换这类「二选一」按钮组 */
.md-btn.on {
  border-color: var(--md-accent);
  background: var(--md-accent-soft);
  color: var(--md-head);
  font-weight: 700;
}
.md-btn:disabled { opacity: .45; cursor: not-allowed; }

/* 图标按钮：正方形、只放一个图标，含义靠 title 悬停提示。
   用法：<button className="md-iconbtn" title="编辑">…</button>
   变体：.danger（删除等危险操作）。 */
.md-iconbtn {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  color: var(--md-accent);
  background: var(--md-ghost-bg);
  border: 1px solid var(--md-line);
  border-radius: 6px;
  transition: background .15s, color .15s, border-color .15s;
}
.md-iconbtn:hover { background: var(--md-accent-soft); color: var(--md-accent); }
.md-iconbtn.danger {
  color: var(--md-err-text);
  background: var(--md-err-bg);
  border-color: var(--md-err-line);
}
.md-iconbtn.danger:hover { background: var(--md-err-line); color: var(--md-err-text); }
/* 结果态变体：图标按钮兼做「验证」时，用颜色反馈通过 / 不通过 */
.md-iconbtn.ok { color: var(--md-ok-text); border-color: rgba(75, 224, 140, .55); }
.md-iconbtn.err { color: var(--md-err-text); border-color: rgba(229, 83, 83, .6); }
.md-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
.md-iconbtn:disabled:hover { background: var(--md-ghost-bg); color: var(--md-accent); }
.md-iconbtn.ok:disabled:hover { color: var(--md-ok-text); }
.md-iconbtn.err:disabled:hover { color: var(--md-err-text); }
.md-iconbtn svg { width: 14px; height: 14px; display: block; }
.md-msg { min-height: 16px; margin-top: 10px; font-size: 12px; color: var(--md-muted); }
.md-msg.err { color: var(--md-err-text); }

/* ---------------- 全站统一：图片上传区（ReactBits.ImagePicker） ----------------
   原生 <input type="file"> 隐藏，自绘上传框：点击选图，选中后显示缩略图 + ✕ 移除。 */
.md-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 118px;
  padding: 12px;
  border: 1px dashed var(--md-line-2);
  border-radius: 9px;
  background: var(--md-input-bg);
  color: var(--md-muted);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, background .15s;
}
.md-upload:hover { border-color: var(--md-accent-line); color: var(--md-accent); }
.md-upload-input { display: none; }
.md-upload-plus { font-size: 13px; }
.md-upload-hint { font-size: 11.5px; color: var(--md-muted); opacity: .8; }
.md-upload.has-img { padding: 6px; border-style: solid; border-color: var(--md-line); }
.md-upload-img {
  max-width: 100%;
  max-height: 150px;
  border-radius: 6px;
  object-fit: contain;
  display: block;
}
.md-upload-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--md-line);
  border-radius: 6px;
  background: var(--md-ghost-bg);
  color: var(--md-muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.md-upload-x:hover { color: var(--md-err-text); border-color: var(--md-err-line); background: var(--md-err-bg); }

.md-msg.ok { color: var(--md-ok-text); }

/* ============================================================
   共享 React Bits 组件样式（对应 /shared/bits.js）
   ============================================================ */

/* SpotlightCard：鼠标跟随高光 */
.bits-spot { position: relative; }
.bits-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%),
              rgba(79, 209, 255, .16), transparent 62%);
  opacity: 0;
  transition: opacity .25s;
}
.bits-spot:hover::before { opacity: 1; }
.bits-spot > * { position: relative; z-index: 1; }

/* AnimatedContent：入场动效 */
.bits-in { animation: bitsFadeUp .55s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes bitsFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ShinyText：标题流光 */
.bits-shiny {
  background: linear-gradient(90deg, var(--md-shiny-a), var(--md-shiny-b) 42%, var(--md-shiny-a) 68%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: bitsShiny 7s linear infinite;
}
@keyframes bitsShiny {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

/* ---------------- 响应式：窄屏侧栏变抽屉 ---------------- */
@media (max-width: 860px) {
  .md-burger { display: inline-flex; }
  .md-side {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 0;
    width: 167px !important;
    transform: translateX(-100%);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .55);
  }
  .md-side.open { transform: none; }
  .md-side.mini .md-brand-txt { display: block; }
  .md-side.mini .md-item .txt { display: block; }
  .md-side.mini .md-group-hd { display: flex; }
  .md-side.mini .md-item { justify-content: flex-start; padding: 8px 10px; }
  .md-fold { display: none; }
  .md-drawer-mask.show {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 45;
    background: rgba(2, 6, 12, .55);
  }
  .md-uname { max-width: 120px; }
  .md-uname em { display: none; }
}
.md-drawer-mask { display: none; }

/* ---------------- 响应式：手机竖屏（≤640） ----------------
   抽屉式侧栏已经在 860 断点接管导航，这一段只处理「一屏之内怎么放」：
   顶栏别把姓名挤断、弹窗别高过屏幕、按钮要手指点得中。 */
@media (max-width: 640px) {
  .md-top { padding: 0 10px 0 8px; gap: 8px; }
  /* 手机号带括号太长，会把姓名挤成省略号；窄屏只留姓名 */
  .md-uname { max-width: 42vw; }
  .md-uname i { display: none; }
  .md-uname em { display: none; }
  .md-qbtn { padding: 0 10px; }
  /* 抽屉加宽一点，手指更好点 */
  .md-side { width: 208px !important; }

  /* 弹窗：高度受限，长内容内部滚动 */
  .md-mask { padding: 12px; }
  .md-modal,
  .md-modal.md-confirm {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 18px;
  }
  .md-actions { gap: 8px; }

  /* 触摸目标：图标按钮 26px 太小，撑到 34；小号按钮保底 32 */
  .md-btn { min-height: 38px; }
  .md-btn.sm { min-height: 32px; }
  .md-iconbtn { width: 34px; height: 34px; }
}

/* ===================== 外观主题（系统配置页可切换） ===================== */

/* 维护范围：五个主题全部在维护中，各自一套完整色板
   ---------
   - 深色：`:root` 默认值，主维护主题；
   - 浅绿：`[data-theme="light-green"]`，绿调底 + 白卡片 + 近墨绿正文；
   - 浅蓝 / 浅粉 / 浅灰：各自一套色板（底 / 卡片 / 表头 / 正文 / 次要 / 主色），
     色调统一，切主题能明显看出差别。
   统一口径：正文、次要文字、主色在自己卡片底色上的对比度都要 ≥ 4.5:1，
   由 tests/test_theme_scope.py 的对比度断言客观守着（别靠肉眼）。
   纪律：页面样式一律引用 `--pg-*` / `--md-*`，不要再写死色值，
   否则换主题时又会出现「浅底 + 深卡片 + 浅灰字」。 */

/* ---------- 一、中性浅色底座（各浅色主题的公共兜底） ---------- */
[data-theme^="light"] {
  /* 外壳 */
  --md-bg: #eef3f8;
  --md-bg2: #e3ebf3;
  --md-panel: #ffffff;
  --md-pop-solid: #ffffff;
  --md-panel-2: #f6fafd;
  --md-line: rgba(40, 90, 140, .16);
  --md-line-soft: rgba(40, 90, 140, .1);
  --md-cyan: #1d6ea8;
  --md-cyan-2: #175c8c;
  --md-violet: #6f4fc4;
  --md-text: #21364a;
  --md-text-2: #3f5872;
  --md-muted: #5d7488;
  --md-head: #102a42;
  --md-active: #0b2236;
  --md-item: #38526b;
  --md-item-hover: #0f2b44;
  --md-icon: #47708f;
  --md-em: #6f4fc4;
  --md-placeholder: #8b9cae;
  --md-accent: #1d6ea8;
  --md-accent-2: #2b5f96;
  --md-accent-glow: rgba(47, 143, 214, .18);
  --md-accent-line: rgba(47, 143, 214, .45);
  --md-accent-soft: rgba(47, 143, 214, .1);
  --md-ok: #0f6329;
  --md-warn: #6f4a05;

  /* 语义补充 */
  --md-ink: #ffffff;
  --md-work-bg: #e9eff5;
  --md-work-grid: rgba(40, 90, 140, .055);
  --md-work-glow-1: rgba(47, 143, 214, .12);
  --md-work-glow-2: rgba(124, 58, 237, .09);
  --md-logo-a: #1d6ea8;
  --md-logo-b: #5b41ad;
  --md-shiny-a: #1d6ea8;
  --md-shiny-b: #7c3aed;
  --md-ghost-bg: rgba(40, 90, 140, .05);
  --md-top-bg: linear-gradient(180deg, #ffffff, #f6fafd);
  --md-top-shadow: rgba(20, 45, 35, .1);
  --md-chip-bg: #ffffff;
  --md-input-bg: #ffffff;
  --md-ok-text: #146c39;
  --md-ok-bg: rgba(21, 128, 61, .1);
  --md-ok-line: rgba(21, 128, 61, .26);
  --md-err-text: #b42318;
  --md-err-bg: rgba(180, 35, 24, .08);
  --md-err-line: rgba(180, 35, 24, .24);
  --md-warn-text: #6f4a05;

  /* 页面色板 */
  --pg-page: #eef3f8;
  --pg-card-bg: linear-gradient(180deg, #ffffff, #f8fbfd);
  --pg-pop-bg: linear-gradient(180deg, #ffffff, #f4f8fc);
  --pg-pop-solid: #ffffff;
  --pg-th-bg: #e8eef6;
  --pg-inner-bg: #f2f6fa;
  --pg-tint-1: rgba(47, 143, 214, .05);
  --pg-tint-2: rgba(47, 143, 214, .09);
  --pg-tint-3: rgba(47, 143, 214, .13);
  --pg-mask: rgba(15, 35, 55, .34);
  --pg-shadow: rgba(18, 45, 32, .14);
  --pg-line: rgba(40, 90, 140, .13);
  --pg-line-2: rgba(40, 90, 140, .2);
  --pg-line-3: rgba(40, 90, 140, .3);
  --pg-text: #2a3f52;
  --pg-strong: #17293a;
  --pg-title: #102a42;
  --pg-num: #1d3145;
  --pg-muted: #5a7288;
  --pg-muted-2: #5b7286;
  --pg-label: #17527d;
  --pg-accent: #1d6ea8;
  --pg-accent-2: #2b5f96;
  --pg-ink: #ffffff;
  --pg-ok: #0f6329;
  --pg-ok-bg: rgba(21, 128, 61, .1);
  --pg-ok-line: rgba(21, 128, 61, .26);
  --pg-warn: #6f4a05;
  --pg-warn-bg: rgba(138, 90, 6, .1);
  --pg-warn-line: rgba(138, 90, 6, .26);
  --pg-danger: #b42318;
  --pg-danger-bg: rgba(180, 35, 24, .08);
  --pg-danger-line: rgba(180, 35, 24, .24);
  color-scheme: light;
}

/* ---------- 二、浅蓝 ---------- */
/* 设计口径：蓝调底 #eaf1f8 + 白卡片 + 近墨蓝正文 #22394f（白底 11.9:1），
   次要 #566e85（5.3:1），主色 #1a6ba6（5.7:1，可直接做文字色）。 */
[data-theme="light-blue"] {
  /* 外壳 */
  --md-bg: #eaf1f8;
  --md-bg2: #e0e9f2;
  --md-panel: #ffffff;
  --md-pop-solid: #ffffff;
  --md-panel-2: #f5f9fd;
  --md-line: rgba(30, 90, 150, .18);
  --md-line-soft: rgba(30, 90, 150, .11);
  --md-cyan: #1a6ba6;
  --md-cyan-2: #155a8d;
  --md-violet: #5b52c6;
  --md-text: #22394f;
  --md-text-2: #3d5872;
  --md-muted: #4a6076;
  --md-head: #0f2a42;
  --md-active: #0a2236;
  --md-item: #35526b;
  --md-item-hover: #0e2b44;
  --md-icon: #3d647f;
  --md-em: #5b52c6;
  --md-placeholder: #8798aa;
  --md-accent: #1a6ba6;
  --md-accent-2: #2b5f96;
  --md-accent-glow: rgba(26, 107, 166, .18);
  --md-accent-line: rgba(26, 107, 166, .45);
  --md-accent-soft: rgba(26, 107, 166, .1);
  --md-ok: #0f6329;
  --md-warn: #6f4a05;

  /* 语义补充 */
  --md-ink: #ffffff;
  --md-work-bg: #e9eff5;
  --md-work-grid: rgba(30, 90, 150, .05);
  --md-work-glow-1: rgba(26, 107, 166, .12);
  --md-work-glow-2: rgba(124, 58, 237, .09);
  --md-logo-a: #1a6ba6;
  --md-logo-b: #5546ad;
  --md-shiny-a: #1a6ba6;
  --md-shiny-b: #7c3aed;
  --md-ghost-bg: rgba(30, 90, 150, .05);
  --md-top-bg: linear-gradient(180deg, #ffffff, #f6fafd);
  --md-top-shadow: rgba(20, 45, 35, .1);
  --md-chip-bg: #ffffff;
  --md-input-bg: #ffffff;
  --md-ok-text: #146c39;
  --md-ok-bg: rgba(21, 128, 61, .1);
  --md-ok-line: rgba(21, 128, 61, .26);
  --md-err-text: #b42318;
  --md-err-bg: rgba(180, 35, 24, .08);
  --md-err-line: rgba(180, 35, 24, .24);
  --md-warn-text: #6f4a05;

  /* 页面色板 */
  --pg-page: #eaf1f8;
  --pg-card-bg: linear-gradient(180deg, #ffffff, #f8fbfd);
  --pg-pop-bg: linear-gradient(180deg, #ffffff, #f4f8fc);
  --pg-pop-solid: #ffffff;
  --pg-th-bg: #e6edf6;
  --pg-inner-bg: #f1f6fa;
  --pg-tint-1: rgba(26, 107, 166, .05);
  --pg-tint-2: rgba(26, 107, 166, .09);
  --pg-tint-3: rgba(26, 107, 166, .13);
  --pg-mask: rgba(15, 35, 55, .34);
  --pg-shadow: rgba(18, 45, 32, .14);
  --pg-line: rgba(30, 90, 150, .13);
  --pg-line-2: rgba(30, 90, 150, .2);
  --pg-line-3: rgba(30, 90, 150, .3);
  --pg-text: #22394f;
  --pg-strong: #16293a;
  --pg-title: #0f2a42;
  --pg-num: #1c3145;
  --pg-muted: #4a6076;
  --pg-muted-2: #4b6177;
  --pg-label: #14527d;
  --pg-accent: #1a6ba6;
  --pg-accent-2: #2b5f96;
  --pg-ink: #ffffff;
}

/* ---------- 三、浅绿（重新设计） ---------- */
/* 设计口径：
   底 → 浅绿灰 #e9f2ec（比纯白柔和，不刺眼）；
   卡片 → 纯白 #fff，与底色拉开明度差，块感清楚；
   正文 → 近墨绿 #24382c（白底 12.5:1，浅绿底 11.3:1）；
   次要 → #4b6354（白底 6.5:1，不会糊成一片）；
   主色 → 深绿 #177a44（白底 5.4:1，可直接做文字色；白字压在上面也是 5.4:1）；
   表头 → #e6f2ea 淡绿底 + #14623c 深绿字（6.2:1）。 */
[data-theme="light-green"] {
  /* 外壳 */
  --md-bg: #e4efe8;
  --md-bg2: #dbe9e1;
  --md-panel: #ffffff;
  --md-pop-solid: #ffffff;
  --md-panel-2: #f5faf7;
  --md-line: rgba(23, 80, 50, .18);
  --md-line-soft: rgba(23, 80, 50, .11);
  --md-cyan: #14703d;
  --md-cyan-2: #0f6234;
  --md-violet: #2f7d63;
  --md-text: #24382c;
  --md-text-2: #3d5546;
  --md-muted: #4b6354;
  --md-head: #122a1d;
  --md-active: #0d2216;
  --md-item: #34503f;
  --md-item-hover: #0f2a1b;
  --md-icon: #46705a;
  --md-em: #1f6b52;
  --md-placeholder: #7f9a8b;
  --md-accent: #14703d;
  --md-accent-2: #0f6234;
  --md-accent-glow: rgba(20, 112, 61, .18);
  --md-accent-line: rgba(20, 112, 61, .45);
  --md-accent-soft: rgba(20, 112, 61, .09);
  --md-ok: #0f6329;
  --md-warn: #6f4a05;

  /* 语义补充 */
  --md-ink: #ffffff;
  --md-work-bg: #e6f0ea;
  --md-work-grid: rgba(23, 80, 50, .05);
  --md-work-glow-1: rgba(23, 122, 68, .09);
  --md-work-glow-2: rgba(60, 150, 110, .07);
  --md-logo-a: #14703d;
  --md-logo-b: #0b5230;
  --md-shiny-a: #14703d;
  --md-shiny-b: #4aa877;
  --md-ghost-bg: rgba(23, 80, 50, .05);
  --md-top-bg: linear-gradient(180deg, #ffffff, #f7fbf8);
  --md-top-shadow: rgba(12, 42, 26, .1);
  --md-chip-bg: #ffffff;
  --md-input-bg: #ffffff;
  --md-ok-text: #0f6329;
  --md-ok-bg: rgba(20, 131, 63, .1);
  --md-ok-line: rgba(20, 131, 63, .26);
  --md-err-text: #b42318;
  --md-err-bg: rgba(180, 35, 24, .08);
  --md-err-line: rgba(180, 35, 24, .24);
  --md-warn-text: #6f4a05;

  /* 页面色板 */
  --pg-page: #e4efe8;
  --pg-card-bg: linear-gradient(180deg, #ffffff, #fbfefc);
  --pg-pop-bg: linear-gradient(180deg, #ffffff, #f6fbf8);
  --pg-pop-solid: #ffffff;
  --pg-th-bg: #e6f2ea;
  --pg-inner-bg: #f2f9f5;
  --pg-tint-1: rgba(23, 122, 68, .05);
  --pg-tint-2: rgba(23, 122, 68, .08);
  --pg-tint-3: rgba(23, 122, 68, .12);
  --pg-mask: rgba(12, 42, 26, .32);
  --pg-shadow: rgba(18, 45, 32, .16);
  --pg-line: rgba(23, 80, 50, .17);
  --pg-line-2: rgba(23, 80, 50, .24);
  --pg-line-3: rgba(23, 80, 50, .3);
  --pg-text: #24382c;
  --pg-strong: #122a1d;
  --pg-title: #102419;
  --pg-num: #1a2f22;
  --pg-muted: #4b6354;
  --pg-muted-2: #4c6456;
  --pg-label: #14623c;
  --pg-accent: #14703d;
  --pg-accent-2: #0f6234;
  --pg-ink: #ffffff;
  --pg-ok: #0f6329;
  --pg-ok-bg: rgba(21, 128, 61, .1);
  --pg-ok-line: rgba(21, 128, 61, .26);
  --pg-warn: #6f4a05;
  --pg-warn-bg: rgba(138, 90, 6, .1);
  --pg-warn-line: rgba(138, 90, 6, .26);
  --pg-danger: #b42318;
  --pg-danger-bg: rgba(180, 35, 24, .08);
  --pg-danger-line: rgba(180, 35, 24, .24);
}

/* ---------- 四、浅色主题的公共结构覆盖（顶栏 / 侧栏 / 工作区等底色） ---------- */
[data-theme^="light"] .md-app { background: var(--md-bg); }
[data-theme^="light"] .md-top {
  background: linear-gradient(180deg, #ffffff, var(--md-panel-2));
  border-bottom-color: var(--md-line-soft);
  box-shadow: 0 1px 0 var(--md-line-soft), 0 6px 20px rgba(20, 50, 40, .07);
}
[data-theme^="light"] .md-side {
  background: linear-gradient(180deg, #ffffff, var(--md-panel-2));
  border-right-color: var(--md-line-soft);
}
[data-theme^="light"] .md-group { background: #ffffff; border-color: var(--md-line); }
[data-theme^="light"] .md-group-hd { background: linear-gradient(180deg, var(--md-accent-soft), transparent); }
[data-theme^="light"] .md-group:hover { border-color: var(--md-accent-line); box-shadow: 0 6px 22px rgba(20, 50, 40, .1); }
[data-theme^="light"] .md-item:hover { background: var(--md-accent-soft); border-color: var(--md-accent-line); }
[data-theme^="light"] .md-solo .md-item { background: var(--md-accent-soft); }
[data-theme^="light"] .md-fold { color: var(--md-muted); background: var(--md-panel-2); }
[data-theme^="light"] .md-burger { background: #ffffff; border-color: var(--md-line); }
[data-theme^="light"] .md-ubtn { border-color: var(--md-line); background: linear-gradient(135deg, var(--md-accent-soft), var(--md-panel-2)); }
[data-theme^="light"] .md-modal {
  background: linear-gradient(180deg, #ffffff, var(--md-panel-2));
  border-color: var(--md-line);
  box-shadow: 0 24px 70px rgba(20, 50, 40, .2), inset 0 1px 0 #ffffff;
}
[data-theme^="light"] .md-input { color: var(--md-head); background: #ffffff; border-color: var(--md-line-2); }
[data-theme^="light"] .md-input::placeholder { color: var(--md-placeholder); }
[data-theme^="light"] .md-nav::-webkit-scrollbar-thumb { background: var(--md-line-3); }
[data-theme^="light"] .md-work::-webkit-scrollbar-thumb { background: var(--md-line-3); }
[data-theme^="light"] .bits-spot::before {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), var(--md-accent-soft), transparent 62%);
}
/* 浅底下辉光要收敛：深色的青色外发光在浅色里会糊成脏边 */
[data-theme^="light"] .md-item.on { box-shadow: inset 0 0 0 1px var(--md-accent-line), 0 4px 14px var(--md-accent-glow); }
[data-theme^="light"] .md-btn.primary { box-shadow: 0 4px 12px var(--md-accent-glow); }
[data-theme^="light"] .md-logo { box-shadow: 0 4px 12px var(--md-accent-glow); }

/* ---------- 五、浅粉（整套粉调色板） ---------- */
/* 设计口径：粉调底 #fbeff5 + 白卡片 + 近墨紫红正文 #452231（白底 13.8:1），
   次要 #7d5a68（5.9:1），主色 #b03a6d（5.7:1）。 */
[data-theme="light-pink"] {
  /* 外壳 */
  --md-bg: #fbeff5;
  --md-bg2: #f7e6ef;
  --md-panel: #ffffff;
  --md-pop-solid: #ffffff;
  --md-panel-2: #fdf6f9;
  --md-line: rgba(140, 60, 100, .18);
  --md-line-soft: rgba(140, 60, 100, .11);
  --md-cyan: #b03a6d;
  --md-cyan-2: #8f2c5a;
  --md-violet: #8f3a72;
  --md-text: #452231;
  --md-text-2: #5c3a4b;
  --md-muted: #755364;
  --md-head: #2e1522;
  --md-active: #240f1a;
  --md-item: #6a4453;
  --md-item-hover: #2c1420;
  --md-icon: #8f4f6c;
  --md-em: #8f3a72;
  --md-placeholder: #a1808e;
  --md-accent: #b03a6d;
  --md-accent-2: #8f2c5a;
  --md-accent-glow: rgba(176, 58, 109, .18);
  --md-accent-line: rgba(176, 58, 109, .45);
  --md-accent-soft: rgba(176, 58, 109, .1);
  --md-ok: #0f6329;
  --md-warn: #6f4a05;

  /* 语义补充 */
  --md-ink: #ffffff;
  --md-work-bg: #fbeef5;
  --md-work-grid: rgba(140, 60, 100, .05);
  --md-work-glow-1: rgba(176, 58, 109, .1);
  --md-work-glow-2: rgba(196, 90, 150, .08);
  --md-logo-a: #b03a6d;
  --md-logo-b: #8a2c55;
  --md-shiny-a: #b03a6d;
  --md-shiny-b: #e08bb0;
  --md-ghost-bg: rgba(140, 60, 100, .05);
  --md-top-bg: linear-gradient(180deg, #ffffff, #fdf6f9);
  --md-top-shadow: rgba(60, 20, 40, .1);
  --md-chip-bg: #ffffff;
  --md-input-bg: #ffffff;
  --md-ok-text: #146c39;
  --md-ok-bg: rgba(21, 128, 61, .1);
  --md-ok-line: rgba(21, 128, 61, .26);
  --md-err-text: #b42318;
  --md-err-bg: rgba(180, 35, 24, .08);
  --md-err-line: rgba(180, 35, 24, .24);
  --md-warn-text: #6f4a05;

  /* 页面色板 */
  --pg-page: #fbeff5;
  --pg-card-bg: linear-gradient(180deg, #ffffff, #fffafc);
  --pg-pop-bg: linear-gradient(180deg, #ffffff, #fdf6f9);
  --pg-pop-solid: #ffffff;
  --pg-th-bg: #fbe4ee;
  --pg-inner-bg: #fdf3f8;
  --pg-tint-1: rgba(176, 58, 109, .05);
  --pg-tint-2: rgba(176, 58, 109, .09);
  --pg-tint-3: rgba(176, 58, 109, .13);
  --pg-mask: rgba(55, 15, 35, .32);
  --pg-shadow: rgba(70, 25, 45, .16);
  --pg-line: rgba(140, 60, 100, .17);
  --pg-line-2: rgba(140, 60, 100, .24);
  --pg-line-3: rgba(140, 60, 100, .3);
  --pg-text: #452231;
  --pg-strong: #2e1522;
  --pg-title: #2a1320;
  --pg-num: #3a1c2b;
  --pg-muted: #755364;
  --pg-muted-2: #765465;
  --pg-label: #8f2c5a;
  --pg-accent: #b03a6d;
  --pg-accent-2: #8f2c5a;
  --pg-ink: #ffffff;
}

/* ---------- 六、浅灰（整套中性灰色板） ---------- */
/* 设计口径：中性灰底 #eef0f2 + 白卡片 + 近墨蓝灰正文 #26303a（白底 12.6:1），
   次要 #566270（6.2:1），主色 #43566b（7.5:1）。 */
[data-theme="light-gray"] {
  /* 外壳 */
  --md-bg: #eef0f2;
  --md-bg2: #e6e9ec;
  --md-panel: #ffffff;
  --md-pop-solid: #ffffff;
  --md-panel-2: #f7f8fa;
  --md-line: rgba(50, 65, 80, .18);
  --md-line-soft: rgba(50, 65, 80, .11);
  --md-cyan: #43566b;
  --md-cyan-2: #4a5c6e;
  --md-violet: #525d6b;
  --md-text: #26303a;
  --md-text-2: #3d4753;
  --md-muted: #4e5a67;
  --md-head: #131a21;
  --md-active: #0d1319;
  --md-item: #3f4a57;
  --md-item-hover: #141a20;
  --md-icon: #525d6b;
  --md-em: #525d6b;
  --md-placeholder: #8a939d;
  --md-accent: #43566b;
  --md-accent-2: #4a5c6e;
  --md-accent-glow: rgba(67, 86, 107, .18);
  --md-accent-line: rgba(67, 86, 107, .45);
  --md-accent-soft: rgba(67, 86, 107, .1);
  --md-ok: #0f6329;
  --md-warn: #6f4a05;

  /* 语义补充 */
  --md-ink: #ffffff;
  --md-work-bg: #edeff1;
  --md-work-grid: rgba(50, 65, 80, .05);
  --md-work-glow-1: rgba(67, 86, 107, .1);
  --md-work-glow-2: rgba(90, 95, 122, .08);
  --md-logo-a: #43566b;
  --md-logo-b: #2f3d4c;
  --md-shiny-a: #43566b;
  --md-shiny-b: #7d8b9a;
  --md-ghost-bg: rgba(50, 65, 80, .05);
  --md-top-bg: linear-gradient(180deg, #ffffff, #f8f9fb);
  --md-top-shadow: rgba(25, 35, 45, .1);
  --md-chip-bg: #ffffff;
  --md-input-bg: #ffffff;
  --md-ok-text: #146c39;
  --md-ok-bg: rgba(21, 128, 61, .1);
  --md-ok-line: rgba(21, 128, 61, .26);
  --md-err-text: #b42318;
  --md-err-bg: rgba(180, 35, 24, .08);
  --md-err-line: rgba(180, 35, 24, .24);
  --md-warn-text: #6f4a05;

  /* 页面色板 */
  --pg-page: #eef0f2;
  --pg-card-bg: linear-gradient(180deg, #ffffff, #fafbfc);
  --pg-pop-bg: linear-gradient(180deg, #ffffff, #f6f7f9);
  --pg-pop-solid: #ffffff;
  --pg-th-bg: #e7eaee;
  --pg-inner-bg: #f2f4f6;
  --pg-tint-1: rgba(67, 86, 107, .05);
  --pg-tint-2: rgba(67, 86, 107, .09);
  --pg-tint-3: rgba(67, 86, 107, .13);
  --pg-mask: rgba(20, 30, 40, .32);
  --pg-shadow: rgba(25, 35, 45, .16);
  --pg-line: rgba(50, 65, 80, .16);
  --pg-line-2: rgba(50, 65, 80, .22);
  --pg-line-3: rgba(50, 65, 80, .3);
  --pg-text: #26303a;
  --pg-strong: #131a21;
  --pg-title: #111820;
  --pg-num: #1b242d;
  --pg-muted: #4e5a67;
  --pg-muted-2: #4f5b68;
  --pg-label: #3d4c5b;
  --pg-accent: #43566b;
  --pg-accent-2: #4a5c6e;
  --pg-ink: #ffffff;
}

/* ============================================================
   权限门禁（权限配置生效）
   ------------------------------------------------------------
   .md-hidden  ：导航里没权限的功能项（以及整组一项不剩时的分组标题）
   .md-blocked ：无权页面的工作区（页面自己也照常渲染，只是看不见）
   .md-denied  ：顶在工作区位置的「无权限访问」提示块
   ============================================================ */
.md-hidden { display: none !important; }
.md-work.md-blocked { display: none; }

.md-denied {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--md-text);
  background: radial-gradient(700px 320px at 50% 0%, var(--md-accent-soft), transparent 70%);
}
.md-denied .ic {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--md-line-soft);
  background: var(--md-chip-bg);
  color: var(--md-muted);
  margin-bottom: 4px;
}
.md-denied .ic svg { width: 22px; height: 22px; }
.md-denied h3 { margin: 0; font-size: 17px; color: var(--md-head, var(--md-text)); }
.md-denied p { margin: 0; font-size: 13px; color: var(--md-text-2); }
.md-denied .hint { font-size: 12px; color: var(--md-muted); }
.md-denied .md-btn {
  margin-top: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* 父级是 column flex：不写死就会沿主轴被拉成一条竖条 */
  flex: none;
  align-self: center;
}